Redesign Recommendations page #2503
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
On the side, to the right
+ css effects on hover
Use three types of playlists (one per color) and cycle through the background for each color
customize titles and colors according the to playlist type
…inz/listenbrainz-server into recommendations-redesign
…inz/listenbrainz-server into recommendations-redesign
Better support for backgrounds, manual placement of the weekly-jams
stop click event propagation to the parent component (select playlist action)
For better accessibility, no reason they should be divs considering we use them like buttons.
Tweak the fancy CSS background cycler and adjust styles a bit
capture inner clicks while dragscrolling, re-enable scroll snap
Or the first playlist in the array if no weekly-jams playlist found.
Works better if you pass only the uuid, no the full url to the playlist…Duh!
With some hidden text for ARIA
in the save button text
To get the playlist ID from, which is stored in a data- attribute on the parent element
Following the change in 886bfb65181e702bd4424df331f5239a5dda68cc
…enbrainz-server into recommendations-redesign
for variety
Shows an arrow and a gradient on both sides, and disappear when scroll reaches the end / the beginning accordingly
and allow to set it too
Make this component a little more flexible by allowing to pass certain props, and removing the functionality if the prop is not passed. In this case, the ability to delete tracks from a playlist, and to control if we show username and timestamp.
+ fetch user feedback on selecting a playlist + apply same minor typescript (ReactSortable) fix in Playlist.tsx that I found for RecommendationsPage
- remove animated background size on hover (need to use background-size: cover rather than %) - hide save button text except for first card - fix HTML (button cannot be inside another button)
Give the card titles some room to breathe
amCap1712
reviewed
Jun 9, 2023
collaborators field may not always be present in the JSPFExtension.
1. key for each playlist card was incorrect. 2. The created_for field should be for displaying the user for whom the playlist was created.
amCap1712
force-pushed
the
recommendations-redesign
branch
from
de04acb
to
361b209
Compare
For those playlists with an expires_at field in their metadata
arsh331
pushed a commit
to arsh331/listenbrainz-server
that referenced
this pull request
Jul 24, 2023
* Recs: Create rec playlist details card On the side, to the right * Recs: Reimplement recommendations page * Recs: Add BrainzPlayer * Recs: Add background images + css effects on hover * Recs: Allow saving rec playlists * Recs: Modify fancy CSS background cycler Use three types of playlists (one per color) and cycle through the background for each color * Add support for /user/<user>/playlists/recommendations endpoint * Recs: Improve how we display playlists customize titles and colors according the to playlist type * Add simple tests for the new user recommendationes endpoint. * Recs: Use get_recommendation_playlists_for_user in recs web view * Recs: Improve detection of old recs playlists * Recs: Improve mobile device layout * Recs: Improve CSS Better support for backgrounds, manual placement of the weekly-jams * Recs: clicking on save button doesn't select playlist stop click event propagation to the parent component (select playlist action) * Recs: Use button element for top cards For better accessibility, no reason they should be divs considering we use them like buttons. * Recs: use dragscroll on playlist cards masonry element * Recs: More UI refining Tweak the fancy CSS background cycler and adjust styles a bit * Recs: Improve dragscroll mechanism capture inner clicks while dragscrolling, re-enable scroll snap * Recs: fix overflow gradient * Recs: Auto-select the weekly jams playlist Or the first playlist in the array if no weekly-jams playlist found. * Recs: Fix inital playlist load Works better if you pass only the uuid, no the full url to the playlist…Duh! * Recs: image fallback when no playlists to show With some hidden text for ARIA * Recs: "duplicate" when on another user's profile in the save button text * Recs: rename tab to "Created for you" * Recs: Target correct element when clicking To get the playlist ID from, which is stored in a data- attribute on the parent element * Recs: Rename Weekly New Jams -> Weekly Exploration Following the change in 886bfb65181e702bd4424df331f5239a5dda68cc * Rename weekly-new-jams to weekly-exploration * Show playlists from troi-bot and listenbrainz * Recs: Fix page title * Recs: Make daily jams background blue for variety * Recs: Improve scroll indicator Shows an arrow and a gradient on both sides, and disappear when scroll reaches the end / the beginning accordingly * Recs: implement aerozol feedback From https://docs.google.com/document/d/1N7FmZdJNagXXxL8gzyijPTpgiJoAbYKNhYoinVrqeUw * Recs: Get user feedback and allow to set it too * Recs: optional deletion and props for PlaylistItemCard Make this component a little more flexible by allowing to pass certain props, and removing the functionality if the prop is not passed. In this case, the ability to delete tracks from a playlist, and to control if we show username and timestamp. * Recs: Allow users to reorder tracks + fetch user feedback on selecting a playlist + apply same minor typescript (ReactSortable) fix in Playlist.tsx that I found for RecommendationsPage * Recs: UI tweaks - remove animated background size on hover (need to use background-size: cover rather than %) - hide save button text except for first card - fix HTML (button cannot be inside another button) * Recs: add missing key prop * Recs: small CSS tweak Give the card titles some room to breathe * Recs: Fix feedback fetching by MBIDs * Recs: CSS tweak for card title * Lint less files * D'oh. * Fix type definition of playlists for collaborators field collaborators field may not always be present in the JSPFExtension. * Minor fixes for the RecommendationsPage 1. key for each playlist card was incorrect. 2. The created_for field should be for displaying the user for whom the playlist was created. * Fix displaying list of playlist collaborators * Show expiration timer on recommendation playlists For those playlists with an expires_at field in their metadata * Linting less file * Recs: Add button to inspect playlist code * Missing carriage return --------- Co-authored-by: Robert Kaye <[email protected]> Co-authored-by: Kartik Ohri <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Now that we have pretty solid music recommendations, we really need to improve the recommendations page/tab which is currently very very dull and looks exactly like the playlists page.
This also required a new endpoint
/user/<user>/playlists/recommendations.Before:
After:
