Refactor native subtitle styling check

src/apps/stable/features/playback/constants/subtitleStylingOption.ts

@@ -0,0 +1,9 @@
+/**
+ * Options specifying if the player's native styling of subtitles should be used, Jellyfin's custom styling, or allow
+ * Jellyfin to choose automatically based on known browser support.
+ */
+export const SubtitleStylingOption = {
+    Auto: 'Auto',
+    Custom: 'Custom',
+    Native: 'Native'
+};

src/apps/stable/features/playback/utils/subtitleStyles.ts

@@ -0,0 +1,46 @@
+import { SubtitleStylingOption } from 'apps/stable/features/playback/constants/subtitleStylingOption';
+import _browser from 'scripts/browser';
+import type { UserSettings } from 'scripts/settings/userSettings';
+
+// TODO: These type overrides should be removed when browser and userSettings are properly typed
+type Browser = typeof _browser & {
+    edge?: boolean;
+    firefox?: boolean;
+};
+
+interface SubtitleAppearanceSettings {
+    subtitleStyling: keyof typeof SubtitleStylingOption
+}
+
+export function useCustomSubtitles(userSettings: UserSettings) {
+    const browser = _browser as Browser;
+    const subtitleAppearance = userSettings.getSubtitleAppearanceSettings() as SubtitleAppearanceSettings;
+    switch (subtitleAppearance.subtitleStyling) {
+        case SubtitleStylingOption.Native:
+            return false;
+        case SubtitleStylingOption.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.edge) {
+                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;
+            }
+
+            return false;
+    }
+}

src/plugins/htmlVideoPlayer/plugin.js

@@ -2,6 +2,7 @@ import DOMPurify from 'dompurify';
 import debounce from 'lodash-es/debounce';
 import Screenfull from 'screenfull';
 
+import { useCustomSubtitles } from 'apps/stable/features/playback/utils/subtitleStyles';
 import { AppFeature } from 'constants/appFeature';
 import { ServerConnections } from 'lib/jellyfin-apiclient';
 import { MediaError } from 'types/mediaError';
@@ -1357,49 +1358,6 @@ export class HtmlVideoPlayer {
         });
     }
 
-    /**
-         * @private
-         */
-    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.edge) {
-                    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
-                    if ((userAgent.includes('os 9') || userAgent.includes('os 8')) && !userAgent.includes('safari')) {
-                        return true;
-                    }
-                }
-
-                return false;
-        }
-    }
-
     /**
          * @private
          */
@@ -1496,7 +1454,7 @@ export class HtmlVideoPlayer {
                 return;
             }
 
-            if (this.requiresCustomSubtitlesElement(userSettings)) {
+            if (useCustomSubtitles(userSettings)) {
                 this.renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex);
                 return;
             }

src/scripts/settings/userSettings.js

@@ -600,7 +600,7 @@ export class UserSettings {
 
     /**
      * Get subtitle appearance settings.
-     * @param {string|undefined} key - Settings key.
+     * @param {string|undefined} [key] - Settings key.
      * @return {Object} Subtitle appearance settings.
      */
     getSubtitleAppearanceSettings(key) {