From d8c75628c61f39d139951fec8849d961db1f3af6 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Fri, 27 Dec 2024 19:19:47 +0800
Subject: [PATCH 1/7] ! Fix a few issues with collapsable video description

---
 .../components/FtTimestampCatcher.vue         | 10 +++++++-
 .../WatchVideoDescription.css                 | 24 ++++++++-----------
 .../WatchVideoDescription.vue                 |  8 +------
 3 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/FtTimestampCatcher.vue b/src/renderer/components/FtTimestampCatcher.vue
index 84bbf96e71eb1..1bc16cdb5e50f 100644
--- a/src/renderer/components/FtTimestampCatcher.vue
+++ b/src/renderer/components/FtTimestampCatcher.vue
@@ -1,5 +1,7 @@
 <template>
   <p
+    @click="onClick"
+    @keydown.space.prevent="onClick"
     @timestamp-clicked="catchTimestampClick"
     v-html="displayText"
   />
@@ -37,7 +39,13 @@ const displayText = props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):(\d+)/g, (times
   return `<a href="${url}" onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('timestamp-clicked',{bubbles:true,detail:${time}}));window.scrollTo(0,0)">${timestamp}</a>`
 })
 
-const emit = defineEmits(['timestamp-event'])
+const emit = defineEmits(['text-click', 'timestamp-event'])
+
+function onClick(e) {
+  // Ignore link clicks
+  if (e.target.tagName === 'A') { return }
+  emit('text-click')
+}
 
 /**
  * @param {CustomEvent} event
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index ae0da75e3b2db..83155a78c333a 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -1,7 +1,7 @@
 .videoDescription {
   position: relative;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   overflow-y: auto;
   max-block-size: 20lh;
 }
@@ -20,6 +20,10 @@
   color: var(--title-color);
 }
 
+.videoDescription.short {
+  cursor: pointer;
+}
+
 .videoDescription.short .descriptionStatus {
   position: absolute;
   inset-block-end: calc(1lh + 12px);
@@ -32,8 +36,10 @@
 
 .videoDescription:not(.short) .descriptionStatus {
   position: relative;
-  order: 0;
   margin-block-start: 1em;
+
+  /* Putting the control below description when expanded without separating template code */
+  order: 1;
 }
 
 .videoDescription.short .description {
@@ -42,16 +48,6 @@
 }
 
 .videoDescription:not(.short) .description {
-  order: 1;
-}
-
-.videoDescription .overlay {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  transition: background-color 200ms ease;
-}
-
-.videoDescription .overlay:hover {
-  background-color: var(--accent-color-opacity1);
+  /* Putting the control below description when expanded without separating template code */
+  order: 0;
 }
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index a2534db231c5e..c991d8f649508 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -25,19 +25,13 @@
       >
         {{ $t("Description.Expand Description") }}
       </span>
-      <div
-        v-if="!showFullDescription"
-        class="overlay"
-        @click="expandDescription"
-        @keydown.space.prevent="expandDescription"
-        @keydown.enter.prevent="expandDescription"
-      />
     </template>
     <FtTimestampCatcher
       ref="descriptionContainer"
       class="description"
       :input-html="shownDescription"
       @timestamp-event="onTimestamp"
+      @text-click="expandDescription"
     />
   </FtCard>
 </template>

From 4ab9c95e8cc7e9a83532829cee4a71f1403020cc Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sat, 28 Dec 2024 10:13:31 +0800
Subject: [PATCH 2/7] ! Fix more button cannot be clicked on to expand

---
 .../components/WatchVideoDescription/WatchVideoDescription.vue   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index c991d8f649508..200db30133c62 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -20,6 +20,7 @@
         class="descriptionStatus"
         role="button"
         tabindex="0"
+        @click="expandDescription"
         @keydown.space.prevent="expandDescription"
         @keydown.enter.prevent="expandDescription"
       >

