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

add cd thing kinda cool

Browse source
This commit is contained in:
windigerbus 2026-04-19 21:17:21 +02:00 committed by edideaur
parent 049c0cf83e
commit 6e3dc47c0c
5 changed files with 88 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
index.html
View file

@ -262,12 +262,25 @@
<div class="fullscreen-shell">
<div class="fullscreen-main-view">
<div class="fullscreen-media-column">
<div class="fullscreen-artwork-card">
<div class="fullscreen-artwork-card" id="fullscreen-artwork-card">
<img
id="fullscreen-cover-image"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
alt="Album Cover"
/>
<div class="cd-ring" id="cd-ring"></div>
<svg width="0" height="0">
<defs>
<clipPath id="cd-hole-clip" clipPathUnits="objectBoundingBox">
<path fill-rule="evenodd"
d="M0,0 H1 V1 H0 Z
M0.5,0.5
m-0.069,0
a0.069,0.069 0 1,0 0.138,0
a0.069,0.069 0 1,0 -0.138,0 Z"/>
</clipPath>
</defs>
</svg>
</div>
<div class="fullscreen-track-info">
@ -3325,6 +3338,19 @@
<span class="slider"></span>
</label>
</div>
</div><div class="settings-group">
<div class="setting-item" id="cd-album-cover-setting">
<div class="info">
<span class="label">CD Album Cover</span>
<span class="description"
>Spin album cover and add CD hole in fullscreen</span
>
</div>
<label class="toggle-switch">
<input type="checkbox" id="cd-album-cover-toggle" />
<span class="slider"></span>
</label>
</div>
</div>
</div>
</div>

11
js/settings.js
View file

@ -6068,6 +6068,17 @@ export async function initializeSettings(scrobbler, player, api, ui) {
observer.observe(appearanceTabContent, { attributes: true });
}
// Spins album cover and adds hole in fullscreen
const cdAlbumCoverToggle = document.getElementById("cd-album-cover-toggle");
if (cdAlbumCoverToggle) {
cdAlbumCoverToggle.checked = visualizerSettings.isCdAlbumCoverEnabled();
cdAlbumCoverToggle.addEventListener('change', async (e) => {
visualizerSettings.setCdAlbumCoverEnabled(e.target.checked);
});
}
// Watch for downloads tab becoming active and update setting visibility
const downloadsTabContent = document.getElementById('settings-tab-downloads');
if (downloadsTabContent) {

13
js/storage.js
View file

@ -1080,6 +1080,19 @@ export const visualizerSettings = {
setButterchurnRandomizeEnabled(enabled) {
localStorage.setItem('butterchurn-randomize-enabled', enabled);
},
// Spin album cover and add hole in fullscreen
isCdAlbumCoverEnabled() {
try {
return localStorage.getItem('cd-album-cover-enabled') === 'true';
} catch {
return true;
}
},
setCdAlbumCoverEnabled(enabled) {
localStorage.setItem('cd-album-cover-enabled', enabled);
},
};
export const equalizerSettings = {

9
js/ui.js
View file

@ -1355,6 +1355,14 @@ export class UIRenderer {
const lyricsPane = document.getElementById('fullscreen-lyrics-pane');
const lyricsContent = document.getElementById('fullscreen-lyrics-content');
const lyricsToggleBtn = document.getElementById('toggle-fullscreen-lyrics-btn');
const coverImage = document.getElementById('fullscreen-cover-image');
const coverCard = document.getElementById('fullscreen-artwork-card');
const cdRing = document.getElementById('cd-ring');
const isCdMode = visualizerSettings.isCdAlbumCoverEnabled();
coverImage.classList.toggle("cd", isCdMode);
coverCard.classList.toggle("cd", isCdMode);
cdRing.classList.toggle("cd", isCdMode);
await this.updateFullscreenMetadata(track, nextTrack);
@ -1414,7 +1422,6 @@ export class UIRenderer {
overlay.classList.remove('fullscreen-cover-no-round');
}
const coverImage = document.getElementById('fullscreen-cover-image');
if (coverImage?.vanillaTilt) {
coverImage.vanillaTilt.destroy();
}

29
styles.css
View file

@ -11491,3 +11491,32 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
opacity: 0.8;
vertical-align: middle;
}
img.cd {
border-radius: 50% !important;
box-shadow: none;
clip-path: url(#cd-hole-clip);
}
.fullscreen-artwork-card.cd {
position: relative;
border-radius: 50% !important;
border: .125vw solid #ccc;
animation: spin 200s linear infinite;
}
.cd-ring {
display: none;
}
.cd-ring.cd {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 23.5%;
height: 23.5%;
border-radius: 50%;
border: .125vw solid #ccc;
}