diff --git a/components/Home/helpers/recently-played.tsx b/components/Home/helpers/recently-played.tsx
index 1fb240f0..7cec26ee 100644
--- a/components/Home/helpers/recently-played.tsx
+++ b/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();
+ }}
>
diff --git a/components/Player/component.tsx b/components/Player/component.tsx
index c201b512..75436ef6 100644
--- a/components/Player/component.tsx
+++ b/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 (
- {activeTrack.title ?? "Nothing playing"}
+ {activeTrack?.title ?? "Nothing playing"}
);
}
diff --git a/helpers/mappings.ts b/helpers/mappings.ts
new file mode 100644
index 00000000..ada97949
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/player/provider.tsx b/player/provider.tsx
index a57f2258..225af8ba 100644
--- a/player/provider.tsx
+++ b/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>;
queue: JellifyTrack[];
setQueue: React.Dispatch>;
+ activeTrack: JellifyTrack | undefined;
+ setPlayerState: React.Dispatch>;
+ position: number;
+ buffered: number;
+ duration: number;
}
const PlayerContextInitializer = () => {
@@ -20,13 +26,26 @@ const PlayerContextInitializer = () => {
const [showMiniplayer, setShowMiniplayer] = useState(false);
const [queue, setQueue] = useState(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({
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 React.JS
showMiniplayer,
setShowMiniplayer,
queue,
- setQueue
+ setQueue,
+ activeTrack,
+ setPlayerState,
+ position,
+ buffered,
+ duration
}}>
{ children }
diff --git a/types/JellifyTrack.ts b/types/JellifyTrack.ts
index d0d0133c..3bb89f12 100644
--- a/types/JellifyTrack.ts
+++ b/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";