From 91dd79057585cf42dc8c640e350ea0c26b458554 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Wed, 21 Jan 2026 15:35:27 -0500
Subject: [PATCH 01/14] just some comments on main.js

---
 app.py            |  2 +-
 static/js/main.js | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app.py b/app.py
index 2de18f3..0f3828e 100644
--- a/app.py
+++ b/app.py
@@ -384,4 +384,4 @@ def handle_screen_frame(data):
     emit("screen_frame", data, room='viewer')
 
 if __name__ == '__main__':
-    socketio.run(app, host='0.0.0.0', port=5000, debug=True)
\ No newline at end of file
+    socketio.run(app, host='0.0.0.0', port=5000, debug=False)
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index b52d946..2b635ff 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1822,15 +1822,15 @@ async function startScreenShare() {
         // We don't do the above check for Safari, because 'browser' screensharing
         // (i.e. tab screensharing) is not possible on Safari.
 
-        screenStream = stream;
-        isScreenSharing = true;
+        screenStream = stream;  // assign the global "state" variable <screenStream>
+        isScreenSharing = true; // assign the global "state" variable <isScreenSharing>
         
         // Update button appearance
         screenShareBtn.el.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';
         
         // Create a hidden video element to capture the stream
         const video = document.createElement('video');
-        video.style.display = 'none';
+        video.style.display = 'none';  // -> not displayed. invisible.
         video.srcObject = stream;
         video.play();
         
@@ -1840,6 +1840,9 @@ async function startScreenShare() {
         const cropCanvas = document.createElement('canvas');
         const cropCtx = cropCanvas.getContext('2d');
         
+        // the <video> var captures the whole tab/window/monitor (whatever wass selected)
+        // the <cropCanvas> will hold the, well, just the slide
+
         // Get the canvas container dimensions
         const pdfContainer = document.getElementById('pdf-canvas');
         
@@ -1850,7 +1853,8 @@ async function startScreenShare() {
         const captureFrame = (currentTime) => {
             if (!isScreenSharing) return;
             
-            // Throttle frame rate
+            // Throttle frame rate: 
+            // if (not enough time has passed) {exit}
             if (currentTime - lastFrameTime < frameInterval) {
                 requestAnimationFrame(captureFrame);
                 return;

From 888ad1ab9a4af4a5a186abadd5de2b86aa8c04b6 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Wed, 21 Jan 2026 20:33:46 -0500
Subject: [PATCH 02/14] switch-presentation-container icon

---
 static/css/viewer-panel.css | 31 +++++++++++++++++++++++++++++++
 static/js/viewer.js         | 12 ++++++++++++
 viewer.html                 | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+)
 create mode 100644 static/css/viewer-panel.css
 create mode 100644 static/js/viewer.js

diff --git a/static/css/viewer-panel.css b/static/css/viewer-panel.css
new file mode 100644
index 0000000..b11098e
--- /dev/null
+++ b/static/css/viewer-panel.css
@@ -0,0 +1,31 @@
+#viewer-panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background: #ccc;
+    color: white;
+    gap: 10px;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: 200;
+    border-bottom: 2px solid #666;
+}
+
+.viewer-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 0 1 auto;
+}
+
+.viewer-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+    margin-left: auto;
+}
\ No newline at end of file
diff --git a/static/js/viewer.js b/static/js/viewer.js
new file mode 100644
index 0000000..9529228
--- /dev/null
+++ b/static/js/viewer.js
@@ -0,0 +1,12 @@
+import { Button } from "./button.js";
+
+window.addEventListener("DOMContentLoaded", () => {
+
+const switchContainer = document.getElementById("switch-container");
+
+const switchBtn = new Button(switchContainer, {
+    label: '<i class="fa-solid fa-display"></i>',
+    className: 'btn'
+});
+
+});
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index 1769732..f00d895 100644
--- a/viewer.html
+++ b/viewer.html
@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8">
   <title>Beamer+ Viewer</title>
+  <link rel="stylesheet" href="static/css/viewer-panel.css">
+  <link rel="stylesheet" href="static/css/button.css">
   
   <!-- Beamer+ Font -->
   <style>
@@ -111,6 +113,35 @@
 </head>
 <body>
   <span id="stream-info"></span>
+
+  <!-- <div id="control-panel">
+    <div class="controls-left">
+      <div id="display-controls"></div>
+      <input type="file" id="upload-zip" accept=".zip" style="display: none;">
+      <input type="file" id="upload-folder" webkitdirectory directory multiple style="display: none;">
+      <div id="screen-share-container"></div>
+      <div id="record-container"></div>
+      <div id="nav-container"></div>
+    </div>
+
+    <div class="controls-right">
+      <div id="tool-container"></div>
+      <div id="color-picker"></div>
+      <div id="brush-controls"></div>
+      <div id="other-controls"></div>
+      <div id="timer-container"></div>
+    </div>
+  </div> -->
+
+  <div id="viewer-panel">
+    <div class="viewer-left">
+      <div id="switch-container"></div>
+    </div>
+    <div class="viewer-right">
+      <!-- note: there's nothing in viewer-right rn. -->
+    </div>
+    
+  </div>
   
   <div id="viewer-container">
     <div id="waiting-message">
@@ -121,6 +152,10 @@
     <img id="screen-display" alt="Presentation Screen">
   </div>
 
+  <div id="switch-presentation-container">
+    <h1>YO HOLLA</h1>
+  </div>
+
   <script>
     const socket = io();
     const screenDisplay = document.getElementById('screen-display');
@@ -210,5 +245,6 @@
       // Image styling will handle scaling automatically
     });
   </script>
+  <script type="module" src="/static/js/viewer.js"></script>
 </body>
 </html>

From d0c19ae6d6fe7ce0362881f4cd60d69f5da7e49b Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Wed, 21 Jan 2026 21:18:58 -0500
Subject: [PATCH 03/14] the viewer can now toggle on and off the screenshare

---
 static/css/viewer-panel.css |   1 +
 static/css/viewer.css       |   3 +
 static/js/viewer.js         |  38 ++-
 viewer.html                 | 524 ++++++++++++++++++++----------------
 4 files changed, 330 insertions(+), 236 deletions(-)
 create mode 100644 static/css/viewer.css

diff --git a/static/css/viewer-panel.css b/static/css/viewer-panel.css
index b11098e..9f5cb2c 100644
--- a/static/css/viewer-panel.css
+++ b/static/css/viewer-panel.css
@@ -9,6 +9,7 @@
     box-sizing: border-box;
     flex-wrap: wrap;
     position: relative;
+    position: relative;
     z-index: 200;
     border-bottom: 2px solid #666;
 }
diff --git a/static/css/viewer.css b/static/css/viewer.css
new file mode 100644
index 0000000..7c3658e
--- /dev/null
+++ b/static/css/viewer.css
@@ -0,0 +1,3 @@
+.hidden {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 9529228..67ba457 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -1,12 +1,38 @@
-import { Button } from "./button.js";
+
 
 window.addEventListener("DOMContentLoaded", () => {
 
-const switchContainer = document.getElementById("switch-container");
+    // // when this is true, you show the viewer-controlled presentation.
+    // // when this is false, you show the screen-shared presentation.
+    // // important: if isScreenSharing == false then switchToPresentation must be false.
+    // let switchToPresentation = false;
+    // const viewerContainer = document.getElementById('viewer-container');
+    // const switchPresentationContainer = document.getElementById('switch-presentation-container');
+    // const performSwitch = () => {
+    //   console.log(`screensharing: HAHA ${isScreenSharing}`);
+    //   if (!isScreenSharing) {
+    //     return; // do nothing if it's not screensharing.
+    //   }
+
+    //   if (switchToPresentation) {
+    //     switchPresentationContainer.classList.remove('hidden');
+    //     viewerContainer.classList.add('hidden');
+    //   } else {
+    //     switchPresentationContainer.classList.add('hidden');
+    //     viewerContainer.classList.remove('hidden');
+    //   }
+    // }
+
+    // const switchContainer = document.getElementById("switch-container");
 
-const switchBtn = new Button(switchContainer, {
-    label: '<i class="fa-solid fa-display"></i>',
-    className: 'btn'
-});
+    // const switchBtn = new Button(switchContainer, {
+    //     label: '<i class="fa-solid fa-display"></i>',
+    //     className: 'btn',
+    //     onClick: () => {
+    //         switchToPresentation = !switchToPresentation;
+    //         performSwitch();
+    //         console.log(`Performed switch. Currently switchToPresentation: ${switchToPresentation}`);
+    //     }
+    // });
 
 });
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index f00d895..c544e3b 100644
--- a/viewer.html
+++ b/viewer.html
@@ -1,120 +1,136 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Beamer+ Viewer</title>
-  <link rel="stylesheet" href="static/css/viewer-panel.css">
-  <link rel="stylesheet" href="static/css/button.css">
-  
-  <!-- Beamer+ Font -->
-  <style>
-    @font-face {
-      font-family: "Computer Modern Sans";
-      src: url("https://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf");
-      font-display: swap;
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    html, body {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      background: #fcfcfc;
-      font-family: "Computer Modern Sans", sans-serif;
-    }
-
-    /* Viewer container */
-    #viewer-container {
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      background: #fcfcfc;
-      padding: 0;
-    }
-
-    #screen-display {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      display: none;
-    }
-
-    /* Waiting message */
-    #waiting-message {
-      text-align: center;
-      color: #666;
-    }
-
-    #waiting-message h2 {
-      font-size: 28px;
-      margin-bottom: 20px;
-      margin-top: 20px;
-      font-weight: 700;
-      color: #333;
-    }
-
-    #waiting-message p {
-      font-size: 16px;
-      color: #666;
-    }
-
-    /* Scribble animation matching Beamer+ modal style */
-    .viewer-squiggle {
-      width: 120px;
-      height: 40px;
-      display: block;
-      margin: 0 auto;
-    }
-
-    .viewer-squiggle path {
-      fill: none;
-      stroke: #666;
-      stroke-width: 3;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      stroke-dasharray: 150;
-      stroke-dashoffset: 150;
-      animation: draw-squiggle 1.6s ease-in-out infinite;
-    }
-
-    @keyframes draw-squiggle {
-      0% { stroke-dashoffset: 150; opacity: 0.6; }
-      40% { stroke-dashoffset: 0; opacity: 1; }
-      100% { stroke-dashoffset: -150; opacity: 0.6; }
-    }
-
-    /* FPS counter in corner */
-    #stream-info {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #333;
-      background: #eee;
-      padding: 6px 12px;
-      border-radius: 4px;
-      border: 1px solid #999;
-      opacity: 0.9;
-      display: none;
-    }
-  </style>
-  
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
-</head>
-<body>
-  <span id="stream-info"></span>
-
-  <!-- <div id="control-panel">
+    <head>
+        <meta charset="utf-8" />
+        <title>Beamer+ Viewer</title>
+        <link rel="stylesheet" href="static/css/viewer-panel.css" />
+        <link rel="stylesheet" href="static/css/button.css" />
+        <link rel="stylesheet" href="static/css/viewer.css" />
+
+        <!-- Beamer+ Font -->
+        <style>
+            @font-face {
+                font-family: "Computer Modern Sans";
+                src: url("https://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf");
+                font-display: swap;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                background: #fcfcfc;
+                font-family: "Computer Modern Sans", sans-serif;
+            }
+
+            /* Viewer container */
+            #viewer-container {
+                width: 100vw;
+                height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                inset: 0;
+                z-index: 1;
+                background: #fcfcfc;
+                padding: 0;
+            }
+
+            #screen-display {
+                width: 100%;
+                height: 100%;
+                object-fit: contain;
+                display: none;
+            }
+
+            /* Waiting message */
+            #waiting-message {
+                text-align: center;
+                color: #666;
+            }
+
+            #waiting-message h2 {
+                font-size: 28px;
+                margin-bottom: 20px;
+                margin-top: 20px;
+                font-weight: 700;
+                color: #333;
+            }
+
+            #waiting-message p {
+                font-size: 16px;
+                color: #666;
+            }
+
+            /* Scribble animation matching Beamer+ modal style */
+            .viewer-squiggle {
+                width: 120px;
+                height: 40px;
+                display: block;
+                margin: 0 auto;
+            }
+
+            .viewer-squiggle path {
+                fill: none;
+                stroke: #666;
+                stroke-width: 3;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+                stroke-dasharray: 150;
+                stroke-dashoffset: 150;
+                animation: draw-squiggle 1.6s ease-in-out infinite;
+            }
+
+            @keyframes draw-squiggle {
+                0% {
+                    stroke-dashoffset: 150;
+                    opacity: 0.6;
+                }
+                40% {
+                    stroke-dashoffset: 0;
+                    opacity: 1;
+                }
+                100% {
+                    stroke-dashoffset: -150;
+                    opacity: 0.6;
+                }
+            }
+
+            /* FPS counter in corner */
+            #stream-info {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                font-size: 14px;
+                font-weight: 600;
+                color: #333;
+                background: #eee;
+                padding: 6px 12px;
+                border-radius: 4px;
+                border: 1px solid #999;
+                opacity: 0.9;
+                display: none;
+            }
+        </style>
+
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+        />
+        <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+    </head>
+    <body>
+        <span id="stream-info"></span>
+
+        <!-- <div id="control-panel">
     <div class="controls-left">
       <div id="display-controls"></div>
       <input type="file" id="upload-zip" accept=".zip" style="display: none;">
@@ -133,118 +149,166 @@
     </div>
   </div> -->
 
-  <div id="viewer-panel">
-    <div class="viewer-left">
-      <div id="switch-container"></div>
-    </div>
-    <div class="viewer-right">
-      <!-- note: there's nothing in viewer-right rn. -->
-    </div>
-    
-  </div>
-  
-  <div id="viewer-container">
-    <div id="waiting-message">
-      <svg class="viewer-squiggle" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
-        <path d="M 5,20 Q 15,5 25,20 T 45,20 Q 55,5 65,20 T 85,20 Q 95,5 105,20 T 115,20" />
-      </svg>
-    </div>
-    <img id="screen-display" alt="Presentation Screen">
-  </div>
-
-  <div id="switch-presentation-container">
-    <h1>YO HOLLA</h1>
-  </div>
-
-  <script>
-    const socket = io();
-    const screenDisplay = document.getElementById('screen-display');
-    const waitingMessage = document.getElementById('waiting-message');
-    const streamInfo = document.getElementById('stream-info');
-
-    let isScreenSharing = false;
-    let frameCount = 0;
-    let lastUpdateTime = Date.now();
-
-    // Join viewer room
-    socket.emit('join_viewer');
-
-    // Connection status
-    socket.on('connect', () => {
-      console.log('Connected to server');
-    });
-
-    socket.on('disconnect', () => {
-      console.log('Disconnected from server');
-      screenDisplay.style.display = 'none';
-      waitingMessage.style.display = 'block';
-      streamInfo.style.display = 'none';
-    });
-
-    socket.on('joined', (data) => {
-      console.log('Joined room:', data.room);
-    });
-
-    // Screen capture event (from html2canvas)
-    socket.on('screen_capture', (data) => {
-      if (data.image) {
-        // Show screen, hide waiting message
-        if (!isScreenSharing) {
-          isScreenSharing = true;
-          waitingMessage.style.display = 'none';
-          screenDisplay.style.display = 'block';
-          streamInfo.style.display = 'block';
-        }
-
-        // Update the image
-        screenDisplay.src = data.image;
-
-        // Update FPS counter
-        frameCount++;
-        const currentTime = Date.now();
-        const elapsed = currentTime - lastUpdateTime;
-        
-        if (elapsed >= 1000) {
-          const fps = Math.round((frameCount / elapsed) * 1000);
-          streamInfo.textContent = `${fps} FPS`;
-          frameCount = 0;
-          lastUpdateTime = currentTime;
-        }
-      }
-    });
-
-    // Fallback to legacy screen sharing events if needed
-    socket.on('screen_share_start', () => {
-      console.log('Screen sharing started (legacy)');
-      isScreenSharing = true;
-      waitingMessage.style.display = 'none';
-      screenDisplay.style.display = 'block';
-    });
-
-    socket.on('screen_share_stop', () => {
-      console.log('Screen sharing stopped (legacy)');
-      isScreenSharing = false;
-      screenDisplay.style.display = 'none';
-      waitingMessage.style.display = 'block';
-      streamInfo.style.display = 'none';
-    });
-
-    socket.on('screen_frame', (data) => {
-      if (data.frame) {
-        if (!isScreenSharing) {
-          isScreenSharing = true;
-          waitingMessage.style.display = 'none';
-          screenDisplay.style.display = 'block';
-        }
-        screenDisplay.src = data.frame;
-      }
-    });
-
-    // Handle window resize
-    window.addEventListener('resize', () => {
-      // Image styling will handle scaling automatically
-    });
-  </script>
-  <script type="module" src="/static/js/viewer.js"></script>
-</body>
+        <div id="viewer-panel">
+            <div class="viewer-left">
+                <div id="switch-container"></div>
+            </div>
+            <div class="viewer-right">
+                <!-- note: there's nothing in viewer-right rn. -->
+            </div>
+        </div>
+
+        <div id="viewer-container">
+            <div id="waiting-message">
+                <svg
+                    class="viewer-squiggle"
+                    viewBox="0 0 120 40"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M 5,20 Q 15,5 25,20 T 45,20 Q 55,5 65,20 T 85,20 Q 95,5 105,20 T 115,20"
+                    />
+                </svg>
+            </div>
+            <img id="screen-display" alt="Presentation Screen" />
+        </div>
+
+        <div id="switch-presentation-container" class="hidden">
+            <h1>YO HOLLA</h1>
+        </div>
+
+        <script type="module">
+            import { Button } from "./static/js/button.js";
+
+            const socket = io();
+            const screenDisplay = document.getElementById("screen-display");
+            const waitingMessage = document.getElementById("waiting-message");
+            const streamInfo = document.getElementById("stream-info");
+            let isScreenSharing = false;
+            let frameCount = 0;
+            let lastUpdateTime = Date.now();
+
+            // Join viewer room
+            socket.emit("join_viewer");
+
+            // Connection status
+            socket.on("connect", () => {
+                console.log("Connected to server");
+            });
+
+            socket.on("disconnect", () => {
+                console.log("Disconnected from server");
+                screenDisplay.style.display = "none";
+                waitingMessage.style.display = "block";
+                streamInfo.style.display = "none";
+            });
+
+            socket.on("joined", (data) => {
+                console.log("Joined room:", data.room);
+            });
+
+            // Screen capture event (from html2canvas)
+            socket.on("screen_capture", (data) => {
+                if (data.image) {
+                    // Show screen, hide waiting message
+                    if (!isScreenSharing) {
+                        isScreenSharing = true;
+                        waitingMessage.style.display = "none";
+                        screenDisplay.style.display = "block";
+                        streamInfo.style.display = "block";
+                    }
+
+                    // Update the image
+                    screenDisplay.src = data.image;
+
+                    // Update FPS counter
+                    frameCount++;
+                    const currentTime = Date.now();
+                    const elapsed = currentTime - lastUpdateTime;
+
+                    if (elapsed >= 1000) {
+                        const fps = Math.round((frameCount / elapsed) * 1000);
+                        streamInfo.textContent = `${fps} FPS`;
+                        frameCount = 0;
+                        lastUpdateTime = currentTime;
+                    }
+                }
+            });
+
+            // Fallback to legacy screen sharing events if needed
+            socket.on("screen_share_start", () => {
+                console.log("Screen sharing started (legacy)");
+                isScreenSharing = true;
+                waitingMessage.style.display = "none";
+                screenDisplay.style.display = "block";
+                console.log(
+                    `MATE MATE ${isScreenSharing} ${switchToPresentation}`,
+                );
+            });
+
+            socket.on("screen_share_stop", () => {
+                console.log("Screen sharing stopped (legacy)");
+                isScreenSharing = false;
+                screenDisplay.style.display = "none";
+                waitingMessage.style.display = "block";
+                streamInfo.style.display = "none";
+            });
+
+            socket.on("screen_frame", (data) => {
+                if (data.frame) {
+                    if (!isScreenSharing) {
+                        isScreenSharing = true;
+                        waitingMessage.style.display = "none";
+                        screenDisplay.style.display = "block";
+                    }
+                    screenDisplay.src = data.frame;
+                }
+            });
+
+            // Handle window resize
+            window.addEventListener("resize", () => {
+                // Image styling will handle scaling automatically
+            });
+
+            // when this is true, you show the viewer-controlled presentation.
+            // when this is false, you show the screen-shared presentation.
+            // important: if isScreenSharing == false then switchToPresentation must be false.
+            let switchToPresentation = false;
+            const viewerContainer = document.getElementById("viewer-container");
+            const switchPresentationContainer = document.getElementById(
+                "switch-presentation-container",
+            );
+            const performSwitch = () => {
+                console.log(`screensharing: HAHA ${isScreenSharing}`);
+                // if (!isScreenSharing) {
+                //   return; // do nothing if it's not screensharing.
+                // }
+
+                if (switchToPresentation) {
+                    switchPresentationContainer.classList.remove("hidden");
+                    viewerContainer.classList.add("hidden");
+                } else {
+                    switchPresentationContainer.classList.add("hidden");
+                    viewerContainer.classList.remove("hidden");
+                }
+            };
+
+            const switchContainer = document.getElementById("switch-container");
+
+            const switchBtn = new Button(switchContainer, {
+                label: '<i class="fa-solid fa-display"></i>',
+                className: "btn",
+            });
+            console.log("BUTTON: ", switchContainer.innerHTML);
+
+            switchBtn.onClick(() => {
+                switchToPresentation = !switchToPresentation;
+                performSwitch();
+                console.log(
+                    `Performed switch. Currently switchToPresentation: ${switchToPresentation}`,
+                );
+            });
+        </script>
+        <!-- <script type="module" src="/static/js/viewer.js"></script> -->
+    </body>
 </html>

From 7b7ff2beed1a42722951cc3d99e93df1469145dc Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Wed, 21 Jan 2026 21:23:12 -0500
Subject: [PATCH 04/14] reorganized css for viewer

---
 static/css/viewer-panel.css | 32 --------------------------------
 static/css/viewer.css       | 33 +++++++++++++++++++++++++++++++++
 viewer.html                 | 25 -------------------------
 3 files changed, 33 insertions(+), 57 deletions(-)
 delete mode 100644 static/css/viewer-panel.css

diff --git a/static/css/viewer-panel.css b/static/css/viewer-panel.css
deleted file mode 100644
index 9f5cb2c..0000000
--- a/static/css/viewer-panel.css
+++ /dev/null
@@ -1,32 +0,0 @@
-#viewer-panel {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    background: #ccc;
-    color: white;
-    gap: 10px;
-    box-sizing: border-box;
-    flex-wrap: wrap;
-    position: relative;
-    position: relative;
-    z-index: 200;
-    border-bottom: 2px solid #666;
-}
-
-.viewer-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    flex: 0 1 auto;
-}
-
-.viewer-right {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    flex: 0 0 auto;
-    margin-left: auto;
-}
\ No newline at end of file
diff --git a/static/css/viewer.css b/static/css/viewer.css
index 7c3658e..91b71f2 100644
--- a/static/css/viewer.css
+++ b/static/css/viewer.css
@@ -1,3 +1,36 @@
+#viewer-panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background: #ccc;
+    color: white;
+    gap: 10px;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    position: relative;
+    position: relative;
+    z-index: 200;
+    border-bottom: 2px solid #666;
+}
+
+.viewer-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 0 1 auto;
+}
+
+.viewer-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
 .hidden {
     display: none !important;
 }
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index c544e3b..4399990 100644
--- a/viewer.html
+++ b/viewer.html
@@ -3,7 +3,6 @@
     <head>
         <meta charset="utf-8" />
         <title>Beamer+ Viewer</title>
-        <link rel="stylesheet" href="static/css/viewer-panel.css" />
         <link rel="stylesheet" href="static/css/button.css" />
         <link rel="stylesheet" href="static/css/viewer.css" />
 
@@ -130,25 +129,6 @@
     <body>
         <span id="stream-info"></span>
 
-        <!-- <div id="control-panel">
-    <div class="controls-left">
-      <div id="display-controls"></div>
-      <input type="file" id="upload-zip" accept=".zip" style="display: none;">
-      <input type="file" id="upload-folder" webkitdirectory directory multiple style="display: none;">
-      <div id="screen-share-container"></div>
-      <div id="record-container"></div>
-      <div id="nav-container"></div>
-    </div>
-
-    <div class="controls-right">
-      <div id="tool-container"></div>
-      <div id="color-picker"></div>
-      <div id="brush-controls"></div>
-      <div id="other-controls"></div>
-      <div id="timer-container"></div>
-    </div>
-  </div> -->
-
         <div id="viewer-panel">
             <div class="viewer-left">
                 <div id="switch-container"></div>
@@ -241,9 +221,6 @@ <h1>YO HOLLA</h1>
                 isScreenSharing = true;
                 waitingMessage.style.display = "none";
                 screenDisplay.style.display = "block";
-                console.log(
-                    `MATE MATE ${isScreenSharing} ${switchToPresentation}`,
-                );
             });
 
             socket.on("screen_share_stop", () => {
@@ -299,7 +276,6 @@ <h1>YO HOLLA</h1>
                 label: '<i class="fa-solid fa-display"></i>',
                 className: "btn",
             });
-            console.log("BUTTON: ", switchContainer.innerHTML);
 
             switchBtn.onClick(() => {
                 switchToPresentation = !switchToPresentation;
@@ -309,6 +285,5 @@ <h1>YO HOLLA</h1>
                 );
             });
         </script>
-        <!-- <script type="module" src="/static/js/viewer.js"></script> -->
     </body>
 </html>

From ddc73197368ef5bd44dcfc5af8603a42022035d9 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Wed, 21 Jan 2026 21:29:54 -0500
Subject: [PATCH 05/14] organized viewer.js

---
 static/js/viewer.js | 158 +++++++++++++++++++++++++++++++++++---------
 viewer.html         | 131 +-----------------------------------
 2 files changed, 127 insertions(+), 162 deletions(-)

