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') }} - +
+ + +