Merge branch 'fix/description' into custom-builds/tmp

* fix/description:
  * Only attach event listener to timestamp catcher componenet from description component
  $ Use string tab index values
  $ Remove unnecessary template tag
  * Update less button to be after description stuff when tabbing
  * Update description links to not be tabbed into when description box collapsed
  ! Fix more button cannot be clicked on to expand
  ! Fix a few issues with collapsable video description

src/renderer/components/FtTimestampCatcher.vue

@@ -6,20 +6,25 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { useRouter } from 'vue-router/composables'
 
 const props = defineProps({
   inputHtml: {
     type: String,
     default: ''
-  }
+  },
+  linkTabIndex: {
+    type: String,
+    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) {
@@ -34,8 +39,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(['timestamp-event'])
 

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,26 +36,10 @@
 
 .videoDescription:not(.short) .descriptionStatus {
   position: relative;
-  order: 0;
   margin-block-start: 1em;
 }
 
 .videoDescription.short .description {
   max-block-size: 4lh;
   overflow: hidden;
 }
-
-.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);
-}

src/renderer/components/WatchVideoDescription/WatchVideoDescription.vue

@@ -3,49 +3,43 @@
     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="collapseDescription"
-        @keydown.space.prevent="collapseDescription"
-        @keydown.enter.prevent="collapseDescription"
-      >
-        {{ $t("Description.Collapse Description") }}
-      </span>
-      <span
-        v-else
-        class="descriptionStatus"
-        role="button"
-        tabindex="0"
-        @keydown.space.prevent="expandDescription"
-        @keydown.enter.prevent="expandDescription"
-      >
-        {{ $t("Description.Expand Description") }}
-      </span>
-      <div
-        v-if="!showFullDescription"
-        class="overlay"
-        @click="expandDescription"
-        @keydown.space.prevent="expandDescription"
-        @keydown.enter.prevent="expandDescription"
-      />
-    </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"
-      :input-html="shownDescription"
+      :input-html="processedShownDescription"
+      :link-tab-index="linkTabIndex"
       @timestamp-event="onTimestamp"
+      @click.native="expandDescriptionWithClick"
     />
+    <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>
 
 <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'
 
@@ -86,13 +80,33 @@ 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
  */
 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
  */
@@ -149,6 +163,16 @@ function parseDescriptionHtml(descriptionText) {
     .replaceAll('href="/hashtag/', 'href="https://wwww.youtube.com/hashtag/')
     .replaceAll('yt.www.watch.player.seekTo', 'changeDuration')
 }
+
+/**
+ * @param {string} descriptionText
+ * @param {string} tabIndex
+ * @returns {string}
+ */
+function processDescriptionHtml(descriptionText, tabIndex) {
+  return descriptionText
+    .replaceAll('<a', `<a tabindex="${tabIndex}"`)
+}
 </script>
 
 <style scoped src="./WatchVideoDescription.css" />