Option to hide videos from certain channels #2849

petaded · 2022-11-09T19:13:33Z

Option to hide videos from certain channels

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

partial implementation of #95

Description

This PR adds a new setting under distraction free settings to hide specific channels.
You can write either the channel name or the channel id into the input box - multiple channels allowed.

This also adds new UI input type ft-input-tags which is used as the input method for this new option.

Videos and playlists from this channel ( and the channel itself ) will no longer show up in a search, recommended or trending.
Note: the box is case sensitive and must be an exact match to the channel name.

Screenshots

The new setting ( see bottom ):

Option box with multiple channels entered

Tooltip

Trending with empty box

Trending with shane tag in hide channel box

Tending after having shane and A24 tags in hide channels box

Testing

Tested the following:

since this touched the livestream filtering code
- Search "music live" with hide livestreams as false, validate live streams still show
- Search "music live" with hide livestreams as true, validate live streams no longer show
Search "ltt" with empty Hide channels, ltt videos show
Search "ltt" with "Linus Tech Tips" in hide channel box, ltt videos hidden + channel also hidden
Search "ltt" with "Linus Tech Tips" and "LMG Clips" tags in hide channel box, ltt and lmg clips videos hidden
Search "ltt" with "UCXuqSBlHAE6Xw-yeJA0Tunw" in hide channel box ( ltt channel id), ltt videos hidden

Desktop

OS: Manjaro
OS Version: 22
FreeTube version: 0.18.0

Additional context

PikachuEXE · 2022-11-11T01:56:46Z

Idea wise it's useful
But UI/UX wise it's inconsistent with other "distraction free" settings
(It might even deserve a dedicated section if we would have more similar settings in the future)

There is no way I can tell it's about hiding channels
FT has no previous input for multiple text values, the UI for such new input type requires some discussion to agree on
But having a text box to have value separated by a separator is certainly unacceptable for me

I imagine the UI at least look like the following

https://dribbble.com/shots/5970633-Add-Tags

It should handle many values (10+) and probably also mobile friendly
But let's make it at least work for desktop for the 1st version

This is only my opinion so would need more people to comment on this

petaded · 2022-11-11T09:20:13Z

@PikachuEXE I would completely agree.

I posted it as it was because:

I happened to want this feature recently so coded something up for myself, was sharing this in case its useful for someone else
I have not done any javascript, electron, vue programming before, so was trying to limit the scope of my changes

However I think you are right, it shouldn't be included as is, the current design is not intuitive.
I am happy for anyone else to add to this PR otherwise I'll have a look into styling a new input type when I get some more time.

miangraham · 2022-11-13T08:53:02Z

It might even deserve a dedicated section if we would have more similar settings in the future

I've been thinking along similar lines as I'm considering adding a "never show me shorts" setting, which could just as easily be a "filter by title keywords" setting since YT just has the tag sitting in the title.

It would make sense for video-hiding settings to move to a new category rather than sitting in Distraction Free Settings. It's a consistent structural divide between options that toggle dedicated UI components versus options that filter items from lists. And it would do a bit to trim Distraction Free's massive wall of switches.

If my other PR lands soon I may try pushing this one for a bit. I'm pretty new to Vue but I imagine there are tag list component examples floating around.

petaded · 2022-11-13T14:15:58Z

I was looking at this a bit today. have made a "ft-input-tags" component - have not yet done the logic was just sorting the look.
Will update the code when I have it working.

Currently looks like this :

<ft-input-tags
          :title="$t('Settings.Distraction Free Settings.Hide Channels Title')"
          :placeholder="$t('Settings.Distraction Free Settings.Hide Channels Placeholder')"
          :show-action-button="true"
          :value="hideSpecificChannels"
        />

miangraham · 2022-11-13T15:56:42Z

Looks great. Thanks for posting to save the duplicate work. Will definitely want to use that in the future myself.

PikachuEXE · 2022-11-14T01:35:28Z

@petaded Looks good so far!
Please let us know when done (enough for testing)

petaded · 2022-11-14T15:10:48Z

Have updated PR.
Added a new ft-input-tags input component. The new option now uses this component. The logic for hiding videos etc is still the same just the input method is updated.

Here is a short video of using it.

input_tags.mp4

