Hiding Watched Videos on Channel View #7366

palharesf · 2025-05-05T20:05:42Z

Issue 4497 - Hiding Watched Videos on Channel View

Pull Request Type

Bugfix
Feature Implementation
Documentation
Other

Related issue

Description

The 'Hide Videos on Watch' setting has been moved from the 'Subscription' section to the 'Distraction Free' section. Now, it not only hides watched videos (and shorts and lives) from the subscription page, but also from the channel page (from the videos, shorts and lives tab, but not from the home tab).

Screenshots

Current implementation:

Proposed change (settings page):

Channel pages (untoggled):

Channel pages (toggled):

Tooltip:

Testing

(A)

Navigate to a random channel
Navigate to Videos tab
Watch a video or manually mark it as watched -- it should only gray out
Go to Settings --> Distraction Free --> General --> toggle 'Hide Videos on Watch'
Return to the previously channel page
Watched videos should not load anymore
Untoggling the 'Hide Videos on Watch' and returning to the page should reload the videos

(B)

Repeat all steps from the test (A), but choose a channel with few videos
Leave two unwatched videos
Ensure the toggle is on
Return to the channel page
Upon marking one of the last two videos as watched, the 'Sort By' dropdown will disappear (since there's no need to sort a single video, shorts or live)
Screenshots:

Desktop

Windows 10 Pro
OS Build: 19045.5796
Freetube v0.23.4 Beta

Additional context

…, and helper variable/function created

… function; considering moving the check logic to outside the function and call it without checks inside of it

…mmented out filtering implementation for now as I debug the code further

…an event watched to update the video list if the toggle is pressed; separated variable check from inside the filter function (still not working)

…ryCache from the store, and iterate through the videos arrray filtering out entries that exist in the History

… locales file

…idious

efb4f5ff-1298-471a-8973-3d47447115dc · 2025-05-05T20:13:18Z

hi @palharesf in the testing section you mainly are mentioning how you tested it. It would be nice if you could provide some testcases (ofcourse we will be testing outside of those cases too but would be nice to have some kind of baseline)

palharesf · 2025-05-05T20:19:50Z

Oh, of course @efb4f5ff-1298-471a-8973-3d47447115dc - I thought the request was for information on how I tested it hahaha

For a specific Channels page, the feature is differentiating between four kinds of states:

No videos watched, toggle off: all videos should be visible
No videos watched, toggle on: all videos should be visible
One or more videos watched, toggle: all videos should be visible
One or more videos watched, toggle on: one or few videos should not be visible

If I were to write an automated test for this, I would implement these four test cases.

Is that what you were alluding to, @efb4f5ff-1298-471a-8973-3d47447115dc ?

efb4f5ff-1298-471a-8973-3d47447115dc

The Shorts and the Live tab also contains videos that can marked as watched so it would be a more consistent user experience to also include the toggle on these tabs

palharesf · 2025-05-05T20:21:49Z

I didn't originally touch Shorts and Live as I felt those were outside the scope of the feature, but I'm happy to incorporate those changes soon to harmonize the experience. I'll work on that tomorrow unless told otherwise

efb4f5ff-1298-471a-8973-3d47447115dc · 2025-05-05T20:38:07Z

Oh, of course @efb4f5ff-1298-471a-8973-3d47447115dc - I thought the request was for information on how I tested it hahaha

Maybe that section has to be revised so its more clear that those need to be provided, ill look into it.

For a specific Channels page, the feature is differentiating between four kinds of states:

No videos watched, toggle off: all videos should be visible

No videos watched, toggle on: all videos should be visible

One or more videos watched, toggle: all videos should be visible

One or more videos watched, toggle on: one or few videos should not be visible
If I were to write an automated test for this, I would implement these four test cases.

Is that what you were alluding to, @efb4f5ff-1298-471a-8973-3d47447115dc ?

Sorry i had to provide examples. From looking at your cases they look good. Everyone in our team does it a bit different depending on what type of PR they're sending in but these examples should give you a good view with what i meant with testcases.

efb4f5ff-1298-471a-8973-3d47447115dc · 2025-05-05T20:42:07Z

Also just a tip make sure your branch is up to date with the latest changes from the development branch before opening your PR.

efb4f5ff-1298-471a-8973-3d47447115dc

Sort by Most Popular
Mark a few videos as Watched
Enable Hide Watched
See that it doesnt hide the videos
Disable Hide Watched
See that it does hide the videos

VirtualBoxVM_yaodKSyJOF.mp4

palharesf · 2025-05-05T22:19:43Z

Ok, I updated the 'Testing' section of the PR to reflect the examples provided, thank you for those.

I did run git fetch origin and git merge origin/development before running git push origin feature/4497-hide-watched-videos -- all the console messages I got indicated my branch was up-to-date with the dev branch, so I'm sorry if that was not the case.

And the case you mentioned (i.e. marking videos as watched and having them only hidden in the next refresh) was mentioned in my PR as something intentional - I decided against refreshing the video Panel every time one video was marked as watched because I considered it excessive. That said, I can work on an event watcher that tracks videos being marked as 'Watched' manually and forcing a refresh of the Video Panel if that's the preferred way moving forward. I'll include that in my next batch of changes along with the Live and Shorts pages. Thank you!

efb4f5ff-1298-471a-8973-3d47447115dc · 2025-05-05T22:59:17Z

And the case you mentioned (i.e. marking videos as watched and having them only hidden in the next refresh) was mentioned in my PR as something intentional - I decided against refreshing the video Panel every time one video was marked as watched because I considered it excessive. That said, I can work on an event watcher that tracks videos being marked as 'Watched' manually and forcing a refresh of the Video Panel if that's the preferred way moving forward.

I think you interpreted my comment wrong. I pointed out a bug. Look at the screen recording again and try the steps to reproduce for yourself. It hides the videos when the toggle is OFF and doesnt hide them when the toggle is ON

palharesf · 2025-05-06T21:49:26Z

And the case you mentioned (i.e. marking videos as watched and having them only hidden in the next refresh) was mentioned in my PR as something intentional - I decided against refreshing the video Panel every time one video was marked as watched because I considered it excessive. That said, I can work on an event watcher that tracks videos being marked as 'Watched' manually and forcing a refresh of the Video Panel if that's the preferred way moving forward.

I think you interpreted my comment wrong. I pointed out a bug. Look at the screen recording again and try the steps to reproduce for yourself. It hides the videos when the toggle is OFF and doesnt hide them when the toggle is ON

You're right, I had misunderstood your request. I apologize. I believe forcing the video panel to refresh once a video is marked as watched would fix this issue.

I've been trying to implement that, but the code for marking as watched is in 'ft-list-video.js' and the code for refreshing the video panel on the Channel page is, naturally, on Channel.vue. I don't want to tightly couple the two pages, so what's the preferred approach here? Using the Vuex store to manage state?

I don't have a lot of familiarity with Vuex, but I know how to create an event emitter and listener more generally and I assume that's the preferred route here. Any pointers would be welcome.

I'll implement the toggle on the Live and Shorts pages when this is working

… variable declaration; removed outdated update function

palharesf · 2025-05-26T12:57:42Z

Ok here's what I tried so far.

When I ran git fetch origin while on the development branch, I updated my local copy of the development branch, but that didn't automatically update my feature branch. When I switched to my feature branch and ran git fetch origin or git merge origin/development, Git didn't apply the updates to my feature branch because it was not tracking the development branch. My feature branch was likely still based on an older version of the development branch.

I have since rebased my feature branch onto the updated development branch, but that alone hasn't solved the conflicts. I checked git status and git diff and both are clean. git merge origin/development also said I was up to date. I then decided to git reset --hard and pushed it again. It says 'Everything is up-to-date' on my terminal, but seems the conflicts are still there.

I'm happy to try other approaches if anyone has suggestions.

* development: (158 commits) Bump shaka-player from 4.14.12 to 4.14.14 (FreeTubeApp#7463) Bump electron from 36.2.1 to 36.3.1 (FreeTubeApp#7466) Bump marked from 15.0.11 to 15.0.12 (FreeTubeApp#7467) Bump globals from 16.1.0 to 16.2.0 (FreeTubeApp#7461) Bump swiper from 11.2.6 to 11.2.8 (FreeTubeApp#7462) Bump webpack from 5.99.8 to 5.99.9 (FreeTubeApp#7464) Bump npm-run-all2 from 8.0.2 to 8.0.4 (FreeTubeApp#7465) Bump electron-context-menu from 4.0.5 to 4.1.0 (FreeTubeApp#7468) Translated using Weblate (Afrikaans) Migrate FtCreatePlaylistPrompt to the composition API (FreeTubeApp#7439) ! Fix cannot use alt + D on macOS (FreeTubeApp#7448) Use better v-for keys in various places (FreeTubeApp#7447) Fix channel about tab (FreeTubeApp#7446) Translated using Weblate (Tamil) Translated using Weblate (Urdu) Translated using Weblate (Georgian) Translated using Weblate (Khmer (Central)) Translated using Weblate (Korean) Translated using Weblate (Hebrew) Translated using Weblate (Polish) ... # Conflicts: # src/renderer/components/subscription-settings/subscription-settings.js # src/renderer/components/subscription-settings/subscription-settings.vue

github-actions · 2025-05-27T00:36:53Z

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

PikachuEXE · 2025-05-27T00:38:29Z

The conflict is caused by migration to composition API #7335
Some files edited in this PR (before merge) no longer exist
I did the merge for you since it's rare

PikachuEXE

The screenshots might need to be updated for later reviewers...
reload video list once a video is mark as 'Watched' manually is done already too right?

palharesf · 2025-05-27T01:53:14Z

Thank you for addressing the conflicts @PikachuEXE.

The screenshots might need to be updated for later reviewers... reload video list once a video is mark as 'Watched' manually is done already too right?

Since we started using the computed property filteredVideos in the videoPanel, we don't need to reload the panel every time a video is watched. This is done automatically. I forgot to update the main PR post, I'll go back to it tomorrow and update the screenshots and tests. Thank you

static/locales/en-US.yaml

github-actions · 2025-05-27T12:52:22Z

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

efb4f5ff-1298-471a-8973-3d47447115dc · 2025-05-27T12:54:18Z

uhhh i think your force push just bring back the issue from before

palharesf · 2025-05-27T12:55:29Z

Ok, I updated the main post with the current implementation, current screenshots and explanations

While doing some testing I noticed the logic for hiding the 'Sort By' dropdown when there was only one live left in the videoPanel was referencing to the filteredShorts variable instead of the filteredLive variable, so it was not working. I fixed that, but when I pushed my changes I think I undid the fix for conflicts that PikachuEXE had done -- apologies for that

absidue · 2025-05-27T13:20:50Z

Always a good idea to pull before doing any new changes, especially when you know that someone else has made changes to the branch.

What happened here is you were working with an older copy of the branch, so when you tried to push your changes, git rejected the push because the branches didn't match anymore, so then instead of fixing the issue, you force pushed telling git to ignore everything on GitHub overwrite it with your broken local copy of the branch.

absidue · 2025-05-27T13:24:02Z

@palharesf Before anyone else attempts to fix the conflicts again for you, can we please agree that you won't force push anymore? When git tells you something is wrong it is accurate 99.99% of the time, so before your override it just to make the alert go away, think about why git is telling you that.

palharesf · 2025-05-27T17:00:25Z

Hi @absidue,

Sounds good, and sorry again. I had force-pushed yesterday without apparent negative consequences, and wrongly assumed I could do the same again without realizing it would undo the fixes, but I recognize my mistake. Are we able to revert my last push, so we return to the previous state (without conflicts)? There is only one line changed between that state and the current and might be an easier fix than addressing the conflicts again.

Since we're already at it, was there anything I could have done besides what I outlined here (#7366 (comment)) to fix my branch? I just tried running git pull --rebase origin dev but I still get a message saying my branch is is up to date, which doesn't sound right to me.

github-actions · 2025-05-28T01:08:21Z

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

PikachuEXE · 2025-05-28T01:09:57Z

I forced push my changes (same one as yesterday) again
Please pull before making further changes~

palharesf added 14 commits April 28, 2025 16:18

Toggle Switch created with proper label, imported from component list…

6e4fecf

…, and helper variable/function created

Make toggle only visible on the Videos tab

fcaddb8

Adjusted vertical position of the toggle

bbddf3c

Adjusted styling to separate toggle and dropdowns

b8d85a6

Refactor variable names for better readability

ee82ca2

Created the function to filter watched videos with check logic in the…

f7d5d93

… function; considering moving the check logic to outside the function and call it without checks inside of it

Fixed hideWatchedToggle variable initialization and updating; also co…

dd46933

…mmented out filtering implementation for now as I debug the code further

Updated the toggle helper function to update the ref values; created …

6604ab9

…an event watched to update the video list if the toggle is pressed; separated variable check from inside the filter function (still not working)

Removed autoRefresh options

6565d6c

Created helper function to check if video exists in history

3bc97bc

Updated helper function 'filterWatchedVideos' to be able to get histo…

97ec3f0

…ryCache from the store, and iterate through the videos arrray filtering out entries that exist in the History

Added some comments about limitations found during testing

d991ed6

Fixing localization key in the app and adding localization key in the…

d159660

… locales file

Added logic to filter watched videos when getting video list from Inv…

fadc362

…idious

FreeTubeBot enabled auto-merge (squash) May 5, 2025 20:05

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label May 5, 2025

palharesf mentioned this pull request May 5, 2025

[Feature Request]: option to hide watched videos in channel view #4497

Open

3 tasks

efb4f5ff-1298-471a-8973-3d47447115dc reviewed May 5, 2025

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc requested changes May 5, 2025

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc added PR: changes requested and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels May 5, 2025

efb4f5ff-1298-471a-8973-3d47447115dc mentioned this pull request May 6, 2025

Update PR template to prevent confusion #7368

Merged

1 task

palharesf added 2 commits May 26, 2025 09:44

Refactor all variable referencs to the new variable name; removed old…

1eb673b

… variable declaration; removed outdated update function

Implemented tooltip and localization

468062c

auto-merge was automatically disabled May 26, 2025 12:47
Head branch was pushed to by a user without write access

palharesf force-pushed the feature/4497-hide-watched-videos branch from fa67aae to 468062c Compare May 26, 2025 12:47

FreeTubeBot enabled auto-merge (squash) May 26, 2025 12:48

efb4f5ff-1298-471a-8973-3d47447115dc requested a review from PikachuEXE May 26, 2025 19:22

github-actions bot removed the PR: merge conflicts / rebase needed label May 27, 2025

PikachuEXE reviewed May 27, 2025

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc reviewed May 27, 2025

View reviewed changes

static/locales/en-US.yaml Show resolved Hide resolved

auto-merge was automatically disabled May 27, 2025 12:30
Head branch was pushed to by a user without write access

FreeTubeBot enabled auto-merge (squash) May 27, 2025 12:30

auto-merge was automatically disabled May 27, 2025 12:52
Head branch was pushed to by a user without write access

palharesf force-pushed the feature/4497-hide-watched-videos branch from f169e99 to 5211fe6 Compare May 27, 2025 12:52

FreeTubeBot enabled auto-merge (squash) May 27, 2025 12:52

github-actions bot added the PR: merge conflicts / rebase needed label May 27, 2025

PikachuEXE force-pushed the feature/4497-hide-watched-videos branch from 5211fe6 to 72768e7 Compare May 28, 2025 01:08

github-actions bot removed the PR: merge conflicts / rebase needed label May 28, 2025

Hiding Watched Videos on Channel View #7366

Are you sure you want to change the base?

Hiding Watched Videos on Channel View #7366

Conversation

palharesf commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue 4497 - Hiding Watched Videos on Channel View

Pull Request Type

Related issue

Description

Screenshots

Testing

Desktop

Additional context

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented May 5, 2025

Uh oh!

palharesf commented May 5, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

Uh oh!

palharesf commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented May 5, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented May 5, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

Uh oh!

palharesf commented May 5, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented May 5, 2025

Uh oh!

palharesf commented May 6, 2025

Uh oh!

palharesf commented May 26, 2025

Uh oh!

github-actions bot commented May 27, 2025

Uh oh!

PikachuEXE commented May 27, 2025

Uh oh!

PikachuEXE left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

palharesf commented May 27, 2025

Uh oh!

Uh oh!

github-actions bot commented May 27, 2025

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented May 27, 2025

Uh oh!

palharesf commented May 27, 2025

Uh oh!

absidue commented May 27, 2025

Uh oh!

absidue commented May 27, 2025

Uh oh!

palharesf commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

PikachuEXE commented May 28, 2025

Uh oh!

Uh oh!

palharesf commented May 5, 2025 •

edited

Loading

palharesf commented May 5, 2025 •

edited

Loading

PikachuEXE left a comment •

edited

Loading

palharesf commented May 27, 2025 •

edited

Loading