From 67c14f83ae2c56f80f90f9f90e011331ccb12c7e Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sat, 28 Dec 2024 10:37:27 +0800
Subject: [PATCH 3/7] * Update description links to not be tabbed into when
 description box collapsed

---
 .../components/FtTimestampCatcher.vue         | 15 +++++++----
 .../WatchVideoDescription.vue                 | 25 +++++++++++++++++--
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/FtTimestampCatcher.vue b/src/renderer/components/FtTimestampCatcher.vue
index 1bc16cdb5e50f..a89b2d17cb5b5 100644
--- a/src/renderer/components/FtTimestampCatcher.vue
+++ b/src/renderer/components/FtTimestampCatcher.vue
@@ -8,20 +8,25 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { useRouter } from 'vue-router/composables'
 
 const props = defineProps({
   inputHtml: {
     type: String,
     default: ''
-  }
+  },
+  linkTabIndex: {
+    type: Number,
+    default: 0
+  },
 })
 
 const router = useRouter()
 const videoId = router.currentRoute.params.id
 
-/** @type {string} */
-const displayText = props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):(\d+)/g, (timestamp, hours, minutes, seconds) => {
+/** @type {import('vue').ComputedRef<string>} */
+const displayText = computed(() => props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):(\d+)/g, (timestamp, hours, minutes, seconds) => {
   let time = 60 * Number(minutes) + Number(seconds)
 
   if (hours) {
@@ -36,8 +41,8 @@ const displayText = props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):(\d+)/g, (times
   }).href
 
   // Adding the URL lets the user open the video in a new window at this timestamp
-  return `<a href="${url}" onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('timestamp-clicked',{bubbles:true,detail:${time}}));window.scrollTo(0,0)">${timestamp}</a>`
-})
+  return `<a tabindex="${props.linkTabIndex}" href="${url}" onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('timestamp-clicked',{bubbles:true,detail:${time}}));window.scrollTo(0,0)">${timestamp}</a>`
+}))
 
 const emit = defineEmits(['text-click', 'timestamp-event'])
 
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 200db30133c62..f7384e2869e85 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -30,7 +30,8 @@
     <FtTimestampCatcher
       ref="descriptionContainer"
       class="description"
-      :input-html="shownDescription"
+      :input-html="processedShownDescription"
+      :link-tab-index="linkTabIndex"
       @timestamp-event="onTimestamp"
       @text-click="expandDescription"
     />
@@ -40,7 +41,7 @@
 <script setup>
 import autolinker from 'autolinker'
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtTimestampCatcher from '../FtTimestampCatcher.vue'
 
@@ -81,6 +82,16 @@ if (props.descriptionHtml !== '') {
   }
 }
 
+const processedShownDescription = computed(() => {
+  if (shownDescription === '') { return shownDescription }
+
+  return processDescriptionHtml(shownDescription, linkTabIndex.value)
+})
+
+const linkTabIndex = computed(() => {
+  return showFullDescription.value ? 0 : -1
+})
+
 /**
  * @param {number} timestamp
  */
@@ -144,6 +155,16 @@ function parseDescriptionHtml(descriptionText) {
     .replaceAll('href="/hashtag/', 'href="https://wwww.youtube.com/hashtag/')
     .replaceAll('yt.www.watch.player.seekTo', 'changeDuration')
 }
+
+/**
+ * @param {string} descriptionText
+ * @param {number} tabIndex
+ * @returns {string}
+ */
+function processDescriptionHtml(descriptionText, tabIndex) {
+  return descriptionText
+    .replaceAll('<a', `<a tabindex="${tabIndex}"`)
+}
 </script>
 
 <style scoped src="./WatchVideoDescription.css" />

From bf07ad59062974356cdbe1cc773a09c3c434e9f1 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sat, 28 Dec 2024 10:40:01 +0800
Subject: [PATCH 4/7] * Update less button to be after description stuff when
 tabbing

---
 .../WatchVideoDescription.css                 |  8 ------
 .../WatchVideoDescription.vue                 | 26 ++++++++++---------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
