fix preview canvas while playing

static/css/style.css

@@ -866,13 +866,13 @@ button#debug_button.active {
 
 /* Preview Canvas */
 #patternPreviewCanvas {
-    width: 100%;
-    max-width: 300px;
-    aspect-ratio: 1/1;
+    width: 100px;
+    height: 100px;
     border: 1px solid var(--border-primary);
     background: var(--theme-secondary);
     border-radius: 100%;
     padding: 15px;
+    box-sizing: border-box;
 }
 
 #pattern-preview {
@@ -986,12 +986,13 @@ body.playing #currently-playing-container:not(.open) #progress-container {
 
 
 #currentlyPlayingCanvas {
-    width: 100px;
-    aspect-ratio: 1/1;
+    width: 50px;
+    height: 50px;
     border: 1px solid var(--border-primary);
     background: var(--theme-secondary);
     border-radius: 100%;
-    padding: 10px;
+    padding: 5px;
+    box-sizing: border-box;
 }
 
 #currently-playing-details {
@@ -1552,12 +1553,18 @@ input[type="number"]:focus {
 }
 
 #pattern-preview-container .svg-container {
-    width: 100%;
-    height: 100%;
+    width: 300px;
+    height: 300px;
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 200px;
+}
+
+#pattern-preview-container .svg-container svg {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
 }
 
 #pattern-preview-container .coordinate-display {
@@ -1569,3 +1576,28 @@ input[type="number"]:focus {
     width: initial;
     max-width: calc(100vw - 30px);
 }
+
+#currently-playing-preview {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+#currently-playing-preview .svg-container {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#currently-playing-preview .svg-container svg {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}

static/js/main.js

@@ -279,7 +279,7 @@ async function runThetaRho() {
                 currentlyPlayingFile.textContent = selectedFile.replace('./patterns/', '');
             }
             // Show initial preview
-            previewPattern(selectedFile.replace('./patterns/', ''), 'currently-playing-container');
+            updateCurrentlyPlayingPattern(selectedFile.replace('./patterns/', ''));
             logMessage(`Pattern running: ${selectedFile}`, LOG_TYPE.SUCCESS);
         } else {
             if (response.status === 409) {
@@ -448,6 +448,51 @@ async function previewPattern(fileName, containerId = 'pattern-preview-container
     }
 }
 
+// Function to update the currently playing pattern
+async function updateCurrentlyPlayingPattern(fileName) {
+    try {
+        const response = await fetch('/preview_thr', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ file_name: fileName })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        
+        // Get the currently playing container
+        const container = document.getElementById('currently-playing-container');
+        if (!container) {
+            logMessage('Currently playing container not found', LOG_TYPE.ERROR);
+            return;
+        }
+
+        // Get the currently playing preview div
+        const previewDiv = container.querySelector('#currently-playing-preview');
+        if (!previewDiv) {
+            logMessage('Currently playing preview div not found', LOG_TYPE.ERROR);
+            return;
+        }
+
+        // Clear existing content
+        previewDiv.innerHTML = '';
+
+        // Create SVG container
+        const svgContainer = document.createElement('div');
+        svgContainer.className = 'svg-container';
+        svgContainer.innerHTML = data.svg;
+
+        // Add SVG to the preview div
+        previewDiv.appendChild(svgContainer);
+
+    } catch (error) {
+        logMessage(`Error updating currently playing pattern: ${error.message}`, LOG_TYPE.ERROR);
+    }
+}
+
 // Render the pattern on a canvas
 function renderPattern(coordinates, canvasId) {
     const canvas = document.getElementById(canvasId);
@@ -1964,15 +2009,6 @@ function updateCurrentlyPlayingUI(status) {
     if (status.current_file && status.is_running) {
         document.body.classList.add('playing');
         container.style.display = 'flex';
-        
-        // Hide the preview container when a pattern is playing
-        const previewContainer = document.getElementById('pattern-preview-container');
-        if (previewContainer) {
-            // Clear any selected file highlights
-            document.querySelectorAll('#theta_rho_files .file-item').forEach(item => {
-                item.classList.remove('selected');
-            });
-        }
     } else {
         document.body.classList.remove('playing');
         container.style.display = 'none';
@@ -2007,7 +2043,7 @@ function updateCurrentlyPlayingUI(status) {
     if (status.current_file && lastPlayedFile !== status.current_file) {
         lastPlayedFile = status.current_file;
         const cleanFileName = status.current_file.replace('./patterns/', '');
-        previewPattern(cleanFileName, 'currently-playing-container');
+        updateCurrentlyPlayingPattern(cleanFileName);
     }
 
     // Update progress information