From 6bca7f170a74de2234af626f0e487b22e10e4156 Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Fri, 14 Jan 2022 06:45:41 +0530
Subject: [PATCH] Add support for chapters

---
 .idea/codeStyles/Project.xml     | 16 ++++++++++
 package.json                     |  1 +
 src/components/Player.vue        |  8 +++--
 src/components/VideoChapters.vue | 53 ++++++++++++++++++++++++++++++++
 src/routes/WatchVideo.vue        |  8 +++--
 yarn.lock                        | 18 +++++++++++
 6 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 src/components/VideoChapters.vue

diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 3163da8..c5c160e 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -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" />
diff --git a/package.json b/package.json
index f1cd21a..668fe62 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/Player.vue b/src/components/Player.vue
index a5d9f5c..1e2e4d2 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -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
 
diff --git a/src/components/VideoChapters.vue b/src/components/VideoChapters.vue
new file mode 100644
index 0000000..2b9f06d
--- /dev/null
+++ b/src/components/VideoChapters.vue
@@ -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>
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 4b64943..282e31e 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -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,
diff --git a/yarn.lock b/yarn.lock
index 5b052ce..b7c6b41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"