FreeTube
FreeTube copied to clipboard
FreeTubeApp
User playlists as grid
User playlists as grid
Pull Request Type
- [x] Feature Implementation
Related issue
closes #4708
Description
- Implements grid display option for user playlists
- Attaches this behavior to the existing grid versus list Video View Type setting
- Remote playlists will still use the list view, as has been the case
- List view is still forced on mobile devices (<= 680px width threshold)
Screenshots
Note: picture is now outdated (missing Add to Playlist & Remove from Playlist icons, as well as "Sort by" added in other PR)
Testing
- Check editing the name and description of the user playlist to varying lengths
- Check on mobile, tablet, & desktop views
- Check remote playlists are not affected
- Check Custom sort order left/right arrows and "remove from playlist" icon button functionality in grid view
- Check no z-index tomfoolery with User Playlist grid view fixed top bar or
ft-refresh-widget - (REG) Check user playlists with list type as "List"
Desktop
- OS: OpenSUSE
- OS Version: TW
Additional context
Implements the "fixed top bar" as a mixin that we can reuse if we want to make any other top sections fixed.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Conflicts have been resolved. A maintainer will review the pull request shortly.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
Waiting on #4921 and #4929 to get merged first.
They're both merged :)
Conflicts have been resolved. A maintainer will review the pull request shortly.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
Conflicts have been resolved. A maintainer will review the pull request shortly.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
Conflicts have been resolved. A maintainer will review the pull request shortly.
Search results playing hide and seek now
https://github.com/FreeTubeApp/FreeTube/assets/73130443/c67eb382-f538-4fb6-aa06-4ed5a3c6d67d
Seems to be some overlap with the top bar
Grid is enabled -> go to remote playlist -> when fetching the playlist notice a weird rectangular artifact
https://github.com/FreeTubeApp/FreeTube/assets/73130443/2505dcf4-eb5f-42e2-8277-29bf0e3d3978
When quick bookmark is enabled you will see that all the videos in the list receive the checkmark. This doesnt happen in list mode because it doesnt make sense to do that because you can just remove the vids by clicking the delete icon on the thumbnail
How it works atm in list mode
https://github.com/FreeTubeApp/FreeTube/assets/73130443/576e4ac5-59e7-419b-85c8-8b2dd3b1d63e
How it works in this PR on grid mode
https://github.com/FreeTubeApp/FreeTube/assets/73130443/c58d3af2-56e3-42a3-956b-8a81ff347156
Todo:
icons on thumbnails are fixed instead of showing on hover video numbering is missing on grid mode sorting custom doesnt make me change the order of the videos by hovering on the thumbnail and clicking the arrow icon
I couldn't get video numbering to look good on grid view. If anyone has any suggestions for it, please share, but I'm going to leave that one by the wayside for the time being.
Search results playing hide and seek now
Emma's fix will cover this one too once it's rebased thankfully
Grid is enabled -> go to remote playlist -> when fetching the playlist notice a weird rectangular artifact
icons on thumbnails are fixed instead of showing on hover
When quick bookmark is enabled you will see that all the videos in the list receive the checkmark. This doesnt happen in list mode because it doesnt make sense to do that because you can just remove the vids by clicking the delete icon on the thumbnail
Fixed
sorting custom doesnt make me change the order of the videos by hovering on the thumbnail and clicking the arrow icon
Clarification: Do we want to show the arrow icons as left and right arrows? Do we show these icons fixed as well, then? I also need to add back the "remove" button
Clarification: Do we want to show the arrow icons as left and right arrows?
Left to right makes more sense so i say yes.
Do we show these icons fixed as well, then?
Yes these will also be fixed see latest nightly build playlists for reference
This pull request has conflicts, please resolve those before we can evaluate the pull request.
Conflicts have been resolved. A maintainer will review the pull request shortly.
I noticed that the playlist description truncates with an ellipsis, but the title does not.
@efb4f5ff-1298-471a-8973-3d47447115dc Do you have any more changes requested, or is the tag safe to remove?
Implemented logic to switch to the list view for mobile devices. Honestly, it's something we should consider for our other routes (or in a generic way for all files), given that our list view is generally better than grid view on smaller devices, and it allows us to remove a lot of styling rules that can be timely to test and maintain.
I personally don't agree the list view is generically better on mobile because of long video titles.
Fair point, sounds like we need more work to pick and choose which rules we want to apply from each to any new centralized mobile video view type, and/or if we're feeling ambitious, make a broader set of changes to the ft-list-video mobile view (e.g., something like the current YT mobile app video UX). Anyway, I'll create a separate issue for this broader proposal.
This pull request has conflicts, please resolve those before we can evaluate the pull request.
Conflicts have been resolved. A maintainer will review the pull request shortly.
We still need numbering for the videos, suggestions are welcome :)
Moving and removing have no real animation anymore
https://github.com/FreeTubeApp/FreeTube/assets/73130443/f98afa5c-b0cd-4cc1-bc63-7c465a6210df
Before:
https://github.com/FreeTubeApp/FreeTube/assets/73130443/dc1200d6-f550-4c32-afea-092b517b2325
From my earlier reply:
I couldn't get video numbering to look good on grid view. If anyone has any suggestions for it, please share, but I'm going to leave that one by the wayside for the time being.
So to clarify on that, I am currently assuming based on my own testing with it that adding numbers to the grid view will weaken the design / UX as a whole.
For the lack of animations, this is because we're not using transition-group for these. I think it's a bit much for horizontal movements, especially when it could be both vertical and horizontal when you're switching the position of elements that are currently on two separate grid rows.
Could you maybe provide some screencaps on your tries to add the numbering so i can understand why it would degrade the design