Added Button to Show Original Title and Thumbnail for DeArrow

src/renderer/components/ft-list-video/ft-list-video.js

@@ -112,6 +112,10 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
+      deArrowToggleTitle: this.$t('Video.Sponsor Block category.Show Original Details'),
+      deArrowTogglePinned: false,
+      showDeArrowTitle: false,
+      showDeArrowThumbnail: false,
     }
   },
   computed: {
@@ -337,7 +341,7 @@ export default defineComponent({
         return require('../../assets/img/thumbnail_placeholder.svg')
       }
 
-      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail != null) {
+      if (this.showDeArrowThumbnail && this.deArrowCache?.thumbnail != null) {
         return this.deArrowCache.thumbnail
       }
 
@@ -394,7 +398,7 @@ export default defineComponent({
 
     displayTitle: function () {
       let title
-      if (this.useDeArrowTitles && this.deArrowCache?.title) {
+      if (this.showDeArrowTitle && this.deArrowCache?.title) {
         title = this.deArrowCache.title
       } else {
         title = this.title
@@ -408,7 +412,7 @@ export default defineComponent({
     },
 
     displayDuration: function () {
-      if (this.useDeArrowTitles && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
+      if (this.showDeArrowTitle && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
         return formatDurationAsTimestamp(this.deArrowCache.videoDuration)
       }
       return this.duration
@@ -496,10 +500,14 @@ export default defineComponent({
     useDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
     },
-
     useDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
+    deArrowChangedContent: function () {
+      return (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
+        (this.useDeArrowTitles && this.deArrowCache?.title &&
+          this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
+    },
 
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
@@ -517,11 +525,14 @@ export default defineComponent({
   created: function () {
     this.parseVideoData()
 
-    if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
+    this.showDeArrowTitle = this.useDeArrowTitles
+    this.showDeArrowThumbnail = this.useDeArrowThumbnails
+
+    if ((this.showDeArrowTitle || this.showDeArrowThumbnail) && !this.deArrowCache) {
       this.fetchDeArrowData()
     }
 
-    if (this.useDeArrowThumbnails && this.deArrowCache && this.deArrowCache.thumbnail == null) {
+    if (this.showDeArrowThumbnail && this.deArrowCache && this.deArrowCache.thumbnail == null) {
       if (this.debounceGetDeArrowThumbnail == null) {
         this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
       }
@@ -559,14 +570,31 @@ export default defineComponent({
       this.$store.commit('addVideoToDeArrowCache', cacheData)
 
       // fetch dearrow thumbnails if enabled
-      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail === null) {
+      if (this.showDeArrowThumbnail && this.deArrowCache?.thumbnail === null) {
         if (this.debounceGetDeArrowThumbnail == null) {
           this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
         }
 
         this.debounceGetDeArrowThumbnail()
       }
     },
+    toggleDeArrow() {
+      if (!this.deArrowChangedContent) {
+        return
+      }
+
+      this.deArrowTogglePinned = !this.deArrowTogglePinned
+      this.deArrowToggleTitle = this.deArrowTogglePinned
+        ? this.$t('Video.Sponsor Block category.Show Modified Details')
+        : this.$t('Video.Sponsor Block category.Show Original Details')
+
+      if (this.useDeArrowTitles) {
+        this.showDeArrowTitle = !this.showDeArrowTitle
+      }
+      if (this.useDeArrowThumbnails) {
+        this.showDeArrowThumbnail = !this.showDeArrowThumbnail
+      }
+    },
 
     handleExternalPlayer: function () {
       this.$emit('pause-player')

src/renderer/components/ft-list-video/ft-list-video.scss

@@ -27,3 +27,30 @@
 .videoTagLine .videoTag:first-child {
   margin-inline-start: 0;
 }
+
+.deArrowToggleButton {
+  border-radius: 50%;
+  cursor: pointer;
+  block-size: 1em;
+  inline-size: 1em;
+  padding: 10px;
+  font-size: 16px;
+  transition: background 0.15s ease-out;
+  color: var(--primary-color);
+
+  &:not(.disabled) {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--side-nav-hover-color);
+    }
+
+    &:active {
+      background-color: var(--side-nav-active-color);
+    }
+
+    &.alwaysVisible {
+      opacity: 1;
+      filter: grayscale(1);
+    }
+  }
+}

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -206,17 +206,29 @@
           {{ $t('Search Listing.Label.Subtitles') }}
         </div>
       </div>
-      <ft-icon-button
-        class="optionsButton"
-        :icon="['fas', 'ellipsis-v']"
-        :title="$t('Video.More Options')"
-        theme="base-no-default"
-        :size="16"
-        :use-shadow="false"
-        dropdown-position-x="left"
-        :dropdown-options="dropdownOptions"
-        @click="handleOptionsClick"
-      />
+      <div class="buttonStack">
+        <ft-icon-button
+          class="optionsButton"
+          :icon="['fas', 'ellipsis-v']"
+          :title="$t('Video.More Options')"
+          theme="base-no-default"
+          :size="16"
+          :use-shadow="false"
+          dropdown-position-x="left"
+          :dropdown-options="dropdownOptions"
+          @click="handleOptionsClick"
+        />
+        <font-awesome-icon
+          v-if="deArrowChangedContent || deArrowTogglePinned"
+          :title="deArrowToggleTitle"
+          :icon="['far', 'dot-circle']"
+          class="optionsButton deArrowToggleButton"
+          :class="{ alwaysVisible: deArrowTogglePinned }"
+          tabindex="0"
+          role="button"
+          @click="toggleDeArrow"
+        />
+      </div>
       <p
         v-if="description && effectiveListTypeIsList && appearance === 'result'"
         class="description"

src/renderer/main.js

@@ -109,7 +109,8 @@ import {
   faWifi
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as farBookmark
+  faBookmark as farBookmark,
+  faDotCircle as farDotCircle
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faBitcoin,
@@ -223,6 +224,7 @@ library.add(
 
   // solid icons
   farBookmark,
+  farDotCircle,
 
   // brand icons
   faGithub,

src/renderer/scss-partials/_ft-list-item.scss

@@ -216,7 +216,11 @@ $watched-transition-duration: 0.5s;
     grid-template:
       'title optionsExternalButton' auto
       'infoLine optionsExternalButton' auto
-      'description description' auto / 1fr auto;
+      'description optionsExternalButton' auto / 1fr auto;
+
+    .buttonStack {
+      grid-area: optionsExternalButton;
+    }
 
     .optionsButton {
       grid-area: optionsExternalButton;

static/locales/en-US.yaml

@@ -830,6 +830,8 @@ Video:
   Streamed on: Streamed on
   Started streaming on: Started streaming on
   Sponsor Block category:
+    Show Original Details: Show Original Details
+    Show Modified Details: Show Modified Details
     sponsor: Sponsor
     intro: Intro
     outro: Outro