If someone could test on windows that would be useful ( I don't have access to a windows computer )

I still have it under distraction free settings but only because I am not sure what/where the option should go, some more input on this would be welcome.

PikachuEXE · 2022-11-15T01:44:34Z

The new UI element looks and works fine in simple test

Though I am not sure what value I should put into it (Channel name can change but I guess rarely?)
Does channel ID work? Does partial name work?
I can never tell until I test it or look at the code and this is bad for UX.

For the position I would say put it as a separate box below the columns of switches (so the width = all columns)

petaded · 2022-11-15T11:00:30Z

@PikachuEXE Thank you for the feedback.
I have added an optional tooltip parameter to the ft-input-tags component. Then added some tooltip text to the distraction free setting see picture below:

I also updated the placeholder text to be "Channel Name or ID" to make it more obvious without reading the tooltip that you can also use a channel id.

Also as suggested have moved the setting to below the other toggle switches.

ChunkyProgrammer · 2022-11-15T22:26:16Z

It's not very accessible at the moment (labels should be linked to the inputs)

petaded · 2022-11-15T22:48:06Z

Thanks @ChunkyProgrammer for having a look, however I don't quite understand what you mean by labels should be linked to inputs - I'm guessing you are talking about the code?

Do you have specific suggestions of what I could change to improve it?

ChunkyProgrammer · 2022-11-15T23:54:34Z

Just a note: it's not really that accessible. Labels should have 'for' and

Thanks @ChunkyProgrammer for having a look, however I don't quite understand what you mean by labels should be linked to inputs - I'm guessing you are talking about the code?

Do you have specific suggestions of what I could change to improve it?

Sorry, I should have explained it better. The HTML label elements should have a for attribute that links it to an input (via the id).
Example: <label for="element_id">

To test: Clicking on the label should focus the input element.

Here is some more documentation on it if you are interested: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#try_it

The looks really good so far 😄
Another issue that could arise is if you are blocking a channel that has a semicolon in it's name.
Example: https://www.youtube.com/@esemicolonr

PikachuEXE · 2022-11-16T02:05:56Z

I agree on the semicolon separator issue
Need to use another "won't be used on channel name" char
But I have no idea what to use :)

github-actions · 2022-11-24T12:32:11Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

absidue · 2022-11-24T12:37:36Z

src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js

+          }
+        }
+      }
+      return true


the previous check hid the item when data is undefined, this implementation doesn't

~~I believe the conflict resolutions in the rebase below will resolve this as well. See 4d618e3, L59.~~

Looks fixed after petaded's merge commit!

Yes this is fixed with the merge with latest development

miangraham · 2022-11-24T16:53:02Z

@petaded I ran a rebase for this on development after my conflicting changes were merged. Tested that my new setting and yours still work afterward. Result over here, feel free to grab/squash:

https://github.com/miangraham/FreeTube/tree/add_option_to_hide_channels

github-actions · 2022-11-24T17:25:56Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

petaded · 2022-11-24T17:32:44Z

Hi all,

have merged latest development in including @miangraham changes.
The merge has fixed the issue @absidue points out and the conflicts.

Would have used your provided merge @miangraham but i'd already done and pushed my merge when i saw your comment. thanks for the help though.

miangraham · 2022-11-24T17:51:08Z

Ran a quick test with npm run dev post-merge and theirs/ours sides both work fine. Channels hidden by name, premieres hidden by flag. LGTM!

ChunkyProgrammer

Lgtm

absidue · 2023-01-13T19:48:04Z

This was merged on the 17th of December, the latest release 0.18.0 was on the 2nd of November...

add logic to hide channels

6ed0f19

FreeTubeBot enabled auto-merge (squash) November 9, 2022 19:13

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 9, 2022

miangraham mentioned this pull request Nov 10, 2022

Add Distraction Free Settings -> Hide Upcoming Premieres #2853

Merged

4 tasks

Add new ft-input-tags ui element and use this for channel hiding

9ac3b07

auto-merge was automatically disabled November 14, 2022 15:06
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) November 14, 2022 15:06

remove unused tooltip code

d8d537a

auto-merge was automatically disabled November 14, 2022 18:10
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) November 14, 2022 18:11

Add tooltip to the ft-input-tags and the new setting

f128063

auto-merge was automatically disabled November 15, 2022 11:00
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) November 15, 2022 11:00

Add spacer between toggle options and ft-flex-box

7fe0681

auto-merge was automatically disabled November 15, 2022 11:23
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) November 15, 2022 11:23

Swap to stringify from semicolon + add focus to label

36fe014

github-actions bot added the PR: merge conflicts / rebase needed label Nov 24, 2022

absidue reviewed Nov 24, 2022

View reviewed changes

Merge branch 'development' into dev/petaded/add_option_to_hide_channels

b01798d

auto-merge was automatically disabled November 24, 2022 17:23
Head branch was pushed to by a user without write access

petaded dismissed PikachuEXE’s stale review via b01798d November 24, 2022 17:23

FreeTubeBot enabled auto-merge (squash) November 24, 2022 17:23

github-actions bot removed the PR: merge conflicts / rebase needed label Nov 24, 2022

