Update miniplayer and player provider

components/Player/component.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
 import { Text, View } from "react-native";
-import { Event, useActiveTrack, useProgress, useTrackPlayerEvents } from "react-native-track-player";
+import { Event, useActiveTrack, useTrackPlayerEvents } from "react-native-track-player";
 import { handlePlayerError } from "./helpers/error-handlers";
 import { usePlayerContext } from "../../player/provider";
+import { JellifyTrack } from "../../types/JellifyTrack";
 
 /**
  * Events subscribed to within RNTP
@@ -14,7 +14,8 @@ const playerEvents = [
 
 export default function Player(): React.JSX.Element {
 
-    const { activeTrack, queue, setPlayerState } = usePlayerContext();
+    const activeTrack = useActiveTrack() as JellifyTrack | undefined;
+    const { queue, setPlayerState } = usePlayerContext();
 
     useTrackPlayerEvents(playerEvents, (event : any) => {
         playerEventCallback(event, setPlayerState)

components/Player/mini-player.tsx

@@ -1,13 +1,19 @@
 import React from "react";
 import { Text, View, XStack, YStack } from "tamagui";
+import { useActiveTrack } from "react-native-track-player";
+import { JellifyTrack } from "../../types/JellifyTrack";
 import { usePlayerContext } from "../../player/provider";
+import { BottomTabNavigationEventMap, BottomTabNavigationProp } from "@react-navigation/bottom-tabs";
+import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
 
-export function Miniplayer() : React.JSX.Element {
+export function Miniplayer({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }) : React.JSX.Element {
 
-    const { activeTrack } = usePlayerContext();
+    const activeTrack = useActiveTrack() as JellifyTrack | undefined;
+
+    const { setShowPlayer } = usePlayerContext();
 
     return (
-        <View backgroundColor={"$colorTransparent"}>
+        <View backgroundColor="$black5" onPress={() => navigation.navigate("Player")}>
             <XStack>
                 <YStack>
                     <Text>{activeTrack?.title ?? "Nothing Playing"}</Text>

components/tabs.tsx

@@ -24,7 +24,8 @@ export function Tabs() : React.JSX.Element {
                 }}
                 tabBar={(props) => (
                     <>
-                        <Miniplayer />
+                        <Separator />
+                        <Miniplayer navigation={props.navigation} />
                         <Separator />
                         <BottomTabBar {...props} />
                     </>

helpers/mappings.ts

@@ -3,10 +3,12 @@ import { JellifyTrack } from "../types/JellifyTrack";
 import { JellifyServer } from "../types/JellifyServer";
 import { TrackType } from "react-native-track-player";
 import { Api } from "@jellyfin/sdk";
+import { getDynamicHlsApi } from "@jellyfin/sdk/lib/utils/api";
 
 export function mapDtoToTrack(api: Api, item: BaseItemDto) {
+
     return {
-        url: `${api.basePath}/Audio/${item.Id!}/universal`,
+        url: `${api.basePath}/Audio/${item.Id!}/universal?TranscodingProtocol=hls?EnableRemoteMedia=true?EnableRedirection=true`,
         type: TrackType.HLS,
         headers: {
             "X-Emby-Token": api.accessToken

player/provider.tsx

@@ -15,11 +15,7 @@ interface PlayerContext {
     queue: JellifyTrack[];
     clearQueue: () => Promise<void>;
     addToQueue: (tracks: JellifyTrack[]) => Promise<void>;
-    activeTrack: JellifyTrack | undefined;
     setPlayerState: React.Dispatch<SetStateAction<null>>;
-    position: number;
-    buffered: number;
-    duration: number;
 }
 
 const PlayerContextInitializer = () => {
@@ -34,9 +30,6 @@ const PlayerContextInitializer = () => {
     setupPlayer().then(() => console.debug("Player setup successfully"));
 
     const [playerState, setPlayerState] = useState(null);
-    const { position, buffered, duration } = useProgress()
-
-    let activeTrack = useActiveTrack() as JellifyTrack | undefined;
     //#endregion RNTP Setup
 
     const clearQueue = async () => {
@@ -67,11 +60,7 @@ const PlayerContextInitializer = () => {
         queue,
         addToQueue,
         clearQueue,
-        activeTrack,
         setPlayerState,
-        position,
-        buffered,
-        duration,
     }
 }
 
@@ -83,11 +72,7 @@ export const PlayerContext = createContext<PlayerContext>({
     queue: [],
     clearQueue: async () => {},
     addToQueue: async ([]) => {},
-    activeTrack: undefined,
     setPlayerState: () => {},
-    position: 0,
-    buffered: 0,
-    duration: 0
 });
 
 export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JSX.Element = ({ children }: { children: ReactNode }) => {
@@ -99,11 +84,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         queue, 
         clearQueue,
         addToQueue,
-        activeTrack,
         setPlayerState,
-        position,
-        buffered,
-        duration
     } = PlayerContextInitializer();
 
     return <PlayerContext.Provider value={{
@@ -114,11 +95,7 @@ export const PlayerProvider: ({ children }: { children: ReactNode }) => React.JS
         queue,
         clearQueue,
         addToQueue,
-        activeTrack,
         setPlayerState,
-        position,
-        buffered,
-        duration
     }}>
         { children }
     </PlayerContext.Provider>