Frontend: Improve subtitles

- Size relative to screen height - Text stroke for transparent background - Transparent background is now the default
AgustinSRG · Sep 29, 2024 · cf7b641 · cf7b641
1 parent 6400e31
commit cf7b641
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 36 deletions.
diff --git a/frontend/src/components/player/AudioPlayer.vue b/frontend/src/components/player/AudioPlayer.vue
@@ -107,25 +107,34 @@
             :errorMessage="mediaErrorMessage"
         ></PlayerEncodingPending>
 
-        <div class="player-subtitles-container" :class="{ 'controls-hidden': !showControls }">
+        <div
+            class="player-subtitles-container"
+            :class="{
+                'controls-hidden': !showControls,
+            }"
+        >
             <div
-                class="player-subtitles"
-                v-if="subtitles"
-                v-html="subtitles"
+                class="player-subtitles-container-inner"
                 :class="{
-                    'player-subtitles-s': subtitlesSize === 's',
-                    'player-subtitles-m': subtitlesSize === 'm',
-                    'player-subtitles-l': subtitlesSize === 'l',
-                    'player-subtitles-xl': subtitlesSize === 'xl',
-                    'player-subtitles-xxl': subtitlesSize === 'xxl',
-
                     'player-subtitles-bg-0': subtitlesBg === '0',
                     'player-subtitles-bg-25': subtitlesBg === '25',
                     'player-subtitles-bg-50': subtitlesBg === '50',
                     'player-subtitles-bg-75': subtitlesBg === '75',
                     'player-subtitles-bg-100': subtitlesBg === '100',
                 }"
-            ></div>
+            >
+                <div
+                    class="player-subtitles"
+                    v-html="subtitles"
+                    :class="{
+                        'player-subtitles-s': subtitlesSize === 's',
+                        'player-subtitles-m': subtitlesSize === 'm',
+                        'player-subtitles-l': subtitlesSize === 'l',
+                        'player-subtitles-xl': subtitlesSize === 'xl',
+                        'player-subtitles-xxl': subtitlesSize === 'xxl',
+                    }"
+                ></div>
+            </div>
         </div>
 
         <TimeSlicesEditHelper

diff --git a/frontend/src/components/player/VideoPlayer.vue b/frontend/src/components/player/VideoPlayer.vue
@@ -119,25 +119,35 @@
             :errorMessage="mediaErrorMessage"
         ></PlayerEncodingPending>
 
-        <div class="player-subtitles-container" :class="{ 'controls-hidden': !showControls || !userControls }">
+        <div
+            class="player-subtitles-container"
+            v-if="subtitles"
+            :class="{
+                'controls-hidden': !showControls || !userControls,
+            }"
+        >
             <div
-                class="player-subtitles"
-                v-if="subtitles"
-                v-html="subtitles"
+                class="player-subtitles-container-inner"
                 :class="{
-                    'player-subtitles-s': subtitlesSize === 's',
-                    'player-subtitles-m': subtitlesSize === 'm',
-                    'player-subtitles-l': subtitlesSize === 'l',
-                    'player-subtitles-xl': subtitlesSize === 'xl',
-                    'player-subtitles-xxl': subtitlesSize === 'xxl',
-
                     'player-subtitles-bg-0': subtitlesBg === '0',
                     'player-subtitles-bg-25': subtitlesBg === '25',
                     'player-subtitles-bg-50': subtitlesBg === '50',
                     'player-subtitles-bg-75': subtitlesBg === '75',
                     'player-subtitles-bg-100': subtitlesBg === '100',
                 }"
-            ></div>
+            >
+                <div
+                    class="player-subtitles"
+                    v-html="subtitles"
+                    :class="{
+                        'player-subtitles-s': subtitlesSize === 's',
+                        'player-subtitles-m': subtitlesSize === 'm',
+                        'player-subtitles-l': subtitlesSize === 'l',
+                        'player-subtitles-xl': subtitlesSize === 'xl',
+                        'player-subtitles-xxl': subtitlesSize === 'xxl',
+                    }"
+                ></div>
+            </div>
         </div>
 
         <TimeSlicesEditHelper

diff --git a/frontend/src/control/player-preferences.ts b/frontend/src/control/player-preferences.ts
@@ -556,7 +556,7 @@ const LS_KEY_SUBTITLES_BG = "player-pref-subtitles-bg";
  * @returns The subtitles background style
  */
 export function getSubtitlesBackground(): string {
-    return fetchFromLocalStorageCache(LS_KEY_SUBTITLES_BG, "75") + "";
+    return fetchFromLocalStorageCache(LS_KEY_SUBTITLES_BG, "0") + "";
 }
 
 /**

diff --git a/frontend/src/style/player/subtitles.css b/frontend/src/style/player/subtitles.css
@@ -6,39 +6,68 @@
     left: 0;
     bottom: 70px;
     width: 100%;
-    padding: 1rem;
-    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .player-subtitles-container.controls-hidden {
     bottom: 0;
 }
 
+.player-subtitles-container-inner {
+    padding: 1rem;
+    text-align: center;
+}
+
 .player-subtitles {
     display: inline;
     color: var(--theme-fg-color);
     padding: 0.5rem;
-    font-weight: bold;
+    font-weight: 700;
+    font-family: Arial, Helvetica, sans-serif;
+    --base-subtitles-section: 0.035;
+    --base-subtitles-size: calc((100vh - 56px - 56px) * var(--base-subtitles-section));
+    font-size: var(--base-subtitles-size);
+}
+
+.full-screen .player-subtitles {
+    --base-subtitles-size: calc(100vh * var(--base-subtitles-section));
+}
+
+@media (max-height: 650px) {
+    .player-subtitles {
+        --base-subtitles-size: 20px;
+    }
+    .full-screen .player-subtitles {
+        --base-subtitles-size: 22px;
+    }
+}
+
+.player-subtitles-bg-0 .player-subtitles {
+    -webkit-text-stroke: thick var(--bg-opaque-100);
+    paint-order: stroke fill;
+    text-shadow: none;
 }
 
-.player-subtitles-s {
-    font-size: 14px;
+.player-subtitles.player-subtitles-s {
+    font-size: calc(var(--base-subtitles-size) * 0.75);
 }
 
-.player-subtitles-m {
-    font-size: 16px;
+.player-subtitles.player-subtitles-m {
+    font-size: calc(var(--base-subtitles-size) * 1);
 }
 
-.player-subtitles-l {
-    font-size: 24px;
+.player-subtitles.player-subtitles-l {
+    font-size: calc(var(--base-subtitles-size) * 1.5);
 }
 
-.player-subtitles-xl {
-    font-size: 32px;
+.player-subtitles.player-subtitles-xl {
+    font-size: calc(var(--base-subtitles-size) * 2);
 }
 
-.player-subtitles-xxl {
-    font-size: 48px;
+.player-subtitles.player-subtitles-xxl {
+    font-size: calc(var(--base-subtitles-size) * 2.5);
 }
 
 .player-subtitles-bg-0 {