From c3c9e0769cba967d78234c66d86d7a48e1d10de2 Mon Sep 17 00:00:00 2001
From: sergiotarxz <sergiotarxz@posteo.net>
Date: Wed, 15 Mar 2023 03:10:17 +0100
Subject: [PATCH] Fixing memory leak.

---
 templates/static/index.html.ep | 48 ++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/templates/static/index.html.ep b/templates/static/index.html.ep
index 6a409db..775f494 100644
--- a/templates/static/index.html.ep
+++ b/templates/static/index.html.ep
@@ -27,7 +27,7 @@
                 <label for="rom">
                     Rom file 
                     <input type="file" id="rom" name="rom"/>
-                </label
+                </label>
                 <label for="savestate">
                     Savestate (A ss file from mgba...)
                     <input type="file" id="savestate" name="savestate"/>
@@ -48,6 +48,7 @@
             const PACKET_ID_HELLO = 0n;
             // Send is sent from server, so it is get here but whatever, it is the bad naming of the protocol.
             const PACKET_ID_SEND_FRAME = 1n;
+            let printing_frame = false;
             let is_little_endian = true;
                 (()=>{
                     let buf = new ArrayBuffer(4);
@@ -101,26 +102,33 @@
                             console.log('Opened websocket.');
                             sendHello(websocket, rom_array, savestate_array); 
                         };
-                        websocket.addEventListener('message', (e) => {
-                            const buffer = e.data;
-                            let packet_u8 = new Uint8Array(buffer);
-                            const id = byteArrayToU64BigEndian(packet_u8.slice(0, 8));
-                            packet_u8 = packet_u8.slice(8, packet_u8.length);
-                            const size = byteArrayToU64BigEndian(packet_u8.slice(0, 8));
-                            const raw_data = packet_u8.slice(8, packet_u8.length);
-                            switch (id) {
-                                case PACKET_ID_SEND_FRAME:
-                                    handleSendFrame(raw_data);
-                                    break;
-                                default:
-                                    console.log(`Received unknown packet ${id}`);
-                            }
-                        });
+                        websocket.addEventListener('message', onWebSocketPacket);
                     });
                 });
             });
 
+            function onWebSocketPacket(event) {
+                const buffer = event.data;
+                let packet_u8 = new Uint8Array(buffer);
+                const id = byteArrayToU64BigEndian(packet_u8.slice(0, 8));
+                packet_u8 = packet_u8.slice(8, packet_u8.length);
+                const size = byteArrayToU64BigEndian(packet_u8.slice(0, 8));
+                const raw_data = packet_u8.slice(8, packet_u8.length);
+                packet_u8 = null;
+                switch (id) {
+                    case PACKET_ID_SEND_FRAME:
+                        handleSendFrame(raw_data);
+                        break;
+                    default:
+                        console.log(`Received unknown packet ${id}`);
+                }
+            }
+
             function handleSendFrame(raw_data) {
+                if (printing_frame) {
+                    return;
+                }
+                printing_frame = true;
                 let data = raw_data;
                 const stride = byteArrayToU32BigEndian(data.slice(0, 4));
                 data = data.slice(4, data.length);
@@ -136,7 +144,13 @@
                     }
                     img_data_u8[i] = data[i];
                 }
-                ctx.putImageData(img_data, 0, 0);
+                data = null;
+                createImageBitmap(img_data).then(drawBitmap);
+            }
+
+            function drawBitmap(bitmap) {
+                ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+                printing_frame = false;
             }
 
             function byteArrayToU32BigEndian(input_array) {