nuxt-musicfyplayer 2.0.2 → 2.1.0
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/README.md +2 -0
- package/dist/module.json +1 -1
- package/dist/runtime/assets/css/musicfyplayer.css +1 -1
- package/dist/runtime/components/MusicfyPlayer.vue +11 -13
- package/dist/runtime/composables/musicfyplayer.js +1 -0
- package/dist/runtime/types/musicfyplayer.d.ts +6 -0
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -69,6 +69,7 @@ Define your configuration options with the `defineMusicfyPlayer` composable.
|
|
|
69
69
|
|------------|----------------------------------|---------------|
|
|
70
70
|
| `provider` | Provider of the audio source. | `local` |
|
|
71
71
|
| `type` | Content-type fo the audio source | `audio/mpeg` |
|
|
72
|
+
| `preload` | Preload the audio source | `auto` |
|
|
72
73
|
| [`...`](#supported-audio-providers) | Selected audio provider properties ||
|
|
73
74
|
|
|
74
75
|
### Supported audio providers
|
|
@@ -114,6 +115,7 @@ Use the emoji property to render an emoji by character.
|
|
|
114
115
|
const config = defineMusicfyPlayer({
|
|
115
116
|
audio: {
|
|
116
117
|
provider: "dropbox",
|
|
118
|
+
preload: "none",
|
|
117
119
|
id: "soep3xvq8aee4eh6hcj4r",
|
|
118
120
|
rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
|
|
119
121
|
},
|
package/dist/module.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.mejs__container,.mejs__controls{background:transparent
|
|
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}
|
|
@@ -66,19 +66,17 @@ onMounted(async () => {
|
|
|
66
66
|
|
|
67
67
|
<template>
|
|
68
68
|
<div class="musicfyplayer" :class="{ [`${config.colorClass}`]: config.colorClass }" :style="{ ...size, backgroundColor }">
|
|
69
|
-
<div class="
|
|
70
|
-
<div class="
|
|
71
|
-
<
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
</audio>
|
|
75
|
-
</div>
|
|
69
|
+
<div class="mp__box">
|
|
70
|
+
<div class="mp__controls">
|
|
71
|
+
<audio ref="audio" class="mp__music" :preload="config.audioPreload">
|
|
72
|
+
<source :src="config.audioSrc" :type="config.audioType">
|
|
73
|
+
</audio>
|
|
76
74
|
</div>
|
|
77
|
-
<div class="
|
|
78
|
-
<div class="
|
|
79
|
-
<div class="
|
|
80
|
-
<div class="
|
|
81
|
-
<img class="
|
|
75
|
+
<div class="mp__cover">
|
|
76
|
+
<div class="mp__box-1">
|
|
77
|
+
<div class="mp__box-2">
|
|
78
|
+
<div class="mp__box-3">
|
|
79
|
+
<img class="mp__image" :src="config.imageSrc" :alt="config.imageAlt">
|
|
82
80
|
</div>
|
|
83
81
|
</div>
|
|
84
82
|
</div>
|
|
@@ -88,5 +86,5 @@ onMounted(async () => {
|
|
|
88
86
|
</template>
|
|
89
87
|
|
|
90
88
|
<style>
|
|
91
|
-
@import "
|
|
89
|
+
@import "./../assets/css/musicfyplayer.css";
|
|
92
90
|
</style>
|
|
@@ -21,6 +21,7 @@ export const defineMusicfyPlayer = (config) => {
|
|
|
21
21
|
imageAlt: config.image.alt || "Musicfy Player",
|
|
22
22
|
audioType: config.audio.type || "audio/mpeg",
|
|
23
23
|
audioSrc: audioSrc.value,
|
|
24
|
+
audioPreload: config.audio.preload || "auto",
|
|
24
25
|
colorClass: config.color?.class || "musicfyplayer-color",
|
|
25
26
|
colorDetect: config.color?.detect || false
|
|
26
27
|
};
|
|
@@ -21,6 +21,11 @@ export interface MusicfyPlayerDefinition {
|
|
|
21
21
|
* @default 'audio/mpeg'
|
|
22
22
|
*/
|
|
23
23
|
type?: string
|
|
24
|
+
/**
|
|
25
|
+
* Specifies if and how the audio file should be loaded when the page loads
|
|
26
|
+
* @default 'auto'
|
|
27
|
+
*/
|
|
28
|
+
preload?: 'auto' | 'metadata' | 'none'
|
|
24
29
|
} & (LocalAudio | DropboxAudio)
|
|
25
30
|
/**
|
|
26
31
|
* Color configuration
|
|
@@ -62,6 +67,7 @@ export interface MusicfyPlayerConfig {
|
|
|
62
67
|
imageAlt: string
|
|
63
68
|
audioType: string
|
|
64
69
|
audioSrc: string
|
|
70
|
+
audioPreload: MusicfyPlayerDefinition['audio']['preload']
|
|
65
71
|
colorClass: string
|
|
66
72
|
colorDetect: boolean
|
|
67
73
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nuxt-musicfyplayer",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
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",
|
|
@@ -44,22 +44,22 @@
|
|
|
44
44
|
"test:watch": "vitest watch"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@nuxt/kit": "^3.13.
|
|
47
|
+
"@nuxt/kit": "^3.13.1",
|
|
48
48
|
"colorthief": "^2.4.0",
|
|
49
49
|
"mediaelement": "^7.0.5"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@nuxt/devtools": "^1.4.1",
|
|
53
|
-
"@nuxt/eslint-config": "^0.5.
|
|
53
|
+
"@nuxt/eslint-config": "^0.5.6",
|
|
54
54
|
"@nuxt/module-builder": "^0.8.3",
|
|
55
|
-
"@nuxt/schema": "^3.13.
|
|
55
|
+
"@nuxt/schema": "^3.13.1",
|
|
56
56
|
"@nuxt/test-utils": "^3.14.1",
|
|
57
|
-
"@types/node": "^22.5.
|
|
57
|
+
"@types/node": "^22.5.4",
|
|
58
58
|
"changelogen": "^0.5.5",
|
|
59
59
|
"eslint": "^9.9.1",
|
|
60
|
-
"nuxt": "^3.13.
|
|
60
|
+
"nuxt": "^3.13.1",
|
|
61
61
|
"vitest": "^2.0.5",
|
|
62
|
-
"vue-tsc": "^2.1.
|
|
62
|
+
"vue-tsc": "^2.1.6"
|
|
63
63
|
},
|
|
64
64
|
"changelog": {
|
|
65
65
|
"repo": {
|