From 34282e821a27b7a53575b8cf077006dcad371b90 Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Wed, 2 Apr 2025 11:09:12 -0400 Subject: [PATCH] Add saving aspect ratio in video player --- src/components/playback/playersettingsmenu.js | 13 +++---- src/plugins/htmlVideoPlayer/plugin.js | 37 +++++++++---------- src/scripts/settings/appSettings.js | 13 +++++++ src/strings/en-us.json | 4 +- 4 files changed, 39 insertions(+), 28 deletions(-) diff --git a/src/components/playback/playersettingsmenu.js b/src/components/playback/playersettingsmenu.js index 8cd2c52ec..dc92de54d 100644 --- a/src/components/playback/playersettingsmenu.js +++ b/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, diff --git a/src/plugins/htmlVideoPlayer/plugin.js b/src/plugins/htmlVideoPlayer/plugin.js index 9ab641e9e..3a4d5b12f 100644 --- a/src/plugins/htmlVideoPlayer/plugin.js +++ b/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() { diff --git a/src/scripts/settings/appSettings.js b/src/scripts/settings/appSettings.js index e10d6053d..d4d56735e 100644 --- a/src/scripts/settings/appSettings.js +++ b/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); diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 24a4d2200..7540b6943 100644 --- a/src/strings/en-us.json +++ b/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.",