From ba97b4a249aea8c4522c95552ad770ea7be4ecfc Mon Sep 17 00:00:00 2001
From: AgustinSRG <agustinsanromanguzman@gmail.com>
Date: Tue, 1 Oct 2024 17:41:34 +0200
Subject: [PATCH] Frontend: Custom playback speed (with slider)

---
 .../components/player/AudioPlayerConfig.vue   | 74 ++++++++++++++++++-
 .../components/player/VideoPlayerConfig.vue   | 72 +++++++++++++++++-
 2 files changed, 144 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/player/AudioPlayerConfig.vue b/frontend/src/components/player/AudioPlayerConfig.vue
index 89473f2..51cac75 100644
--- a/frontend/src/components/player/AudioPlayerConfig.vue
+++ b/frontend/src/components/player/AudioPlayerConfig.vue
@@ -154,13 +154,16 @@
                 </td>
             </tr>
         </table>
+
         <table v-if="page === 'speed'">
             <tr class="tr-button" tabindex="0" @click="goBack" @keydown="clickOnEnter">
                 <td>
                     <i class="fas fa-chevron-left icon-config"></i>
                     <b>{{ $t("Playback speed") }}</b>
                 </td>
-                <td class="td-right"></td>
+                <td class="td-right">
+                    <a href="#playback-speed-custom" @click="goToCustomSpeed">{{ $t("Custom") }}</a>
+                </td>
             </tr>
             <tr v-for="s in speeds" :key="s" class="tr-button" tabindex="0" @click="changeSpeed(s)" @keydown="clickOnEnter">
                 <td>
@@ -169,7 +172,53 @@
                 </td>
                 <td class="td-right"></td>
             </tr>
+            <tr v-if="!speeds.includes(speed)" class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="changeSpeed(speed)">
+                <td>
+                    <i class="fas fa-check icon-config"></i>
+                    {{ $t("Custom") }}: {{ renderSpeed(speed) }}
+                </td>
+                <td class="td-right"></td>
+            </tr>
+        </table>
+
+        <table v-if="page === 'speed-custom'">
+            <tr class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="goToSpeeds">
+                <td>
+                    <i class="fas fa-chevron-left icon-config"></i>
+                    <b>{{ $t("Playback speed") }} ({{ $t("Custom") }})</b>
+                </td>
+                <td class="td-right"></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input
+                        type="range"
+                        class="form-range"
+                        v-model.number="speedNum"
+                        @input="updateSpeedNum"
+                        :min="1"
+                        :max="200"
+                        :step="1"
+                    />
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2" class="custom-size-row">
+                    <input
+                        type="number"
+                        class="form-control custom-size-input"
+                        v-model.number="speedNum"
+                        @input="updateSpeedNum"
+                        :min="1"
+                        :step="1"
+                    />
+                    <b class="custom-size-unit">%</b>
+                </td>
+            </tr>
         </table>
+
         <table v-if="page === 'anim'">
             <tr class="tr-button" tabindex="0" @click="goBack" @keydown="clickOnEnter">
                 <td>
