From 6daf24d57914f8981430f643f844eec42c7c1140 Mon Sep 17 00:00:00 2001
From: Jarian Cottingham <jarianc@proton.me>
Date: Sat, 21 Feb 2026 15:43:30 -0600
Subject: [PATCH] Fix play button shifting by pre-allocating space and
 showing/hiding instead of adding/removing

---
 renderer.js | 45 +++++++++++++--------------------------------
 1 file changed, 13 insertions(+), 32 deletions(-)

diff --git a/renderer.js b/renderer.js
index 1896b9f..9db2078 100644
--- a/renderer.js
+++ b/renderer.js
@@ -90,6 +90,7 @@ function displayFiles(files) {
         <span class="tag-icon extra-tag" data-file-path="${file.path}" title="Mark as Extra">🏷️</span>
         <span class="tag-icon commentary-tag" data-file-path="${file.path}" title="Add Commentary">💬</span>
         <span class="video-preview-btn" data-file-path="${file.path}" title="Preview Video">🎬</span>
+        <button class="play-button" style="visibility: hidden; width: 0; margin: 0; padding: 0;" data-file-path="${file.path}">▶️</button>
       </div>
     `;
     
@@ -239,36 +240,13 @@ function addTagToEpisode(filePath, tagType) {
         // Add a data attribute to track that this file is tagged
         item.setAttribute('data-tagged-' + tagType, 'true');
         
-        // Add play button to the end of the row
-        const playButton = document.createElement('button');
-        playButton.className = 'play-button';
-        playButton.innerHTML = '▶️';
-        playButton.title = 'Play file';
-        playButton.dataset.filePath = filePath;
-        
-        // Style the play button to match the existing tag icons
-        playButton.style.marginLeft = '10px';
-        playButton.style.padding = '0 5px'; // Reduced padding to prevent shifting
-        playButton.style.border = 'none';
-        playButton.style.borderRadius = '3px';
-        playButton.style.cursor = 'pointer';
-        playButton.style.backgroundColor = 'transparent'; // Remove green background
-        playButton.style.color = '#007bff'; // Match other icons color
-        playButton.style.fontWeight = 'bold';
-        playButton.style.fontSize = '14px';
-        playButton.style.height = '20px'; // Fixed height to prevent shifting
-        playButton.style.lineHeight = '20px'; // Center vertically
-        
-        // Add click handler for play button
-        playButton.addEventListener('click', function(e) {
-          e.stopPropagation();
-          openVideoPreview(filePath);
-        });
-        
-        // Add the play button to the file item
-        const fileTags = item.querySelector('.file-tags');
-        if (fileTags) {
-          fileTags.appendChild(playButton);
+        // Show the play button (make it visible instead of creating a new one)
+        const playButton = item.querySelector('.play-button');
+        if (playButton) {
+          playButton.style.visibility = 'visible';
+          playButton.style.width = 'auto';
+          playButton.style.padding = '0 5px';
+          playButton.style.marginLeft = '10px';
         }
       }
     }
@@ -305,10 +283,13 @@ function untagFile(filePath, tagType) {
         // Remove the data attribute
         item.removeAttribute('data-tagged-' + tagType);
         
-        // Remove play button if it exists
+        // Hide the play button when untagging
         const playButton = item.querySelector('.play-button');
         if (playButton) {
-          playButton.remove();
+          playButton.style.visibility = 'hidden';
+          playButton.style.width = '0';
+          playButton.style.padding = '0';
+          playButton.style.margin = '0';
         }
       }
     }