aboutsummaryrefslogtreecommitdiff
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
parent9604fdf8302a1510840470004dc315b63a7522ea (diff)
timeline divisions finished
-rw-r--r--package.json3
-rw-r--r--pages/editor.tsx50
-rw-r--r--styles/colors.css1
-rw-r--r--yarn.lock5
4 files changed, 51 insertions, 8 deletions
diff --git a/package.json b/package.json
index ef0ae8e..b215add 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"timecode-boss": "^4.2.3",
- "ts-json-schema-generator": "^0.92.0"
+ "ts-json-schema-generator": "^0.92.0",
+ "zustand": "^3.5.1"
},
"devDependencies": {
"typescript": "^4.2.4"
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}>
diff --git a/styles/colors.css b/styles/colors.css
index 7051835..d8d0c8a 100644
--- a/styles/colors.css
+++ b/styles/colors.css
@@ -10,6 +10,7 @@
--c700: #707BA6;
--c400: #2D344F;
--c300: #171D33;
+ --c250: #0C1123;
--c200: #07071C;
--c100: #01010D;
diff --git a/yarn.lock b/yarn.lock
index 825fae7..c2171ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2281,3 +2281,8 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^3.5.1:
+ version "3.5.1"
+ resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.5.1.tgz#28970280e830924b185ce064061231957398c1d0"
+ integrity sha512-7J56Ve814z4zap71iaKFD+t65LFI//jEq/Vf55BTSVqJZCm+w9rov8OMBg+YSwIPQk54bfoIWHTrOWuAbpEDMw==