use CustomEvent instead of janky TimedVideoPlayer.onframe method

2 files changed, 13 insertions, 6 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 81a0c66..cb68601 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -63,10 +63,9 @@ function TimelineEditor(props: {
 		var canvas = document.getElementById('timeScaleCanvas') as HTMLCanvasElement;
 		var ctx = canvas.getContext('2d');
 
-		function onframe(frame: number) {
-			setFrame(frame);
-		}
-		props.player.onframe = onframe;
+		props.player.addEventListener('TimedVideoPlayerOnFrame', (event: CustomEvent) => {
+			setFrame(event.detail);
+		});
 
 		var css = (varname: string) => getComputedStyle(document.body).getPropertyValue(varname).trim();
 		var baseColor = css('--c100');
diff --git a/pages/present.tsx b/pages/present.tsx
index 085a99c..7c618a2 100644
--- a/pages/present.tsx
+++ b/pages/present.tsx
@@ -22,7 +22,6 @@ export class TimedVideoPlayer {
 	registeredEventListeners: boolean;
 	frame: number;
 	framerate: number;
-	onframe?: (frame: number) => void;
 
 	constructor() {
 		this.slide = -1;
@@ -103,6 +102,14 @@ export class TimedVideoPlayer {
 		}
 	}
 
+	addEventListener(name: string, callback: (...args: any[]) => void) {
+		return document.addEventListener(name, callback, false);
+	}
+
+	dispatchEvent(event: CustomEvent) {
+		return document.dispatchEvent(event);
+	}
+
 	registerEventListeners() {
 		if (
 			!this.video
@@ -119,7 +126,8 @@ export class TimedVideoPlayer {
 			var lastFrame = this.frame;
 			this.frame = this.timestampToFrame(this.player.currentTime);
 
-			if (this.frame != lastFrame && this.onframe) this.onframe(this.frame);
+			var event = new CustomEvent('TimedVideoPlayerOnFrame', { detail: this.frame });
+			this.dispatchEvent(event);
 
 			var slide = this.timeline.slides[this.slide];
 			if (!slide) return;