Add subtitle setting for native vs custom element (#5737)

* Fixed subtitles styling in firefox.

* Fixed subtitles styling in firefox.

* Initial changes to support native or custom styling.

* Changes to support native or custom styling.

* linting changes.

* Changes to support native or custom styling.

* Changes to support native or custom styling.

* minor changes.

* indentation changes and simplification changes.

* minor changes.

---------

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>

src/components/subtitlesettings/subtitlesettings.js

@@ -26,6 +26,7 @@ import template from './subtitlesettings.template.html';
 
 function getSubtitleAppearanceObject(context) {
     return {
+        subtitleStyling: context.querySelector('#selectSubtitleStyling').value,
         textSize: context.querySelector('#selectTextSize').value,
         textWeight: context.querySelector('#selectTextWeight').value,
         dropShadow: context.querySelector('#selectDropShadow').value,
@@ -51,6 +52,8 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
 
         context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {}));
 
+        context.querySelector('#selectSubtitleStyling').value = appearanceSettings.subtitleStyling || 'Auto';
+        context.querySelector('#selectSubtitleStyling').dispatchEvent(new CustomEvent('change', {}));
         context.querySelector('#selectTextSize').value = appearanceSettings.textSize || '';
         context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal';
         context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
@@ -117,6 +120,16 @@ function onSubtitleModeChange(e) {
     view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
 }
 
+function onSubtitleStyleChange(e) {
+    const view = dom.parentWithClass(e.target, 'subtitlesettings');
+
+    const subtitleStylingHelperElements = view.querySelectorAll('.subtitleStylingHelp');
+    subtitleStylingHelperElements.forEach((elem)=>{
+        elem.classList.add('hide');
+    });
+    view.querySelector(`.subtitleStyling${this.value}Help`).classList.remove('hide');
+}
+
 function onSubtitleBurnInChange(e) {
     const view = dom.parentWithClass(e.target, 'subtitlesettings');
     const fieldRenderPgs = view.querySelector('.fldRenderPgs');
@@ -180,6 +193,7 @@ function embed(options, self) {
     options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self));
 
     options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange);
+    options.element.querySelector('#selectSubtitleStyling').addEventListener('change', onSubtitleStyleChange);
     options.element.querySelector('#selectSubtitleBurnIn').addEventListener('change', onSubtitleBurnInChange);
     options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange);

src/components/subtitlesettings/subtitlesettings.template.html

@@ -77,6 +77,17 @@
             <div class="fieldDescription">${SubtitleAppearanceSettingsAlsoPassedToCastDevices}</div>
         </div>
 
+        <div class="selectContainer">
+            <select is="emby-select" id="selectSubtitleStyling" label="${LabelSubtitleStyling}">
+                <option value="Auto">${Auto}</option>
+                <option value="Custom">${Custom}</option>
+                <option value="Native">${Native}</option>
+            </select>
+            <div class="fieldDescription subtitleStylingAutoHelp subtitleStylingHelp hide">${AutoSubtitleStylingHelp}</div>
+            <div class="fieldDescription subtitleStylingCustomHelp subtitleStylingHelp hide">${CustomSubtitleStylingHelp}</div>
+            <div class="fieldDescription subtitleStylingNativeHelp subtitleStylingHelp hide">${NativeSubtitleStylingHelp}</div>
+        </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectTextSize" label="${LabelTextSize}">
                 <option value="smaller">${Smaller}</option>

src/plugins/htmlVideoPlayer/plugin.js

