mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-09 17:58:21 +00:00
Merge pull request #3622 from Bnyro/master
feat: custom playback speed option
This commit is contained in:
commit
a43d56984d
@ -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"];
|
||||||
|
@ -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}",
|
||||||
|
Loading…
Reference in New Issue
Block a user