feat: right clicking context menu on miniplayer
This commit is contained in:
parent
1345943a0b
commit
2ddf26ec4c
2 changed files with 47 additions and 0 deletions
15
index.html
15
index.html
|
|
@ -5207,6 +5207,21 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="blocked-content-list" style="display: none">
|
||||||
|
<p id="blocked-empty-message" style="display: none; color: var(--muted-foreground); font-size: 0.875rem; padding: 0.5rem 0;">Nothing blocked yet.</p>
|
||||||
|
<div id="blocked-artists-section" style="display: none">
|
||||||
|
<h4 style="font-size: 0.75rem; text-transform: uppercase; color: var(--muted-foreground); margin: 0.75rem 0 0.25rem;">Artists</h4>
|
||||||
|
<ul id="blocked-artists-list" class="blocked-items-list"></ul>
|
||||||
|
</div>
|
||||||
|
<div id="blocked-albums-section" style="display: none">
|
||||||
|
<h4 style="font-size: 0.75rem; text-transform: uppercase; color: var(--muted-foreground); margin: 0.75rem 0 0.25rem;">Albums</h4>
|
||||||
|
<ul id="blocked-albums-list" class="blocked-items-list"></ul>
|
||||||
|
</div>
|
||||||
|
<div id="blocked-tracks-section" style="display: none">
|
||||||
|
<h4 style="font-size: 0.75rem; text-transform: uppercase; color: var(--muted-foreground); margin: 0.75rem 0 0.25rem;">Tracks</h4>
|
||||||
|
<ul id="blocked-tracks-list" class="blocked-items-list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
id="settings-commit-info"
|
id="settings-commit-info"
|
||||||
|
|
|
||||||
32
js/events.js
32
js/events.js
|
|
@ -2380,6 +2380,38 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.querySelector('.now-playing-bar')?.addEventListener('contextmenu', async (e) => {
|
||||||
|
if (!player.currentTrack) return;
|
||||||
|
const track = player.currentTrack;
|
||||||
|
if (track.isLocal) return;
|
||||||
|
|
||||||
|
const target = e.target.closest('.cover, .title, .album, .artist');
|
||||||
|
if (!target) return;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (contextMenu._originalHTML) {
|
||||||
|
contextMenu.innerHTML = contextMenu._originalHTML;
|
||||||
|
contextMenu._originalHTML = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
contextTrack = track;
|
||||||
|
contextMenu._contextTrack = track;
|
||||||
|
contextMenu._contextType = track.type || 'track';
|
||||||
|
contextMenu._selectedTracks = [];
|
||||||
|
|
||||||
|
const unavailableActions = ['play-next', 'add-to-queue', 'download', 'track-mix'];
|
||||||
|
contextMenu.querySelectorAll('[data-action]').forEach((btn) => {
|
||||||
|
if (unavailableActions.includes(btn.dataset.action)) {
|
||||||
|
btn.style.display = track.isUnavailable ? 'none' : 'block';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await updateContextMenuLikeState(contextMenu, track);
|
||||||
|
positionMenu(contextMenu, e.clientX, e.clientY);
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
document.addEventListener('click', (e) => {
|
||||||
if (contextMenu.style.display === 'block') {
|
if (contextMenu.style.display === 'block') {
|
||||||
if (contextMenu._originalHTML) {
|
if (contextMenu._originalHTML) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue