Skip to content

Commit

Permalink
Frontend: Custom playback speed (with slider)
Browse files Browse the repository at this point in the history
  • Loading branch information
AgustinSRG committed Oct 1, 2024
1 parent 11d02e4 commit ba97b4a
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 2 deletions.
74 changes: 73 additions & 1 deletion frontend/src/components/player/AudioPlayerConfig.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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"],
Expand Down Expand Up @@ -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) + "%";
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -666,6 +735,9 @@ export default defineComponent({
}
this.subSizeCustomNum = this.subSizeCustom;
},
speed: function () {
this.speedNum = Math.floor(this.speed * 100);
},
},
});
</script>
72 changes: 71 additions & 1 deletion frontend/src/components/player/VideoPlayerConfig.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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'">
Expand Down Expand Up @@ -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"],
Expand Down Expand Up @@ -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) + "%";
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -876,6 +943,9 @@ export default defineComponent({
}
this.subSizeCustomNum = this.subSizeCustom;
},
speed: function () {
this.speedNum = Math.floor(this.speed * 100);
},
rTick: function () {
this.updateResolutions();
},
Expand Down

0 comments on commit ba97b4a

Please sign in to comment.