jarianc/MovieMapper
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix play button shifting by pre-allocating space and showing/hiding instead of adding/removing

Browse Source
This commit is contained in:
Jarian Cottingham 2026-02-21 15:43:30 -06:00
parent 493116ad29
commit 5852ec908d
1 changed files with 13 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
renderer.js
View File

@ -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 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="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> <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> </div>
`; `;
@ -239,36 +240,13 @@ function addTagToEpisode(filePath, tagType) {
// Add a data attribute to track that this file is tagged // Add a data attribute to track that this file is tagged
item.setAttribute('data-tagged-' + tagType, 'true'); item.setAttribute('data-tagged-' + tagType, 'true');
// Add play button to the end of the row // Show the play button (make it visible instead of creating a new one)
const playButton = document.createElement('button'); const playButton = item.querySelector('.play-button');
playButton.className = 'play-button'; if (playButton) {
playButton.innerHTML = '▶️'; playButton.style.visibility = 'visible';
playButton.title = 'Play file'; playButton.style.width = 'auto';
playButton.dataset.filePath = filePath; playButton.style.padding = '0 5px';
playButton.style.marginLeft = '10px';
// 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);
} }
} }
} }
@ -305,10 +283,13 @@ function untagFile(filePath, tagType) {
// Remove the data attribute // Remove the data attribute
item.removeAttribute('data-tagged-' + tagType); item.removeAttribute('data-tagged-' + tagType);
// Remove play button if it exists // Hide the play button when untagging
const playButton = item.querySelector('.play-button'); const playButton = item.querySelector('.play-button');
if (playButton) { if (playButton) {
playButton.remove(); playButton.style.visibility = 'hidden';
playButton.style.width = '0';
playButton.style.padding = '0';
playButton.style.margin = '0';
} }
} }
} }