tilting, rounding, and new trackerapi instance

functions/unreleased/[sheetId]/[projectName].js

@@ -2,7 +2,11 @@
 
 const ARTISTS_NDJSON_URL = 'https://assets.artistgrid.cx/artists.ndjson';
 const ASSETS_BASE_URL = 'https://assets.artistgrid.cx';
-const TRACKER_API_ENDPOINTS = ['https://trackerapi-1.artistgrid.cx/get/', 'https://trackerapi-2.artistgrid.cx/get/'];
+const TRACKER_API_ENDPOINTS = [
+    'https://trackerapi-1.artistgrid.cx/get/',
+    'https://trackerapi-2.artistgrid.cx/get/',
+    'https://trackerapi-3.artistgrid.cx/get/',
+];
 
 function getSheetId(url) {
     if (!url) return null;

index.html

@@ -2956,6 +2956,28 @@
                                         <span class="slider"></span>
                                     </label>
                                 </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">No Round Album Cover</span>
+                                        <span class="description">Do not round the album cover in fullscreen view</span>
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="fullscreen-cover-no-round-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
+                                <div class="setting-item">
+                                    <div class="info">
+                                        <span class="label">Vanilla Tilt Album Cover</span>
+                                        <span class="description"
+                                            >Enable 3D tilt effect on the album cover in fullscreen view</span
+                                        >
+                                    </div>
+                                    <label class="toggle-switch">
+                                        <input type="checkbox" id="fullscreen-cover-vanilla-tilt-toggle" checked />
+                                        <span class="slider"></span>
+                                    </label>
+                                </div>
                             </div>
 
                             <div class="settings-group">
@@ -5457,6 +5479,7 @@
                 </div>
             </footer>
         </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/pocketbase@0.21.3/dist/pocketbase.umd.js"></script>
         <script type="module" src="/js/app.js"></script>
     </body>

js/settings.js

@@ -35,6 +35,8 @@ import {
     analyticsSettings,
     modalSettings,
     preferDolbyAtmosSettings,
+    fullscreenCoverNoRoundSettings,
+    fullscreenCoverVanillaTiltSettings,
 } from './storage.js';
 import { audioContextManager, getPresetsForBandCount } from './audio-context.js';
 import { calculateBiquadResponse, interpolate, getNormalizationOffset, runAutoEqAlgorithm } from './autoeq-engine.js';
@@ -4604,6 +4606,26 @@ export async function initializeSettings(scrobbler, player, api, ui) {
         });
     }
 
+    // Fullscreen Cover No Round Toggle
+    const fullscreenCoverNoRoundToggle = document.getElementById('fullscreen-cover-no-round-toggle');
+    if (fullscreenCoverNoRoundToggle) {
+        fullscreenCoverNoRoundToggle.checked = fullscreenCoverNoRoundSettings.isEnabled();
+        fullscreenCoverNoRoundToggle.addEventListener('change', (e) => {
+            fullscreenCoverNoRoundSettings.setEnabled(e.target.checked);
+            window.dispatchEvent(new CustomEvent('fullscreen-cover-settings-changed'));
+        });
+    }
+
+    // Fullscreen Cover Vanilla Tilt Toggle
+    const fullscreenCoverVanillaTiltToggle = document.getElementById('fullscreen-cover-vanilla-tilt-toggle');
+    if (fullscreenCoverVanillaTiltToggle) {
+        fullscreenCoverVanillaTiltToggle.checked = fullscreenCoverVanillaTiltSettings.isEnabled();
+        fullscreenCoverVanillaTiltToggle.addEventListener('change', (e) => {
+            fullscreenCoverVanillaTiltSettings.setEnabled(e.target.checked);
+            window.dispatchEvent(new CustomEvent('fullscreen-cover-settings-changed'));
+        });
+    }
+
     // Waveform Toggle
     const waveformToggle = document.getElementById('waveform-toggle');
     if (waveformToggle) {

js/storage.js

@@ -590,6 +590,38 @@ export const dynamicColorSettings = {
     },
 };
 
