aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/_app.tsx1
-rw-r--r--pages/editor.tsx52
-rw-r--r--pages/present.tsx14
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);
}
}