nuxt-musicfyplayer 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.d.mts +1 -1
- package/dist/module.d.ts +1 -1
- package/dist/module.json +2 -2
- package/dist/module.mjs +5 -1
- package/dist/runtime/assets/css/musicfyplayer.css +1 -1
- package/dist/runtime/components/MusicfyPlayer.vue +11 -0
- package/dist/runtime/composables/musicfyplayer.js +1 -2
- package/dist/runtime/types/colorthief.d.ts +5 -11
- package/dist/runtime/utils/mediaelement.js +2 -4
- package/package.json +18 -15
package/dist/module.d.mts
CHANGED
|
@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
|
|
|
2
2
|
|
|
3
3
|
interface ModuleOptions {
|
|
4
4
|
}
|
|
5
|
-
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
|
5
|
+
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
|
|
6
6
|
|
|
7
7
|
export { type ModuleOptions, _default as default };
|
package/dist/module.d.ts
CHANGED
|
@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
|
|
|
2
2
|
|
|
3
3
|
interface ModuleOptions {
|
|
4
4
|
}
|
|
5
|
-
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
|
5
|
+
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
|
|
6
6
|
|
|
7
7
|
export { type ModuleOptions, _default as default };
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineNuxtModule, createResolver, addComponent, addImportsDir } from '@nuxt/kit';
|
|
1
|
+
import { defineNuxtModule, createResolver, addComponent, addImportsDir, addTypeTemplate } from '@nuxt/kit';
|
|
2
2
|
|
|
3
3
|
const module = defineNuxtModule({
|
|
4
4
|
meta: {
|
|
@@ -16,6 +16,10 @@ const module = defineNuxtModule({
|
|
|
16
16
|
filePath: resolve("./runtime/components/MusicfyPlayer.vue")
|
|
17
17
|
});
|
|
18
18
|
addImportsDir(resolve("./runtime/composables"));
|
|
19
|
+
addTypeTemplate({
|
|
20
|
+
filename: "types/colorthief.d.ts",
|
|
21
|
+
src: resolve("./runtime/types/colorthief.d.ts")
|
|
22
|
+
});
|
|
19
23
|
}
|
|
20
24
|
});
|
|
21
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.mejs__container,.mejs__controls{background:transparent!important}.mejs__container{min-width:100%!important;width:100%!important}.mejs__controls{display:flex!important;flex-direction:column!important;padding:0!important}.mejs__button{width:100%!important}.mejs__button>button{overflow:visible!important}.mejs__button,.mejs__time,.mejs__time-rail{height:0!important}.mejs__time-rail{margin:0!important;padding:0!important;width:100%!important}.mejs__time{display:flex!important;height:2rem!important;justify-content:space-between!important;padding:0!important}.mejs__pause button,.mejs__play button{margin:0;top:-.5rem}.mejs__currenttime,.mejs__duration{align-self:flex-end!important}.mejs__play button:before{content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='
|
|
1
|
+
.mejs__container,.mejs__controls{background:transparent!important}.mejs__container{min-width:100%!important;width:100%!important}.mejs__controls{display:flex!important;flex-direction:column!important;padding:0!important}.mejs__button{width:100%!important}.mejs__button>button{overflow:visible!important}.mejs__button,.mejs__time,.mejs__time-rail{height:0!important}.mejs__time-rail{margin:0!important;padding:0!important;width:100%!important}.mejs__time{display:flex!important;height:2rem!important;justify-content:space-between!important;padding:0!important}.mejs__pause button,.mejs__play button,.mejs__replay button{margin:0;top:-.5rem}.mejs__currenttime,.mejs__duration{align-self:flex-end!important}.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!important;width:100%!important}.mejs__horizontal-volume-total{background:hsla(0,0%,100%,.3)!important;cursor:pointer;left:unset!important;right:0!important;top:-2.75rem!important}.mejs__pause svg.mejs__icon-pause,.mejs__play svg.mejs__icon-play,.mejs__replay svg.mejs__icon-replay{display:none}.musicfyplayer{border-radius:.5rem!important;overflow:hidden;text-align:center}@media (width <= 385px){.musicfyplayer{height:unset!important}}.musicfyplayer.musicfyplayer-color{background-color:#020420}.musicfyplayer .box{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.8));display:flex;flex-direction:column;height:100%;position:relative}.musicfyplayer .controls{color:#fff;padding:1.5rem 1rem}.musicfyplayer .music{width:100%}.musicfyplayer .cover{background-color:rgba(0,0,0,.4);flex:1 1 0%}.musicfyplayer .box-1,.musicfyplayer .cover{height:100%;overflow-y:hidden}.musicfyplayer .box-2{box-sizing:border-box;height:100%;padding:.5rem;position:relative;width:100%}.musicfyplayer .box-3{height:100%;min-width:80px;position:relative;width:100%}.musicfyplayer .image{background-position:top!important;background-repeat:no-repeat!important;background-size:contain!important;max-height:100%;max-width:100%;position:relative}
|
|
@@ -4,14 +4,25 @@ import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
|
|
|
4
4
|
import { onMounted, ref, type Ref } from '#imports'
|
|
5
5
|
|
|
6
6
|
const props = defineProps({
|
|
7
|
+
/**
|
|
8
|
+
* The configuration of the player
|
|
9
|
+
*/
|
|
7
10
|
config: {
|
|
8
11
|
type: Object as () => MusicfyPlayerConfig,
|
|
9
12
|
required: true,
|
|
10
13
|
},
|
|
14
|
+
/**
|
|
15
|
+
* The width and height of the player
|
|
16
|
+
* @default '100%'
|
|
17
|
+
*/
|
|
11
18
|
width: {
|
|
12
19
|
type: String,
|
|
13
20
|
default: '100%',
|
|
14
21
|
},
|
|
22
|
+
/**
|
|
23
|
+
* The height of the player
|
|
24
|
+
* @default '450px'
|
|
25
|
+
*/
|
|
15
26
|
height: {
|
|
16
27
|
type: String,
|
|
17
28
|
default: '450px',
|
|
@@ -15,8 +15,7 @@ export const defineMusicfyPlayer = (config) => {
|
|
|
15
15
|
audioSrc.value = srcDropbox(config.audio.id, config.audio.rlkey);
|
|
16
16
|
break;
|
|
17
17
|
}
|
|
18
|
-
if (!audioSrc.value)
|
|
19
|
-
throw new Error("Invalid audio source");
|
|
18
|
+
if (!audioSrc.value) throw new Error("Invalid audio source");
|
|
20
19
|
return {
|
|
21
20
|
imageSrc: config.image.src,
|
|
22
21
|
imageAlt: config.image.alt || "Musicfy Player",
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
declare module 'colorthief' {
|
|
2
|
-
|
|
2
|
+
type Palette = [red: number, green: number, blue: number]
|
|
3
3
|
export default class ColorThief {
|
|
4
|
-
getColor:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
getPalette: (
|
|
10
|
-
img: HTMLImageElement | null,
|
|
11
|
-
colorCount: number,
|
|
12
|
-
quality?: number,
|
|
13
|
-
) => RGBColor[] | null
|
|
4
|
+
getColor(sourceImage: HTMLImageElement, quality?: number): Palette
|
|
5
|
+
static getColor(sourceImage: string, quality?: number): Promise<Palette>
|
|
6
|
+
getPaletteFromURL(URL: string, colorCount?: number, quality?: number): Promise<Palette[]>
|
|
7
|
+
getColorFromURL(imageURL: string, quality?: number): Promise<Palette>
|
|
14
8
|
}
|
|
15
9
|
}
|
|
@@ -2,9 +2,7 @@ import "mediaelement/build/mediaelement-and-player.js";
|
|
|
2
2
|
import { createError } from "h3";
|
|
3
3
|
export const mediaElementPlayer = (element, options) => {
|
|
4
4
|
const MediaElementPlayer = window.MediaElementPlayer;
|
|
5
|
-
if (!import.meta.client)
|
|
6
|
-
|
|
7
|
-
if (!MediaElementPlayer)
|
|
8
|
-
throw createError({ status: 500, message: "MediaElementPlayer is not available" });
|
|
5
|
+
if (!import.meta.client) throw createError({ status: 500, message: "MediaElementPlayer is not available on server side" });
|
|
6
|
+
if (!MediaElementPlayer) throw createError({ status: 500, message: "MediaElementPlayer is not available" });
|
|
9
7
|
return new MediaElementPlayer(element, options);
|
|
10
8
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxt-musicfyplayer",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Embed a simple and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and ColorThief.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"nuxt",
|
|
@@ -8,7 +8,10 @@
|
|
|
8
8
|
"music-player",
|
|
9
9
|
"music"
|
|
10
10
|
],
|
|
11
|
-
"repository":
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/Yizack/nuxt-musicfyplayer.git"
|
|
14
|
+
},
|
|
12
15
|
"homepage": "https://github.com/Yizack/nuxt-musicfyplayer",
|
|
13
16
|
"author": {
|
|
14
17
|
"name": "Yizack Rangel",
|
|
@@ -41,22 +44,22 @@
|
|
|
41
44
|
"test:watch": "vitest watch"
|
|
42
45
|
},
|
|
43
46
|
"dependencies": {
|
|
44
|
-
"@nuxt/kit": "^3.
|
|
47
|
+
"@nuxt/kit": "^3.13.0",
|
|
45
48
|
"colorthief": "^2.4.0",
|
|
46
49
|
"mediaelement": "^7.0.5"
|
|
47
50
|
},
|
|
48
51
|
"devDependencies": {
|
|
49
|
-
"@nuxt/devtools": "^1.
|
|
50
|
-
"@nuxt/eslint-config": "^0.
|
|
51
|
-
"@nuxt/module-builder": "^0.8.
|
|
52
|
-
"@nuxt/schema": "^3.
|
|
53
|
-
"@nuxt/test-utils": "^3.
|
|
54
|
-
"@types/node": "^
|
|
52
|
+
"@nuxt/devtools": "^1.4.1",
|
|
53
|
+
"@nuxt/eslint-config": "^0.5.4",
|
|
54
|
+
"@nuxt/module-builder": "^0.8.3",
|
|
55
|
+
"@nuxt/schema": "^3.13.0",
|
|
56
|
+
"@nuxt/test-utils": "^3.14.1",
|
|
57
|
+
"@types/node": "^22.5.1",
|
|
55
58
|
"changelogen": "^0.5.5",
|
|
56
|
-
"eslint": "^9.
|
|
57
|
-
"nuxt": "^3.
|
|
58
|
-
"vitest": "^
|
|
59
|
-
"vue-tsc": "^2.
|
|
59
|
+
"eslint": "^9.9.1",
|
|
60
|
+
"nuxt": "^3.13.0",
|
|
61
|
+
"vitest": "^2.0.5",
|
|
62
|
+
"vue-tsc": "^2.1.2"
|
|
60
63
|
},
|
|
61
64
|
"changelog": {
|
|
62
65
|
"repo": {
|
|
@@ -65,5 +68,5 @@
|
|
|
65
68
|
"domain": "github.com"
|
|
66
69
|
}
|
|
67
70
|
},
|
|
68
|
-
"packageManager": "pnpm@9.
|
|
69
|
-
}
|
|
71
|
+
"packageManager": "pnpm@9.9.0"
|
|
72
|
+
}
|