add cd thing kinda cool

index.html

@@ -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>

js/settings.js

@@ -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) {

js/storage.js

@@ -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 = {

js/ui.js

@@ -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();
         }

styles.css

@@ -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;
+}