nuxt-musicfyplayer 2.1.5 → 2.1.7

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,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "2.1.5",
+  "version": "2.1.7",
   "builder": {
-    "@nuxt/module-builder": "1.0.0",
+    "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"
   }
 }

package/dist/runtime/assets/css/musicfyplayer.css

@@ -1 +1 @@
-@import "mediaelement/build/mediaelementplayer.min.css";.mejs__container,.mejs__controls:not([style*="display: none"]){background:transparent}.mejs__container{min-width:100%!important;width:100%!important}.mejs__controls{display:flex;flex-direction:column;padding:0}.mejs__button{width:100%}.mejs__button>button{overflow:visible}.mejs__button,.mejs__time,.mejs__time-rail{height:0}.mejs__time-rail{margin:0;padding:0;width:100%}.mejs__time{display:flex;height:2rem;justify-content:space-between;padding:0}.mejs__pause button,.mejs__play button,.mejs__replay button{margin:0;top:-.5rem}.mejs__currenttime,.mejs__duration{align-self:flex-end}.mejs__play button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E")}.mejs__pause button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/%3E%3C/svg%3E")}.mejs__replay button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='30 20 512 512'%3E%3Cpath d='M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32h128c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2l-17.6-17.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8 229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3 163.8-62.5 226.3 0z'/%3E%3C/svg%3E")}.mejs__volume-button button{margin:0;right:3.5rem;top:-3.05rem}.mejs__volume-button.mejs__mute button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z'/%3E%3Cpath d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/%3E%3Cpath d='M8.707 11.182A4.49 4.49 0 0 0 10.025 8a4.49 4.49 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/%3E%3C/svg%3E")}.mejs__volume-button.mejs__unmute button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E")}.mejs__horizontal-volume-slider{height:0;width:100%}.mejs__horizontal-volume-total{background:hsla(0,0%,100%,.3);cursor:pointer;left:unset;right:0;top:-2.75rem}.mejs__pause svg.mejs__icon-pause,.mejs__play svg.mejs__icon-play,.mejs__replay svg.mejs__icon-replay{display:none}.musicfyplayer{border-radius:.5rem;overflow:hidden;text-align:center}@media (width <= 385px){.musicfyplayer{height:unset!important}}.musicfyplayer.musicfyplayer-color{background-color:#020420}.musicfyplayer .mp__box{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.8));display:flex;flex-direction:column;height:100%;position:relative}.musicfyplayer .mp__controls{color:#fff;padding:1.5rem 1rem}.musicfyplayer .mp__music{width:100%}.musicfyplayer .mp__cover{background-color:rgba(0,0,0,.4);flex:1 1 0%}.musicfyplayer .mp__box-1,.musicfyplayer .mp__cover{height:100%;overflow-y:hidden}.musicfyplayer .mp__box-2{box-sizing:border-box;height:100%;padding:.5rem;position:relative;width:100%}.musicfyplayer .mp__box-3{height:100%;min-width:80px;position:relative;width:100%}.musicfyplayer .mp__image{background-position:top;background-repeat:no-repeat;background-size:contain;display:inline;max-height:100%;max-width:100%;position:relative}
+@import "mediaelement/build/mediaelementplayer.min.css";.mejs__container,.mejs__controls:not([style*="display: none"]){background:transparent}.mejs__container{min-width:100%!important;width:100%!important}.mejs__container:focus{outline-width:0}.mejs__controls{display:flex;flex-direction:column;padding:0}.mejs__button{width:100%}.mejs__button>button{overflow:visible}.mejs__button,.mejs__time,.mejs__time-rail{height:0}.mejs__time-rail{margin:0;padding:0;width:100%}.mejs__time{display:flex;height:2rem;justify-content:space-between;padding:0}.mejs__pause button,.mejs__play button,.mejs__replay button{margin:0;top:-.5rem}.mejs__currenttime,.mejs__duration{align-self:flex-end}.mejs__play button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E")}.mejs__pause button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fff' viewBox='4 3.5 16 16'%3E%3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/%3E%3C/svg%3E")}.mejs__replay button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23fff' viewBox='30 20 512 512'%3E%3Cpath d='M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32h128c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2l-17.6-17.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8 229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3 163.8-62.5 226.3 0z'/%3E%3C/svg%3E")}.mejs__volume-button button{margin:0;right:3.5rem;top:-3.05rem}.mejs__volume-button.mejs__mute button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z'/%3E%3Cpath d='M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z'/%3E%3Cpath d='M8.707 11.182A4.49 4.49 0 0 0 10.025 8a4.49 4.49 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06'/%3E%3C/svg%3E")}.mejs__volume-button.mejs__unmute button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23fff' viewBox='1 1.5 13 13'%3E%3Cpath d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E")}.mejs__horizontal-volume-slider{height:0;width:100%}.mejs__horizontal-volume-total{background:hsla(0,0%,100%,.3);cursor:pointer;left:unset;right:0;top:-2.75rem}.mejs__pause svg.mejs__icon-pause,.mejs__play svg.mejs__icon-play,.mejs__replay svg.mejs__icon-replay{display:none}.musicfyplayer{border-radius:.5rem;overflow:hidden;text-align:center}@media (width <= 385px){.musicfyplayer{height:unset!important}}.musicfyplayer.musicfyplayer-color{background-color:#020420}.musicfyplayer .mp__box{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.8));display:flex;flex-direction:column;height:100%;position:relative}.musicfyplayer .mp__controls{color:#fff;padding:1.5rem 1rem}.musicfyplayer .mp__music{width:100%}.musicfyplayer .mp__cover{background-color:rgba(0,0,0,.4);flex:1 1 0%}.musicfyplayer .mp__box-1,.musicfyplayer .mp__cover{height:100%;overflow-y:hidden}.musicfyplayer .mp__box-2{box-sizing:border-box;height:100%;padding:.5rem;position:relative;width:100%}.musicfyplayer .mp__box-3{height:100%;min-width:80px;position:relative;width:100%}.musicfyplayer .mp__image{background-position:top;background-repeat:no-repeat;background-size:contain;display:inline;max-height:100%;max-width:100%;position:relative}

package/dist/runtime/components/MusicfyPlayer.vue

@@ -2,20 +2,9 @@
 import { getImageAverageColor } from "./../utils/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"
-  }
+  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 });

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

@@ -1,16 +1,6 @@
 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}`));
-    };
-  });
+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.5",
+  "version": "2.1.7",
   "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",
@@ -43,22 +43,22 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.16.2",
+    "@nuxt/kit": "^3.17.3",
     "fast-average-color": "^9.5.0",
     "mediaelement": "^7.0.7"
   },
   "devDependencies": {
-    "@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",
+    "@nuxt/devtools": "^2.4.1",
+    "@nuxt/eslint-config": "^1.4.0",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "^3.17.3",
+    "@nuxt/test-utils": "^3.19.0",
+    "@types/node": "^22.15.18",
     "changelogen": "^0.6.1",
-    "eslint": "^9.24.0",
-    "nuxt": "^3.16.2",
-    "vitest": "^3.1.1",
-    "vue-tsc": "^2.2.8"
+    "eslint": "^9.27.0",
+    "nuxt": "^3.17.3",
+    "vitest": "^3.1.3",
+    "vue-tsc": "^2.2.10"
   },
-  "packageManager": "pnpm@10.7.1"
+  "packageManager": "pnpm@10.11.0"
 }