@smooth-player/vue 1.0.0 → 2.1.0

package/README.md

@@ -11,12 +11,62 @@ npm install smooth-player @smooth-player/vue
 ## Usage
 
 ```vue
-<script setup>
+<script setup lang="ts">
 import "smooth-player/dist/smooth-player.css";
 import { SmoothAudioPlayer } from "@smooth-player/vue";
+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>
 
 <template>
-  <SmoothAudioPlayer :tracks="tracks" accent-color="#0ed2a4" visualizer="spectrum" :initial-volume="0.8" />
+  <SmoothAudioPlayer
+    :tracks="tracks"
+    accent-color="#0ed2a4"
+    background-color="#0b1220"
+    visualizer="spectrum"
+    :initial-volume="0.8"
+    :ui-options="{ showLogo: true }"
+  />
 </template>
 ```
+
+## 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/vue",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "Vue 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",
   "exports": {
@@ -20,7 +24,7 @@
   },
   "peerDependencies": {
     "vue": ">=3.3.0",
-    "smooth-player": "^1.0.0"
+    "smooth-player": "^2.0.0"
   },
   "scripts": {
     "build": "echo \"No build step required for source-distributed Vue component\"",

package/src/SmoothAudioPlayer.vue

@@ -1,110 +1,73 @@
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref, computed, watch } from "vue";
+import { onBeforeUnmount, ref, watch } from "vue";
 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";
 
 const props = withDefaults(defineProps<{
-  tracks: AudioTrack[];
+  tracks: PlaylistEntry[];
   accentColor?: string;
+  backgroundColor?: string;
   visualizer?: VisualizerMode;
   initialVolume?: number;
+  playerOptions?: Omit<SmoothPlayerOptions, "playlist" | "accentColor" | "backgroundColor" | "visualizer" | "initialVolume">;
+  uiOptions?: StandardPlayerUIMountOptions;
 }>(), {
   accentColor: "#0ed2a4",
+  backgroundColor: "#0b1220",
   visualizer: "spectrum",
   initialVolume: 0.8,
 });
 
 const rootRef = ref<HTMLElement | null>(null);
-const spectrumRef = ref<HTMLCanvasElement | null>(null);
-const waveformRef = ref<HTMLCanvasElement | null>(null);
-const player = ref<SmoothPlayer | null>(null);
-const currentIndex = ref(0);
-const isPlaying = ref(false);
-
-const currentTrack = computed(() => props.tracks[currentIndex.value] ?? null);
-
-let spectrum: CanvasSpectrumVisualizer | null = null;
-let waveform: CanvasWaveformVisualizer | null = null;
-
-onMounted(() => {
-  const instance = new SmoothPlayer({
-    initialVolume: props.initialVolume,
-    visualizer: props.visualizer,
+let player: SmoothPlayer | null = null;
+let destroyUI: (() => void) | null = null;
+
+const teardown = () => {
+  destroyUI?.();
+  destroyUI = null;
+  player?.destroy();
+  player = null;
+};
+
+watch(
+  () => ({
+    root: rootRef.value,
+    tracks: props.tracks,
     accentColor: props.accentColor,
-  });
-  instance.setPlaylist(props.tracks, 0);
-  player.value = instance;
-
-  if (props.visualizer === "spectrum") {
-    spectrum = new CanvasSpectrumVisualizer(spectrumRef.value!, instance, { color: "#3cc8d9" });
-    spectrum.start();
-  }
-
-  if (props.visualizer === "waveform") {
-    waveform = new CanvasWaveformVisualizer(waveformRef.value!, instance, { color: "#e7f0ff" });
-    waveform.start();
-  }
-
-  instance.on("trackchange", ({ index }) => (currentIndex.value = index));
-  instance.on("play", () => (isPlaying.value = true));
-  instance.on("pause", () => (isPlaying.value = false));
-
-  applyAccent();
-});
+    backgroundColor: props.backgroundColor,
+    visualizer: props.visualizer,
+    initialVolume: props.initialVolume,
+    playerOptions: props.playerOptions,
+    uiOptions: props.uiOptions,
+  }),
+  () => {
+    if (!rootRef.value) return;
+    teardown();
+    player = new SmoothPlayer({
+      ...props.playerOptions,
+      accentColor: props.accentColor,
+      backgroundColor: props.backgroundColor,
+      visualizer: props.visualizer,
+      initialVolume: props.initialVolume,
+      playlist: props.tracks,
+    });
+    const ui = mountPlayerUI(player, rootRef.value, props.uiOptions);
+    destroyUI = () => ui.destroy();
+  },
+  { immediate: true, deep: true },
+);
 
 onBeforeUnmount(() => {
-  spectrum?.stop();
-  waveform?.stop();
-  player.value?.destroy();
+  teardown();
 });
-
-watch(() => props.accentColor, () => applyAccent());
-
-function applyAccent() {
-  if (!player.value || !rootRef.value) return;
-  player.value.setAccentColor(props.accentColor);
-  player.value.applyAccentColor(rootRef.value);
-}
-
-async function toggle() {
-  await player.value?.toggle();
-}
 </script>
 
 <template>
-  <section ref="rootRef" 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" @click="player?.previous()" aria-label="Previous">
-            <img class="smooth-player__icon" :src="prevIcon" alt="" />
-          </button>
-          <button @click="toggle" :aria-label="isPlaying ? 'Pause' : 'Play'">
-            <img class="smooth-player__icon" :src="isPlaying ? pauseIcon : playIcon" alt="" />
-          </button>
-          <button class="secondary" @click="player?.next()" aria-label="Next">
-            <img class="smooth-player__icon" :src="nextIcon" alt="" />
-          </button>
-        </div>
-      </div>
-
-      <div class="smooth-player__meta">
-        <strong>{{ currentTrack?.metadata?.title ?? "Unknown title" }}</strong>
-        <div class="smooth-player__artist">{{ currentTrack?.metadata?.artist ?? "Unknown artist" }}</div>
-      </div>
-
-      <canvas ref="spectrumRef" id="spectrum" class="smooth-player__canvas" width="860" height="180" :hidden="props.visualizer !== 'spectrum'"></canvas>
-      <canvas ref="waveformRef" id="waveform" class="smooth-player__canvas" width="860" height="120" :hidden="props.visualizer !== 'waveform'"></canvas>
-    </div>
-  </section>
+  <section ref="rootRef"></section>
 </template>

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 { DefineComponent } from "vue";
-import type { AudioTrack, VisualizerMode } from "smooth-player";
+import type {
+  PlaylistEntry,
+  SmoothPlayerOptions,
+  StandardPlayerUIMountOptions,
+  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;
 }
 
 declare const SmoothAudioPlayer: DefineComponent<SmoothAudioPlayerProps>;