added buttons :tada:

2 files changed, 52 insertions, 1 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 3377149..ee41a27 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,8 +1,15 @@
 import AppBar from '@material-ui/core/AppBar';
+import Fab from '@material-ui/core/Fab';
 import Toolbar from '@material-ui/core/Toolbar';
 
 import { PressureIcon } from '../components/icons';
 
+import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded';
+import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
+import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
+import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
+import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
+
 export default function Index() {
 	return <>
 		<div className='appGrid posabs a0'>
@@ -13,7 +20,20 @@ export default function Index() {
 				</Toolbar>
 			</AppBar>
 			<div className='settings'></div>
-			<div className='viewer'></div>
+			<div className='viewer'>
+				<div className='player'></div>
+				<div className='controls'>
+					<div className='posabs abscenter'>
+						<Fab size='small' children={<SkipPreviousRoundedIcon />} />
+						<Fab className='playPause' size='medium' children={<PauseRoundedIcon />} />
+						<Fab size='small' children={<NavigateBeforeRoundedIcon />} />
+						<Fab size='small' children={<NavigateNextRoundedIcon />} />
+					</div>
+					<div className='posabs abscenterv r0'>
+						<Fab size='small' children={<FullscreenRoundedIcon />} />
+					</div>
+				</div>
+			</div>
 			<div className='tools'></div>
 			<div className='timeline'></div>
 		</div>
diff --git a/styles/editor.css b/styles/editor.css
index cfffb71..5b9c7b6 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -38,3 +38,34 @@
 	grid-row: 3;
 	background-color: var(--c100);
 }
+
+.appGrid .viewer {
+	display: grid;
+	grid-template-rows: 1fr 80px;
+}
+
+.appGrid .viewer .controls {
+	position: relative;
+}
+
+.appGrid .viewer .controls .abscenter {
+	margin-left: 24px;
+}
+
+.appGrid .viewer .controls .r0 {
+	margin-right: 16px;
+}
+
+.appGrid .viewer .controls .MuiFab-root.playPause {
+	background-color: var(--blue);
+}
+
+.appGrid .viewer .controls .MuiFab-root {
+	color: var(--fg);
+}
+
+.appGrid .viewer .controls .MuiFab-root:not(.playPause) {
+	background-color: var(--transparent);
+	box-shadow: none;
+	margin: 4px;
+}