@@ -1349,7 +1349,14 @@ export class HtmlVideoPlayer {
     /**
          * @private
          */
-    requiresCustomSubtitlesElement() {
+    requiresCustomSubtitlesElement(userSettings) {
+        const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();
+        switch (subtitleAppearance.subtitleStyling) {
+            case 'Native':
+                return false;
+            case 'Custom':
+                return true;
+            default:
                 // after a system update, ps4 isn't showing anything when creating a track element dynamically
                 // going to have to do it ourselves
                 if (browser.ps4) {
@@ -1365,6 +1372,11 @@ export class HtmlVideoPlayer {
                     return true;
                 }
 
+                // font-size styling does not seem to work natively in firefox. Switching to custom subtitles element for firefox.
+                if (browser.firefox) {
+                    return true;
+                }
+
                 if (browser.iOS) {
                     const userAgent = navigator.userAgent.toLowerCase();
                     // works in the browser but not the native app
@@ -1375,6 +1387,7 @@ export class HtmlVideoPlayer {
 
                 return false;
         }
+    }
 
     /**
          * @private
@@ -1458,7 +1471,9 @@ export class HtmlVideoPlayer {
     /**
          * @private
          */
-    renderTracksEvents(videoElement, track, item, targetTextTrackIndex = PRIMARY_TEXT_TRACK_INDEX) {
+    async renderTracksEvents(videoElement, track, item, targetTextTrackIndex = PRIMARY_TEXT_TRACK_INDEX) {
+        const { currentSettings: userSettings } = await import('../../scripts/settings/userSettings');
+
         if (!itemHelper.isLocalItem(item) || track.IsExternal) {
             const format = (track.Codec || '').toLowerCase();
             if (format === 'ssa' || format === 'ass') {
@@ -1470,7 +1485,7 @@ export class HtmlVideoPlayer {
                 return;
             }
 
-            if (this.requiresCustomSubtitlesElement()) {
+            if (this.requiresCustomSubtitlesElement(userSettings)) {
                 this.renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex);
                 return;
             }
@@ -1500,8 +1515,6 @@ export class HtmlVideoPlayer {
 
         // download the track json
         this.fetchSubtitles(track, item).then(function (data) {
-            import('../../scripts/settings/userSettings').then((userSettings) => {
-                // show in ui
             console.debug(`downloaded ${data.TrackEvents.length} track events`);
 
             const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();
@@ -1522,7 +1535,6 @@ export class HtmlVideoPlayer {
 
             trackElement.mode = 'showing';
         });
-        });
     }
 
     /**

src/strings/en-us.json

@@ -72,6 +72,7 @@
     "Authorize": "Authorize",
     "AuthProviderHelp": "Select an authentication provider to be used to authenticate this user's password.",
     "Auto": "Auto",
+    "AutoSubtitleStylingHelp": "This mode will automatically switch between the native and custom subtitle styling mechanisms based on your device type.",
     "Backdrop": "Backdrop",
     "Backdrops": "Backdrops",
     "BackdropScreensaver": "Backdrop Screensaver",
@@ -191,6 +192,8 @@
     "Creator": "Creator",
     "CriticRating": "Critics rating",
     "Cursive": "Cursive",
+    "Custom": "Custom",
+    "CustomSubtitleStylingHelp": "Subtitle styling will work on most devices, but comes with an additional performance overhead.",
     "DailyAt": "Daily at {0}",
     "Data": "Data",
     "DateAdded": "Date added",
@@ -907,6 +910,7 @@
     "LabelStreamType": "Stream type",
     "LabelSubtitleDownloaders": "Subtitle downloaders",
     "LabelSubtitlePlaybackMode": "Subtitle mode",
+    "LabelSubtitleStyling": "Subtitle styling",
     "LabelSubtitleVerticalPosition": "Vertical position",
     "LabelSyncPlayAccess": "SyncPlay access",
     "LabelSyncPlayAccessCreateAndJoinGroups": "Allow user to create and join groups",
@@ -1190,6 +1194,8 @@
     "Mute": "Mute",
     "MySubtitles": "My Subtitles",
     "Name": "Name",
+    "Native": "Native",
+    "NativeSubtitleStylingHelp": "Subtitle styling will not work on some devices. However, it does not come with any performance overhead.",
     "Never": "Never",
     "New": "New",
     "NewCollection": "New Collection",