From f075d29a8dc103bb080cd7c656299fd0aa3d7549 Mon Sep 17 00:00:00 2001 From: Violet Caulfield Date: Sun, 1 Dec 2024 07:36:55 -0600 Subject: [PATCH] getting recent tracks to play? --- components/Home/helpers/recently-played.tsx | 11 +++++- components/Player/component.tsx | 10 ++--- helpers/mappings.ts | 16 ++++++++ player/provider.tsx | 42 +++++++++++++++++++-- types/JellifyTrack.ts | 1 - 5 files changed, 67 insertions(+), 13 deletions(-) create mode 100644 helpers/mappings.ts 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";