From 4a8e7a8f2f6e76741ff973cb8bd2984d773c8922 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Fri, 25 Jun 2021 13:22:45 +0200 Subject: change `project` global state to `global` --- pages/editor.tsx | 128 +++++++++++++++++++++++++++---------------------------- 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/pages/editor.tsx b/pages/editor.tsx index 40aeefc..2da1b3e 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -48,7 +48,7 @@ var slideAPIs: { [key: string]: any; }[] = []; var player = new TimedVideoPlayer(); -interface project { +interface globalState { timeline: { playing: boolean; frame: number; @@ -79,7 +79,7 @@ interface project { }; } -var project = createState({ +var global = createState({ timeline: { playing: false, frame: 0, @@ -107,7 +107,7 @@ var project = createState({ }, update: { refreshLiveTimeline: () => { - player.timeline.slides = Array(...(project.timeline.workingTimeline.value)); + player.timeline.slides = Array(...(global.timeline.workingTimeline.value)); player.timeline.slides = player.timeline.slides.filter(slide => slide != null); player.timeline.slides.sort((a, b) => a.frame - b.frame); player.timeline.slides[-1] = { // TODO: dry @@ -148,7 +148,7 @@ function TimelineKeyframe(props: { slide: anySlide; }) { function modifySlide(newProps: Partial) { - var slide = project.timeline.workingTimeline.find(s => s.value.id == props.slide.id); + var slide = global.timeline.workingTimeline.find(s => s.value.id == props.slide.id); slide.set(Object.assign({}, slide.value, newProps)); } @@ -178,7 +178,7 @@ function TimelineKeyframe(props: { delete keyframeInAnimations[props.slide.id]; }, []); - var timelineZoom = useHookstate(project).timeline.zoom; + var timelineZoom = useHookstate(global).timeline.zoom; // drag keyframe var [startOffset, setStartOffset] = useState(0); @@ -232,7 +232,7 @@ function TimelineKeyframe(props: { var mouseUpListener = useRef(null); useDrag(({ last }) => { if (!last) return; - project.update.refreshLiveTimeline.value(); + global.update.refreshLiveTimeline.value(); }, { domTarget: mouseUpListener, eventOptions: { passive: false } }); return ; } function TimelineSelection(props: { selectionAreaRef: Ref; }) { - var workingTimeline = useHookstate(project).timeline.workingTimeline; - var tool = useHookstate(project).timeline.tool; + var workingTimeline = useHookstate(global).timeline.workingTimeline; + var tool = useHookstate(global).timeline.tool; - var selection = useHookstate(project).selection; + var selection = useHookstate(global).selection; var [selectionPos, selectionPosAPI] = useSpring(() => ({ x1: 0, @@ -292,10 +292,10 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { var selectionRef = useRef(null); // drag on selection useDrag(({ movement: [x, _y], last }) => { - if (!project.selection.placed.value) return; - if (project.selection.slides.value.length < 1) return; - var frameOffset = Math.round(x / zoomToPx(project.timeline.zoom.value)); - project.selection.slides.forEach(slide => { + if (!global.selection.placed.value) return; + if (global.selection.slides.value.length < 1) return; + var frameOffset = Math.round(x / zoomToPx(global.timeline.zoom.value)); + global.selection.slides.forEach(slide => { var api = slideAPIs[slide.value.id]; switch (slide.value.type as slideTypes | 'loopBegin') { case 'loopBegin': { @@ -305,9 +305,9 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { api.start({ begin }); if (last) { - (project.timeline.workingTimeline.find(s => s.value.id == slide.value.id) as State) + (global.timeline.workingTimeline.find(s => s.value.id == slide.value.id) as State) .beginFrame.set(begin); - project.update.refreshLiveTimeline.value(); + global.update.refreshLiveTimeline.value(); } break; @@ -319,12 +319,12 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { if (last) { workingTimeline.find(s => s.value.id == slide.value.id).frame.set(frame); - project.update.refreshLiveTimeline.value(); + global.update.refreshLiveTimeline.value(); } } } if (last) return; - var selectionFrame = project.selection.slides[0].frame.value; + var selectionFrame = global.selection.slides[0].frame.value; selectionPosAPI.start({ startingFrame: selectionFrame + frameOffset }); }); }, { domTarget: selectionRef, eventOptions: { passive: false } }); @@ -334,16 +334,16 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { var minDistance = 5; // minimal drag distance in pixels to register selection var distanceTraveled = Math.sqrt(ox ** 2 + oy ** 2); - if (project.selection.hidden.value && distanceTraveled > minDistance) project.selection.hidden.set(false); - if (project.selection.type.left.value) project.selection.type.left.set(null); - if (project.selection.type.right.value) project.selection.type.right.set(null); - if (project.selection.placed.value) project.selection.placed.set(false); + if (global.selection.hidden.value && distanceTraveled > minDistance) global.selection.hidden.set(false); + if (global.selection.type.left.value) global.selection.type.left.set(null); + if (global.selection.type.right.value) global.selection.type.right.set(null); + if (global.selection.placed.value) global.selection.placed.set(false); selectionPosAPI.start({ center: 0, startOffset: 0, widthOffset: 0, }); - project.selection.slides.set([]); + global.selection.slides.set([]); var timelineInner = document.querySelector('.timeline .timelineInner'); var timelineRects = timelineInner.getBoundingClientRect(); @@ -360,11 +360,11 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { var x2 = x1 + Math.abs(sx); var y2 = y1 + Math.abs(sy); - var zoom = zoomToPx(project.timeline.zoom.value); + var zoom = zoomToPx(global.timeline.zoom.value); var frameWidth = Math.abs(sx) / zoom; var startingFrame = x1 / zoom; - selectionPosAPI[first && project.selection.hidden ? 'set' : 'start']({ + selectionPosAPI[first && global.selection.hidden ? 'set' : 'start']({ x1, y1, x2, @@ -372,10 +372,10 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { startingFrame, frameWidth, }); - if (!project.selection.active.value) project.selection.active.set(true); + if (!global.selection.active.value) global.selection.active.set(true); if (last) { - project.selection.active.set(false); - if (distanceTraveled <= minDistance) project.selection.hidden.set(true); + global.selection.active.set(false); + if (distanceTraveled <= minDistance) global.selection.hidden.set(true); else { var endingFrame = startingFrame + frameWidth; var expandedTimeline = new Array(...player.timeline.slides); @@ -393,11 +393,11 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { ); if (keyframesInSelection.length < 1) { - project.selection.hidden.set(true); + global.selection.hidden.set(true); return; } - project.selection.slides.set(keyframesInSelection); + global.selection.slides.set(keyframesInSelection); var left = keyframesInSelection[0]; var right = keyframesInSelection[keyframesInSelection.length - 1]; @@ -425,7 +425,7 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { widthOffset, }); }, 100); - project.selection.merge({ + global.selection.merge({ type: { left: left.type, right: right.type, @@ -437,15 +437,15 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { }, { domTarget: props.selectionAreaRef, eventOptions: { passive: false } }); useMousetrap(['del', 'backspace'], () => { - if (!project.selection.placed) return; + if (!global.selection.placed) return; - var selection = project.selection.slides.attach(Downgraded).value + var selection = global.selection.slides.attach(Downgraded).value .map(s => ({ id: s.id.toString(), type: s.type.toString() })) .filter(s => slideTypes.includes(s.type)); - selection.forEach(slide => project.timeline.workingTimeline.find(s => s.value?.id == slide.id).set(none)); - project.update.refreshLiveTimeline.value(); + selection.forEach(slide => global.timeline.workingTimeline.find(s => s.value?.id == slide.id).set(none)); + global.update.refreshLiveTimeline.value(); - project.selection.merge({ + global.selection.merge({ placed: false, hidden: true, slides: [], @@ -498,13 +498,13 @@ function TimelineSelection(props: { selectionAreaRef: Ref; }) { } function TimelineEditor() { - var timelineZoom = useHookstate(project).timeline.zoom; - var workingTimeline = useHookstate(project).timeline.workingTimeline; - var tool = useHookstate(project).timeline.tool; + var timelineZoom = useHookstate(global).timeline.zoom; + var workingTimeline = useHookstate(global).timeline.workingTimeline; + var tool = useHookstate(global).timeline.tool; var mouseX = 0; - var ready = useHookstate(project).ready; + var ready = useHookstate(global).ready; var timelineRef = useRef(null); var selectionAreaRef = useRef(null); @@ -513,7 +513,7 @@ function TimelineEditor() { if (!e.ctrlKey && !e.altKey) return; e.preventDefault(); - var newZoom = Math.min(1, Math.max(0, project.timeline.zoom.value + (-e.deltaY / 1000))); + var newZoom = Math.min(1, Math.max(0, global.timeline.zoom.value + (-e.deltaY / 1000))); zoomAroundPoint(newZoom, mouseX); }); }, []); @@ -528,7 +528,7 @@ function TimelineEditor() { useEffect(() => { player.addEventListener('TimedVideoPlayerOnFrame', (event: CustomEvent) => { - project.timeline.frame.set(event.detail); + global.timeline.frame.set(event.detail); scrubberSpring.start({ frame: event.detail }); }); }, []); @@ -561,7 +561,7 @@ function TimelineEditor() { var offset = document.querySelector('.timeline .timelineInner').scrollLeft; - var frameWidth = zoomToPx(project.timeline.zoom.value); + var frameWidth = zoomToPx(global.timeline.zoom.value); var d = true; var a = 0; @@ -606,7 +606,7 @@ function TimelineEditor() { a++; } - project.timeline.labels.set(labels); + global.timeline.labels.set(labels); requestAnimationFrame(draw); } @@ -630,13 +630,13 @@ function TimelineEditor() { }), ); useDrag(({ xy: [x, _y] }) => { - var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, project.timeline.zoom.value)) - 1); + var frame = Math.max(0, Math.round(getFrameAtOffset(x - 240, global.timeline.zoom.value)) - 1); scrubberSpring.start({ frame }); if (player.player) { var time = player.frameToTimestamp(frame + 1); if (isFinite(time)) player.player.currentTime = time; } - project.timeline.frame.set(frame); + global.timeline.frame.set(frame); }, { domTarget: scrubberDragRef, eventOptions: { passive: false } }); // slide placement ghost @@ -666,14 +666,14 @@ function TimelineEditor() { // place new keyframe / place keyframe var offset = -4; // keyframe offset var x = event.clientX - 240 + offset; - var frame = getFrameAtOffset(x, project.timeline.zoom.value) - 0.5; + var frame = getFrameAtOffset(x, global.timeline.zoom.value) - 0.5; var slide = new toolToSlide[tool.value](Math.round(frame)); - project.timeline.workingTimeline[project.timeline.workingTimeline.value.length].set(slide); + global.timeline.workingTimeline[global.timeline.workingTimeline.value.length].set(slide); keyframeInAnimations[slide.id] = { x: frame, y: event.clientY - window.innerHeight + 210, }; - project.update.refreshLiveTimeline.value(); + global.update.refreshLiveTimeline.value(); }} /> @@ -812,15 +812,15 @@ function DefaultSettings() { var reader = new FileReader(); reader.addEventListener('load', ev => { player.loadVideo(ev.target.result as string); - project.ready.video.available.set(true); + global.ready.video.available.set(true); player.player.addEventListener( 'canplaythrough', - () => project.ready.video.playable.set(true), + () => global.ready.video.playable.set(true), ); - player.player.addEventListener('play', () => project.timeline.playing.set(true)); - player.player.addEventListener('pause', () => project.timeline.playing.set(false)); + player.player.addEventListener('play', () => global.timeline.playing.set(true)); + player.player.addEventListener('pause', () => global.timeline.playing.set(false)); }); reader.readAsDataURL(file); }} @@ -843,9 +843,9 @@ function DefaultSettings() { var reader = new FileReader(); reader.addEventListener('load', ev => { player.loadSlides(ev.target.result as string); - project.timeline.workingTimeline.set(player.timeline.slides); - project.update.refreshLiveTimeline.value(); - project.ready.timeline.set(true); + global.timeline.workingTimeline.set(player.timeline.slides); + global.update.refreshLiveTimeline.value(); + global.ready.timeline.set(true); }); reader.readAsText(file); }} @@ -881,18 +881,18 @@ function DefaultSettings() { function zoomAroundPoint(newZoom: number, pivot: number) { var timeline = document.querySelector('.timeline .timelineInner'); - var frame = getFrameAtOffset(pivot, project.timeline.zoom.value); + var frame = getFrameAtOffset(pivot, global.timeline.zoom.value); var newOffset = (frame * zoomToPx(newZoom)) - pivot; timeline.scrollLeft = newOffset; - project.timeline.zoom.set(newZoom); + global.timeline.zoom.set(newZoom); } function Tools() { - var frame = useHookstate(project).timeline.frame; - var tool = useHookstate(project).timeline.tool; - var timelineZoom = useHookstate(project).timeline.zoom; - var ready = useHookstate(project).ready; + var frame = useHookstate(global).timeline.frame; + var tool = useHookstate(global).timeline.tool; + var timelineZoom = useHookstate(global).timeline.zoom; + var ready = useHookstate(global).ready; return
@@ -944,7 +944,7 @@ function Tools() { } export default function Index() { - var playing = useHookstate(project).timeline.playing; + var playing = useHookstate(global).timeline.playing; var playerRef = useRef(null); useEffect(() => { @@ -957,7 +957,7 @@ export default function Index() { document.addEventListener('gesturechange', preventDefault); }, []); - var ready = useHookstate(project).ready; + var ready = useHookstate(global).ready; return <>
-- cgit v1.2.3