@smooth-player/vue 1.0.0

package/README.md

@@ -0,0 +1,22 @@
+# @smooth-player/vue
+
+Vue wrapper component for [`smooth-player`](https://www.npmjs.com/package/smooth-player).
+
+## Install
+
+```bash
+npm install smooth-player @smooth-player/vue
+```
+
+## Usage
+
+```vue
+<script setup>
+import "smooth-player/dist/smooth-player.css";
+import { SmoothAudioPlayer } from "@smooth-player/vue";
+</script>
+
+<template>
+  <SmoothAudioPlayer :tracks="tracks" accent-color="#0ed2a4" visualizer="spectrum" :initial-volume="0.8" />
+</template>
+```

package/package.json

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

package/src/SmoothAudioPlayer.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, computed, watch } from "vue";
+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";
+
+const props = withDefaults(defineProps<{
+  tracks: AudioTrack[];
+  accentColor?: string;
+  visualizer?: VisualizerMode;
+  initialVolume?: number;
+}>(), {
+  accentColor: "#0ed2a4",
+  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,
+    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();
+});
+
+onBeforeUnmount(() => {
+  spectrum?.stop();
+  waveform?.stop();
+  player.value?.destroy();
+});
+
+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>
+</template>

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,14 @@
+import type { DefineComponent } from "vue";
+import type { AudioTrack, VisualizerMode } from "smooth-player";
+
+export interface SmoothAudioPlayerProps {
+  tracks: AudioTrack[];
+  accentColor?: string;
+  visualizer?: VisualizerMode;
+  initialVolume?: number;
+}
+
+declare const SmoothAudioPlayer: DefineComponent<SmoothAudioPlayerProps>;
+
+export { SmoothAudioPlayer };
+export default SmoothAudioPlayer;

package/src/index.js

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

package/src/shims-svg.d.ts

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