Add support for displaying chapters (#694)

This commit is contained in:
Kavin 2022-01-13 04:52:14 +00:00 committed by GitHub
parent 7942581a76
commit fc4978ec03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 39 additions and 2 deletions

View file

@ -0,0 +1,26 @@
<template>
<h2 v-t="'video.chapters'" />
<div
:key="chapter.start"
v-for="chapter in props.chapters"
@click="$emit('seek', chapter.start)"
class="flex items-center mb-2 cursor-pointer w-sm"
>
<img :src="chapter.image" :alt="chapter.title" class="h-12" />
<div class="ml-1">
<span class="text-xl" v-text="chapter.title" />
<br />
<span class="text-sm" v-text="timeFormat(chapter.start)" />
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
chapters: Object,
});
defineEmits(["seek"]);
</script>

View file

@ -79,7 +79,6 @@ export default {
"f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.",
function (e, handler) {
const videoEl = self.$refs.videoEl;
console.log(handler.key);
switch (handler.key) {
case "f":
self.$ui.getControls().toggleFullScreen();
@ -503,6 +502,11 @@ export default {
}
};
},
seek(time) {
if (this.$refs.videoEl) {
this.$refs.videoEl.currentTime = time;
}
},
destroy() {
if (this.$ui) {
this.$ui.destroy();

View file

@ -89,6 +89,7 @@
/>
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-show="showDesc" class="break-words" v-html="purifyHTML(video.description)" />
<Chapters :chapters="video.chapters" @seek="navigate" />
<div
v-if="showDesc && sponsors && sponsors.segments"
v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
@ -143,6 +144,7 @@ import Player from "@/components/Player.vue";
import VideoItem from "@/components/VideoItem.vue";
import ErrorHandler from "@/components/ErrorHandler.vue";
import Comment from "@/components/Comment.vue";
import Chapters from "@/components/Chapters.vue";
export default {
name: "App",
@ -151,6 +153,7 @@ export default {
VideoItem,
ErrorHandler,
Comment,
Chapters,
},
data() {
const smallViewQuery = window.matchMedia("(max-width: 640px)");
@ -337,6 +340,9 @@ export default {
getVideoId() {
return this.$route.query.v || this.$route.params.v;
},
navigate(time) {
this.$refs.videoPlayer.seek(time);
},
},
};
</script>

View file

@ -88,7 +88,8 @@
"views": "views",
"watched": "Watched",
"sponsor_segments": "Sponsors Segments",
"ratings_disabled": "Ratings Disabled"
"ratings_disabled": "Ratings Disabled",
"chapters": "Chapters"
},
"search": {
"did_you_mean": "Did you mean: "