diff --git a/chrome/player/options/options.mjs b/chrome/player/options/options.mjs
index a480213e..7541a8d6 100644
--- a/chrome/player/options/options.mjs
+++ b/chrome/player/options/options.mjs
@@ -14,6 +14,7 @@ import {VisChangeActions} from './defaults/VisChangeActions.mjs';
import {MiniplayerPositions} from './defaults/MiniplayerPositions.mjs';
import {DefaultSubtitlesSettings} from './defaults/DefaultSubtitlesSettings.mjs';
import {DaltonizerTypes} from './defaults/DaltonizerTypes.mjs';
+import {AspectRatios} from './defaults/AspectRatios.mjs';
import {DefaultToolSettings} from './defaults/ToolSettings.mjs';
import {DefaultQualities} from './defaults/DefaultQualities.mjs';
import {ColorThemes} from './defaults/ColorThemes.mjs';
@@ -43,6 +44,7 @@ const showWhenMiniSelected = document.getElementById('showWhenMiniSelected');
const storeProgress = document.getElementById('storeprogress');
const miniSize = document.getElementById('minisize');
const miniPos = document.getElementById('minipos');
+const videoAspectRatio = document.getElementById('videoAspectRatio');
const daltonizerType = document.getElementById('daltonizerType');
const daltonizerStrength = document.getElementById('daltonizerStrength');
const previewEnabled = document.getElementById('previewenabled');
@@ -109,6 +111,7 @@ async function loadOptions(newOptions) {
maxdownloaders.value = Options.maximumDownloaders;
ytPlayerID.value = Options.youtubePlayerID;
+ setSelectMenuValue(videoAspectRatio, Options.videoAspectRatio);
setSelectMenuValue(daltonizerType, Options.videoDaltonizerType);
setSelectMenuValue(clickAction, Options.singleClickAction);
setSelectMenuValue(dblclickAction, Options.doubleClickAction);
@@ -167,7 +170,16 @@ function createSelectMenu(container, options, selected, localPrefix, callback) {
for (const option of options) {
const optionElement = document.createElement('option');
optionElement.value = option;
- optionElement.textContent = localPrefix !== null ? Localize.getMessage(localPrefix + '_' + option) : option;
+ let label = option;
+ if (localPrefix !== null) {
+ const msgKey = localPrefix + '_' + option;
+ const msg = Localize.getMessage(msgKey);
+ label = msg !== msgKey ? msg : option;
+ } else {
+ if (option === 'auto') label = 'Auto (Default)';
+ else if (option === 'stretch') label = 'Stretch';
+ }
+ optionElement.textContent = label;
if (option === selected) {
optionElement.selected = true;
}
@@ -185,6 +197,11 @@ function setSelectMenuValue(container, value) {
select.value = value;
}
+createSelectMenu(videoAspectRatio, Object.values(AspectRatios), Options.videoAspectRatio, null, (e) => {
+ Options.videoAspectRatio = e.target.value;
+ optionChanged();
+});
+
createSelectMenu(daltonizerType, Object.values(DaltonizerTypes), Options.videoDaltonizerType, 'options_video_daltonizer', (e) => {
Options.videoDaltonizerType = e.target.value;
if (Options.videoDaltonizerType === DaltonizerTypes.NONE) {
diff --git a/chrome/player/ui/KeybindManager.mjs b/chrome/player/ui/KeybindManager.mjs
index 4e9ffb8f..1d6624a7 100644
--- a/chrome/player/ui/KeybindManager.mjs
+++ b/chrome/player/ui/KeybindManager.mjs
@@ -3,6 +3,7 @@ import {EventEmitter} from '../modules/eventemitter.mjs';
import {WebUtils} from '../utils/WebUtils.mjs';
import {DOMElements} from './DOMElements.mjs';
import {Utils} from '../utils/Utils.mjs';
+import {AspectRatios} from '../options/defaults/AspectRatios.mjs';
export class KeybindManager extends EventEmitter {
constructor(client) {
@@ -210,6 +211,15 @@ export class KeybindManager extends EventEmitter {
this.client.updateCSSFilters();
});
+ this.on('CycleAspectRatio', (e) => {
+ const options = this.client.options;
+ const ratios = Object.values(AspectRatios);
+ const currentIndex = ratios.indexOf(options.videoAspectRatio);
+ const nextIndex = (currentIndex + 1) % ratios.length;
+ options.videoAspectRatio = ratios[nextIndex];
+ this.client.updateCSSFilters();
+ });
+
this.on('WindowedFullscreen', (e) => {
this.client.interfaceController.toggleWindowedFullscreen();
});
diff --git a/chrome/player/utils/CSSFilterUtils.mjs b/chrome/player/utils/CSSFilterUtils.mjs
index 9f07b358..a8e32461 100644
--- a/chrome/player/utils/CSSFilterUtils.mjs
+++ b/chrome/player/utils/CSSFilterUtils.mjs
@@ -85,4 +85,22 @@ export class CSSFilterUtils {
return transforms.join(' ');
}
+
+ /**
+ * Generates aspect ratio styles based on video options.
+ * @param {Object} options - Video options containing videoAspectRatio.
+ * @return {{objectFit: string, aspectRatio: string}}
+ */
+ static getAspectRatioStyles(options) {
+ if (!options || !options.videoAspectRatio || options.videoAspectRatio === 'auto') {
+ return {objectFit: '', aspectRatio: ''};
+ }
+ if (options.videoAspectRatio === 'stretch') {
+ return {objectFit: 'fill', aspectRatio: ''};
+ }
+ return {
+ objectFit: 'fill',
+ aspectRatio: options.videoAspectRatio.replace(':', '/'),
+ };
+ }
}
diff --git a/combined-locales.json b/combined-locales.json
index 578f682b..4adab48b 100644
--- a/combined-locales.json
+++ b/combined-locales.json
@@ -5399,6 +5399,24 @@
"zh_CN": "色相旋转",
"zh_TW": "色相旋轉"
},
+ "options_video_aspect_ratio": {
+ "en": "Aspect Ratio",
+ "de": "Aspect Ratio",
+ "es": "Aspect Ratio",
+ "fr": "Aspect Ratio",
+ "id": "Aspect Ratio",
+ "it": "Aspect Ratio",
+ "ja": "Aspect Ratio",
+ "ko": "Aspect Ratio",
+ "ms": "Aspect Ratio",
+ "nl": "Aspect Ratio",
+ "pl": "Aspect Ratio",
+ "pt_BR": "Aspect Ratio",
+ "ru": "Aspect Ratio",
+ "tr": "Aspect Ratio",
+ "zh_CN": "Aspect Ratio",
+ "zh_TW": "Aspect Ratio"
+ },
"options_video_daltonizer_type": {
"en": "Color blindness correction",
"de": "Korrekturen von Farbenblindheit",