vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'monochrome-music:main' into main

Browse source
This commit is contained in:
Valerie 2026-04-23 23:25:16 +02:00 committed by GitHub
commit 3fc77e776b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
index.html
View file

@ -1639,6 +1639,32 @@
</div>
</div>
<div id="help-modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
<h3 style="margin: 0">Monochrome Help</h3>
<button class="close-modal-btn" id="close-help-modal" style="background: none; border: none; font-size: 24px; cursor: pointer; color: var(--muted-foreground);">&times;</button>
</div>
<div id="help-video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; border-radius: var(--radius);">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
src="https://m.samidy.xyz/monochrome-help.mp4"
title="Monochrome Help"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
<p style="margin-top: 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.9rem;">
thank you to community member valerie for making this video!
</p>
<div class="modal-actions" style="justify-content: center">
<button id="help-modal-done" class="btn-primary">Done</button>
</div>
</div>
</div>
<div id="sidebar-overlay"></div>
<div id="csv-import-progress" class="csv-import-progress" style="display: none">
@ -1811,6 +1837,9 @@
</button>
<div id="search-history" class="search-history" style="display: none"></div>
</form>
<button id="help-btn" class="btn-icon" title="Help">
<use svg="!lucide/help-circle.svg" size="24" />
</button>
<div class="header-account-control">
<button
id="header-account-btn"

26
js/app.js
View file

@ -453,6 +453,32 @@ document.addEventListener('DOMContentLoaded', async () => {
}
new ThemeStore();
const helpBtn = document.getElementById('help-btn');
const helpModal = document.getElementById('help-modal');
const closeHelpModal = document.getElementById('close-help-modal');
const helpModalDone = document.getElementById('help-modal-done');
const helpModalOverlay = helpModal?.querySelector('.modal-overlay');
if (helpBtn && helpModal) {
helpBtn.addEventListener('click', () => {
helpModal.classList.add('active');
});
const hideHelpModal = () => {
helpModal.classList.remove('active');
const iframe = helpModal.querySelector('iframe');
if (iframe) {
const src = iframe.src;
iframe.src = '';
iframe.src = src;
}
};
closeHelpModal?.addEventListener('click', hideHelpModal);
helpModalDone?.addEventListener('click', hideHelpModal);
helpModalOverlay?.addEventListener('click', hideHelpModal);
}
await HiFiClient.initialize({
storage: [
localStorage,