tool selection and play/skip animation

3 files changed, 41 insertions, 26 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7bb0076..96182ab 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import Head from 'next/head';
 
+import '../components/play-skip_60fps.css';
 import '../styles/colors.css';
 import '../styles/editor.css';
 import '../styles/globals.css';
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 3313e31..2deb6f5 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -7,21 +7,22 @@ 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 Slider from '@material-ui/core/Slider';
 import Toolbar from '@material-ui/core/Toolbar';
 import ZoomInRoundedIcon from '@material-ui/icons/ZoomInRounded';
 import ZoomOutRoundedIcon from '@material-ui/icons/ZoomOutRounded';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import Icon from '@mdi/react';
 
 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';
 import { mdiCursorDefault } from '@mdi/js';
 import { PressureIcon, SlideKeyframe } from '../components/icons';
+import PlaySkipIconAni from '../components/play-skip';
 
 var player = new TimedVideoPlayer();
 var useWorkingTimeline = create(set => ({
@@ -187,9 +188,9 @@ function TimelineEditor(props: { player: TimedVideoPlayer; }) {
 
 	useEffect(() => {
 		props.player.addEventListener('TimedVideoPlayerSlide', (event: CustomEvent) => {
-			document.querySelectorAll('.keyframes .keyframeWrapper').forEach(el => {
+			document.querySelectorAll('.keyframes .frame').forEach(el => {
 				el.classList.remove('current');
-				if (el.classList.contains(`keyframe-index-${event.detail}`)) {
+				if (event.detail && el.id == 'slide-' + (event.detail as slide).id) {
 					el.classList.add('current');
 				}
 			});
@@ -337,6 +338,10 @@ export default function Index() {
 
 	var frame = useFrame((st: any) => st.currentFrame);
 
+	var [tool, setTool] = useState('cursor');
+
+	var [playing, setPlaying] = useState(false);
+
 	var mouseX = 0;
 	// var mouseY = 0;
 
@@ -400,6 +405,9 @@ export default function Index() {
 						var reader = new FileReader();
 						reader.addEventListener('load', ev => {
 							player.loadVideo(ev.target.result as string);
+
+							player.player.addEventListener('play', () => setPlaying(true));
+							player.player.addEventListener('pause', () => setPlaying(false));
 						});
 						reader.readAsDataURL(file);
 					}}
@@ -462,8 +470,9 @@ export default function Index() {
 						<Fab
 							className='playPause'
 							size='medium'
-							children={<PauseRoundedIcon />}
 							onClick={() => player.next()}
+							children={<PlaySkipIconAni />}
+							style={{ '--ani-state': playing ? 'skip' : 'play' } as CSSProperties}
 						/>
 						<Fab size='small' children={<NavigateBeforeRoundedIcon />} onClick={() => player.previous()} />
 						<Fab size='small' children={<NavigateNextRoundedIcon />} />
@@ -478,22 +487,27 @@ export default function Index() {
 					<span className='framerate numbers posabs l0 t0'>@{player.framerate}fps</span>
 					<h2 className='timecode numbers posabs r0 t0'>{player.frameToTimestampString(frame, false)}</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>
+				<ToggleButtonGroup
+					color='primary'
+					aria-label='outlined primary button group'
+					value={tool}
+					exclusive
+					onChange={(_event: any, newTool: string | null) => {
+						if (newTool === null) return;
+						setTool(newTool);
+					}}
+				>
+					<ToggleButton value='cursor' children={<Icon path={mdiCursorDefault} size={1} />} />
+					<ToggleButton value='default' children={<SlideKeyframe type='default' />} />
+					<ToggleButton value='delay' children={<SlideKeyframe type='delay' />} />
+					<ToggleButton value='speedChange' children={<SlideKeyframe type='speedChange' />} />
+					<ToggleButton value='loop'>
 						<div className='loopStartEnd'>
-							<span className='posabs start'>
-								<SlideKeyframe type='loop' />
-							</span>
-							<span className='posabs end'>
-								<SlideKeyframe type='loop' loopEnd />
-							</span>
+							<span className='posabs start' children={<SlideKeyframe type='loop' />} />
+							<span className='posabs end' children={<SlideKeyframe type='loop' loopEnd />} />
 						</div>
-					</Button>
-				</ButtonGroup>
+					</ToggleButton>
+				</ToggleButtonGroup>
 				<div className='zoom'>
 					<ZoomOutRoundedIcon />
 					<div className='spacing'>
diff --git a/pages/present.tsx b/pages/present.tsx
index 9769577..2ad8f72 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -89,7 +89,7 @@ export class TimedVideoPlayer {
 			case 'delay': {
 				this.player.playbackRate = 0;
 				this.slide++;
-				var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide });
+				var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.timeline.slides[this.slide] });
 				this.dispatchEvent(event);
 				setTimeout(() => {
 					this.player.playbackRate = this.getPlaybackSpeed(this.slide - 1);
@@ -98,7 +98,7 @@ export class TimedVideoPlayer {
 			}
 			case 'speedChange': {
 				this.slide++;
-				var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide });
+				var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.timeline.slides[this.slide] });
 				this.dispatchEvent(event);
 				this.player.playbackRate = this.framerate / (slide as speedChangeSlide).newFramerate;
 				break;
@@ -189,10 +189,10 @@ export class TimedVideoPlayer {
 		if (!this.registeredEventListeners) return;
 
 		this.slide++;
-		var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide });
-		this.dispatchEvent(event);
 
 		var slide = this.timeline.slides[this.slide];
+		var event = new CustomEvent('TimedVideoPlayerSlide', { detail: slide });
+		this.dispatchEvent(event);
 
 		if (!this.player.paused && this.frame < slide?.frame) {
 			this.skip();
@@ -206,12 +206,12 @@ export class TimedVideoPlayer {
 
 		this.slide = Math.max(this.slide - 1, -1);
 
-		var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide });
-		this.dispatchEvent(event);
-
 		var slide = this.timeline.slides[this.slide];
 		if (!slide) return;
 
+		var event = new CustomEvent('TimedVideoPlayerSlide', { detail: slide });
+		this.dispatchEvent(event);
+
 		this.jumpToSlide(slide);
 	}
 }