From c7d65e0a581e80523bfdeecdf1a08e38ec9ff09c Mon Sep 17 00:00:00 2001 From: austinried <4966622+austinried@users.noreply.github.com> Date: Tue, 22 Jun 2021 13:59:14 +0900 Subject: [PATCH] track player working --- index.js | 3 ++- package-lock.json | 16 ++++++++++++++++ package.json | 1 + src/components/SplashPage.tsx | 32 ++++++++++++++++++++++++++++++++ src/playback/service.ts | 21 +++++++++++++++++++++ src/styles/text.ts | 9 ++++++--- 6 files changed, 78 insertions(+), 4 deletions(-) create mode 100644 src/playback/service.ts diff --git a/index.js b/index.js index 99a6e59..576e7e2 100644 --- a/index.js +++ b/index.js @@ -9,6 +9,7 @@ LogBox.ignoreLogs(["timer"]); import App from './App'; import { name as appName } from './app.json'; - +import TrackPlayer from 'react-native-track-player'; AppRegistry.registerComponent(appName, () => App); +TrackPlayer.registerPlaybackService(() => require('./src/playback/service')); diff --git a/package-lock.json b/package-lock.json index 7666b27..afd5952 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react-native-screens": "^3.4.0", "react-native-sqlite-storage": "^5.0.0", "react-native-tab-view": "^2.16.0", + "react-native-track-player": "^1.2.7", "recoil": "^0.3.1", "uuid": "^8.3.2", "xmldom": "^0.5.0" @@ -11594,6 +11595,15 @@ "react-native-reanimated": "*" } }, + "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" + } + }, "node_modules/react-native-windows": { "version": "0.64.11", "resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.64.11.tgz", @@ -23449,6 +23459,12 @@ "integrity": "sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==", "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": {} + }, "react-native-windows": { "version": "0.64.11", "resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.64.11.tgz", diff --git a/package.json b/package.json index 4878d18..4e1fe3f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-native-screens": "^3.4.0", "react-native-sqlite-storage": "^5.0.0", "react-native-tab-view": "^2.16.0", + "react-native-track-player": "^1.2.7", "recoil": "^0.3.1", "uuid": "^8.3.2", "xmldom": "^0.5.0" diff --git a/src/components/SplashPage.tsx b/src/components/SplashPage.tsx index d580f8f..1ec20c3 100644 --- a/src/components/SplashPage.tsx +++ b/src/components/SplashPage.tsx @@ -1,6 +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 { musicDb, settingsDb } from '../clients'; async function mkdir(path: string): Promise { @@ -38,6 +39,37 @@ const SplashPage: React.FC<{}> = ({ children }) => { if (!(await settingsDb.dbExists())) { await settingsDb.createDb(); } + + 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, + ], + compactCapabilities: [ + TrackPlayer.CAPABILITY_PLAY, + TrackPlayer.CAPABILITY_PAUSE, + TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS, + TrackPlayer.CAPABILITY_SKIP_TO_NEXT, + ], + }); + + const castlevania: Track = { + id: 'castlevania', + url: 'http://www.vgmuseum.com/mrp/cv1/music/03.mp3', + title: 'Stage 1: Castle Entrance', + artist: 'Kinuyo Yamashita and S.Terishima', + duration: 110, + artwork: 'https://webgames.host/uploads/2017/03/castlevania-3-draculas-curse.jpg', + genre: 'BGM', + date: new Date(1989, 1).toISOString(), + } + + await TrackPlayer.add([castlevania]); + // TrackPlayer.play(); } const promise = Promise.all([ diff --git a/src/playback/service.ts b/src/playback/service.ts new file mode 100644 index 0000000..bbb8df6 --- /dev/null +++ b/src/playback/service.ts @@ -0,0 +1,21 @@ +import TrackPlayer 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('remote-duck', (data) => { + if (data.permanent) { + TrackPlayer.stop(); + return; + } + + if (data.paused) { + TrackPlayer.pause(); + } else { + TrackPlayer.play(); + } + }); + +}; diff --git a/src/styles/text.ts b/src/styles/text.ts index cf37408..3d6a363 100644 --- a/src/styles/text.ts +++ b/src/styles/text.ts @@ -1,8 +1,11 @@ import { TextStyle } from "react-native"; import colors from './colors'; +const fontRegular = 'Metropolis-Regular'; +const fontSemiBold = 'Metropolis-SemiBold'; + const paragraph: TextStyle = { - fontFamily: 'Metropolis-Regular', + fontFamily: fontRegular, fontSize: 16, color: colors.text.primary, }; @@ -10,13 +13,13 @@ const paragraph: TextStyle = { const header: TextStyle = { ...paragraph, fontSize: 20, - fontFamily: 'Metropolis-SemiBold', + fontFamily: fontSemiBold, }; const itemTitle: TextStyle = { ...paragraph, fontSize: 13, - fontFamily: 'Metropolis-SemiBold', + fontFamily: fontSemiBold, }; const itemSubtitle: TextStyle = {