getting recent tracks to play?

components/Home/helpers/recently-played.tsx

@@ -2,11 +2,15 @@ import React, { useEffect } from "react";
 import { H5, ScrollView, Text, View } from "tamagui";
 import { useHomeContext } from "../provider";
 import { H2 } from "../../Global/text";
-import Avatar from "../../Global/avatar";
 import { Card } from "../../Global/card";
+import { addToPlayQueue, clearPlayQueue } from "../../../player/mutators/play-queue";
+import { play } from "react-native-track-player/lib/src/trackPlayer";
+import { mapDtoToTrack } from "../../../helpers/mappings";
+import { useApiClientContext } from "../../jellyfin-api-provider";
 
 export default function RecentlyPlayed(): React.JSX.Element {
 
+    const { apiClient } = useApiClientContext();
     const { recentTracks } = useHomeContext();
 
     useEffect(() => {
@@ -31,6 +35,11 @@ export default function RecentlyPlayed(): React.JSX.Element {
                             cornered
                             itemId={recentlyPlayedTrack.AlbumId!}
                             marginRight={20}
+                            onPress={() => {
+                                clearPlayQueue.mutate();
+                                addToPlayQueue.mutate([mapDtoToTrack(apiClient!, recentlyPlayedTrack)])
+                                play();
+                            }}
                         >
                                 
                         </Card>

components/Player/component.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Text, View } from "react-native";
 import { Event, useActiveTrack, useProgress, useTrackPlayerEvents } from "react-native-track-player";
 import { handlePlayerError } from "./helpers/error-handlers";
+import { usePlayerContext } from "../../player/provider";
 
 /**
  * Events subscribed to within RNTP
@@ -13,21 +14,16 @@ const playerEvents = [
 
 export default function Player(): React.JSX.Element {
 
-    //#region RNTP Setup
-    const [playerState, setPlayerState] = useState(null);
+    const { activeTrack, queue, setPlayerState } = usePlayerContext();
 
     useTrackPlayerEvents(playerEvents, (event : any) => {
         playerEventCallback(event, setPlayerState)
     });
 
-    const { position, buffered, duration } = useProgress()
-
-    let activeTrack = useActiveTrack()!;
-    //#endregion RNTP Setup
 
     return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-            <Text style={{ fontSize: 30 }}>{activeTrack.title ?? "Nothing playing"}</Text>
+            <Text style={{ fontSize: 30 }}>{activeTrack?.title ?? "Nothing playing"}</Text>
         </View>
     );
 }

helpers/mappings.ts

@@ -0,0 +1,16 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { JellifyTrack } from "../types/JellifyTrack";
+import { JellifyServer } from "../types/JellifyServer";
+import { TrackType } from "react-native-track-player";
+import { Api } from "@jellyfin/sdk";
+
+export function mapDtoToTrack(api: Api, item: BaseItemDto) {
+    return {
+        url: `${api.basePath}/Audio/${item.Id!}/universal`,
+        type: TrackType.HLS,
+        headers: {
+            "X-Emby-Token": api.accessToken
+
+        }
+    } as JellifyTrack
+}

player/provider.tsx

@@ -2,6 +2,7 @@ import { createContext, ReactNode, SetStateAction, useContext, useState } from "
 import { JellifyTrack } from "../types/JellifyTrack";
 import { storage } from "../constants/storage";
 import { MMKVStorageKeys } from "../enums/mmkv-storage-keys";
+import { useActiveTrack, useProgress } from "react-native-track-player";
 
 interface PlayerContext {
     showPlayer: boolean;
@@ -10,6 +11,11 @@ interface PlayerContext {
     setShowMiniplayer: React.Dispatch<SetStateAction<boolean>>;
     queue: JellifyTrack[];
     setQueue: React.Dispatch<SetStateAction<JellifyTrack[]>>;
+    activeTrack: JellifyTrack | undefined;
+    setPlayerState: React.Dispatch<SetStateAction<null>>;
+    position: number;
+    buffered: number;
+    duration: number;
 }
 
 const PlayerContextInitializer = () => {
@@ -20,13 +26,26 @@ const PlayerContextInitializer = () => {
     const [showMiniplayer, setShowMiniplayer] = useState<boolean>(false);
     const [queue, setQueue] = useState<JellifyTrack[]>(queueJson ? JSON.parse(queueJson) : []);
 
+    //#region RNTP Setup
+    const [playerState, setPlayerState] = useState(null);
+    const { position, buffered, duration } = useProgress()
+
+    let activeTrack = useActiveTrack() as JellifyTrack | undefined;
+    //#endregion RNTP Setup
+
+
     return {
         showPlayer,
         setShowPlayer,
         showMiniplayer,
         setShowMiniplayer,
         queue,
-        setQueue
+        setQueue,
+        activeTrack,
+        setPlayerState,
+        position,
+        buffered,
+        duration,
     }
 }
 
@@ -36,7 +55,12 @@ export const PlayerContext = createContext<PlayerContext>({
     showMiniplayer: false,
     setShowMiniplayer: () => {},
     queue: [],
-    setQueue: () => {}
+    setQueue: () => {},
+    activeTrack: undefined,
+    setPlayerState: () => {},
+    position: 0,
+    buffered: 0,
+    duration: 0
 });
 
 export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JSX.Element = ({ children }: { children: ReactNode }) => {
@@ -46,7 +70,12 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         showMiniplayer, 
         setShowMiniplayer, 
         queue, 
-        setQueue 
+        setQueue,
+        activeTrack,
+        setPlayerState,
+        position,
+        buffered,
+        duration
     } = PlayerContextInitializer();
 
     return <PlayerContext.Provider value={{
@@ -55,7 +84,12 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         showMiniplayer,
         setShowMiniplayer,
         queue,
-        setQueue
+        setQueue,
+        activeTrack,
+        setPlayerState,
+        position,
+        buffered,
+        duration
     }}>
         { children }
     </PlayerContext.Provider>

types/JellifyTrack.ts

@@ -1,4 +1,3 @@
-import { SongInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { PitchAlgorithm, RatingType, Track, TrackType } from "react-native-track-player"
 import { QueuingType } from "../enums/queuing-type";