fix: lost selection

This commit is contained in:
lelo 2025-03-25 21:48:35 +00:00
parent 5b4390b6b7
commit 29c2e0a941

View File

@ -1,6 +1,7 @@
// Define global variables to track music files and the current index. // Define global variables to track music files and the current index.
let currentMusicFiles = []; // Array of objects with at least { path, index } let currentMusicFiles = []; // Array of objects with at least { path, index }
let currentMusicIndex = -1; // Index of the current music file let currentMusicIndex = -1; // Index of the current music file
let currentTrackPath = "";
// Helper function: decode each segment then re-encode to avoid double encoding. // Helper function: decode each segment then re-encode to avoid double encoding.
function encodeSubpath(subpath) { function encodeSubpath(subpath) {
@ -15,6 +16,21 @@ function encodeSubpath(subpath) {
let currentGalleryImages = []; let currentGalleryImages = [];
function paintFile() {
// Highlight the currently playing file
if (currentTrackPath) {
const currentMusicFile = currentMusicFiles.find(file => file.path === currentTrackPath);
if (currentMusicFile) {
const currentMusicFileElement = document.querySelector(`.play-file[data-url="${currentMusicFile.path}"]`);
if (currentMusicFileElement) {
currentMusicFileElement.closest('.file-item').classList.add('currently-playing');
}
} else {
console.log('Current track not found in the updated list.');
}
}
}
function renderContent(data) { function renderContent(data) {
// Render breadcrumbs, directories (grid view when appropriate), and files. // Render breadcrumbs, directories (grid view when appropriate), and files.
@ -62,9 +78,7 @@ function renderContent(data) {
symbol = '🖼️'; symbol = '🖼️';
} }
const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : ''; const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : '';
// preserve currently-playing class during reloads contentHTML += `<li class="file-item">
const isCurrentlyPlaying = file.file_type === 'music' && currentMusicIndex === currentMusicFiles.length - 1 ? ' currently-playing' : '';
contentHTML += `<li class="file-item ${isCurrentlyPlaying}">
<a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`; <a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`;
if (file.has_transcript) { if (file.has_transcript) {
contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" title="Show Transcript">&#128196;</a>`; contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" title="Show Transcript">&#128196;</a>`;
@ -132,6 +146,7 @@ function loadDirectory(subpath) {
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
renderContent(data); renderContent(data);
paintFile();
return data; // return data for further chaining return data; // return data for further chaining
}) })
.catch(error => { .catch(error => {
@ -250,6 +265,7 @@ document.querySelectorAll('.play-file').forEach(link => {
audioPlayer.src = mediaUrl; audioPlayer.src = mediaUrl;
audioPlayer.load(); audioPlayer.load();
await audioPlayer.play(); await audioPlayer.play();
currentTrackPath = relUrl;
playerButton.innerHTML = pauseIcon; playerButton.innerHTML = pauseIcon;
// Process file path for display. // Process file path for display.
@ -412,8 +428,6 @@ if ('mediaSession' in navigator) {
} }
document.getElementById('globalAudio').addEventListener('ended', () => { document.getElementById('globalAudio').addEventListener('ended', () => {
// Save the current track's path (if any)
const currentTrackPath = currentMusicFiles[currentMusicIndex] ? currentMusicFiles[currentMusicIndex].path : null;
reloadDirectory().then(() => { reloadDirectory().then(() => {
@ -436,7 +450,7 @@ document.getElementById('globalAudio').addEventListener('ended', () => {
}); });
}); });
document.addEventListener("DOMContentLoaded", function() { // document.addEventListener("DOMContentLoaded", function() {
// Automatically reload every 5 minutes (300,000 milliseconds) // // Automatically reload every 5 minutes (300,000 milliseconds)
setInterval(reloadDirectory, 300000); // setInterval(reloadDirectory, 300000);
}); // });