From 6c5787b034db7349d096ec1d2406f72b14efb707 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sat, 15 May 2021 18:07:47 +0200
Subject: tools button group

---
 components/icons.tsx |  1 -
 package.json         |  2 ++
 pages/editor.tsx     | 26 +++++++++++++++++++++++++-
 styles/editor.css    | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 styles/globals.css   |  4 ++++
 styles/keyframes.css |  4 ++++
 yarn.lock            | 10 ++++++++++
 7 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/components/icons.tsx b/components/icons.tsx
index c8a9cbc..954f516 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -124,7 +124,6 @@ export function SlideKeyframe(props: {
 		width='24'
 		height='24'
 		viewBox='0 0 24 24'
-		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
 	>
 		{{
diff --git a/package.json b/package.json
index 91bdf2f..ef0ae8e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
 	"dependencies": {
 		"@material-ui/core": "^4.11.4",
 		"@material-ui/icons": "^4.11.2",
+		"@mdi/js": "^5.9.55",
+		"@mdi/react": "^1.5.0",
 		"ajv": "^8.3.0",
 		"next": "^10.2.0",
 		"react": "^17.0.2",
diff --git a/pages/editor.tsx b/pages/editor.tsx
index aeb4f87..5c3828d 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -4,8 +4,10 @@ import { TimedVideoPlayer } from './present';
 
 import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
 import Fab from '@material-ui/core/Fab';
 import Toolbar from '@material-ui/core/Toolbar';
+import Icon from '@mdi/react';
 
 import { PressureIcon, SlideKeyframe } from '../components/icons';
 
@@ -14,6 +16,7 @@ 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';
+import { mdiCursorDefault } from '@mdi/js';
 
 function TimelineEditor(props: {
 	player: TimedVideoPlayer;
@@ -124,7 +127,28 @@ export default function Index() {
 					</div>
 				</div>
 			</div>
-			<div className='tools'></div>
+			<div className='tools'>
+				<div className='time posrel'>
+					<span className='framerate numbers posabs l0 t0'>@{player.framerate}fps</span>
+					<h2 className='timecode numbers posabs r0 t0'>00:00:00:00f</h2>
+				</div>
+				<ButtonGroup color='primary' aria-label='outlined primary button group'>
+					<Button children={<Icon path={mdiCursorDefault} size={1} />} />
+					<Button children={<SlideKeyframe type='default' />} />
+					<Button children={<SlideKeyframe type='delay' />} />
+					<Button children={<SlideKeyframe type='speedChange' />} />
+					<Button>
+						<div className='loopStartEnd'>
+							<span className='posabs start'>
+								<SlideKeyframe type='loop' />
+							</span>
+							<span className='posabs end'>
+								<SlideKeyframe type='loop' loopEnd />
+							</span>
+						</div>
+					</Button>
+				</ButtonGroup>
+			</div>
 			<div className='timeline'>
 				<TimelineEditor
 					player={player}
diff --git a/styles/editor.css b/styles/editor.css
index 8848b6a..3005be7 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -32,8 +32,56 @@
 	grid-column: 1;
 	grid-row: 3;
 	background-color: var(--c300);
+	padding: 8px;
 }
 
+.appGrid .tools .time {
+	line-height: 1;
+	height: 20px;
+}
+
+.appGrid .tools .time .framerate {
+	font-weight: 500;
+	color: var(--c700);
+}
+
+.appGrid .tools .time .timecode {
+	font-weight: 500;
+	color: var(--gruble);
+}
+
+.appGrid .tools .MuiButtonGroup-root {
+	margin-top: 8px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root {
+	border-width: 2px;
+	padding: 8px;
+	color: var(--c800);
+	border-color: var(--c400);
+	margin-right: -1px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root:first-child {
+	border-radius: 6px 0 0 6px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root:last-child {
+	border-radius: 0 6px 6px 0;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd {
+	display: inline-block;
+	white-space: nowrap;
+	line-height: 0;
+	position: relative;
+	height: 24px;
+	width: 36px;
+}
+
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .start { left: -3px; }
+.appGrid .tools .MuiButtonGroup-root .MuiButton-root .loopStartEnd .end { right: -3px; }
+
 .appGrid .timeline {
 	grid-column: 2;
 	grid-row: 3;
@@ -117,7 +165,7 @@
 	line-height: 0;
 	top: 16px;
 	z-index: 999;
-
+	color: var(--gruble);
 }
 
 .appGrid .timeline .frames .frame:nth-child(30n) {
diff --git a/styles/globals.css b/styles/globals.css
index c45aa2d..f69cb97 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -14,6 +14,10 @@ h1 { font-size: 1.25rem; }
 h2 { font-size: 1.125rem; }
 h3 { font-size: 1rem; }
 
+h1, h2, h3 {
+	margin: 0;
+}
+
 .MuiSvgIcon-root {
 	font-size: 24px !important;
 }
diff --git a/styles/keyframes.css b/styles/keyframes.css
index 67b99eb..8e7e3d2 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -6,3 +6,7 @@
 	margin: 4px -11px;
 }
 
+.keyframe > * {
+	fill: currentColor;
+}
+
diff --git a/yarn.lock b/yarn.lock
index df0ae64..825fae7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -142,6 +142,16 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@mdi/js@^5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.9.55.tgz#8f5bc4d924c23f30dab20545ddc768e778bbc882"
+  integrity sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A==
+
+"@mdi/react@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.5.0.tgz#461d2064ba12d509723bffc95e2f7169a6ac884a"
+  integrity sha512-NztRgUxSYD+ImaKN94Tg66VVVqXj4SmlDGzZoz48H9riJ+Awha56sfXH2fegw819NWo7KI3oeS1Es0lNQqwr0w==
+
 "@next/env@10.2.0":
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.0.tgz#154dbce2efa3ad067ebd20b7d0aa9aed775e7c97"
-- 
cgit v1.2.3