feat: ✨ chapters based on timecodes in description (fix #69)

src/components/Atoms/SafeHtml.vue

@@ -1,22 +1,41 @@
 <template>
-	<div v-sanitize="source" class="html" />
+	<div ref="html" v-sanitize="source" class="html" />
 </template>
 
 <script lang="ts">
 import dompurify from 'dompurify'
 import linkifyHtml from 'linkify-html'
+import { mapActions } from 'pinia'
+import { timeToSeconds } from '../../utils/time.ts'
+import { usePlayer } from '../../store/player.ts'
 
 export default {
 	name: 'SafeHtml',
 	directives: {
 		sanitize: {
 			mounted(el, binding) {
-				el.innerHTML = dompurify.sanitize(
+				el.innerHTML = dompurify
+					.sanitize(
 						linkifyHtml(binding.value, {
 							nl2br: true,
 							target: '_blank',
 						}),
 					)
+					.replace(
+						/(([0-9]?[0-9]):)?([0-5]?[0-9]):([0-5][0-9])/g,
+						(
+							match,
+							noop: string,
+							hours: string,
+							minutes: string,
+							seconds: string,
+						) =>
+							`<seekable time="${timeToSeconds(
+								parseInt(hours),
+								parseInt(minutes),
+								parseInt(seconds),
+							)}">${match}</seekable>`,
+					)
 			},
 		},
 	},
@@ -26,11 +45,31 @@ export default {
 			required: true,
 		},
 	},
+	mounted() {
+		const seekables = (this.$refs.html as HTMLElement).querySelectorAll(
+			'seekable',
+		)
+		for (const seekable of seekables) {
+			seekable.addEventListener('click', (event) => {
+				this.seek(
+					parseInt(
+						(event.target as HTMLElement).getAttribute('time') || '',
+					),
+				)
+				this.play()
+			})
+		}
+	},
+	methods: {
+		...mapActions(usePlayer, ['play', 'seek']),
+	},
 }
 </script>
 
 <style>
-.html a {
+.html a,
+seekable {
+	cursor: pointer;
 	text-decoration: underline;
 }
 </style>

src/utils/time.ts

@@ -51,3 +51,16 @@ export const durationToSeconds = (duration: string): number => {
 	seconds += splitDuration.length > 2 ? parseInt(splitDuration[2]) * 60 * 60 : 0
 	return seconds
 }
+
+/**
+ * Convert splitted time to seconds
+ * @param {number} hours The number of seconds
+ * @param {number} minutes The number of seconds
+ * @param {number} seconds The number of seconds
+ * @return {number}
+ */
+export const timeToSeconds = (
+	hours: number,
+	minutes: number,
+	seconds: number,
+): number => hours * 3600 + minutes * 60 + seconds