Merge branch 'master' into add-designer-top-10-alt

Author: MonkeyDo

docs/developers/devel-env.rst

@@ -118,7 +118,7 @@ Update the ``LASTFM_API_KEY`` field with your Last.fm API key.
 You also need to update the ``API_URL`` field value to ``http://localhost:8100``.
 
 To use the Spotify importer you need to register an application on the
-`Spotify Developer Dashboard`_. Use ``http://localhost:8100/settings/music-services/spotify/callback/``
+`Spotify Developer Dashboard`_. Use ``http://127.0.0.1:8100/settings/music-services/spotify/callback/``
 as the callback URL.
 
 After that, fill out the Spotify client ID and client secret in the following

frontend/css/sass/buttons.scss

@@ -26,14 +26,15 @@
 .btn-rounded {
   --bs-btn-border-radius: 3em;
 }
+.btn-small-rounding,
+.btn.dropdown-toggle {
+  --bs-btn-border-radius: #{$btn-border-radius-lg};
+}
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     --bs-btn-border-radius: #{$btn-border-radius-lg};
   }
 }
-.btn.dropdown-toggle {
-  --bs-btn-border-radius: 4px;
-}
 
 .btn-link {
   color: $listenbrainz-blue;

frontend/css/sass/playlists.scss

@@ -9,6 +9,10 @@ $long-description-lines: 8;
   gap: 1rem;
 }
 
+.playlist-info .description {
+  white-space: pre-wrap;
+}
+
 #playlists-container {
   display: flex;
   flex-wrap: wrap;

frontend/css/sass/stats.scss

@@ -1,8 +1,8 @@
 @use "sass:map";
 
 .user-stats-card {
-  margin-top: 20px;
   padding: 0 20px;
+  min-height: 400px;
 }
 
 .stats-full-width-graph {

frontend/js/src/album/AlbumPage.tsx

@@ -14,8 +14,8 @@ import { Vibrant } from "node-vibrant/browser";
 import { Helmet } from "react-helmet";
 import { Link, useLocation, useParams } from "react-router";
 import { toast } from "react-toastify";
+import { useSetAtom } from "jotai";
 import CBReview from "../cb-review/CBReview";
-import { useBrainzPlayerDispatch } from "../common/brainzplayer/BrainzPlayerContext";
 import ListenCard from "../common/listens/ListenCard";
 import Username from "../common/Username";
 import OpenInMusicBrainzButton from "../components/OpenInMusicBrainz";
@@ -32,6 +32,7 @@ import {
   ListeningStats,
   popularRecordingToListen,
 } from "./utils";
+import { setAmbientQueueAtom } from "../common/brainzplayer/BrainzPlayerAtoms";
 
 // not the same format of tracks as what we get in the ArtistPage props
 type AlbumRecording = {
@@ -183,13 +184,10 @@ export default function AlbumPage(): JSX.Element {
     listensFromAlbumRecordings
   );
 
-  const dispatch = useBrainzPlayerDispatch();
+  const setAmbientQueue = useSetAtom(setAmbientQueueAtom);
 
   React.useEffect(() => {
-    dispatch({
-      type: "SET_AMBIENT_QUEUE",
-      data: listensFromAlbumsRecordingsFlattened,
-    });
+    setAmbientQueue(listensFromAlbumsRecordingsFlattened);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listensFromAlbumsRecordingsFlattened]);
 

frontend/js/src/artist/ArtistPage.tsx

@@ -19,6 +19,7 @@ import {
 import { Helmet } from "react-helmet";
 import { useQuery } from "@tanstack/react-query";
 import { faCalendar } from "@fortawesome/free-regular-svg-icons";
+import { useSetAtom } from "jotai";
 import { getReviewEventContent } from "../utils/utils";
 import TagsComponent from "../tags/TagsComponent";
 import ListenCard from "../common/listens/ListenCard";
@@ -35,12 +36,12 @@ import type {
 } from "../album/utils";
 import ReleaseCard from "../explore/fresh-releases/components/ReleaseCard";
 import { RouteQuery } from "../utils/Loader";
-import { useBrainzPlayerDispatch } from "../common/brainzplayer/BrainzPlayerContext";
 import SimilarArtistComponent from "../explore/music-neighborhood/components/SimilarArtist";
 import Pill from "../components/Pill";
 import HorizontalScrollContainer from "../components/HorizontalScrollContainer";
 import Username from "../common/Username";
 import CBReview from "../cb-review/CBReview";
+import { setAmbientQueueAtom } from "../common/brainzplayer/BrainzPlayerAtoms";
 
 export function SortingButtons({
   sort,
@@ -239,13 +240,10 @@ export default function ArtistPage(): JSX.Element {
   const listensFromPopularRecordings =
     popularRecordings?.map(popularRecordingToListen) ?? [];
 
-  const dispatch = useBrainzPlayerDispatch();
+  const setAmbientQueue = useSetAtom(setAmbientQueueAtom);
 
   React.useEffect(() => {
-    dispatch({
-      type: "SET_AMBIENT_QUEUE",
-      data: listensFromPopularRecordings,
-    });
+    setAmbientQueue(listensFromPopularRecordings);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listensFromPopularRecordings]);
 

frontend/js/src/common/brainzplayer/AppleMusicPlayer.tsx

@@ -10,8 +10,8 @@ import {
 } from "../../utils/utils";
 import { DataSourceProps, DataSourceType } from "./BrainzPlayer";
 import GlobalAppContext from "../../utils/GlobalAppContext";
-import { BrainzPlayerContext } from "./BrainzPlayerContext";
 import { dataSourcesInfo } from "../../settings/brainzplayer/BrainzPlayerSettings";
+import { currentDataSourceNameAtom, store } from "./BrainzPlayerAtoms";
 
 export type AppleMusicPlayerProps = DataSourceProps;
 
@@ -149,20 +149,20 @@ export default class AppleMusicPlayer
   }
 
   componentDidUpdate(prevProps: DataSourceProps) {
-    const { show, volume } = this.props;
-    const player = this.appleMusicPlayer;
-    if (prevProps.volume !== volume && player) {
-      player.volume = (volume ?? 100) / 100;
-    }
-    if (prevProps.show && !show) {
-      this.stopAndClear();
+    const { volume } = this.props;
+    if (this.appleMusicPlayer && prevProps.volume !== volume) {
+      this.appleMusicPlayer.volume = (volume ?? 100) / 100;
     }
   }
 
   componentWillUnmount(): void {
     this.disconnectAppleMusicPlayer();
   }
 
+  stop = () => {
+    this.appleMusicPlayer?.pause();
+  };
+
   playAppleMusicId = async (
     appleMusicId: string,
     retryCount = 0
@@ -260,8 +260,9 @@ export default class AppleMusicPlayer
   };
 
   playListen = async (listen: Listen | JSPFTrack): Promise<void> => {
-    const { show } = this.props;
-    if (!show) {
+    const isCurrentDataSource =
+      store.get(currentDataSourceNameAtom) === this.name;
+    if (!isCurrentDataSource) {
       return;
     }
     const apple_music_id = AppleMusicPlayer.getURLFromListen(listen as Listen);
@@ -471,8 +472,9 @@ export default class AppleMusicPlayer
   };
 
   render() {
-    const { show } = this.props;
-    if (!show) {
+    const isCurrentDataSource =
+      store.get(currentDataSourceNameAtom) === this.name;
+    if (!isCurrentDataSource) {
       return null;
     }
     return <div>{this.getAlbumArt()}</div>;