@@ -403,6 +452,8 @@ export default defineComponent({
             speeds: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
             animStyles: ["gradient", "rainbow", "", "none"],
 
+            speedNum: Math.floor(this.speed * 100),
+
             subtitles: "",
 
             subtitlesSizes: ["s", "m", "l", "xl", "xxl"],
@@ -493,6 +544,16 @@ export default defineComponent({
             this.focus();
         },
 
+        goToCustomSpeed: function (e?: Event) {
+            if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            this.page = "speed-custom";
+            this.focus();
+        },
+
         renderSpeed: function (speed: number) {
             if (speed > 1) {
                 return Math.floor(speed * 100) + "%";
@@ -619,6 +680,14 @@ export default defineComponent({
             this.saveCustomSubtitleSize();
         },
 
+        updateSpeedNum: function () {
+            if (typeof this.speedNum !== "number" || isNaN(this.speedNum) || this.speedNum < 0.1) {
+                return;
+            }
+
+            this.speedState = this.speedNum / 100;
+        },
+
         clickOnEnter: function (event: KeyboardEvent) {
             if (event.key === "Enter") {
                 event.preventDefault();
@@ -666,6 +735,9 @@ export default defineComponent({
             }
             this.subSizeCustomNum = this.subSizeCustom;
         },
+        speed: function () {
+            this.speedNum = Math.floor(this.speed * 100);
+        },
     },
 });
 </script>
diff --git a/frontend/src/components/player/VideoPlayerConfig.vue b/frontend/src/components/player/VideoPlayerConfig.vue
index e4edfd6..ecaa2a0 100644
--- a/frontend/src/components/player/VideoPlayerConfig.vue
+++ b/frontend/src/components/player/VideoPlayerConfig.vue
@@ -177,7 +177,9 @@
                     <i class="fas fa-chevron-left icon-config"></i>
                     <b>{{ $t("Playback speed") }}</b>
                 </td>
-                <td class="td-right"></td>
+                <td class="td-right">
+                    <a href="#playback-speed-custom" @click="goToCustomSpeed">{{ $t("Custom") }}</a>
+                </td>
             </tr>
             <tr v-for="s in speeds" :key="s" class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="changeSpeed(s)">
                 <td>
@@ -186,6 +188,51 @@
                 </td>
                 <td class="td-right"></td>
             </tr>
+            <tr v-if="!speeds.includes(speed)" class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="changeSpeed(speed)">
+                <td>
+                    <i class="fas fa-check icon-config"></i>
+                    {{ $t("Custom") }}: {{ renderSpeed(speed) }}
+                </td>
+                <td class="td-right"></td>
+            </tr>
+        </table>
+
+        <table v-if="page === 'speed-custom'">
+            <tr class="tr-button" tabindex="0" @keydown="clickOnEnter" @click="goToSpeeds">
+                <td>
+                    <i class="fas fa-chevron-left icon-config"></i>
+                    <b>{{ $t("Playback speed") }} ({{ $t("Custom") }})</b>
+                </td>
+                <td class="td-right"></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input
+                        type="range"
+                        class="form-range"
+                        v-model.number="speedNum"
+                        @input="updateSpeedNum"
+                        :min="1"
+                        :max="200"
+                        :step="1"
+                    />
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2" class="custom-size-row">
+                    <input
+                        type="number"
+                        class="form-control custom-size-input"
+                        v-model.number="speedNum"
+                        @input="updateSpeedNum"
+                        :min="1"
+                        :step="1"
+                    />
+                    <b class="custom-size-unit">%</b>
+                </td>
+            </tr>
         </table>
 
         <table v-if="page === 'scales'">
@@ -511,6 +558,8 @@ export default defineComponent({
             scales: [1, 1.25, 1.5, 1.75, 2, 4, 8],
             resolutions: [],
 
+            speedNum: Math.floor(this.speed * 100),
+
             subtitles: "",
             subtitlesSizes: ["s", "m", "l", "xl", "xxl"],
             subtitlesBackgrounds: ["100", "75", "50", "25", "0"],
@@ -642,6 +691,16 @@ export default defineComponent({
             this.focus();
         },
 
+        goToCustomSpeed: function (e?: Event) {
+            if (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            this.page = "speed-custom";
+            this.focus();
+        },
+
         renderSpeed: function (speed: number) {
             if (speed > 1) {
                 return Math.floor(speed * 100) + "%";
@@ -828,6 +887,14 @@ export default defineComponent({
             this.saveCustomSubtitleSize();
         },
 
+        updateSpeedNum: function () {
+            if (typeof this.speedNum !== "number" || isNaN(this.speedNum) || this.speedNum < 0.1) {
+                return;
+            }
+
+            this.speedState = this.speedNum / 100;
+        },
+
         clickOnEnter: function (event: KeyboardEvent) {
             if (event.key === "Enter") {
                 event.preventDefault();
@@ -876,6 +943,9 @@ export default defineComponent({
             }
             this.subSizeCustomNum = this.subSizeCustom;
         },
+        speed: function () {
+            this.speedNum = Math.floor(this.speed * 100);
+        },
         rTick: function () {
             this.updateResolutions();
         },