track player working

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