From 7469afab31ebfdd2d447c351d615b7c1d8e42c2e Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 24 May 2021 15:23:04 +0200 Subject: tool selection and play/skip animation --- pages/_app.tsx | 1 + pages/editor.tsx | 52 +++++++++++++++++++++++++++++++++------------------- pages/present.tsx | 14 +++++++------- 3 files changed, 41 insertions(+), 26 deletions(-) (limited to 'pages') 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() { } onClick={() => player.next()} + children={} + style={{ '--ani-state': playing ? 'skip' : 'play' } as CSSProperties} /> } onClick={() => player.previous()} /> } /> @@ -478,22 +487,27 @@ export default function Index() { @{player.framerate}fps

{player.frameToTimestampString(frame, false)}

- - - + +
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); } } -- cgit v1.2.3