From 5e07224b4bf5010b96f745441b6ee4c213d3fb81 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 24 May 2021 11:26:11 +0200 Subject: dragging keyframe affects timeline :tada: --- components/icons.tsx | 5 ++--- pages/editor.tsx | 57 ++++++++++++++++++++++++++++++++++++++++++---------- pages/present.tsx | 6 +++++- timeline.schema.json | 57 +++++++++++++++++++++++++++------------------------- timeline.ts | 7 ++++--- 5 files changed, 87 insertions(+), 45 deletions(-) diff --git a/components/icons.tsx b/components/icons.tsx index 50bf8f0..f8d6668 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -1,5 +1,4 @@ -import { Ref } from 'react'; -import { keyframeTypes } from '../timeline'; +import { slideTypes } from '../timeline'; export function PressureIcon() { return @@ -117,7 +116,7 @@ export function PressureIcon() { } export function SlideKeyframe(props: { - type: keyframeTypes; + type: slideTypes; loopEnd?: boolean; }) { return ({ + timeline: [], + setTimeline: (newTimeline: anySlide[]) => set(() => ({ timeline: newTimeline })), +})); var getTimelineZoom = create(set => ({ zoom: 0.687077725615, @@ -50,8 +54,17 @@ var useFrame = create(set => ({ })); function TimelineKeyframe(props: { - slide: slide | delaySlide | loopSlide | speedChangeSlide; + slide: slide; }) { + var workingTimeline = useWorkingTimeline((st: any) => st.timeline); + var setWorkingTimeline = useWorkingTimeline((st: any) => st.setTimeline); + + function modifySlide(newProps: Partial) { + var slide = workingTimeline.find((s: anySlide) => s.id == props.slide.id); + slide = Object.assign(slide, newProps); + setWorkingTimeline(workingTimeline); + } + var dragRef = useRef(null); var loopStartRef = useRef(null); var loopEndRef = useRef(null); @@ -83,8 +96,13 @@ function TimelineKeyframe(props: { endOffset = endFrame - grabFrameOffset; } api.start({ begin: frame + startOffset, frame: frame + endOffset }); + + modifySlide({ frame: frame + endOffset }); + modifySlide({ beginFrame: frame + startOffset }); } else { api.start({ frame }); + + modifySlide({ frame }); } }, { domTarget: dragRef, eventOptions: { passive: false } }); @@ -92,20 +110,35 @@ function TimelineKeyframe(props: { // loop start useDrag(({ xy: [x, _y] }) => { var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1); + api.start({ begin: frame }); + + modifySlide({ beginFrame: frame }); }, { domTarget: loopStartRef, eventOptions: { passive: false } }); // loop end useDrag(({ xy: [x, _y] }) => { var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, timelineZoom)) - 1); + api.start({ frame }); + + modifySlide({ frame }); }, { domTarget: loopEndRef, eventOptions: { passive: false } }); } + var mouseUpListener = useRef(null); + + useDrag(({ last }) => { + if (!last) return; + player.timeline.slides = Array(...workingTimeline); + player.timeline.slides.sort((a: anySlide, b: anySlide) => a.frame - b.frame); + }, { domTarget: mouseUpListener, eventOptions: { passive: false } }); + return
{props.slide.type == 'loop' @@ -128,14 +161,14 @@ function TimelineKeyframe(props: { ; } -function TimelineEditor(props: { - player: TimedVideoPlayer; -}) { +function TimelineEditor(props: { player: TimedVideoPlayer; }) { var timelineZoom = getTimelineZoom((st: any) => st.zoom); var timelineLabels = useTimelineLabels((st: any) => st.labels); var setTimelineLabels = useTimelineLabels((st: any) => st.setLabels); + var workingTimeline = useWorkingTimeline((st: any) => st.timeline); + // var frame = useFrame((st: any) => st.currentFrame); var setFrame = useFrame((st: any) => st.setFrame); @@ -281,7 +314,7 @@ function TimelineEditor(props: {
)} + children={workingTimeline.map((slide: anySlide) => )} />
; @@ -290,7 +323,8 @@ function TimelineEditor(props: { export default function Index() { var [dummy, setDummy] = useState(false); var rerender = () => setDummy(!dummy); - var [player, _setPlayer] = useState(new TimedVideoPlayer()); + + var setWorkingTimeline = useWorkingTimeline((st: any) => st.setTimeline); var timelineZoom = getTimelineZoom((st: any) => st.zoom); var setTimelineZoom = getTimelineZoom((st: any) => st.setZoom); @@ -375,6 +409,7 @@ export default function Index() { var reader = new FileReader(); reader.addEventListener('load', ev => { player.loadSlides(ev.target.result as string); + setWorkingTimeline(player.timeline.slides); rerender(); }); reader.readAsText(file); diff --git a/pages/present.tsx b/pages/present.tsx index f5955fc..9769577 100644 --- a/pages/present.tsx +++ b/pages/present.tsx @@ -58,6 +58,9 @@ export class TimedVideoPlayer { jumpToFrame(frame: number) { this.player.currentTime = this.frameToTimestamp(frame); this.frame = frame; + + var event = new CustomEvent('TimedVideoPlayerOnFrame', { detail: this.frame }); + this.dispatchEvent(event); } jumpToSlide(slide: slide) { @@ -128,7 +131,6 @@ export class TimedVideoPlayer { setInterval(() => { if (this.player.paused) return; - var lastFrame = this.frame; this.frame = this.timestampToFrame(this.player.currentTime); var event = new CustomEvent('TimedVideoPlayerOnFrame', { detail: this.frame }); @@ -169,6 +171,7 @@ export class TimedVideoPlayer { this.framerate = this.timeline.framerate; this.timeline.slides[-1] = { + id: '00000000-0000-0000-0000-000000000000', frame: 0, type: 'default', clickThroughBehaviour: 'ImmediatelySkip', @@ -202,6 +205,7 @@ export class TimedVideoPlayer { if (!this.registeredEventListeners) return; this.slide = Math.max(this.slide - 1, -1); + var event = new CustomEvent('TimedVideoPlayerSlide', { detail: this.slide }); this.dispatchEvent(event); diff --git a/timeline.schema.json b/timeline.schema.json index 2d8c6ff..75c5265 100644 --- a/timeline.schema.json +++ b/timeline.schema.json @@ -2,6 +2,22 @@ "$ref": "#/definitions/timeline", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { + "anySlide": { + "anyOf": [ + { + "$ref": "#/definitions/slide" + }, + { + "$ref": "#/definitions/delaySlide" + }, + { + "$ref": "#/definitions/speedChangeSlide" + }, + { + "$ref": "#/definitions/loopSlide" + } + ] + }, "delaySlide": { "additionalProperties": false, "properties": { @@ -22,7 +38,7 @@ "type": "string" }, "type": { - "$ref": "#/definitions/keyframeTypes" + "$ref": "#/definitions/slideTypes" } }, "required": [ @@ -34,15 +50,6 @@ ], "type": "object" }, - "keyframeTypes": { - "enum": [ - "default", - "delay", - "speedChange", - "loop" - ], - "type": "string" - }, "loopSlide": { "additionalProperties": false, "properties": { @@ -70,7 +77,7 @@ "type": "string" }, "type": { - "$ref": "#/definitions/keyframeTypes" + "$ref": "#/definitions/slideTypes" } }, "required": [ @@ -113,7 +120,7 @@ "type": "string" }, "type": { - "$ref": "#/definitions/keyframeTypes" + "$ref": "#/definitions/slideTypes" } }, "required": [ @@ -124,6 +131,15 @@ ], "type": "object" }, + "slideTypes": { + "enum": [ + "default", + "delay", + "speedChange", + "loop" + ], + "type": "string" + }, "speedChangeSlide": { "additionalProperties": false, "properties": { @@ -144,7 +160,7 @@ "type": "number" }, "type": { - "$ref": "#/definitions/keyframeTypes" + "$ref": "#/definitions/slideTypes" } }, "required": [ @@ -173,20 +189,7 @@ }, "slides": { "items": { - "anyOf": [ - { - "$ref": "#/definitions/slide" - }, - { - "$ref": "#/definitions/delaySlide" - }, - { - "$ref": "#/definitions/speedChangeSlide" - }, - { - "$ref": "#/definitions/loopSlide" - } - ] + "$ref": "#/definitions/anySlide" }, "type": "array" } diff --git a/timeline.ts b/timeline.ts index 764bc7a..5d0f51c 100644 --- a/timeline.ts +++ b/timeline.ts @@ -1,9 +1,10 @@ -export type keyframeTypes = 'default' | 'delay' | 'speedChange' | 'loop'; +export type slideTypes = 'default' | 'delay' | 'speedChange' | 'loop'; +export type anySlide = slide | delaySlide | speedChangeSlide | loopSlide; export interface slide { frame: number; clickThroughBehaviour: 'ImmediatelySkip' | 'PlayOut'; - type: keyframeTypes; + type: slideTypes; id: string; } @@ -25,7 +26,7 @@ export interface presentationSettings { } export default interface timeline { - slides: Array; + slides: Array; framecount: number; framerate: number; name: string; -- cgit v1.2.3