index 83155a78c333a..9c6c207dfd40a 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.css
@@ -37,17 +37,9 @@
 .videoDescription:not(.short) .descriptionStatus {
   position: relative;
   margin-block-start: 1em;
-
-  /* Putting the control below description when expanded without separating template code */
-  order: 1;
 }
 
 .videoDescription.short .description {
   max-block-size: 4lh;
   overflow: hidden;
 }
-
-.videoDescription:not(.short) .description {
-  /* Putting the control below description when expanded without separating template code */
-  order: 0;
-}
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index f7384e2869e85..dc81c2119386b 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -5,18 +5,7 @@
   >
     <template v-if="showControls">
       <span
-        v-if="showFullDescription"
-        class="descriptionStatus"
-        role="button"
-        tabindex="0"
-        @click="collapseDescription"
-        @keydown.space.prevent="collapseDescription"
-        @keydown.enter.prevent="collapseDescription"
-      >
-        {{ $t("Description.Collapse Description") }}
-      </span>
-      <span
-        v-else
+        v-if="!showFullDescription"
         class="descriptionStatus"
         role="button"
         tabindex="0"
@@ -35,6 +24,19 @@
       @timestamp-event="onTimestamp"
       @text-click="expandDescription"
     />
+    <template v-if="showControls">
+      <span
+        v-if="showFullDescription"
+        class="descriptionStatus"
+        role="button"
+        tabindex="0"
+        @click="collapseDescription"
+        @keydown.space.prevent="collapseDescription"
+        @keydown.enter.prevent="collapseDescription"
+      >
+        {{ $t("Description.Collapse Description") }}
+      </span>
+    </template>
   </FtCard>
 </template>
 

From 04c54ab37ddbf355c54b3271dd92277826093d7e Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sun, 29 Dec 2024 19:03:43 +0800
Subject: [PATCH 5/7] $ Remove unnecessary template tag

---
 .../WatchVideoDescription.vue                 | 48 +++++++++----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index dc81c2119386b..059566d66ce56 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -3,19 +3,17 @@
     v-if="shownDescription.length > 0"
     :class="{ videoDescription: true, short: !showFullDescription }"
   >
-    <template v-if="showControls">
-      <span
-        v-if="!showFullDescription"
-        class="descriptionStatus"
-        role="button"
-        tabindex="0"
-        @click="expandDescription"
-        @keydown.space.prevent="expandDescription"
-        @keydown.enter.prevent="expandDescription"
-      >
-        {{ $t("Description.Expand Description") }}
-      </span>
-    </template>
+    <span
+      v-if="showControls && !showFullDescription"
+      class="descriptionStatus"
+      role="button"
+      tabindex="0"
+      @click="expandDescription"
+      @keydown.space.prevent="expandDescription"
+      @keydown.enter.prevent="expandDescription"
+    >
+      {{ $t("Description.Expand Description") }}
+    </span>
     <FtTimestampCatcher
       ref="descriptionContainer"
       class="description"
@@ -24,19 +22,17 @@
       @timestamp-event="onTimestamp"
       @text-click="expandDescription"
     />
-    <template v-if="showControls">
-      <span
-        v-if="showFullDescription"
-        class="descriptionStatus"
-        role="button"
-        tabindex="0"
-        @click="collapseDescription"
-        @keydown.space.prevent="collapseDescription"
-        @keydown.enter.prevent="collapseDescription"
-      >
-        {{ $t("Description.Collapse Description") }}
-      </span>
-    </template>
+    <span
+      v-if="showControls && showFullDescription"
+      class="descriptionStatus"
+      role="button"
+      tabindex="0"
+      @click="collapseDescription"
+      @keydown.space.prevent="collapseDescription"
+      @keydown.enter.prevent="collapseDescription"
+    >
+      {{ $t("Description.Collapse Description") }}
+    </span>
   </FtCard>
 </template>
 

