Skip to content

Added Button to Show Original Title and Thumbnail for DeArrow #6164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Dec 3, 2024
Merged

Added Button to Show Original Title and Thumbnail for DeArrow #6164

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f953f08
added buttons to show original title and thumbnail
JL0000 Nov 13, 2024
604388c
refactored logic
JL0000 Nov 13, 2024
37abd5c
added small button for non changed titles
JL0000 Nov 13, 2024
e9a7342
dont allow button to be permanent if dearrow doesnt change anything
JL0000 Nov 14, 2024
12b3d73
changed button padding to before
JL0000 Nov 15, 2024
a7e0918
added new setting and changed colour
JL0000 Nov 22, 2024
2e35ccc
changed disabled dot colour to grey
JL0000 Nov 22, 2024
6481c3a
moved button location and changed button icon
JL0000 Nov 23, 2024
1f41814
removed unused code
JL0000 Nov 23, 2024
501bf04
moved static css to scss file
JL0000 Nov 23, 2024
13fa7f9
allow option button to overflow to the third row
JL0000 Nov 23, 2024
bc9dc98
removed new setting and relocated toggle
JL0000 Nov 23, 2024
362f134
removed unused code
JL0000 Nov 23, 2024
7c93d7f
moved dearrow strings
JL0000 Nov 23, 2024
d48c57e
Added keyboard navigation
JL0000 Nov 25, 2024
91afdb4
made toggle title into prop
JL0000 Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/renderer/components/ft-icon-button/ft-icon-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ export default defineComponent({
type: String,
default: 'base'
},
color: {
type: String,
required: false,
default: ''
},
useShadow: {
type: Boolean,
default: true
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/components/ft-icon-button/ft-icon-button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
}"
:style="{
padding: padding + 'px',
fontSize: size + 'px'
fontSize: size + 'px',
...(color ? { color: color } : {})
}"
tabindex="0"
role="button"
Expand Down
43 changes: 40 additions & 3 deletions src/renderer/components/ft-list-video/ft-list-video.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ export default defineComponent({
hideViews: false,
addToPlaylistPromptCloseCallback: null,
debounceGetDeArrowThumbnail: null,
deArrowToggleTitle: '',
showDeArrowToggle: false,
deArrowTogglePinned: false,
useDeArrowTitles: null,
useDeArrowThumbnails: null,
isHovered: false,
}
},
computed: {
Expand Down Expand Up @@ -493,13 +499,20 @@ export default defineComponent({
return query
},

useDeArrowTitles: function () {
deArrowChangedContent: function () {
return (this.globalUseDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
(this.globalUseDeArrowTitles && this.deArrowCache?.title &&
this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
},
globalUseDeArrowTitles: function () {
return this.$store.getters.getUseDeArrowTitles
},

useDeArrowThumbnails: function () {
globalUseDeArrowThumbnails: function () {
return this.$store.getters.getUseDeArrowThumbnails
},
deArrowShowOriginal: function () {
return this.$store.getters.getDeArrowShowOriginal
},

deArrowCache: function () {
return this.$store.getters.getDeArrowCache[this.id]
Expand All @@ -517,6 +530,13 @@ export default defineComponent({
created: function () {
this.parseVideoData()

this.useDeArrowTitles = this.globalUseDeArrowTitles
this.useDeArrowThumbnails = this.globalUseDeArrowThumbnails
if (this.deArrowShowOriginal && (this.useDeArrowTitles || this.useDeArrowThumbnails)) {
this.showDeArrowToggle = true
this.deArrowToggleTitle = this.$t('Video.Sponsor Block category.Show Original Details')
}

if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
this.fetchDeArrowData()
}
Expand Down Expand Up @@ -567,6 +587,23 @@ export default defineComponent({
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.globalUseDeArrowTitles) {
this.useDeArrowTitles = !this.useDeArrowTitles
}
if (this.globalUseDeArrowThumbnails) {
this.useDeArrowThumbnails = !this.useDeArrowThumbnails
}
},

handleExternalPlayer: function () {
this.$emit('pause-player')
Expand Down
41 changes: 32 additions & 9 deletions src/renderer/components/ft-list-video/ft-list-video.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,23 @@
:style="{inlineSize: progressPercentage + '%'}"
/>
</div>
<div class="info">
<router-link
class="title"
:to="watchPageLinkTo"
>
<h3 class="h3Title">
{{ displayTitle }}
</h3>
</router-link>
<div
class="info"
@mouseover="isHovered = true"
@mouseleave="isHovered = false"
@focusin="isHovered = true"
@blur="isHovered = false"
>
<div class="title">
<router-link
class="title"
:to="watchPageLinkTo"
>
<h3 class="h3Title">
{{ displayTitle }}
</h3>
</router-link>
</div>
<div class="infoLine">
<router-link
v-if="channelId !== null"
Expand Down Expand Up @@ -206,6 +214,21 @@
{{ $t('Search Listing.Label.Subtitles') }}
</div>
</div>

<ft-icon-button
v-if="(showDeArrowToggle && isHovered) || deArrowTogglePinned"
class="deArrowToggleButton"
:class="{alwaysVisible: deArrowTogglePinned}"
:icon="['fas', 'dot-circle']"
:color="deArrowChangedContent ? 'var(--primary-color)' : '#808080'"
Copy link
Member

@absidue absidue Nov 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the existing theme variables, don't hardcode colours, as it has to be usable with all app-wide themes. Additionally the ft-icon-button component already has a theme property for changing the colours of it, please use that instead of introducing another way to do the same thing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried using the primary theme in ft-icon-button but the colours are reversed. I don't think I should create a new theme or change the current one. Not sure how to proceed.

ft-icon-button.scss

&.primary {
    background-color: var(--primary-color);
    color: var(--text-with-main-color);

Current
image
If I reverse color with background-color
image

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One fix would be to use the --favorite-icon-color as the "enabled" mode color, as that's one we already have set as a universal "other" state. You could also do filter: grayscale(1); for the disabled state and the primary/secondary icon color for the enabled state, which would match better with the existing DeArrow web UI.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the end I just ended up using <font-awesome-icon> and creating a custom css class for the button because the main and hover colours are different.

:padding="deArrowChangedContent ? 10 : 12"
:title="deArrowToggleTitle"
theme="base-no-default"
:size="deArrowChangedContent ? 16 : 12"
:use-shadow="false"
role="button"
@click="toggleDeArrow"
/>
<ft-icon-button
class="optionsButton"
:icon="['fas', 'ellipsis-v']"
Expand Down
8 changes: 8 additions & 0 deletions src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,12 @@ export default defineComponent({
useDeArrowThumbnails: function () {
return this.$store.getters.getUseDeArrowThumbnails
},
deArrowShowOriginal: function () {
return this.$store.getters.getDeArrowShowOriginal
},
deArrowShowOriginalAlwaysOn: function () {
return this.$store.getters.getDeArrowShowOriginalAlwaysOn
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this value doesn't exists in the store and is also not used in the component. This is presumably a leftover from previous iterations of this pull request?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that is leftover, my bad

deArrowThumbnailGeneratorUrl: function () {
return this.$store.getters.getDeArrowThumbnailGeneratorUrl
},
Expand Down Expand Up @@ -85,6 +91,8 @@ export default defineComponent({
'updateSponsorBlockShowSkippedToast',
'updateUseDeArrowTitles',
'updateUseDeArrowThumbnails',
'updateDeArrowShowOriginal',
'updateDeArrowShowOriginalAlwaysOn',
'updateDeArrowThumbnailGeneratorUrl'
])
}
Expand Down
52 changes: 33 additions & 19 deletions src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,39 @@
<ft-settings-section
:title="$t('Settings.SponsorBlock Settings.SponsorBlock Settings')"
>
<ft-flex-box class="settingsFlexStart500px">
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
:default-value="useSponsorBlock"
@change="handleUpdateSponsorBlock"
/>
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.UseDeArrowTitles')"
:default-value="useDeArrowTitles"
:tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
@change="handleUpdateUseDeArrowTitles"
/>
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
:default-value="useDeArrowThumbnails"
:tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
@change="handleUpdateUseDeArrowThumbnails"
/>
</ft-flex-box>
<div class="switchColumnGrid">
<div class="switchColumn">
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
:default-value="useSponsorBlock"
:compact="true"
@change="handleUpdateSponsorBlock"
/>
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
:default-value="useDeArrowThumbnails"
:compact="true"
:tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
@change="handleUpdateUseDeArrowThumbnails"
/>
</div>
<div class="switchColumn">
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.UseDeArrowTitles')"
:default-value="useDeArrowTitles"
:compact="true"
:tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
@change="handleUpdateUseDeArrowTitles"
/>
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.Show Show Original Button')"
:default-value="deArrowShowOriginal"
:compact="true"
:tooltip="$t('Tooltips.SponsorBlock Settings.Show Show Original Button')"
@change="updateDeArrowShowOriginal"
/>
</div>
</div>
<template
v-if="useSponsorBlock || useDeArrowTitles || useDeArrowThumbnails"
>
Expand Down
2 changes: 2 additions & 0 deletions src/renderer/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
faCopy,
faDatabase,
faDisplay,
faDotCircle,
faDownload,
faEdit,
faEllipsisH,
Expand Down Expand Up @@ -151,6 +152,7 @@ library.add(
faCopy,
faDatabase,
faDisplay,
faDotCircle,
faDownload,
faEdit,
faEllipsisH,
Expand Down
13 changes: 13 additions & 0 deletions src/renderer/scss-partials/_ft-list-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,13 +220,22 @@ $watched-transition-duration: 0.5s;

.optionsButton {
grid-area: optionsExternalButton;
justify-self: end;
}

.deArrowToggleButton {
grid-area: optionsExternalButton;
margin-inline-end: 36px;
position: relative;
}

.externalPlayerButton {
grid-area: optionsExternalButton;
}

.title {
display: flex;
justify-content: space-between;
font-size: 20px;
grid-area: title;
text-decoration: none;
Expand Down Expand Up @@ -369,6 +378,10 @@ $watched-transition-duration: 0.5s;
opacity: 1;
}

.optionsButton.alwaysVisible {
opacity: 1;
}

.quickBookmarkVideoIcon:not(.alwaysVisible),
.addToPlaylistIcon:not(.alwaysVisible),
.externalPlayerIcon,
Expand Down
1 change: 1 addition & 0 deletions src/renderer/store/modules/settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,7 @@ const state = {
settingsPassword: '',
useDeArrowTitles: false,
useDeArrowThumbnails: false,
deArrowShowOriginal: false,
deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app',
// This makes the `favorites` playlist uses as quick bookmark target
// If the playlist is removed quick bookmark is disabled
Expand Down
4 changes: 4 additions & 0 deletions static/locales/en-US.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -592,6 +592,7 @@ Settings:
Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
UseDeArrowTitles: Use DeArrow Video Titles
UseDeArrowThumbnails: Use DeArrow for thumbnails
Show Show Original Button: Show "Show Original" Button
'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)': 'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)'
Skip Options:
Skip Option: Skip Option
Expand Down Expand Up @@ -830,6 +831,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
Expand Down Expand Up @@ -1034,6 +1037,7 @@ Tooltips:
SponsorBlock Settings:
UseDeArrowTitles: Replace video titles with user-submitted titles from DeArrow.
UseDeArrowThumbnails: Replace video thumbnails with thumbnails from DeArrow.
Show Show Original Button: Displays a toggle next to the title that switches between the original and modified title/thumbnail

# Toast Messages
Local API Error (Click to copy): Local API Error (Click to copy)
Expand Down