@smooth-player/svelte 1.0.0 → 2.1.0

package/README.md

@@ -11,10 +11,60 @@ npm install smooth-player @smooth-player/svelte
 ## Usage
 
 ```svelte
-<script>
+<script lang="ts">
   import "smooth-player/dist/smooth-player.css";
   import { SmoothAudioPlayer } from "@smooth-player/svelte";
+  import type { PlaylistEntry } from "smooth-player";
+
+  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" },
+        },
+      ],
+    },
+  ];
 </script>
 
-<SmoothAudioPlayer {tracks} accentColor="#0ed2a4" visualizer="spectrum" initialVolume={0.8} />
+<SmoothAudioPlayer
+  {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/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@smooth-player/svelte",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "Svelte component for Smooth Player",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marlenesco/smooth-player"
+  },
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "svelte": "./src/SmoothAudioPlayer.svelte",
@@ -22,7 +26,7 @@
   },
   "peerDependencies": {
     "svelte": ">=4",
-    "smooth-player": "^1.0.0"
+    "smooth-player": "^2.0.0"
   },
   "scripts": {
     "build": "echo \"No build step required for source-distributed Svelte component\"",

package/src/SmoothAudioPlayer.svelte

@@ -1,93 +1,69 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import {
     SmoothPlayer,
-    CanvasSpectrumVisualizer,
-    CanvasWaveformVisualizer,
-    type AudioTrack,
+    mountPlayerUI,
+    type PlaylistEntry,
+    type SmoothPlayerOptions,
+    type StandardPlayerUIMountOptions,
     type VisualizerMode,
   } 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 let tracks: AudioTrack[] = [];
+  export let tracks: PlaylistEntry[] = [];
   export let accentColor = "#0ed2a4";
+  export let backgroundColor = "#0b1220";
   export let visualizer: VisualizerMode = "spectrum";
   export let initialVolume = 0.8;
+  export let playerOptions: Omit<SmoothPlayerOptions, "playlist" | "accentColor" | "backgroundColor" | "visualizer" | "initialVolume"> | undefined = undefined;
+  export let uiOptions: StandardPlayerUIMountOptions | undefined = undefined;
 
   let root: HTMLElement;
-  let spectrumCanvas: HTMLCanvasElement;
-  let waveformCanvas: HTMLCanvasElement;
+  let player: SmoothPlayer | null = null;
+  let destroyUI: (() => void) | null = null;
+  let mounted = false;
 
-  let player: SmoothPlayer;
-  let currentIndex = 0;
-  let isPlaying = false;
-
-  const applyTheme = () => {
-    player.setAccentColor(accentColor);
-    player.applyAccentColor(root);
+  const teardown = () => {
+    destroyUI?.();
+    destroyUI = null;
+    player?.destroy();
+    player = null;
   };
 
-  $: if (player && root) {
-    applyTheme();
-  }
+  const setup = () => {
+    if (!mounted || !root) return;
+    teardown();
+    player = new SmoothPlayer({
+      ...playerOptions,
+      accentColor,
+      backgroundColor,
+      visualizer,
+      initialVolume,
+      playlist: tracks,
+    });
+    const ui = mountPlayerUI(player, root, uiOptions);
+    destroyUI = () => ui.destroy();
+  };
 
   onMount(() => {
-    player = new SmoothPlayer({ initialVolume, visualizer, accentColor });
-    player.setPlaylist(tracks, 0);
-
-    let spectrum: CanvasSpectrumVisualizer | null = null;
-    let waveform: CanvasWaveformVisualizer | null = null;
-
-    if (visualizer === "spectrum") {
-      spectrum = new CanvasSpectrumVisualizer(spectrumCanvas, player, { color: "#3cc8d9" });
-      spectrum.start();
-    }
-
-    if (visualizer === "waveform") {
-      waveform = new CanvasWaveformVisualizer(waveformCanvas, player, { color: "#e7f0ff" });
-      waveform.start();
-    }
-
-    player.on("trackchange", ({ index }) => (currentIndex = index));
-    player.on("play", () => (isPlaying = true));
-    player.on("pause", () => (isPlaying = false));
-
-    applyTheme();
-
-    return () => {
-      spectrum?.stop();
-      waveform?.stop();
-      player.destroy();
-    };
+    mounted = true;
+    setup();
   });
-</script>
 
-<section bind:this={root} class="smooth-player">
-  <div class="smooth-player__main">
-    <div class="smooth-player__row">
-      <h2 class="smooth-player__title">Smooth Player</h2>
-      <div class="smooth-player__controls">
-        <button class="secondary" on:click={() => player.previous()} aria-label="Previous">
-          <img class="smooth-player__icon" src={prevIcon} alt="" />
-        </button>
-        <button on:click={() => player.toggle()} aria-label={isPlaying ? "Pause" : "Play"}>
-          <img class="smooth-player__icon" src={isPlaying ? pauseIcon : playIcon} alt="" />
-        </button>
-        <button class="secondary" on:click={() => player.next()} aria-label="Next">
-          <img class="smooth-player__icon" src={nextIcon} alt="" />
-        </button>
-      </div>
-    </div>
+  onDestroy(() => {
+    mounted = false;
+    teardown();
+  });
 
-    <div class="smooth-player__meta">
-      <strong>{tracks[currentIndex]?.metadata?.title ?? "Unknown title"}</strong>
-      <div class="smooth-player__artist">{tracks[currentIndex]?.metadata?.artist ?? "Unknown artist"}</div>
-    </div>
+  $: if (mounted && root) {
+    tracks;
+    accentColor;
+    backgroundColor;
+    visualizer;
+    initialVolume;
+    playerOptions;
+    uiOptions;
+    setup();
+  }
+</script>
 
-    <canvas bind:this={spectrumCanvas} id="spectrum" class="smooth-player__canvas" width="860" height="180" hidden={visualizer !== "spectrum"}></canvas>
-    <canvas bind:this={waveformCanvas} id="waveform" class="smooth-player__canvas" width="860" height="120" hidden={visualizer !== "waveform"}></canvas>
-  </div>
-</section>
+<section bind:this={root}></section>

package/src/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/src/index.d.ts

@@ -1,11 +1,19 @@
-import type { AudioTrack, VisualizerMode } from "smooth-player";
+import type {
+  PlaylistEntry,
+  SmoothPlayerOptions,
+  StandardPlayerUIMountOptions,
+  VisualizerMode,
+} from "smooth-player";
 import type { SvelteComponentTyped } from "svelte";
 
 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 default class SmoothAudioPlayer extends SvelteComponentTyped<SmoothAudioPlayerProps> {}