tamius-han/ultrawidify
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add validation to aspect ratio input in shortcut settings, fix parsing of aspect ratios given as X:Y

Browse Source
This commit is contained in:
Tamius Han 2025-08-03 02:45:27 +02:00
parent 850b5d6b25
commit 620028db6d
5 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue
View File

@ -55,10 +55,13 @@
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
<input
v-model="editModeOptions.crop.selected.arguments.ratio"
@blur="editModeOptions.crop.selected.label === 'New aspect ratio' ? editModeOptions.crop.selected.label = editModeOptions.crop.selected.arguments.ratio : null"
@blur="updateLabel('crop')"
>
</div>
</div>
<div v-if="editModeOptions.crop?.error" class="hint error">
{{editModeOptions.crop.error}}
</div>
<div class="hint">
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter

5
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue
View File

@ -70,10 +70,13 @@
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
<input
v-model="editModeOptions.stretch.selected.arguments.ratio"
@blur="editModeOptions.stretch.selected.label === 'Stretch to ...' ? editModeOptions.stretch.selected.label = `Stretch to ${editModeOptions.stretch.selected.arguments.ratio}` : null"
@blur="updateLabel('stretch')"
>
</div>
</div>
<div v-if="editModeOptions.stretch?.error" class="hint error">
{{editModeOptions.stretch.error}}
</div>
<div class="hint">
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter

6
src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue
View File

@ -48,16 +48,20 @@
<!-- We do an ugly in order to avoid spamming functions down at the bottom -->
<input
v-model="editModeOptions.zoom.selected.arguments.ratio"
@blur="editModeOptions.zoom.selected.label === 'New aspect ratio' ? editModeOptions.zoom.selected.label = editModeOptions.zoom.selected.arguments.ratio : null"
@blur="updateLabel('zoom')"
>
</div>
</div>
<div v-if="editModeOptions.zoom?.error" class="hint error">
{{editModeOptions.zoom.error}}
</div>
<div class="hint">
You can enter a ratio in width:height format (e.g. "21:9" or "1:2.39"), or just the factor
(in this case, "1:2.39" would become "2.39" and "21:9" would become "2.33"). You should enter
your numbers without quote marks. Number will be converted to factor form on save.
</div>
<div class="field">
<div class="label">
Label:

4
src/csui/src/res-common/common.scss
View File

@ -210,6 +210,10 @@ button, .button {
margin-left: 5rem;
// width: 100%;
box-sizing:border-box;
&.error {
color: #f41;
}
}
.options-bar {

40
src/csui/src/utils/EditModeMixin.js
View File

@ -52,7 +52,47 @@ export default {
}
},
validateAspectRatio(actionType) {
// deal with potentially invalid aspect ratios
if (this.editModeOptions[actionType].selected.arguments.ratio.includes(':')) {
const ratioParts = this.editModeOptions[actionType].selected.arguments.ratio.split(':');
if (ratioParts.length !== 2) {
this.editModeOptions[actionType].error = 'Entered aspect ratio is not valid.';
return false;
} else {
const ratio = ratioParts[0] / ratioParts[1];
if (isNaN(ratio) || ratio <= 0) {
this.editModeOptions[actionType].error = 'Entered aspect ratio is not valid.';
return false;
}
this.editModeOptions[actionType].selected.arguments.ratio = ratio;
}
} else {
if (isNaN(this.editModeOptions[actionType].selected.arguments.ratio)) {
this.editModeOptions[actionType].error = "Entered aspect ratio is not valid.";
return false;
}
}
delete this.editModeOptions[actionType].error;
return true;
},
/**
* Updates button label, ideally after aspect ratio is entered,
* after input field blurred, and only if aspect ratio is valid.
*/
updateLabel(actionType) {
if (this.validateAspectRatio(actionType) && this.editModeOptions[actionType].selected.label === 'New aspect ratio') {
this.editModeOptions[actionType].selected.label = this.editModeOptions[actionType].selected.arguments.ratio;
}
},
saveShortcut(actionType) {
if (! this.validateAspectRatio(actionType)) {
return;
}
if (!this.editModeOptions[actionType]?.selectedIndex) {
this.settings.active.commands[actionType].push(this.editModeOptions[actionType].selected);
}