track player working

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'));

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",

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"

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<void> {
@@ -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([

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();
+    }
+  });
+
+};

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 = {