* Update description links to not be tabbed into when description box…

… collapsed

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'])
 

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" />