Add support for chapters

2024-12-06 19:26:36 +01:00 · 2022-01-14 06:45:41 +05:30
parent 1d4ce02723
commit 6bca7f170a
6 changed files with 100 additions and 4 deletions
@@ -29,6 +29,12 @@
      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
    </VueCodeStyleSettings>
+    <codeStyleSettings language="CSS">
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
    <codeStyleSettings language="HTML">
      <option name="SOFT_MARGINS" value="120" />
      <indentOptions>
@@ -50,8 +56,18 @@
        <option name="USE_TAB_CHARACTER" value="true" />
      </indentOptions>
    </codeStyleSettings>
+    <codeStyleSettings language="SCSS">
+      <indentOptions>
+        <option name="INDENT_SIZE" value="4" />
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
    <codeStyleSettings language="TypeScript">
      <option name="SOFT_MARGINS" value="120" />
+      <indentOptions>
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
    </codeStyleSettings>
    <codeStyleSettings language="Vue">
      <option name="SOFT_MARGINS" value="120" />
@@ -19,6 +19,7 @@
    "core-js": "^3.19.1",
    "dexie": "^3.2.0",
    "dompurify": "^2.3.3",
+    "format-duration": "^1.4.0",
    "i18n-iso-countries": "^6.8.0",
    "javascript-time-ago": "^2.3.10",
    "lodash-es": "^4.17.21",
@@ -46,7 +46,7 @@ export default {
 	props: {
 		video: Object,
 		sponsors: Object,
-		skipToTime: Number,
+		initialSkip: Number,
 		selectedAutoLoop: Boolean
 	},
 	data () {
@@ -79,6 +79,10 @@ export default {
 			return this.access
 		},

+		skipToTime (timeInSeconds) {
+			this.$refs.videoEl.currentTime = timeInSeconds
+		},
+
 		async loadVideo () {
 			console.log('PIPED | LOADING VIDEO')
 			const component = this
@@ -86,7 +90,7 @@ export default {

 			videoEl.setAttribute('poster', this.video.thumbnailUrl)

-			if (this.skipToTime != null && Number.isFinite(this.skipToTime)) videoEl.currentTime = this.skipToTime
+			if (this.initialSkip != null && Number.isFinite(this.skipToTime)) this.skipToTime(this.initialSkip)

 			const noPrevPlayer = !this.$player

@@ -0,0 +1,53 @@
+<template>
+    <div class="root">
+        <v-card v-for="chapter in humanizedChapters" :key="chapter.name" min-height="100%" link @click="$emit('seek', chapter.start)">
+            <img :src="chapter.image" />
+            <v-card-title style="font-weight: normal; font-size: 1rem;">
+                {{ chapter.humanizedStart }}
+                <br />
+                {{ chapter.title }}
+            </v-card-title>
+        </v-card>
+    </div>
+</template>
+
+<script>
+import formatDuration from 'format-duration'
+
+export default {
+	name: 'VideoChapters',
+	props: ['chapters'],
+	computed: {
+		humanizedChapters () {
+			return this.chapters.map(ch => {
+				ch.humanizedStart = formatDuration(ch.start * 1000)
+				return ch
+			})
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.root {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	flex-shrink: 0;
+	overflow-y: scroll;
+
+	> * {
+        margin-left: 8px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+	}
+
+    > :first-child {
+        margin-left: 0;
+    }
+
+    > :last-child {
+        margin-right: 0;
+    }
+}
+</style>
@@ -5,7 +5,7 @@
        <Player
            ref="player"
            :video="video"
-            :skip-to-time="skipToTime"
+            :initial-skip="initialSkip"
            :sponsors="sponsors"
            :selectedAutoLoop="selectedAutoLoop"
            @videoEnded="videoEnded"
@@ -81,6 +81,8 @@
                        </router-link>
                        <div class="mt-4" v-html="video.description" />
                        <v-divider class="my-4" />
+                        <VideoChapters :chapters="video.chapters" @seek="$refs.player.skipToTime($event)" />
+                        <v-divider class="my-4" />
                        <div class="mt-4" v-if="showDesc && sponsors && sponsors.segments">
                            Sponsors Segments: {{ sponsors.segments.length }}
                        </div>
@@ -122,6 +124,7 @@ import VideoComment from '@/components/VideoComment'
 import { addWatchedVideo, updateWatchedVideoProgress, findLastWatch } from '@/store/watched-videos-db'
 import SubscriptionButton from '@/components/SubscriptionButton'
 import ExpandableDate from '@/components/ExpandableDate'
+import VideoChapters from '@/components/VideoChapters'

 export default {
 	name: 'WatchVideo',
@@ -349,7 +352,7 @@ export default {
 		videoId () {
 			return this.$route.query.v || this.$route.params.v
 		},
-		skipToTime () {
+		initialSkip () {
 			// 't' in $route.query ? Number($route.query.t) : (lastWatch.progress ? lastWatch.progress : undefined)
 			// 1st Priority - t in query
 			// 2nd Priority - Last Watched Progress, if enabled
@@ -367,6 +370,7 @@ export default {
 		}
 	},
 	components: {
+		VideoChapters,
 		ExpandableDate,
 		SubscriptionButton,
 		VideoComment,
@@ -1700,6 +1700,11 @@ acorn@^7.1.1, acorn@^7.4.0:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==

+add-zero@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-zero/-/add-zero-1.0.0.tgz#88e221696717f66db467672f3f9aa004de9f1a2c"
+  integrity sha1-iOIhaWcX9m20Z2cvP5qgBN6fGiw=
+
 address@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -4418,6 +4423,14 @@ form-data@~2.3.2:
    combined-stream "^1.0.6"
    mime-types "^2.1.12"

+format-duration@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/format-duration/-/format-duration-1.4.0.tgz#6ad86c88f504150873cd28ca82d26a26898d9971"
+  integrity sha512-Mcg3hOAiKxo6JRBgfrQ+sbVvr3D9/4wE7eDQXx3WV2d/yKmrcHXHJS4OhrqVeg+iiFE2Op+pHhdOkQUl8yIclw==
+  dependencies:
+    add-zero "^1.0.0"
+    parse-ms "^1.0.1"
+
 forwarded@0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -6799,6 +6812,11 @@ parse-json@^5.0.0:
    json-parse-even-better-errors "^2.3.0"
    lines-and-columns "^1.1.6"

+parse-ms@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-1.0.1.tgz#56346d4749d78f23430ca0c713850aef91aa361d"
+  integrity sha1-VjRtR0nXjyNDDKDHE4UK75GqNh0=
+
 parse5-htmlparser2-tree-adapter@^6.0.0:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"