remote control shtuff

components/Player/mini-player.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Button, Spacer, Spinner, Stack, useTheme, XStack, YStack } from "tamagui";
+import { Spacer, Spinner, XStack, YStack } from "tamagui";
 import { State, useActiveTrack, usePlaybackState } from "react-native-track-player";
 import { JellifyTrack } from "../../types/JellifyTrack";
 import { usePlayerContext } from "../../player/provider";
-import { BottomTabNavigationEventMap, BottomTabNavigationProp } from "@react-navigation/bottom-tabs";
+import { BottomTabNavigationEventMap } from "@react-navigation/bottom-tabs";
 import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
 import { BlurView } from "@react-native-community/blur";
 import Icon from "../Global/icon";

index.js

@@ -2,5 +2,8 @@ import 'react-native-gesture-handler';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
+import { PlaybackService } from './player/service'
+import TrackPlayer from 'react-native-track-player';
 
+TrackPlayer.registerPlaybackService(() => PlaybackService);
 AppRegistry.registerComponent(appName, () => App);

player/provider.tsx

@@ -3,8 +3,7 @@ import { JellifyTrack } from "../types/JellifyTrack";
 import { storage } from "../constants/storage";
 import { MMKVStorageKeys } from "../enums/mmkv-storage-keys";
 import { findPlayQueueIndexStart } from "./helpers/index";
-import { Event } from "react-native-track-player";
-import { add, reset, play as rntpPlay, pause as rntpPause, setupPlayer, getActiveTrack, addEventListener } from "react-native-track-player/lib/src/trackPlayer";
+import TrackPlayer, { Event, useTrackPlayerEvents } from "react-native-track-player";
 import _ from "lodash";
 import { buildNewQueue } from "./helpers/queue";
 import { useApiClientContext } from "../components/jellyfin-api-provider";
@@ -39,9 +38,9 @@ const PlayerContextInitializer = () => {
     
     //#region Functions
     const play = async () => {
-        rntpPlay();
+        TrackPlayer.play();
         
-        const activeTrack = await getActiveTrack() as JellifyTrack;
+        const activeTrack = await TrackPlayer.getActiveTrack() as JellifyTrack;
         playStateApi.reportPlaybackStart({
             playbackStartInfo: {
                 SessionId: sessionId,
@@ -51,9 +50,9 @@ const PlayerContextInitializer = () => {
     }
 
     const pause = async () => {
-        rntpPause();
+        TrackPlayer.pause();
         
-        const activeTrack = await getActiveTrack() as JellifyTrack;
+        const activeTrack = await TrackPlayer.getActiveTrack() as JellifyTrack;
         playStateApi.reportPlaybackStopped({
             playbackStopInfo: {
                 SessionId: sessionId,
@@ -64,7 +63,7 @@ const PlayerContextInitializer = () => {
     
     const resetQueue = async (hideMiniplayer: boolean | undefined) => {
         console.debug("Clearing queue")
-        await reset();
+        await TrackPlayer.reset();
         setQueue([]);
         
         setShowMiniplayer(!hideMiniplayer)
@@ -74,7 +73,7 @@ const PlayerContextInitializer = () => {
         let insertIndex = findPlayQueueIndexStart(queue);
         console.debug(`Adding ${tracks.length} to queue at index ${insertIndex}`)
         
-        await add(tracks, insertIndex);
+        await TrackPlayer.add(tracks, insertIndex);
         
         setQueue(buildNewQueue(queue, tracks, insertIndex))
         
@@ -83,10 +82,17 @@ const PlayerContextInitializer = () => {
     //#endregion Functions
     
     //#region RNTP Setup
-    setupPlayer().then(() => console.debug("Player setup successfully"));
+    TrackPlayer.setupPlayer();
 
-    addEventListener(Event.RemotePlay, () => play());
-    addEventListener(Event.RemotePause, () => pause());
+    useTrackPlayerEvents([Event.RemotePause], async () => {
+        const activeTrack = await TrackPlayer.getActiveTrack() as JellifyTrack;
+        playStateApi.reportPlaybackStart({
+            playbackStartInfo: {
+                SessionId: sessionId,
+                ItemId: activeTrack.ItemId
+            }
+        })
+    })
 
     const [playerState, setPlayerState] = useState(null);
     //#endregion RNTP Setup

player/service.ts

@@ -0,0 +1,6 @@
+import TrackPlayer, { Event } from "react-native-track-player";
+
+export const PlaybackService = async function() {
+    TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());
+    TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());
+}