smooth-player 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,170 @@
+export type VisualizerMode = "spectrum" | "waveform" | "none";
+export interface TrackMetadata {
+    title?: string;
+    artist?: string;
+    album?: string;
+    albumArtUrl?: string;
+    year?: string | number;
+    genre?: string;
+    [key: string]: unknown;
+}
+export interface AudioTrack {
+    id: string;
+    src: string;
+    type?: string;
+    metadata?: TrackMetadata;
+}
+export interface AudioPlaylist {
+    id: string;
+    title: string;
+    tracks: PlaylistEntry[];
+}
+export type PlaylistEntry = AudioTrack | AudioPlaylist;
+export interface AnalyzerOptions {
+    fftSize?: number;
+    smoothingTimeConstant?: number;
+    minDecibels?: number;
+    maxDecibels?: number;
+}
+export interface PlaylistMountOptions {
+    listRole?: string;
+    itemClassName?: string;
+    titleClassName?: string;
+    artistClassName?: string;
+    selectedAriaAttr?: string;
+    getTitle?: (track: AudioTrack, index: number) => string;
+    getArtist?: (track: AudioTrack, index: number) => string;
+    onSelect?: (payload: {
+        index: number;
+        track: AudioTrack;
+    }) => void;
+}
+export interface PlaylistSwitcherMountOptions {
+    itemClassName?: string;
+    activeClassName?: string;
+    onSelect?: (payload: {
+        id: string;
+        title: string;
+    }) => void;
+}
+export interface TrackInfoMountOptions {
+    unknownTitle?: string;
+    unknownArtist?: string;
+}
+export interface PlaylistTitleMountOptions {
+    fallbackTitle?: string;
+}
+export interface PlayButtonMountOptions {
+    labelElement?: HTMLElement | null;
+    playLabel?: string;
+    pauseLabel?: string;
+}
+export interface ProgressMountOptions {
+    range: HTMLInputElement;
+    currentTimeElement?: HTMLElement | null;
+    durationElement?: HTMLElement | null;
+    progressRoot?: HTMLElement | null;
+    ringElement?: HTMLElement | null;
+}
+export interface TransportControlsMountOptions {
+    previousButton: HTMLElement;
+    nextButton: HTMLElement;
+}
+export interface ShuffleToggleMountOptions {
+    button: HTMLButtonElement;
+    labelElement?: HTMLElement | null;
+    activeClassName?: string;
+    enabledLabel?: string;
+    disabledLabel?: string;
+    initialEnabled?: boolean;
+}
+export interface PlaylistPanelMountOptions {
+    root: HTMLElement;
+    toggleButton: HTMLButtonElement;
+    panel: HTMLElement;
+    closeButton?: HTMLElement | null;
+    openClassName?: string;
+    openLabel?: string;
+    closeLabel?: string;
+}
+export interface PlaylistPanelController {
+    destroy: () => void;
+    getOpen: () => boolean;
+    setOpen: (open: boolean) => void;
+}
+export interface DebugPanelMountOptions {
+    enabled?: boolean;
+    panel: HTMLElement;
+    sourceElement: HTMLElement;
+    currentTimeElement: HTMLElement;
+    durationElement: HTMLElement;
+    readyStateElement: HTMLElement;
+    networkStateElement: HTMLElement;
+    pausedElement: HTMLElement;
+    eventsElement: HTMLElement;
+    maxEvents?: number;
+}
+export interface StandardPlayerUIMountOptions {
+    debugEnabled?: boolean;
+}
+export interface StandardPlayerUIController {
+    destroy: () => void;
+    rebuildVisualizer: () => void;
+}
+export interface SmoothPlayerOptions {
+    audio?: HTMLAudioElement;
+    autoplay?: boolean;
+    loop?: boolean;
+    debug?: boolean;
+    crossOrigin?: HTMLMediaElement["crossOrigin"];
+    playlist?: PlaylistEntry[];
+    initialVolume?: number;
+    initialTrackIndex?: number;
+    accentColor?: string;
+    analyzer?: AnalyzerOptions;
+    visualizer?: VisualizerMode;
+    initialShuffle?: boolean;
+    durationFallback?: boolean;
+}
+export interface PlaybackState {
+    currentTrackIndex: number;
+    isPlaying: boolean;
+    duration: number;
+    currentTime: number;
+    volume: number;
+    loop: boolean;
+    playlistId: string | null;
+    playlistTitle: string;
+    playlistCount: number;
+    visualizer: VisualizerMode;
+    accentColor: string;
+    shuffle: boolean;
+}
+export interface PlayerEvents {
+    ready: undefined;
+    play: undefined;
+    pause: undefined;
+    ended: undefined;
+    playlistchange: {
+        id: string | null;
+        title: string;
+        index: number;
+    };
+    trackchange: {
+        index: number;
+        track: AudioTrack | null;
+    };
+    durationchange: {
+        duration: number;
+    };
+    timeupdate: {
+        currentTime: number;
+        duration: number;
+    };
+    volumechange: {
+        volume: number;
+    };
+    error: {
+        error: Error;
+    };
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui.d.ts

@@ -0,0 +1,3 @@
+import { SmoothPlayer } from "./SmoothPlayer.js";
+import { type StandardPlayerUIController, type StandardPlayerUIMountOptions } from "./types.js";
+export declare function mountStandardPlayerUI(player: SmoothPlayer, root: HTMLElement, options?: StandardPlayerUIMountOptions): StandardPlayerUIController;

package/dist/ui.js

@@ -0,0 +1,119 @@
+import { CanvasRadialVisualizer } from "./visualizers.js";
+function requiredElement(scope, selector) {
+    const element = scope.querySelector(selector);
+    if (!element) {
+        throw new Error(`Missing required element: ${selector}`);
+    }
+    return element;
+}
+export function mountStandardPlayerUI(player, root, options = {}) {
+    const doc = root.ownerDocument ?? document;
+    const debugEnabled = options.debugEnabled ?? player.getDebug();
+    const title = requiredElement(root, "#title");
+    const artist = requiredElement(root, "#artist");
+    const playlistTitle = requiredElement(root, ".smooth-player__top-title");
+    const progress = requiredElement(root, "#progress");
+    const timeCurrent = requiredElement(root, "#time-current");
+    const timeDuration = requiredElement(root, "#time-duration");
+    const playButton = requiredElement(root, "#play");
+    const playText = requiredElement(root, "#play-text");
+    const prevButton = requiredElement(root, "#prev");
+    const nextButton = requiredElement(root, "#next");
+    const playlistToggle = requiredElement(root, "#playlist-toggle");
+    const shuffleToggle = requiredElement(root, "#shuffle-toggle");
+    const shuffleText = requiredElement(root, "#shuffle-text");
+    const playlistPanel = requiredElement(root, "#playlist-panel");
+    const playlistHead = requiredElement(root, ".smooth-player__playlist-head");
+    const playlistClose = requiredElement(root, "#playlist-close");
+    const playlistList = requiredElement(root, "#playlist-list");
+    const radialCanvas = requiredElement(root, "#radial-visualizer");
+    const progressRing = requiredElement(root, "#progress-ring");
+    const unmounts = [];
+    let radial = null;
+    const rebuildVisualizer = () => {
+        radial?.stop();
+        const mode = player.getVisualizer();
+        radialCanvas.hidden = mode === "none";
+        if (mode === "none") {
+            radial = null;
+            return;
+        }
+        radial = new CanvasRadialVisualizer(radialCanvas, player, {
+            mode,
+            color: player.getAccentColor(),
+            background: "transparent",
+        });
+        radial.start();
+    };
+    const playlistPanelController = player.mountPlaylistPanel({
+        root,
+        toggleButton: playlistToggle,
+        panel: playlistPanel,
+        closeButton: playlistClose,
+    });
+    unmounts.push(() => playlistPanelController.destroy());
+    unmounts.push(player.mountPlaylistTitle(playlistTitle));
+    unmounts.push(player.mountShuffleToggle({
+        button: shuffleToggle,
+        labelElement: shuffleText,
+        initialEnabled: false,
+    }));
+    unmounts.push(player.mountTransportControls({
+        previousButton: prevButton,
+        nextButton: nextButton,
+    }));
+    if (debugEnabled) {
+        const debugPanel = requiredElement(doc, "#debug-panel");
+        const dbgSrc = requiredElement(doc, "#dbg-src");
+        const dbgCurrentTime = requiredElement(doc, "#dbg-current-time");
+        const dbgDuration = requiredElement(doc, "#dbg-duration");
+        const dbgReadyState = requiredElement(doc, "#dbg-ready-state");
+        const dbgNetworkState = requiredElement(doc, "#dbg-network-state");
+        const dbgPaused = requiredElement(doc, "#dbg-paused");
+        const dbgEvents = requiredElement(doc, "#dbg-events");
+        unmounts.push(player.mountDebugPanel({
+            enabled: true,
+            panel: debugPanel,
+            sourceElement: dbgSrc,
+            currentTimeElement: dbgCurrentTime,
+            durationElement: dbgDuration,
+            readyStateElement: dbgReadyState,
+            networkStateElement: dbgNetworkState,
+            pausedElement: dbgPaused,
+            eventsElement: dbgEvents,
+        }));
+    }
+    player.applyAccentColor(root);
+    unmounts.push(player.mountTrackInfo(title, artist));
+    unmounts.push(player.mountPlayButton(playButton, {
+        labelElement: playText,
+        playLabel: "Riproduci",
+        pauseLabel: "Pausa",
+    }));
+    unmounts.push(player.mountProgress({
+        range: progress,
+        currentTimeElement: timeCurrent,
+        durationElement: timeDuration,
+        progressRoot: root,
+        ringElement: progressRing,
+    }));
+    unmounts.push(player.mountPlaylist(playlistList, {
+        onSelect: () => playlistPanelController.setOpen(false),
+    }));
+    const switcher = doc.createElement("div");
+    switcher.className = "smooth-player__playlist-switcher";
+    playlistHead.insertAdjacentElement("afterend", switcher);
+    unmounts.push(player.mountPlaylistSwitcher(switcher));
+    rebuildVisualizer();
+    return {
+        rebuildVisualizer,
+        destroy: () => {
+            radial?.stop();
+            radial = null;
+            for (const unmount of unmounts) {
+                unmount();
+            }
+            switcher.remove();
+        },
+    };
+}

package/dist/visualizers.d.ts

@@ -0,0 +1,46 @@
+import { SmoothPlayer } from "./SmoothPlayer.js";
+interface BaseVisualizerOptions {
+    width?: number;
+    height?: number;
+    background?: string;
+    color?: string;
+}
+export interface SpectrumVisualizerOptions extends BaseVisualizerOptions {
+    barGap?: number;
+    barWidth?: number;
+}
+export interface WaveformVisualizerOptions extends BaseVisualizerOptions {
+    lineWidth?: number;
+}
+export interface RadialVisualizerOptions extends BaseVisualizerOptions {
+    mode?: "spectrum" | "waveform";
+    innerRadiusRatio?: number;
+    outerRadiusRatio?: number;
+    lineWidth?: number;
+    waveformAmplitude?: number;
+}
+declare abstract class CanvasVisualizer {
+    protected readonly canvas: HTMLCanvasElement;
+    protected readonly player: SmoothPlayer;
+    protected frameId: number;
+    constructor(canvas: HTMLCanvasElement, player: SmoothPlayer);
+    start(): void;
+    stop(): void;
+    protected abstract draw(): void;
+}
+export declare class CanvasSpectrumVisualizer extends CanvasVisualizer {
+    private readonly options;
+    constructor(canvas: HTMLCanvasElement, player: SmoothPlayer, options?: SpectrumVisualizerOptions);
+    protected draw(): void;
+}
+export declare class CanvasWaveformVisualizer extends CanvasVisualizer {
+    private readonly options;
+    constructor(canvas: HTMLCanvasElement, player: SmoothPlayer, options?: WaveformVisualizerOptions);
+    protected draw(): void;
+}
+export declare class CanvasRadialVisualizer extends CanvasVisualizer {
+    private readonly options;
+    constructor(canvas: HTMLCanvasElement, player: SmoothPlayer, options?: RadialVisualizerOptions);
+    protected draw(): void;
+}
+export {};

package/dist/visualizers.js

@@ -0,0 +1,182 @@
+class CanvasVisualizer {
+    constructor(canvas, player) {
+        this.canvas = canvas;
+        this.player = player;
+        this.frameId = 0;
+    }
+    start() {
+        this.stop();
+        this.draw();
+    }
+    stop() {
+        cancelAnimationFrame(this.frameId);
+    }
+}
+export class CanvasSpectrumVisualizer extends CanvasVisualizer {
+    constructor(canvas, player, options = {}) {
+        super(canvas, player);
+        this.options = {
+            width: options.width ?? canvas.width ?? 640,
+            height: options.height ?? canvas.height ?? 160,
+            background: options.background ?? "#0b1220",
+            color: options.color ?? "#2db6c8",
+            barGap: options.barGap ?? 1,
+            barWidth: options.barWidth ?? 3,
+        };
+        this.canvas.width = this.options.width;
+        this.canvas.height = this.options.height;
+    }
+    draw() {
+        const ctx = this.canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const data = this.player.getSpectrumData();
+        const { width, height, background, color, barGap, barWidth } = this.options;
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, width, height);
+        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);
+            x += barWidth + barGap;
+        }
+        this.frameId = requestAnimationFrame(() => this.draw());
+    }
+}
+export class CanvasWaveformVisualizer extends CanvasVisualizer {
+    constructor(canvas, player, options = {}) {
+        super(canvas, player);
+        this.options = {
+            width: options.width ?? canvas.width ?? 640,
+            height: options.height ?? canvas.height ?? 120,
+            background: options.background ?? "#0b1220",
+            color: options.color ?? "#f3f5f9",
+            lineWidth: options.lineWidth ?? 2,
+        };
+        this.canvas.width = this.options.width;
+        this.canvas.height = this.options.height;
+    }
+    draw() {
+        const ctx = this.canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const data = this.player.getWaveformData();
+        const { width, height, background, color, lineWidth } = this.options;
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, width, height);
+        ctx.lineWidth = lineWidth;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        const sliceWidth = width / data.length;
+        let x = 0;
+        for (let i = 0; i < data.length; i += 1) {
+            const normalized = (data[i] ?? 0) / 128;
+            const y = (normalized * height) / 2;
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+            x += sliceWidth;
+        }
+        ctx.lineTo(width, height / 2);
+        ctx.stroke();
+        this.frameId = requestAnimationFrame(() => this.draw());
+    }
+}
+export class CanvasRadialVisualizer extends CanvasVisualizer {
+    constructor(canvas, player, options = {}) {
+        super(canvas, player);
+        this.options = {
+            width: options.width ?? canvas.width ?? 220,
+            height: options.height ?? canvas.height ?? 220,
+            background: options.background ?? "transparent",
+            color: options.color ?? "#2db6c8",
+            mode: options.mode ?? "spectrum",
+            innerRadiusRatio: options.innerRadiusRatio ?? 0.36,
+            outerRadiusRatio: options.outerRadiusRatio ?? 0.96,
+            lineWidth: options.lineWidth ?? 1.4,
+            waveformAmplitude: options.waveformAmplitude ?? 0.52,
+        };
+        this.canvas.width = this.options.width;
+        this.canvas.height = this.options.height;
+    }
+    draw() {
+        const ctx = this.canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const { width, height, background, color, mode, innerRadiusRatio, outerRadiusRatio, lineWidth, waveformAmplitude } = this.options;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const maxRadius = Math.min(width, height) / 2;
+        const innerRadius = maxRadius * innerRadiusRatio;
+        const outerRadius = maxRadius * outerRadiusRatio;
+        const radialRange = Math.max(2, outerRadius - innerRadius);
+        if (background === "transparent") {
+            ctx.clearRect(0, 0, width, height);
+        }
+        else {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, width, height);
+        }
+        if (mode === "spectrum") {
+            const data = this.player.getSpectrumData();
+            const sampleCount = Math.min(160, data.length);
+            const step = (Math.PI * 2) / sampleCount;
+            ctx.lineWidth = lineWidth;
+            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);
+                ctx.globalAlpha = 0.25 + amplitude * 0.75;
+                ctx.beginPath();
+                ctx.moveTo(x0, y0);
+                ctx.lineTo(x1, y1);
+                ctx.stroke();
+            }
+            ctx.shadowBlur = 0;
+            ctx.globalAlpha = 1;
+            this.frameId = requestAnimationFrame(() => this.draw());
+            return;
+        }
+        const data = this.player.getWaveformData();
+        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.strokeStyle = color;
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 10;
+        ctx.globalAlpha = 0.95;
+        ctx.beginPath();
+        for (let i = 0; i < sampleCount; i += 1) {
+            const normalized = ((data[i] ?? 128) - 128) / 128;
+            const r = baseRadius + normalized * amplitudeRange;
+            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.shadowBlur = 0;
+        ctx.globalAlpha = 1;
+        this.frameId = requestAnimationFrame(() => this.draw());
+    }
+}