diff --git a/static/js/viewer.js b/static/js/viewer.js
index 67ba457..8712c18 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -1,38 +1,130 @@
-
+import { Button } from "./button.js";
 
 window.addEventListener("DOMContentLoaded", () => {
 
-    // // when this is true, you show the viewer-controlled presentation.
-    // // when this is false, you show the screen-shared presentation.
-    // // important: if isScreenSharing == false then switchToPresentation must be false.
-    // let switchToPresentation = false;
-    // const viewerContainer = document.getElementById('viewer-container');
-    // const switchPresentationContainer = document.getElementById('switch-presentation-container');
-    // const performSwitch = () => {
-    //   console.log(`screensharing: HAHA ${isScreenSharing}`);
-    //   if (!isScreenSharing) {
-    //     return; // do nothing if it's not screensharing.
-    //   }
-
-    //   if (switchToPresentation) {
-    //     switchPresentationContainer.classList.remove('hidden');
-    //     viewerContainer.classList.add('hidden');
-    //   } else {
-    //     switchPresentationContainer.classList.add('hidden');
-    //     viewerContainer.classList.remove('hidden');
-    //   }
-    // }
-
-    // const switchContainer = document.getElementById("switch-container");
-
-    // const switchBtn = new Button(switchContainer, {
-    //     label: '<i class="fa-solid fa-display"></i>',
-    //     className: 'btn',
-    //     onClick: () => {
-    //         switchToPresentation = !switchToPresentation;
-    //         performSwitch();
-    //         console.log(`Performed switch. Currently switchToPresentation: ${switchToPresentation}`);
-    //     }
-    // });
+const socket = io();
+const screenDisplay = document.getElementById("screen-display");
+const waitingMessage = document.getElementById("waiting-message");
+const streamInfo = document.getElementById("stream-info");
+let isScreenSharing = false;
+let frameCount = 0;
+let lastUpdateTime = Date.now();
+
+// Join viewer room
+socket.emit("join_viewer");
+
+// Connection status
+socket.on("connect", () => {
+    console.log("Connected to server");
+});
+
+socket.on("disconnect", () => {
+    console.log("Disconnected from server");
+    screenDisplay.style.display = "none";
+    waitingMessage.style.display = "block";
+    streamInfo.style.display = "none";
+});
+
+socket.on("joined", (data) => {
+    console.log("Joined room:", data.room);
+});
+
+// Screen capture event (from html2canvas)
+socket.on("screen_capture", (data) => {
+    if (data.image) {
+        // Show screen, hide waiting message
+        if (!isScreenSharing) {
+            isScreenSharing = true;
+            waitingMessage.style.display = "none";
+            screenDisplay.style.display = "block";
+            streamInfo.style.display = "block";
+        }
+
+        // Update the image
+        screenDisplay.src = data.image;
+
+        // Update FPS counter
+        frameCount++;
+        const currentTime = Date.now();
+        const elapsed = currentTime - lastUpdateTime;
+
+        if (elapsed >= 1000) {
+            const fps = Math.round((frameCount / elapsed) * 1000);
+            streamInfo.textContent = `${fps} FPS`;
+            frameCount = 0;
+            lastUpdateTime = currentTime;
+        }
+    }
+});
+
+// Fallback to legacy screen sharing events if needed
+socket.on("screen_share_start", () => {
+    console.log("Screen sharing started (legacy)");
+    isScreenSharing = true;
+    waitingMessage.style.display = "none";
+    screenDisplay.style.display = "block";
+});
+
+socket.on("screen_share_stop", () => {
+    console.log("Screen sharing stopped (legacy)");
+    isScreenSharing = false;
+    screenDisplay.style.display = "none";
+    waitingMessage.style.display = "block";
+    streamInfo.style.display = "none";
+});
+
+socket.on("screen_frame", (data) => {
+    if (data.frame) {
+        if (!isScreenSharing) {
+            isScreenSharing = true;
+            waitingMessage.style.display = "none";
+            screenDisplay.style.display = "block";
+        }
+        screenDisplay.src = data.frame;
+    }
+});
+
+// Handle window resize
+window.addEventListener("resize", () => {
+    // Image styling will handle scaling automatically
+});
+
+// when this is true, you show the viewer-controlled presentation.
+// when this is false, you show the screen-shared presentation.
+// important: if isScreenSharing == false then switchToPresentation must be false.
+let switchToPresentation = false;
+const viewerContainer = document.getElementById("viewer-container");
+const switchPresentationContainer = document.getElementById(
+    "switch-presentation-container",
+);
+const performSwitch = () => {
+    console.log(`screensharing: HAHA ${isScreenSharing}`);
+    if (!isScreenSharing) {
+        return; // do nothing if it's not screensharing.
+    }
+
+    if (switchToPresentation) {
+        switchPresentationContainer.classList.remove("hidden");
+        viewerContainer.classList.add("hidden");
+    } else {
+        switchPresentationContainer.classList.add("hidden");
+        viewerContainer.classList.remove("hidden");
+    }
+};
+
+const switchContainer = document.getElementById("switch-container");
+
+const switchBtn = new Button(switchContainer, {
+    label: '<i class="fa-solid fa-display"></i>',
+    className: "btn",
+});
+
+switchBtn.onClick(() => {
+    switchToPresentation = !switchToPresentation;
+    performSwitch();
+    console.log(
+        `Performed switch. Currently switchToPresentation: ${switchToPresentation}`,
+    );
+});
 
 });
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index 4399990..7f0ae65 100644
--- a/viewer.html
+++ b/viewer.html
@@ -154,136 +154,9 @@
         </div>
 
         <div id="switch-presentation-container" class="hidden">
-            <h1>YO HOLLA</h1>
+            <h1>Viewer's Presentation</h1>
         </div>
 
-        <script type="module">
-            import { Button } from "./static/js/button.js";
-
-            const socket = io();
-            const screenDisplay = document.getElementById("screen-display");
-            const waitingMessage = document.getElementById("waiting-message");
-            const streamInfo = document.getElementById("stream-info");
-            let isScreenSharing = false;
-            let frameCount = 0;
-            let lastUpdateTime = Date.now();
-
-            // Join viewer room
-            socket.emit("join_viewer");
-
-            // Connection status
-            socket.on("connect", () => {
-                console.log("Connected to server");
-            });
-
-            socket.on("disconnect", () => {
-                console.log("Disconnected from server");
-                screenDisplay.style.display = "none";
-                waitingMessage.style.display = "block";
-                streamInfo.style.display = "none";
-            });
-
-            socket.on("joined", (data) => {
-                console.log("Joined room:", data.room);
-            });
-
-            // Screen capture event (from html2canvas)
-            socket.on("screen_capture", (data) => {
-                if (data.image) {
-                    // Show screen, hide waiting message
-                    if (!isScreenSharing) {
-                        isScreenSharing = true;
-                        waitingMessage.style.display = "none";
-                        screenDisplay.style.display = "block";
-                        streamInfo.style.display = "block";
-                    }
-
-                    // Update the image
-                    screenDisplay.src = data.image;
-
-                    // Update FPS counter
-                    frameCount++;
-                    const currentTime = Date.now();
-                    const elapsed = currentTime - lastUpdateTime;
-
-                    if (elapsed >= 1000) {
-                        const fps = Math.round((frameCount / elapsed) * 1000);
-                        streamInfo.textContent = `${fps} FPS`;
-                        frameCount = 0;
-                        lastUpdateTime = currentTime;
-                    }
-                }
-            });
-
-            // Fallback to legacy screen sharing events if needed
-            socket.on("screen_share_start", () => {
-                console.log("Screen sharing started (legacy)");
-                isScreenSharing = true;
-                waitingMessage.style.display = "none";
-                screenDisplay.style.display = "block";
-            });
-
-            socket.on("screen_share_stop", () => {
-                console.log("Screen sharing stopped (legacy)");
-                isScreenSharing = false;
-                screenDisplay.style.display = "none";
-                waitingMessage.style.display = "block";
-                streamInfo.style.display = "none";
-            });
-
-            socket.on("screen_frame", (data) => {
-                if (data.frame) {
-                    if (!isScreenSharing) {
-                        isScreenSharing = true;
-                        waitingMessage.style.display = "none";
-                        screenDisplay.style.display = "block";
-                    }
-                    screenDisplay.src = data.frame;
-                }
-            });
-
-            // Handle window resize
-            window.addEventListener("resize", () => {
-                // Image styling will handle scaling automatically
-            });
-
-            // when this is true, you show the viewer-controlled presentation.
-            // when this is false, you show the screen-shared presentation.
-            // important: if isScreenSharing == false then switchToPresentation must be false.
-            let switchToPresentation = false;
-            const viewerContainer = document.getElementById("viewer-container");
-            const switchPresentationContainer = document.getElementById(
-                "switch-presentation-container",
-            );
-            const performSwitch = () => {
-                console.log(`screensharing: HAHA ${isScreenSharing}`);
-                // if (!isScreenSharing) {
-                //   return; // do nothing if it's not screensharing.
-                // }
-
-                if (switchToPresentation) {
-                    switchPresentationContainer.classList.remove("hidden");
-                    viewerContainer.classList.add("hidden");
-                } else {
-                    switchPresentationContainer.classList.add("hidden");
-                    viewerContainer.classList.remove("hidden");
-                }
-            };
-
-            const switchContainer = document.getElementById("switch-container");
-
-            const switchBtn = new Button(switchContainer, {
-                label: '<i class="fa-solid fa-display"></i>',
-                className: "btn",
-            });
-
-            switchBtn.onClick(() => {
-                switchToPresentation = !switchToPresentation;
-                performSwitch();
-                console.log(
-                    `Performed switch. Currently switchToPresentation: ${switchToPresentation}`,
-                );
-            });
-        </script>
+        <script type="module" src="/static/js/viewer.js"></script>
     </body>
 </html>

From 9c010619b51cde1ae0dae16bace82a747b0246d1 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Thu, 22 Jan 2026 22:35:22 -0500
Subject: [PATCH 06/14] the .zip file is now being sent to (and consoled out
 by) the viewer

---
 app.py              | 14 +++++++++
 static/js/viewer.js | 71 +++++++++++++++++++++++++++++++++++++++++++++
 viewer.html         |  2 ++
 3 files changed, 87 insertions(+)

diff --git a/app.py b/app.py
index 0f3828e..4e96c07 100644
--- a/app.py
+++ b/app.py
@@ -152,6 +152,20 @@ def get_current_presentation():
         return send_file(current_presentation['file'], as_attachment=True, download_name='presentation.zip')
     return jsonify({'error': 'No presentation loaded'}), 404
 
+@app.route('/api/presentation/info')
+def get_presentation_info():
+    if current_presentation['file'] and os.path.exists(current_presentation['file']):
+        return jsonify({
+            'loaded': True,
+            'models': current_presentation.get('available_models', []),
+            'filename': os.path.basename(current_presentation['file'])
+        })
+    
+    return jsonify({
+        'loaded': False
+    })
+
+
 # Model endpoints
 @app.route('/api/models')
 def get_models():
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 8712c18..cf995e1 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -127,4 +127,75 @@ switchBtn.onClick(() => {
     );
 });
 
+async function loadPresentation() {
+    const infoRes = await fetch('/api/presentation/info');
+    const info = await infoRes.json();
+
+    if (!info.loaded) {
+        console.log("No presentation loaded yet.");
+        // show some kind of waiting message maybe
+        return;
+    }
+    console.log("Presentation found:", info);
+    await downloadAndLoadZip();
+}
+
+async function downloadAndLoadZip() {
+    console.log("Downloading presentation...");
+
+    const res = await fetch('/api/presentation/current');
+    const blob = await res.blob();
+
+    console.log("ZIP downloaded:", blob);
+
+    await loadZip(blob);
+}
+
+async function loadZip(blob) {
+    const zip = await JSZip.loadAsync(blob);
+
+    console.log("ZIP contents:", Object.keys(zip.files));
+
+    window.viewerPresentation = zip; // store globally
+
+    // Example: load slides/index.html if it exists
+    if (zip.files["index.html"]) {
+        const html = await zip.files["index.html"].async("string");
+        document.getElementById("viewer-container").innerHTML = html;
+    }
+}
+
+loadPresentation();
+socket.on("presentation_loaded", () => {
+    console.log("New presentation uploaded — reloading...");
+    loadPresentation();
+});
+
+
+// ignore this:
+// // 1. Listen for the signal from the server
+// socket.on("presentation_loaded", async (data) => {
+//     console.log("The server says a new ZIP is ready!");
+
+//     // 2. Go to that Flask URL you pointed out to get the file
+//     // This is like typing the URL into your browser bar automatically
+//     const response = await fetch('/api/presentation/current');
+    
+//     // 3. Convert the response into a 'Blob' (which is just a web-file)
+//     const zipBlob = await response.blob();
+    
+//     // 4. Now the file is in the viewer's memory!
+//     console.log("I have the ZIP file now.", zipBlob);
+
+//     // 5. This is where you decide how to show it.
+//     // Since we are novices, let's start by just putting a message in your container.
+//     switchPresentationContainer.innerHTML = `
+//         <div style="padding: 20px; text-align: center;">
+//             <h2>Presentation Downloaded!</h2>
+//             <p>File size: ${Math.round(zipBlob.size / 1024)} KB</p>
+//             <p>Ready to display in your switch-presentation-container.</p>
+//         </div>
+//     `;
+// });
+
 });
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index 7f0ae65..b6d82f2 100644
--- a/viewer.html
+++ b/viewer.html
@@ -157,6 +157,8 @@
             <h1>Viewer's Presentation</h1>
         </div>
 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
         <script type="module" src="/static/js/viewer.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     </body>
 </html>

From 215683a05813534575554d0a09c2db78c787d586 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Thu, 22 Jan 2026 23:03:13 -0500
Subject: [PATCH 07/14] viewer's own display basic stuff works

---
 index.html          |   3 +-
 static/js/viewer.js | 175 +++++++++++++++++++++++++++++++++++---------
 viewer.html         |  21 ++++++
 3 files changed, 164 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index 6cdfc32..183de55 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,7 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
   <script>
-    pdfjsLib.GlobalWorkerOptions.workerSrc =
-      'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
+    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
   </script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
diff --git a/static/js/viewer.js b/static/js/viewer.js
index cf995e1..f13daf5 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -1,5 +1,12 @@
 import { Button } from "./button.js";
 
+
+let viewerZip = null; // the loaded presentation ZIP
+let viewerCurrentSlide = 0;
+let viewerTotalSlides = 0;
+let viewerAnnotations = {};
+let viewerPDFDoc = null;
+
 window.addEventListener("DOMContentLoaded", () => {
 
 const socket = io();
@@ -10,6 +17,117 @@ let isScreenSharing = false;
 let frameCount = 0;
 let lastUpdateTime = Date.now();
 
+//
+const switchPresentationContainer = document.getElementById(
+    "switch-presentation-container",
+);
+const navControls = document.createElement('div');
+navControls.style.position = 'absolute';
+navControls.style.bottom = '20px';
+navControls.style.left = '50%';
+navControls.style.transform = 'translateX(-50%)';
+navControls.style.display = 'flex';
+navControls.style.gap = '10px';
+navControls.style.zIndex = '100';
+switchPresentationContainer.appendChild(navControls);
+
+const prevBtn = document.createElement('button');
+prevBtn.textContent = '◀ Prev';
+prevBtn.className = 'btn';
+navControls.appendChild(prevBtn);
+
+const nextBtn = document.createElement('button');
+nextBtn.textContent = 'Next ▶';
+nextBtn.className = 'btn';
+navControls.appendChild(nextBtn);
+
+prevBtn.onclick = () => goToViewerSlide(viewerCurrentSlide - 1);
+nextBtn.onclick = () => goToViewerSlide(viewerCurrentSlide + 1);
+//
+async function loadViewerZip(blob) {
+    const zip = await JSZip.loadAsync(blob);
+    viewerZip = zip;
+
+    // Load PDF
+    const pdfFile = zip.files['slides.pdf'];
+    if (!pdfFile) {
+        console.error('No slides.pdf found in ZIP');
+        return;
+    }
+
+    const pdfData = await pdfFile.async('arraybuffer');
+    viewerPDFDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+    viewerTotalSlides = viewerPDFDoc.numPages;
+    viewerCurrentSlide = 0;
+
+    console.log('Loaded PDF with', viewerTotalSlides, 'pages'); // <- debug
+
+    await renderViewerSlide(viewerCurrentSlide);
+}
+//
+async function renderViewerSlide(slideIndex) {
+    if (!viewerPDFDoc || slideIndex < 0 || slideIndex >= viewerTotalSlides) return;
+
+    viewerCurrentSlide = slideIndex;
+
+    let canvas = document.getElementById('viewer-slide-canvas');
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'viewer-slide-canvas';
+        canvas.style.position = 'relative';      // relative positioning
+        canvas.style.display = 'block';          // remove inline block issues
+        canvas.style.margin = '0 auto';          // center horizontally
+        canvas.style.width = 'auto';             // don't stretch width
+        canvas.style.height = 'auto';            // don't stretch height
+        canvas.style.maxWidth = '100%';          // scale down if container is smaller
+        canvas.style.maxHeight = '100%';         // scale down vertically if needed
+        canvas.style.zIndex = '1';               // keep behind nav buttons
+        switchPresentationContainer.appendChild(canvas);
+    }
+
+
+    const ctx = canvas.getContext('2d');
+    const page = await viewerPDFDoc.getPage(slideIndex + 1);
+    const viewport = page.getViewport({ scale: 1.5 });
+
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+
+    await page.render({ canvasContext: ctx, viewport }).promise;
+
+    // Draw annotations if any
+    if (viewerAnnotations[slideIndex]) {
+        const img = new Image();
+        img.src = viewerAnnotations[slideIndex];
+        img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    }
+}
+//
+socket.on('slide_change', async (data) => {
+    if (!viewerZip) return;
+
+    const { slideIndex, annotations } = data;
+    viewerAnnotations[slideIndex] = annotations; // store per-slide annotations
+    await renderViewerSlide(slideIndex);
+});
+//
+document.addEventListener('keydown', (e) => {
+    if (!switchPresentationContainer.classList.contains('hidden')) {
+        if (e.key === 'ArrowLeft') goToViewerSlide(viewerCurrentSlide - 1);
+        if (e.key === 'ArrowRight') goToViewerSlide(viewerCurrentSlide + 1);
+    }
+});
+//
+async function goToViewerSlide(slideIndex) {
+    if (!viewerPDFDoc) return;
+    if (slideIndex < 0) slideIndex = 0;
+    if (slideIndex >= viewerTotalSlides) slideIndex = viewerTotalSlides - 1;
+
+    viewerCurrentSlide = slideIndex;
+    await renderViewerSlide(slideIndex);
+}
+//
+
 // Join viewer room
 socket.emit("join_viewer");
 
@@ -94,24 +212,40 @@ window.addEventListener("resize", () => {
 // important: if isScreenSharing == false then switchToPresentation must be false.
 let switchToPresentation = false;
 const viewerContainer = document.getElementById("viewer-container");
-const switchPresentationContainer = document.getElementById(
-    "switch-presentation-container",
-);
+// now switchPresentationContainer is defined near the start
+// const switchPresentationContainer = document.getElementById(
+//     "switch-presentation-container",
+// );
+// const performSwitch = () => {
+//     console.log(`screensharing: HAHA ${isScreenSharing}`);
+//     if (!isScreenSharing) {
+//         return; // do nothing if it's not screensharing.
+//     }
+
+//     if (switchToPresentation) {
+//         switchPresentationContainer.classList.remove("hidden");
+//         viewerContainer.classList.add("hidden");
+//     } else {
+//         switchPresentationContainer.classList.add("hidden");
+//         viewerContainer.classList.remove("hidden");
+//     }
+// };
 const performSwitch = () => {
-    console.log(`screensharing: HAHA ${isScreenSharing}`);
-    if (!isScreenSharing) {
-        return; // do nothing if it's not screensharing.
-    }
+    if (!isScreenSharing) return;
 
     if (switchToPresentation) {
         switchPresentationContainer.classList.remove("hidden");
         viewerContainer.classList.add("hidden");
+
+        // render current slide
+        if (viewerPDFDoc) renderViewerSlide(viewerCurrentSlide);
     } else {
         switchPresentationContainer.classList.add("hidden");
         viewerContainer.classList.remove("hidden");
     }
 };
 
+
 const switchContainer = document.getElementById("switch-container");
 
 const switchBtn = new Button(switchContainer, {
@@ -149,6 +283,7 @@ async function downloadAndLoadZip() {
     console.log("ZIP downloaded:", blob);
 
     await loadZip(blob);
+    await loadViewerZip(blob);
 }
 
 async function loadZip(blob) {
@@ -172,30 +307,4 @@ socket.on("presentation_loaded", () => {
 });
 
 
-// ignore this:
-// // 1. Listen for the signal from the server
-// socket.on("presentation_loaded", async (data) => {
-//     console.log("The server says a new ZIP is ready!");
-
-//     // 2. Go to that Flask URL you pointed out to get the file
-//     // This is like typing the URL into your browser bar automatically
-//     const response = await fetch('/api/presentation/current');
-    
-//     // 3. Convert the response into a 'Blob' (which is just a web-file)
-//     const zipBlob = await response.blob();
-    
-//     // 4. Now the file is in the viewer's memory!
-//     console.log("I have the ZIP file now.", zipBlob);
-
-//     // 5. This is where you decide how to show it.
-//     // Since we are novices, let's start by just putting a message in your container.
-//     switchPresentationContainer.innerHTML = `
-//         <div style="padding: 20px; text-align: center;">
-//             <h2>Presentation Downloaded!</h2>
-//             <p>File size: ${Math.round(zipBlob.size / 1024)} KB</p>
-//             <p>Ready to display in your switch-presentation-container.</p>
-//         </div>
-//     `;
-// });
-
 });
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index b6d82f2..9289198 100644
--- a/viewer.html
+++ b/viewer.html
@@ -118,6 +118,22 @@
                 opacity: 0.9;
                 display: none;
             }
+
+            #switch-presentation-container {
+            width: 100%;
+            height: 80vh; /* or whatever fits your layout */
+            position: relative;
+            background-color: #f0f0f0; /* optional for debugging */
+            }
+            #viewer-slide-canvas {
+            display: block;
+            }
+            
+            
+
+            
+
+
         </style>
 
         <link
@@ -125,6 +141,10 @@
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
         />
         <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+        <script>pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';</script>
+
+</script>
     </head>
     <body>
         <span id="stream-info"></span>
@@ -157,6 +177,7 @@
             <h1>Viewer's Presentation</h1>
         </div>
 
+        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.16.105/pdf.min.js"></script> -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
         <script type="module" src="/static/js/viewer.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

From 4cc0e20e2e92a4969a6f2c5d56468772c66a5c68 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 18:05:56 -0500
Subject: [PATCH 08/14] basic viewer: shows video/audio/widget, no 3d model

---
 app.py                |  15 +-
 static/css/canvas.css |  10 +-
 static/css/viewer.css | 128 ++++++--
 static/js/main.js     |   2 +-
 static/js/viewer.js   | 727 ++++++++++++++++++++++++++----------------
 viewer.html           | 149 +--------
 6 files changed, 594 insertions(+), 437 deletions(-)

diff --git a/app.py b/app.py
index 4e96c07..8bf2df4 100644
--- a/app.py
+++ b/app.py
@@ -26,7 +26,10 @@ def get_base_path():
 app = Flask("Beamer+", 
             static_folder=os.path.join(BASE_PATH, 'static'), 
             template_folder=BASE_PATH)
-socketio = SocketIO(app, cors_allowed_origins='*', async_mode='threading')
+# socketio allows different webpages in our app (viewer, index, etc) to share data
+socketio = SocketIO(app, 
+                    cors_allowed_origins='*', # meaning of *: all webpages can communicate
+                    async_mode='threading')
 
 # Store active surveys and responses
 surveys = {}
@@ -34,7 +37,9 @@ def get_base_path():
 
 # Store current presentation
 UPLOAD_FOLDER = 'uploads'
-os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)  
+# exist_ok=True ensures that even if '/uploads' already exists,
+# the program shouldn't crash
 
 current_presentation = {
     'file': None,
@@ -146,13 +151,15 @@ def upload_presentation():
         'models': available_models
     })
 
-@app.route('/api/presentation/current')
+# Getter for upload.zip:
+@app.route('/api/presentation/current')  # by default: methods=['GET']
 def get_current_presentation():
     if current_presentation['file'] and os.path.exists(current_presentation['file']):
         return send_file(current_presentation['file'], as_attachment=True, download_name='presentation.zip')
     return jsonify({'error': 'No presentation loaded'}), 404
 
-@app.route('/api/presentation/info')
+# Getter for metadata about upload.zip
+@app.route('/api/presentation/info') # by default: methods=['GET']
 def get_presentation_info():
     if current_presentation['file'] and os.path.exists(current_presentation['file']):
         return jsonify({
diff --git a/static/css/canvas.css b/static/css/canvas.css
index b5d32d9..4fcdfc7 100644
--- a/static/css/canvas.css
+++ b/static/css/canvas.css
@@ -1,7 +1,8 @@
 /* Beamer+ Canvas and Display Styles */
 
 #pdf-container,
-#viewer-container {
+#viewer-container,
+#switch-presentation-container {
     width: calc(100% - 75px);
     height: calc(100vh - 60px);
     position: relative;
@@ -11,15 +12,16 @@
     justify-content: center;
     align-items: center;
     background: #f0f0f0;
+    bordeR: 5px solid red;
 }
 
-#pdf-container video {
+#pdf-container video, #switch-presentation-container video {
     position: absolute;
     object-fit: contain;
     pointer-events: auto;
 }
 
-#pdf-canvas {
+#pdf-canvas, #viewer-pdf-canvas {
     position: absolute;
     z-index: 1;
     background-color: #ffffff;
@@ -29,7 +31,7 @@
     aspect-ratio: 4 / 3;
 }
 
-#pdf-canvas canvas {
+#pdf-canvas canvas, #viewer-pdf-canvas canvas {
     width: 100% !important;
     height: 100% !important;
     display: block;
diff --git a/static/css/viewer.css b/static/css/viewer.css
index 91b71f2..5ee5bb8 100644
--- a/static/css/viewer.css
+++ b/static/css/viewer.css
@@ -1,36 +1,110 @@
-#viewer-panel {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    background: #ccc;
-    color: white;
-    gap: 10px;
+@font-face {
+    font-family: "Computer Modern Sans";
+    src: url("https://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf");
+    font-display: swap;
+}
+
+* {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
-    flex-wrap: wrap;
-    position: relative;
-    position: relative;
-    z-index: 200;
-    border-bottom: 2px solid #666;
 }
 
-.viewer-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    flex: 0 1 auto;
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #fcfcfc;
+    font-family: "Computer Modern Sans", sans-serif;
 }
 
-.viewer-right {
+/* Viewer container */
+#viewer-container {
+    width: 100vw;
+    height: 100vh;
     display: flex;
     align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    flex: 0 0 auto;
-    margin-left: auto;
+    justify-content: center;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: #fcfcfc;
+    padding: 0;
 }
 
