keyframes are now classes :tada:

2 files changed, 29 insertions, 20 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index c2406a5..b6d7ca0 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,9 +1,8 @@
 import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useDrag } from 'react-use-gesture';
-import { v4 as uuid } from 'uuid';
 import create from 'zustand';
-import { anySlide, loopSlide, slide, slideTypes } from '../timeline';
+import { anySlide, loopSlide, slide, slideTypes, toolToSlide } from '../timeline';
 import { TimedVideoPlayer } from './present';
 
 import AppBar from '@material-ui/core/AppBar';
@@ -324,13 +323,8 @@ function TimelineEditor(props: {
 				// place new keyframe
 				var x = event.clientX - 240;
 				var frame = Math.round(getFrameAtOffset(x, timelineZoom));
-				var id = uuid();
-				workingTimeline.push({
-					frame,
-					id,
-					type: props.selectedTool as slideTypes,
-					clickThroughBehaviour: 'ImmediatelySkip',
-				});
+				var slide = new toolToSlide[props.selectedTool](frame);
+				workingTimeline.push(slide);
 				setWorkingTimeline(workingTimeline);
 			}}
 		/>
diff --git a/timeline.ts b/timeline.ts
index 5d0f51c..b39d55d 100644
--- a/timeline.ts
+++ b/timeline.ts
@@ -1,26 +1,41 @@
+import { v4 as uuid } from 'uuid';
+
 export type slideTypes = 'default' | 'delay' | 'speedChange' | 'loop';
 export type anySlide = slide | delaySlide | speedChangeSlide | loopSlide;
 
-export interface slide {
-	frame: number;
-	clickThroughBehaviour: 'ImmediatelySkip' | 'PlayOut';
-	type: slideTypes;
+export class slide {
+	clickThroughBehaviour: 'ImmediatelySkip' | 'PlayOut' = 'ImmediatelySkip';
+	type: slideTypes = 'default';
 	id: string;
+
+	constructor(public frame: number) {
+		this.id = uuid();
+	}
 }
 
-export interface delaySlide extends slide {
-	delay: number;
+export class delaySlide extends slide {
+	type = 'delay' as slideTypes;
+	delay: number = 1;
 }
 
-export interface speedChangeSlide extends slide {
-	newFramerate: number;
+export class speedChangeSlide extends slide {
+	type = 'speedChange' as slideTypes;
+	newFramerate: number = 60;
 }
 
-export interface loopSlide extends slide {
-	beginFrame: number;
-	playbackType: 'PingPong' | 'Normal';
+export class loopSlide extends slide {
+	type = 'loop' as slideTypes;
+	beginFrame: number = this.frame - 30;
+	playbackType: 'PingPong' | 'Normal' = 'Normal';
 }
 
+export var toolToSlide = {
+	default: slide,
+	delay: delaySlide,
+	speedChange: speedChangeSlide,
+	loop: loopSlide,
+};
+
 export interface presentationSettings {
 	controlType: 'FullScreen';
 }