Update scripts/video.js

scripts/video.js

@@ -1,30 +1,48 @@
 // scripts/video.js
 
 async function startRecording() {
-    // First, check if the browser supports the getDisplayMedia API at all.
     if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
-        // If it exists, try to use it.
         try {
-            const stream = await navigator.mediaDevices.getDisplayMedia({
-                video: true
-            });
-            // If the user gives permission, this code will run.
+            const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
             alert("Screen access granted! Recording can now begin.");
-            // (The actual logic to handle the video stream would go here)
-
         } catch (error) {
-            // This will run if the user denies permission.
-            alert(`Screen recording was cancelled or denied. Error: ${error.message}`);
+            alert(`Could not start recording. Error: ${error.message}`);
         }
     } else {
-        // If the API doesn't exist, inform the user gracefully.
         alert("Sorry, your browser or current viewing environment does not support screen recording.");
     }
 }
 
 export function initVideo() {
+    const productionButton = document.getElementById('production-button');
+    const productionPanel = document.getElementById('production-panel');
     const startBtn = document.getElementById('start-recording');
+    const tabs = document.querySelectorAll('.tab');
+    const sections = document.querySelectorAll('.production-panel > div[id$="-section"]');
+
+    if (productionButton) {
+        productionButton.addEventListener('click', () => {
+            productionPanel.classList.toggle('open');
+        });
+    }
+
     if (startBtn) {
         startBtn.addEventListener('click', startRecording);
     }
+
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.replace('active', 'inactive'));
+            tab.classList.replace('inactive', 'active');
+
+            const targetSectionId = tab.dataset.tab;
+            sections.forEach(section => {
+                if (section.id === targetSectionId) {
+                    section.classList.remove('hidden');
+                } else {
+                    section.classList.add('hidden');
+                }
+            });
+        });
+    });
 }