-.hidden {
-    display: none !important;
-}
\ No newline at end of file
+#screen-display {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: none;
+}
+
+/* Waiting message */
+#waiting-message {
+    text-align: center;
+    color: #666;
+}
+
+#waiting-message h2 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    font-weight: 700;
+    color: #333;
+}
+
+#waiting-message p {
+    font-size: 16px;
+    color: #666;
+}
+
+/* Scribble animation matching Beamer+ modal style */
+.viewer-squiggle {
+    width: 120px;
+    height: 40px;
+    display: block;
+    margin: 0 auto;
+}
+
+.viewer-squiggle path {
+    fill: none;
+    stroke: #666;
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 150;
+    stroke-dashoffset: 150;
+    animation: draw-squiggle 1.6s ease-in-out infinite;
+}
+
+@keyframes draw-squiggle {
+    0% {
+        stroke-dashoffset: 150;
+        opacity: 0.6;
+    }
+    40% {
+        stroke-dashoffset: 0;
+        opacity: 1;
+    }
+    100% {
+        stroke-dashoffset: -150;
+        opacity: 0.6;
+    }
+}
+
+/* FPS counter in corner */
+#stream-info {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    background: #eee;
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid #999;
+    opacity: 0.9;
+    display: none;
+}
diff --git a/static/js/main.js b/static/js/main.js
index 2b635ff..45ad120 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -915,7 +915,7 @@ folderInput.addEventListener('change', async (e) => {
     const uploadModal = Modal.loading('Uploading Presentation', 'Please wait while your presentation is uploaded...');
 
     // Create a ZIP file from the selected folder
-    const zip = new JSZip();
+    const zip = new JSZip(); // we can use JSZip because we have an HTML script for it (Cloudflare)
     
     // Add all files to the ZIP, preserving folder structure
     for (const file of files) {
diff --git a/static/js/viewer.js b/static/js/viewer.js
index f13daf5..f94f6a0 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -1,310 +1,499 @@
 import { Button } from "./button.js";
-
-
-let viewerZip = null; // the loaded presentation ZIP
-let viewerCurrentSlide = 0;
-let viewerTotalSlides = 0;
-let viewerAnnotations = {};
-let viewerPDFDoc = null;
-
+import { renderWidgets, cleanupWidgets, updateWidgetPositions } from './iframe-widget-renderer.js';
+import { Canvas } from "./canvas.js";
 window.addEventListener("DOMContentLoaded", () => {
 
-const socket = io();
-const screenDisplay = document.getElementById("screen-display");
-const waitingMessage = document.getElementById("waiting-message");
-const streamInfo = document.getElementById("stream-info");
-let isScreenSharing = false;
-let frameCount = 0;
-let lastUpdateTime = Date.now();
-
-//
-const switchPresentationContainer = document.getElementById(
-    "switch-presentation-container",
-);
-const navControls = document.createElement('div');
-navControls.style.position = 'absolute';
-navControls.style.bottom = '20px';
-navControls.style.left = '50%';
-navControls.style.transform = 'translateX(-50%)';
-navControls.style.display = 'flex';
-navControls.style.gap = '10px';
-navControls.style.zIndex = '100';
-switchPresentationContainer.appendChild(navControls);
-
-const prevBtn = document.createElement('button');
-prevBtn.textContent = '◀ Prev';
-prevBtn.className = 'btn';
-navControls.appendChild(prevBtn);
-
-const nextBtn = document.createElement('button');
-nextBtn.textContent = 'Next ▶';
-nextBtn.className = 'btn';
-navControls.appendChild(nextBtn);
-
-prevBtn.onclick = () => goToViewerSlide(viewerCurrentSlide - 1);
-nextBtn.onclick = () => goToViewerSlide(viewerCurrentSlide + 1);
-//
-async function loadViewerZip(blob) {
-    const zip = await JSZip.loadAsync(blob);
-    viewerZip = zip;
-
-    // Load PDF
-    const pdfFile = zip.files['slides.pdf'];
-    if (!pdfFile) {
-        console.error('No slides.pdf found in ZIP');
-        return;
+    let viewerZip = null; // the loaded presentation ZIP
+    let slideConfigs = {};
+    let mediaCache = {}
+    let viewerAnnotations = {};
+    let viewerCurrentSlide = 0;
+    let viewerTotalSlides = 0;
+    let viewerPDFDoc = null;
+
+    const switchPresentationContainer = document.getElementById("switch-presentation-container");
+    const slide_canvas_container = document.getElementById('viewer-pdf-canvas');
+    const pdfCvs = new Canvas(slide_canvas_container, false);
+
+    const socket = io();
+    const screenDisplay = document.getElementById("screen-display");
+    const waitingMessage = document.getElementById("waiting-message");
+    const streamInfo = document.getElementById("stream-info");
+    let isScreenSharing = false;
+    let frameCount = 0;
+    let lastUpdateTime = Date.now();
+
+    const navControls = document.createElement('div');
+    navControls.style.position = 'absolute';
+    navControls.style.bottom = '20px';
+    navControls.style.left = '50%';
+    navControls.style.transform = 'translateX(-50%)';
+    navControls.style.display = 'flex';
+    navControls.style.gap = '10px';
+    navControls.style.zIndex = '100';
+    switchPresentationContainer.appendChild(navControls);
+
+    const prevBtn = document.createElement('button');
+    prevBtn.textContent = '◀ Prev';
+    prevBtn.className = 'btn';
+    navControls.appendChild(prevBtn);
+
+    const nextBtn = document.createElement('button');
+    nextBtn.textContent = 'Next ▶';
+    nextBtn.className = 'btn';
+    navControls.appendChild(nextBtn);
+
+    prevBtn.onclick = () => goToViewerSlide(viewerCurrentSlide - 1);
+    nextBtn.onclick = () => goToViewerSlide(viewerCurrentSlide + 1);
+
+    // note: loadSlideConfig also appears in main.js.
+    // it's the same, except is uses <zipFile> rather than <viewerZip>
+    async function loadSlideConfig(slideIndex) {
+        if (slideConfigs[slideIndex]) {
+            return slideConfigs[slideIndex];
+        }
+        
+        const configFileName = `config/s${slideIndex}.json`;
+        const configFile = viewerZip.file(configFileName);
+        
+        if (!configFile) {
+            slideConfigs[slideIndex] = null;
+            return null;
+        }
+        
+        const configText = await configFile.async("string");
+        const config = JSON.parse(configText);
+        slideConfigs[slideIndex] = config;
+        
+        console.log(`Loaded config for slide ${slideIndex}:`, config);
+        return config;
     }
 
-    const pdfData = await pdfFile.async('arraybuffer');
-    viewerPDFDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
-    viewerTotalSlides = viewerPDFDoc.numPages;
-    viewerCurrentSlide = 0;
-
-    console.log('Loaded PDF with', viewerTotalSlides, 'pages'); // <- debug
-
-    await renderViewerSlide(viewerCurrentSlide);
-}
-//
-async function renderViewerSlide(slideIndex) {
-    if (!viewerPDFDoc || slideIndex < 0 || slideIndex >= viewerTotalSlides) return;
-
-    viewerCurrentSlide = slideIndex;
-
-    let canvas = document.getElementById('viewer-slide-canvas');
-    if (!canvas) {
-        canvas = document.createElement('canvas');
-        canvas.id = 'viewer-slide-canvas';
-        canvas.style.position = 'relative';      // relative positioning
-        canvas.style.display = 'block';          // remove inline block issues
-        canvas.style.margin = '0 auto';          // center horizontally
-        canvas.style.width = 'auto';             // don't stretch width
-        canvas.style.height = 'auto';            // don't stretch height
-        canvas.style.maxWidth = '100%';          // scale down if container is smaller
-        canvas.style.maxHeight = '100%';         // scale down vertically if needed
-        canvas.style.zIndex = '1';               // keep behind nav buttons
-        switchPresentationContainer.appendChild(canvas);
+    // note: loadMediaFromPath also appears in main.js.
+    // it's the same, except is uses <zipFile> rather than <viewerZip>
+    async function loadMediaFromPath(path) {
+        if (mediaCache[path]) {
+            return mediaCache[path];
+        }
+        
+        const file = viewerZip.file(path);
+        if (!file) {
+            console.error(`Media file not found: ${path}`);
+            return null;
+        }
+        
+        const blob = await file.async("blob");
+        const url = URL.createObjectURL(blob);
+        mediaCache[path] = url;
+        
+        console.log(`Loaded media: ${path}`);
+        return url;
     }
 
+    //
+    async function loadViewerZip(blob) {
+        // update the global state
+        viewerZip = await JSZip.loadAsync(blob);
 
-    const ctx = canvas.getContext('2d');
-    const page = await viewerPDFDoc.getPage(slideIndex + 1);
-    const viewport = page.getViewport({ scale: 1.5 });
+        // Get slides.pdf from the ZIP
+        const pdfFile = viewerZip.file("slides.pdf");
+        if (!pdfFile) {
+            console.error("No slides.pdf found in ZIP");
+            return;
+        }
 
-    canvas.width = viewport.width;
-    canvas.height = viewport.height;
+        // pdfData will store pdfFile as bytes of data
+        const pdfData = await pdfFile.async('arraybuffer');
 
-    await page.render({ canvasContext: ctx, viewport }).promise;
+        // viewerPDFDoc (the global state) is your renderable PDF document, made by the pdfjs library
+        viewerPDFDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+        // update global states:
+        viewerTotalSlides = viewerPDFDoc.numPages;
+        viewerCurrentSlide = 0;
 
-    // Draw annotations if any
-    if (viewerAnnotations[slideIndex]) {
-        const img = new Image();
-        img.src = viewerAnnotations[slideIndex];
-        img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-    }
-}
-//
-socket.on('slide_change', async (data) => {
-    if (!viewerZip) return;
-
-    const { slideIndex, annotations } = data;
-    viewerAnnotations[slideIndex] = annotations; // store per-slide annotations
-    await renderViewerSlide(slideIndex);
-});
-//
-document.addEventListener('keydown', (e) => {
-    if (!switchPresentationContainer.classList.contains('hidden')) {
-        if (e.key === 'ArrowLeft') goToViewerSlide(viewerCurrentSlide - 1);
-        if (e.key === 'ArrowRight') goToViewerSlide(viewerCurrentSlide + 1);
+        console.log('Loaded PDF with', viewerTotalSlides, 'pages'); // <- debug
+
+        // render the first slide (because viewerCurrentSlide has been initialized to zero):
+        await renderViewerSlide(viewerCurrentSlide);
     }
-});
-//
-async function goToViewerSlide(slideIndex) {
-    if (!viewerPDFDoc) return;
-    if (slideIndex < 0) slideIndex = 0;
-    if (slideIndex >= viewerTotalSlides) slideIndex = viewerTotalSlides - 1;
-
-    viewerCurrentSlide = slideIndex;
-    await renderViewerSlide(slideIndex);
-}
-//
-
-// Join viewer room
-socket.emit("join_viewer");
-
-// Connection status
-socket.on("connect", () => {
-    console.log("Connected to server");
-});
-
-socket.on("disconnect", () => {
-    console.log("Disconnected from server");
-    screenDisplay.style.display = "none";
-    waitingMessage.style.display = "block";
-    streamInfo.style.display = "none";
-});
-
-socket.on("joined", (data) => {
-    console.log("Joined room:", data.room);
-});
-
-// Screen capture event (from html2canvas)
-socket.on("screen_capture", (data) => {
-    if (data.image) {
-        // Show screen, hide waiting message
-        if (!isScreenSharing) {
-            isScreenSharing = true;
-            waitingMessage.style.display = "none";
-            screenDisplay.style.display = "block";
-            streamInfo.style.display = "block";
+    //
+    async function renderViewerSlide(slideIndex) {
+
+        console.log('renderViewerSlide called:', slideIndex);
+        if (!viewerZip || !viewerPDFDoc || slideIndex < 0 || slideIndex >= viewerTotalSlides) {
+            console.log('Error calling renderViewerSlide');
+            return;
         }
 
-        // Update the image
-        screenDisplay.src = data.image;
+        // update the global state:
+        viewerCurrentSlide = slideIndex;
+
+        const page = await viewerPDFDoc.getPage(slideIndex + 1);
+        await pdfCvs.renderPDFPage(page);
 
-        // Update FPS counter
-        frameCount++;
-        const currentTime = Date.now();
-        const elapsed = currentTime - lastUpdateTime;
+        // Clear old media
+        const existingMedia = slide_canvas_container.querySelectorAll('video, audio, model-viewer');
+        existingMedia.forEach(el => el.remove());
+        // Clear old widgets
+        cleanupWidgets(slide_canvas_container);
 
-        if (elapsed >= 1000) {
-            const fps = Math.round((frameCount / elapsed) * 1000);
-            streamInfo.textContent = `${fps} FPS`;
-            frameCount = 0;
-            lastUpdateTime = currentTime;
+        // get the config for this slide:
+        const slideConfig = await loadSlideConfig(slideIndex);
+        if (!slideConfig) {
+            console.log('No config for this slide');
+            return;
         }
-    }
-});
-
-// Fallback to legacy screen sharing events if needed
-socket.on("screen_share_start", () => {
-    console.log("Screen sharing started (legacy)");
-    isScreenSharing = true;
-    waitingMessage.style.display = "none";
-    screenDisplay.style.display = "block";
-});
-
-socket.on("screen_share_stop", () => {
-    console.log("Screen sharing stopped (legacy)");
-    isScreenSharing = false;
-    screenDisplay.style.display = "none";
-    waitingMessage.style.display = "block";
-    streamInfo.style.display = "none";
-});
-
-socket.on("screen_frame", (data) => {
-    if (data.frame) {
-        if (!isScreenSharing) {
-            isScreenSharing = true;
-            waitingMessage.style.display = "none";
-            screenDisplay.style.display = "block";
+        console.log('Videos to render:', slideConfig.videos?.length || 0);
+        console.log('Models to render:', slideConfig.models?.length || 0);
+        console.log('Widgets to render:', slideConfig.widgets?.length || 0);
+
+        const containerRect = slide_canvas_container.getBoundingClientRect();
+
+
+        if (slideConfig.videos) {
+            for (const v of slideConfig.videos) {
+                const videoURL = await loadMediaFromPath(v.path);
+                if (!videoURL) continue;
+                
+                const video = document.createElement("video");
+                video.src = videoURL;
+                video.volume = v.volume || 1.0;
+                video.dataset.videoId = v.id;
+                
+                // Store fractional positions for resize handling
+                video.dataset.videoX = v.x;
+                video.dataset.videoY = v.y;
+                video.dataset.videoWidth = v.width;
+                video.dataset.videoHeight = v.height;
+                
+                video.style.position = "absolute";
+                video.style.left = `${v.x * containerRect.width}px`;
+                video.style.top = `${v.y * containerRect.height}px`;
+                video.style.width = `${v.width * containerRect.width}px`;
+                video.style.height = `${v.height * containerRect.height}px`;
+                video.style.objectFit = "contain";
+                video.style.zIndex = v.zIndex || 5;
+                
+                if (v.playMode === "once") {
+                    video.autoplay = true;
+                    video.loop = false;
+                }
+                if (v.playMode === "loop") {
+                    video.autoplay = true;
+                    video.loop = true;
+                }
+                if (v.playMode === "manual") {
+                    video.controls = true;
+                }
+                
+                video.addEventListener('play', () => {
+                    socket.emit('video_action', {
+                        videoId: v.id,
+                        slideIndex: viewerCurrentSlide,
+                        action: 'play',
+                        currentTime: video.currentTime
+                    });
+                });
+                
+                video.addEventListener('pause', () => {
+                    socket.emit('video_action', {
+                        videoId: v.id,
+                        slideIndex: viewerCurrentSlide,
+                        action: 'pause',
+                        currentTime: video.currentTime
+                    });
+                });
+    
+                // Allow clicking the video to toggle play/pause
+                video.addEventListener('click', (ev) => {
+                    // Only toggle when in hand mode (clicks should pass through otherwise)
+                    try {
+                        if (video.paused) video.play();
+                        else video.pause();
+                    } catch (e) {
+                        console.error('Error toggling video playback:', e);
+                    }
+                    ev.stopPropagation();
+                });
+                
+                slide_canvas_container.appendChild(video);
+            }
         }
-        screenDisplay.src = data.frame;
+        
+        if (slideConfig.models) {
+            for (const m of slideConfig.models) {
+                const modelURL = await loadMediaFromPath(m.path);
+                if (!modelURL) continue;
+                
+                const mv = document.createElement("model-viewer");
+                mv.src = modelURL;
+                mv.alt = m.alt || "3D model";
+                mv.dataset.modelId = m.id;
+                
+                // Store fractional positions for resize handling
+                mv.dataset.modelX = m.x;
+                mv.dataset.modelY = m.y;
+                mv.dataset.modelWidth = m.width;
+                mv.dataset.modelHeight = m.height;
+                
+                mv.setAttribute("camera-controls", "");
+                mv.setAttribute("shadow-intensity", "1");
+                mv.setAttribute("auto-rotate", m.autoRotate ? "true" : "false");
+                
+                mv.style.position = "absolute";
+                mv.style.left = `${m.x * containerRect.width}px`;
+                mv.style.top = `${m.y * containerRect.height}px`;
+                mv.style.width = `${m.width * containerRect.width}px`;
+                mv.style.height = `${m.height * containerRect.height}px`;
+                mv.style.zIndex = m.zIndex || 5;
+                
+                mv.addEventListener('camera-change', () => {
+                    const camera = mv.getCameraOrbit();
+                    const target = mv.getCameraTarget();
+                    socket.emit('model_interaction', {
+                        modelId: m.id,
+                        slideIndex: viewerCurrentSlide,
+                        camera: {
+                            theta: camera.theta,
+                            phi: camera.phi,
+                            radius: camera.radius
+                        },
+                        target: {
+                            x: target.x,
+                            y: target.y,
+                            z: target.z
+                        }
+                    });
+                });
+                
+                slide_canvas_container.appendChild(mv);
+            }
+        }
+        
+        if (slideConfig.audio) {
+            for (const a of slideConfig.audio) {
+                const audioURL = await loadMediaFromPath(a.path);
+                if (!audioURL) continue;
+                
+                const audio = document.createElement("audio");
+                audio.src = audioURL;
+                audio.volume = a.volume || 1.0;
+                if (a.playMode === "auto") audio.play();
+                if (a.playMode === "manual") audio.controls = true;
+                
+                slide_canvas_container.appendChild(audio);
+            }
+        }
+        
+        if (slideConfig.widgets) {
+            renderWidgets(slideConfig, slide_canvas_container, viewerZip);
+        }
+
     }
-});
-
-// Handle window resize
-window.addEventListener("resize", () => {
-    // Image styling will handle scaling automatically
-});
-
-// when this is true, you show the viewer-controlled presentation.
-// when this is false, you show the screen-shared presentation.
-// important: if isScreenSharing == false then switchToPresentation must be false.
-let switchToPresentation = false;
-const viewerContainer = document.getElementById("viewer-container");
-// now switchPresentationContainer is defined near the start
-// const switchPresentationContainer = document.getElementById(
-//     "switch-presentation-container",
-// );
-// const performSwitch = () => {
-//     console.log(`screensharing: HAHA ${isScreenSharing}`);
-//     if (!isScreenSharing) {
-//         return; // do nothing if it's not screensharing.
-//     }
-
-//     if (switchToPresentation) {
-//         switchPresentationContainer.classList.remove("hidden");
-//         viewerContainer.classList.add("hidden");
-//     } else {
-//         switchPresentationContainer.classList.add("hidden");
-//         viewerContainer.classList.remove("hidden");
-//     }
-// };
-const performSwitch = () => {
-    if (!isScreenSharing) return;
-
-    if (switchToPresentation) {
-        switchPresentationContainer.classList.remove("hidden");
-        viewerContainer.classList.add("hidden");
-
-        // render current slide
-        if (viewerPDFDoc) renderViewerSlide(viewerCurrentSlide);
-    } else {
-        switchPresentationContainer.classList.add("hidden");
-        viewerContainer.classList.remove("hidden");
+    //
+    socket.on('slide_change', async (data) => {
+        if (!viewerZip) return;
+
+        const { slideIndex, annotations } = data;
+        viewerAnnotations[slideIndex] = annotations; // store per-slide annotations
+        await renderViewerSlide(slideIndex);
+    });
+    //
+    document.addEventListener('keydown', (e) => {
+        if (!switchPresentationContainer.classList.contains('hidden')) {
+            if (e.key === 'ArrowLeft') goToViewerSlide(viewerCurrentSlide - 1);
+            if (e.key === 'ArrowRight') goToViewerSlide(viewerCurrentSlide + 1);
+        }
+    });
+    //
+    async function goToViewerSlide(slideIndex) {
+        if (!viewerPDFDoc) return;
+        if (slideIndex < 0) slideIndex = 0;
+        if (slideIndex >= viewerTotalSlides) slideIndex = viewerTotalSlides - 1;
+
+        viewerCurrentSlide = slideIndex;
+        await renderViewerSlide(slideIndex);
     }
-};
+    //
+
+    // Join viewer room
+    socket.emit("join_viewer");
+
+    // Connection status
+    socket.on("connect", () => {
+        console.log("Connected to server");
+    });
+
+    socket.on("disconnect", () => {
+        console.log("Disconnected from server");
+        screenDisplay.style.display = "none";
+        waitingMessage.style.display = "block";
+        streamInfo.style.display = "none";
+    });
+
+    socket.on("joined", (data) => {
+        console.log("Joined room:", data.room);
+    });
+
+    // Screen capture event (from html2canvas)
+    socket.on("screen_capture", (data) => {
+        if (data.image) {
+            // Show screen, hide waiting message
+            if (!isScreenSharing) {
+                isScreenSharing = true;
+                waitingMessage.style.display = "none";
+                screenDisplay.style.display = "block";
+                streamInfo.style.display = "block";
+            }
+
+            // Update the image
+            screenDisplay.src = data.image;
+
+            // Update FPS counter
+            frameCount++;
+            const currentTime = Date.now();
+            const elapsed = currentTime - lastUpdateTime;
+
+            if (elapsed >= 1000) {
+                const fps = Math.round((frameCount / elapsed) * 1000);
+                streamInfo.textContent = `${fps} FPS`;
+                frameCount = 0;
+                lastUpdateTime = currentTime;
+            }
+        }
+    });
+
+    // Fallback to legacy screen sharing events if needed
+    socket.on("screen_share_start", () => {
+        console.log("Screen sharing started (legacy)");
+        isScreenSharing = true;
+        waitingMessage.style.display = "none";
+        screenDisplay.style.display = "block";
+    });
+
+    socket.on("screen_share_stop", () => {
+        console.log("Screen sharing stopped (legacy)");
+        isScreenSharing = false;
+        screenDisplay.style.display = "none";
+        waitingMessage.style.display = "block";
+        streamInfo.style.display = "none";
+    });
+
+    socket.on("screen_frame", (data) => {
+        if (data.frame) {
+            if (!isScreenSharing) {
+                isScreenSharing = true;
+                waitingMessage.style.display = "none";
+                screenDisplay.style.display = "block";
+            }
+            screenDisplay.src = data.frame;
+        }
+    });
+
+    // Handle window resize
+    window.addEventListener("resize", () => {
+        // Image styling will handle scaling automatically
+    });
+
+    // when this is true, you show the viewer-controlled presentation.
+    // when this is false, you show the screen-shared presentation.
+    // important: if isScreenSharing == false then switchToPresentation must be false.
+    let switchToPresentation = false;
+    const viewerContainer = document.getElementById("viewer-container");
+    // now switchPresentationContainer is defined near the start
+    // const switchPresentationContainer = document.getElementById(
+    //     "switch-presentation-container",
+    // );
+    // const performSwitch = () => {
+    //     console.log(`screensharing: HAHA ${isScreenSharing}`);
+    //     if (!isScreenSharing) {
+    //         return; // do nothing if it's not screensharing.
+    //     }
+
+    //     if (switchToPresentation) {
+    //         switchPresentationContainer.classList.remove("hidden");
+    //         viewerContainer.classList.add("hidden");
+    //     } else {
+    //         switchPresentationContainer.classList.add("hidden");
+    //         viewerContainer.classList.remove("hidden");
+    //     }
+    // };
+    const performSwitch = () => {
+        if (!isScreenSharing) return;
+
+        if (switchToPresentation) {
+            switchPresentationContainer.classList.remove("hidden");
+            viewerContainer.classList.add("hidden");
+
+            // render current slide
+            if (viewerPDFDoc) renderViewerSlide(viewerCurrentSlide);
+        } else {
+            switchPresentationContainer.classList.add("hidden");
+            viewerContainer.classList.remove("hidden");
+        }
+    };
 
 
-const switchContainer = document.getElementById("switch-container");
+    const switchContainer = document.getElementById("switch-container");
 
-const switchBtn = new Button(switchContainer, {
-    label: '<i class="fa-solid fa-display"></i>',
-    className: "btn",
-});
+    const switchBtn = new Button(switchContainer, {
+        label: '<i class="fa-solid fa-display"></i>',
+        className: "btn",
+    });
 
-switchBtn.onClick(() => {
-    switchToPresentation = !switchToPresentation;
-    performSwitch();
-    console.log(
-        `Performed switch. Currently switchToPresentation: ${switchToPresentation}`,
-    );
-});
+    switchBtn.onClick(() => {
+        switchToPresentation = !switchToPresentation;
+        performSwitch();
+        console.log(
+            `Performed switch. Currently switchToPresentation: ${switchToPresentation}`,
+        );
+    });
 
-async function loadPresentation() {
-    const infoRes = await fetch('/api/presentation/info');
-    const info = await infoRes.json();
+    async function loadPresentation() {
+        const infoRes = await fetch('/api/presentation/info');
+        const info = await infoRes.json();
 
-    if (!info.loaded) {
-        console.log("No presentation loaded yet.");
-        // show some kind of waiting message maybe
-        return;
+        if (!info.loaded) {
+            console.log("No presentation loaded yet.");
+            // show some kind of waiting message maybe
+            return;
+        }
+        console.log("Presentation found:", info);
+        await downloadAndLoadZip();
     }
-    console.log("Presentation found:", info);
-    await downloadAndLoadZip();
-}
 
-async function downloadAndLoadZip() {
-    console.log("Downloading presentation...");
+    async function downloadAndLoadZip() {
+        console.log("Downloading presentation...");
 
-    const res = await fetch('/api/presentation/current');
-    const blob = await res.blob();
+        const res = await fetch('/api/presentation/current');
+        const blob = await res.blob();
 
-    console.log("ZIP downloaded:", blob);
+        console.log("ZIP downloaded:", blob);
 
-    await loadZip(blob);
-    await loadViewerZip(blob);
-}
+        await loadZip(blob);
+        await loadViewerZip(blob);
+    }
 
-async function loadZip(blob) {
-    const zip = await JSZip.loadAsync(blob);
+    async function loadZip(blob) {
+        const zip = await JSZip.loadAsync(blob);
 
-    console.log("ZIP contents:", Object.keys(zip.files));
+        console.log("ZIP contents:", Object.keys(zip.files));
 
-    window.viewerPresentation = zip; // store globally
+        window.viewerPresentation = zip; // store globally
 
-    // Example: load slides/index.html if it exists
-    if (zip.files["index.html"]) {
-        const html = await zip.files["index.html"].async("string");
-        document.getElementById("viewer-container").innerHTML = html;
+        // Example: load slides/index.html if it exists
+        if (zip.files["index.html"]) {
+            const html = await zip.files["index.html"].async("string");
+            document.getElementById("viewer-container").innerHTML = html;
+        }
     }
-}
 
-loadPresentation();
-socket.on("presentation_loaded", () => {
-    console.log("New presentation uploaded — reloading...");
     loadPresentation();
-});
+
+    socket.on("presentation_loaded", () => {
+        console.log("New presentation uploaded — reloading...");
+        loadPresentation();
+    });
 
 
 });
\ No newline at end of file
diff --git a/viewer.html b/viewer.html
index 9289198..b8d9690 100644
--- a/viewer.html
+++ b/viewer.html
@@ -3,139 +3,20 @@
     <head>
         <meta charset="utf-8" />
         <title>Beamer+ Viewer</title>
-        <link rel="stylesheet" href="static/css/button.css" />
+        <link rel="stylesheet" href="/static/css/shared.css">
+        <link rel="stylesheet" href="/static/css/control-panel.css">
+        <link rel="stylesheet" href="/static/css/button.css">
+        <link rel="stylesheet" href="/static/css/selector.css">
+        <link rel="stylesheet" href="/static/css/label.css">
+        <link rel="stylesheet" href="/static/css/toggle.css">
+        <link rel="stylesheet" href="/static/css/canvas.css">
+        <link rel="stylesheet" href="/static/css/timer.css">
+        <link rel="stylesheet" href="/static/css/modal.css">
+        <link rel="stylesheet" href="/static/css/survey.css">
+        <link rel="stylesheet" href="/static/css/splash.css">
         <link rel="stylesheet" href="static/css/viewer.css" />
-
-        <!-- Beamer+ Font -->
-        <style>
-            @font-face {
-                font-family: "Computer Modern Sans";
-                src: url("https://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf");
-                font-display: swap;
-            }
-
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-                background: #fcfcfc;
-                font-family: "Computer Modern Sans", sans-serif;
-            }
-
-            /* Viewer container */
-            #viewer-container {
-                width: 100vw;
-                height: 100vh;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                position: absolute;
-                inset: 0;
-                z-index: 1;
-                background: #fcfcfc;
-                padding: 0;
-            }
-
-            #screen-display {
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-                display: none;
-            }
-
-            /* Waiting message */
-            #waiting-message {
-                text-align: center;
-                color: #666;
-            }
-
-            #waiting-message h2 {
-                font-size: 28px;
-                margin-bottom: 20px;
-                margin-top: 20px;
-                font-weight: 700;
-                color: #333;
-            }
-
-            #waiting-message p {
-                font-size: 16px;
-                color: #666;
-            }
-
-            /* Scribble animation matching Beamer+ modal style */
-            .viewer-squiggle {
-                width: 120px;
-                height: 40px;
-                display: block;
-                margin: 0 auto;
-            }
-
-            .viewer-squiggle path {
-                fill: none;
-                stroke: #666;
-                stroke-width: 3;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-                stroke-dasharray: 150;
-                stroke-dashoffset: 150;
-                animation: draw-squiggle 1.6s ease-in-out infinite;
-            }
-
-            @keyframes draw-squiggle {
-                0% {
-                    stroke-dashoffset: 150;
-                    opacity: 0.6;
-                }
-                40% {
-                    stroke-dashoffset: 0;
-                    opacity: 1;
-                }
-                100% {
-                    stroke-dashoffset: -150;
-                    opacity: 0.6;
-                }
-            }
-
-            /* FPS counter in corner */
-            #stream-info {
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                font-size: 14px;
-                font-weight: 600;
-                color: #333;
-                background: #eee;
-                padding: 6px 12px;
-                border-radius: 4px;
-                border: 1px solid #999;
-                opacity: 0.9;
-                display: none;
-            }
-
-            #switch-presentation-container {
-            width: 100%;
-            height: 80vh; /* or whatever fits your layout */
-            position: relative;
-            background-color: #f0f0f0; /* optional for debugging */
-            }
-            #viewer-slide-canvas {
-            display: block;
-            }
-            
-            
-
-            
-
-
-        </style>
-
+        <link rel="stylesheet" href="static/css/viewer-panel.css">
+        
         <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
@@ -158,6 +39,9 @@
             </div>
         </div>
 
+        <div id="viewer-slide-navigator"></div>
+        <!-- nothing in ^ -->
+
         <div id="viewer-container">
             <div id="waiting-message">
                 <svg
@@ -175,6 +59,7 @@
 
         <div id="switch-presentation-container" class="hidden">
             <h1>Viewer's Presentation</h1>
+            <div id="viewer-pdf-canvas"></div>
         </div>
 
         <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.16.105/pdf.min.js"></script> -->

From fbae7dd1815e751c67f2ded2f62f3fb7f6c82894 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 19:33:48 -0500
Subject: [PATCH 09/14] prev-next viewer-panel better css (kinda)

---
 static/css/viewer-panel.css |   36 +
 static/js/main.js           | 3502 ++++++++++++++++++-----------------
 static/js/viewer.js         |   12 +-
 viewer.html                 |    7 +-
 4 files changed, 1901 insertions(+), 1656 deletions(-)
 create mode 100644 static/css/viewer-panel.css

diff --git a/static/css/viewer-panel.css b/static/css/viewer-panel.css
new file mode 100644
index 0000000..1e059c3
--- /dev/null
+++ b/static/css/viewer-panel.css
@@ -0,0 +1,36 @@
+#viewer-panel {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px;
+    background: #ccc;
+    color: white;
+    gap: 10px;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    position: relative;
+    position: relative;
+    z-index: 200;
+    border-bottom: 2px solid #666;
+}
+
+#viewer-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 0 1 auto;
+}
+
+#viewer-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
+.hidden {
+    display: none !important;
+}
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index 45ad120..6511101 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,457 +1,528 @@
-import { Timer } from './timer.js';
-import { Label } from './label.js';
-import { Button } from './button.js';
-import { Selector } from './selector.js';
-import { Toggle } from './toggle.js';
-import { Canvas } from './canvas.js';
-import { renderWidgets, cleanupWidgets, updateWidgetPositions } from './iframe-widget-renderer.js';
-import { Modal } from './beamer_modal.js';
-import { setControlsEnabledAfterUpload, disableControlButtons } from './beamer_ui.js';
+import { Timer } from "./timer.js";
+import { Label } from "./label.js";
+import { Button } from "./button.js";
+import { Selector } from "./selector.js";
+import { Toggle } from "./toggle.js";
+import { Canvas } from "./canvas.js";
+import {
+    renderWidgets,
+    cleanupWidgets,
+    updateWidgetPositions,
+} from "./iframe-widget-renderer.js";
+import { Modal } from "./beamer_modal.js";
+import {
+    setControlsEnabledAfterUpload,
+    disableControlButtons,
+} from "./beamer_ui.js";
 
 const socket = io();
-socket.emit('join_presenter');
+socket.emit("join_presenter");
 
 // Available AI models (loaded from presentation ZIP)
 let availableModels = [];
 
 window.addEventListener("DOMContentLoaded", () => {
+    const timerContainer = document.getElementById("timer-container");
+    const timer = new Timer(timerContainer);
 
-const timerContainer = document.getElementById("timer-container");
-const timer = new Timer(timerContainer);
+    const toolContainer = document.getElementById("tool-container");
 
-const toolContainer = document.getElementById('tool-container');
+    const hand = new Button(toolContainer, {
+        label: '<i class="fa-solid fa-hand-pointer"></i>',
+        className: "btn",
+    });
 
-const hand = new Button(toolContainer, {
-    label: '<i class="fa-solid fa-hand-pointer"></i>',
-    className: 'btn'
-});
+    const pen = new Button(toolContainer, {
+        label: '<i class="fa-solid fa-pen"></i>',
+        className: "btn",
+    });
 
-const pen = new Button(toolContainer, {
-    label: '<i class="fa-solid fa-pen"></i>',
-    className: 'btn'
-});
+    const highlighter = new Button(toolContainer, {
+        label: '<i class="fa-solid fa-highlighter"></i>',
+        className: "btn",
+    });
 
-const highlighter = new Button(toolContainer, {
-    label: '<i class="fa-solid fa-highlighter"></i>',
-    className: 'btn'
-});
+    const eraser = new Button(toolContainer, {
+        label: '<i class="fa-solid fa-eraser"></i>',
+        className: "btn",
+    });
 
-const eraser = new Button(toolContainer, {
-    label: '<i class="fa-solid fa-eraser"></i>',
-    className: 'btn'
-});
+    const toolSelector = new Selector(
+        [hand, pen, highlighter, eraser],
+        "btn_selected",
+    );
+    toolSelector.select(hand);
+
+    const colors = [
+        "#eeeeee",
+        "#e74c3c",
+        "#f1c40f",
+        "#2ecc71",
+        "#3498db",
+        "#9b59b6",
+        "#333333",
+    ];
+    const colorContainer = document.getElementById("color-picker");
+
+    const colorBtns = colors.map((color) => {
+        const btn = new Button(colorContainer, {
+            className: "color-swatch",
+        });
+        btn.el.style.background = color;
+        return btn;
+    });
 
-const toolSelector = new Selector([hand, pen, highlighter, eraser], 'btn_selected');
-toolSelector.select(hand);
+    const colorSelector = new Selector(colorBtns, "color-selected");
+    colorSelector.select(colorBtns[6]);
 
-const colors = ['#eeeeee', '#e74c3c', '#f1c40f', '#2ecc71', '#3498db', '#9b59b6', '#333333'];
-const colorContainer = document.getElementById('color-picker');
+    const navContainer = document.getElementById("nav-container");
 
-const colorBtns = colors.map(color => {
-    const btn = new Button(colorContainer, {
-        className: 'color-swatch',
+    const prevBtn = new Button(navContainer, {
+        label: '<i class="fa-solid fa-arrow-left"></i>',
+        className: "btn",
     });
-    btn.el.style.background = color;
-    return btn;
-});
 
-const colorSelector = new Selector(colorBtns, 'color-selected');
-colorSelector.select(colorBtns[6]);
+    const nextBtn = new Button(navContainer, {
+        label: '<i class="fa-solid fa-arrow-right"></i>',
+        className: "btn",
+    });
 
-const navContainer = document.getElementById('nav-container');
+    const brushContainer = document.getElementById("brush-controls");
 
-const prevBtn = new Button(navContainer, {
-    label: '<i class="fa-solid fa-arrow-left"></i>',
-    className: 'btn'
-});
+    const brushMinusBtn = new Button(brushContainer, {
+        label: '<i class="fa-solid fa-minus"></i>',
+        className: "btn",
+    });
 
-const nextBtn = new Button(navContainer, {
-    label: '<i class="fa-solid fa-arrow-right"></i>',
-    className: 'btn'
-});
+    const brushSizeLbl = new Label(brushContainer, {
+        id: "brush_size_scroll",
+        className: "brush_size_scroll",
+        initial: "2",
+    });
 
-const brushContainer = document.getElementById('brush-controls');
+    const brushPlusBtn = new Button(brushContainer, {
+        label: '<i class="fa-solid fa-plus"></i>',
+        className: "btn",
+    });
 
-const brushMinusBtn = new Button(brushContainer, {
-    label: '<i class="fa-solid fa-minus"></i>',
-    className: 'btn'
-});
+    const otherControlsContainer = document.getElementById("other-controls");
 
-const brushSizeLbl = new Label(brushContainer, {
-    id: 'brush_size_scroll',
-    className: 'brush_size_scroll',
-    initial: '2'
-});
+    const undoBtn = new Button(otherControlsContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-rotate-left"></i>',
+    });
 
-const brushPlusBtn = new Button(brushContainer, {
-    label: '<i class="fa-solid fa-plus"></i>',
-    className: 'btn'
-});
+    undoBtn.el.id = "undo-btn";
+    undoBtn.el.style.marginLeft = "15px";
+    undoBtn.el.style.marginRight = "5px";
+
+    const redoBtn = new Button(otherControlsContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-rotate-right"></i>',
+    });
 
-const otherControlsContainer = document.getElementById('other-controls');
+    redoBtn.el.id = "redo-btn";
+    redoBtn.el.style.marginRight = "5px";
 
-const undoBtn = new Button(otherControlsContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-rotate-left"></i>'
-});
+    const clearBtn = new Button(otherControlsContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-broom"></i>',
+    });
 
-undoBtn.el.id = 'undo-btn';
-undoBtn.el.style.marginLeft = '15px';
-undoBtn.el.style.marginRight = '5px';
+    clearBtn.el.id = "clear-btn";
+    clearBtn.el.style.marginRight = "20px";
 
-const redoBtn = new Button(otherControlsContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-rotate-right"></i>'
-});
+    const surveyBtn = new Button(otherControlsContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-clipboard-list"></i>',
+    });
 
