From 2e0b8c2a434e2642740a691f162dd18bf7359b26 Mon Sep 17 00:00:00 2001
From: Stefano Brilli <stefanobrilli@gmail.com>
Date: Sun, 29 Mar 2020 15:26:48 +0200
Subject: [PATCH] Add controls widget

---
 src/components/app.tsx      | 16 +++++++++++++-
 src/components/controls.tsx | 42 +++++++++++++++++++++++++++++++++++++
 src/services/netmd-mock.ts  | 13 ++++++++++++
 src/services/netmd.ts       | 18 ++++++++++++++++
 4 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 src/components/controls.tsx

diff --git a/src/components/app.tsx b/src/components/app.tsx
index e50524c..1f79a10 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -9,6 +9,7 @@ import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/sty
 
 import { Welcome } from './welcome';
 import { Main } from './main';
+import { Controls } from './controls';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
@@ -44,6 +45,9 @@ const useStyles = makeStyles(theme => ({
     copyright: {
         display: 'flex',
         alignItems: 'center',
+        [theme.breakpoints.down(600 + theme.spacing(2) * 2)]: {
+            flexWrap: 'wrap',
+        },
     },
     backdrop: {
         zIndex: theme.zIndex.drawer + 1,
@@ -52,6 +56,16 @@ const useStyles = makeStyles(theme => ({
     minidiscLogo: {
         width: 48,
     },
+    controlsContainer: {
+        flex: '1 1 auto',
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(8),
+        [theme.breakpoints.down(600 + theme.spacing(2) * 2)]: {
+            order: -1,
+            width: '100%',
+            paddingLeft: 0,
+        },
+    },
 }));
 
 const darkTheme = createMuiTheme({
@@ -111,7 +125,7 @@ const App = () => {
                             >
                                 Tweet
                             </Link>
-                            <Box style={{ flex: '1 1 auto' }}></Box>
+                            <Box className={classes.controlsContainer}>{mainView === 'MAIN' ? <Controls /> : null}</Box>
                         </Box>
                     </Paper>
                 </main>
diff --git a/src/components/controls.tsx b/src/components/controls.tsx
new file mode 100644
index 0000000..3c0bd47
--- /dev/null
+++ b/src/components/controls.tsx
@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+
+import PlayArrowIcon from '@material-ui/icons/PlayArrow';
+import StopIcon from '@material-ui/icons/Stop';
+import SkipNextIcon from '@material-ui/icons/SkipNext';
+import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
+
+import IconButton from '@material-ui/core/IconButton';
+import Box from '@material-ui/core/Box';
+
+import serviceRegistry from '../services/registry';
+
+export const Controls = () => {
+    const handlePrev = useCallback(() => {
+        serviceRegistry.netmdService?.prev();
+    }, []);
+    const handlePlay = useCallback(() => {
+        serviceRegistry.netmdService?.play();
+    }, []);
+    const handleStop = useCallback(() => {
+        serviceRegistry.netmdService?.stop();
+    }, []);
+    const handleNext = useCallback(() => {
+        serviceRegistry.netmdService?.next();
+    }, []);
+    return (
+        <Box>
+            <IconButton aria-label="prev" onClick={handlePrev}>
+                <SkipPreviousIcon />
+            </IconButton>
+            <IconButton aria-label="play" onClick={handlePlay}>
+                <PlayArrowIcon />
+            </IconButton>
+            <IconButton aria-label="stop" onClick={handleStop}>
+                <StopIcon />
+            </IconButton>
+            <IconButton aria-label="next" onClick={handleNext}>
+                <SkipNextIcon />
+            </IconButton>
+        </Box>
+    );
+};
diff --git a/src/services/netmd-mock.ts b/src/services/netmd-mock.ts
index 58725d9..7f607cc 100644
--- a/src/services/netmd-mock.ts
+++ b/src/services/netmd-mock.ts
@@ -121,6 +121,19 @@ class NetMDMockService implements NetMDService {
         await sleep(0.5);
         progressCallback({ written: 100, encrypted: 100, total: 100 });
     }
+
+    async play() {
+        console.log('play');
+    }
+    async stop() {
+        console.log('stop');
+    }
+    async next() {
+        console.log('next');
+    }
+    async prev() {
+        console.log('prev');
+    }
 }
 
 export { NetMDMockService };
diff --git a/src/services/netmd.ts b/src/services/netmd.ts
index 9797172..d22df29 100644
--- a/src/services/netmd.ts
+++ b/src/services/netmd.ts
@@ -20,6 +20,11 @@ export interface NetMDService {
         format: Wireformat,
         progressCallback: (progress: { written: number; encrypted: number; total: number }) => void
     ): Promise<void>;
+
+    play(): Promise<void>;
+    stop(): Promise<void>;
+    next(): Promise<void>;
+    prev(): Promise<void>;
 }
 
 export class NetMDUSBService implements NetMDService {
@@ -107,4 +112,17 @@ export class NetMDUSBService implements NetMDService {
             updateProgress();
         });
     }
+
+    async play() {
+        await this.netmdInterface!.play();
+    }
+    async stop() {
+        await this.netmdInterface!.stop();
+    }
+    async next() {
+        await this.netmdInterface!.nextTrack();
+    }
+    async prev() {
+        await this.netmdInterface!.previousTrack();
+    }
 }