Fixed subtitles styling in firefox.

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,19 @@ 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');
+    if (this.value !== 'Native') {
+        onAppearanceFieldChange(e);
+    }
+}
+
 function onSubtitleBurnInChange(e) {
     const view = dom.parentWithClass(e.target, 'subtitlesettings');
     const fieldRenderPgs = view.querySelector('.fldRenderPgs');
@@ -180,6 +196,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 @@ <h2 class="sectionTitle">
             <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,31 +1349,48 @@ export class HtmlVideoPlayer {
     /**
          * @private
          */
-    requiresCustomSubtitlesElement() {
-        // 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) {
-            return true;
-        }
+    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) {
+                    return true;
+                }
 
-        // Tizen 5 doesn't support displaying secondary subtitles
-        if (browser.tizenVersion >= 5 || browser.web0s) {
-            return true;
-        }
+                if (browser.web0s) {
+                    return true;
+                }
 
-        if (browser.edge) {
-            return true;
-        }
+                // Tizen 5 doesn't support displaying secondary subtitles
+                if (browser.tizenVersion >= 5 || browser.web0s) {
+                    return true;
+                }
 
-        if (browser.iOS) {
-            const userAgent = navigator.userAgent.toLowerCase();
-            // works in the browser but not the native app
-            if ((userAgent.includes('os 9') || userAgent.includes('os 8')) && !userAgent.includes('safari')) {
-                return true;
-            }
-        }
+                if (browser.edge) {
+                    return true;
+                }
 
-        return false;
+                // 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
+                    if ((userAgent.includes('os 9') || userAgent.includes('os 8')) && !userAgent.includes('safari')) {
+                        return true;
+                    }
+                }
+
+                return false;
+        }
     }
 
     /**
@@ -1469,39 +1486,37 @@ export class HtmlVideoPlayer {
                 this.renderPgs(videoElement, track, item);
                 return;
             }
-
-            if (this.requiresCustomSubtitlesElement()) {
+        }
+        import('../../scripts/settings/userSettings').then((userSettings) => {
+            if ((!itemHelper.isLocalItem(item) || track.IsExternal) && this.requiresCustomSubtitlesElement(userSettings)) {
                 this.renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex);
                 return;
             }
-        }
 
-        let trackElement = null;
-        const updatingTrack = videoElement.textTracks && videoElement.textTracks.length > (this.isSecondaryTrack(targetTextTrackIndex) ? 1 : 0);
-        if (updatingTrack) {
-            trackElement = videoElement.textTracks[targetTextTrackIndex];
-            // This throws an error in IE, but is fine in chrome
-            // In IE it's not necessary anyway because changing the src seems to be enough
-            try {
-                trackElement.mode = 'showing';
-                while (trackElement.cues.length) {
-                    trackElement.removeCue(trackElement.cues[0]);
+            let trackElement = null;
+            const updatingTrack = videoElement.textTracks && videoElement.textTracks.length > (this.isSecondaryTrack(targetTextTrackIndex) ? 1 : 0);
+            if (updatingTrack) {
+                trackElement = videoElement.textTracks[targetTextTrackIndex];
+                // This throws an error in IE, but is fine in chrome
+                // In IE it's not necessary anyway because changing the src seems to be enough
+                try {
+                    trackElement.mode = 'showing';
+                    while (trackElement.cues.length) {
+                        trackElement.removeCue(trackElement.cues[0]);
+                    }
+                } catch (e) {
+                    console.error('error removing cue from textTrack');
                 }
-            } catch (e) {
-                console.error('error removing cue from textTrack');
-            }
 
-            trackElement.mode = 'disabled';
-        } else {
-            // There is a function addTextTrack but no function for removeTextTrack
-            // Therefore we add ONE element and replace its cue data
-            trackElement = videoElement.addTextTrack('subtitles', 'manualTrack', 'und');
-        }
+                trackElement.mode = 'disabled';
+            } else {
+                // There is a function addTextTrack but no function for removeTextTrack
+                // Therefore we add ONE element and replace its cue data
+                trackElement = videoElement.addTextTrack('subtitles', 'manualTrack', 'und');
+            }
 
-        // download the track json
-        this.fetchSubtitles(track, item).then(function (data) {
-            import('../../scripts/settings/userSettings').then((userSettings) => {
-                // show in ui
+            // download the track json
+            this.fetchSubtitles(track, item).then(function (data) {
                 console.debug(`downloaded ${data.TrackEvents.length} track events`);
 
                 const subtitleAppearance = userSettings.getSubtitleAppearanceSettings();

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",
@@ -906,6 +909,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",