Music Player & Playlist Manager

This commit is contained in:
Andrey Tkachenko
2026-04-08 15:14:03 +03:00
parent 2e8e0ef6c5
commit da066f47fa
53 changed files with 6043 additions and 23 deletions
+5 -1
View File
@@ -618,7 +618,11 @@ function setupEventListeners() {
switchToPhotosSection();
break;
case 'nav.trash':
case 'nav.music':
switchToMusicSection();
break;
case 'nav.trash':
switchToTrashSection();
break;
+35 -1
View File
@@ -108,7 +108,8 @@ const VIEW_FLAGS = {
recent: 'isRecentView',
favorites: 'isFavoritesView',
trash: 'isTrashView',
photos: 'isPhotosView'
photos: 'isPhotosView',
music: 'isMusicView'
};
/**
@@ -158,6 +159,11 @@ function setCurrentSection(section) {
window.photosView.hide();
}
// Hide musicView when switching to any other section
if (section !== 'music' && window.musicView) {
window.musicView.hide();
}
return true;
}
@@ -323,10 +329,38 @@ function switchToTrashSection() {
if (window.multiSelect) window.multiSelect.clear();
}
function switchToMusicSection() {
if (!setCurrentSection('music')) return;
// Hide breadcrumb
const breadcrumb = document.querySelector('.breadcrumb');
breadcrumb?.classList.add("hidden");
// Hide file containers
toggleFileContainer(false);
// Hide actions-bar
window.setActionsBarMode('hidden');
// Reset files view + remove any error
window.ui.resetFilesList();
// Hide list header (created by resetFilesList)
const listHeader = document.querySelector('.list-header');
listHeader?.classList.add('hidden');
// Show music view
if (window.musicView) {
window.musicView.show();
}
if (window.multiSelect) window.multiSelect.clear();
}
window.switchToFilesSection = switchToFilesSection;
window.switchToSharedSection = switchToSharedSection;
window.switchToFavoritesSection = switchToFavoritesSection;
window.switchToRecentFilesSection = switchToRecentFilesSection;
window.switchToPhotosSection = switchToPhotosSection;
window.switchToTrashSection = switchToTrashSection;
window.switchToMusicSection = switchToMusicSection;
window.syncViewContainers = syncViewContainers;
+39 -1
View File
@@ -69,6 +69,9 @@ const ui = {
<div class="context-menu-item" id="share-file-option">
<i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Share</span>
</div>
<div class="context-menu-item hidden" id="add-to-playlist-option">
<i class="fas fa-compact-disc"></i> <span data-i18n="music.add_to_playlist">Add to Playlist</span>
</div>
<div class="context-menu-separator"></div>
<div class="context-menu-item" id="rename-file-option">
<i class="fas fa-pen"></i> <span data-i18n="actions.rename">Rename</span>
@@ -271,6 +274,33 @@ const ui = {
});
}
// Playlist selection dialog
if (!document.getElementById('playlist-dialog')) {
const playlistDialog = document.createElement('div');
playlistDialog.className = 'share-dialog';
playlistDialog.id = 'playlist-dialog';
playlistDialog.innerHTML = `
<div class="share-dialog-content">
<div class="share-dialog-header">
<i class="fas fa-music dialog-header-icon"></i>
<span data-i18n="music.add_to_playlist">Add to Playlist</span>
</div>
<div id="playlist-dialog-files-info" class="shared-item-info"></div>
<div id="playlist-select-container" class="folder-select-container">
</div>
<div class="rename-dialog-buttons">
<button class="btn btn-secondary" id="playlist-cancel-btn" data-i18n="actions.cancel">Cancel</button>
<button class="btn btn-primary" id="playlist-add-btn" data-i18n="music.add">Add</button>
</div>
</div>
`;
document.body.appendChild(playlistDialog);
document.getElementById('playlist-cancel-btn').addEventListener('click', () => {
if (window.contextMenus) window.contextMenus.closePlaylistDialog();
});
}
// Assign events to menu items
if (window.contextMenus) {
window.contextMenus.assignMenuEvents();
@@ -855,10 +885,12 @@ const ui = {
parent_id: card.dataset.parentId || ''
};
} else {
const fileData = info.data || self._items.get(info.id);
window.app.contextMenuTargetFile = {
id: info.id,
name: card.dataset.fileName,
folder_id: card.dataset.folderId || ''
folder_id: card.dataset.folderId || '',
mime_type: fileData?.mime_type || null
};
}
};
@@ -936,6 +968,9 @@ const ui = {
if (window.contextMenus && typeof window.contextMenus.syncWopiOptionVisibility === 'function') {
window.contextMenus.syncWopiOptionVisibility().catch(() => {});
}
if (window.contextMenus && typeof window.contextMenus.syncAddToPlaylistOption === 'function') {
window.contextMenus.syncAddToPlaylistOption();
}
menu.style.left = `${e.pageX}px`;
menu.style.top = `${e.pageY}px`;
menu.style.display = 'block';
@@ -1406,6 +1441,9 @@ function showContextMenuAtElement(triggerElement, menuId) {
if (window.contextMenus && typeof window.contextMenus.syncWopiOptionVisibility === 'function') {
window.contextMenus.syncWopiOptionVisibility().catch(() => {});
}
if (window.contextMenus && typeof window.contextMenus.syncAddToPlaylistOption === 'function') {
window.contextMenus.syncAddToPlaylistOption();
}
menu.style.left = `${left}px`;
menu.style.top = `${top}px`;