Add font source/family settings matching v1.4.0 feature set
Restored the font configuration that was missing from the Tauri rewrite. Settings now include: - Font Source: System Font, Web-Safe, Google Font - System Font: text input for any installed font family - Web-Safe: dropdown with 13 universal fonts (Arial, Courier New, etc.) - Google Font: dropdown with 35 fonts organized by category (Sans Serif, Serif, Monospace, Display, Handwriting) - Font Size: range slider (8-32px) All font settings are saved to config and applied to the OBS web display and server sync. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
@@ -27,6 +27,10 @@
|
|||||||
let showTimestamps = $state(true);
|
let showTimestamps = $state(true);
|
||||||
let fadeSeconds = $state(10);
|
let fadeSeconds = $state(10);
|
||||||
let maxLines = $state(100);
|
let maxLines = $state(100);
|
||||||
|
let fontSource = $state("System Font");
|
||||||
|
let fontFamily = $state("Courier");
|
||||||
|
let websafeFont = $state("Arial");
|
||||||
|
let googleFont = $state("Roboto");
|
||||||
let fontSize = $state(12);
|
let fontSize = $state(12);
|
||||||
let userColor = $state("#4CAF50");
|
let userColor = $state("#4CAF50");
|
||||||
let textColor = $state("#FFFFFF");
|
let textColor = $state("#FFFFFF");
|
||||||
@@ -99,6 +103,10 @@
|
|||||||
showTimestamps = cfg.display.show_timestamps;
|
showTimestamps = cfg.display.show_timestamps;
|
||||||
fadeSeconds = cfg.display.fade_after_seconds;
|
fadeSeconds = cfg.display.fade_after_seconds;
|
||||||
maxLines = cfg.display.max_lines;
|
maxLines = cfg.display.max_lines;
|
||||||
|
fontSource = cfg.display.font_source ?? "System Font";
|
||||||
|
fontFamily = cfg.display.font_family ?? "Courier";
|
||||||
|
websafeFont = cfg.display.websafe_font ?? "Arial";
|
||||||
|
googleFont = cfg.display.google_font ?? "Roboto";
|
||||||
fontSize = cfg.display.font_size;
|
fontSize = cfg.display.font_size;
|
||||||
userColor = cfg.display.user_color;
|
userColor = cfg.display.user_color;
|
||||||
textColor = cfg.display.text_color;
|
textColor = cfg.display.text_color;
|
||||||
@@ -174,6 +182,10 @@
|
|||||||
show_timestamps: showTimestamps,
|
show_timestamps: showTimestamps,
|
||||||
fade_after_seconds: fadeSeconds,
|
fade_after_seconds: fadeSeconds,
|
||||||
max_lines: maxLines,
|
max_lines: maxLines,
|
||||||
|
font_source: fontSource,
|
||||||
|
font_family: fontFamily,
|
||||||
|
websafe_font: websafeFont,
|
||||||
|
google_font: googleFont,
|
||||||
font_size: fontSize,
|
font_size: fontSize,
|
||||||
user_color: userColor,
|
user_color: userColor,
|
||||||
text_color: textColor,
|
text_color: textColor,
|
||||||
@@ -485,6 +497,95 @@
|
|||||||
bind:value={maxLines}
|
bind:value={maxLines}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="font-source">Font Source</label>
|
||||||
|
<select id="font-source" bind:value={fontSource}>
|
||||||
|
<option value="System Font">System Font</option>
|
||||||
|
<option value="Web-Safe">Web-Safe</option>
|
||||||
|
<option value="Google Font">Google Font</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{#if fontSource === "System Font"}
|
||||||
|
<div class="field">
|
||||||
|
<label for="font-family">System Font Family</label>
|
||||||
|
<input id="font-family" type="text" bind:value={fontFamily} placeholder="Courier" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if fontSource === "Web-Safe"}
|
||||||
|
<div class="field">
|
||||||
|
<label for="websafe-font">Web-Safe Font</label>
|
||||||
|
<select id="websafe-font" bind:value={websafeFont}>
|
||||||
|
<option value="Arial">Arial</option>
|
||||||
|
<option value="Arial Black">Arial Black</option>
|
||||||
|
<option value="Comic Sans MS">Comic Sans MS</option>
|
||||||
|
<option value="Courier New">Courier New</option>
|
||||||
|
<option value="Georgia">Georgia</option>
|
||||||
|
<option value="Impact">Impact</option>
|
||||||
|
<option value="Lucida Console">Lucida Console</option>
|
||||||
|
<option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
|
||||||
|
<option value="Palatino Linotype">Palatino Linotype</option>
|
||||||
|
<option value="Tahoma">Tahoma</option>
|
||||||
|
<option value="Times New Roman">Times New Roman</option>
|
||||||
|
<option value="Trebuchet MS">Trebuchet MS</option>
|
||||||
|
<option value="Verdana">Verdana</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if fontSource === "Google Font"}
|
||||||
|
<div class="field">
|
||||||
|
<label for="google-font">Google Font</label>
|
||||||
|
<select id="google-font" bind:value={googleFont}>
|
||||||
|
<optgroup label="Sans Serif">
|
||||||
|
<option value="Roboto">Roboto</option>
|
||||||
|
<option value="Open Sans">Open Sans</option>
|
||||||
|
<option value="Lato">Lato</option>
|
||||||
|
<option value="Montserrat">Montserrat</option>
|
||||||
|
<option value="Poppins">Poppins</option>
|
||||||
|
<option value="Nunito">Nunito</option>
|
||||||
|
<option value="Raleway">Raleway</option>
|
||||||
|
<option value="Ubuntu">Ubuntu</option>
|
||||||
|
<option value="Rubik">Rubik</option>
|
||||||
|
<option value="Work Sans">Work Sans</option>
|
||||||
|
<option value="Inter">Inter</option>
|
||||||
|
<option value="Outfit">Outfit</option>
|
||||||
|
<option value="Quicksand">Quicksand</option>
|
||||||
|
<option value="Comfortaa">Comfortaa</option>
|
||||||
|
<option value="Varela Round">Varela Round</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Serif">
|
||||||
|
<option value="Playfair Display">Playfair Display</option>
|
||||||
|
<option value="Merriweather">Merriweather</option>
|
||||||
|
<option value="Lora">Lora</option>
|
||||||
|
<option value="PT Serif">PT Serif</option>
|
||||||
|
<option value="Crimson Text">Crimson Text</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Monospace">
|
||||||
|
<option value="Roboto Mono">Roboto Mono</option>
|
||||||
|
<option value="Source Code Pro">Source Code Pro</option>
|
||||||
|
<option value="Fira Code">Fira Code</option>
|
||||||
|
<option value="JetBrains Mono">JetBrains Mono</option>
|
||||||
|
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Display">
|
||||||
|
<option value="Bebas Neue">Bebas Neue</option>
|
||||||
|
<option value="Oswald">Oswald</option>
|
||||||
|
<option value="Righteous">Righteous</option>
|
||||||
|
<option value="Bangers">Bangers</option>
|
||||||
|
<option value="Permanent Marker">Permanent Marker</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Handwriting">
|
||||||
|
<option value="Pacifico">Pacifico</option>
|
||||||
|
<option value="Lobster">Lobster</option>
|
||||||
|
<option value="Dancing Script">Dancing Script</option>
|
||||||
|
<option value="Caveat">Caveat</option>
|
||||||
|
<option value="Satisfy">Satisfy</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
<p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
|
||||||
|
Browse more at <a href="https://fonts.google.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">fonts.google.com</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="font-size">Font Size: {fontSize}px</label>
|
<label for="font-size">Font Size: {fontSize}px</label>
|
||||||
<input
|
<input
|
||||||
|
|||||||
Reference in New Issue
Block a user