diff --git a/components/Player/mini-player.tsx b/components/Player/mini-player.tsx index 83b80f08..0fd9cab8 100644 --- a/components/Player/mini-player.tsx +++ b/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"; diff --git a/index.js b/index.js index dce9c859..16815f6c 100644 --- a/index.js +++ b/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); diff --git a/player/provider.tsx b/player/provider.tsx index 886f6e3d..06e09fb1 100644 --- a/player/provider.tsx +++ b/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 diff --git a/player/service.ts b/player/service.ts new file mode 100644 index 00000000..a7994bf1 --- /dev/null +++ b/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()); +} \ No newline at end of file