aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-05-17 10:12:35 +0200
committerlonkaars <loek@pipeframe.xyz>2021-05-17 10:12:35 +0200
commitaf58b27c92fea7594f4ec2b2948f48ec333bb0c2 (patch)
tree28c4f13393063dcd2052fcfebfbda11499d42569 /pages
parent9604fdf8302a1510840470004dc315b63a7522ea (diff)
timeline divisions finished
Diffstat (limited to 'pages')
-rw-r--r--pages/editor.tsx50
1 files changed, 43 insertions, 7 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 36a4c66..085b508 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,4 +1,5 @@
import { CSSProperties, useEffect, useState } from 'react';
+import create from 'zustand';
import { loopSlide } from '../timeline';
import { TimedVideoPlayer } from './present';
@@ -22,6 +23,12 @@ import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded';
import { mdiCursorDefault } from '@mdi/js';
+var getTimelineZoom = create(set => ({
+ zoom: 0.2,
+ changeZoom: (delta: number) => set((st: any) => ({ zoom: Math.min(1, Math.max(0, st.zoom + delta)) })),
+ setZoom: (newValue: number) => set(() => ({ zoom: newValue })),
+}));
+
function TimelineEditor(props: {
player: TimedVideoPlayer;
}) {
@@ -49,8 +56,9 @@ function TimelineEditor(props: {
});
var css = (varname: string) => getComputedStyle(document.body).getPropertyValue(varname).trim();
- var textColor = css('--c100');
- var lineColor = css('--c300');
+ var baseColor = css('--c100');
+ var frameColor = css('--c250');
+ var markerFrame = css('--c400');
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -62,12 +70,29 @@ function TimelineEditor(props: {
getComputedStyle(document.querySelector('.timeline')).getPropertyValue('--zoom').trim(),
);
var a = 1;
- var ns = [300, 150, 120, 90, 60, 30, 30, 30, 15, 15, 15, 15, 15];
+ var ns = [300, 150, 120, 90, 60, 30, 30, 30, 20, 20, 20, 20, 20];
var everyN = ns[Math.floor(frameWidth)];
for (var x = -offset; x < canvas.width + offset; x += frameWidth) {
- ctx.fillStyle = d ? textColor : lineColor;
- if (a % everyN == 0) ctx.fillStyle = '#ff00ff';
- ctx.fillRect(x, 0, frameWidth, canvas.height);
+ ctx.fillStyle = baseColor;
+
+ var rect = [Math.round(x + (frameWidth - 2) / 2), 28, 2, canvas.height];
+ var drawFrame = false;
+ if (frameWidth >= 3) {
+ ctx.fillStyle = d ? baseColor : frameColor;
+ rect = [x, 28, frameWidth, canvas.height];
+ drawFrame = !d;
+ }
+ /* if (a * 2 % everyN == 0) { */
+ /* ctx.fillStyle = frameColor; */
+ /* drawFrame = true; */
+ /* } */
+ if (a % everyN == 0) {
+ ctx.fillStyle = markerFrame;
+ drawFrame = true;
+ }
+
+ if (drawFrame) ctx.fillRect(rect[0], rect[1], rect[2], rect[3]);
+
d = !d;
a++;
}
@@ -113,13 +138,24 @@ export default function Index() {
var rerender = () => setDummy(!dummy);
var [player, setPlayer] = useState(new TimedVideoPlayer());
- var [timelineZoom, setTimelineZoom] = useState(0.2);
+ var timelineZoom = getTimelineZoom((st: any) => st.zoom);
+ var setTimelineZoom = getTimelineZoom((st: any) => st.setZoom);
useEffect(() => {
var videoEL = document.getElementById('player') as HTMLVideoElement;
player.registerPlayer(videoEL);
}, []);
+ var changeZoom = getTimelineZoom(st => (st as any).changeZoom);
+ useEffect(() => {
+ document.querySelector('.timeline').addEventListener('wheel', (e: WheelEvent) => {
+ if (!e.ctrlKey && !e.altKey) return;
+ e.preventDefault();
+
+ changeZoom(-e.deltaY / 1000);
+ }, { passive: false });
+ }, []);
+
return <>
<div className='appGrid posabs a0'>
<AppBar position='static' color='transparent' elevation={0}>