-redoBtn.el.id = 'redo-btn';
-redoBtn.el.style.marginRight = '5px';
+    surveyBtn.el.style.marginRight = "10px";
 
-const clearBtn = new Button(otherControlsContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-broom"></i>'
-});
+    const surveyResultsBtn = new Button(otherControlsContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-chart-simple"></i>',
+    });
 
-clearBtn.el.id = 'clear-btn';
-clearBtn.el.style.marginRight = '20px';
+    // Initially disable results button
+    surveyResultsBtn.el.disabled = true;
+    surveyResultsBtn.el.style.opacity = "0.5";
+    surveyResultsBtn.el.style.cursor = "not-allowed";
 
-const surveyBtn = new Button(otherControlsContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-clipboard-list"></i>'
-});
+    const displayControls = document.getElementById("display-controls");
 
-surveyBtn.el.style.marginRight = '10px';
+    const uploadBtn = new Button(displayControls, {
+        className: "btn",
+        label: '<i class="fa-solid fa-folder-open"></i>',
+    });
 
-const surveyResultsBtn = new Button(otherControlsContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-chart-simple"></i>'
-});
+    const screenShareContainer = document.getElementById(
+        "screen-share-container",
+    );
 
-// Initially disable results button
-surveyResultsBtn.el.disabled = true;
-surveyResultsBtn.el.style.opacity = '0.5';
-surveyResultsBtn.el.style.cursor = 'not-allowed';
+    const screenShareBtn = new Button(screenShareContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-desktop"></i>',
+    });
 
-const displayControls = document.getElementById('display-controls');
+    // Initially disabled until presentation is loaded
+    screenShareBtn.el.disabled = true;
+    screenShareBtn.el.style.opacity = "0.5";
+    screenShareBtn.el.style.cursor = "not-allowed";
 
-const uploadBtn = new Button(displayControls, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-folder-open"></i>',
-});
+    // Create recording button
+    const recordContainer = document.getElementById("record-container");
 
-const screenShareContainer = document.getElementById('screen-share-container');
+    const recordBtn = new Button(recordContainer, {
+        className: "btn",
+        label: '<i class="fa-solid fa-circle"></i>',
+    });
 
-const screenShareBtn = new Button(screenShareContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-desktop"></i>',
-});
+    // Initially disabled until presentation is loaded
+    recordBtn.el.disabled = true;
+    recordBtn.el.style.opacity = "0.5";
+    recordBtn.el.style.cursor = "not-allowed";
+
+    // Create floating annotation panel toggle button for mobile
+    const annotationToggleBtn = document.createElement("button");
+    annotationToggleBtn.id = "annotation-panel-toggle";
+    annotationToggleBtn.className = "btn";
+    annotationToggleBtn.innerHTML = '<i class="fa-solid fa-pen"></i>';
+    annotationToggleBtn.title = "Annotation Tools";
+
+    // Insert after nav-container instead of in display-controls
+    const navContainerElement = document.getElementById("nav-container");
+    const controlsLeft = document.querySelector(".controls-left");
+    if (navContainerElement && navContainerElement.nextSibling) {
+        controlsLeft.insertBefore(
+            annotationToggleBtn,
+            navContainerElement.nextSibling,
+        );
+    } else if (navContainerElement) {
+        navContainerElement.parentNode.insertBefore(
+            annotationToggleBtn,
+            navContainerElement.nextSibling,
+        );
+    } else {
+        controlsLeft.appendChild(annotationToggleBtn);
+    }
 
-// Initially disabled until presentation is loaded
-screenShareBtn.el.disabled = true;
-screenShareBtn.el.style.opacity = '0.5';
-screenShareBtn.el.style.cursor = 'not-allowed';
+    // Create floating annotation panel
+    const floatingPanel = document.createElement("div");
+    floatingPanel.id = "floating-annotation-panel";
+    document.body.appendChild(floatingPanel);
+
+    // Function to populate floating panel on mobile
+    function updateFloatingPanel() {
+        const toolContainer = document.getElementById("tool-container");
+        const colorPicker = document.getElementById("color-picker");
+        const brushControls = document.getElementById("brush-controls");
+        const otherControls = document.getElementById("other-controls");
+        const controlsRight = document.querySelector(".controls-right");
+
+        if (window.innerWidth <= 1300) {
+            // Move elements to floating panel on mobile
+            floatingPanel.innerHTML = "";
+
+            // Tools section
+            const toolsSection = document.createElement("div");
+            toolsSection.className = "panel-section";
+            if (toolContainer) toolsSection.appendChild(toolContainer);
+            floatingPanel.appendChild(toolsSection);
+
+            // Colors section
+            const colorsSection = document.createElement("div");
+            colorsSection.className = "panel-section";
+            if (colorPicker) colorsSection.appendChild(colorPicker);
+            floatingPanel.appendChild(colorsSection);
+
+            // Brush controls section
+            const brushSection = document.createElement("div");
+            brushSection.className = "panel-section";
+            if (brushControls) brushSection.appendChild(brushControls);
+            floatingPanel.appendChild(brushSection);
+
+            // Undo/Redo/Clear section - move individual buttons from other-controls
+            const actionSection = document.createElement("div");
+            actionSection.className = "panel-section";
+            const undoBtnEl = document.getElementById("undo-btn");
+            const redoBtnEl = document.getElementById("redo-btn");
+            const clearBtnEl = document.getElementById("clear-btn");
+            if (undoBtnEl) actionSection.appendChild(undoBtnEl);
+            if (redoBtnEl) actionSection.appendChild(redoBtnEl);
+            if (clearBtnEl) actionSection.appendChild(clearBtnEl);
+            if (actionSection.children.length > 0)
+                floatingPanel.appendChild(actionSection);
+
+            // Show toggle button on mobile
+            annotationToggleBtn.style.display = "inline-flex";
+        } else {
+            // Move elements back to controls-right on desktop
+
+            // Move undo/redo/clear back to other-controls in the correct order
+            const undoBtnEl = document.getElementById("undo-btn");
+            const redoBtnEl = document.getElementById("redo-btn");
+            const clearBtnEl = document.getElementById("clear-btn");
+
+            // Insert in correct order at the beginning of other-controls
+            if (
+                undoBtnEl &&
+                otherControls &&
+                !otherControls.contains(undoBtnEl)
+            ) {
+                otherControls.insertBefore(undoBtnEl, otherControls.firstChild);
+            }
+            if (
+                redoBtnEl &&
+                otherControls &&
+                !otherControls.contains(redoBtnEl)
+            ) {
+                otherControls.insertBefore(
+                    redoBtnEl,
+                    undoBtnEl
+                        ? undoBtnEl.nextSibling
+                        : otherControls.firstChild,
+                );
+            }
+            if (
+                clearBtnEl &&
+                otherControls &&
+                !otherControls.contains(clearBtnEl)
+            ) {
+                otherControls.insertBefore(
+                    clearBtnEl,
+                    redoBtnEl
+                        ? redoBtnEl.nextSibling
+                        : otherControls.firstChild,
+                );
+            }
 
-// Create recording button
-const recordContainer = document.getElementById('record-container');
+            // Insert elements back in correct order
+            if (toolContainer && !controlsRight.contains(toolContainer)) {
+                controlsRight.insertBefore(
+                    toolContainer,
+                    otherControls || controlsRight.firstChild,
+                );
+            }
+            if (colorPicker && !controlsRight.contains(colorPicker)) {
+                controlsRight.insertBefore(
+                    colorPicker,
+                    otherControls || controlsRight.firstChild,
+                );
+            }
+            if (brushControls && !controlsRight.contains(brushControls)) {
+                controlsRight.insertBefore(
+                    brushControls,
+                    otherControls || controlsRight.firstChild,
+                );
+            }
 
-const recordBtn = new Button(recordContainer, {
-    className: 'btn',
-    label: '<i class="fa-solid fa-circle"></i>',
-});
+            // Clear floating panel after moving elements
+            floatingPanel.innerHTML = "";
 
-// Initially disabled until presentation is loaded
-recordBtn.el.disabled = true;
-recordBtn.el.style.opacity = '0.5';
-recordBtn.el.style.cursor = 'not-allowed';
-
-// Create floating annotation panel toggle button for mobile
-const annotationToggleBtn = document.createElement('button');
-annotationToggleBtn.id = 'annotation-panel-toggle';
-annotationToggleBtn.className = 'btn';
-annotationToggleBtn.innerHTML = '<i class="fa-solid fa-pen"></i>';
-annotationToggleBtn.title = 'Annotation Tools';
-
-// Insert after nav-container instead of in display-controls
-const navContainerElement = document.getElementById('nav-container');
-const controlsLeft = document.querySelector('.controls-left');
-if (navContainerElement && navContainerElement.nextSibling) {
-    controlsLeft.insertBefore(annotationToggleBtn, navContainerElement.nextSibling);
-} else if (navContainerElement) {
-    navContainerElement.parentNode.insertBefore(annotationToggleBtn, navContainerElement.nextSibling);
-} else {
-    controlsLeft.appendChild(annotationToggleBtn);
-}
-
-// Create floating annotation panel
-const floatingPanel = document.createElement('div');
-floatingPanel.id = 'floating-annotation-panel';
-document.body.appendChild(floatingPanel);
-
-// Function to populate floating panel on mobile
-function updateFloatingPanel() {
-    const toolContainer = document.getElementById('tool-container');
-    const colorPicker = document.getElementById('color-picker');
-    const brushControls = document.getElementById('brush-controls');
-    const otherControls = document.getElementById('other-controls');
-    const controlsRight = document.querySelector('.controls-right');
-    
-    if (window.innerWidth <= 1300) {
-        // Move elements to floating panel on mobile
-        floatingPanel.innerHTML = '';
-        
-        // Tools section
-        const toolsSection = document.createElement('div');
-        toolsSection.className = 'panel-section';
-        if (toolContainer) toolsSection.appendChild(toolContainer);
-        floatingPanel.appendChild(toolsSection);
-        
-        // Colors section
-        const colorsSection = document.createElement('div');
-        colorsSection.className = 'panel-section';
-        if (colorPicker) colorsSection.appendChild(colorPicker);
-        floatingPanel.appendChild(colorsSection);
-        
-        // Brush controls section
-        const brushSection = document.createElement('div');
-        brushSection.className = 'panel-section';
-        if (brushControls) brushSection.appendChild(brushControls);
-        floatingPanel.appendChild(brushSection);
-        
-        // Undo/Redo/Clear section - move individual buttons from other-controls
-        const actionSection = document.createElement('div');
-        actionSection.className = 'panel-section';
-        const undoBtnEl = document.getElementById('undo-btn');
-        const redoBtnEl = document.getElementById('redo-btn');
-        const clearBtnEl = document.getElementById('clear-btn');
-        if (undoBtnEl) actionSection.appendChild(undoBtnEl);
-        if (redoBtnEl) actionSection.appendChild(redoBtnEl);
-        if (clearBtnEl) actionSection.appendChild(clearBtnEl);
-        if (actionSection.children.length > 0) floatingPanel.appendChild(actionSection);
-        
-        // Show toggle button on mobile
-        annotationToggleBtn.style.display = 'inline-flex';
-    } else {
-        // Move elements back to controls-right on desktop
-        
-        // Move undo/redo/clear back to other-controls in the correct order
-        const undoBtnEl = document.getElementById('undo-btn');
-        const redoBtnEl = document.getElementById('redo-btn');
-        const clearBtnEl = document.getElementById('clear-btn');
-        
-        // Insert in correct order at the beginning of other-controls
-        if (undoBtnEl && otherControls && !otherControls.contains(undoBtnEl)) {
-            otherControls.insertBefore(undoBtnEl, otherControls.firstChild);
-        }
-        if (redoBtnEl && otherControls && !otherControls.contains(redoBtnEl)) {
-            otherControls.insertBefore(redoBtnEl, undoBtnEl ? undoBtnEl.nextSibling : otherControls.firstChild);
-        }
-        if (clearBtnEl && otherControls && !otherControls.contains(clearBtnEl)) {
-            otherControls.insertBefore(clearBtnEl, redoBtnEl ? redoBtnEl.nextSibling : otherControls.firstChild);
-        }
-        
-        // Insert elements back in correct order
-        if (toolContainer && !controlsRight.contains(toolContainer)) {
-            controlsRight.insertBefore(toolContainer, otherControls || controlsRight.firstChild);
-        }
-        if (colorPicker && !controlsRight.contains(colorPicker)) {
-            controlsRight.insertBefore(colorPicker, otherControls || controlsRight.firstChild);
+            // Hide toggle button and floating panel on desktop
+            annotationToggleBtn.style.display = "none";
+            floatingPanel.classList.remove("visible");
         }
-        if (brushControls && !controlsRight.contains(brushControls)) {
-            controlsRight.insertBefore(brushControls, otherControls || controlsRight.firstChild);
-        }
-        
-        // Clear floating panel after moving elements
-        floatingPanel.innerHTML = '';
-        
-        // Hide toggle button and floating panel on desktop
-        annotationToggleBtn.style.display = 'none';
-        floatingPanel.classList.remove('visible');
     }
-}
-
-// Initialize and listen for resize
-updateFloatingPanel();
-window.addEventListener('resize', updateFloatingPanel);
-
-// Make floating panel draggable
-let isDragging = false;
-let currentX;
-let currentY;
-let initialX;
-let initialY;
-let xOffset = 0;
-let yOffset = 0;
-
-floatingPanel.addEventListener('mousedown', dragStart);
-floatingPanel.addEventListener('touchstart', dragStart);
-document.addEventListener('mousemove', drag);
-document.addEventListener('touchmove', drag);
-document.addEventListener('mouseup', dragEnd);
-document.addEventListener('touchend', dragEnd);
-
-function dragStart(e) {
-    // Only start drag if clicking on the panel background, not on buttons
-    if (e.target === floatingPanel || e.target.classList.contains('panel-section')) {
-        if (e.type === 'touchstart') {
-            initialX = e.touches[0].clientX - xOffset;
-            initialY = e.touches[0].clientY - yOffset;
-        } else {
-            initialX = e.clientX - xOffset;
-            initialY = e.clientY - yOffset;
+
+    // Initialize and listen for resize
+    updateFloatingPanel();
+    window.addEventListener("resize", updateFloatingPanel);
+
+    // Make floating panel draggable
+    let isDragging = false;
+    let currentX;
+    let currentY;
+    let initialX;
+    let initialY;
+    let xOffset = 0;
+    let yOffset = 0;
+
+    floatingPanel.addEventListener("mousedown", dragStart);
+    floatingPanel.addEventListener("touchstart", dragStart);
+    document.addEventListener("mousemove", drag);
+    document.addEventListener("touchmove", drag);
+    document.addEventListener("mouseup", dragEnd);
+    document.addEventListener("touchend", dragEnd);
+
+    function dragStart(e) {
+        // Only start drag if clicking on the panel background, not on buttons
+        if (
+            e.target === floatingPanel ||
+            e.target.classList.contains("panel-section")
+        ) {
+            if (e.type === "touchstart") {
+                initialX = e.touches[0].clientX - xOffset;
+                initialY = e.touches[0].clientY - yOffset;
+            } else {
+                initialX = e.clientX - xOffset;
+                initialY = e.clientY - yOffset;
+            }
+            isDragging = true;
+            floatingPanel.style.cursor = "grabbing";
         }
-        isDragging = true;
-        floatingPanel.style.cursor = 'grabbing';
     }
-}
-
-function drag(e) {
-    if (isDragging) {
-        e.preventDefault();
-        
-        if (e.type === 'touchmove') {
-            currentX = e.touches[0].clientX - initialX;
-            currentY = e.touches[0].clientY - initialY;
-        } else {
-            currentX = e.clientX - initialX;
-            currentY = e.clientY - initialY;
-        }
 
-        xOffset = currentX;
-        yOffset = currentY;
+    function drag(e) {
+        if (isDragging) {
+            e.preventDefault();
+
+            if (e.type === "touchmove") {
+                currentX = e.touches[0].clientX - initialX;
+                currentY = e.touches[0].clientY - initialY;
+            } else {
+                currentX = e.clientX - initialX;
+                currentY = e.clientY - initialY;
+            }
+
+            xOffset = currentX;
+            yOffset = currentY;
+
+            setTranslate(currentX, currentY, floatingPanel);
+        }
+    }
 
-        setTranslate(currentX, currentY, floatingPanel);
+    function dragEnd() {
+        if (isDragging) {
+            initialX = currentX;
+            initialY = currentY;
+            isDragging = false;
+            floatingPanel.style.cursor = "grab";
+        }
     }
-}
-
-function dragEnd() {
-    if (isDragging) {
-        initialX = currentX;
-        initialY = currentY;
-        isDragging = false;
-        floatingPanel.style.cursor = 'grab';
+
+    function setTranslate(xPos, yPos, el) {
+        el.style.transform = `translate(${xPos}px, ${yPos}px)`;
     }
-}
 
-function setTranslate(xPos, yPos, el) {
-    el.style.transform = `translate(${xPos}px, ${yPos}px)`;
-}
+    // Set initial cursor
+    floatingPanel.style.cursor = "grab";
 
-// Set initial cursor
-floatingPanel.style.cursor = 'grab';
+    // Toggle panel visibility
+    annotationToggleBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        floatingPanel.classList.toggle("visible");
+    });
 
-// Toggle panel visibility
-annotationToggleBtn.addEventListener('click', (e) => {
-    e.stopPropagation();
-    floatingPanel.classList.toggle('visible');
-});
+    // Close panel when clicking outside
+    document.addEventListener("click", (e) => {
+        if (
+            !floatingPanel.contains(e.target) &&
+            e.target !== annotationToggleBtn &&
+            !annotationToggleBtn.contains(e.target)
+        ) {
+            floatingPanel.classList.remove("visible");
+        }
+    });
+
+    // Keep list of controls for enabling/disabling (upload button remains enabled)
+    const __beamer_controls = [
+        hand,
+        pen,
+        highlighter,
+        eraser,
+        ...colorBtns,
+        brushMinusBtn,
+        brushPlusBtn,
+        prevBtn,
+        nextBtn,
+        undoBtn,
+        redoBtn,
+        clearBtn,
+        surveyBtn,
+    ];
+    // QUESTION: Why aren't screenShareBtn and recordBtn in this array?^
+
+    // Disable at startup
+    setControlsEnabledAfterUpload(false, __beamer_controls);
+
+    // Full set used for temporary disabling (includes upload button)
+    const __beamer_all_buttons = [...__beamer_controls, uploadBtn];
+
+    const ann_canvas_container = document.getElementById("ann-canvas");
+    const annCvs = new Canvas(ann_canvas_container);
+    const slide_canvas_container = document.getElementById("pdf-canvas");
+    const pdfCvs = new Canvas(slide_canvas_container, false);
+
+    const updateHistoryButtons = () => {
+        undoBtn.el.disabled = !annCvs.canUndo();
+        redoBtn.el.disabled = !annCvs.canRedo();
+    };
+    annCvs.setHistoryChangeHandler(updateHistoryButtons);
+    updateHistoryButtons();
+
+    hand.onClick(() => annCvs.setPointerMode("hand"));
+    pen.onClick(() => annCvs.setPointerMode("draw"));
+    highlighter.onClick(() => annCvs.setPointerMode("highlight"));
+    eraser.onClick(() => annCvs.setPointerMode("erase"));
 
-// Close panel when clicking outside
-document.addEventListener('click', (e) => {
-    if (!floatingPanel.contains(e.target) && e.target !== annotationToggleBtn && !annotationToggleBtn.contains(e.target)) {
-        floatingPanel.classList.remove('visible');
+    function onToolSelected(selected) {
+        if (selected === pen) annCvs.setPointerMode("draw");
+        else if (selected === highlighter) annCvs.setPointerMode("highlight");
+        else if (selected === eraser) annCvs.setPointerMode("erase");
     }
-});
 
-// Keep list of controls for enabling/disabling (upload button remains enabled)
-const __beamer_controls = [
-    hand, pen, highlighter, eraser,
-    ...colorBtns,
-    brushMinusBtn, brushPlusBtn,
-    prevBtn, nextBtn,
-    undoBtn, redoBtn,
-    clearBtn, surveyBtn
-];
-// QUESTION: Why aren't screenShareBtn and recordBtn in this array?^
-
-// Disable at startup
-setControlsEnabledAfterUpload(false, __beamer_controls);
-
-// Full set used for temporary disabling (includes upload button)
-const __beamer_all_buttons = [...__beamer_controls, uploadBtn];
-
-const ann_canvas_container = document.getElementById('ann-canvas');
-const annCvs = new Canvas(ann_canvas_container);
-const slide_canvas_container = document.getElementById('pdf-canvas');
-const pdfCvs = new Canvas(slide_canvas_container, false);
-
-const updateHistoryButtons = () => {
-    undoBtn.el.disabled = !annCvs.canUndo();
-    redoBtn.el.disabled = !annCvs.canRedo();
-};
-annCvs.setHistoryChangeHandler(updateHistoryButtons);
-updateHistoryButtons();
-
-hand.onClick(() => annCvs.setPointerMode('hand'));
-pen.onClick(() => annCvs.setPointerMode('draw'));
-highlighter.onClick(() => annCvs.setPointerMode('highlight'));
-eraser.onClick(() => annCvs.setPointerMode('erase'));
-
-function onToolSelected(selected) {
-    if (selected === pen) annCvs.setPointerMode('draw');
-    else if (selected === highlighter) annCvs.setPointerMode('highlight');
-    else if (selected === eraser) annCvs.setPointerMode('erase');
-}
-
-toolSelector.buttons.forEach(item => {
-    item.el.addEventListener('click', () => onToolSelected(item));
-});
+    toolSelector.buttons.forEach((item) => {
+        item.el.addEventListener("click", () => onToolSelected(item));
+    });
 
-colorBtns.forEach(btn => {
-  btn.onClick(() => {
-    annCvs.setStrokeColor(getComputedStyle(btn.el).backgroundColor);
-  });
-});
+    colorBtns.forEach((btn) => {
+        btn.onClick(() => {
+            annCvs.setStrokeColor(getComputedStyle(btn.el).backgroundColor);
+        });
+    });
 
-brushMinusBtn.onClick(() => {
-    let val = parseInt(brushSizeLbl.get());
-    if (val > 1) val--;
-    brushSizeLbl.set(String(val));
-    annCvs.setStrokeWidth(val);
-});
+    brushMinusBtn.onClick(() => {
+        let val = parseInt(brushSizeLbl.get());
+        if (val > 1) val--;
+        brushSizeLbl.set(String(val));
+        annCvs.setStrokeWidth(val);
+    });
 
-brushPlusBtn.onClick(() => {
-    let val = parseInt(brushSizeLbl.get());
-    if (val < 9) val++;
-    brushSizeLbl.set(String(val));
-    annCvs.setStrokeWidth(val);
-});
+    brushPlusBtn.onClick(() => {
+        let val = parseInt(brushSizeLbl.get());
+        if (val < 9) val++;
+        brushSizeLbl.set(String(val));
+        annCvs.setStrokeWidth(val);
+    });
 
-clearBtn.onClick(() => {
-    annCvs.clearAndCommit();
-    // Clear current slide annotations locally and notify server
-    annotations[currentSlide] = null;
-    socket.emit('clear_annotations');
-});
+    clearBtn.onClick(() => {
+        annCvs.clearAndCommit();
+        // Clear current slide annotations locally and notify server
+        annotations[currentSlide] = null;
+        socket.emit("clear_annotations");
+    });
 
-undoBtn.onClick(async () => {
-    await annCvs.undo();
-    syncAnnotations();
-});
+    undoBtn.onClick(async () => {
+        await annCvs.undo();
+        syncAnnotations();
+    });
 
-redoBtn.onClick(async () => {
-    await annCvs.redo();
-    syncAnnotations();
-});
+    redoBtn.onClick(async () => {
+        await annCvs.redo();
+        syncAnnotations();
+    });
 
-const zipInput = document.getElementById("upload-zip");
-const folderInput = document.getElementById("upload-folder");
+    const zipInput = document.getElementById("upload-zip");
+    const folderInput = document.getElementById("upload-folder");
 
-uploadBtn.onClick(() => {
-    showUploadModal();
-});
+    uploadBtn.onClick(() => {
+        showUploadModal();
+    });
 
-function showUploadModal() {
-    const existingModal = document.querySelector('.upload-modal-overlay');
-    if (existingModal) existingModal.remove();
-    
-    const overlay = document.createElement('div');
-    overlay.className = 'custom-modal-overlay';
-    
-    const modal = document.createElement('div');
-    modal.className = 'custom-modal-content';
-    modal.style.maxWidth = '500px';
-    
-    modal.innerHTML = `
+    function showUploadModal() {
+        const existingModal = document.querySelector(".upload-modal-overlay");
+        if (existingModal) existingModal.remove();
+
+        const overlay = document.createElement("div");
+        overlay.className = "custom-modal-overlay";
+
+        const modal = document.createElement("div");
+        modal.className = "custom-modal-content";
+        modal.style.maxWidth = "500px";
+
+        modal.innerHTML = `
         <div class="custom-modal-icon">
             <i class="fa-solid fa-upload"></i>
         </div>
@@ -487,640 +558,673 @@ function showUploadModal() {
             <button class="custom-modal-btn custom-modal-btn-cancel">Cancel</button>
         </div>
     `;
-    
-    overlay.appendChild(modal);
-    document.body.appendChild(overlay);
-    
-    // Handle button clicks
-    modal.querySelector('[data-type="zip"]').onclick = () => {
-        overlay.remove();
-        zipInput.click();
-    };
-    
-    modal.querySelector('[data-type="folder"]').onclick = () => {
-        overlay.remove();
-        folderInput.click();
-    };
-    
-    const cancelBtn = modal.querySelector('.custom-modal-btn-cancel');
-    cancelBtn.onclick = () => {
-        overlay.remove();
-    };
-    
-    overlay.onclick = (e) => {
-        if (e.target === overlay) overlay.remove();
-    };
-    
-    // ESC key handler
-    const escHandler = (e) => {
-        if (e.key === 'Escape') {
+
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+
+        // Handle button clicks
+        modal.querySelector('[data-type="zip"]').onclick = () => {
             overlay.remove();
-            document.removeEventListener('keydown', escHandler);
-        }
-    };
-    document.addEventListener('keydown', escHandler);
-}
-
-function populateSlideNavigator() {
-    const navigator = document.getElementById('slide-navigator');
-    navigator.innerHTML = '';
-    
-    for (let i = 0; i < totalSlides; i++) {
-        const item = document.createElement('div');
-        item.className = 'slide-nav-item';
-        item.textContent = i + 1;
-        item.dataset.slideIndex = i;
-        
-        item.onclick = () => {
-            goToSlide(i);
+            zipInput.click();
+        };
+
+        modal.querySelector('[data-type="folder"]').onclick = () => {
+            overlay.remove();
+            folderInput.click();
+        };
+
+        const cancelBtn = modal.querySelector(".custom-modal-btn-cancel");
+        cancelBtn.onclick = () => {
+            overlay.remove();
+        };
+
+        overlay.onclick = (e) => {
+            if (e.target === overlay) overlay.remove();
+        };
+
+        // ESC key handler
+        const escHandler = (e) => {
+            if (e.key === "Escape") {
+                overlay.remove();
+                document.removeEventListener("keydown", escHandler);
+            }
         };
-        
-        navigator.appendChild(item);
+        document.addEventListener("keydown", escHandler);
     }
-    
-    updateSlideNavigator();
-}
-
-function updateSlideNavigator() {
-    const items = document.querySelectorAll('.slide-nav-item');
-    items.forEach((item, index) => {
-        if (index === currentSlide) {
-            item.classList.add('active');
-            // Scroll into view
-            item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        } else {
-            item.classList.remove('active');
+
+    function populateSlideNavigator() {
+        const navigator = document.getElementById("slide-navigator");
+        navigator.innerHTML = "";
+
+        for (let i = 0; i < totalSlides; i++) {
+            const item = document.createElement("div");
+            item.className = "slide-nav-item";
+            item.textContent = i + 1;
+            item.dataset.slideIndex = i;
+
+            item.onclick = () => {
+                goToSlide(i);
+            };
+
+            navigator.appendChild(item);
         }
-    });
-}
-
-let zipFile = null;
-let slideConfigs = {};
-let mediaCache = {};
-let annotations = {};
-let currentSlide = 0;
-let totalSlides = 0;
-
-async function loadSlideConfig(slideIndex) {
-    if (slideConfigs[slideIndex]) {
-        return slideConfigs[slideIndex];
-    }
-    
-    const configFileName = `config/s${slideIndex}.json`;
-    const configFile = zipFile.file(configFileName);
-    
-    if (!configFile) {
-        slideConfigs[slideIndex] = null;
-        return null;
-    }
-    
-    const configText = await configFile.async("string");
-    const config = JSON.parse(configText);
-    slideConfigs[slideIndex] = config;
-    
-    console.log(`Loaded config for slide ${slideIndex}:`, config);
-    return config;
-}
-
-async function loadMediaFromPath(path) {
-    if (mediaCache[path]) {
-        return mediaCache[path];
-    }
-    
-    const file = zipFile.file(path);
-    if (!file) {
-        console.error(`Media file not found: ${path}`);
-        return null;
+
+        updateSlideNavigator();
     }
-    
-    const blob = await file.async("blob");
-    const url = URL.createObjectURL(blob);
-    mediaCache[path] = url;
-    
-    console.log(`Loaded media: ${path}`);
-    return url;
-}
-
-let annotationSyncTimeout = null;
-annCvs.canvas.addEventListener('mouseup', () => syncAnnotations());
-annCvs.canvas.addEventListener('touchend', () => syncAnnotations());
-
-function syncAnnotations() {
-    clearTimeout(annotationSyncTimeout);
-    annotationSyncTimeout = setTimeout(() => {
-        const annData = annCvs.canvas.toDataURL("image/png");
-        // Save annotations locally per-slide and emit to server
-        annotations[currentSlide] = annData;
-        socket.emit('annotation_update', {
-            annotations: annData,
-            slideIndex: currentSlide
+
+    function updateSlideNavigator() {
+        const items = document.querySelectorAll(".slide-nav-item");
+        items.forEach((item, index) => {
+            if (index === currentSlide) {
+                item.classList.add("active");
+                // Scroll into view
+                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            } else {
+                item.classList.remove("active");
+            }
         });
-    }, 100);
-}
-
-// Helper function to update all media element positions after resize
-function updateMediaPositions() {
-    // Get the container's actual size on screen
-    const rect = slide_canvas_container.getBoundingClientRect();
-    
-    // Update videos using stored fractional positions
-    const videos = slide_canvas_container.querySelectorAll('video');
-    videos.forEach(video => {
-        const x = parseFloat(video.dataset.videoX);
-        const y = parseFloat(video.dataset.videoY);
-        const width = parseFloat(video.dataset.videoWidth);
-        const height = parseFloat(video.dataset.videoHeight);
-        
-        if (!isNaN(x) && !isNaN(y) && !isNaN(width) && !isNaN(height)) {
-            video.style.left = `${x * rect.width}px`;
-            video.style.top = `${y * rect.height}px`;
-            video.style.width = `${width * rect.width}px`;
-            video.style.height = `${height * rect.height}px`;
-        }
-    });
-    
-    // Update 3D models using stored fractional positions
-    const models = slide_canvas_container.querySelectorAll('model-viewer');
-    models.forEach(mv => {
-        const x = parseFloat(mv.dataset.modelX);
-        const y = parseFloat(mv.dataset.modelY);
-        const width = parseFloat(mv.dataset.modelWidth);
-        const height = parseFloat(mv.dataset.modelHeight);
-        
-        if (!isNaN(x) && !isNaN(y) && !isNaN(width) && !isNaN(height)) {
-            mv.style.left = `${x * rect.width}px`;
-            mv.style.top = `${y * rect.height}px`;
-            mv.style.width = `${width * rect.width}px`;
-            mv.style.height = `${height * rect.height}px`;
+    }
+
+    let zipFile = null;
+    let slideConfigs = {};
+    let mediaCache = {};
+    let annotations = {};
+    let currentSlide = 0;
+    let totalSlides = 0;
+
+    async function loadSlideConfig(slideIndex) {
+        if (slideConfigs[slideIndex]) {
+            return slideConfigs[slideIndex];
         }
-    });
-    
-    // Update widgets
-    updateWidgetPositions(slide_canvas_container);
-}
 
+        const configFileName = `config/s${slideIndex}.json`;
+        const configFile = zipFile.file(configFileName);
 
-prevBtn.onClick(() => goToSlide(currentSlide - 1));
-nextBtn.onClick(() => goToSlide(currentSlide + 1));
+        if (!configFile) {
+            slideConfigs[slideIndex] = null;
+            return null;
+        }
 
-document.addEventListener('keydown', (e) => {
-    if (surveyOverlayVisible || resultsOverlayVisible) return;
-    if (e.key === 'ArrowLeft') goToSlide(currentSlide - 1);
-    if (e.key === 'ArrowRight') goToSlide(currentSlide + 1);
-});
+        const configText = await configFile.async("string");
+        const config = JSON.parse(configText);
+        slideConfigs[slideIndex] = config;
 
-async function goToSlide(slideIndex) {
-    if (slideIndex < 0 || slideIndex >= totalSlides) return;
-    
-    currentSlide = slideIndex;
-    await renderSlide(currentSlide);
-    updateSlideNavigator();
-    
-    const annData = annCvs.canvas.toDataURL("image/png");
-    socket.emit('slide_change', {
-        slideIndex: currentSlide,
-        annotations: annData
-    });
-}
-
-function populateSlideNavigator() {
-    const navigator = document.getElementById('slide-navigator');
-    navigator.innerHTML = '';
-    
-    for (let i = 0; i < totalSlides; i++) {
-        const item = document.createElement('div');
-        item.className = 'slide-nav-item';
-        item.textContent = i + 1;
-        item.dataset.slideIndex = i;
-        
-        item.onclick = () => {
-            goToSlide(i);
-        };
-        
-        navigator.appendChild(item);
+        console.log(`Loaded config for slide ${slideIndex}:`, config);
+        return config;
     }
-    
-    updateSlideNavigator();
-}
-
-function updateSlideNavigator() {
-    const items = document.querySelectorAll('.slide-nav-item');
-    items.forEach((item, index) => {
-        if (index === currentSlide) {
-            item.classList.add('active');
-            // Scroll into view
-            item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        } else {
-            item.classList.remove('active');
+
+    async function loadMediaFromPath(path) {
+        if (mediaCache[path]) {
+            return mediaCache[path];
         }
-    });
-}
-
-async function renderSlide(slideIndex) {
-    console.log('renderSlide called:', slideIndex);
-    
-    if (!zipFile) {
-        console.log('No ZIP file loaded');
-        return;
-    }
-    
-    const pdfFile = zipFile.file("slides.pdf");
-    if (!pdfFile) {
-        console.error("No slides.pdf found in ZIP");
-        return;
-    }
-    
-    const pdfData = await pdfFile.async("arraybuffer");
-    const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
-    const page = await pdfDoc.getPage(slideIndex + 1);
-    
-    await pdfCvs.renderPDFPage(page);
-
-    // Load per-slide annotations (clear then draw saved image if present)
-    try {
-        annCvs.clear();
-        if (annotations[slideIndex]) {
-            await annCvs.loadAnnotations(annotations[slideIndex]);
-        } else {
-            annCvs.resetHistory();
+
+        const file = zipFile.file(path);
+        if (!file) {
+            console.error(`Media file not found: ${path}`);
+            return null;
         }
-    } catch (e) {
-        console.warn('Error loading annotations for slide', slideIndex, e);
+
+        const blob = await file.async("blob");
+        const url = URL.createObjectURL(blob);
+        mediaCache[path] = url;
+
+        console.log(`Loaded media: ${path}`);
+        return url;
     }
-    
-    const existingMedia = slide_canvas_container.querySelectorAll('video, audio, model-viewer');
-    existingMedia.forEach(el => el.remove());
-    
-    cleanupWidgets(slide_canvas_container);
-    
-    const slideConfig = await loadSlideConfig(slideIndex);
-    
-    if (!slideConfig) {
-        console.log('No config for this slide');
-        return;
+
+    let annotationSyncTimeout = null;
+    annCvs.canvas.addEventListener("mouseup", () => syncAnnotations());
+    annCvs.canvas.addEventListener("touchend", () => syncAnnotations());
+
+    function syncAnnotations() {
+        clearTimeout(annotationSyncTimeout);
+        annotationSyncTimeout = setTimeout(() => {
+            const annData = annCvs.canvas.toDataURL("image/png");
+            // Save annotations locally per-slide and emit to server
+            annotations[currentSlide] = annData;
+            socket.emit("annotation_update", {
+                annotations: annData,
+                slideIndex: currentSlide,
+            });
+        }, 100);
     }
-    
-    console.log('Videos to render:', slideConfig.videos?.length || 0);
-    console.log('Models to render:', slideConfig.models?.length || 0);
-    console.log('Widgets to render:', slideConfig.widgets?.length || 0);
-    
-    // Get container's actual size for positioning all media elements
-    const containerRect = slide_canvas_container.getBoundingClientRect();
-    
-    if (slideConfig.videos) {
-        for (const v of slideConfig.videos) {
-            const videoURL = await loadMediaFromPath(v.path);
-            if (!videoURL) continue;
-            
-            const video = document.createElement("video");
-            video.src = videoURL;
-            video.volume = v.volume || 1.0;
-            video.dataset.videoId = v.id;
-            
-            // Store fractional positions for resize handling
-            video.dataset.videoX = v.x;
-            video.dataset.videoY = v.y;
-            video.dataset.videoWidth = v.width;
-            video.dataset.videoHeight = v.height;
-            
-            video.style.position = "absolute";
-            video.style.left = `${v.x * containerRect.width}px`;
-            video.style.top = `${v.y * containerRect.height}px`;
-            video.style.width = `${v.width * containerRect.width}px`;
-            video.style.height = `${v.height * containerRect.height}px`;
-            video.style.objectFit = "contain";
-            video.style.zIndex = v.zIndex || 5;
-            
-            if (v.playMode === "once") {
-                video.autoplay = true;
-                video.loop = false;
-            }
-            if (v.playMode === "loop") {
-                video.autoplay = true;
-                video.loop = true;
+
+    // Helper function to update all media element positions after resize
+    function updateMediaPositions() {
+        // Get the container's actual size on screen
+        const rect = slide_canvas_container.getBoundingClientRect();
+
+        // Update videos using stored fractional positions
+        const videos = slide_canvas_container.querySelectorAll("video");
+        videos.forEach((video) => {
+            const x = parseFloat(video.dataset.videoX);
+            const y = parseFloat(video.dataset.videoY);
+            const width = parseFloat(video.dataset.videoWidth);
+            const height = parseFloat(video.dataset.videoHeight);
+
+            if (!isNaN(x) && !isNaN(y) && !isNaN(width) && !isNaN(height)) {
+                video.style.left = `${x * rect.width}px`;
+                video.style.top = `${y * rect.height}px`;
+                video.style.width = `${width * rect.width}px`;
+                video.style.height = `${height * rect.height}px`;
             }
-            if (v.playMode === "manual") {
-                video.controls = true;
+        });
+
+        // Update 3D models using stored fractional positions
+        const models = slide_canvas_container.querySelectorAll("model-viewer");
+        models.forEach((mv) => {
+            const x = parseFloat(mv.dataset.modelX);
+            const y = parseFloat(mv.dataset.modelY);
+            const width = parseFloat(mv.dataset.modelWidth);
+            const height = parseFloat(mv.dataset.modelHeight);
+
+            if (!isNaN(x) && !isNaN(y) && !isNaN(width) && !isNaN(height)) {
+                mv.style.left = `${x * rect.width}px`;
+                mv.style.top = `${y * rect.height}px`;
+                mv.style.width = `${width * rect.width}px`;
+                mv.style.height = `${height * rect.height}px`;
             }
-            
-            video.addEventListener('play', () => {
-                socket.emit('video_action', {
-                    videoId: v.id,
-                    slideIndex: currentSlide,
-                    action: 'play',
-                    currentTime: video.currentTime
-                });
-            });
-            
-            video.addEventListener('pause', () => {
-                socket.emit('video_action', {
-                    videoId: v.id,
-                    slideIndex: currentSlide,
-                    action: 'pause',
-                    currentTime: video.currentTime
-                });
-            });
+        });
 
-            // Allow clicking the video to toggle play/pause
-            video.addEventListener('click', (ev) => {
-                // Only toggle when in hand mode (clicks should pass through otherwise)
-                try {
-                    if (video.paused) video.play();
-                    else video.pause();
-                } catch (e) {
-                    console.error('Error toggling video playback:', e);
-                }
-                ev.stopPropagation();
-            });
-            
-            slide_canvas_container.appendChild(video);
-        }
+        // Update widgets
+        updateWidgetPositions(slide_canvas_container);
     }
-    
-    if (slideConfig.models) {
-        for (const m of slideConfig.models) {
-            const modelURL = await loadMediaFromPath(m.path);
-            if (!modelURL) continue;
-            
-            const mv = document.createElement("model-viewer");
-            mv.src = modelURL;
-            mv.alt = m.alt || "3D model";
-            mv.dataset.modelId = m.id;
-            
-            // Store fractional positions for resize handling
-            mv.dataset.modelX = m.x;
-            mv.dataset.modelY = m.y;
-            mv.dataset.modelWidth = m.width;
-            mv.dataset.modelHeight = m.height;
-            
-            mv.setAttribute("camera-controls", "");
-            mv.setAttribute("shadow-intensity", "1");
-            mv.setAttribute("auto-rotate", m.autoRotate ? "true" : "false");
-            
-            mv.style.position = "absolute";
-            mv.style.left = `${m.x * containerRect.width}px`;
-            mv.style.top = `${m.y * containerRect.height}px`;
-            mv.style.width = `${m.width * containerRect.width}px`;
-            mv.style.height = `${m.height * containerRect.height}px`;
-            mv.style.zIndex = m.zIndex || 5;
-            
-            mv.addEventListener('camera-change', () => {
-                const camera = mv.getCameraOrbit();
-                const target = mv.getCameraTarget();
-                socket.emit('model_interaction', {
-                    modelId: m.id,
-                    slideIndex: currentSlide,
-                    camera: {
-                        theta: camera.theta,
-                        phi: camera.phi,
-                        radius: camera.radius
-                    },
-                    target: {
-                        x: target.x,
-                        y: target.y,
-                        z: target.z
-                    }
-                });
-            });
-            
-            slide_canvas_container.appendChild(mv);
-        }
+
+    prevBtn.onClick(() => goToSlide(currentSlide - 1));
+    nextBtn.onClick(() => goToSlide(currentSlide + 1));
+
+    document.addEventListener("keydown", (e) => {
+        if (surveyOverlayVisible || resultsOverlayVisible) return;
+        if (e.key === "ArrowLeft") goToSlide(currentSlide - 1);
+        if (e.key === "ArrowRight") goToSlide(currentSlide + 1);
+    });
+
+    async function goToSlide(slideIndex) {
+        if (slideIndex < 0 || slideIndex >= totalSlides) return;
+
+        currentSlide = slideIndex;
+        await renderSlide(currentSlide);
+        updateSlideNavigator();
+
+        const annData = annCvs.canvas.toDataURL("image/png");
+        socket.emit("slide_change", {
+            slideIndex: currentSlide,
+            annotations: annData,
+        });
     }
-    
-    if (slideConfig.audio) {
-        for (const a of slideConfig.audio) {
-            const audioURL = await loadMediaFromPath(a.path);
-            if (!audioURL) continue;
-            
-            const audio = document.createElement("audio");
-            audio.src = audioURL;
-            audio.volume = a.volume || 1.0;
-            if (a.playMode === "auto") audio.play();
-            if (a.playMode === "manual") audio.controls = true;
-            
-            slide_canvas_container.appendChild(audio);
+
+    function populateSlideNavigator() {
+        const navigator = document.getElementById("slide-navigator");
+        navigator.innerHTML = "";
+
+        for (let i = 0; i < totalSlides; i++) {
+            const item = document.createElement("div");
+            item.className = "slide-nav-item";
+            item.textContent = i + 1;
+            item.dataset.slideIndex = i;
+
+            item.onclick = () => {
+                goToSlide(i);
+            };
+
+            navigator.appendChild(item);
         }
+
+        updateSlideNavigator();
     }
-    
-    if (slideConfig.widgets) {
-        renderWidgets(slideConfig, slide_canvas_container, zipFile);
+
+    function updateSlideNavigator() {
+        const items = document.querySelectorAll(".slide-nav-item");
+        items.forEach((item, index) => {
+            if (index === currentSlide) {
+                item.classList.add("active");
+                // Scroll into view
+                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            } else {
+                item.classList.remove("active");
+            }
+        });
     }
-}
-
-folderInput.addEventListener('change', async (e) => {
-    const files = Array.from(e.target.files);
-    if (!files || files.length === 0) return;
-    console.log('Folder selected with', files.length, 'files');
-
-    const uploadModal = Modal.loading('Uploading Presentation', 'Please wait while your presentation is uploaded...');
-
-    // Create a ZIP file from the selected folder
-    const zip = new JSZip(); // we can use JSZip because we have an HTML script for it (Cloudflare)
-    
-    // Add all files to the ZIP, preserving folder structure
-    for (const file of files) {
-        // Get the relative path from the file's webkitRelativePath
-        const relativePath = file.webkitRelativePath;
-        // Remove the first folder name to get the path relative to the selected folder
-        const pathParts = relativePath.split('/');
-        const zipPath = pathParts.slice(1).join('/');
-        
-        if (zipPath) {
-            const fileData = await file.arrayBuffer();
-            zip.file(zipPath, fileData);
+
+    async function renderSlide(slideIndex) {
+        console.log("renderSlide called:", slideIndex);
+
+        if (!zipFile) {
+            console.log("No ZIP file loaded");
+            return;
+        }
+
+        const pdfFile = zipFile.file("slides.pdf");
+        if (!pdfFile) {
+            console.error("No slides.pdf found in ZIP");
+            return;
         }
-    }
-    
-    console.log('Creating ZIP from folder...');
-    const zipBlob = await zip.generateAsync({ type: 'blob' });
-    
-    const formData = new FormData();
-    formData.append('file', zipBlob, 'presentation.zip');
-
-    try {
-        const response = await fetch('/api/presentation/upload', {
-            method: 'POST',
-            body: formData
-        });
 
-        const data = await response.json();
-        console.log('Upload response:', data);
+        const pdfData = await pdfFile.async("arraybuffer");
+        const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+        const page = await pdfDoc.getPage(slideIndex + 1);
 
-        if (data.success) {
-            await loadAvailableModels();
+        await pdfCvs.renderPDFPage(page);
 
-            console.log(`Presentation uploaded with ${data.models_found} Summarizer Script`);
-            if (data.models && data.models.length > 0) {
-                console.log('Available AI models:', data.models);
+        // Load per-slide annotations (clear then draw saved image if present)
+        try {
+            annCvs.clear();
+            if (annotations[slideIndex]) {
+                await annCvs.loadAnnotations(annotations[slideIndex]);
+            } else {
+                annCvs.resetHistory();
             }
+        } catch (e) {
+            console.warn("Error loading annotations for slide", slideIndex, e);
         }
-    } catch (error) {
-        console.error('Error uploading presentation:', error);
-        uploadModal.close();
-        Modal.error('Upload Failed', 'Failed to upload presentation. Please try again.');
-        return;
-    }
-    
-    // Load the ZIP we just created into memory for frontend use
-    zipFile = zip;
-    console.log('ZIP loaded into memory');
-    
-    const pdfFile = zipFile.file("slides.pdf");
-    if (!pdfFile) {
-        console.error("The uploaded package is not a valid Beamer+ presentation (no slides.pdf found).");
-        uploadModal.close();
-        Modal.error('Invalid Presentation', 'The uploaded package is not a valid Beamer+ presentation.');
-        return;
-    }
-    
-    const pdfData = await pdfFile.async("arraybuffer");
-    const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
-    totalSlides = pdfDoc.numPages;
-    
-    console.log(`Total slides: ${totalSlides}`);
-    
-    currentSlide = 0;
-    slideConfigs = {};
-    mediaCache = {};
-    
-    await renderSlide(0);
-    
-    // Populate slide navigator
-    populateSlideNavigator();
-    
-    socket.emit('presentation_loaded', {
-        totalSlides: totalSlides
-    });
-    // Enable controls now that a presentation is loaded
-    uploadModal.close();
-    setControlsEnabledAfterUpload(true, __beamer_controls);
-    
-    // Enable screen share button
-    screenShareBtn.el.disabled = false;
-    screenShareBtn.el.style.opacity = '1';
-    screenShareBtn.el.style.cursor = 'pointer';
-    
-    // Enable record button
-    recordBtn.el.disabled = false;
-    recordBtn.el.style.opacity = '1';
-    recordBtn.el.style.cursor = 'pointer';
-    
-    updateHistoryButtons();
-});
 
-zipInput.addEventListener('change', async (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-    console.log('ZIP file selected:', file.name);
+        // Clear old media
+        const existingMedia = slide_canvas_container.querySelectorAll(
+            "video, audio, model-viewer",
+        );
+        existingMedia.forEach((el) => el.remove());
+        // Clear old widgets
+        cleanupWidgets(slide_canvas_container);
 
-    const uploadModal = Modal.loading('Uploading Presentation', 'Please wait while your presentation is uploaded...');
+        const slideConfig = await loadSlideConfig(slideIndex);
 
-    const formData = new FormData();
-    formData.append('file', file);
+        if (!slideConfig) {
+            console.log("No config for this slide");
+            return;
+        }
 
-    try {
-        const response = await fetch('/api/presentation/upload', {
-            method: 'POST',
-            body: formData
-        });
+        console.log("Videos to render:", slideConfig.videos?.length || 0);
+        console.log("Models to render:", slideConfig.models?.length || 0);
+        console.log("Widgets to render:", slideConfig.widgets?.length || 0);
+
+        // Get container's actual size for positioning all media elements
+        const containerRect = slide_canvas_container.getBoundingClientRect();
+
+        if (slideConfig.videos) {
+            for (const v of slideConfig.videos) {
+                const videoURL = await loadMediaFromPath(v.path);
+                if (!videoURL) continue;
+
+                const video = document.createElement("video");
+                video.src = videoURL;
+                video.volume = v.volume || 1.0;
+                video.dataset.videoId = v.id;
+
+                // Store fractional positions for resize handling
+                video.dataset.videoX = v.x;
+                video.dataset.videoY = v.y;
+                video.dataset.videoWidth = v.width;
+                video.dataset.videoHeight = v.height;
+
+                video.style.position = "absolute";
+                video.style.left = `${v.x * containerRect.width}px`;
+                video.style.top = `${v.y * containerRect.height}px`;
+                video.style.width = `${v.width * containerRect.width}px`;
+                video.style.height = `${v.height * containerRect.height}px`;
+                video.style.objectFit = "contain";
+                video.style.zIndex = v.zIndex || 5;
+
+                if (v.playMode === "once") {
+                    video.autoplay = true;
+                    video.loop = false;
+                }
+                if (v.playMode === "loop") {
+                    video.autoplay = true;
+                    video.loop = true;
+                }
+                if (v.playMode === "manual") {
+                    video.controls = true;
+                }
 
-        const data = await response.json();
-        console.log('Upload response:', data);
+                video.addEventListener("play", () => {
+                    socket.emit("video_action", {
+                        videoId: v.id,
+                        slideIndex: currentSlide,
+                        action: "play",
+                        currentTime: video.currentTime,
+                    });
+                });
+
+                video.addEventListener("pause", () => {
+                    socket.emit("video_action", {
+                        videoId: v.id,
+                        slideIndex: currentSlide,
+                        action: "pause",
+                        currentTime: video.currentTime,
+                    });
+                });
 
-        if (data.success) {
-            await loadAvailableModels();
+                // Allow clicking the video to toggle play/pause
+                video.addEventListener("click", (ev) => {
+                    // Only toggle when in hand mode (clicks should pass through otherwise)
+                    try {
+                        if (video.paused) video.play();
+                        else video.pause();
+                    } catch (e) {
+                        console.error("Error toggling video playback:", e);
+                    }
+                    ev.stopPropagation();
+                });
 
-            console.log(`Presentation uploaded with ${data.models_found} Summarizer Script`);
-            if (data.models && data.models.length > 0) {
-                console.log('Available AI models:', data.models);
+                slide_canvas_container.appendChild(video);
             }
         }
-    } catch (error) {
-        console.error('Error uploading presentation:', error);
-        uploadModal.close();
-        Modal.error('Upload Failed', 'Failed to upload presentation. Please try again.');
-        return;
+
+        if (slideConfig.models) {
+            for (const m of slideConfig.models) {
+                const modelURL = await loadMediaFromPath(m.path);
+                if (!modelURL) continue;
+
+                const mv = document.createElement("model-viewer");
+                mv.src = modelURL;
+                mv.alt = m.alt || "3D model";
+                mv.dataset.modelId = m.id;
+
+                // Store fractional positions for resize handling
+                mv.dataset.modelX = m.x;
+                mv.dataset.modelY = m.y;
+                mv.dataset.modelWidth = m.width;
+                mv.dataset.modelHeight = m.height;
+
+                mv.setAttribute("camera-controls", "");
+                mv.setAttribute("shadow-intensity", "1");
+                mv.setAttribute("auto-rotate", m.autoRotate ? "true" : "false");
+
+                mv.style.position = "absolute";
+                mv.style.left = `${m.x * containerRect.width}px`;
+                mv.style.top = `${m.y * containerRect.height}px`;
+                mv.style.width = `${m.width * containerRect.width}px`;
+                mv.style.height = `${m.height * containerRect.height}px`;
+                mv.style.zIndex = m.zIndex || 5;
+
+                mv.addEventListener("camera-change", () => {
+                    const camera = mv.getCameraOrbit();
+                    const target = mv.getCameraTarget();
+                    socket.emit("model_interaction", {
+                        modelId: m.id,
+                        slideIndex: currentSlide,
+                        camera: {
+                            theta: camera.theta,
+                            phi: camera.phi,
+                            radius: camera.radius,
+                        },
+                        target: {
+                            x: target.x,
+                            y: target.y,
+                            z: target.z,
+                        },
+                    });
+                });
+
+                slide_canvas_container.appendChild(mv);
+            }
+        }
+
+        if (slideConfig.audio) {
+            for (const a of slideConfig.audio) {
+                const audioURL = await loadMediaFromPath(a.path);
+                if (!audioURL) continue;
+
+                const audio = document.createElement("audio");
+                audio.src = audioURL;
+                audio.volume = a.volume || 1.0;
+                if (a.playMode === "auto") audio.play();
+                if (a.playMode === "manual") audio.controls = true;
+
+                slide_canvas_container.appendChild(audio);
+            }
+        }
+
+        if (slideConfig.widgets) {
+            renderWidgets(slideConfig, slide_canvas_container, zipFile);
+        }
     }
-    
-    // Load the ZIP into memory for frontend use
-    const reader = new FileReader();
-    reader.onload = async (event) => {
-        zipFile = await JSZip.loadAsync(event.target.result);
-        console.log('ZIP loaded into memory');
-        
-        const pdfFile = zipFile.file("slides.pdf");
-        if (!pdfFile) {
-            console.error("The uploaded package is not a valid Beamer+ presentation (no slides.pdf found).");
-            uploadModal.close();
-            Modal.error('Invalid Presentation', 'The uploaded package is not a valid Beamer+ presentation.');
-            return;
+
+    folderInput.addEventListener("change", async (e) => {
+        const files = Array.from(e.target.files);
+        if (!files || files.length === 0) return;
+        console.log("Folder selected with", files.length, "files");
+
+        const uploadModal = Modal.loading(
+            "Uploading Presentation",
+            "Please wait while your presentation is uploaded...",
+        );
+
+        // Create a ZIP file from the selected folder
+        const zip = new JSZip();
+        // we can use JSZip because we have an HTML script for it (Cloudflare)
+
+        // Add all files to the ZIP, preserving folder structure
+        for (const file of files) {
+            // Get the relative path from the file's webkitRelativePath
+            const relativePath = file.webkitRelativePath;
+            // Remove the first folder name to get the path relative to the selected folder
+            const pathParts = relativePath.split("/");
+            const zipPath = pathParts.slice(1).join("/");
+
+            if (zipPath) {
+                const fileData = await file.arrayBuffer();
+                zip.file(zipPath, fileData);
+            }
         }
-        
+
+        console.log("Creating ZIP from folder...");
+        const zipBlob = await zip.generateAsync({ type: "blob" });
+
+        const formData = new FormData();
+        formData.append("file", zipBlob, "presentation.zip");
+
+        try {
+            const response = await fetch("/api/presentation/upload", {
+                method: "POST",
+                body: formData,
+            });
+
+            const data = await response.json();
+            console.log("Upload response:", data);
+
+            if (data.success) {
+                await loadAvailableModels();
+
+                console.log(
+                    `Presentation uploaded with ${data.models_found} Summarizer Script`,
+                );
+                if (data.models && data.models.length > 0) {
+                    console.log("Available AI models:", data.models);
+                }
+            }
+        } catch (error) {
+            console.error("Error uploading presentation:", error);
+            uploadModal.close();
+            Modal.error(
+                "Upload Failed",
+                "Failed to upload presentation. Please try again.",
+            );
+            return;
+        }
+
+        // Load the ZIP we just created into memory for frontend use
+        zipFile = zip;
+        console.log("ZIP loaded into memory");
+
+        const pdfFile = zipFile.file("slides.pdf");
+        if (!pdfFile) {
+            console.error(
+                "The uploaded package is not a valid Beamer+ presentation (no slides.pdf found).",
+            );
+            uploadModal.close();
+            Modal.error(
+                "Invalid Presentation",
+                "The uploaded package is not a valid Beamer+ presentation.",
+            );
+            return;
+        }
+
         const pdfData = await pdfFile.async("arraybuffer");
         const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
         totalSlides = pdfDoc.numPages;
-        
+
         console.log(`Total slides: ${totalSlides}`);
-        
+
         currentSlide = 0;
         slideConfigs = {};
         mediaCache = {};
-        
+
         await renderSlide(0);
-        
+
         // Populate slide navigator
         populateSlideNavigator();
-        
-        socket.emit('presentation_loaded', {
-            totalSlides: totalSlides
+
+        socket.emit("presentation_loaded", {
+            totalSlides: totalSlides,
         });
         // Enable controls now that a presentation is loaded
         uploadModal.close();
         setControlsEnabledAfterUpload(true, __beamer_controls);
-        
+
         // Enable screen share button
         screenShareBtn.el.disabled = false;
-        screenShareBtn.el.style.opacity = '1';
-        screenShareBtn.el.style.cursor = 'pointer';
-        
+        screenShareBtn.el.style.opacity = "1";
+        screenShareBtn.el.style.cursor = "pointer";
+
         // Enable record button
         recordBtn.el.disabled = false;
-        recordBtn.el.style.opacity = '1';
-        recordBtn.el.style.cursor = 'pointer';
-        
+        recordBtn.el.style.opacity = "1";
+        recordBtn.el.style.cursor = "pointer";
+
         updateHistoryButtons();
-    };
-    reader.readAsArrayBuffer(file);
-});
+    });
 
-async function loadAvailableModels() {
-    try {
-        const response = await fetch('/api/models');
-        const data = await response.json();
-        availableModels = data.models || [];
-        console.log('Available AI models:', availableModels);
-    } catch (error) {
-        console.error('Error loading models:', error);
-        availableModels = [];
-    }
-}
-
-// Survey functionality
-let currentSurveyResults = null;
-let currentSurveyData = null;
-let resultsOverlayVisible = false;
-let surveyOverlayVisible = false;
-
-// Survey Button - Opens creation modal
-surveyBtn.onClick(() => {
-    if (availableModels.length === 0) {
-        Modal.warning('No Presentation Loaded', 'Please upload a presentation.');
-        return;
+    zipInput.addEventListener("change", async (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        console.log("ZIP file selected:", file.name);
+
+        const uploadModal = Modal.loading(
+            "Uploading Presentation",
+            "Please wait while your presentation is uploaded...",
+        );
+
+        const formData = new FormData();
+        formData.append("file", file);
+
+        try {
+            const response = await fetch("/api/presentation/upload", {
+                method: "POST",
+                body: formData,
+            });
+
+            const data = await response.json();
+            console.log("Upload response:", data);
+
+            if (data.success) {
+                await loadAvailableModels();
+
+                console.log(
+                    `Presentation uploaded with ${data.models_found} Summarizer Script`,
+                );
+                if (data.models && data.models.length > 0) {
+                    console.log("Available AI models:", data.models);
+                }
+            }
+        } catch (error) {
+            console.error("Error uploading presentation:", error);
+            uploadModal.close();
+            Modal.error(
+                "Upload Failed",
+                "Failed to upload presentation. Please try again.",
+            );
+            return;
+        }
+
+        // Load the ZIP into memory for frontend use
+        const reader = new FileReader();
+        reader.onload = async (event) => {
+            zipFile = await JSZip.loadAsync(event.target.result);
+            console.log("ZIP loaded into memory");
+
+            const pdfFile = zipFile.file("slides.pdf");
+            if (!pdfFile) {
+                console.error(
+                    "The uploaded package is not a valid Beamer+ presentation (no slides.pdf found).",
+                );
+                uploadModal.close();
+                Modal.error(
+                    "Invalid Presentation",
+                    "The uploaded package is not a valid Beamer+ presentation.",
+                );
+                return;
+            }
+
+            const pdfData = await pdfFile.async("arraybuffer");
+            const pdfDoc = await pdfjsLib.getDocument({ data: pdfData })
+                .promise;
+            totalSlides = pdfDoc.numPages;
+
+            console.log(`Total slides: ${totalSlides}`);
+
+            currentSlide = 0;
+            slideConfigs = {};
+            mediaCache = {};
+
+            await renderSlide(0);
+
+            // Populate slide navigator
+            populateSlideNavigator();
+
+            socket.emit("presentation_loaded", {
+                totalSlides: totalSlides,
+            });
+            // Enable controls now that a presentation is loaded
+            uploadModal.close();
+            setControlsEnabledAfterUpload(true, __beamer_controls);
+
+            // Enable screen share button
+            screenShareBtn.el.disabled = false;
+            screenShareBtn.el.style.opacity = "1";
+            screenShareBtn.el.style.cursor = "pointer";
+
+            // Enable record button
+            recordBtn.el.disabled = false;
+            recordBtn.el.style.opacity = "1";
+            recordBtn.el.style.cursor = "pointer";
+
+            updateHistoryButtons();
+        };
+        reader.readAsArrayBuffer(file);
+    });
+
+    async function loadAvailableModels() {
+        try {
+            const response = await fetch("/api/models");
+            const data = await response.json();
+            availableModels = data.models || [];
+            console.log("Available AI models:", availableModels);
+        } catch (error) {
+            console.error("Error loading models:", error);
+            availableModels = [];
+        }
     }
-    
-    const modal = document.createElement('div');
-    modal.className = 'modal-overlay';
-    modal.innerHTML = `
+
+    // Survey functionality
+    let currentSurveyResults = null;
+    let currentSurveyData = null;
+    let resultsOverlayVisible = false;
+    let surveyOverlayVisible = false;
+
+    // Survey Button - Opens creation modal
+    surveyBtn.onClick(() => {
+        if (availableModels.length === 0) {
+            Modal.warning(
+                "No Presentation Loaded",
+                "Please upload a presentation.",
+            );
+            return;
+        }
+
+        const modal = document.createElement("div");
+        modal.className = "modal-overlay";
+        modal.innerHTML = `
         <div class="modal-content" style="max-width: 500px;">
             <h2 style="margin-bottom: 1.5rem; font-family: 'Computer Modern Sans', sans-serif; color: #333;">Survey</h2>
             
@@ -1182,139 +1286,156 @@ surveyBtn.onClick(() => {
             </div>
         </div>
     `;
-    document.body.appendChild(modal);
-    
-    // Populate model dropdown
-    const modelSelect = document.getElementById('survey-model');
-    availableModels.forEach(model => {
-        const option = document.createElement('option');
-        option.value = model;
-        option.textContent = model.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-        modelSelect.appendChild(option);
-    });
-    
-    if (availableModels.length > 0) {
-        modelSelect.value = availableModels[0];
-    }
-    
-    document.getElementById('survey-question').focus();
-    
-    document.getElementById('cancel-survey-modal').onclick = () => {
-        document.body.removeChild(modal);
-    };
-    
-    document.getElementById('create-survey-btn').onclick = async () => {
-        const question = document.getElementById('survey-question').value.trim() || 'Survey';
-        const model = document.getElementById('survey-model').value;
-        const numSummaries = parseInt(document.getElementById('survey-num-summaries').value);
-        
-        if (!model) {
-            Modal.warning('No Model Selected', 'Please select an AI model.');
-            return;
-        }
-        
-        if (isNaN(numSummaries) || numSummaries < 1 || numSummaries > 10) {
-            Modal.warning('Invalid Number', 'Number of summaries must be between 1 and 10.');
-            return;
+        document.body.appendChild(modal);
+
+        // Populate model dropdown
+        const modelSelect = document.getElementById("survey-model");
+        availableModels.forEach((model) => {
+            const option = document.createElement("option");
+            option.value = model;
+            option.textContent = model
+                .replace(/_/g, " ")
+                .replace(/\b\w/g, (l) => l.toUpperCase());
+            modelSelect.appendChild(option);
+        });
+
+        if (availableModels.length > 0) {
+            modelSelect.value = availableModels[0];
         }
-        
-        try {
-            const response = await fetch('/api/survey/create', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ 
-                    question,
-                    model,
-                    num_summaries: numSummaries
-                })
-            });
-            
-            const data = await response.json();
-            
-            if (!response.ok) {
-                Modal.error('Survey Creation Failed', data.error || 'Failed to create survey');
+
+        document.getElementById("survey-question").focus();
+
+        document.getElementById("cancel-survey-modal").onclick = () => {
+            document.body.removeChild(modal);
+        };
+
+        document.getElementById("create-survey-btn").onclick = async () => {
+            const question =
+                document.getElementById("survey-question").value.trim() ||
+                "Survey";
+            const model = document.getElementById("survey-model").value;
+            const numSummaries = parseInt(
+                document.getElementById("survey-num-summaries").value,
+            );
+
+            if (!model) {
+                Modal.warning(
+                    "No Model Selected",
+                    "Please select an AI model.",
+                );
                 return;
             }
-            
-            document.body.removeChild(modal);
-            
-            currentSurveyData = {
-                ...data,
-                model,
-                num_summaries: numSummaries,
-                question
-            };
-            
-            // Reset results when creating new survey
-            currentSurveyResults = null;
-            
-            // Disable results button until we have results
-            surveyResultsBtn.el.disabled = true;
-            surveyResultsBtn.el.style.opacity = '0.5';
-            surveyResultsBtn.el.style.cursor = 'not-allowed';
-            
-            socket.emit('survey_show', data);
-            showSurveyOverlay();
-            
-        } catch (error) {
-            console.error('Error creating survey:', error);
-            Modal.error('Survey Creation Failed', 'Failed to create survey. Please try again.');
-        }
-    };
-    
-    modal.onclick = (e) => {
-        if (e.target === modal) {
-            document.body.removeChild(modal);
-        }
-    };
-});
 
-function updateSurveyOverlayPosition() {
-    const overlay = document.getElementById('survey-overlay');
-    if (!overlay) return;
-    
-    const pdfContainer = document.getElementById('pdf-canvas');
-    const containerRect = pdfContainer.getBoundingClientRect();
-    
-    overlay.style.top = `${containerRect.top}px`;
-    overlay.style.left = `${containerRect.left}px`;
-    overlay.style.width = `${containerRect.width}px`;
-    overlay.style.height = `${containerRect.height}px`;
-}
-
-function showSurveyOverlay() {
-    if (!currentSurveyData) return;
-    
-    surveyOverlayVisible = true;
-    disableControlButtons(true, __beamer_all_buttons, surveyResultsBtn);
-    
-    const pdfContainer = document.getElementById('pdf-canvas');
-    const containerRect = pdfContainer.getBoundingClientRect();
-    
-    const surveyUrl = `${window.location.origin}${currentSurveyData.url}`;
-    
-    const overlay = document.createElement('div');
-    overlay.id = 'survey-overlay';
-    overlay.style.position = 'fixed';
-    overlay.style.top = `${containerRect.top}px`;
-    overlay.style.left = `${containerRect.left}px`;
-    overlay.style.width = `${containerRect.width}px`;
-    overlay.style.height = `${containerRect.height}px`;
-    overlay.style.backgroundColor = '#ffffff';
-    overlay.style.zIndex = '1000';
-    overlay.style.display = 'flex';
-    overlay.style.flexDirection = 'column';
-    overlay.style.alignItems = 'center';
-    overlay.style.justifyContent = 'center';
-    overlay.style.padding = '2rem';
-    overlay.style.boxSizing = 'border-box';
-    overlay.style.overflow = 'auto';
-    overlay.style.fontFamily = "'Computer Modern Sans', sans-serif";
-    
-    overlay.innerHTML = `
+            if (isNaN(numSummaries) || numSummaries < 1 || numSummaries > 10) {
+                Modal.warning(
+                    "Invalid Number",
+                    "Number of summaries must be between 1 and 10.",
+                );
+                return;
+            }
+
+            try {
+                const response = await fetch("/api/survey/create", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        question,
+                        model,
+                        num_summaries: numSummaries,
+                    }),
+                });
+
+                const data = await response.json();
+
+                if (!response.ok) {
+                    Modal.error(
+                        "Survey Creation Failed",
+                        data.error || "Failed to create survey",
+                    );
+                    return;
+                }
+
+                document.body.removeChild(modal);
+
+                currentSurveyData = {
+                    ...data,
+                    model,
+                    num_summaries: numSummaries,
+                    question,
+                };
+
+                // Reset results when creating new survey
+                currentSurveyResults = null;
+
+                // Disable results button until we have results
+                surveyResultsBtn.el.disabled = true;
+                surveyResultsBtn.el.style.opacity = "0.5";
+                surveyResultsBtn.el.style.cursor = "not-allowed";
+
+                socket.emit("survey_show", data);
+                showSurveyOverlay();
+            } catch (error) {
+                console.error("Error creating survey:", error);
+                Modal.error(
+                    "Survey Creation Failed",
+                    "Failed to create survey. Please try again.",
+                );
+            }
+        };
+
+        modal.onclick = (e) => {
+            if (e.target === modal) {
+                document.body.removeChild(modal);
+            }
+        };
+    });
+
+    function updateSurveyOverlayPosition() {
+        const overlay = document.getElementById("survey-overlay");
+        if (!overlay) return;
+
+        const pdfContainer = document.getElementById("pdf-canvas");
+        const containerRect = pdfContainer.getBoundingClientRect();
+
+        overlay.style.top = `${containerRect.top}px`;
+        overlay.style.left = `${containerRect.left}px`;
+        overlay.style.width = `${containerRect.width}px`;
+        overlay.style.height = `${containerRect.height}px`;
+    }
+
+    function showSurveyOverlay() {
+        if (!currentSurveyData) return;
+
+        surveyOverlayVisible = true;
+        disableControlButtons(true, __beamer_all_buttons, surveyResultsBtn);
+
+        const pdfContainer = document.getElementById("pdf-canvas");
+        const containerRect = pdfContainer.getBoundingClientRect();
+
+        const surveyUrl = `${window.location.origin}${currentSurveyData.url}`;
+
+        const overlay = document.createElement("div");
+        overlay.id = "survey-overlay";
+        overlay.style.position = "fixed";
+        overlay.style.top = `${containerRect.top}px`;
+        overlay.style.left = `${containerRect.left}px`;
+        overlay.style.width = `${containerRect.width}px`;
+        overlay.style.height = `${containerRect.height}px`;
+        overlay.style.backgroundColor = "#ffffff";
+        overlay.style.zIndex = "1000";
+        overlay.style.display = "flex";
+        overlay.style.flexDirection = "column";
+        overlay.style.alignItems = "center";
+        overlay.style.justifyContent = "center";
+        overlay.style.padding = "2rem";
+        overlay.style.boxSizing = "border-box";
+        overlay.style.overflow = "auto";
+        overlay.style.fontFamily = "'Computer Modern Sans', sans-serif";
+
+        overlay.innerHTML = `
         <div style="max-width: 600px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem;">
             <h2 style="font-family: 'Computer Modern Sans', sans-serif; color: #333; font-size: 2rem; margin: 0; text-align: center; font-weight: 300;">
-                ${currentSurveyData.question || 'Survey'}
+                ${currentSurveyData.question || "Survey"}
                 <br>
                 <span style="font-size: 0.9rem; color: #666; font-weight: normal;">(scan the QR code below or navigate to the URL to respond)</span>
             </h2>
@@ -1340,165 +1461,184 @@ function showSurveyOverlay() {
 
         </div>
     `;
-    
-    document.body.appendChild(overlay);
-    
-    new QRCode(document.getElementById("qrcode"), {
-        text: surveyUrl,
-        width: 200,
-        height: 200,
-        colorDark: "#333333",
-        colorLight: "#ffffff"
-    });
-    
-    socket.on('survey_response', (data) => {
-        if (data.survey_id === currentSurveyData.survey_id) {
-            document.getElementById('response-count').textContent = data.total;
-        }
-    });
-}
-
-function hideSurveyOverlay() {
-    surveyOverlayVisible = false;
-    disableControlButtons(false, __beamer_all_buttons, surveyResultsBtn);
-    
-    const overlay = document.getElementById('survey-overlay');
-    if (overlay) {
-        document.body.removeChild(overlay);
-    }
-}
-
-// Results Button - Toggle between show/hide results
-surveyResultsBtn.onClick(async () => {
-    // If results are already showing, just hide them
-    if (resultsOverlayVisible) {
-        hideSurveyResultsOverlay();
-        return;
-    }
-    
-    // Check if we have a survey
-    if (!currentSurveyData) {
-        Modal.info('No Survey', 'Please create a survey first.');
-        return;
-    }
-    
-    // If we already have results, just show them
-    if (currentSurveyResults) {
-        showSurveyResultsOverlay();
-        return;
+
+        document.body.appendChild(overlay);
+
+        new QRCode(document.getElementById("qrcode"), {
+            text: surveyUrl,
+            width: 200,
+            height: 200,
+            colorDark: "#333333",
+            colorLight: "#ffffff",
+        });
+
+        socket.on("survey_response", (data) => {
+            if (data.survey_id === currentSurveyData.survey_id) {
+                document.getElementById("response-count").textContent =
+                    data.total;
+            }
+        });
     }
-    
-    // Close the survey if it's still open
-    if (surveyOverlayVisible) {
-        await fetch(`/api/survey/${currentSurveyData.survey_id}/close`, { method: 'POST' });
-        socket.emit('survey_close', { survey_id: currentSurveyData.survey_id });
-        hideSurveyOverlay();
+
+    function hideSurveyOverlay() {
+        surveyOverlayVisible = false;
+        disableControlButtons(false, __beamer_all_buttons, surveyResultsBtn);
+
+        const overlay = document.getElementById("survey-overlay");
+        if (overlay) {
+            document.body.removeChild(overlay);
+        }
     }
-    
-    // Show loading modal
-    const loadingModal = Modal.loading('Generating Summaries', 'Please wait while the responses are analyzed...');
-    
-    try {
-        const response = await fetch(`/api/survey/${currentSurveyData.survey_id}/responses`);
-        const data = await response.json();
-        
-        if (data.responses.length === 0) {
-            loadingModal.close();
-            // No responses — survey already closed above; do nothing further.
+
+    // Results Button - Toggle between show/hide results
+    surveyResultsBtn.onClick(async () => {
+        // If results are already showing, just hide them
+        if (resultsOverlayVisible) {
+            hideSurveyResultsOverlay();
             return;
         }
-        
-        const analyzeResponse = await fetch(`/api/survey/${currentSurveyData.survey_id}/analyze`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-        
-        if (!analyzeResponse.ok) {
-            const errorData = await analyzeResponse.json();
-            throw new Error(errorData.error || 'Analysis failed');
+
+        // Check if we have a survey
+        if (!currentSurveyData) {
+            Modal.info("No Survey", "Please create a survey first.");
+            return;
         }
-        
-        const analysisData = await analyzeResponse.json();
-        
-        currentSurveyResults = {
-            summaries: analysisData.summaries,
-            model: analysisData.model,
-            num_responses: analysisData.num_responses
-        };
-        
-        console.log('Analysis complete:', currentSurveyResults);
-        
-        // Close loading modal
-        loadingModal.close();
-        
-        // Enable the results button for future clicks
-        surveyResultsBtn.el.disabled = false;
-        surveyResultsBtn.el.style.opacity = '1';
-        surveyResultsBtn.el.style.cursor = 'pointer';
-        
-        // Show results overlay
-        showSurveyResultsOverlay();
-        
-    } catch (error) {
-        console.error('Error processing responses:', error);
-        loadingModal.close();
-        Modal.error('Analysis Failed', "There was an error summarizing the responses.");
-    }
-});
 
-let currentResultIndex = 0;
-
-// Use UI helper `disableControlButtons` from beamer_ui.js
-
-function updateSurveyResultsOverlayPosition() {
-    const overlay = document.getElementById('survey-results-overlay');
-    if (!overlay) return;
-    
-    const pdfContainer = document.getElementById('pdf-canvas');
-    const containerRect = pdfContainer.getBoundingClientRect();
-    
-    overlay.style.top = `${containerRect.top}px`;
-    overlay.style.left = `${containerRect.left}px`;
-    overlay.style.width = `${containerRect.width}px`;
-    overlay.style.height = `${containerRect.height}px`;
-}
-
-function showSurveyResultsOverlay() {
-    if (!currentSurveyResults || !currentSurveyResults.summaries || currentSurveyResults.summaries.length === 0) {
-        Modal.info('No Results', 'No survey results available.');
-        return;
+        // If we already have results, just show them
+        if (currentSurveyResults) {
+            showSurveyResultsOverlay();
+            return;
+        }
+
+        // Close the survey if it's still open
+        if (surveyOverlayVisible) {
+            await fetch(`/api/survey/${currentSurveyData.survey_id}/close`, {
+                method: "POST",
+            });
+            socket.emit("survey_close", {
+                survey_id: currentSurveyData.survey_id,
+            });
+            hideSurveyOverlay();
+        }
+
+        // Show loading modal
+        const loadingModal = Modal.loading(
+            "Generating Summaries",
+            "Please wait while the responses are analyzed...",
+        );
+
+        try {
+            const response = await fetch(
+                `/api/survey/${currentSurveyData.survey_id}/responses`,
+            );
+            const data = await response.json();
+
+            if (data.responses.length === 0) {
+                loadingModal.close();
+                // No responses — survey already closed above; do nothing further.
+                return;
+            }
+
+            const analyzeResponse = await fetch(
+                `/api/survey/${currentSurveyData.survey_id}/analyze`,
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                },
+            );
+
+            if (!analyzeResponse.ok) {
+                const errorData = await analyzeResponse.json();
+                throw new Error(errorData.error || "Analysis failed");
+            }
+
+            const analysisData = await analyzeResponse.json();
+
+            currentSurveyResults = {
+                summaries: analysisData.summaries,
+                model: analysisData.model,
+                num_responses: analysisData.num_responses,
+            };
+
+            console.log("Analysis complete:", currentSurveyResults);
+
+            // Close loading modal
+            loadingModal.close();
+
+            // Enable the results button for future clicks
+            surveyResultsBtn.el.disabled = false;
+            surveyResultsBtn.el.style.opacity = "1";
+            surveyResultsBtn.el.style.cursor = "pointer";
+
+            // Show results overlay
+            showSurveyResultsOverlay();
+        } catch (error) {
+            console.error("Error processing responses:", error);
+            loadingModal.close();
+            Modal.error(
+                "Analysis Failed",
+                "There was an error summarizing the responses.",
+            );
+        }
+    });
+
+    let currentResultIndex = 0;
+
+    // Use UI helper `disableControlButtons` from beamer_ui.js
+
+    function updateSurveyResultsOverlayPosition() {
+        const overlay = document.getElementById("survey-results-overlay");
+        if (!overlay) return;
+
+        const pdfContainer = document.getElementById("pdf-canvas");
+        const containerRect = pdfContainer.getBoundingClientRect();
+
+        overlay.style.top = `${containerRect.top}px`;
+        overlay.style.left = `${containerRect.left}px`;
+        overlay.style.width = `${containerRect.width}px`;
+        overlay.style.height = `${containerRect.height}px`;
     }
-    
-    // Set this BEFORE disabling buttons to prevent flash
-    resultsOverlayVisible = true;
-    currentResultIndex = 0;
-    
-    disableControlButtons(true, __beamer_all_buttons, surveyResultsBtn);
-    
-    const pdfContainer = document.getElementById('pdf-canvas');
-    const containerRect = pdfContainer.getBoundingClientRect();
-    
-    const overlay = document.createElement('div');
-    overlay.id = 'survey-results-overlay';
-    overlay.style.position = 'fixed';
-    overlay.style.top = `${containerRect.top}px`;
-    overlay.style.left = `${containerRect.left}px`;
-    overlay.style.width = `${containerRect.width}px`;
-    overlay.style.height = `${containerRect.height}px`;
-    overlay.style.backgroundColor = '#ffffff';
-    overlay.style.zIndex = '1000';
-    overlay.style.display = 'flex';
-    overlay.style.flexDirection = 'column';
-    overlay.style.alignItems = 'center';
-    overlay.style.justifyContent = 'center';
-    overlay.style.padding = '2rem';
-    overlay.style.boxSizing = 'border-box';
-    overlay.style.overflow = 'auto';
-    overlay.style.fontFamily = "'Computer Modern Sans', sans-serif";
-    
-    const numSummaries = currentSurveyResults.summaries.length;
-    
-    overlay.innerHTML = `
+
+    function showSurveyResultsOverlay() {
+        if (
+            !currentSurveyResults ||
+            !currentSurveyResults.summaries ||
+            currentSurveyResults.summaries.length === 0
+        ) {
+            Modal.info("No Results", "No survey results available.");
+            return;
+        }
+
+        // Set this BEFORE disabling buttons to prevent flash
+        resultsOverlayVisible = true;
+        currentResultIndex = 0;
+
+        disableControlButtons(true, __beamer_all_buttons, surveyResultsBtn);
+
+        const pdfContainer = document.getElementById("pdf-canvas");
+        const containerRect = pdfContainer.getBoundingClientRect();
+
+        const overlay = document.createElement("div");
+        overlay.id = "survey-results-overlay";
+        overlay.style.position = "fixed";
+        overlay.style.top = `${containerRect.top}px`;
+        overlay.style.left = `${containerRect.left}px`;
+        overlay.style.width = `${containerRect.width}px`;
+        overlay.style.height = `${containerRect.height}px`;
+        overlay.style.backgroundColor = "#ffffff";
+        overlay.style.zIndex = "1000";
+        overlay.style.display = "flex";
+        overlay.style.flexDirection = "column";
+        overlay.style.alignItems = "center";
+        overlay.style.justifyContent = "center";
+        overlay.style.padding = "2rem";
+        overlay.style.boxSizing = "border-box";
+        overlay.style.overflow = "auto";
+        overlay.style.fontFamily = "'Computer Modern Sans', sans-serif";
+
+        const numSummaries = currentSurveyResults.summaries.length;
+
+        overlay.innerHTML = `
         <div style="max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2rem;">
             <div id="result-content" style="text-align: center; min-height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 1rem; width: 100%;">
                 <!-- Content will be inserted here -->
@@ -1517,464 +1657,522 @@ function showSurveyResultsOverlay() {
             </div>
         </div>
     `;
-    
-    document.body.appendChild(overlay);
-    
-    document.getElementById('prev-result').addEventListener('click', () => {
-        if (currentResultIndex > 0) {
-            currentResultIndex--;
-            updateResultDisplay();
-        }
-    });
-    
-    document.getElementById('next-result').addEventListener('click', () => {
-        if (currentResultIndex < currentSurveyResults.summaries.length - 1) {
-            currentResultIndex++;
-            updateResultDisplay();
+
+        document.body.appendChild(overlay);
+
+        document.getElementById("prev-result").addEventListener("click", () => {
+            if (currentResultIndex > 0) {
+                currentResultIndex--;
+                updateResultDisplay();
+            }
+        });
+
+        document.getElementById("next-result").addEventListener("click", () => {
+            if (
+                currentResultIndex <
+                currentSurveyResults.summaries.length - 1
+            ) {
+                currentResultIndex++;
+                updateResultDisplay();
+            }
+        });
+
+        updateResultDisplay();
+    }
+
+    function hideSurveyResultsOverlay() {
+        resultsOverlayVisible = false;
+
+        disableControlButtons(false, __beamer_all_buttons, surveyResultsBtn);
+
+        const overlay = document.getElementById("survey-results-overlay");
+        if (overlay) {
+            document.body.removeChild(overlay);
         }
-    });
-    
-    updateResultDisplay();
-}
-
-function hideSurveyResultsOverlay() {
-    resultsOverlayVisible = false;
-    
-    disableControlButtons(false, __beamer_all_buttons, surveyResultsBtn);
-    
-    const overlay = document.getElementById('survey-results-overlay');
-    if (overlay) {
-        document.body.removeChild(overlay);
     }
-}
-
-function updateResultDisplay() {
-    const contentDiv = document.getElementById('result-content');
-    const counterSpan = document.getElementById('result-counter');
-    const prevBtn = document.getElementById('prev-result');
-    const nextBtn = document.getElementById('next-result');
-    
-    if (!contentDiv || !currentSurveyResults || !currentSurveyResults.summaries) return;
-    
-    const summaryData = currentSurveyResults.summaries[currentResultIndex];
-    const totalSummaries = currentSurveyResults.summaries.length;
-    
-    contentDiv.innerHTML = `
+
+    function updateResultDisplay() {
+        const contentDiv = document.getElementById("result-content");
+        const counterSpan = document.getElementById("result-counter");
+        const prevBtn = document.getElementById("prev-result");
+        const nextBtn = document.getElementById("next-result");
+
+        if (
+            !contentDiv ||
+            !currentSurveyResults ||
+            !currentSurveyResults.summaries
+        )
+            return;
+
+        const summaryData = currentSurveyResults.summaries[currentResultIndex];
+        const totalSummaries = currentSurveyResults.summaries.length;
+
+        contentDiv.innerHTML = `
         <h2 style="font-family: 'Computer Modern Sans', sans-serif; color: #333; font-size: 2rem; margin: 0; font-weight: 300;">
-            ${currentSurveyData.question || 'Survey Response Summaries'}
+            ${currentSurveyData.question || "Survey Response Summaries"}
             <br>
-            <span style="font-size: 0.9rem; color: #666; font-weight: normal;">(based on ${summaryData.num_respondents} response${summaryData.num_respondents !== 1 ? 's' : ''})</span>
+            <span style="font-size: 0.9rem; color: #666; font-weight: normal;">(based on ${summaryData.num_respondents} response${summaryData.num_respondents !== 1 ? "s" : ""})</span>
         </h2>
         <div style="font-family: 'Computer Modern Sans', sans-serif; color: #333; font-size: 1.1rem; line-height: 1.8; margin: 1.5rem 0; text-align: center; max-width: 700px; padding: 2rem; background: #f8f9fa; border: 2px solid #666; border-radius: 4px;">
             ${summaryData.summary}
         </div>
     `;
-    
-    counterSpan.textContent = `${currentResultIndex + 1} / ${totalSummaries}`;
-    
-    prevBtn.disabled = currentResultIndex === 0;
-    nextBtn.disabled = currentResultIndex === totalSummaries - 1;
-    
-    prevBtn.style.opacity = prevBtn.disabled ? '0.5' : '1';
-    nextBtn.style.opacity = nextBtn.disabled ? '0.5' : '1';
-    prevBtn.style.cursor = prevBtn.disabled ? 'not-allowed' : 'pointer';
-    nextBtn.style.cursor = nextBtn.disabled ? 'not-allowed' : 'pointer';
-}
-
-document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && resultsOverlayVisible) {
-        hideSurveyResultsOverlay();
-    }
-});
 
-// Add resize listener to update overlay positions
-window.addEventListener('resize', () => {
-    if (surveyOverlayVisible) {
-        updateSurveyOverlayPosition();
-    }
-    if (resultsOverlayVisible) {
-        updateSurveyResultsOverlayPosition();
-    }
-    
-    // Resize annotation canvas to maintain proper mouse coordinate mapping
-    if (annCvs) {
-        annCvs.resize();
-    }
-    
-    // Update positions of all media elements (videos, models, widgets)
-    if (zipFile && slideConfigs[currentSlide]) {
-        updateMediaPositions();
+        counterSpan.textContent = `${currentResultIndex + 1} / ${totalSummaries}`;
+
+        prevBtn.disabled = currentResultIndex === 0;
+        nextBtn.disabled = currentResultIndex === totalSummaries - 1;
+
+        prevBtn.style.opacity = prevBtn.disabled ? "0.5" : "1";
+        nextBtn.style.opacity = nextBtn.disabled ? "0.5" : "1";
+        prevBtn.style.cursor = prevBtn.disabled ? "not-allowed" : "pointer";
+        nextBtn.style.cursor = nextBtn.disabled ? "not-allowed" : "pointer";
     }
-});
 
-// Add fullscreen change listener to handle fullscreen transitions
-document.addEventListener('fullscreenchange', () => {
-    // Need a small delay for the browser to finish the fullscreen transition
-    setTimeout(() => {
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && resultsOverlayVisible) {
+            hideSurveyResultsOverlay();
+        }
+    });
+
+    // Add resize listener to update overlay positions
+    window.addEventListener("resize", () => {
         if (surveyOverlayVisible) {
             updateSurveyOverlayPosition();
         }
         if (resultsOverlayVisible) {
             updateSurveyResultsOverlayPosition();
         }
-        
+
+        // Resize annotation canvas to maintain proper mouse coordinate mapping
         if (annCvs) {
             annCvs.resize();
         }
-        
+
+        // Update positions of all media elements (videos, models, widgets)
         if (zipFile && slideConfigs[currentSlide]) {
             updateMediaPositions();
         }
-    }, 100);
-});
+    });
 
-// ==================== SCREEN SHARING ====================
-let screenStream = null;
-let isScreenSharing = false;
-
-// ==================== RECORDING ====================
-let isRecording = false;
-let mediaRecorder = null;
-let recordedChunks = [];
-let recordingCanvas = null;
-let recordingStream = null;
-let audioStream = null;
-let micStream = null;
-
-recordBtn.onClick(async () => {
-    if (isRecording) {
-        stopRecording();
-    } else {
-        await startRecording();
-    }
-});
+    // Add fullscreen change listener to handle fullscreen transitions
+    document.addEventListener("fullscreenchange", () => {
+        // Need a small delay for the browser to finish the fullscreen transition
+        setTimeout(() => {
+            if (surveyOverlayVisible) {
+                updateSurveyOverlayPosition();
+            }
+            if (resultsOverlayVisible) {
+                updateSurveyResultsOverlayPosition();
+            }
 
-async function startRecording() {
-    if (!isScreenSharing) {
-        Modal.error('Recording Error', 'Please start screen sharing before recording.');
-        return;
-    }
-    
-    try {
-        // Get the canvas that's being used for screen sharing
-        const pdfContainer = document.getElementById('pdf-canvas');
-        
-        // Create a new canvas for recording
-        recordingCanvas = document.createElement('canvas');
-        recordingCanvas.width = pdfContainer.getBoundingClientRect().width;
-        recordingCanvas.height = pdfContainer.getBoundingClientRect().height;
-        
-        // Create a stream from the canvas at 30 FPS
-        recordingStream = recordingCanvas.captureStream(30);
-        
-        // Request microphone audio
-        try {
-            micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            micStream.getAudioTracks().forEach(track => recordingStream.addTrack(track));
-        } catch (error) {
-            console.warn('Microphone not captured:', error);
+            if (annCvs) {
+                annCvs.resize();
+            }
+
+            if (zipFile && slideConfigs[currentSlide]) {
+                updateMediaPositions();
+            }
+        }, 100);
+    });
+
+    // ==================== SCREEN SHARING ====================
+    let screenStream = null;
+    let isScreenSharing = false;
+
+    // ==================== RECORDING ====================
+    let isRecording = false;
+    let mediaRecorder = null;
+    let recordedChunks = [];
+    let recordingCanvas = null;
+    let recordingStream = null;
+    let audioStream = null;
+    let micStream = null;
+
+    recordBtn.onClick(async () => {
+        if (isRecording) {
+            stopRecording();
+        } else {
+            await startRecording();
         }
-        
-        // Request system audio (will prompt user)
-        try {
-            audioStream = await navigator.mediaDevices.getDisplayMedia({
-                video: false,
-                audio: true
-            });
-            audioStream.getAudioTracks().forEach(track => recordingStream.addTrack(track));
-        } catch (audioError) {
-            console.warn('System audio not captured:', audioError);
+    });
+
+    async function startRecording() {
+        if (!isScreenSharing) {
+            Modal.error(
+                "Recording Error",
+                "Please start screen sharing before recording.",
+            );
+            return;
         }
-        
-        // Create MediaRecorder to record in real-time
-        recordedChunks = [];
-        mediaRecorder = new MediaRecorder(recordingStream, {
-            mimeType: 'video/webm;codecs=vp9',
-            videoBitsPerSecond: 2500000
-        });
-        
-        mediaRecorder.ondataavailable = (e) => {
-            if (e.data.size > 0) {
-                recordedChunks.push(e.data);
-            }
-        };
-        
-        mediaRecorder.start(100); // Collect data every 100ms
-        
-        isRecording = true;
-        
-        // Update button appearance
-        recordBtn.el.innerHTML = '<i class="fa-solid fa-stop"></i>';
-        recordBtn.el.style.backgroundColor = '#e74c3c';
-        
-        console.log('Recording started');
-    } catch (error) {
-        console.error('Error starting recording:', error);
-        Modal.error('Recording Error', 'Could not start recording: ' + error.message);
-    }
-}
-
-async function stopRecording() {
-    if (!isRecording || !mediaRecorder) return;
-    
-    isRecording = false;
-    
-    // Reset button appearance
-    recordBtn.el.innerHTML = '<i class="fa-solid fa-circle"></i>';
-    recordBtn.el.style.backgroundColor = '';
-    
-    console.log('Recording stopped. Processing video...');
-    
-    // Show processing modal with loading animation
-    const processingModal = Modal.loading('Processing Video', 'Please wait while your recording is being processed and downloaded...');
-    
-    return new Promise((resolve, reject) => {
-        mediaRecorder.onstop = () => {
+
+        try {
+            // Get the canvas that's being used for screen sharing
+            const pdfContainer = document.getElementById("pdf-canvas");
+
+            // Create a new canvas for recording
+            recordingCanvas = document.createElement("canvas");
+            recordingCanvas.width = pdfContainer.getBoundingClientRect().width;
+            recordingCanvas.height =
+                pdfContainer.getBoundingClientRect().height;
+
+            // Create a stream from the canvas at 30 FPS
+            recordingStream = recordingCanvas.captureStream(30);
+
+            // Request microphone audio
             try {
-                const blob = new Blob(recordedChunks, { type: 'video/webm' });
-                const url = URL.createObjectURL(blob);
-                
-                // Download the video
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = `beamer-recording-${new Date().toISOString().replace(/[:.]/g, '-')}.webm`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                
-                // Clean up
-                recordedChunks = [];
-                if (micStream) {
-                    micStream.getTracks().forEach(track => track.stop());
-                    micStream = null;
-                }
-                if (audioStream) {
-                    audioStream.getTracks().forEach(track => track.stop());
-                    audioStream = null;
-                }
-                if (recordingStream) {
-                    recordingStream.getTracks().forEach(track => track.stop());
-                    recordingStream = null;
-                }
-                recordingCanvas = null;
-                
-                processingModal.close();
-                Modal.success('Recording Complete', 'Your video has been downloaded successfully!');
-                resolve();
+                micStream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                });
+                micStream
+                    .getAudioTracks()
+                    .forEach((track) => recordingStream.addTrack(track));
             } catch (error) {
-                console.error('Error processing video:', error);
-                processingModal.close();
-                Modal.error('Recording Error', 'Failed to process video: ' + error.message);
-                reject(error);
+                console.warn("Microphone not captured:", error);
             }
-        };
-        
-        mediaRecorder.stop();
-    });
-}
 
-screenShareBtn.onClick(async () => {
-    if (isScreenSharing) {
-        stopScreenShare();
-    } else {
-        await startScreenShare();
+            // Request system audio (will prompt user)
+            try {
+                audioStream = await navigator.mediaDevices.getDisplayMedia({
+                    video: false,
+                    audio: true,
+                });
+                audioStream
+                    .getAudioTracks()
+                    .forEach((track) => recordingStream.addTrack(track));
+            } catch (audioError) {
+                console.warn("System audio not captured:", audioError);
+            }
+
+            // Create MediaRecorder to record in real-time
+            recordedChunks = [];
+            mediaRecorder = new MediaRecorder(recordingStream, {
+                mimeType: "video/webm;codecs=vp9",
+                videoBitsPerSecond: 2500000,
+            });
+
+            mediaRecorder.ondataavailable = (e) => {
+                if (e.data.size > 0) {
+                    recordedChunks.push(e.data);
+                }
+            };
+
+            mediaRecorder.start(100); // Collect data every 100ms
+
+            isRecording = true;
+
+            // Update button appearance
+            recordBtn.el.innerHTML = '<i class="fa-solid fa-stop"></i>';
+            recordBtn.el.style.backgroundColor = "#e74c3c";
+
+            console.log("Recording started");
+        } catch (error) {
+            console.error("Error starting recording:", error);
+            Modal.error(
+                "Recording Error",
+                "Could not start recording: " + error.message,
+            );
+        }
     }
-});
 
-async function startScreenShare() {
-    try {
-        // Request screen capture - restrict to current tab only
-        const stream = await navigator.mediaDevices.getDisplayMedia({
-            video: {
-                cursor: 'always', // always show cursor (other options: 'moving', 'never')
-                displaySurface: 'browser' // this determines which displaySurface
-                //  (tab/window/monitor) the picker defaults to. 'browser' means 'tab'.
-            },
-            audio: false,
-            selfBrowserSurface: 'include',
-            surfaceSwitching: 'exclude',
-            systemAudio: 'exclude'
+    async function stopRecording() {
+        if (!isRecording || !mediaRecorder) return;
+
+        isRecording = false;
+
+        // Reset button appearance
+        recordBtn.el.innerHTML = '<i class="fa-solid fa-circle"></i>';
+        recordBtn.el.style.backgroundColor = "";
+
+        console.log("Recording stopped. Processing video...");
+
+        // Show processing modal with loading animation
+        const processingModal = Modal.loading(
+            "Processing Video",
+            "Please wait while your recording is being processed and downloaded...",
+        );
+
+        return new Promise((resolve, reject) => {
+            mediaRecorder.onstop = () => {
+                try {
+                    const blob = new Blob(recordedChunks, {
+                        type: "video/webm",
+                    });
+                    const url = URL.createObjectURL(blob);
+
+                    // Download the video
+                    const a = document.createElement("a");
+                    a.href = url;
+                    a.download = `beamer-recording-${new Date().toISOString().replace(/[:.]/g, "-")}.webm`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
+
+                    // Clean up
+                    recordedChunks = [];
+                    if (micStream) {
+                        micStream.getTracks().forEach((track) => track.stop());
+                        micStream = null;
+                    }
+                    if (audioStream) {
+                        audioStream
+                            .getTracks()
+                            .forEach((track) => track.stop());
+                        audioStream = null;
+                    }
+                    if (recordingStream) {
+                        recordingStream
+                            .getTracks()
+                            .forEach((track) => track.stop());
+                        recordingStream = null;
+                    }
+                    recordingCanvas = null;
+
+                    processingModal.close();
+                    Modal.success(
+                        "Recording Complete",
+                        "Your video has been downloaded successfully!",
+                    );
+                    resolve();
+                } catch (error) {
+                    console.error("Error processing video:", error);
+                    processingModal.close();
+                    Modal.error(
+                        "Recording Error",
+                        "Failed to process video: " + error.message,
+                    );
+                    reject(error);
+                }
+            };
+
+            mediaRecorder.stop();
         });
-        
-        // Check if the user selected the correct surface type
-        const videoTrack = stream.getVideoTracks()[0];
-        const settings = videoTrack.getSettings();
-        
-        // check by regex if the user is on Safari:
-        const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 
-        console.log(`isSafari: ${isSafari}`);
-
-        if (!isSafari) {
-            // Verify that a browser tab was selected (not window or monitor)
-            if (settings.displaySurface && settings.displaySurface !== 'browser') {
-                // Stop the stream immediately
-                stream.getTracks().forEach(track => track.stop());
-                
-                Modal.error(
-                    'Wrong Source Selected', 
-                    'Please select the Beamer+ browser tab (not a window or entire screen). Click the screen share button again and choose "This Tab" or the Beamer+ tab from the list.'
-                );
-                isScreenSharing = false;
-                return;
-            }
+    }
+
+    screenShareBtn.onClick(async () => {
+        if (isScreenSharing) {
+            stopScreenShare();
+        } else {
+            await startScreenShare();
         }
-        // We don't do the above check for Safari, because 'browser' screensharing
-        // (i.e. tab screensharing) is not possible on Safari.
-
-        screenStream = stream;  // assign the global "state" variable <screenStream>
-        isScreenSharing = true; // assign the global "state" variable <isScreenSharing>
-        
-        // Update button appearance
-        screenShareBtn.el.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';
-        
-        // Create a hidden video element to capture the stream
-        const video = document.createElement('video');
-        video.style.display = 'none';  // -> not displayed. invisible.
-        video.srcObject = stream;
-        video.play();
-        
-        document.body.appendChild(video);
-        
-        // Create canvas for cropping
-        const cropCanvas = document.createElement('canvas');
-        const cropCtx = cropCanvas.getContext('2d');
-        
-        // the <video> var captures the whole tab/window/monitor (whatever wass selected)
-        // the <cropCanvas> will hold the, well, just the slide
-
-        // Get the canvas container dimensions
-        const pdfContainer = document.getElementById('pdf-canvas');
-        
-        let lastFrameTime = 0;
-        const frameInterval = 100; // Reduced to 10 FPS to prevent flashing
-        
-        // Start capturing and cropping frames
-        const captureFrame = (currentTime) => {
-            if (!isScreenSharing) return;
-            
-            // Throttle frame rate: 
-            // if (not enough time has passed) {exit}
-            if (currentTime - lastFrameTime < frameInterval) {
-                requestAnimationFrame(captureFrame);
-                return;
-            }
-            lastFrameTime = currentTime;
-            
-            const containerRect = pdfContainer.getBoundingClientRect();
-            
-            // Set canvas size to match the container
-            cropCanvas.width = containerRect.width;
-            cropCanvas.height = containerRect.height;
-            
-            // Calculate the position and size to crop from the video
-            // This assumes the video is capturing the full screen
-            const scaleX = video.videoWidth / window.innerWidth;
-            const scaleY = video.videoHeight / window.innerHeight;
-            
-            const sourceX = containerRect.left * scaleX;
-            const sourceY = containerRect.top * scaleY;
-            const sourceWidth = containerRect.width * scaleX;
-            const sourceHeight = containerRect.height * scaleY;
-            
-            // Draw the cropped region onto the canvas
-            cropCtx.drawImage(
-                video,
-                sourceX, sourceY, sourceWidth, sourceHeight,
-                0, 0, cropCanvas.width, cropCanvas.height
+    });
+
+    async function startScreenShare() {
+        try {
+            // Request screen capture - restrict to current tab only
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: {
+                    cursor: "always", // always show cursor (other options: 'moving', 'never')
+                    displaySurface: "browser", // this determines which displaySurface
+                    //  (tab/window/monitor) the picker defaults to. 'browser' means 'tab'.
+                },
+                audio: false,
+                selfBrowserSurface: "include",
+                surfaceSwitching: "exclude",
+                systemAudio: "exclude",
+            });
+
+            // Check if the user selected the correct surface type
+            const videoTrack = stream.getVideoTracks()[0];
+            const settings = videoTrack.getSettings();
+
+            // check by regex if the user is on Safari:
+            const isSafari = /^((?!chrome|android).)*safari/i.test(
+                navigator.userAgent,
             );
-            
-            // If recording, draw to recording canvas in real-time
-            if (isRecording && recordingCanvas) {
-                const recordingCtx = recordingCanvas.getContext('2d');
-                // Update canvas size if needed
-                if (recordingCanvas.width !== cropCanvas.width || recordingCanvas.height !== cropCanvas.height) {
-                    recordingCanvas.width = cropCanvas.width;
-                    recordingCanvas.height = cropCanvas.height;
+            console.log(`isSafari: ${isSafari}`);
+
+            if (!isSafari) {
+                // Verify that a browser tab was selected (not window or monitor)
+                if (
+                    settings.displaySurface &&
+                    settings.displaySurface !== "browser"
+                ) {
+                    // Stop the stream immediately
+                    stream.getTracks().forEach((track) => track.stop());
+
+                    Modal.error(
+                        "Wrong Source Selected",
+                        'Please select the Beamer+ browser tab (not a window or entire screen). Click the screen share button again and choose "This Tab" or the Beamer+ tab from the list.',
+                    );
+                    isScreenSharing = false;
+                    return;
                 }
-                // Draw the current frame to the recording canvas
-                recordingCtx.drawImage(cropCanvas, 0, 0);
             }
-            
-            // Convert canvas to blob and emit to server
-            cropCanvas.toBlob((blob) => {
-                if (blob && isScreenSharing) {
-                    // Convert blob to base64
-                    const reader = new FileReader();
-                    reader.onloadend = () => {
-                        const base64data = reader.result;
-                        socket.emit('screen_frame', {
-                            frame: base64data,
-                            width: cropCanvas.width,
-                            height: cropCanvas.height
-                        });
-                    };
-                    reader.readAsDataURL(blob);
+            // We don't do the above check for Safari, because 'browser' screensharing
+            // (i.e. tab screensharing) is not possible on Safari.
+
+            screenStream = stream; // assign the global "state" variable <screenStream>
+            isScreenSharing = true; // assign the global "state" variable <isScreenSharing>
+
+            // Update button appearance
+            screenShareBtn.el.innerHTML =
+                '<i class="fa-solid fa-eye-slash"></i>';
+
+            // Create a hidden video element to capture the stream
+            const video = document.createElement("video");
+            video.style.display = "none"; // -> not displayed. invisible.
+            video.srcObject = stream;
+            video.play();
+
+            document.body.appendChild(video);
+
+            // Create canvas for cropping
+            const cropCanvas = document.createElement("canvas");
+            const cropCtx = cropCanvas.getContext("2d");
+
+            // the <video> var captures the whole tab/window/monitor (whatever wass selected)
+            // the <cropCanvas> will hold the, well, just the slide
+
+            // Get the canvas container dimensions
+            const pdfContainer = document.getElementById("pdf-canvas");
+
+            let lastFrameTime = 0;
+            const frameInterval = 100; // Reduced to 10 FPS to prevent flashing
+
+            // Start capturing and cropping frames
+            const captureFrame = (currentTime) => {
+                if (!isScreenSharing) return;
+
+                // Throttle frame rate:
+                // if (not enough time has passed) {exit}
+                if (currentTime - lastFrameTime < frameInterval) {
+                    requestAnimationFrame(captureFrame);
+                    return;
                 }
-            }, 'image/jpeg', 0.75); // Reduced quality to 75% for less bandwidth
-            
-            // Request next frame
-            if (isScreenSharing) {
+                lastFrameTime = currentTime;
+
+                const containerRect = pdfContainer.getBoundingClientRect();
+
+                // Set canvas size to match the container
+                cropCanvas.width = containerRect.width;
+                cropCanvas.height = containerRect.height;
+
+                // Calculate the position and size to crop from the video
+                // This assumes the video is capturing the full screen
+                const scaleX = video.videoWidth / window.innerWidth;
+                const scaleY = video.videoHeight / window.innerHeight;
+
+                const sourceX = containerRect.left * scaleX;
+                const sourceY = containerRect.top * scaleY;
+                const sourceWidth = containerRect.width * scaleX;
+                const sourceHeight = containerRect.height * scaleY;
+
+                // Draw the cropped region onto the canvas
+                cropCtx.drawImage(
+                    video,
+                    sourceX,
+                    sourceY,
+                    sourceWidth,
+                    sourceHeight,
+                    0,
+                    0,
+                    cropCanvas.width,
+                    cropCanvas.height,
+                );
+
+                // If recording, draw to recording canvas in real-time
+                if (isRecording && recordingCanvas) {
+                    const recordingCtx = recordingCanvas.getContext("2d");
+                    // Update canvas size if needed
+                    if (
+                        recordingCanvas.width !== cropCanvas.width ||
+                        recordingCanvas.height !== cropCanvas.height
+                    ) {
+                        recordingCanvas.width = cropCanvas.width;
+                        recordingCanvas.height = cropCanvas.height;
+                    }
+                    // Draw the current frame to the recording canvas
+                    recordingCtx.drawImage(cropCanvas, 0, 0);
+                }
+
+                // Convert canvas to blob and emit to server
+                cropCanvas.toBlob(
+                    (blob) => {
+                        if (blob && isScreenSharing) {
+                            // Convert blob to base64
+                            const reader = new FileReader();
+                            reader.onloadend = () => {
+                                const base64data = reader.result;
+                                socket.emit("screen_frame", {
+                                    frame: base64data,
+                                    width: cropCanvas.width,
+                                    height: cropCanvas.height,
+                                });
+                            };
+                            reader.readAsDataURL(blob);
+                        }
+                    },
+                    "image/jpeg",
+                    0.75,
+                ); // Reduced quality to 75% for less bandwidth
+
+                // Request next frame
+                if (isScreenSharing) {
+                    requestAnimationFrame(captureFrame);
+                }
+            };
+
+            // Wait for video to be ready
+            video.onloadedmetadata = () => {
                 requestAnimationFrame(captureFrame);
+            };
+
+            // Handle stream end (user clicks "Stop sharing" in browser)
+            stream.getVideoTracks()[0].onended = () => {
+                stopScreenShare();
+            };
+
+            // Notify viewers that screen sharing has started
+            socket.emit("screen_share_start");
+
+            // Show a helper message
+            console.log("Screen sharing started. Sharing Beamer+ tab.");
+        } catch (error) {
+            console.error("Error starting screen share:", error);
+
+            let errorMessage = "Could not start screen sharing.";
+            if (error.name === "NotAllowedError") {
+                errorMessage =
+                    'Screen sharing permission was denied. Please allow screen sharing and select the Beamer+ tab (choose "This Tab" option).';
+            } else if (error.name === "NotFoundError") {
+                errorMessage =
+                    "No screen sharing source was selected. Please click the button again and select the Beamer+ tab.";
+            } else if (error.name === "NotSupportedError") {
+                errorMessage =
+                    "Screen sharing is not supported in this browser. Please use Chrome, Firefox, or Edge.";
             }
-        };
-        
-        // Wait for video to be ready
-        video.onloadedmetadata = () => {
-            requestAnimationFrame(captureFrame);
-        };
-        
-        // Handle stream end (user clicks "Stop sharing" in browser)
-        stream.getVideoTracks()[0].onended = () => {
-            stopScreenShare();
-        };
-        
-        // Notify viewers that screen sharing has started
-        socket.emit('screen_share_start');
-        
-        // Show a helper message
-        console.log('Screen sharing started. Sharing Beamer+ tab.');
-        
-    } catch (error) {
-        console.error('Error starting screen share:', error);
-        
-        let errorMessage = 'Could not start screen sharing.';
-        if (error.name === 'NotAllowedError') {
-            errorMessage = 'Screen sharing permission was denied. Please allow screen sharing and select the Beamer+ tab (choose "This Tab" option).';
-        } else if (error.name === 'NotFoundError') {
-            errorMessage = 'No screen sharing source was selected. Please click the button again and select the Beamer+ tab.';
-        } else if (error.name === 'NotSupportedError') {
-            errorMessage = 'Screen sharing is not supported in this browser. Please use Chrome, Firefox, or Edge.';
+
+            Modal.error("Screen Share Error", errorMessage);
+            isScreenSharing = false;
         }
-        
-        Modal.error('Screen Share Error', errorMessage);
-        isScreenSharing = false;
     }
-}
 
-function stopScreenShare() {
-    if (screenStream) {
-        screenStream.getTracks().forEach(track => track.stop());
-        screenStream = null;
-    }
-    
-    isScreenSharing = false;
-    
-    // If recording is active, stop it
-    if (isRecording) {
-        stopRecording();
-    }
-    
-    // Reset button appearance
-    screenShareBtn.el.innerHTML = '<i class="fa-solid fa-desktop"></i>';
-    screenShareBtn.el.style.backgroundColor = '';
-    
-    // Remove the hidden video element
-    const videos = document.querySelectorAll('video[style*="display: none"]');
-    videos.forEach(v => v.remove());
-    
-    // Notify viewers that screen sharing has stopped
-    socket.emit('screen_share_stop');
-}
+    function stopScreenShare() {
+        if (screenStream) {
+            screenStream.getTracks().forEach((track) => track.stop());
+            screenStream = null;
+        }
+
+        isScreenSharing = false;
+
+        // If recording is active, stop it
+        if (isRecording) {
+            stopRecording();
+        }
 
+        // Reset button appearance
+        screenShareBtn.el.innerHTML = '<i class="fa-solid fa-desktop"></i>';
+        screenShareBtn.el.style.backgroundColor = "";
+
+        // Remove the hidden video element
+        const videos = document.querySelectorAll(
+            'video[style*="display: none"]',
+        );
+        videos.forEach((v) => v.remove());
+
+        // Notify viewers that screen sharing has stopped
+        socket.emit("screen_share_stop");
+    }
 });
diff --git a/static/js/viewer.js b/static/js/viewer.js
index f94f6a0..6e944cb 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -23,6 +23,10 @@ window.addEventListener("DOMContentLoaded", () => {
     let frameCount = 0;
     let lastUpdateTime = Date.now();
 
+    const viewerPanelLeft = document.getElementById("viewer-left");
+    const viewerPrevBtnDiv = document.getElementById("viewer-prev-btn");
+    const viewerNextBtnDiv = document.getElementById("viewer-next-btn");
+
     const navControls = document.createElement('div');
     navControls.style.position = 'absolute';
     navControls.style.bottom = '20px';
@@ -36,12 +40,18 @@ window.addEventListener("DOMContentLoaded", () => {
     const prevBtn = document.createElement('button');
     prevBtn.textContent = '◀ Prev';
     prevBtn.className = 'btn';
-    navControls.appendChild(prevBtn);
+    // navControls.appendChild(prevBtn);
+    console.log("viewer-prev-button-div: ", viewerPrevBtnDiv);
+    viewerPrevBtnDiv.appendChild(prevBtn);
 
     const nextBtn = document.createElement('button');
     nextBtn.textContent = 'Next ▶';
     nextBtn.className = 'btn';
     navControls.appendChild(nextBtn);
+    viewerNextBtnDiv.appendChild(nextBtn);
+
+    // viewerPanelLeft.appendChild(navControls);
+
 
     prevBtn.onclick = () => goToViewerSlide(viewerCurrentSlide - 1);
     nextBtn.onclick = () => goToViewerSlide(viewerCurrentSlide + 1);
diff --git a/viewer.html b/viewer.html
index b8d9690..5003926 100644
--- a/viewer.html
+++ b/viewer.html
@@ -31,10 +31,12 @@
         <span id="stream-info"></span>
 
         <div id="viewer-panel">
-            <div class="viewer-left">
+            <div id="viewer-left">
                 <div id="switch-container"></div>
+                <div id="viewer-prev-btn"></div>
+                <div id="viewer-next-btn"></div>
             </div>
-            <div class="viewer-right">
+            <div id="viewer-right">
                 <!-- note: there's nothing in viewer-right rn. -->
             </div>
         </div>
@@ -58,7 +60,6 @@
         </div>
 
         <div id="switch-presentation-container" class="hidden">
-            <h1>Viewer's Presentation</h1>
             <div id="viewer-pdf-canvas"></div>
         </div>
 

From 0fa4ea4a529cb9a9d67fdbaf104f74843410c47a Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 19:40:00 -0500
Subject: [PATCH 10/14] fixed viewer prev/next styling

---
 static/js/viewer.js | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/static/js/viewer.js b/static/js/viewer.js
index 6e944cb..64eb923 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -37,24 +37,19 @@ window.addEventListener("DOMContentLoaded", () => {
     navControls.style.zIndex = '100';
     switchPresentationContainer.appendChild(navControls);
 
-    const prevBtn = document.createElement('button');
-    prevBtn.textContent = '◀ Prev';
-    prevBtn.className = 'btn';
-    // navControls.appendChild(prevBtn);
-    console.log("viewer-prev-button-div: ", viewerPrevBtnDiv);
-    viewerPrevBtnDiv.appendChild(prevBtn);
-
-    const nextBtn = document.createElement('button');
-    nextBtn.textContent = 'Next ▶';
-    nextBtn.className = 'btn';
-    navControls.appendChild(nextBtn);
-    viewerNextBtnDiv.appendChild(nextBtn);
+    const prevBtn = new Button(viewerPrevBtnDiv, {
+        label: '<i class="fa-solid fa-arrow-left"></i>',
+        className: "btn",
+    });
 
-    // viewerPanelLeft.appendChild(navControls);
+    const nextBtn = new Button(viewerNextBtnDiv, {
+        label: '<i class="fa-solid fa-arrow-right"></i>',
+        className: "btn",
+    });
 
+    prevBtn.onClick(() => goToViewerSlide(viewerCurrentSlide - 1));
+    nextBtn.onClick(() => goToViewerSlide(viewerCurrentSlide + 1));
 
-    prevBtn.onclick = () => goToViewerSlide(viewerCurrentSlide - 1);
-    nextBtn.onclick = () => goToViewerSlide(viewerCurrentSlide + 1);
 
     // note: loadSlideConfig also appears in main.js.
     // it's the same, except is uses <zipFile> rather than <viewerZip>

From 26f8efa2b6fd690c6b7856038a06295fd365c259 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 20:06:02 -0500
Subject: [PATCH 11/14] key stuff of viewer's own copy of slides all done

---
 static/css/canvas.css | 1 -
 viewer.html           | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/static/css/canvas.css b/static/css/canvas.css
index 4fcdfc7..7852f7b 100644
--- a/static/css/canvas.css
+++ b/static/css/canvas.css
@@ -12,7 +12,6 @@
     justify-content: center;
     align-items: center;
     background: #f0f0f0;
-    bordeR: 5px solid red;
 }
 
 #pdf-container video, #switch-presentation-container video {
diff --git a/viewer.html b/viewer.html
index 5003926..7b712ec 100644
--- a/viewer.html
+++ b/viewer.html
@@ -63,9 +63,8 @@
             <div id="viewer-pdf-canvas"></div>
         </div>
 
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.16.105/pdf.min.js"></script> -->
+        <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
         <script type="module" src="/static/js/viewer.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     </body>
 </html>

From 4d71dcdf432a9371bf00c2fad26b7e70bef7c150 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 20:47:53 -0500
Subject: [PATCH 12/14] disabled prev/next btns for viewer when not
 screen-capturing

---
 static/css/shared.css |   4 +-
 static/js/main.js     |  43 +++----------
 static/js/viewer.js   | 139 ++++++++++++++++++++++++------------------
 viewer.html           |   1 -
 4 files changed, 88 insertions(+), 99 deletions(-)

diff --git a/static/css/shared.css b/static/css/shared.css
index 68904f6..3ef73ef 100644
--- a/static/css/shared.css
+++ b/static/css/shared.css
@@ -22,7 +22,7 @@ input[type=file] {
 }
 
 /* Slide Navigator */
-#slide-navigator {
+#slide-navigator, #viewer-slide-navigator {
     position: fixed;
     left: 0;
     top: 60px;
@@ -40,7 +40,7 @@ input[type=file] {
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-#slide-navigator::-webkit-scrollbar {
+#slide-navigator::-webkit-scrollbar, #viewer-slide-navigator::-webkit-scrollbar {
     display: none;
 }
 
diff --git a/static/js/main.js b/static/js/main.js
index 6511101..d2a7ecc 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -592,9 +592,11 @@ window.addEventListener("DOMContentLoaded", () => {
         document.addEventListener("keydown", escHandler);
     }
 
+    // SLIDE NAVIGATOR STARTS ////////////////////////////////////////
+    const slideNavigator = document.getElementById("slide-navigator");
+
     function populateSlideNavigator() {
-        const navigator = document.getElementById("slide-navigator");
-        navigator.innerHTML = "";
+        slideNavigator.innerHTML = "";
 
         for (let i = 0; i < totalSlides; i++) {
             const item = document.createElement("div");
@@ -606,7 +608,7 @@ window.addEventListener("DOMContentLoaded", () => {
                 goToSlide(i);
             };
 
-            navigator.appendChild(item);
+            slideNavigator.appendChild(item);
         }
 
         updateSlideNavigator();
@@ -624,6 +626,8 @@ window.addEventListener("DOMContentLoaded", () => {
             }
         });
     }
+    // SLIDE NAVIGATOR ENDS ////////////////////////////////////////
+
 
     let zipFile = null;
     let slideConfigs = {};
@@ -753,39 +757,6 @@ window.addEventListener("DOMContentLoaded", () => {
         });
     }
 
-    function populateSlideNavigator() {
-        const navigator = document.getElementById("slide-navigator");
-        navigator.innerHTML = "";
-
-        for (let i = 0; i < totalSlides; i++) {
-            const item = document.createElement("div");
-            item.className = "slide-nav-item";
-            item.textContent = i + 1;
-            item.dataset.slideIndex = i;
-
-            item.onclick = () => {
-                goToSlide(i);
-            };
-
-            navigator.appendChild(item);
-        }
-
-        updateSlideNavigator();
-    }
-
-    function updateSlideNavigator() {
-        const items = document.querySelectorAll(".slide-nav-item");
-        items.forEach((item, index) => {
-            if (index === currentSlide) {
-                item.classList.add("active");
-                // Scroll into view
-                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
-            } else {
-                item.classList.remove("active");
-            }
-        });
-    }
-
     async function renderSlide(slideIndex) {
         console.log("renderSlide called:", slideIndex);
 
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 64eb923..4b5a051 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -11,6 +11,14 @@ window.addEventListener("DOMContentLoaded", () => {
     let viewerTotalSlides = 0;
     let viewerPDFDoc = null;
 
+    // when this is true, you show the viewer-controlled presentation.
+    // when this is false, you show the screen-shared presentation.
+    // important: if isScreenSharing == false then switchToPresentation must be false.
+    let switchToPresentation = false;
+
+    // this contains the screen-captured presentation:
+    const viewerContainer = document.getElementById("viewer-container");
+    // this contains the viewer's own copy of the presentation:
     const switchPresentationContainer = document.getElementById("switch-presentation-container");
     const slide_canvas_container = document.getElementById('viewer-pdf-canvas');
     const pdfCvs = new Canvas(slide_canvas_container, false);
@@ -23,20 +31,9 @@ window.addEventListener("DOMContentLoaded", () => {
     let frameCount = 0;
     let lastUpdateTime = Date.now();
 
-    const viewerPanelLeft = document.getElementById("viewer-left");
     const viewerPrevBtnDiv = document.getElementById("viewer-prev-btn");
     const viewerNextBtnDiv = document.getElementById("viewer-next-btn");
 
-    const navControls = document.createElement('div');
-    navControls.style.position = 'absolute';
-    navControls.style.bottom = '20px';
-    navControls.style.left = '50%';
-    navControls.style.transform = 'translateX(-50%)';
-    navControls.style.display = 'flex';
-    navControls.style.gap = '10px';
-    navControls.style.zIndex = '100';
-    switchPresentationContainer.appendChild(navControls);
-
     const prevBtn = new Button(viewerPrevBtnDiv, {
         label: '<i class="fa-solid fa-arrow-left"></i>',
         className: "btn",
@@ -47,6 +44,8 @@ window.addEventListener("DOMContentLoaded", () => {
         className: "btn",
     });
 
+    prevBtn.el.disabled = !switchToPresentation;
+    nextBtn.el.disabled = !switchToPresentation;
     prevBtn.onClick(() => goToViewerSlide(viewerCurrentSlide - 1));
     nextBtn.onClick(() => goToViewerSlide(viewerCurrentSlide + 1));
 
@@ -95,32 +94,6 @@ window.addEventListener("DOMContentLoaded", () => {
         return url;
     }
 
-    //
-    async function loadViewerZip(blob) {
-        // update the global state
-        viewerZip = await JSZip.loadAsync(blob);
-
-        // Get slides.pdf from the ZIP
-        const pdfFile = viewerZip.file("slides.pdf");
-        if (!pdfFile) {
-            console.error("No slides.pdf found in ZIP");
-            return;
-        }
-
-        // pdfData will store pdfFile as bytes of data
-        const pdfData = await pdfFile.async('arraybuffer');
-
-        // viewerPDFDoc (the global state) is your renderable PDF document, made by the pdfjs library
-        viewerPDFDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
-        // update global states:
-        viewerTotalSlides = viewerPDFDoc.numPages;
-        viewerCurrentSlide = 0;
-
-        console.log('Loaded PDF with', viewerTotalSlides, 'pages'); // <- debug
-
-        // render the first slide (because viewerCurrentSlide has been initialized to zero):
-        await renderViewerSlide(viewerCurrentSlide);
-    }
     //
     async function renderViewerSlide(slideIndex) {
 
@@ -318,9 +291,47 @@ window.addEventListener("DOMContentLoaded", () => {
 
         viewerCurrentSlide = slideIndex;
         await renderViewerSlide(slideIndex);
+
+        updateSlideNavigator();
     }
     //
 
+    // SLIDE NAVIGATOR STARTS ////////////////////////////////////////
+    const slideNavigator = document.getElementById("viewer-slide-navigator");
+
+    function populateSlideNavigator() {
+        slideNavigator.innerHTML = "";
+
+        for (let i = 0; i < viewerTotalSlides; i++) {
+            const item = document.createElement("div");
+            item.className = "slide-nav-item";
+            item.textContent = i + 1;
+            item.dataset.slideIndex = i;
+
+            item.onclick = () => {
+                goToViewerSlide(i);
+            };
+
+            slideNavigator.appendChild(item);
+        }
+
+        updateSlideNavigator();
+    }
+
+    function updateSlideNavigator() {
+        const items = document.querySelectorAll(".slide-nav-item");
+        items.forEach((item, index) => {
+            if (index === viewerCurrentSlide) {
+                item.classList.add("active");
+                // Scroll into view
+                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            } else {
+                item.classList.remove("active");
+            }
+        });
+    }
+    // SLIDE NAVIGATOR ENDS ////////////////////////////////////////
+
     // Join viewer room
     socket.emit("join_viewer");
 
@@ -400,29 +411,6 @@ window.addEventListener("DOMContentLoaded", () => {
         // Image styling will handle scaling automatically
     });
 
-    // when this is true, you show the viewer-controlled presentation.
-    // when this is false, you show the screen-shared presentation.
-    // important: if isScreenSharing == false then switchToPresentation must be false.
-    let switchToPresentation = false;
-    const viewerContainer = document.getElementById("viewer-container");
-    // now switchPresentationContainer is defined near the start
-    // const switchPresentationContainer = document.getElementById(
-    //     "switch-presentation-container",
-    // );
-    // const performSwitch = () => {
-    //     console.log(`screensharing: HAHA ${isScreenSharing}`);
-    //     if (!isScreenSharing) {
-    //         return; // do nothing if it's not screensharing.
-    //     }
-
-    //     if (switchToPresentation) {
-    //         switchPresentationContainer.classList.remove("hidden");
-    //         viewerContainer.classList.add("hidden");
-    //     } else {
-    //         switchPresentationContainer.classList.add("hidden");
-    //         viewerContainer.classList.remove("hidden");
-    //     }
-    // };
     const performSwitch = () => {
         if (!isScreenSharing) return;
 
@@ -436,6 +424,9 @@ window.addEventListener("DOMContentLoaded", () => {
             switchPresentationContainer.classList.add("hidden");
             viewerContainer.classList.remove("hidden");
         }
+
+        prevBtn.el.disabled = !switchToPresentation;
+        nextBtn.el.disabled = !switchToPresentation;
     };
 
 
@@ -493,6 +484,34 @@ window.addEventListener("DOMContentLoaded", () => {
         }
     }
 
+    async function loadViewerZip(blob) {
+        // update the global state
+        viewerZip = await JSZip.loadAsync(blob);
+
+        // Get slides.pdf from the ZIP
+        const pdfFile = viewerZip.file("slides.pdf");
+        if (!pdfFile) {
+            console.error("No slides.pdf found in ZIP");
+            return;
+        }
+
+        // pdfData will store pdfFile as bytes of data
+        const pdfData = await pdfFile.async('arraybuffer');
+
+        // viewerPDFDoc (the global state) is your renderable PDF document, made by the pdfjs library
+        viewerPDFDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
+        // update global states:
+        viewerTotalSlides = viewerPDFDoc.numPages;
+        viewerCurrentSlide = 0;
+
+        console.log('Loaded PDF with', viewerTotalSlides, 'pages'); // <- debug
+
+        // render the first slide (because viewerCurrentSlide has been initialized to zero):
+        await renderViewerSlide(viewerCurrentSlide);
+        
+        populateSlideNavigator();
+    }
+
     loadPresentation();
 
     socket.on("presentation_loaded", () => {
diff --git a/viewer.html b/viewer.html
index 7b712ec..730d29e 100644
--- a/viewer.html
+++ b/viewer.html
@@ -42,7 +42,6 @@
         </div>
 
         <div id="viewer-slide-navigator"></div>
-        <!-- nothing in ^ -->
 
         <div id="viewer-container">
             <div id="waiting-message">

From 85ea587ad27be1a4ebd497d9aba72e0f1a4b5a06 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 21:06:39 -0500
Subject: [PATCH 13/14] viewer's own copy of slides completed

---
 static/css/button.css |  4 +++-
 static/js/viewer.js   | 23 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/static/css/button.css b/static/css/button.css
index 75c7054..7e3c8cd 100644
--- a/static/css/button.css
+++ b/static/css/button.css
@@ -29,7 +29,9 @@
     background-color: #bbbbbb;
 }
 
-.btn:disabled {
+
+.btn:disabled, .not-in-use  {  
+    /* .not-in-use applies to viewer-slide-navigator icons when switchToPresentation == false */
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 4b5a051..9bd3469 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -304,7 +304,8 @@ window.addEventListener("DOMContentLoaded", () => {
 
         for (let i = 0; i < viewerTotalSlides; i++) {
             const item = document.createElement("div");
-            item.className = "slide-nav-item";
+            const initialClassName = switchToPresentation ? "slide-nav-item" : "slide-nav-item not-in-use"
+            item.className = initialClassName;
             item.textContent = i + 1;
             item.dataset.slideIndex = i;
 
@@ -425,8 +426,28 @@ window.addEventListener("DOMContentLoaded", () => {
             viewerContainer.classList.remove("hidden");
         }
 
+        // toggle prev/next buttons:
         prevBtn.el.disabled = !switchToPresentation;
         nextBtn.el.disabled = !switchToPresentation;
+
+        // toggle all the icons inside viewer-slide-navigator:
+        const items = document.querySelectorAll(".slide-nav-item");
+        items.forEach((item, index) => {
+            if (switchToPresentation) {
+                item.classList.remove("not-in-use");
+            } else if (!item.classList.contains("not-in-use")){
+                item.classList.add("not-in-use");
+            }
+            
+            if (index === viewerCurrentSlide) {
+                item.classList.add("active");
+                // Scroll into view
+                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            } else {
+                item.classList.remove("active");
+            }
+        });
+
     };
 
 

From 03c704b03e54e8282ce032e77ba7e3e20da1c280 Mon Sep 17 00:00:00 2001
From: Hasan Malik <hasanimranmalik245@gmail.com>
Date: Mon, 26 Jan 2026 21:08:11 -0500
Subject: [PATCH 14/14] viewer's own copy of slides ready

---
 index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 183de55..7d12b10 100644
--- a/index.html
+++ b/index.html
@@ -72,7 +72,9 @@
       }, 2000);
     });
   </script>
-  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
+
+  <!-- script for the 3D Model viewer: -->
+  <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script> 
   <script type="module" src="/static/js/main.js"></script>
 </body>
 </html>