miangraham approved these changes Nov 24, 2022

View reviewed changes

PikachuEXE approved these changes Nov 25, 2022

View reviewed changes

absidue added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 27, 2022

ChunkyProgrammer requested a review from absidue November 27, 2022 14:12

ChunkyProgrammer approved these changes Dec 17, 2022

View reviewed changes

absidue approved these changes Dec 17, 2022

View reviewed changes

FreeTubeBot merged commit f33f142 into FreeTubeApp:development Dec 17, 2022

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Dec 17, 2022

petaded mentioned this pull request Dec 17, 2022

fix linting error in ft-input-tags.vue #2971

Merged

4 tasks

absidue mentioned this pull request Dec 18, 2022

Pass playlist data from playlist page to watch page #2970

Merged

1 task

absidue mentioned this pull request Jan 13, 2023

[Feature Request]: "Don't Recommend Channel" option in Search Results via "More Options" 3-dot context menu #3051

Closed

3 tasks

This comment was marked as abuse.

Sign in to view

efb4f5ff-1298-471a-8973-3d47447115dc mentioned this pull request Jun 28, 2023

Fix Hide Channels and Hide Premier settings #3673

Merged

4 tasks

This was referenced Jul 10, 2023

Update some views to opt out of "Hide Videos From Channels" #3748

Merged

Update recommended video section to use hide videos from channel preference #3749

Merged

LangLangBart mentioned this pull request Oct 18, 2023

[Feature Request]: Resolve Channel ID for hidden channels #4181

Closed

3 tasks

MitchelPaulin mentioned this pull request Oct 24, 2023

Add hide channel option directly to More Options menu #4228

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Option to hide videos from certain channels #2849

Option to hide videos from certain channels #2849

petaded commented Nov 9, 2022 •

edited

Loading

PikachuEXE commented Nov 11, 2022

petaded commented Nov 11, 2022

miangraham commented Nov 13, 2022

petaded commented Nov 13, 2022

miangraham commented Nov 13, 2022

PikachuEXE commented Nov 14, 2022

petaded commented Nov 14, 2022 •

edited by efb4f5ff-1298-471a-8973-3d47447115dc

Loading

PikachuEXE commented Nov 15, 2022

petaded commented Nov 15, 2022

ChunkyProgrammer commented Nov 15, 2022

petaded commented Nov 15, 2022

ChunkyProgrammer commented Nov 15, 2022

PikachuEXE commented Nov 16, 2022

github-actions bot commented Nov 24, 2022

absidue Nov 24, 2022 •

edited

Loading

miangraham Nov 24, 2022 •

edited

Loading

petaded Nov 24, 2022

miangraham commented Nov 24, 2022 •

edited

Loading

github-actions bot commented Nov 24, 2022

petaded commented Nov 24, 2022

miangraham commented Nov 24, 2022

ChunkyProgrammer left a comment

This comment was marked as abuse.

absidue commented Jan 13, 2023

Option to hide videos from certain channels #2849

Option to hide videos from certain channels #2849

Conversation

petaded commented Nov 9, 2022 • edited Loading

Option to hide videos from certain channels

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

PikachuEXE commented Nov 11, 2022

petaded commented Nov 11, 2022

miangraham commented Nov 13, 2022

petaded commented Nov 13, 2022

miangraham commented Nov 13, 2022

PikachuEXE commented Nov 14, 2022

petaded commented Nov 14, 2022 • edited by efb4f5ff-1298-471a-8973-3d47447115dc Loading

PikachuEXE commented Nov 15, 2022

petaded commented Nov 15, 2022

ChunkyProgrammer commented Nov 15, 2022

petaded commented Nov 15, 2022

ChunkyProgrammer commented Nov 15, 2022

PikachuEXE commented Nov 16, 2022

github-actions bot commented Nov 24, 2022

absidue Nov 24, 2022 • edited Loading

Choose a reason for hiding this comment

miangraham Nov 24, 2022 • edited Loading

Choose a reason for hiding this comment

petaded Nov 24, 2022

Choose a reason for hiding this comment

miangraham commented Nov 24, 2022 • edited Loading

github-actions bot commented Nov 24, 2022

petaded commented Nov 24, 2022

miangraham commented Nov 24, 2022

ChunkyProgrammer left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

absidue commented Jan 13, 2023

petaded commented Nov 9, 2022 •

edited

Loading

petaded commented Nov 14, 2022 •

edited by efb4f5ff-1298-471a-8973-3d47447115dc

Loading

absidue Nov 24, 2022 •

edited

Loading

miangraham Nov 24, 2022 •

edited

Loading

miangraham commented Nov 24, 2022 •

edited

Loading