+export const fullscreenCoverNoRoundSettings = {
+    STORAGE_KEY: 'fullscreen-cover-no-round',
+
+    isEnabled() {
+        try {
+            return localStorage.getItem(this.STORAGE_KEY) !== 'false';
+        } catch {
+            return true;
+        }
+    },
+
+    setEnabled(enabled) {
+        localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
+    },
+};
+
+export const fullscreenCoverVanillaTiltSettings = {
+    STORAGE_KEY: 'fullscreen-cover-vanilla-tilt',
+
+    isEnabled() {
+        try {
+            return localStorage.getItem(this.STORAGE_KEY) !== 'false';
+        } catch {
+            return true;
+        }
+    },
+
+    setEnabled(enabled) {
+        localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
+    },
+};
+
 export const cardSettings = {
     COMPACT_ARTIST_KEY: 'card-compact-artist',
     COMPACT_ALBUM_KEY: 'card-compact-album',

js/tracker.js

@@ -107,7 +107,11 @@ function transformErasImages(eras) {
 }
 
 async function fetchTrackerData(sheetId) {
-    const endpoints = ['https://trackerapi-1.artistgrid.cx/get/', 'https://trackerapi-2.artistgrid.cx/get/'];
+    const endpoints = [
+        'https://trackerapi-1.artistgrid.cx/get/',
+        'https://trackerapi-2.artistgrid.cx/get/',
+        'https://trackerapi-3.artistgrid.cx/get/',
+    ];
 
     let lastError = null;
     for (const baseUrl of endpoints) {

js/ui.js

@@ -26,6 +26,8 @@ import {
     fontSettings,
     contentBlockingSettings,
     settingsUiState,
+    fullscreenCoverNoRoundSettings,
+    fullscreenCoverVanillaTiltSettings,
 } from './storage.js';
 import { db } from './db.js';
 import { getVibrantColorFromImage } from './vibrant-color.js';
@@ -166,6 +168,30 @@ export class UIRenderer {
             }
         });
 
+        window.addEventListener('fullscreen-cover-settings-changed', () => {
+            const overlay = document.getElementById('fullscreen-cover-overlay');
+            const coverImage = document.getElementById('fullscreen-cover-image');
+            if (overlay && overlay.style.display === 'flex') {
+                if (fullscreenCoverNoRoundSettings.isEnabled()) {
+                    overlay.classList.add('fullscreen-cover-no-round');
+                } else {
+                    overlay.classList.remove('fullscreen-cover-no-round');
+                }
+                if (coverImage) {
+                    if (fullscreenCoverVanillaTiltSettings.isEnabled() && window.VanillaTilt) {
+                        window.VanillaTilt.init(coverImage, {
+                            max: 15,
+                            speed: 400,
+                            glare: true,
+                            'max-glare': 0.3,
+                        });
+                    } else if (coverImage.vanillaTilt) {
+                        coverImage.vanillaTilt.destroy();
+                    }
+                }
+            }
+        });
+
         window.addEventListener('refresh-home-editors-picks', () => {
             this.renderHomeEditorsPicks(true, 'home-editors-picks');
             this.renderHomeEditorsPicks(true, 'home-editors-picks-empty');
@@ -1232,6 +1258,22 @@ export class UIRenderer {
 
         overlay.style.display = 'flex';
 
+        if (fullscreenCoverNoRoundSettings.isEnabled()) {
+            overlay.classList.add('fullscreen-cover-no-round');
+        } else {
+            overlay.classList.remove('fullscreen-cover-no-round');
+        }
+
+        const coverImage = document.getElementById('fullscreen-cover-image');
+        if (fullscreenCoverVanillaTiltSettings.isEnabled() && coverImage && window.VanillaTilt) {
+            window.VanillaTilt.init(coverImage, {
+                max: 15,
+                speed: 400,
+                glare: true,
+                'max-glare': 0.3,
+            });
+        }
+
         const startVisualizer = async () => {
             if (!visualizerSettings.isEnabled()) {
                 if (this.visualizer) this.visualizer.stop();
@@ -1283,8 +1325,12 @@ export class UIRenderer {
 
     closeFullscreenCover() {
         const overlay = document.getElementById('fullscreen-cover-overlay');
+        const coverImage = document.getElementById('fullscreen-cover-image');
+        if (coverImage && coverImage.vanillaTilt) {
+            coverImage.vanillaTilt.destroy();
+        }
         overlay.style.display = 'none';
-        overlay.classList.remove('visualizer-active', 'ui-hidden');
+        overlay.classList.remove('visualizer-active', 'ui-hidden', 'fullscreen-cover-no-round');
 
         const playerBar = document.querySelector('.now-playing-bar');
         if (playerBar) playerBar.style.removeProperty('display');

styles.css

@@ -4094,6 +4094,10 @@ input:checked + .slider::before {
     z-index: 1;
 }
 
+#fullscreen-cover-overlay.fullscreen-cover-no-round #fullscreen-cover-image {
+    border-radius: 0;
+}
+
 /* Enhanced drop shadow for album cover in visualizer mode */
 #fullscreen-cover-overlay.visualizer-active #fullscreen-cover-image {
     box-shadow: