nuxt-musicfyplayer 2.1.0 → 2.1.2

package/README.md

@@ -49,13 +49,13 @@ In the project, use the component `<MusicfyPlayer :config="" />`, where `config`
 
 | Property                              | Description              | Default value |
 |---------------------------------------|--------------------------|---------------|
-| [`config`](#musicfyplayer-definition) | MusicfyPlayer definition |               |
+| [`config`](#musicfyplayer-composale)  | MusicfyPlayer composable |               |
 | `width`                               | Music player width       | `100%`        |
 | `height`                              | Music player height      | `450px`       |
 
-## MusicfyPlayer Definition
+## MusicfyPlayer composable
 
-Define your configuration options with the `defineMusicfyPlayer` composable.
+Define your configuration options with the `useMusicfyPlayer` composable.
 
 | Property                            | Description                           |
 |-------------------------------------|---------------------------------------|
@@ -108,11 +108,11 @@ Define your configuration options with the `defineMusicfyPlayer` composable.
 
 ## Example
 
-Use the emoji property to render an emoji by character.
+Use the `useMusicfyPlayer` composable to define the configuration options of the player.
 
 ```html
 <script setup lang="ts">
-const config = defineMusicfyPlayer({
+const config = useMusicfyPlayer({
   audio: {
     provider: "dropbox",
     preload: "none",

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "2.1.0",
+  "version": "2.1.2",
   "builder": {
-    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"
   }
 }

package/dist/runtime/components/MusicfyPlayer.vue

@@ -1,55 +1,47 @@
 <script setup lang='ts'>
 import ColorThief from 'colorthief'
 import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
-import { onMounted, ref, type Ref } from '#imports'
+import { onMounted, ref, useTemplateRef } from '#imports'
 
-const props = defineProps({
+const props = withDefaults(defineProps<{
   /**
    * The configuration of the player
    */
-  config: {
-    type: Object as () => MusicfyPlayerConfig,
-    required: true,
-  },
+  config: MusicfyPlayerConfig
   /**
    * The width and height of the player
    * @default '100%'
    */
-  width: {
-    type: String,
-    default: '100%',
-  },
+  width?: string
   /**
    * The height of the player
    * @default '450px'
    */
-  height: {
-    type: String,
-    default: '450px',
-  },
+  height?: string
+}>(), {
+  width: '100%',
+  height: '450px',
 })
 
-const audio = ref() as Ref<HTMLAudioElement>
+const audio = useTemplateRef<HTMLAudioElement>('audio')
+
 const size = ref({ width: props.width, height: props.height })
 const backgroundColor = ref<string | undefined>()
 
-const generateColor = async () => {
-  if (import.meta.client && props.config.colorDetect) {
-    const img = new Image()
-    img.crossOrigin = 'Anonymous'
-    img.src = props.config.imageSrc
+if (import.meta.client && props.config.colorDetect) {
+  const img = new Image()
+  img.crossOrigin = 'Anonymous'
+  img.src = props.config.imageSrc
 
-    img.onload = () => {
-      const colorThief = new ColorThief()
-      const color = colorThief.getColor(img)
-      backgroundColor.value = color ? `rgb(${color[0]}, ${color[1]}, ${color[2]})` : undefined
-    }
+  img.onload = () => {
+    const colorThief = new ColorThief()
+    const color = colorThief.getColor(img)
+    backgroundColor.value = color ? `rgb(${color[0]}, ${color[1]}, ${color[2]})` : undefined
   }
 }
 
-generateColor()
-
 onMounted(async () => {
+  if (!audio.value) return
   const { mediaElementPlayer } = await import('./../utils/mediaelement')
   mediaElementPlayer(audio.value, {
     iconSprite: '',

package/dist/runtime/composables/musicfyplayer.d.ts

@@ -1,2 +1,9 @@
-import type { MusicfyPlayerConfig, MusicfyPlayerDefinition } from './../types/musicfyplayer.js';
-export declare const defineMusicfyPlayer: (config: MusicfyPlayerDefinition) => MusicfyPlayerConfig;
+import type { Providers } from '../types/providers.js';
+import type { MusicfyPlayerConfig, MusicfyPlayerComposableConfig } from './../types/musicfyplayer.js';
+/**
+ * Musicfy Player composable
+ * @param config - Musicfy Player composable configuration
+ * @returns Musicfy Player configuration
+ */
+export declare const useMusicfyPlayer: <T extends keyof Providers>(config: MusicfyPlayerComposableConfig<T>) => MusicfyPlayerConfig;
+export declare const defineMusicfyPlayer: <T extends keyof Providers>(config: MusicfyPlayerComposableConfig<T>) => MusicfyPlayerConfig;

package/dist/runtime/composables/musicfyplayer.js

@@ -1,20 +1,9 @@
+import { getSource } from "../utils/sources.js";
 import { ref } from "#imports";
-const srcDropbox = (id, rlkey) => {
-  const dropboxBase = "https://www.dropbox.com";
-  return rlkey ? `${dropboxBase}/scl/fi/${id}/?rlkey=${rlkey}&dl=1` : `${dropboxBase}/s/${id}?dl=1`;
-};
-export const defineMusicfyPlayer = (config) => {
+export const useMusicfyPlayer = (config) => {
   const audioSrc = ref();
   const provider = config.audio.provider || "local";
-  switch (provider) {
-    default:
-    case "local":
-      audioSrc.value = config.audio.src;
-      break;
-    case "dropbox":
-      audioSrc.value = srcDropbox(config.audio.id, config.audio.rlkey);
-      break;
-  }
+  audioSrc.value = getSource(provider, config.audio);
   if (!audioSrc.value) throw new Error("Invalid audio source");
   return {
     imageSrc: config.image.src,
@@ -26,3 +15,4 @@ export const defineMusicfyPlayer = (config) => {
     colorDetect: config.color?.detect || false
   };
 };
+export const defineMusicfyPlayer = useMusicfyPlayer;

package/dist/runtime/types/musicfyplayer.d.ts

@@ -1,4 +1,6 @@
-export interface MusicfyPlayerDefinition {
+import type { Providers } from './providers'
+
+export interface MusicfyPlayerComposableConfig<T extends keyof Providers> {
   /**
    * Image configuration
    */
@@ -10,12 +12,15 @@ export interface MusicfyPlayerDefinition {
      */
     alt?: string
   }
+  /**
+   * Audio configuration
+   */
   audio: {
     /**
      * Audio provider
      * @default 'local'
      */
-    provider?: string
+    provider?: T
     /**
      * Audio type
      * @default 'audio/mpeg'
@@ -26,7 +31,7 @@ export interface MusicfyPlayerDefinition {
      * @default 'auto'
      */
     preload?: 'auto' | 'metadata' | 'none'
-  } & (LocalAudio | DropboxAudio)
+  } & Providers[T]
   /**
    * Color configuration
    */
@@ -44,30 +49,12 @@ export interface MusicfyPlayerDefinition {
   }
 }
 
-export interface LocalAudio {
-  provider?: 'local'
-  /**
-   * Path to the audio file
-   * @example '/path/to/audio.mp3'
-   * @example 'https://example.com/audio.mp3'
-   */
-  src: string
-}
-
-export interface DropboxAudio {
-  provider?: 'dropbox'
-  id: string
-  rlkey?: string
-}
-
-export type AudioConfig = LocalAudio | DropboxAudio
-
 export interface MusicfyPlayerConfig {
   imageSrc: string
   imageAlt: string
   audioType: string
   audioSrc: string
-  audioPreload: MusicfyPlayerDefinition['audio']['preload']
+  audioPreload: MusicfyPlayerComposableConfig['audio']['preload']
   colorClass: string
   colorDetect: boolean
 }

package/dist/runtime/types/providers.d.ts

@@ -0,0 +1,14 @@
+export interface Providers {
+  local: {
+    /**
+     * Path to the audio file
+     * @example '/path/to/audio.mp3'
+     * @example 'https://example.com/audio.mp3'
+     */
+    src: string
+  }
+  dropbox: {
+    id: string
+    rlkey?: string
+  }
+}

package/dist/runtime/utils/sources.d.ts

@@ -0,0 +1,2 @@
+import type { Providers } from '../types/providers.js';
+export declare const getSource: <T extends keyof Providers>(provider: T, config: Providers[keyof Providers]) => string;

package/dist/runtime/utils/sources.js

@@ -0,0 +1,13 @@
+const getDropboxSource = (id, rlkey) => {
+  const dropboxBase = "https://www.dropbox.com";
+  return rlkey ? `${dropboxBase}/scl/fi/${id}/?rlkey=${rlkey}&dl=1` : `${dropboxBase}/s/${id}?dl=1`;
+};
+export const getSource = (provider, config) => {
+  switch (provider) {
+    default:
+    case "local":
+      return config.src;
+    case "dropbox":
+      return getDropboxSource(config.id, config.rlkey);
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-musicfyplayer",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Embed a simple and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and ColorThief.js",
   "keywords": [
     "nuxt",
@@ -39,27 +39,28 @@
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "echo \"Error: no test specified\"",
     "test:types": "vue-tsc --noEmit",
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
-    "colorthief": "^2.4.0",
-    "mediaelement": "^7.0.5"
+    "@nuxt/kit": "^3.15.4",
+    "colorthief": "2.4.0",
+    "mediaelement": "^7.0.7"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.4.1",
-    "@nuxt/eslint-config": "^0.5.6",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.14.1",
-    "@types/node": "^22.5.4",
-    "changelogen": "^0.5.5",
-    "eslint": "^9.9.1",
-    "nuxt": "^3.13.1",
-    "vitest": "^2.0.5",
-    "vue-tsc": "^2.1.6"
+    "@nuxt/devtools": "^2.0.0",
+    "@nuxt/eslint-config": "^1.0.1",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.15.4",
+    "@nuxt/test-utils": "^3.15.4",
+    "@types/node": "^22.13.1",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.20.0",
+    "nuxt": "^3.15.4",
+    "vitest": "^3.0.5",
+    "vue-tsc": "^2.2.0"
   },
   "changelog": {
     "repo": {
@@ -68,5 +69,5 @@
       "domain": "github.com"
     }
   },
-  "packageManager": "pnpm@9.9.0"
-}
+  "packageManager": "pnpm@10.2.1"
+}