nuxt-musicfyplayer 2.1.1 → 2.1.3

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-composable) | 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",
@@ -120,7 +120,7 @@ const config = defineMusicfyPlayer({
     rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
   },
   image: {
-    src: "https://dimatis.yizack.com/images/reminiscences.jpg",
+    src: "https://dimatis.music/images/reminiscences.jpg",
     alt: "Dimatis - Reminiscences"
   },
   color: {

package/dist/module.d.mts

@@ -4,4 +4,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "2.1.1",
+  "version": "2.1.3",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.0",
+    "unbuild": "3.5.0"
   }
 }

package/dist/runtime/components/MusicfyPlayer.vue

@@ -1,70 +1,52 @@
-<script setup lang='ts'>
-import ColorThief from 'colorthief'
-import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
-import { onMounted, ref, type Ref } from '#imports'
-
-const props = defineProps({
-  /**
-   * The configuration of the player
-   */
-  config: {
-    type: Object as () => MusicfyPlayerConfig,
-    required: true,
-  },
-  /**
-   * The width and height of the player
-   * @default '100%'
-   */
-  width: {
-    type: String,
-    default: '100%',
-  },
-  /**
-   * The height of the player
-   * @default '450px'
-   */
-  height: {
-    type: String,
-    default: '450px',
-  },
-})
-
-const audio = ref() as Ref<HTMLAudioElement>
-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
-
-    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 () => {
-  const { mediaElementPlayer } = await import('./../utils/mediaelement')
-  mediaElementPlayer(audio.value, {
-    iconSprite: '',
-    audioHeight: 40,
-    features: ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
-    alwaysShowControls: true,
-    timeAndDurationSeparator: '<span></span>',
-    iPadUseNativeControls: false,
-    iPhoneUseNativeControls: false,
-    AndroidUseNativeControls: false,
-  })
-})
-</script>
-
-<template>
+<script setup>
+import ColorThief from "colorthief";
+import { onMounted, ref, useTemplateRef } from "#imports";
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true
+  },
+  width: {
+    type: String,
+    required: false,
+    default: "100%"
+  },
+  height: {
+    type: String,
+    required: false,
+    default: "450px"
+  }
+});
+const audio = useTemplateRef("audio");
+const size = ref({ width: props.width, height: props.height });
+const backgroundColor = ref();
+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]})` : void 0;
+  };
+}
+onMounted(async () => {
+  if (!audio.value) return;
+  const { mediaElementPlayer } = await import("./../utils/mediaelement");
+  mediaElementPlayer(audio.value, {
+    iconSprite: "",
+    audioHeight: 40,
+    features: ["playpause", "current", "duration", "progress", "volume", "tracks", "fullscreen"],
+    alwaysShowControls: true,
+    timeAndDurationSeparator: "<span></span>",
+    iPadUseNativeControls: false,
+    iPhoneUseNativeControls: false,
+    AndroidUseNativeControls: false
+  });
+});
+</script>
+
+<template>
   <div class="musicfyplayer" :class="{ [`${config.colorClass}`]: config.colorClass }" :style="{ ...size, backgroundColor }">
     <div class="mp__box">
       <div class="mp__controls">
@@ -83,8 +65,8 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-</template>
-
+</template>
+
 <style>
 @import "./../assets/css/musicfyplayer.css";
-</style>
+</style>

package/dist/runtime/components/MusicfyPlayer.vue.d.ts

@@ -0,0 +1,22 @@
+import type { MusicfyPlayerConfig } from './../types/musicfyplayer.js';
+type __VLS_Props = {
+    /**
+     * The configuration of the player
+     */
+    config: MusicfyPlayerConfig;
+    /**
+     * The width and height of the player
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * The height of the player
+     * @default '450px'
+     */
+    height?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    width: string;
+    height: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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 = "local">(config: MusicfyPlayerComposableConfig<T>) => MusicfyPlayerConfig;
+export declare const defineMusicfyPlayer: <T extends keyof Providers = "local">(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/dist/types.d.mts

@@ -1 +1,3 @@
-export { type ModuleOptions, default } from './module.js'
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-musicfyplayer",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "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",
@@ -16,19 +16,17 @@
   "author": {
     "name": "Yizack Rangel",
     "email": "yizackr@gmail.com",
-    "url": "https://yizack.com/"
+    "url": "https://yizack.com"
   },
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
   "files": [
     "dist"
   ],
@@ -39,34 +37,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.2",
+    "@nuxt/kit": "^3.16.2",
     "colorthief": "2.4.0",
-    "mediaelement": "^7.0.5"
+    "mediaelement": "^7.0.7"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.6.0",
-    "@nuxt/eslint-config": "^0.5.7",
-    "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "^3.13.2",
-    "@nuxt/test-utils": "^3.14.3",
-    "@types/node": "^22.7.5",
-    "changelogen": "^0.5.7",
-    "eslint": "^9.12.0",
-    "nuxt": "^3.13.2",
-    "vitest": "^2.1.2",
-    "vue-tsc": "^2.1.6"
+    "@nuxt/devtools": "^2.3.2",
+    "@nuxt/eslint-config": "^1.3.0",
+    "@nuxt/module-builder": "^1.0.0",
+    "@nuxt/schema": "^3.16.2",
+    "@nuxt/test-utils": "^3.17.2",
+    "@types/node": "^22.14.0",
+    "changelogen": "^0.6.1",
+    "eslint": "^9.24.0",
+    "nuxt": "^3.16.2",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.8"
   },
-  "changelog": {
-    "repo": {
-      "repo": "Yizack/nuxt-musicfyplayer",
-      "provider": "github",
-      "domain": "github.com"
-    }
-  },
-  "packageManager": "pnpm@9.12.1"
-}
+  "packageManager": "pnpm@10.7.1"
+}

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,7 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-interface ModuleOptions {
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { type ModuleOptions, _default as default };

package/dist/types.d.ts

@@ -1 +0,0 @@
-export { type ModuleOptions, default } from './module'