mirror of https://github.com/FreeTubeApp/FreeTube
Add option to change thumbnail appearance (#3890)
* Add option to blur thumbnails * Add dropdown for different thumbnail display modes * Add dropdown for different thumbnail display modes * Fix thumbnail display mode setting not appearing due to incorrect localization * Rename thumbnail display mode option 'Not Loaded' to 'Hidden' * Fix thumbnail display mode 'hidden' not working * Fix thumbnail display mode not applying to playlists Makes thumbnail display mode setting also affect thumbnails in ft-list-playlist and playlist-info. * Remove unnecessary styling Co-authored-by: PikachuEXE <pikachuexe@gmail.com> * Make hidden thumbnails toggleable from thumbnail preferences * Replace thumbnail placeholder png with svg * Fix thumbnail preference 'hidden' not applying to ft-list-playlist * Fix placeholder svg breaking playlist layout * Refactor ft-list-video --------- Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
This commit is contained in:
parent
1bcbb38065
commit
884ba91115
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180"><rect width="320" height="180" x="-160" y="-90" transform="translate(160 90)" fill="#9e9e9e"/><path fill="#545454" d="M135.991 131.796V48.427l72.202 41.685z"/></svg>
|
After Width: | Height: | Size: 231 B |
|
@ -11,7 +11,7 @@ export default defineComponent({
|
||||||
'ft-settings-section': FtSettingsSection,
|
'ft-settings-section': FtSettingsSection,
|
||||||
'ft-toggle-switch': FtToggleSwitch,
|
'ft-toggle-switch': FtToggleSwitch,
|
||||||
'ft-input-tags': FtInputTags,
|
'ft-input-tags': FtInputTags,
|
||||||
'ft-flex-box': FtFlexBox
|
'ft-flex-box': FtFlexBox,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
hideVideoViews: function () {
|
hideVideoViews: function () {
|
||||||
|
@ -95,6 +95,12 @@ export default defineComponent({
|
||||||
showDistractionFreeTitles: function () {
|
showDistractionFreeTitles: function () {
|
||||||
return this.$store.getters.getShowDistractionFreeTitles
|
return this.$store.getters.getShowDistractionFreeTitles
|
||||||
},
|
},
|
||||||
|
thumbnailPreference: function () {
|
||||||
|
return this.$store.getters.getThumbnailPreference
|
||||||
|
},
|
||||||
|
blurThumbnails: function () {
|
||||||
|
return this.$store.getters.getBlurThumbnails
|
||||||
|
},
|
||||||
channelsHidden: function () {
|
channelsHidden: function () {
|
||||||
return JSON.parse(this.$store.getters.getChannelsHidden)
|
return JSON.parse(this.$store.getters.getChannelsHidden)
|
||||||
},
|
},
|
||||||
|
@ -148,7 +154,8 @@ export default defineComponent({
|
||||||
'updateHideChannelReleases',
|
'updateHideChannelReleases',
|
||||||
'updateHideSubscriptionsVideos',
|
'updateHideSubscriptionsVideos',
|
||||||
'updateHideSubscriptionsShorts',
|
'updateHideSubscriptionsShorts',
|
||||||
'updateHideSubscriptionsLive'
|
'updateHideSubscriptionsLive',
|
||||||
|
'updateBlurThumbnails'
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -199,6 +199,13 @@
|
||||||
:default-value="hideSharingActions"
|
:default-value="hideSharingActions"
|
||||||
@change="updateHideSharingActions"
|
@change="updateHideSharingActions"
|
||||||
/>
|
/>
|
||||||
|
<ft-toggle-switch
|
||||||
|
:label="$t('Settings.Distraction Free Settings.Blur Thumbnails')"
|
||||||
|
:compact="true"
|
||||||
|
:default-value="blurThumbnails && thumbnailPreference !== 'hidden'"
|
||||||
|
:disabled="thumbnailPreference === 'hidden'"
|
||||||
|
v-on="thumbnailPreference === 'hidden' ? { change: updateBlurThumbnails(false) } : { change: updateBlurThumbnails}"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="switchColumn">
|
<div class="switchColumn">
|
||||||
<ft-toggle-switch
|
<ft-toggle-switch
|
||||||
|
|
|
@ -42,6 +42,18 @@ export default defineComponent({
|
||||||
|
|
||||||
defaultPlayback: function () {
|
defaultPlayback: function () {
|
||||||
return this.$store.getters.getDefaultPlayback
|
return this.$store.getters.getDefaultPlayback
|
||||||
|
},
|
||||||
|
|
||||||
|
blurThumbnails: function () {
|
||||||
|
return this.$store.getters.getBlurThumbnails
|
||||||
|
},
|
||||||
|
|
||||||
|
blurThumbnailsStyle: function () {
|
||||||
|
return this.blurThumbnails ? 'blur(20px)' : null
|
||||||
|
},
|
||||||
|
|
||||||
|
thumbnailPreference: function () {
|
||||||
|
return this.$store.getters.getThumbnailPreference
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created: function () {
|
created: function () {
|
||||||
|
@ -67,7 +79,11 @@ export default defineComponent({
|
||||||
|
|
||||||
parseInvidiousData: function () {
|
parseInvidiousData: function () {
|
||||||
this.title = this.data.title
|
this.title = this.data.title
|
||||||
this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
|
if (this.thumbnailPreference === 'hidden') {
|
||||||
|
this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
|
||||||
|
} else {
|
||||||
|
this.thumbnail = this.data.playlistThumbnail.replace('https://i.ytimg.com', this.currentInvidiousInstance).replace('hqdefault', 'mqdefault')
|
||||||
|
}
|
||||||
this.channelName = this.data.author
|
this.channelName = this.data.author
|
||||||
this.channelId = this.data.authorId
|
this.channelId = this.data.authorId
|
||||||
this.playlistId = this.data.playlistId
|
this.playlistId = this.data.playlistId
|
||||||
|
@ -80,7 +96,11 @@ export default defineComponent({
|
||||||
|
|
||||||
parseLocalData: function () {
|
parseLocalData: function () {
|
||||||
this.title = this.data.title
|
this.title = this.data.title
|
||||||
this.thumbnail = this.data.thumbnail
|
if (this.thumbnailPreference === 'hidden') {
|
||||||
|
this.thumbnail = require('../../assets/img/thumbnail_placeholder.svg')
|
||||||
|
} else {
|
||||||
|
this.thumbnail = this.data.thumbnail
|
||||||
|
}
|
||||||
this.channelName = this.data.channelName
|
this.channelName = this.data.channelName
|
||||||
this.channelId = this.data.channelId
|
this.channelId = this.data.channelId
|
||||||
this.playlistId = this.data.playlistId
|
this.playlistId = this.data.playlistId
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
alt=""
|
alt=""
|
||||||
:src="thumbnail"
|
:src="thumbnail"
|
||||||
class="thumbnailImage"
|
class="thumbnailImage"
|
||||||
|
:style="{filter: blurThumbnailsStyle}"
|
||||||
>
|
>
|
||||||
</router-link>
|
</router-link>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -88,6 +88,14 @@ export default defineComponent({
|
||||||
return this.$store.getters.getThumbnailPreference
|
return this.$store.getters.getThumbnailPreference
|
||||||
},
|
},
|
||||||
|
|
||||||
|
blurThumbnails: function () {
|
||||||
|
return this.$store.getters.getBlurThumbnails
|
||||||
|
},
|
||||||
|
|
||||||
|
blurThumbnailsStyle: function () {
|
||||||
|
return this.blurThumbnails ? 'blur(20px)' : null
|
||||||
|
},
|
||||||
|
|
||||||
backendPreference: function () {
|
backendPreference: function () {
|
||||||
return this.$store.getters.getBackendPreference
|
return this.$store.getters.getBackendPreference
|
||||||
},
|
},
|
||||||
|
@ -239,6 +247,8 @@ export default defineComponent({
|
||||||
return `${baseUrl}/vi/${this.id}/mq2.jpg`
|
return `${baseUrl}/vi/${this.id}/mq2.jpg`
|
||||||
case 'end':
|
case 'end':
|
||||||
return `${baseUrl}/vi/${this.id}/mq3.jpg`
|
return `${baseUrl}/vi/${this.id}/mq3.jpg`
|
||||||
|
case 'hidden':
|
||||||
|
return require('../../assets/img/thumbnail_placeholder.svg')
|
||||||
default:
|
default:
|
||||||
return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
|
return `${baseUrl}/vi/${this.id}/mqdefault.jpg`
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
:src="thumbnail"
|
:src="thumbnail"
|
||||||
class="thumbnailImage"
|
class="thumbnailImage"
|
||||||
alt=""
|
alt=""
|
||||||
|
:style="{filter: blurThumbnailsStyle}"
|
||||||
>
|
>
|
||||||
</router-link>
|
</router-link>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -48,7 +48,8 @@ export default defineComponent({
|
||||||
'',
|
'',
|
||||||
'start',
|
'start',
|
||||||
'middle',
|
'middle',
|
||||||
'end'
|
'end',
|
||||||
|
'hidden'
|
||||||
],
|
],
|
||||||
externalLinkHandlingValues: [
|
externalLinkHandlingValues: [
|
||||||
'',
|
'',
|
||||||
|
@ -137,7 +138,8 @@ export default defineComponent({
|
||||||
this.$t('Settings.General Settings.Thumbnail Preference.Default'),
|
this.$t('Settings.General Settings.Thumbnail Preference.Default'),
|
||||||
this.$t('Settings.General Settings.Thumbnail Preference.Beginning'),
|
this.$t('Settings.General Settings.Thumbnail Preference.Beginning'),
|
||||||
this.$t('Settings.General Settings.Thumbnail Preference.Middle'),
|
this.$t('Settings.General Settings.Thumbnail Preference.Middle'),
|
||||||
this.$t('Settings.General Settings.Thumbnail Preference.End')
|
this.$t('Settings.General Settings.Thumbnail Preference.End'),
|
||||||
|
this.$t('Settings.General Settings.Thumbnail Preference.Hidden')
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -42,6 +42,14 @@ export default defineComponent({
|
||||||
return this.$store.getters.getThumbnailPreference
|
return this.$store.getters.getThumbnailPreference
|
||||||
},
|
},
|
||||||
|
|
||||||
|
blurThumbnails: function () {
|
||||||
|
return this.$store.getters.getBlurThumbnails
|
||||||
|
},
|
||||||
|
|
||||||
|
blurThumbnailsStyle: function () {
|
||||||
|
return this.blurThumbnails ? 'blur(20px)' : null
|
||||||
|
},
|
||||||
|
|
||||||
backendPreference: function () {
|
backendPreference: function () {
|
||||||
return this.$store.getters.getBackendPreference
|
return this.$store.getters.getBackendPreference
|
||||||
},
|
},
|
||||||
|
@ -51,6 +59,9 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
|
|
||||||
thumbnail: function () {
|
thumbnail: function () {
|
||||||
|
if (this.thumbnailPreference === 'hidden') {
|
||||||
|
return require('../../assets/img/thumbnail_placeholder.svg')
|
||||||
|
}
|
||||||
let baseUrl
|
let baseUrl
|
||||||
if (this.backendPreference === 'invidious') {
|
if (this.backendPreference === 'invidious') {
|
||||||
baseUrl = this.currentInvidiousInstance
|
baseUrl = this.currentInvidiousInstance
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
<img
|
<img
|
||||||
:src="thumbnail"
|
:src="thumbnail"
|
||||||
alt=""
|
alt=""
|
||||||
|
:style="{filter: blurThumbnailsStyle}"
|
||||||
>
|
>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -91,6 +91,7 @@ $watched-transition-duration: 0.5s;
|
||||||
|
|
||||||
.thumbnailLink {
|
.thumbnailLink {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnailImage {
|
.thumbnailImage {
|
||||||
|
|
|
@ -273,6 +273,7 @@ const state = {
|
||||||
skip: 'doNothing'
|
skip: 'doNothing'
|
||||||
},
|
},
|
||||||
thumbnailPreference: '',
|
thumbnailPreference: '',
|
||||||
|
blurThumbnails: false,
|
||||||
useProxy: false,
|
useProxy: false,
|
||||||
useRssFeeds: false,
|
useRssFeeds: false,
|
||||||
useSponsorBlock: false,
|
useSponsorBlock: false,
|
||||||
|
|
|
@ -166,6 +166,7 @@ Settings:
|
||||||
Beginning: Beginning
|
Beginning: Beginning
|
||||||
Middle: Middle
|
Middle: Middle
|
||||||
End: End
|
End: End
|
||||||
|
Hidden: Hidden
|
||||||
Current Invidious Instance: Current Invidious Instance
|
Current Invidious Instance: Current Invidious Instance
|
||||||
The currently set default instance is {instance}: The currently set default instance is {instance}
|
The currently set default instance is {instance}: The currently set default instance is {instance}
|
||||||
No default instance has been set: No default instance has been set
|
No default instance has been set: No default instance has been set
|
||||||
|
@ -332,6 +333,7 @@ Settings:
|
||||||
Channel Page: Channel Page
|
Channel Page: Channel Page
|
||||||
Watch Page: Watch Page
|
Watch Page: Watch Page
|
||||||
General: General
|
General: General
|
||||||
|
Blur Thumbnails: Blur Thumbnails
|
||||||
Hide Video Views: Hide Video Views
|
Hide Video Views: Hide Video Views
|
||||||
Hide Video Likes And Dislikes: Hide Video Likes And Dislikes
|
Hide Video Likes And Dislikes: Hide Video Likes And Dislikes
|
||||||
Hide Channel Subscribers: Hide Channel Subscribers
|
Hide Channel Subscribers: Hide Channel Subscribers
|
||||||
|
|
Loading…
Reference in New Issue