Add saving aspect ratio in video player

src/components/playback/playersettingsmenu.js

@@ -129,13 +129,12 @@ function getQualitySecondaryText(player) {
 function showAspectRatioMenu(player, btn) {
     // each has a name and id
     const currentId = playbackManager.getAspectRatio(player);
-    const menuItems = playbackManager.getSupportedAspectRatios(player).map(function (i) {
-        return {
-            id: i.id,
-            name: i.name,
-            selected: i.id === currentId
-        };
-    });
+    const menuItems = playbackManager.getSupportedAspectRatios(player)
+        .map(({ id, name }) => ({
+            id,
+            name,
+            selected: id === currentId
+        }));
 
     return actionsheet.show({
         items: menuItems,

src/plugins/htmlVideoPlayer/plugin.js

@@ -388,7 +388,7 @@ export class HtmlVideoPlayer {
         }
     }
 
-    play(options) {
+    async play(options) {
         this.#started = false;
         this.#timeUpdated = false;
 
@@ -396,11 +396,11 @@ export class HtmlVideoPlayer {
 
         if (options.resetSubtitleOffset !== false) this.resetSubtitleOffset();
 
-        return this.createMediaElement(options).then(elem => {
-            return this.updateVideoUrl(options).then(() => {
-                return this.setCurrentSrc(elem, options);
-            });
-        });
+        const elem = await this.createMediaElement(options);
+        this.#applyAspectRatio();
+
+        await this.updateVideoUrl(options);
+        return this.setCurrentSrc(elem, options);
     }
 
     /**
@@ -872,8 +872,6 @@ export class HtmlVideoPlayer {
             videoElement.parentNode.removeChild(videoElement);
         }
 
-        this._currentAspectRatio = null;
-
         const dlg = this.#videoDialog;
         if (dlg) {
             this.#videoDialog = null;
@@ -1344,12 +1342,13 @@ export class HtmlVideoPlayer {
      */
     renderPgs(videoElement, track, item) {
         import('libpgs').then((libpgs) => {
+            const aspectRatio = this.getAspectRatio() === 'auto' ? 'contain' : this.getAspectRatio();
             const options = {
                 video: videoElement,
                 subUrl: getTextTrackUrl(track, item),
                 workerUrl: `${appRouter.baseUrl()}/libraries/libpgs.worker.js`,
                 timeOffset: (this._currentPlayOptions.transcodingOffsetTicks || 0) / 10000000,
-                aspectRatio: this._currentAspectRatio === 'auto' ? 'contain' : this._currentAspectRatio
+                aspectRatio
             };
             this.#currentPgsRenderer = new libpgs.PgsRenderer(options);
         });
@@ -2102,7 +2101,7 @@ export class HtmlVideoPlayer {
         return false;
     }
 
-    setAspectRatio(val) {
+    #applyAspectRatio(val = this.getAspectRatio()) {
         const mediaElement = this.#mediaElement;
         if (mediaElement) {
             if (val === 'auto') {
@@ -2111,19 +2110,19 @@ export class HtmlVideoPlayer {
                 mediaElement.style['object-fit'] = val;
             }
         }
-        const pgsRenderer = this.#currentPgsRenderer;
-        if (pgsRenderer) {
-            if (val === 'auto') {
-                pgsRenderer.aspectRatio = 'contain';
-            } else {
-                pgsRenderer.aspectRatio = val;
-            }
+
+        if (this.#currentPgsRenderer) {
+            this.#currentPgsRenderer = val === 'auto' ? 'contain' : val;
         }
-        this._currentAspectRatio = val;
+    }
+
+    setAspectRatio(val) {
+        appSettings.aspectRatio(val);
+        this.#applyAspectRatio(val);
     }
 
     getAspectRatio() {
-        return this._currentAspectRatio || 'auto';
+        return appSettings.aspectRatio() || 'auto';
     }
 
     getSupportedAspectRatios() {

src/scripts/settings/appSettings.js

@@ -247,6 +247,19 @@ class AppSettings {
         return toBoolean(this.get('alwaysRemuxMp3'), false);
     }
 
+    /**
+     * Get or set the preferred video aspect ratio.
+     * @param {string|undefined} val - The aspect ratio or undefined.
+     * @returns {string} The saved aspect ratio state.
+     */
+    aspectRatio(val) {
+        if (val !== undefined) {
+            return this.set('aspectRatio', val);
+        }
+
+        return this.get('aspectRatio') || '';
+    }
+
     set(name, value, userId) {
         const currentValue = this.get(name, userId);
         localStorage.setItem(this.#getKey(name, userId), value);

src/strings/en-us.json

@@ -1684,8 +1684,8 @@
     "LabelFallbackFontPathHelp": "These fonts are used by some clients to render subtitles. Please refer to the documentation for more information.",
     "EnableFallbackFont": "Enable fallback fonts",
     "EnableFallbackFontHelp": "Enable custom alternate fonts. This can avoid the problem of incorrect subtitle rendering.",
-    "AspectRatioCover": "Cover",
-    "AspectRatioFill": "Fill",
+    "AspectRatioCover": "Zoom",
+    "AspectRatioFill": "Stretch",
     "Remuxing": "Remuxing",
     "RemuxHelp1": "The media is in an incompatible file container (MKV, AVI, WMV, etc) but both the video stream and audio stream are compatible with the device. The media will be repackaged losslessly on the fly before being sent to the device.",
     "RemuxHelp2": "Remux uses very little processing power with a completely lossless media quality.",