@smooth-player/svelte 1.0.0

package/README.md

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

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@smooth-player/svelte",
+  "version": "1.0.0",
+  "description": "Svelte component for Smooth Player",
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "svelte": "./src/SmoothAudioPlayer.svelte",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "svelte": "./src/SmoothAudioPlayer.svelte",
+      "default": "./src/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "svelte": ">=4",
+    "smooth-player": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No build step required for source-distributed Svelte component\"",
+    "typecheck": "echo \"Typecheck in consumer app (SvelteKit/Vite)\""
+  }
+}

package/src/SmoothAudioPlayer.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    SmoothPlayer,
+    CanvasSpectrumVisualizer,
+    CanvasWaveformVisualizer,
+    type AudioTrack,
+    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 accentColor = "#0ed2a4";
+  export let visualizer: VisualizerMode = "spectrum";
+  export let initialVolume = 0.8;
+
+  let root: HTMLElement;
+  let spectrumCanvas: HTMLCanvasElement;
+  let waveformCanvas: HTMLCanvasElement;
+
+  let player: SmoothPlayer;
+  let currentIndex = 0;
+  let isPlaying = false;
+
+  const applyTheme = () => {
+    player.setAccentColor(accentColor);
+    player.applyAccentColor(root);
+  };
+
+  $: if (player && root) {
+    applyTheme();
+  }
+
+  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();
+    };
+  });
+</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>
+
+    <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>
+
+    <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>

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

@@ -0,0 +1,12 @@
+import type { AudioTrack, VisualizerMode } from "smooth-player";
+import type { SvelteComponentTyped } from "svelte";
+
+export interface SmoothAudioPlayerProps {
+  tracks: AudioTrack[];
+  accentColor?: string;
+  visualizer?: VisualizerMode;
+  initialVolume?: number;
+}
+
+export default class SmoothAudioPlayer extends SvelteComponentTyped<SmoothAudioPlayerProps> {}
+export { SmoothAudioPlayer };

package/src/index.js

@@ -0,0 +1,4 @@
+import SmoothAudioPlayer from "./SmoothAudioPlayer.svelte";
+
+export { SmoothAudioPlayer };
+export default SmoothAudioPlayer;

package/src/shims-svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}