+
+ );
+}
diff --git a/frontend/js/src/recommendations/RecommendationsPage.tsx b/frontend/js/src/recommendations/RecommendationsPage.tsx
index 4d347add0a..298e73fa86 100644
--- a/frontend/js/src/recommendations/RecommendationsPage.tsx
+++ b/frontend/js/src/recommendations/RecommendationsPage.tsx
@@ -7,30 +7,41 @@ import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import NiceModal from "@ebay/nice-modal-react";
-import { toast } from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faChevronLeft,
+ faChevronRight,
+ faSave,
+} from "@fortawesome/free-solid-svg-icons";
+import { get, isUndefined, set, throttle } from "lodash";
+import { ReactSortable } from "react-sortablejs";
import withAlertNotifications from "../notifications/AlertNotificationsHOC";
-import APIServiceClass from "../utils/APIService";
import GlobalAppContext from "../utils/GlobalAppContext";
import Loader from "../components/Loader";
import ErrorBoundary from "../utils/ErrorBoundary";
-import { getPageProps } from "../utils/utils";
-import PlaylistsList from "../playlists/PlaylistsList";
-import { PlaylistType } from "../playlists/utils";
+import { getPageProps, preciseTimestamp } from "../utils/utils";
+import {
+ getPlaylistExtension,
+ getPlaylistId,
+ getRecordingMBIDFromJSPFTrack,
+ JSPFTrackToListen,
+} from "../playlists/utils";
+import RecommendationPlaylistSettings from "./RecommendationPlaylistSettings";
+import BrainzPlayer from "../brainzplayer/BrainzPlayer";
+import PlaylistItemCard from "../playlists/PlaylistItemCard";
import { ToastMsg } from "../notifications/Notifications";
export type RecommendationsPageProps = {
playlists?: JSPFObject[];
user: ListenBrainzUser;
- paginationOffset: string;
- playlistCount: number;
};
export type RecommendationsPageState = {
playlists: JSPFPlaylist[];
- playlistSelectedForOperation?: JSPFPlaylist;
+ selectedPlaylist?: JSPFPlaylist;
loading: boolean;
- paginationOffset: number;
- playlistCount: number;
+ recordingFeedbackMap: RecordingFeedbackMap;
};
export default class RecommendationsPage extends React.Component<
@@ -39,53 +50,504 @@ export default class RecommendationsPage extends React.Component<
> {
static contextType = GlobalAppContext;
declare context: React.ContextType
+
+ {playlist.title}
+
+ {track.length} tracks | Updated {preciseTimestamp(playlist.date)}
+ {extension?.additional_metadata?.expires_at &&
+ ` | Deleted in ${preciseTimestamp(
+ extension?.additional_metadata?.expires_at,
+ "timeAgo"
+ )}`}
+
+
+
+ {playlist.annotation && ( + <> + + {/*
*/} + + )} +
+
+
+
+
+
+
+ {extension?.public ? "Public" : "Private"} playlist by
+ {playlist.creator} |{" "}
+ {extension?.created_for && `For ${extension?.created_for}`}
+
+ Link to this playlist +
+ + Link to this playlist +
+ {playlist.annotation && ( + <> + + {/*
*/} + + )} +
{
+ if (["Enter", " "].includes(event.key)) this.selectPlaylist(event);
+ }}
+ data-playlist-id={playlistId}
+ role="button"
+ tabIndex={0}
+ >
+ {!isUndefined(percentTimeLeft) && (
+ = (event) => {
+ const element = event.target as HTMLDivElement;
+ const parent = element.parentElement;
+ if (!element || !parent) {
+ return;
+ }
+ // calculate horizontal scroll percentage
+ const scrollPercentage =
+ (100 * element.scrollLeft) / (element.scrollWidth - element.clientWidth);
+
+ if (scrollPercentage > 95) {
+ parent.classList.add("scroll-end");
+ parent.classList.remove("scroll-start");
+ } else if (scrollPercentage < 5) {
+ parent.classList.add("scroll-start");
+ parent.classList.remove("scroll-end");
+ } else {
+ parent.classList.remove("scroll-end");
+ parent.classList.remove("scroll-start");
+ }
+ };
+
+ manualScroll: React.ReactEventHandler = (event) => {
+ if (!this.scrollContainer?.current) {
+ return;
+ }
+ if (event?.currentTarget.classList.contains("forward")) {
+ this.scrollContainer.current.scrollBy({
+ left: 300,
+ top: 0,
+ behavior: "smooth",
+ });
+ } else {
+ this.scrollContainer.current.scrollBy({
+ left: -300,
+ top: 0,
+ behavior: "smooth",
+ });
+ }
};
render() {
+ const { currentUser, APIService } = this.context;
+ const { playlists, selectedPlaylist, loading } = this.state;
const { user } = this.props;
- const { playlists, paginationOffset, playlistCount, loading } = this.state;
+ const listensFromJSPFTracks =
+ selectedPlaylist?.track.map(JSPFTrackToListen) ?? [];
return (
- /playlists/recommendations", methods=['GET', 'OPTIONS'])
+@crossdomain
+@ratelimit()
+@api_listenstore_needed
+def user_recommendations(playlist_user_name):
+ """
+ Fetch recommendation playlist metadata in JSPF format without recordings for playlist_user_name.
+ This endpoint only lists playlists that are to be shown on the listenbrainz.org recommendations
+ pages.
+
+ :statuscode 200: success
+ :statuscode 404: user not found
+ :resheader Content-Type: *application/json*
+ """
+
+ playlist_user = db_user.get_by_mb_id(playlist_user_name)
+ if playlist_user is None:
+ raise APINotFound("Cannot find user: %s" % playlist_user_name)
+
+ playlists = db_playlist.get_recommendation_playlists_for_user(playlist_user.id)
+ return jsonify(serialize_playlists(playlists, len(playlists), 0, 0))
+
+
@api_bp.route("/user//services", methods=['GET', 'OPTIONS'])
@crossdomain
@ratelimit()
diff --git a/listenbrainz/webserver/views/user.py b/listenbrainz/webserver/views/user.py
index 7d341c9f85..f47e802b8b 100644
--- a/listenbrainz/webserver/views/user.py
+++ b/listenbrainz/webserver/views/user.py
@@ -13,7 +13,7 @@
from listenbrainz.db.missing_musicbrainz_data import get_user_missing_musicbrainz_data
from listenbrainz.db.msid_mbid_mapping import fetch_track_metadata_for_items
from listenbrainz.db.playlist import get_playlists_for_user, get_playlists_created_for_user, \
- get_playlists_collaborated_on
+ get_playlists_collaborated_on, get_recommendation_playlists_for_user
from listenbrainz.db.pinned_recording import get_current_pin_for_user, get_pin_count_for_user, get_pin_history_for_user
from listenbrainz.db.feedback import get_feedback_count_for_user, get_feedback_for_user
from listenbrainz.db import year_in_music as db_year_in_music
@@ -279,15 +279,14 @@ def recommendation_playlists(user_name: str):
}
playlists = []
- user_playlists, playlist_count = get_playlists_created_for_user(
- user.id, False, count, offset)
+ user_playlists = get_recommendation_playlists_for_user(
+ user.id)
for playlist in user_playlists:
playlists.append(serialize_jspf(playlist))
props = {
"playlists": playlists,
"user": user_data,
- "playlist_count": playlist_count,
"logged_in_user_follows_user": logged_in_user_follows_user(user),
}
75 ? "pressing" : ""
+ }`}
+ title={`Deleted in ${preciseTimestamp(expiryDate!, "timeAgo")}`}
+ style={{
+ ["--degrees-progress" as any]: `${
+ (percentTimeLeft / 100) * 360
+ }deg`,
+ }}
+ />
+ )}
+
);
};
- updatePlaylists = (playlists: JSPFPlaylist[]): void => {
- this.setState({ playlists });
+ onScroll: React.ReactEventHandler{shortTitle ?? playlist.title}
+ {isLoggedIn && (
+
+ )}
+
-
+
diff --git a/frontend/js/src/utils/types.d.ts b/frontend/js/src/utils/types.d.ts
index e80003c31d..8f59343cf9 100644
--- a/frontend/js/src/utils/types.d.ts
+++ b/frontend/js/src/utils/types.d.ts
@@ -471,12 +471,21 @@ declare type JSPFObject = {
playlist: JSPFPlaylist;
};
+declare type JSPFPlaylistMetadata = {
+ external_urls?: { [key: string]: any };
+ algorithm_metadata: {
+ source_patch: string;
+ };
+ expires_at?: string; // ISO date string
+};
+
declare type JSPFPlaylistExtension = {
- collaborators: string[];
+ collaborators?: string[];
public: boolean;
created_for?: string;
copied_from?: string; // Full ListenBrainz playlist URI
last_modified_at?: string; // ISO date string
+ additional_metadata?: JSPFPlaylistMetadata;
};
declare type JSPFTrackExtension = {
diff --git a/listenbrainz/db/playlist.py b/listenbrainz/db/playlist.py
index 330966b979..0d5daa06cf 100644
--- a/listenbrainz/db/playlist.py
+++ b/listenbrainz/db/playlist.py
@@ -16,6 +16,10 @@
TROI_BOT_USER_ID = 12939
TROI_BOT_DEBUG_USER_ID = 19055
+LISTENBRAINZ_USER_ID = 23944
+
+# These are the recommendation troi patches that we showcase on the recommendations page for each user
+RECOMMENDATION_PATCHES = ('daily-jams', 'weekly-jams', 'weekly-exploration', 'top-discoveries-for-year', 'top-missed-recordings-for-year')
def get_by_mbid(playlist_id: str, load_recordings: bool = True) -> Optional[model_playlist.Playlist]:
@@ -146,6 +150,44 @@ def get_playlists_for_user(user_id: int,
return playlists, count
+def get_recommendation_playlists_for_user(user_id: int):
+ """Get all recommendation playlists that have been created for the user
+
+ Arguments:
+ user_id: The user to find playlists for
+
+ Returns:
+ A list of playlists
+
+ """
+
+ params = {"creator_id": (LISTENBRAINZ_USER_ID, TROI_BOT_USER_ID), "created_for_id": user_id, "patches": RECOMMENDATION_PATCHES}
+ query = sqlalchemy.text(f"""
+ SELECT pl.id
+ , pl.mbid
+ , pl.name
+ , pl.description
+ , pl.creator_id
+ , pl.created
+ , pl.public
+ , pl.created
+ , pl.last_updated
+ , pl.copied_from_id
+ , pl.created_for_id
+ , pl.additional_metadata
+ FROM playlist.playlist pl
+ WHERE additional_metadata->'algorithm_metadata'->>'source_patch' IN :patches
+ AND created_for_id = :created_for_id
+ AND creator_id IN :creator_id
+ ORDER BY pl.created DESC""")
+
+ with ts.engine.connect() as connection:
+ result = connection.execute(query, params)
+ playlists = _playlist_resultset_to_model(connection, result, False)
+
+ return playlists
+
+
def _playlist_resultset_to_model(connection, result, load_recordings):
"""Parse the result of an sql query to get playlists
diff --git a/listenbrainz/tests/integration/test_api.py b/listenbrainz/tests/integration/test_api.py
index 4280f38875..f942e90b8b 100644
--- a/listenbrainz/tests/integration/test_api.py
+++ b/listenbrainz/tests/integration/test_api.py
@@ -1064,3 +1064,10 @@ def test_get_user_services(self):
content_type="application/json"
)
self.assert403(response)
+
+ def test_user_recommendations(self):
+ r = self.client.get(url_for("api_v1.user_recommendations", playlist_user_name=self.followed_user["musicbrainz_id"]))
+ self.assert200(r)
+
+ r = self.client.get(url_for("api_v1.user_recommendations", playlist_user_name="does not exist"))
+ self.assert404(r)
diff --git a/listenbrainz/webserver/templates/playlists/recommendations.html b/listenbrainz/webserver/templates/playlists/recommendations.html
index ba9c28f90d..8e07e6d151 100644
--- a/listenbrainz/webserver/templates/playlists/recommendations.html
+++ b/listenbrainz/webserver/templates/playlists/recommendations.html
@@ -1,11 +1,12 @@
{% extends 'user/base.html' %}
{%- block title -%}
+ Created for
{% if current_user.musicbrainz_id == user.musicbrainz_id %}
- Your
+ you
{% else %}
- {{ user.musicbrainz_id }}'s
+ {{ user.musicbrainz_id }}
{%- endif -%}
- Recommendations - ListenBrainz
+ - ListenBrainz
{%- endblock-%}
diff --git a/listenbrainz/webserver/templates/user/base.html b/listenbrainz/webserver/templates/user/base.html
index ab4c54ec87..6f0baa3e81 100644
--- a/listenbrainz/webserver/templates/user/base.html
+++ b/listenbrainz/webserver/templates/user/base.html
@@ -26,7 +26,7 @@
Stats
Taste
Playlists
- Recommendations
+ Created for you
diff --git a/listenbrainz/webserver/views/api.py b/listenbrainz/webserver/views/api.py
index f247cdd4e0..4a433aa8e8 100644
--- a/listenbrainz/webserver/views/api.py
+++ b/listenbrainz/webserver/views/api.py
@@ -641,6 +641,29 @@ def get_playlists_collaborated_on_for_user(playlist_user_name):
return jsonify(serialize_playlists(playlists, playlist_count, count, offset))
+@api_bp.route("/user/Recommendation playlists created for {user.name}
-- These playlists are ephemeral and will only be available for a month. - Be sure to save the ones you like to your own playlists ! -
+
+ {}}
+ {!playlists.length ? (
+
+
+ )}
+
);
@@ -108,13 +570,7 @@ document.addEventListener("DOMContentLoaded", () => {
tracesSampleRate: sentry_traces_sample_rate,
});
}
- const {
- playlists,
- user,
- playlist_count: playlistCount,
- pagination_offset: paginationOffset,
- playlists_per_page: playlistsPerPage,
- } = reactProps;
+ const { playlists, user } = reactProps;
const RecommendationsPageWithAlertNotifications = withAlertNotifications(
RecommendationsPage
@@ -123,12 +579,15 @@ document.addEventListener("DOMContentLoaded", () => {
const renderRoot = createRoot(domContainer!);
renderRoot.render(
Created for {user.name}
+
+ 
+
+ ) : (
+
+ + Oh no. Either something’s gone wrong, or you need to submit more + listens before we can prepare delicious fresh produce just for + you. +
+
+
+
+ )}
+ {selectedPlaylist && (
+
+ {playlists.map((playlist, index) => {
+ const extension = getPlaylistExtension(playlist);
+ const sourcePatch =
+ extension?.additional_metadata?.algorithm_metadata
+ .source_patch;
+ const isFirstOfType =
+ playlists.findIndex((pl) => {
+ const extension2 = getPlaylistExtension(pl);
+ const sourcePatch2 =
+ extension2?.additional_metadata?.algorithm_metadata
+ .source_patch;
+ return sourcePatch === sourcePatch2;
+ }) === index;
+
+ const info = RecommendationsPage.getPlaylistInfo(
+ playlist,
+ !isFirstOfType
+ );
+ return this.getPlaylistCard(playlist, info);
+ })}
+
+
+
+ {selectedPlaylist.track.length > 0 ? (
+
+ this.setState((prevState) => ({
+ selectedPlaylist: {
+ ...prevState.selectedPlaylist!,
+ track: newState,
+ },
+ }))
+ }
+ >
+ {selectedPlaylist.track.map((track: JSPFTrack, index) => {
+ return (
+
+ ) : (
+
+
+
+ )}
+ Nothing in this playlist yet
+