Merge pull request #143 from Deedone/timestamps

Make timestamps clickable

src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtTimestampCatcher',
+  props: {
+    inputHTML: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    catchTimestampClick: function(event) {
+      const match = event.detail.match(/(\d+):(\d+):?(\d+)?/)
+      if (match[3] !== undefined) { // HH:MM:SS
+        const seconds = 3600 * Number(match[1]) + 60 * Number(match[2]) + Number(match[3])
+        this.$emit('timestampEvent', seconds)
+      } else { // MM:SS
+        const seconds = 60 * Number(match[1]) + Number(match[2])
+        this.$emit('timestampEvent', seconds)
+      }
+    },
+    detectTimestamps: function (input) {
+      return input.replaceAll(/(\d+(:\d+)+)/g, '<a href="#" onclick="this.dispatchEvent(new CustomEvent(\'timestampClicked\',{bubbles:true, detail:\'$1\'}))">$1</a>')
+    }
+  }
+})

src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.vue

@@ -0,0 +1,9 @@
+<template>
+  <p
+    @timestampClicked="catchTimestampClick"
+    v-html="detectTimestamps(inputHTML)"
+  />
+</template>
+
+<script src="./ft-timestamp-catcher.js" />
+<style scoped src="./ft-timestamp-catcher.css" />

src/renderer/components/watch-video-comments/watch-video-comments.js

@@ -3,12 +3,14 @@ import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import CommentScraper from 'yt-comment-scraper'
+import FtTimestampCatcher from '../../components/ft-timestamp-catcher/ft-timestamp-catcher.vue'
 
 export default Vue.extend({
   name: 'WatchVideoComments',
   components: {
     'ft-card': FtCard,
-    'ft-loader': FtLoader
+    'ft-loader': FtLoader,
+    'ft-timestamp-catcher': FtTimestampCatcher
   },
   props: {
     id: {
@@ -39,6 +41,10 @@ export default Vue.extend({
     }
   },
   methods: {
+    onTimestamp: function(timestamp) {
+      this.$emit('timestampEvent', timestamp)
+    },
+
     getCommentData: function () {
       this.isLoading = true
       switch (this.backendPreference) {

src/renderer/components/watch-video-comments/watch-video-comments.vue

@@ -46,9 +46,11 @@
             {{ comment.time }}
           </span>
         </p>
-        <p class="commentText">
+        <ft-timestamp-catcher
-          {{ comment.text }}
+          class="commentText"
-        </p>
+          :inputHTML="comment.text"
+          @timestampEvent="onTimestamp"
+        />
         <p class="commentLikeCount">
           <font-awesome-icon
             icon="thumbs-up"

src/renderer/components/watch-video-description/watch-video-description.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
+import FtTimestampCatcher from '../ft-timestamp-catcher/ft-timestamp-catcher.vue'
 import autolinker from 'autolinker'
 
 export default Vue.extend({
   name: 'WatchVideoDescription',
   components: {
-    'ft-card': FtCard
+    'ft-card': FtCard,
+    'ft-timestamp-catcher': FtTimestampCatcher
   },
   props: {
     published: {
@@ -34,6 +36,9 @@ export default Vue.extend({
     }
   },
   methods: {
+    onTimestamp: function(timestamp) {
+      this.$emit('timestampEvent', timestamp)
+    },
     parseDescriptionHtml: function (descriptionText) {
       descriptionText = descriptionText.replace(/target="_blank"/g, '')
       descriptionText = descriptionText.replace(/\/redirect.+?(?=q=)/g, '')

src/renderer/components/watch-video-description/watch-video-description.vue

@@ -1,8 +1,9 @@
 <template>
   <ft-card class="videoDescription">
-    <p
+    <ft-timestamp-catcher
       class="description"
-      v-html="shownDescription"
+      :inputHTML="shownDescription"
+      @timestampEvent="onTimestamp"
     />
   </ft-card>
 </template>

src/renderer/views/Watch/Watch.js

@@ -166,6 +166,9 @@ export default Vue.extend({
     }
   },
   methods: {
+    changeTimestamp: function(timestamp) {
+      this.$refs.videoPlayer.player.currentTime(timestamp)
+    },
     toggleTheatreMode: function() {
       this.useTheatreMode = !this.useTheatreMode
     },

src/renderer/views/Watch/Watch.vue

@@ -86,12 +86,14 @@
         :description-html="videoDescriptionHtml"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
+        @timestampEvent="changeTimestamp"
       />
       <watch-video-comments
         v-if="!isLoading && !isLive"
         :id="videoId"
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
+        @timestampEvent="changeTimestamp"
       />
     </div>
     <div class="sidebarArea">