smooth-player 1.0.1 → 2.0.0

package/dist/visualizers.js

@@ -12,9 +12,40 @@ class CanvasVisualizer {
         cancelAnimationFrame(this.frameId);
     }
 }
+function withAlpha(color, alpha) {
+    const safeAlpha = Math.max(0, Math.min(1, alpha));
+    const hex = color.trim();
+    if (/^#[\da-f]{3}$/i.test(hex)) {
+        const rChar = hex.charAt(1);
+        const gChar = hex.charAt(2);
+        const bChar = hex.charAt(3);
+        const r = parseInt(rChar + rChar, 16);
+        const g = parseInt(gChar + gChar, 16);
+        const b = parseInt(bChar + bChar, 16);
+        return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
+    }
+    if (/^#[\da-f]{6}$/i.test(hex)) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
+    }
+    const rgbMatch = hex.match(/^rgba?\(([^)]+)\)$/i);
+    if (rgbMatch) {
+        const parts = rgbMatch[1]?.split(",").map((part) => part.trim()) ?? [];
+        const r = Number(parts[0] ?? 255);
+        const g = Number(parts[1] ?? 255);
+        const b = Number(parts[2] ?? 255);
+        if (Number.isFinite(r) && Number.isFinite(g) && Number.isFinite(b)) {
+            return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
+        }
+    }
+    return color;
+}
 export class CanvasSpectrumVisualizer extends CanvasVisualizer {
     constructor(canvas, player, options = {}) {
         super(canvas, player);
+        this.ghostHeights = [];
         this.options = {
             width: options.width ?? canvas.width ?? 640,
             height: options.height ?? canvas.height ?? 160,
@@ -32,18 +63,50 @@ export class CanvasSpectrumVisualizer extends CanvasVisualizer {
             return;
         const data = this.player.getSpectrumData();
         const { width, height, background, color, barGap, barWidth } = this.options;
+        const style = this.player.getSpectrumStyle();
+        const isActive = !this.player.getAudioElement().paused;
         ctx.fillStyle = background;
         ctx.fillRect(0, 0, width, height);
+        if (!isActive) {
+            this.frameId = requestAnimationFrame(() => this.draw());
+            return;
+        }
         let x = 0;
         for (let i = 0; i < data.length && x < width; i += 1) {
             const value = (data[i] ?? 0) / 255;
             const barHeight = Math.max(2, value * height);
-            ctx.fillStyle = color;
-            ctx.fillRect(x, height - barHeight, barWidth, barHeight);
+            const baseY = style.inverted ? 0 : height;
+            const clampedHeight = barHeight;
+            if (style.dualLayer) {
+                const previous = this.ghostHeights[i] ?? clampedHeight;
+                const ghostHeight = previous * 0.88 + clampedHeight * 0.12;
+                this.ghostHeights[i] = ghostHeight;
+                ctx.globalAlpha = 0.34;
+                this.drawBar(ctx, x, baseY, barWidth, barGap, ghostHeight, color, style);
+            }
+            ctx.globalAlpha = 0.94;
+            this.drawBar(ctx, x, baseY, barWidth, barGap, clampedHeight, color, style);
             x += barWidth + barGap;
         }
+        ctx.globalAlpha = 1;
+        if (this.ghostHeights.length > data.length) {
+            this.ghostHeights = this.ghostHeights.slice(0, data.length);
+        }
         this.frameId = requestAnimationFrame(() => this.draw());
     }
+    drawBar(ctx, x, baseY, width, gap, height, color, style) {
+        const widthFactor = style.barWidth === "thin"
+            ? 1.9
+            : style.barWidth === "medium"
+                ? 5.7
+                : 17.1;
+        const maxDrawWidth = Math.max(1, width + gap - 1.8);
+        const drawWidth = Math.max(1, Math.min(width * widthFactor, maxDrawWidth));
+        const drawX = x - (drawWidth - width) / 2;
+        const topY = style.inverted ? baseY : baseY - height;
+        ctx.fillStyle = color;
+        ctx.fillRect(drawX, topY, drawWidth, height);
+    }
 }
 export class CanvasWaveformVisualizer extends CanvasVisualizer {
     constructor(canvas, player, options = {}) {
@@ -64,8 +127,13 @@ export class CanvasWaveformVisualizer extends CanvasVisualizer {
             return;
         const data = this.player.getWaveformData();
         const { width, height, background, color, lineWidth } = this.options;
+        const isActive = !this.player.getAudioElement().paused;
         ctx.fillStyle = background;
         ctx.fillRect(0, 0, width, height);
+        if (!isActive) {
+            this.frameId = requestAnimationFrame(() => this.draw());
+            return;
+        }
         ctx.lineWidth = lineWidth;
         ctx.strokeStyle = color;
         ctx.beginPath();
@@ -109,6 +177,7 @@ export class CanvasRadialVisualizer extends CanvasVisualizer {
         if (!ctx)
             return;
         const { width, height, background, color, mode, innerRadiusRatio, outerRadiusRatio, lineWidth, waveformAmplitude } = this.options;
+        const isActive = !this.player.getAudioElement().paused;
         const centerX = width / 2;
         const centerY = height / 2;
         const maxRadius = Math.min(width, height) / 2;
@@ -122,42 +191,80 @@ export class CanvasRadialVisualizer extends CanvasVisualizer {
             ctx.fillStyle = background;
             ctx.fillRect(0, 0, width, height);
         }
+        if (!isActive) {
+            this.frameId = requestAnimationFrame(() => this.draw());
+            return;
+        }
         if (mode === "spectrum") {
             const data = this.player.getSpectrumData();
-            const sampleCount = Math.min(160, data.length);
+            const spectrumStyle = this.player.getSpectrumStyle();
+            const sampleCount = Math.min(spectrumStyle.barWidth === "thin"
+                ? 136
+                : spectrumStyle.barWidth === "medium"
+                    ? 114
+                    : 92, data.length);
             const step = (Math.PI * 2) / sampleCount;
-            ctx.lineWidth = lineWidth;
+            const widthFactor = spectrumStyle.barWidth === "thin"
+                ? 2.05
+                : spectrumStyle.barWidth === "medium"
+                    ? 6.15
+                    : 18.45;
+            const ringCircumference = Math.PI * 2 * outerRadius;
+            const targetGap = spectrumStyle.barWidth === "thin"
+                ? 2.2
+                : spectrumStyle.barWidth === "medium"
+                    ? 4.2
+                    : 6.8;
+            const maxStrokeForGap = Math.max(1, ringCircumference / sampleCount - targetGap);
+            ctx.lineWidth = Math.min(lineWidth * widthFactor, maxStrokeForGap);
+            ctx.lineCap = "round";
             ctx.strokeStyle = color;
-            ctx.shadowColor = color;
-            ctx.shadowBlur = 8;
             for (let i = 0; i < sampleCount; i += 1) {
                 const value = (data[i] ?? 0) / 255;
                 const amplitude = Math.max(0.04, value);
                 const angle = i * step - Math.PI / 2;
-                const x0 = centerX + Math.cos(angle) * innerRadius;
-                const y0 = centerY + Math.sin(angle) * innerRadius;
-                const x1 = centerX + Math.cos(angle) * (innerRadius + amplitude * radialRange);
-                const y1 = centerY + Math.sin(angle) * (innerRadius + amplitude * radialRange);
+                const outwardStart = innerRadius;
+                const outwardEnd = outwardStart + amplitude * radialRange;
+                const inwardStart = outerRadius;
+                const inwardEnd = Math.max(innerRadius, inwardStart - amplitude * radialRange);
+                const startRadius = spectrumStyle.inverted ? inwardStart : outwardStart;
+                const primaryEndRadius = spectrumStyle.inverted ? inwardEnd : outwardEnd;
+                const x0 = centerX + Math.cos(angle) * startRadius;
+                const y0 = centerY + Math.sin(angle) * startRadius;
+                const x1 = centerX + Math.cos(angle) * primaryEndRadius;
+                const y1 = centerY + Math.sin(angle) * primaryEndRadius;
                 ctx.globalAlpha = 0.25 + amplitude * 0.75;
                 ctx.beginPath();
                 ctx.moveTo(x0, y0);
                 ctx.lineTo(x1, y1);
                 ctx.stroke();
+                if (spectrumStyle.dualLayer) {
+                    const altStart = spectrumStyle.inverted ? outwardStart : inwardStart;
+                    const altEnd = spectrumStyle.inverted ? outwardEnd : inwardEnd;
+                    const inverseAngle = -i * step - Math.PI / 2;
+                    const ax0 = centerX + Math.cos(inverseAngle) * altStart;
+                    const ay0 = centerY + Math.sin(inverseAngle) * altStart;
+                    const ax1 = centerX + Math.cos(inverseAngle) * altEnd;
+                    const ay1 = centerY + Math.sin(inverseAngle) * altEnd;
+                    ctx.globalAlpha = 0.18 + amplitude * 0.52;
+                    ctx.beginPath();
+                    ctx.moveTo(ax0, ay0);
+                    ctx.lineTo(ax1, ay1);
+                    ctx.stroke();
+                }
             }
-            ctx.shadowBlur = 0;
             ctx.globalAlpha = 1;
             this.frameId = requestAnimationFrame(() => this.draw());
             return;
         }
         const data = this.player.getWaveformData();
+        const waveformStyle = this.player.getWaveformStyle();
         const sampleCount = Math.min(220, data.length);
         const step = (Math.PI * 2) / sampleCount;
         const amplitudeRange = radialRange * waveformAmplitude;
         const baseRadius = innerRadius + radialRange * 0.5;
-        ctx.lineWidth = lineWidth;
+        ctx.lineWidth = waveformStyle.thickLine ? lineWidth * 2.25 : lineWidth;
         ctx.strokeStyle = color;
-        ctx.shadowColor = color;
-        ctx.shadowBlur = 10;
         ctx.globalAlpha = 0.95;
         ctx.beginPath();
         for (let i = 0; i < sampleCount; i += 1) {
@@ -175,7 +282,35 @@ export class CanvasRadialVisualizer extends CanvasVisualizer {
         }
         ctx.closePath();
         ctx.stroke();
-        ctx.shadowBlur = 0;
+        if (waveformStyle.fill) {
+            const fillGradient = ctx.createRadialGradient(centerX, centerY, Math.max(1, innerRadius * 0.12), centerX, centerY, Math.max(innerRadius + radialRange * 0.65, 2));
+            fillGradient.addColorStop(0, withAlpha(color, 0));
+            fillGradient.addColorStop(0.58, withAlpha(color, 0.08));
+            fillGradient.addColorStop(1, withAlpha(color, 0.24));
+            ctx.globalAlpha = 1;
+            ctx.fillStyle = fillGradient;
+            ctx.fill();
+        }
+        if (waveformStyle.doubleLine) {
+            ctx.globalAlpha = 0.42;
+            ctx.lineWidth = Math.max(1, ctx.lineWidth * 0.72);
+            ctx.beginPath();
+            for (let i = 0; i < sampleCount; i += 1) {
+                const normalized = ((data[i] ?? 128) - 128) / 128;
+                const r = baseRadius + normalized * amplitudeRange * 0.72 + radialRange * 0.1;
+                const angle = i * step - Math.PI / 2;
+                const x = centerX + Math.cos(angle) * r;
+                const y = centerY + Math.sin(angle) * r;
+                if (i === 0) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.closePath();
+            ctx.stroke();
+        }
         ctx.globalAlpha = 1;
         this.frameId = requestAnimationFrame(() => this.draw());
     }

package/dist-cjs/SmoothPlayer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SmoothPlayer = void 0;
 const events_js_1 = require("./events.js");
+const strings_js_1 = require("./i18n/strings.js");
 const DEFAULT_ANALYZER = {
     fftSize: 2048,
     smoothingTimeConstant: 0.8,
@@ -9,8 +10,19 @@ const DEFAULT_ANALYZER = {
     maxDecibels: -10,
 };
 const DEFAULT_ACCENT_COLOR = "#0ed2a4";
-const DEFAULT_PLAYLIST_ID = "default";
-const DEFAULT_PLAYLIST_TITLE = "My playlist";
+const DEFAULT_BACKGROUND_COLOR = "#0b1220";
+const DEFAULT_PLAYLIST_ID = strings_js_1.strings.playlist.defaultId;
+const DEFAULT_PLAYLIST_TITLE = strings_js_1.strings.playlist.defaultTitle;
+const DEFAULT_SPECTRUM_STYLE = {
+    dualLayer: false,
+    inverted: false,
+    barWidth: "medium",
+};
+const DEFAULT_WAVEFORM_STYLE = {
+    doubleLine: false,
+    fill: false,
+    thickLine: false,
+};
 class SmoothPlayer {
     constructor(options = {}) {
         this.events = new events_js_1.TypedEventEmitter();
@@ -32,7 +44,10 @@ class SmoothPlayer {
         this.audio.preload = this.audio.preload || "metadata";
         this.audio.volume = this.clamp(options.initialVolume ?? 1);
         this.visualizerMode = options.visualizer ?? "spectrum";
+        this.spectrumStyle = { ...DEFAULT_SPECTRUM_STYLE, ...options.spectrumStyle };
+        this.waveformStyle = { ...DEFAULT_WAVEFORM_STYLE, ...options.waveformStyle };
         this.accentColor = options.accentColor ?? DEFAULT_ACCENT_COLOR;
+        this.backgroundColor = options.backgroundColor ?? DEFAULT_BACKGROUND_COLOR;
         this.shuffleEnabled = options.initialShuffle ?? false;
         this.debugEnabled = options.debug ?? false;
         this.durationFallbackEnabled = options.durationFallback ?? true;
@@ -66,6 +81,30 @@ class SmoothPlayer {
     applyAccentColor(target) {
         target.style.setProperty("--smooth-player-accent", this.accentColor);
     }
+    setBackgroundColor(color) {
+        this.backgroundColor = color;
+    }
+    getBackgroundColor() {
+        return this.backgroundColor;
+    }
+    applyBackgroundColor(target) {
+        const normalized = this.backgroundColor.trim().toLowerCase();
+        if (normalized === DEFAULT_BACKGROUND_COLOR) {
+            target.style.removeProperty("--smooth-player-background");
+            target.style.removeProperty("--smooth-player-surface");
+            target.style.removeProperty("--smooth-player-panel");
+            target.style.removeProperty("--smooth-player-muted");
+            return;
+        }
+        target.style.setProperty("--smooth-player-background", this.backgroundColor);
+        target.style.setProperty("--smooth-player-surface", this.buildSurfaceGradient(this.backgroundColor));
+        target.style.setProperty("--smooth-player-panel", this.buildPanelGradient(this.backgroundColor));
+        target.style.setProperty("--smooth-player-muted", `color-mix(in srgb, ${this.backgroundColor} 30%, #d2deef 70%)`);
+    }
+    applyTheme(target) {
+        this.applyAccentColor(target);
+        this.applyBackgroundColor(target);
+    }
     setShuffle(enabled) {
         this.shuffleEnabled = enabled;
     }
@@ -155,8 +194,8 @@ class SmoothPlayer {
             titleClassName: options.titleClassName ?? "smooth-player__playlist-title",
             artistClassName: options.artistClassName ?? "smooth-player__playlist-artist",
             selectedAriaAttr: options.selectedAriaAttr ?? "aria-current",
-            getTitle: options.getTitle ?? ((track, index) => track.metadata?.title ?? `Track ${index + 1}`),
-            getArtist: options.getArtist ?? ((track) => track.metadata?.artist ?? "Unknown artist"),
+            getTitle: options.getTitle ?? ((track, index) => track.metadata?.title ?? `${strings_js_1.strings.track.unknownTitle} ${index + 1}`),
+            getArtist: options.getArtist ?? ((track) => track.metadata?.artist ?? strings_js_1.strings.track.unknownArtist),
         };
         const onSelect = options.onSelect;
         const render = () => {
@@ -229,7 +268,7 @@ class SmoothPlayer {
             trigger.className = "smooth-player__playlist-switcher-trigger";
             trigger.setAttribute("aria-haspopup", "listbox");
             trigger.setAttribute("aria-expanded", String(isOpen));
-            trigger.textContent = currentPlaylist?.title ?? playlists[0]?.title ?? "Playlist";
+            trigger.textContent = currentPlaylist?.title ?? playlists[0]?.title ?? strings_js_1.strings.playlist.triggerLabel;
             const menu = doc.createElement("div");
             menu.className = "smooth-player__playlist-switcher-menu";
             menu.hidden = !isOpen;
@@ -298,8 +337,8 @@ class SmoothPlayer {
         return () => off();
     }
     mountTrackInfo(titleElement, artistElement, options = {}) {
-        const unknownTitle = options.unknownTitle ?? "Unknown title";
-        const unknownArtist = options.unknownArtist ?? "Unknown artist";
+        const unknownTitle = options.unknownTitle ?? strings_js_1.strings.track.unknownTitle;
+        const unknownArtist = options.unknownArtist ?? strings_js_1.strings.track.unknownArtist;
         const render = () => {
             const track = this.getCurrentTrack();
             titleElement.textContent = track?.metadata?.title ?? unknownTitle;
@@ -311,8 +350,8 @@ class SmoothPlayer {
     }
     mountPlayButton(button, options = {}) {
         const labelElement = options.labelElement ?? null;
-        const playLabel = options.playLabel ?? "Riproduci";
-        const pauseLabel = options.pauseLabel ?? "Pausa";
+        const playLabel = options.playLabel ?? strings_js_1.strings.playback.playLabel;
+        const pauseLabel = options.pauseLabel ?? strings_js_1.strings.playback.pauseLabel;
         const render = () => {
             const isPlaying = !this.audio.paused;
             const label = isPlaying ? pauseLabel : playLabel;
@@ -347,7 +386,7 @@ class SmoothPlayer {
         };
     }
     mountShuffleToggle(options) {
-        const { button, labelElement = null, activeClassName = "smooth-player__toggle-on", enabledLabel = "Disattiva shuffle", disabledLabel = "Attiva shuffle", initialEnabled = false, } = options;
+        const { button, labelElement = null, activeClassName = "smooth-player__toggle-on", enabledLabel = strings_js_1.strings.shuffle.enabledLabel, disabledLabel = strings_js_1.strings.shuffle.disabledLabel, initialEnabled = false, } = options;
         const render = () => {
             const enabled = this.getShuffle();
             const label = enabled ? enabledLabel : disabledLabel;
@@ -370,24 +409,39 @@ class SmoothPlayer {
         };
     }
     mountPlaylistPanel(options) {
-        const { root, toggleButton, panel, closeButton = null, openClassName = "smooth-player--playlist-open", openLabel = "Apri playlist", closeLabel = "Chiudi playlist", } = options;
+        const { root, toggleButton, panel, closeButton = null, openClassName = "smooth-player--playlist-open", openLabel = strings_js_1.strings.playlist.openLabel, closeLabel = strings_js_1.strings.playlist.closeLabel, } = options;
         let isOpen = false;
         const hasPlaylist = () => this.getPlaylists().length > 1 || this.getActiveTracks().length > 1;
         const syncVisibility = () => {
             toggleButton.hidden = !hasPlaylist();
         };
         const setOpen = (open) => {
+            const activeElement = (root.ownerDocument ?? document).activeElement;
+            const focusedInsidePanel = activeElement instanceof Node && panel.contains(activeElement);
             if (!hasPlaylist()) {
                 isOpen = false;
+                if (focusedInsidePanel) {
+                    toggleButton.focus();
+                }
                 root.classList.remove(openClassName);
                 panel.setAttribute("aria-hidden", "true");
+                panel.setAttribute("inert", "");
                 toggleButton.setAttribute("aria-expanded", "false");
                 toggleButton.setAttribute("aria-label", openLabel);
                 return;
             }
             isOpen = open;
+            if (!open && focusedInsidePanel) {
+                toggleButton.focus();
+            }
             root.classList.toggle(openClassName, open);
             panel.setAttribute("aria-hidden", String(!open));
+            if (open) {
+                panel.removeAttribute("inert");
+            }
+            else {
+                panel.setAttribute("inert", "");
+            }
             toggleButton.setAttribute("aria-expanded", String(open));
             toggleButton.setAttribute("aria-label", open ? closeLabel : openLabel);
         };
@@ -580,12 +634,199 @@ class SmoothPlayer {
             offDurationChange();
         };
     }
+    mountAudioDrop(target, options = {}) {
+        const activeClassName = options.activeClassName ?? "is-drag-over";
+        const onDropCallback = options.onDrop;
+        let dragDepth = 0;
+        let activeObjectUrls = [];
+        const clearActiveState = () => {
+            dragDepth = 0;
+            target.classList.remove(activeClassName);
+        };
+        const revokeActiveUrls = () => {
+            for (const url of activeObjectUrls) {
+                URL.revokeObjectURL(url);
+            }
+            activeObjectUrls = [];
+        };
+        const isAudioFile = (file) => {
+            if (file.type.startsWith("audio/"))
+                return true;
+            return /\.(mp3|wav|ogg|m4a|aac|flac|opus)$/i.test(file.name);
+        };
+        const isPlaylistFile = (file) => {
+            if (/\.m3u8?$/i.test(file.name))
+                return true;
+            return /(?:application|audio)\/(?:vnd\.apple\.mpegurl|x-mpegurl)/i.test(file.type);
+        };
+        const baseName = (value) => {
+            const noQuery = value.split("?")[0]?.split("#")[0] ?? value;
+            const normalized = noQuery.replace(/\\/g, "/");
+            const tail = normalized.split("/").pop() ?? normalized;
+            try {
+                return decodeURIComponent(tail);
+            }
+            catch {
+                return tail;
+            }
+        };
+        const guessTitle = (value) => baseName(value).replace(/\.[^/.]+$/, "") || strings_js_1.strings.track.unknownTitle;
+        const buildTrackFromAudioFile = (file, index) => {
+            const src = URL.createObjectURL(file);
+            activeObjectUrls.push(src);
+            const track = {
+                id: `dropped-${Date.now()}-${index}`,
+                src,
+                metadata: {
+                    title: file.name.replace(/\.[^/.]+$/, ""),
+                    artist: strings_js_1.strings.track.localFileArtist,
+                },
+            };
+            if (file.type) {
+                track.type = file.type;
+            }
+            return track;
+        };
+        const parseM3U = (content, localAudioFiles) => {
+            const localByName = new Map();
+            localAudioFiles.forEach((file) => {
+                localByName.set(file.name.toLowerCase(), file);
+            });
+            const tracks = [];
+            const lines = content.split(/\r?\n/);
+            let extInfTitle = null;
+            lines.forEach((raw, index) => {
+                const line = raw.trim().replace(/^\uFEFF/, "");
+                if (!line)
+                    return;
+                if (line.startsWith("#EXTINF:")) {
+                    const commaIndex = line.indexOf(",");
+                    extInfTitle = commaIndex >= 0 ? line.slice(commaIndex + 1).trim() : null;
+                    return;
+                }
+                if (line.startsWith("#"))
+                    return;
+                const localFile = localByName.get(baseName(line).toLowerCase()) ?? null;
+                let src = "";
+                let type;
+                if (localFile) {
+                    src = URL.createObjectURL(localFile);
+                    activeObjectUrls.push(src);
+                    type = localFile.type || undefined;
+                }
+                else {
+                    try {
+                        src = new URL(line, window.location.href).href;
+                    }
+                    catch {
+                        src = "";
+                    }
+                }
+                if (!src) {
+                    extInfTitle = null;
+                    return;
+                }
+                const track = {
+                    id: `dropped-m3u-${Date.now()}-${index}`,
+                    src,
+                    metadata: {
+                        title: extInfTitle || guessTitle(line),
+                        artist: localFile ? strings_js_1.strings.track.localFileArtist : strings_js_1.strings.track.m3uArtist,
+                    },
+                };
+                if (type) {
+                    track.type = type;
+                }
+                tracks.push(track);
+                extInfTitle = null;
+            });
+            return tracks;
+        };
+        const hasFilePayload = (event) => {
+            const types = event.dataTransfer?.types;
+            if (!types)
+                return false;
+            return Array.from(types).includes("Files");
+        };
+        const onDragEnter = (event) => {
+            if (!hasFilePayload(event))
+                return;
+            event.preventDefault();
+            dragDepth += 1;
+            target.classList.add(activeClassName);
+        };
+        const onDragOver = (event) => {
+            if (!hasFilePayload(event))
+                return;
+            event.preventDefault();
+            if (event.dataTransfer) {
+                event.dataTransfer.dropEffect = "copy";
+            }
+        };
+        const onDragLeave = (event) => {
+            if (!hasFilePayload(event))
+                return;
+            event.preventDefault();
+            dragDepth = Math.max(0, dragDepth - 1);
+            if (dragDepth === 0) {
+                target.classList.remove(activeClassName);
+            }
+        };
+        const onDropEvent = async (event) => {
+            event.preventDefault();
+            clearActiveState();
+            const files = Array.from(event.dataTransfer?.files ?? []);
+            if (!files.length)
+                return;
+            const playlistFile = files.find(isPlaylistFile) ?? null;
+            const audioFiles = files.filter(isAudioFile);
+            let tracks = [];
+            let kind = "audio";
+            let sourceFile = null;
+            revokeActiveUrls();
+            if (playlistFile) {
+                kind = "playlist";
+                sourceFile = playlistFile;
+                const content = await playlistFile.text();
+                tracks = parseM3U(content, audioFiles);
+            }
+            else if (audioFiles.length) {
+                sourceFile = audioFiles[0] ?? null;
+                tracks = audioFiles.map((file, index) => buildTrackFromAudioFile(file, index));
+            }
+            const firstTrack = tracks[0];
+            if (!sourceFile || !firstTrack) {
+                this.events.emit("error", {
+                    error: new Error(strings_js_1.strings.errors.noPlayableTracksDropped),
+                });
+                return;
+            }
+            this.setPlaylist(tracks, 0);
+            onDropCallback?.({ file: sourceFile, track: firstTrack, tracks, kind });
+            await this.play(0);
+        };
+        const onDrop = (event) => {
+            void onDropEvent(event);
+        };
+        target.addEventListener("dragenter", onDragEnter);
+        target.addEventListener("dragover", onDragOver);
+        target.addEventListener("dragleave", onDragLeave);
+        target.addEventListener("drop", onDrop);
+        return () => {
+            clearActiveState();
+            target.removeEventListener("dragenter", onDragEnter);
+            target.removeEventListener("dragover", onDragOver);
+            target.removeEventListener("dragleave", onDragLeave);
+            target.removeEventListener("drop", onDrop);
+            revokeActiveUrls();
+        };
+    }
     async play(index) {
         if (typeof index === "number") {
             this.loadTrackByIndex(index);
         }
         if (!this.audio.src) {
-            throw new Error("No track loaded. Use playlist option, setPlaylist(), or loadTrack().");
+            throw new Error(strings_js_1.strings.errors.noTrackLoaded);
         }
         if (this.context.state === "suspended") {
             await this.context.resume();
@@ -672,7 +913,10 @@ class SmoothPlayer {
             playlistTitle: playlist?.title ?? DEFAULT_PLAYLIST_TITLE,
             playlistCount: this.playlists.length,
             visualizer: this.visualizerMode,
+            spectrumStyle: { ...this.spectrumStyle },
+            waveformStyle: { ...this.waveformStyle },
             accentColor: this.accentColor,
+            backgroundColor: this.backgroundColor,
             shuffle: this.shuffleEnabled,
         };
     }
@@ -714,6 +958,18 @@ class SmoothPlayer {
     getVisualizer() {
         return this.visualizerMode;
     }
+    setSpectrumStyle(options) {
+        this.spectrumStyle = { ...this.spectrumStyle, ...options };
+    }
+    getSpectrumStyle() {
+        return { ...this.spectrumStyle };
+    }
+    setWaveformStyle(options) {
+        this.waveformStyle = { ...this.waveformStyle, ...options };
+    }
+    getWaveformStyle() {
+        return { ...this.waveformStyle };
+    }
     configureAnalyzer(options = {}) {
         const config = { ...DEFAULT_ANALYZER, ...options };
         this.analyser.fftSize = config.fftSize;
@@ -721,6 +977,12 @@ class SmoothPlayer {
         this.analyser.minDecibels = config.minDecibels;
         this.analyser.maxDecibels = config.maxDecibels;
     }
+    buildSurfaceGradient(baseColor) {
+        return `linear-gradient(145deg, color-mix(in srgb, ${baseColor} 74%, #2a3f67 26%), color-mix(in srgb, ${baseColor} 82%, #15233e 18%) 56%, color-mix(in srgb, ${baseColor} 88%, #0a1324 12%))`;
+    }
+    buildPanelGradient(baseColor) {
+        return `linear-gradient(190deg, color-mix(in srgb, ${baseColor} 72%, #2a4069 28%) 0%, color-mix(in srgb, ${baseColor} 82%, #16243f 18%) 58%, color-mix(in srgb, ${baseColor} 88%, #0a1222 12%) 100%)`;
+    }
     getActivePlaylist() {
         if (!this.activePlaylistId)
             return null;
@@ -770,11 +1032,31 @@ class SmoothPlayer {
             this.events.emit("ended", undefined);
         });
         this.audio.addEventListener("error", () => {
+            const src = this.audio.currentSrc || this.audio.src || "";
+            const mediaError = this.audio.error;
+            const isCrossOrigin = this.isCrossOriginSource(src);
+            const isPossiblyCors = isCrossOrigin && mediaError?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED;
+            const message = isPossiblyCors
+                ? strings_js_1.strings.errors.corsBlocked
+                : strings_js_1.strings.errors.audioPlaybackFailed;
             this.events.emit("error", {
-                error: new Error("Audio playback failed."),
+                error: new Error(message),
             });
         });
     }
+    isCrossOriginSource(src) {
+        if (!src)
+            return false;
+        if (src.startsWith("blob:") || src.startsWith("data:") || src.startsWith("file:"))
+            return false;
+        try {
+            const url = new URL(src, window.location.href);
+            return url.origin !== window.location.origin;
+        }
+        catch {
+            return false;
+        }
+    }
     clamp(value) {
         return Math.min(1, Math.max(0, value));
     }