From c4923c2a1f37c735f869ea91cd375bfd67ffd02c Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Thu, 20 May 2021 11:40:24 +0200
Subject: use CustomEvent instead of janky TimedVideoPlayer.onframe method

---
 pages/editor.tsx  |  7 +++----
 pages/present.tsx | 12 ++++++++++--
 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;
-- 
cgit v1.2.3