Add audio,subtitle settings

website/src/.vitepress/config/navigation/sidebar.ts

@@ -143,8 +143,8 @@ function defaultSidebar(): DefaultTheme.SidebarItem[] {
 					collapsed: true,
 					items: [
 						{
-							text: "Subtitle styling",
-							link: "/docs/guides/video-player/subtitle-styling",
+							text: "Audio and subtitle settings",
+							link: "/docs/guides/video-player/audio-and-subtitle-settings",
 						}
 					]
 				},

website/src/.vitepress/theme/components/TitleIcon.vue

@@ -107,6 +107,24 @@ const paths = {
             d: 'M19,11h-8v6h8v-6zM23,19L23,4.98C23,3.88 22.1,3 21,3L3,3c-1.1,0 -2,0.88 -2,1.98L1,19c0,1.1 0.9,2 2,2h18c1.1,0 2,-0.9 2,-2zM21,19.02L3,19.02L3,4.97h18v14.05z',
             fill: 'var(--vp-c-text-1)'
         }
+    ],
+    font_family: [
+        {
+            d: 'M14 20V7H9V4H22V7H17V20H14ZM5 20V12H2V9H11V12H8V20H5Z',
+            fill: 'var(--vp-c-text-1)'
+        }
+    ],
+    font_bold: [
+        {
+            d: 'M6.80005 19V5H12.325C13.4084 5 14.4084 5.33333 15.325 6C16.2417 6.66667 16.7 7.59167 16.7 8.775C16.7 9.625 16.5084 10.2792 16.125 10.7375C15.7417 11.1958 15.3834 11.525 15.05 11.725C15.4667 11.9083 15.9292 12.25 16.4375 12.75C16.9459 13.25 17.2 14 17.2 15C17.2 16.4833 16.6584 17.5208 15.575 18.1125C14.4917 18.7042 13.475 19 12.525 19H6.80005ZM9.82505 16.2H12.425C13.225 16.2 13.7125 15.9958 13.8875 15.5875C14.0625 15.1792 14.15 14.8833 14.15 14.7C14.15 14.5167 14.0625 14.2208 13.8875 13.8125C13.7125 13.4042 13.2 13.2 12.35 13.2H9.82505V16.2ZM9.82505 10.5H12.15C12.7 10.5 13.1 10.3583 13.35 10.075C13.6 9.79167 13.725 9.475 13.725 9.125C13.725 8.725 13.5834 8.4 13.3 8.15C13.0167 7.9 12.65 7.775 12.2 7.775H9.82505V10.5Z',
+            fill: 'var(--vp-c-text-1)'
+        }
+    ],
+    font_italic: [
+        {
+            d: 'M5 19V16.5H9L12 7.5H8V5H18V7.5H14.5L11.5 16.5H15V19H5Z',
+            fill: 'var(--vp-c-text-1)'
+        }
     ]
 }
 </script>

website/src/docs/guides/video-player/audio-and-subtitle-settings.md

@@ -0,0 +1,86 @@
+---
+title: Audio and subtitle settings
+titleTemplate: Video player - Guides
+description: Additional settings for audio and subtitle tracks.
+---
+
+<script setup>
+import TitleIcon from "@theme/components/TitleIcon.vue";
+</script>
+
+# Audio and subtitle settings
+
+Additional settings for audio and subtitle tracks.
+
+## Delay
+
+![Delay tab](/docs/guides/video-player/delay.light.webp#light =512x406)
+
+![Delay tab](/docs/guides/video-player/delay.dark.webp#dark =512x406)
+
+### Remember audio delay <Badge text="Off" type="info" />
+
+If enabled, audio delay will be saved. Otherwise it will reset upon exiting the player.
+
+### Audio delay <Badge text="0 ms" type="info" />
+
+Delay for audio, in milliseconds.
+
+### Remember subtitle delay <Badge text="Off" type="info" />
+
+If enabled, audio delay will be saved. Otherwise it will reset upon exiting the player.
+
+### subtitle delay <Badge text="0 ms" type="info" />
+
+Delay for subtitle, in milliseconds.
+
+## Font
+
+![Font tab](/docs/guides/video-player/font.light.webp#light =512x355)
+
+![Font tab](/docs/guides/video-player/font.dark.webp#dark =512x355)
+
+Tab to customize some aspects of the subtitles, along with a preview window.
+
+### <TitleIcon name="font_family"/> Font family <Badge text="Sans serif" type="info" />
+
+<!-- TODO: add link to `data and storage` when/if it get its own page for `Storage location` -->
+Tap to get a dropdown of available fonts placed in the `fonts` subdirectory for `Storage location`.
+
+### Font size <Badge text="55" type="info" />
+
+Font size used.
+
+### <TitleIcon name="font_bold"/> Bold <Badge text="Off" type="info" />
+
+Tap to toggle between bold styling.
+
+### <TitleIcon name="font_italic"/> Bold <Badge text="Off" type="info" />
+
+Tap to toggle between italic styling.
+
+### Override ASS subtitles <Badge text="Off" type="info" />
+
+When enabled, styling will apply to `.ass/.ssa` subtitles as well.
+
+## Color
+
+![Color tab](/docs/guides/video-player/color.light.webp#light =512x346)
+
+![Color tab](/docs/guides/video-player/color.dark.webp#dark =512x346)
+
+### Text <Badge text="#FFFFFFFF" type="info" />
+
+Color of the text. Tap to show sliders.
+
+### Border <Badge text="#FF000000" type="info" />
+
+Color of the text border. Tap to show sliders.
+
+### Background <Badge text="#00000000" type="info" />
+
+Color of the text background. Tap to show sliders.
+
+## Example configurations
+
+TBA

website/src/docs/guides/video-player/index.md

@@ -43,7 +43,7 @@ The icon will only appear if the video contains chapters.
 
 ### <TitleIcon name="video_settings"/> Video settings
 
-Will open a dialog to select `Video quality`, `Subtitle`, or `Audio`. The gear icon <TitleIcon name="settings"/>will open up a new dialog for styling subtitles, which is explained more in [Subtitle styling](/docs/guides/video-player/subtitle-styling).
+Will open a dialog to select `Video quality`, `Subtitle`, or `Audio`. The gear icon <TitleIcon name="settings"/>will open up a new dialog for additional audio and subtitle settings, which is explained more in [Audio and subtitle settings](/docs/guides/video-player/audio-and-subtitle-settings).
 
 ### <TitleIcon name="overflow"/> More player settings