From 0240af66cd693a3af496e5fe7ab9e759b3792ddb Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Thu, 30 Mar 2023 10:44:37 +0900
Subject: [PATCH] Fix the video renderer.

---
 player/fingerprint.sha256            |  1 -
 player/src/transport/.gitignore      |  1 +
 player/src/transport/fingerprint.hex |  1 -
 player/src/transport/index.ts        |  4 ++-
 player/src/video/renderer.ts         | 37 +++++++++++++++++++++++-----
 server/main.go                       |  2 --
 6 files changed, 35 insertions(+), 11 deletions(-)
 delete mode 100644 player/fingerprint.sha256
 create mode 100644 player/src/transport/.gitignore
 delete mode 100644 player/src/transport/fingerprint.hex

diff --git a/player/fingerprint.sha256 b/player/fingerprint.sha256
deleted file mode 100644
index 3545bf9..0000000
--- a/player/fingerprint.sha256
+++ /dev/null
@@ -1 +0,0 @@
-50e151a79d06af6b9289180af319ca974e227d9ec58c30362c9304e56df3e3ea
diff --git a/player/src/transport/.gitignore b/player/src/transport/.gitignore
new file mode 100644
index 0000000..628e634
--- /dev/null
+++ b/player/src/transport/.gitignore
@@ -0,0 +1 @@
+fingerprint.hex
diff --git a/player/src/transport/fingerprint.hex b/player/src/transport/fingerprint.hex
deleted file mode 100644
index 8e821ec..0000000
--- a/player/src/transport/fingerprint.hex
+++ /dev/null
@@ -1 +0,0 @@
-642ab03bc58c48ed614e6523d93c2455d8223aedfbdcba7f502ca0ea08590921
diff --git a/player/src/transport/index.ts b/player/src/transport/index.ts
index 6c45ac9..677ac0d 100644
--- a/player/src/transport/index.ts
+++ b/player/src/transport/index.ts
@@ -3,6 +3,8 @@ import * as Stream from "../stream"
 import * as MP4 from "../mp4"
 
 import Video from "../video/index"
+
+// @ts-ignore bundler embeds data
 import fingerprint from 'bundle-text:./fingerprint.hex';
 
 ///<reference path="./types/webtransport.d.ts"/>
@@ -46,7 +48,7 @@ export class Player {
 	async connect(url: string): Promise<WebTransport> {
 		// Convert the hex to binary.
 		let hash = [];
-		for (let c = 0; c < fingerprint.length; c += 2) {
+		for (let c = 0; c < fingerprint.length-1; c += 2) {
 			hash.push(parseInt(fingerprint.substring(c, c+2), 16));
 		}
 
diff --git a/player/src/video/renderer.ts b/player/src/video/renderer.ts
index 95c5cd0..98170ab 100644
--- a/player/src/video/renderer.ts
+++ b/player/src/video/renderer.ts
@@ -7,11 +7,14 @@ export class Renderer {
     sync: DOMHighResTimeStamp; // the wall clock value for timestamp 0
     last?: number; // the timestamp of the last rendered frame
 
+    maxDuration: number; // the maximum duration allowed in the buffer
+
     constructor(config: Message.Config) {
         this.canvas = config.canvas;
         this.queue = [];
         this.render = 0;
         this.sync = 0;
+        this.maxDuration = 10 * 1000
     }
 
     push(frame: VideoFrame) {
@@ -27,14 +30,36 @@ export class Renderer {
         }
 
         // Insert the frame into the queue sorted by timestamp.
-        // TODO loop backwards for better performance
-        let index = this.queue.findIndex(other => {
-            return frame.timestamp < other.timestamp;
-        })
+        let low = 0
+        let high = this.queue.length;
 
-        // Insert into the queue.
-        this.queue.splice(index, 0, frame)
+        // Fast path because we normally append to the end.
+        if (this.queue.length > 0 && this.queue[this.queue.length].timestamp <= frame.timestamp) {
+            this.queue.push(frame)
+        } else {
+            // Do a full binary search
+            while (low < high) {
+                var mid = (low + high) >>> 1;
+                if (this.queue[mid].timestamp < frame.timestamp) low = mid + 1;
+                else high = mid;
+            }
 
+            this.queue.splice(low, 0, frame)
+        }
+
+        // Trim the max size of the buffer
+        const last = this.queue[this.queue.length-1].timestamp
+        while (1) {
+            const first = this.queue[0]
+            if (first.timestamp + this.maxDuration >= last) {
+                break
+            }
+
+            first.close()
+            this.queue.shift()
+        }
+
+        // Queue up to render the next frame.
         if (!this.render) {
             this.render = self.requestAnimationFrame(this.draw.bind(this))
         }
diff --git a/server/main.go b/server/main.go
index 9689c89..a0b5f9b 100644
--- a/server/main.go
+++ b/server/main.go
@@ -56,8 +56,6 @@ func run(ctx context.Context) (err error) {
 	hash := sha256.Sum256(tlsCert.Certificate[0])
 	fingerprint := hex.EncodeToString(hash[:])
 
-	fmt.Println(fingerprint)
-
 	webConfig := web.Config{
 		Addr:        *addr,
 		CertFile:    *cert,