@smooth-player/react 1.0.1 → 2.1.0

package/README.md

@@ -13,11 +13,60 @@ npm install smooth-player @smooth-player/react
 ```tsx
 import "smooth-player/dist/smooth-player.css";
 import { SmoothAudioPlayer } from "@smooth-player/react";
+import type { PlaylistEntry } from "smooth-player";
 
-<SmoothAudioPlayer
-  tracks={tracks}
-  accentColor="#0ed2a4"
-  visualizer="spectrum"
-  initialVolume={0.8}
-/>;
+const tracks: PlaylistEntry[] = [
+  {
+    id: "demo",
+    title: "Demo Playlist",
+    tracks: [
+      {
+        id: "song-1",
+        src: "https://cdn.pixabay.com/audio/2020/08/17/audio_613575b827.mp3",
+        metadata: { title: "Robot Gypsy Jazz", artist: "Frank Vanga" },
+      },
+    ],
+  },
+];
+
+export function App() {
+  return (
+    <SmoothAudioPlayer
+      tracks={tracks}
+      accentColor="#0ed2a4"
+      backgroundColor="#0b1220"
+      visualizer="spectrum"
+      initialVolume={0.8}
+      uiOptions={{ showLogo: true }}
+    />
+  );
+}
 ```
+
+## Component props
+
+- `tracks: PlaylistEntry[]`
+- `accentColor?: string`
+- `backgroundColor?: string`
+- `visualizer?: "spectrum" | "waveform" | "none"`
+- `initialVolume?: number`
+- `playerOptions?: Omit<SmoothPlayerOptions, "playlist" | "accentColor" | "backgroundColor" | "visualizer" | "initialVolume">`
+- `uiOptions?: StandardPlayerUIMountOptions`
+
+## Prop Mapping
+
+| Wrapper prop | Core equivalent |
+| --- | --- |
+| `tracks` | `new SmoothPlayer({ playlist: tracks })` |
+| `accentColor` | `new SmoothPlayer({ accentColor })` |
+| `backgroundColor` | `new SmoothPlayer({ backgroundColor })` |
+| `visualizer` | `new SmoothPlayer({ visualizer })` |
+| `initialVolume` | `new SmoothPlayer({ initialVolume })` |
+| `playerOptions` | Spread into `SmoothPlayerOptions` |
+| `uiOptions` | Passed to `mountPlayerUI(player, root, uiOptions)` |
+
+## Documentation
+
+For the full list of player config options, runtime APIs, events, and UI options, see the main docs:
+
+- [smooth-player README](https://github.com/marlenesco/smooth-player#readme)

package/dist/SmoothAudioPlayer.d.ts

@@ -1,8 +1,11 @@
-import { type AudioTrack, type VisualizerMode } from "smooth-player";
+import { type PlaylistEntry, type SmoothPlayerOptions, type StandardPlayerUIMountOptions, type VisualizerMode } from "smooth-player";
 export interface SmoothAudioPlayerProps {
-    tracks: AudioTrack[];
+    tracks: PlaylistEntry[];
     accentColor?: string;
+    backgroundColor?: string;
     visualizer?: VisualizerMode;
     initialVolume?: number;
+    playerOptions?: Omit<SmoothPlayerOptions, "playlist" | "accentColor" | "backgroundColor" | "visualizer" | "initialVolume">;
+    uiOptions?: StandardPlayerUIMountOptions;
 }
-export declare function SmoothAudioPlayer({ tracks, accentColor, visualizer, initialVolume, }: SmoothAudioPlayerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SmoothAudioPlayer({ tracks, accentColor, backgroundColor, visualizer, initialVolume, playerOptions, uiOptions, }: SmoothAudioPlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/SmoothAudioPlayer.js

@@ -1,62 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { SmoothPlayer, CanvasSpectrumVisualizer, CanvasWaveformVisualizer, } from "smooth-player";
-import prevIcon from "./assets/prev.svg";
-import nextIcon from "./assets/next.svg";
-import playIcon from "./assets/play.svg";
-import pauseIcon from "./assets/pause.svg";
-export function SmoothAudioPlayer({ tracks, accentColor = "#0ed2a4", visualizer = "spectrum", initialVolume = 0.8, }) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { SmoothPlayer, mountPlayerUI, } from "smooth-player";
+export function SmoothAudioPlayer({ tracks, accentColor = "#0ed2a4", backgroundColor = "#0b1220", visualizer = "spectrum", initialVolume = 0.8, playerOptions, uiOptions, }) {
     const rootRef = useRef(null);
-    const spectrumRef = useRef(null);
-    const waveformRef = useRef(null);
-    const playerRef = useRef(null);
-    const [index, setIndex] = useState(0);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const currentTrack = tracks[index] ?? null;
-    const showPlaylist = tracks.length > 1;
     useEffect(() => {
-        const player = new SmoothPlayer({ initialVolume, visualizer, accentColor });
-        player.setPlaylist(tracks, 0);
-        playerRef.current = player;
-        let spectrum = null;
-        let waveform = null;
-        if (visualizer === "spectrum") {
-            spectrum = new CanvasSpectrumVisualizer(spectrumRef.current, player, { color: "#3cc8d9" });
-            spectrum.start();
-        }
-        if (visualizer === "waveform") {
-            waveform = new CanvasWaveformVisualizer(waveformRef.current, player, { color: "#e7f0ff" });
-            waveform.start();
-        }
-        const offTrack = player.on("trackchange", ({ index: nextIndex }) => setIndex(nextIndex));
-        const offPlay = player.on("play", () => setIsPlaying(true));
-        const offPause = player.on("pause", () => setIsPlaying(false));
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const player = new SmoothPlayer({
+            ...playerOptions,
+            accentColor,
+            backgroundColor,
+            visualizer,
+            initialVolume,
+            playlist: tracks,
+        });
+        const ui = mountPlayerUI(player, root, uiOptions);
         return () => {
-            offTrack();
-            offPlay();
-            offPause();
-            spectrum?.stop();
-            waveform?.stop();
+            ui.destroy();
             player.destroy();
         };
-    }, [tracks, initialVolume, visualizer, accentColor]);
-    useEffect(() => {
-        const player = playerRef.current;
-        const root = rootRef.current;
-        if (!player || !root)
-            return;
-        player.setAccentColor(accentColor);
-        player.applyAccentColor(root);
-    }, [accentColor]);
-    const handlers = useMemo(() => ({
-        toggle: async () => {
-            await playerRef.current?.toggle();
-        },
-        previous: () => playerRef.current?.previous(),
-        next: () => playerRef.current?.next(),
-        pick: async (nextIndex) => {
-            await playerRef.current?.play(nextIndex);
-        },
-    }), []);
-    return (_jsxs("section", { ref: rootRef, className: "smooth-player", children: [_jsxs("div", { className: "smooth-player__main", children: [_jsxs("div", { className: "smooth-player__row", children: [_jsx("h2", { className: "smooth-player__title", children: "Smooth Player" }), _jsxs("div", { className: "smooth-player__controls", children: [_jsx("button", { className: "secondary", onClick: handlers.previous, "aria-label": "Previous", children: _jsx("img", { className: "smooth-player__icon", src: prevIcon, alt: "" }) }), _jsx("button", { onClick: handlers.toggle, "aria-label": isPlaying ? "Pause" : "Play", children: _jsx("img", { className: "smooth-player__icon", src: isPlaying ? pauseIcon : playIcon, alt: "" }) }), _jsx("button", { className: "secondary", onClick: handlers.next, "aria-label": "Next", children: _jsx("img", { className: "smooth-player__icon", src: nextIcon, alt: "" }) })] })] }), _jsxs("div", { className: "smooth-player__meta", children: [_jsx("strong", { children: currentTrack?.metadata?.title ?? "Unknown title" }), _jsx("div", { className: "smooth-player__artist", children: currentTrack?.metadata?.artist ?? "Unknown artist" })] }), _jsx("canvas", { ref: spectrumRef, id: "spectrum", className: "smooth-player__canvas", width: 860, height: 180, hidden: visualizer !== "spectrum" }), _jsx("canvas", { ref: waveformRef, id: "waveform", className: "smooth-player__canvas", width: 860, height: 120, hidden: visualizer !== "waveform" })] }), showPlaylist ? (_jsxs("aside", { className: "smooth-player__playlist", "aria-hidden": "false", children: [_jsx("div", { className: "smooth-player__playlist-head", children: _jsx("h2", { children: "Playlist" }) }), _jsx("ul", { className: "smooth-player__playlist-list", children: tracks.map((track, listIndex) => (_jsx("li", { children: _jsxs("button", { className: "smooth-player__playlist-item", "aria-current": listIndex === index ? "true" : undefined, onClick: () => handlers.pick(listIndex), children: [_jsx("span", { className: "smooth-player__playlist-title", children: track.metadata?.title ?? track.id }), _jsx("span", { className: "smooth-player__playlist-artist", children: track.metadata?.artist ?? "Unknown artist" })] }) }, track.id))) })] })) : null] }));
+    }, [tracks, accentColor, backgroundColor, visualizer, initialVolume, playerOptions, uiOptions]);
+    return _jsx("section", { ref: rootRef });
 }

package/dist/assets/menu.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M5 7.5H19" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+  <path d="M5 12H19" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+  <path d="M5 16.5H19" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"/>
+</svg>

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@smooth-player/react",
-  "version": "1.0.1",
+  "version": "2.1.0",
   "description": "React component for Smooth Player",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marlenesco/smooth-player"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -23,7 +27,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "smooth-player": "^1.0.0"
+    "smooth-player": "^2.0.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && mkdir -p dist/assets && cp -R src/assets/* dist/assets/",