nuxt-musicfyplayer 2.1.4 → 2.1.6

package/README.md

@@ -146,6 +146,7 @@ Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt
 
 ## Credits
 
+- Built based on [embeddable-music-player](https://github.com/Yizack/embeddable-music-player)
 - 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

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "2.1.4",
+  "version": "2.1.6",
   "builder": {
     "@nuxt/module-builder": "1.0.0",
     "unbuild": "3.5.0"

package/dist/runtime/components/MusicfyPlayer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { FastAverageColor } from "fast-average-color";
+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 fac = new FastAverageColor();
-    const color = fac.getColor(img);
-    backgroundColor.value = color ? color.rgba : void 0;
-  };
+  getImageAverageColor(props.config.imageSrc).then((color) => {
+    backgroundColor.value = color;
+  }).catch(console.error);
 }
 onMounted(async () => {
   if (!audio.value) return;

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,6 @@
+import { FastAverageColor } from "fast-average-color";
+const fac = new FastAverageColor();
+export const getImageAverageColor = async (src) => {
+  const color = await fac.getColorAsync(src);
+  return color.rgb;
+};

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

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

package/dist/runtime/utils/mediaelement.js

@@ -1,4 +1,4 @@
-import "mediaelement/build/mediaelement-and-player.js";
+import "mediaelement/build/mediaelement-and-player.min.js";
 import { createError } from "h3";
 export const mediaElementPlayer = (element, options) => {
   const MediaElementPlayer = window.MediaElementPlayer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-musicfyplayer",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "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",