Frontend: Video player: Custom scale (with slider)

AgustinSRG · Oct 2, 2024 · c386767 · c386767
1 parent f07baca
commit c386767
Showing 1 changed file with 70 additions and 1 deletion.
diff --git a/frontend/src/components/player/VideoPlayerConfig.vue b/frontend/src/components/player/VideoPlayerConfig.vue
@@ -241,7 +241,9 @@
                     <i class="fas fa-chevron-left icon-config"></i>
                     <b>{{ $t("Scale") }}</b>
                 </td>
-                <td class="td-right"></td>
+                <td class="td-right">
+                    <a href="#video-scale-custom" @click="goToCustomScale">{{ $t("Custom") }}</a>
+                </td>
             </tr>
             <tr v-for="s in scales" :key="s" class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="changeScale(s)">
                 <td>
@@ -250,6 +252,51 @@
                 </td>
                 <td class="td-right"></td>
             </tr>
+            <tr v-if="!scales.includes(scale)" class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="changeScale(scale)">
+                <td>
+                    <i class="fas fa-check icon-config"></i>
+                    {{ $t("Custom") }}: {{ renderScale(scale) }}
+                </td>
+                <td class="td-right"></td>
+            </tr>
+        </table>
+
+        <table v-if="page === 'scale-custom'">
+            <tr class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="goToScales">
+                <td>
+                    <i class="fas fa-chevron-left icon-config"></i>
+                    <b>{{ $t("Scale") }} ({{ $t("Custom") }})</b>
+                </td>
+                <td class="td-right"></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input
+                        type="range"
+                        class="form-range"
+                        v-model.number="scaleNum"
+                        @input="updateScaleNum"
+                        :min="100"
+                        :max="800"
+                        :step="1"
+                    />
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2" class="custom-size-row">
+                    <input
+                        type="number"
+                        class="form-control custom-size-input"
+                        v-model.number="scaleNum"
+                        @input="updateScaleNum"
+                        :min="1"
+                        :step="1"
+                    />
+                    <b class="custom-size-unit">%</b>
+                </td>
+            </tr>
         </table>
 
         <table v-if="page === 'resolution'">
@@ -559,6 +606,7 @@ export default defineComponent({
             resolutions: [],
 
             speedNum: Math.floor(this.speed * 100),
+            scaleNum: Math.floor(this.scale * 100),
 
             subtitles: "",
             subtitlesSizes: ["s", "m", "l", "xl", "xxl"],
@@ -703,6 +751,16 @@ export default defineComponent({
             this.focus();
         },
 
+        goToCustomScale: function (e?: Event) {
+            if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            this.page = "scale-custom";
+            this.focus();
+        },
+
         renderSpeed: function (speed: number) {
             if (speed > 1) {
                 return Math.floor(speed * 100) + "%";
@@ -921,6 +979,14 @@ export default defineComponent({
             this.speedState = this.speedNum / 100;
         },
 
+        updateScaleNum: function () {
+            if (typeof this.scaleNum !== "number" || isNaN(this.scaleNum) || this.scaleNum < 0.1) {
+                return;
+            }
+
+            this.scaleState = this.scaleNum / 100;
+        },
+
         clickOnEnter: function (event: KeyboardEvent) {
             if (event.key === "Enter") {
                 event.preventDefault();
@@ -973,6 +1039,9 @@ export default defineComponent({
         speed: function () {
             this.speedNum = Math.floor(this.speed * 100);
         },
+        scale: function () {
+            this.scaleNum = Math.floor(this.scale * 100);
+        },
         rTick: function () {
             this.updateResolutions();
             this.updateEffectiveSubtitles();