TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: chapters in progress bar, chapter keyboard shortcuts (#3664)

Browse source 
Co-authored-by: Bnyro <bnyro@tutanota.com>
This commit is contained in:
ac615223s5 2024-07-03 08:16:27 -04:00 committed by GitHub
parent 63be6c9c42
commit 5963dba626
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/components/VideoPlayer.vue
View file

@ -12,6 +12,12 @@
class="absolute bottom-0 z-[2000] mb-[3.5%] hidden flex-col items-center"
>
<canvas id="preview" ref="preview" class="rounded-sm" />
<span
v-if="video.chapters.length > 1"
class="mt-2 text-sm drop-shadow-[0_0_2px_white] -mb-2 .dark:drop-shadow-[0_0_2px_black]"
>
{{ video.chapters.findLast(chapter => chapter.start < currentTime)?.title }}
</span>
<span
class="mt-2 w-min rounded-xl bg-white px-2 pb-1 pt-1.5 text-sm .dark:bg-dark-700"
v-text="timeFormat(currentTime)"
@ -146,7 +152,7 @@ export default {
this.hotkeysPromise.then(() => {
var self = this;
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+s,shift+,,shift+.,alt+p,return,.,,",
"f,m,j,k,l,c,space,up,down,left,right,ctrl+left,ctrl+right,home,end,0,1,2,3,4,5,6,7,8,9,shift+n,shift+s,shift+,,shift+.,alt+p,return,.,,",
function (e, handler) {
const videoEl = self.$refs.videoEl;
switch (handler.key) {
@ -192,6 +198,28 @@ export default {
videoEl.currentTime = videoEl.currentTime + 5;
e.preventDefault();
break;
case "ctrl+left": {
videoEl.currentTime = self.video.chapters.findLast(
chapter => chapter.start < videoEl.currentTime,
).start;
e.preventDefault();
break;
}
case "ctrl+right": {
videoEl.currentTime =
self.video.chapters.find(chapter => chapter.start > videoEl.currentTime)?.start ||
videoEl.duration;
e.preventDefault();
break;
}
case "home":
videoEl.currentTime = 0;
e.preventDefault();
break;
case "end":
videoEl.currentTime = videoEl.duration;
e.preventDefault();
break;
case "0":
videoEl.currentTime = 0;
e.preventDefault();
@ -423,7 +451,6 @@ export default {
this.$emit("ended");
});
}
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
},
findCurrentSegment(time) {
@ -671,6 +698,24 @@ export default {
// expand the player to fullscreen when the fullscreen query equals true
if (this.$route.query.fullscreen === "true" && !this.$ui.getControls().isFullScreenEnabled())
this.$ui.getControls().toggleFullScreen();
const seekbar = this.$refs.container.querySelector(".shaka-seek-bar");
const array = ["to right"];
for (const chapter of this.video.chapters) {
const start = (chapter.start / this.video.duration) * 100;
if (start === 0) {
continue;
}
array.push(`transparent ${start}%`);
array.push(`black ${start}%`);
array.push(`black calc(${start}% + 1px)`);
array.push(`transparent calc(${start}% + 1px)`);
}
seekbar.style.background = `linear-gradient(${array.join(",")})`;
seekbar.addEventListener("mouseup", () => {
this.$refs.videoEl.focus();
});
},
async updateProgressDatabase(time) {
// debounce