diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 67acb17bb96a1..7697364b00a0f 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -112,6 +112,9 @@ export default defineComponent({
hideViews: false,
addToPlaylistPromptCloseCallback: null,
debounceGetDeArrowThumbnail: null,
+ deArrowTogglePinned: false,
+ showDeArrowTitle: false,
+ showDeArrowThumbnail: false,
}
},
computed: {
@@ -337,7 +340,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 +397,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
@@ -496,10 +499,20 @@ 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)
+ },
+
+ deArrowToggleTitle: function() {
+ return this.deArrowTogglePinned
+ ? this.$t('Video.DeArrow.Show Modified Details')
+ : this.$t('Video.DeArrow.Show Original Details')
+ },
deArrowCache: function () {
return this.$store.getters.getDeArrowCache[this.id]
@@ -517,11 +530,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,7 +575,7 @@ 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)
}
@@ -567,6 +583,20 @@ export default defineComponent({
this.debounceGetDeArrowThumbnail()
}
},
+ toggleDeArrow() {
+ if (!this.deArrowChangedContent) {
+ return
+ }
+
+ this.deArrowTogglePinned = !this.deArrowTogglePinned
+
+ if (this.useDeArrowTitles) {
+ this.showDeArrowTitle = !this.showDeArrowTitle
+ }
+ if (this.useDeArrowThumbnails) {
+ this.showDeArrowThumbnail = !this.showDeArrowThumbnail
+ }
+ },
handleExternalPlayer: function () {
this.$emit('pause-player')
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index b8856f1151021..eb3c52df7a9c9 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/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);
+ }
+ }
+}
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 7d63dcf983228..e53bbf3a5a4f3 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -206,17 +206,31 @@
{{ $t('Search Listing.Label.Subtitles') }}
-