nuxt-musicfyplayer 2.1.3 → 2.1.5

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)
@@ -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.json

@@ -1,10 +1,10 @@
 {
   "name": "nuxt-musicfyplayer",
-  "configKey": "nuxtMusicfyPlayer",
+  "configKey": "musicfyplayer",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "2.1.3",
+  "version": "2.1.5",
   "builder": {
     "@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,5 +1,5 @@
 <script setup>
-import ColorThief from "colorthief";
+import { getImageAverageColor } from "./../utils/average-color";
 import { onMounted, ref, useTemplateRef } from "#imports";
 const props = defineProps({
   config: {
@@ -21,14 +21,9 @@ 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;
-  };
+  getImageAverageColor(props.config.imageSrc).then((color) => {
+    backgroundColor.value = color;
+  }).catch(console.error);
 }
 onMounted(async () => {
   if (!audio.value) return;

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/average-color.d.ts

@@ -0,0 +1 @@
+export declare const getImageAverageColor: (src: string) => Promise<string>;

package/dist/runtime/utils/average-color.js

@@ -0,0 +1,16 @@
+import { FastAverageColor } from "fast-average-color";
+const fac = new FastAverageColor();
+export const getImageAverageColor = (src) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "Anonymous";
+    img.src = src;
+    img.onload = () => {
+      const color = fac.getColor(img);
+      resolve(color.rgb);
+    };
+    img.onerror = () => {
+      reject(new Error(`Failed to load image: ${src}`));
+    };
+  });
+};

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-musicfyplayer",
-  "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",
+  "version": "2.1.5",
+  "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",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.16.2",
-    "colorthief": "2.4.0",
+    "fast-average-color": "^9.5.0",
     "mediaelement": "^7.0.7"
   },
   "devDependencies": {

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>
-  }
-}