From 7d16b4aab082d692087614f83f0053b7a2535b49 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Mon, 30 Dec 2024 09:36:35 +0800
Subject: [PATCH 6/7] $ Use string tab index values

---
 src/renderer/components/FtTimestampCatcher.vue                | 4 ++--
 .../WatchVideoDescription/WatchVideoDescription.vue           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/FtTimestampCatcher.vue b/src/renderer/components/FtTimestampCatcher.vue
index a89b2d17cb5b5..1d0cabb09b9dd 100644
--- a/src/renderer/components/FtTimestampCatcher.vue
+++ b/src/renderer/components/FtTimestampCatcher.vue
@@ -17,8 +17,8 @@ const props = defineProps({
     default: ''
   },
   linkTabIndex: {
-    type: Number,
-    default: 0
+    type: String,
+    default: '0'
   },
 })
 
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 059566d66ce56..384ce17ebf21f 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -87,7 +87,7 @@ const processedShownDescription = computed(() => {
 })
 
 const linkTabIndex = computed(() => {
-  return showFullDescription.value ? 0 : -1
+  return showFullDescription.value ? '0' : '-1'
 })
 
 /**
@@ -156,7 +156,7 @@ function parseDescriptionHtml(descriptionText) {
 
 /**
  * @param {string} descriptionText
- * @param {number} tabIndex
+ * @param {string} tabIndex
  * @returns {string}
  */
 function processDescriptionHtml(descriptionText, tabIndex) {

From b35f5f27c493222e15b496c78a885f905ddf3274 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Mon, 30 Dec 2024 09:46:04 +0800
Subject: [PATCH 7/7] * Only attach event listener to timestamp catcher
 componenet from description component

---
 src/renderer/components/FtTimestampCatcher.vue       | 10 +---------
 .../WatchVideoDescription/WatchVideoDescription.vue  | 12 +++++++++++-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/FtTimestampCatcher.vue b/src/renderer/components/FtTimestampCatcher.vue
index 1d0cabb09b9dd..8110efc0173bf 100644
--- a/src/renderer/components/FtTimestampCatcher.vue
+++ b/src/renderer/components/FtTimestampCatcher.vue
@@ -1,7 +1,5 @@
 <template>
   <p
-    @click="onClick"
-    @keydown.space.prevent="onClick"
     @timestamp-clicked="catchTimestampClick"
     v-html="displayText"
   />
@@ -44,13 +42,7 @@ const displayText = computed(() => props.inputHtml.replaceAll(/(?:(\d+):)?(\d+):
   return `<a tabindex="${props.linkTabIndex}" href="${url}" onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('timestamp-clicked',{bubbles:true,detail:${time}}));window.scrollTo(0,0)">${timestamp}</a>`
 }))
 
-const emit = defineEmits(['text-click', 'timestamp-event'])
-
-function onClick(e) {
-  // Ignore link clicks
-  if (e.target.tagName === 'A') { return }
-  emit('text-click')
-}
+const emit = defineEmits(['timestamp-event'])
 
 /**
  * @param {CustomEvent} event
diff --git a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
index 384ce17ebf21f..7223d2543494b 100644
--- a/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
+++ b/src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue
@@ -20,7 +20,7 @@
       :input-html="processedShownDescription"
       :link-tab-index="linkTabIndex"
       @timestamp-event="onTimestamp"
-      @text-click="expandDescription"
+      @click.native="expandDescriptionWithClick"
     />
     <span
       v-if="showControls && showFullDescription"
@@ -97,6 +97,16 @@ function onTimestamp(timestamp) {
   emit('timestamp-event', timestamp)
 }
 
+/**
+ @param {PointerEvent} e
+ */
+function expandDescriptionWithClick(e) {
+  // Ignore link clicks
+  if (e.target.tagName === 'A') { return }
+
+  expandDescription()
+}
+
 /**
  * Enables user to view entire contents of description
  */