Add controls widget

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>

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

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 };

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