diff --git a/package-lock.json b/package-lock.json index 0360d70..b099b84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.4.0", "react-native-tab-view": "^2.16.0", - "react-native-track-player": "^1.2.7", + "react-native-track-player": "file:../../repos/react-native-track-player", "uuid": "^8.3.2", "xmldom": "^0.5.0" }, @@ -49,6 +49,25 @@ "typescript": "^3.8.3" } }, + "../../repos/react-native-track-player": { + "version": "2.0.0-rc16", + "license": "Apache-2.0", + "devDependencies": { + "@types/react-native": "^0.60.0", + "@typescript-eslint/eslint-plugin": "^1.7.0", + "@typescript-eslint/parser": "^1.7.0", + "eslint": "^5.16.0", + "eslint-config-prettier": "^4.2.0", + "eslint-plugin-prettier": "^3.0.1", + "prettier": "^1.17.0", + "rimraf": "^2.6.2", + "typescript": "^3.2.4" + }, + "peerDependencies": { + "react": ">=16.8.6", + "react-native": ">=0.60.0-rc.2" + } + }, "node_modules/@babel/code-frame": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", @@ -10641,13 +10660,8 @@ } }, "node_modules/react-native-track-player": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/react-native-track-player/-/react-native-track-player-1.2.7.tgz", - "integrity": "sha512-U1kA25qm398/kY6BvTojGHt4S1tYuKrJNQpXW+dA+p0B+n4LlPyoidUXfu951YM7aoisg8EmQPsevUFmcXG+cg==", - "peerDependencies": { - "react": ">=16.8.6", - "react-native": ">=0.60.0-rc.2" - } + "resolved": "../../repos/react-native-track-player", + "link": true }, "node_modules/react-native/node_modules/ws": { "version": "6.2.2", @@ -21408,10 +21422,18 @@ "requires": {} }, "react-native-track-player": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/react-native-track-player/-/react-native-track-player-1.2.7.tgz", - "integrity": "sha512-U1kA25qm398/kY6BvTojGHt4S1tYuKrJNQpXW+dA+p0B+n4LlPyoidUXfu951YM7aoisg8EmQPsevUFmcXG+cg==", - "requires": {} + "version": "file:../../repos/react-native-track-player", + "requires": { + "@types/react-native": "^0.60.0", + "@typescript-eslint/eslint-plugin": "^1.7.0", + "@typescript-eslint/parser": "^1.7.0", + "eslint": "^5.16.0", + "eslint-config-prettier": "^4.2.0", + "eslint-plugin-prettier": "^3.0.1", + "prettier": "^1.17.0", + "rimraf": "^2.6.2", + "typescript": "^3.2.4" + } }, "react-refresh": { "version": "0.4.3", diff --git a/package.json b/package.json index e6706cf..6d2dfa5 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.4.0", "react-native-tab-view": "^2.16.0", - "react-native-track-player": "^1.2.7", + "react-native-track-player": "file:../../repos/react-native-track-player", "uuid": "^8.3.2", "xmldom": "^0.5.0" }, diff --git a/src/components/SplashPage.tsx b/src/components/SplashPage.tsx index 74e572d..bea1ad9 100644 --- a/src/components/SplashPage.tsx +++ b/src/components/SplashPage.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { Text, View } from 'react-native'; import RNFS from 'react-native-fs'; -import TrackPlayer, { Track } from 'react-native-track-player'; +import TrackPlayer, { Capability, Track } from 'react-native-track-player'; import paths from '../paths'; async function mkdir(path: string): Promise { @@ -31,17 +31,17 @@ const SplashPage: React.FC<{}> = ({ children }) => { await TrackPlayer.setupPlayer(); TrackPlayer.updateOptions({ capabilities: [ - TrackPlayer.CAPABILITY_PLAY, - TrackPlayer.CAPABILITY_PAUSE, - TrackPlayer.CAPABILITY_STOP, - TrackPlayer.CAPABILITY_SKIP_TO_NEXT, - TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS, + Capability.Play, + Capability.Pause, + Capability.Stop, + Capability.SkipToNext, + Capability.SkipToPrevious, ], compactCapabilities: [ - TrackPlayer.CAPABILITY_PLAY, - TrackPlayer.CAPABILITY_PAUSE, - TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS, - TrackPlayer.CAPABILITY_SKIP_TO_NEXT, + Capability.Play, + Capability.Pause, + Capability.SkipToNext, + Capability.SkipToPrevious, ], }); diff --git a/src/hooks/player.ts b/src/hooks/player.ts index b8ee302..a168d1c 100644 --- a/src/hooks/player.ts +++ b/src/hooks/player.ts @@ -1,5 +1,5 @@ import { useState } from "react"; -import TrackPlayer, { STATE_NONE, STATE_STOPPED, Track, TrackPlayerEvents, useTrackPlayerEvents } from "react-native-track-player"; +import TrackPlayer, { Track, useTrackPlayerEvents, Event, State } from "react-native-track-player"; import { Song } from "../models/music"; function mapSongToTrack(song: Song): Track { @@ -14,9 +14,9 @@ function mapSongToTrack(song: Song): Track { } const currentTrackEvents = [ - TrackPlayerEvents.PLAYBACK_STATE, - TrackPlayerEvents.PLAYBACK_TRACK_CHANGED, - TrackPlayerEvents.REMOTE_STOP, + Event.PlaybackState, + Event.PlaybackTrackChanged, + Event.RemoteStop, ] export const useCurrentTrackId = () => { @@ -24,18 +24,19 @@ export const useCurrentTrackId = () => { useTrackPlayerEvents(currentTrackEvents, async (event) => { switch (event.type) { - case TrackPlayerEvents.PLAYBACK_STATE: + case Event.PlaybackState: switch (event.state) { - case STATE_NONE: - case STATE_STOPPED: + case State.None: + case State.Stopped: setCurrentTrackId(null); break; } break; - case TrackPlayerEvents.PLAYBACK_TRACK_CHANGED: - setCurrentTrackId(await TrackPlayer.getCurrentTrack()); + case Event.PlaybackTrackChanged: + const trackIndex = await TrackPlayer.getCurrentTrack() + setCurrentTrackId((await TrackPlayer.getTrack(trackIndex)).id); break; - case TrackPlayerEvents.REMOTE_STOP: + case Event.RemoteStop: setCurrentTrackId(null); break; default: @@ -64,9 +65,10 @@ export const useSetQueue = () => { await TrackPlayer.add(tracks2); await TrackPlayer.play(); - await TrackPlayer.add(tracks1, playId); + await TrackPlayer.add(tracks1, 0); const queue = await TrackPlayer.getQueue(); + console.log(`queue: ${JSON.stringify(queue.map(x => x.title))}`); } } } diff --git a/src/playback/service.ts b/src/playback/service.ts index f716319..63d32fc 100644 --- a/src/playback/service.ts +++ b/src/playback/service.ts @@ -1,11 +1,11 @@ -import TrackPlayer from 'react-native-track-player'; +import TrackPlayer, { Event } from 'react-native-track-player'; module.exports = async function() { - TrackPlayer.addEventListener('remote-play', () => TrackPlayer.play()); - TrackPlayer.addEventListener('remote-pause', () => TrackPlayer.pause()); - TrackPlayer.addEventListener('remote-stop', () => TrackPlayer.destroy()); + TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play()); + TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause()); + TrackPlayer.addEventListener(Event.RemoteStop, () => TrackPlayer.destroy()); - TrackPlayer.addEventListener('remote-duck', (data) => { + TrackPlayer.addEventListener(Event.RemoteDuck, (data) => { if (data.permanent) { TrackPlayer.stop(); return; @@ -18,6 +18,6 @@ module.exports = async function() { } }); - TrackPlayer.addEventListener('remote-next', () => TrackPlayer.skipToNext().catch(() => {})); - TrackPlayer.addEventListener('remote-previous', () => TrackPlayer.skipToPrevious().catch(() => {})); + TrackPlayer.addEventListener(Event.RemoteNext, () => TrackPlayer.skipToNext().catch(() => {})); + TrackPlayer.addEventListener(Event.RemotePrevious, () => TrackPlayer.skipToPrevious().catch(() => {})); };