Merge pull request #3622 from Bnyro/master

feat: custom playback speed option
This commit is contained in:
Bnyro 2024-05-16 18:26:20 +02:00 committed by GitHub
commit a43d56984d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 5 deletions

View File

@ -31,16 +31,32 @@
class="absolute top-8 rounded bg-black/80 p-2 text-lg backdrop-blur-sm" class="absolute top-8 rounded bg-black/80 p-2 text-lg backdrop-blur-sm"
/> />
</div> </div>
<ModalComponent v-if="showSpeedModal" @close="showSpeedModal = false">
<h2 v-t="'actions.playback_speed'" />
<div class="flex flex-col">
<input
v-model="playbackSpeedInput"
class="input my-3"
type="text"
:placeholder="$t('actions.playback_speed')"
@keyup.enter="setSpeedFromInput()"
/>
<button v-t="'actions.okay'" class="btn ml-auto w-min" @click="setSpeedFromInput()" />
</div>
</ModalComponent>
</template> </template>
<script> <script>
import "shaka-player/dist/controls.css"; import "shaka-player/dist/controls.css";
import { parseTimeParam } from "@/utils/Misc"; import { parseTimeParam } from "@/utils/Misc";
import ModalComponent from "./ModalComponent.vue";
const shaka = import("shaka-player/dist/shaka-player.ui.js"); const shaka = import("shaka-player/dist/shaka-player.ui.js");
const hotkeys = import("hotkeys-js"); const hotkeys = import("hotkeys-js");
export default { export default {
components: { ModalComponent },
props: { props: {
video: { video: {
type: Object, type: Object,
@ -66,6 +82,8 @@ export default {
destroying: false, destroying: false,
inSegment: false, inSegment: false,
isHoveringTimebar: false, isHoveringTimebar: false,
showSpeedModal: false,
playbackSpeedInput: null,
currentTime: 0, currentTime: 0,
seekbarPadding: 2, seekbarPadding: 2,
error: 0, error: 0,
@ -106,7 +124,7 @@ export default {
this.hotkeysPromise.then(() => { this.hotkeysPromise.then(() => {
var self = this; var self = this;
this.$hotkeys( this.$hotkeys(
"f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+n,shift+,,shift+.,alt+p,return,.,,", "f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+n,shift+s,shift+,,shift+.,alt+p,return,.,,",
function (e, handler) { function (e, handler) {
const videoEl = self.$refs.videoEl; const videoEl = self.$refs.videoEl;
switch (handler.key) { switch (handler.key) {
@ -196,11 +214,14 @@ export default {
self.$emit("navigateNext"); self.$emit("navigateNext");
e.preventDefault(); e.preventDefault();
break; break;
case "shift+s":
self.showSpeedModal = true;
break;
case "shift+,": case "shift+,":
self.$player.trickPlay(Math.max(videoEl.playbackRate - 0.25, 0.25)); self.adjustPlaybackSpeed(videoEl.playbackRate - 0.25);
break; break;
case "shift+.": case "shift+.":
self.$player.trickPlay(Math.min(videoEl.playbackRate + 0.25, 2)); self.adjustPlaybackSpeed(videoEl.playbackRate + 0.25);
break; break;
case "alt+p": case "alt+p":
document.pictureInPictureElement document.pictureInPictureElement
@ -651,7 +672,19 @@ export default {
this.$refs.videoEl.currentTime = time; this.$refs.videoEl.currentTime = time;
} }
}, },
adjustPlaybackSpeed(newSpeed) {
const normalizedSpeed = Math.min(4, Math.max(0.25, newSpeed));
this.$player.trickPlay(normalizedSpeed);
},
setSpeedFromInput() {
try {
const newSpeed = Number(this.playbackSpeedInput);
this.adjustPlaybackSpeed(newSpeed);
} catch (err) {
alert(this.$t("actions.invalid_input"));
}
this.showSpeedModal = false;
},
updateMarkers() { updateMarkers() {
const markers = this.$refs.container.querySelector(".shaka-ad-markers"); const markers = this.$refs.container.querySelector(".shaka-ad-markers");
const array = ["to right"]; const array = ["to right"];

View File

@ -158,7 +158,9 @@
"invalid_url": "Invalid URL!", "invalid_url": "Invalid URL!",
"add": "Add", "add": "Add",
"creator_replied": "Creator replied", "creator_replied": "Creator replied",
"creator_liked": "Creator liked" "creator_liked": "Creator liked",
"playback_speed": "Playback speed",
"invalid_input": "Invalid input"
}, },
"comment": { "comment": {
"pinned_by": "Pinned by {author}", "pinned_by": "Pinned by {author}",