nuxt-musicfyplayer 2.1.2 → 2.1.4

package/README.md

@@ -7,7 +7,7 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and ColorThief.js
+Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and fast-average-color
 
 - [✨ Release Notes](https://github.com/Yizack/nuxt-musicfyplayer/blob/main/CHANGELOG.md)
 - [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue)
@@ -49,7 +49,7 @@ In the project, use the component `<MusicfyPlayer :config="" />`, where `config`
 
 | Property                              | Description              | Default value |
 |---------------------------------------|--------------------------|---------------|
-| [`config`](#musicfyplayer-composale)  | MusicfyPlayer composable |               |
+| [`config`](#musicfyplayer-composable) | MusicfyPlayer composable |               |
 | `width`                               | Music player width       | `100%`        |
 | `height`                              | Music player height      | `450px`       |
 
@@ -120,7 +120,7 @@ const config = useMusicfyPlayer({
     rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
   },
   image: {
-    src: "https://dimatis.yizack.com/images/reminiscences.jpg",
+    src: "https://dimatis.music/images/reminiscences.jpg",
     alt: "Dimatis - Reminiscences"
   },
   color: {
@@ -146,7 +146,7 @@ Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt
 
 ## Credits
 
-- Detect dominant color with [ColorThief](https://lokeshdhakar.com/projects/color-thief/)
+- Detect average color with [fast-average-color](https://github.com/fast-average-color/fast-average-color)
 - Music player controls by [MediaElement.js](https://www.mediaelementjs.com/)
 - [Nuxt](https://github.com/nuxt/nuxt), the JavaScript framework for creating SSR Vue applications and its [Module Author Guide](https://nuxt.com/docs/guide/going-further/modules)
 

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

@@ -1,12 +1,12 @@
 {
   "name": "nuxt-musicfyplayer",
-  "configKey": "nuxtMusicfyPlayer",
+  "configKey": "musicfyplayer",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "2.1.2",
+  "version": "2.1.4",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.0",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,9 +1,9 @@
-import { defineNuxtModule, createResolver, addComponent, addImportsDir, addTypeTemplate } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponent, addImportsDir } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-musicfyplayer",
-    configKey: "nuxtMusicfyPlayer",
+    configKey: "musicfyplayer",
     compatibility: {
       nuxt: ">=3.0.0"
     }
@@ -16,10 +16,6 @@ const module = defineNuxtModule({
       filePath: resolve("./runtime/components/MusicfyPlayer.vue")
     });
     addImportsDir(resolve("./runtime/composables"));
-    addTypeTemplate({
-      filename: "types/colorthief.d.ts",
-      src: resolve("./runtime/types/colorthief.d.ts")
-    });
   }
 });
 

package/dist/runtime/components/MusicfyPlayer.vue

@@ -1,62 +1,52 @@
-<script setup lang='ts'>
-import ColorThief from 'colorthief'
-import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
-import { onMounted, ref, useTemplateRef } from '#imports'
-
-const props = withDefaults(defineProps<{
-  /**
-   * 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
-}>(), {
-  width: '100%',
-  height: '450px',
-})
-
-const audio = useTemplateRef<HTMLAudioElement>('audio')
-
-const size = ref({ width: props.width, height: props.height })
-const backgroundColor = ref<string | undefined>()
-
-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
-  }
-}
-
-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>
+<script setup>
+import { FastAverageColor } from "fast-average-color";
+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 fac = new FastAverageColor();
+    const color = fac.getColor(img);
+    backgroundColor.value = color ? color.rgba : 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">
@@ -75,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

@@ -5,5 +5,5 @@ import type { MusicfyPlayerConfig, MusicfyPlayerComposableConfig } from './../ty
  * @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;
+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/types/mediaelement.d.ts

@@ -12,3 +12,9 @@ export interface MediaElementPlayerOptions {
   iPhoneUseNativeControls: boolean
   AndroidUseNativeControls: boolean
 }
+
+declare global {
+  interface Window {
+    MediaElementPlayer?: MediaElementPlayer
+  }
+}

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

@@ -1,8 +1,3 @@
 import 'mediaelement/build/mediaelement-and-player.js';
-import type { MediaElementPlayer, MediaElementPlayerOptions } from '../types/mediaelement.js';
-declare global {
-    interface Window {
-        MediaElementPlayer: MediaElementPlayer | undefined;
-    }
-}
+import type { MediaElementPlayerOptions } from '../types/mediaelement.js';
 export declare const mediaElementPlayer: (element: HTMLAudioElement, options: MediaElementPlayerOptions) => void;

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,7 +1,7 @@
 {
   "name": "nuxt-musicfyplayer",
-  "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",
+  "version": "2.1.4",
+  "description": "Embed a simple and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and fast-average-color",
   "keywords": [
     "nuxt",
     "nuxt3",
@@ -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"
   ],
@@ -45,29 +43,22 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.15.4",
-    "colorthief": "2.4.0",
+    "@nuxt/kit": "^3.16.2",
+    "fast-average-color": "^9.5.0",
     "mediaelement": "^7.0.7"
   },
   "devDependencies": {
-    "@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"
+    "@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@10.2.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/runtime/types/colorthief.d.ts

@@ -1,9 +0,0 @@
-declare module 'colorthief' {
-  type Palette = [red: number, green: number, blue: number]
-  export default class ColorThief {
-    getColor(sourceImage: HTMLImageElement, quality?: number): Palette
-    static getColor(sourceImage: string, quality?: number): Promise<Palette>
-    getPaletteFromURL(URL: string, colorCount?: number, quality?: number): Promise<Palette[]>
-    getColorFromURL(imageURL: string, quality?: number): Promise<Palette>
-  }
-}

package/dist/types.d.ts

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