From 7cb396fcce18ecdce3dff9e745ab11e9dcc67749 Mon Sep 17 00:00:00 2001
From: Mykyta Poturai <mykyta.poturai@tutanota.com>
Date: Sat, 19 Sep 2020 19:19:58 +0300
Subject: [PATCH] Make timestamps clickable

Replaces timestamps in comments and description with links that set
current video timestamp when clicked.
---
 .../ft-timestamp-catcher.css                  |  0
 .../ft-timestamp-catcher.js                   | 26 +++++++++++++++++++
 .../ft-timestamp-catcher.vue                  |  9 +++++++
 .../watch-video-comments.js                   |  8 +++++-
 .../watch-video-comments.vue                  |  8 +++---
 .../watch-video-description.js                |  7 ++++-
 .../watch-video-description.vue               |  5 ++--
 src/renderer/views/Watch/Watch.js             |  3 +++
 src/renderer/views/Watch/Watch.vue            |  2 ++
 9 files changed, 61 insertions(+), 7 deletions(-)
 create mode 100644 src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.css
 create mode 100644 src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js
 create mode 100644 src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.vue

diff --git a/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.css b/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js b/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.js
new file mode 100644
index 00000000..b66b234e
--- /dev/null
+++ b/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>')
+    }
+  }
+})
diff --git a/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.vue b/src/renderer/components/ft-timestamp-catcher/ft-timestamp-catcher.vue
new file mode 100644
index 00000000..034da7c8
--- /dev/null
+++ b/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" />
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.js b/src/renderer/components/watch-video-comments/watch-video-comments.js
index 29c4659f..01c05386 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.js
+++ b/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) {
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue
index 5a573f2a..e7881256 100644
--- a/src/renderer/components/watch-video-comments/watch-video-comments.vue
+++ b/src/renderer/components/watch-video-comments/watch-video-comments.vue
@@ -46,9 +46,11 @@
             {{ comment.time }}
           </span>
         </p>
-        <p class="commentText">
-          {{ comment.text }}
-        </p>
+        <ft-timestamp-catcher
+          class="commentText"
+          :inputHTML="comment.text"
+          @timestampEvent="onTimestamp"
+        />
         <p class="commentLikeCount">
           <font-awesome-icon
             icon="thumbs-up"
diff --git a/src/renderer/components/watch-video-description/watch-video-description.js b/src/renderer/components/watch-video-description/watch-video-description.js
index 095dc038..a4fc051b 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.js
+++ b/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, '')
diff --git a/src/renderer/components/watch-video-description/watch-video-description.vue b/src/renderer/components/watch-video-description/watch-video-description.vue
index 8ed65de6..7d0b7a4f 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.vue
+++ b/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>
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 48bf5807..aed598a0 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/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
     },
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index ee695f23..4b027a01 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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">