Skip to content
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.

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

Add option to change thumbnail appearance #3890

Merged
merged 15 commits into from
Aug 31, 2023
Merged

Add option to change thumbnail appearance #3890

merged 15 commits into from
Aug 31, 2023

Conversation

da-batt
Copy link
Contributor

@da-batt da-batt commented Aug 16, 2023

Add option to change thumbnail appearance

Pull Request Type

  • Bugfix
  • Feature Implementation
  • Documentation
  • Other

Related issue

closes #2814

Description

Added drop-down option to distraction free settings named Thumbnail Display Mode which changes thumbnail behavior depending on selected option. Current options are Hidden (loads a placeholder image instead of thumbnail) and Blurred (blurs thumbnail)

Screenshots

default
Thumbnail Display Mode - Default

hidden
humbnail Display Mode - Hidden

blurred
Thumbnail Display Mode - Blurred

Testing

  • Ensured that every thumbnail display mode works correctly by looking at video and playlist thumbnails.
  • Inspected element size in devtools to ensure that sizing is consistent

Desktop

  • OS: Windows 11
  • OS Version: 22H2
  • FreeTube version:

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 16, 2023 10:26
@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 16, 2023
Copy link
Member

Choose a reason for hiding this comment

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

Everything LGTM in testing.

There is only one thing im not sure about and that is how the settings is shown under the distraction free settings.

The distraction free settings are mostly done with toggles to indicate if the feature is off/on. This dropdown could give of the feeling that this setting is always on even though Default is selected.

Maybe we should opt for a toggle to enable this feature and if u enable it u get a dropdown with 2 options blurred or hidden.

Not sure if it can be done better so its best to wait for the members the chime in on this.

Copy link
Collaborator

@PikachuEXE PikachuEXE left a comment

Choose a reason for hiding this comment

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

I agree that the new setting looks inconsistent with the others

image

Requested changes are just removing unnecessary filter: none

src/renderer/components/ft-list-video/ft-list-video.js Outdated Show resolved Hide resolved
src/renderer/components/playlist-info/playlist-info.js Outdated Show resolved Hide resolved
auto-merge was automatically disabled August 16, 2023 13:18

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 16, 2023 13:18
@PikachuEXE
Copy link
Collaborator

For making the setting look better (hide behind a toggle)
I made an attempt at https://github.com/PikachuEXE/FreeTube/tree/thumbnail-display-mode-pika

Text & style can be further adjusted

image
image

@da-batt
Copy link
Contributor Author

da-batt commented Aug 16, 2023

Just ended up implementing the same solution, not sure if there is a better way.

auto-merge was automatically disabled August 16, 2023 13:57

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 16, 2023 13:57
@absidue
Copy link
Member

absidue commented Aug 16, 2023

Blurred could be converted to a switch and hidden moved into the thumbnail preference drop down (burred can't go in there as you need a thumbnail to blur).

@efb4f5ff-1298-471a-8973-3d47447115dc

@absidue I'm not opposed to that but im not sure i understand the reasoning for it

@PikachuEXE
Copy link
Collaborator

I don't even understand that suggestion...

@da-batt
Copy link
Contributor Author

da-batt commented Aug 17, 2023

@absidue I don't agree with this approach as the intended purpose of this feature is to minimize distraction and moving it to a different place would make it harder to find for the user. Another concern is that if toggle blur and hidden thumbnails were in a different setting, you would have to run extra checks (wouldn't make sense to blur a hidden thumbnail).

(I also think that the thumbnail preference setting is a bit ambiguous right now and maybe should be renamed to something like 'thumbnail position' or 'thumbnail alignment')

@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

efb4f5ff-1298-471a-8973-3d47447115dc commented Aug 17, 2023

What about 2 toggles in the distraction free settings?

  • Hide Thumbnails
  • Blur Thumbnails

If hidden enabled then disable and grey out blur
If blur enabled then disable and grey out hidden

@absidue
Copy link
Member

absidue commented Aug 17, 2023

My reasoning for proposing to move the hidden option to the thumbail preference setting, is that it already has options to use the default thumbail, the first frame in the video, the last frame or one in the middle, so having the hidden/no thumbnail setting in the same dropdown makes a lot of sense to me.

Additionally not downloading thumbnails will not only be used as a distraction free setting but also by users that want to save bandwidth or have slow internet connections.

@PikachuEXE
Copy link
Collaborator

I created a SVG file via https://mediamodifier.com/svg-editor
thumbnail_placeholder
Much smaller file size (4xxKB vs 1KB) and can be used in any size (coz SVG)
Color, shape sizes can be adjusted if needed
Preview:
image

auto-merge was automatically disabled August 18, 2023 08:06

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 18, 2023 08:06
@da-batt
Copy link
Contributor Author

da-batt commented Aug 18, 2023

@PikachuEXE Good idea! Managed to clean the svg up so now it's ~200 bytes.

PikachuEXE
PikachuEXE previously approved these changes Aug 18, 2023
Copy link
Member

Choose a reason for hiding this comment

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

LGTM

Copy link
Member

@absidue absidue left a comment

Choose a reason for hiding this comment

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

Hidden is broken for ft-list-playlist components, as you forgot to add the computed property for the thumbnail preference, it also breaks the layout on the playlist page.
Also two small code nitpicks.

ft-list-playlist:
image

Playlist page:

image

auto-merge was automatically disabled August 21, 2023 09:32

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 21, 2023 09:32
auto-merge was automatically disabled August 21, 2023 16:32

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 21, 2023 16:32
@efb4f5ff-1298-471a-8973-3d47447115dc

@da-batt is this ready for review?

@da-batt
Copy link
Contributor Author

da-batt commented Aug 23, 2023

@efb4f5ff-1298-471a-8973-3d47447115dc yes, everything should be fine now.

Copy link
Member

Choose a reason for hiding this comment

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

LGTM

@PikachuEXE
Copy link
Collaborator

@absidue / @ChunkyProgrammer ?

@FreeTubeBot FreeTubeBot merged commit 884ba91 into FreeTubeApp:development Aug 31, 2023
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request]: Add "Hide Thumbnails" to "Distraction Free" Settings
6 participants