@smooth-player/react 1.0.0

package/README.md

@@ -0,0 +1,23 @@
+# @smooth-player/react
+
+React wrapper component for [`smooth-player`](https://www.npmjs.com/package/smooth-player).
+
+## Install
+
+```bash
+npm install smooth-player @smooth-player/react
+```
+
+## Usage
+
+```tsx
+import "smooth-player/dist/smooth-player.css";
+import { SmoothAudioPlayer } from "@smooth-player/react";
+
+<SmoothAudioPlayer
+  tracks={tracks}
+  accentColor="#0ed2a4"
+  visualizer="spectrum"
+  initialVolume={0.8}
+/>;
+```

package/dist/SmoothAudioPlayer.d.ts

@@ -0,0 +1,8 @@
+import { type AudioTrack, type VisualizerMode } from "smooth-player";
+export interface SmoothAudioPlayerProps {
+    tracks: AudioTrack[];
+    accentColor?: string;
+    visualizer?: VisualizerMode;
+    initialVolume?: number;
+}
+export declare function SmoothAudioPlayer({ tracks, accentColor, visualizer, initialVolume, }: SmoothAudioPlayerProps): import("react/jsx-runtime").JSX.Element;

package/dist/SmoothAudioPlayer.js

@@ -0,0 +1,62 @@
+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, }) {
+    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));
+        return () => {
+            offTrack();
+            offPlay();
+            offPause();
+            spectrum?.stop();
+            waveform?.stop();
+            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] }));
+}

package/dist/assets/next.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M17.5 6V18" stroke="currentColor" stroke-width="2.1" stroke-linecap="round"/>
+  <path d="M7.3 6.7C6.74 6.34 6 6.74 6 7.41V16.59C6 17.26 6.74 17.66 7.3 17.3L13.85 13.09C14.35 12.77 14.35 11.23 13.85 10.91L7.3 6.7Z" fill="currentColor"/>
+</svg>

package/dist/assets/pause.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <rect x="7" y="6" width="3.6" height="12" rx="1.8" fill="currentColor"/>
+  <rect x="13.4" y="6" width="3.6" height="12" rx="1.8" fill="currentColor"/>
+</svg>

package/dist/assets/play.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M8 6.75C8 6.14 8.67 5.77 9.18 6.12L17.12 11.37C17.58 11.68 17.58 12.32 17.12 12.63L9.18 17.88C8.67 18.23 8 17.86 8 17.25V6.75Z" fill="currentColor"/>
+</svg>

package/dist/assets/prev.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+  <path d="M6.5 6V18" stroke="currentColor" stroke-width="2.1" stroke-linecap="round"/>
+  <path d="M16.7 6.7C17.26 6.34 18 6.74 18 7.41V16.59C18 17.26 17.26 17.66 16.7 17.3L10.15 13.09C9.65 12.77 9.65 11.23 10.15 10.91L16.7 6.7Z" fill="currentColor"/>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { SmoothAudioPlayer } from "./SmoothAudioPlayer";
+export type { SmoothAudioPlayerProps } from "./SmoothAudioPlayer";

package/dist/index.js

@@ -0,0 +1 @@
+export { SmoothAudioPlayer } from "./SmoothAudioPlayer";

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@smooth-player/react",
+  "version": "1.0.0",
+  "description": "React component for Smooth Player",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "smooth-player": "^1.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && mkdir -p dist/assets && cp -R src/assets/* dist/assets/",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.7.3"
+  }
+}