Adding in notion of a queue name

components/Global/components/track.tsx

@@ -17,11 +17,13 @@ export default function Track({
     track,
     tracklist,
     index,
+    queueName,
     showArtwork
 } : {
     track: BaseItemDto,
     tracklist: BaseItemDto[],
     index: number,
+    queueName?: string | undefined,
     showArtwork?: boolean | undefined
 }) : React.JSX.Element {
 
@@ -38,7 +40,8 @@ export default function Track({
                     playNewQueue.mutate({
                         track,
                         index,
-                        tracklist
+                        tracklist,
+                        queueName: queueName ? queueName : track.Album ? track.Album! : "Queue"
                     });
                 }}
                 paddingVertical={"$3"}

components/Home/helpers/recently-played.tsx

@@ -28,7 +28,8 @@ export default function RecentlyPlayed(): React.JSX.Element {
                                 playNewQueue.mutate({ 
                                     track: recentlyPlayedTrack, 
                                     index: index,
-                                    tracklist: recentTracks
+                                    tracklist: recentTracks,
+                                    queueName: "Recently Played"
                                 });
                             }}
                         />                                

components/Player/screens/index.tsx

@@ -20,7 +20,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
 
     
     const { apiClient } = useApiClientContext();
-    const { nowPlaying, progress, useSeekTo } = usePlayerContext();
+    const { nowPlaying, progress, useSeekTo, queueName } = usePlayerContext();
     
     const [seeking, setSeeking] = useState<boolean>(false);
     const [progressState, setProgressState] = useState<number>(progress!.position);
@@ -50,7 +50,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
 
                     <YStack alignItems="center">
                         <Text>Playing from</Text>
-                        <H5>THING</H5>
+                        <H5>{ queueName ?? "Queue"}</H5>
                     </YStack>
 
                     <XStack justifyContent="center">

components/Playlist/component.tsx

@@ -23,7 +23,7 @@ export default function Playlist(props: PlaylistProps): React.JSX.Element {
 
     const { apiClient, sessionId } = useApiClientContext();
 
-    const { playNewQueue, nowPlaying } = usePlayerContext();
+    const { nowPlaying } = usePlayerContext();
 
     const { data: tracks, isLoading } = useItemTracks(props.playlist.Id!, apiClient!);
 

player/interfaces.ts

@@ -4,4 +4,5 @@ export interface QueueMutation {
     track: BaseItemDto;
     index: number;
     tracklist: BaseItemDto[];
+    queueName: string;
 }

player/provider.tsx

@@ -27,6 +27,7 @@ interface PlayerContext {
     setShowMiniplayer: React.Dispatch<SetStateAction<boolean>>;
     nowPlaying: JellifyTrack | undefined;
     queue: JellifyTrack[];
+    queueName: string | undefined;
     useTogglePlayback: UseMutationResult<void, Error, number | undefined, unknown>;
     useSeekTo: UseMutationResult<void, Error, number, unknown>;
     playNewQueue: UseMutationResult<void, Error, QueueMutation, unknown>;
@@ -47,6 +48,7 @@ const PlayerContextInitializer = () => {
 
     const [nowPlaying, setNowPlaying] = useState<JellifyTrack | undefined>(undefined);
     const [queue, setQueue] = useState<JellifyTrack[]>(queueJson ? JSON.parse(queueJson) : []);
+    const [queueName, setQueueName] = useState<string | undefined>(undefined);
     //#endregion State
 
     
@@ -106,11 +108,12 @@ const PlayerContextInitializer = () => {
     const playNewQueue = useMutation({
         mutationFn: async (mutation: QueueMutation) => {
             trigger("impactLight");
-            await resetQueue(false)
+            await resetQueue(false);
             await addToQueue(mutation.tracklist.map((track) => {
                 return mapDtoToTrack(apiClient!, sessionId, track, QueuingType.FromSelection)
             }));
             
+            setQueueName(mutation.queueName);
             await play(mutation.index);
         }
     });
@@ -178,6 +181,7 @@ const PlayerContextInitializer = () => {
         setShowMiniplayer,
         nowPlaying,
         queue,
+        queueName,
         useTogglePlayback,
         useSeekTo,
         playNewQueue,
@@ -195,6 +199,7 @@ export const PlayerContext = createContext<PlayerContext>({
     setShowMiniplayer: () => {},
     nowPlaying: undefined,
     queue: [],
+    queueName: undefined,
     useTogglePlayback: {
         mutate: () => {},
         mutateAsync: async () => {},
@@ -262,6 +267,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         setShowMiniplayer, 
         nowPlaying,
         queue, 
+        queueName,
         useTogglePlayback,
         useSeekTo,
         playNewQueue,
@@ -276,6 +282,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         setShowMiniplayer,
         nowPlaying,
         queue,
+        queueName,
         useTogglePlayback,
         useSeekTo,
         playNewQueue,