nuxt-musicfyplayer 1.0.1 → 2.0.1

package/README.md

@@ -5,7 +5,6 @@
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
-[![Tests][tests-src]][tests-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
@@ -44,14 +43,25 @@ That's it! You can now use `nuxt-musicfyplayer` in your Nuxt app ✨
 
 In the project, use the component `<MusicfyPlayer :config="" />`, where `config` is the configuration options of the player.
 
+### Component properties
+
+## Size properties
+
+| Property                              | Description              | Default value |
+|---------------------------------------|--------------------------|---------------|
+| [`config`](#musicfyplayer-definition) | MusicfyPlayer definition |               |
+| `width`                               | Music player width       | `100%`        |
+| `height`                              | Music player height      | `450px`       |
+
+## MusicfyPlayer Definition
+
 Define your configuration options with the `defineMusicfyPlayer` composable.
 
-| Property                   | Description                           |
-|----------------------------|---------------------------------------|
+| Property                            | Description                           |
+|-------------------------------------|---------------------------------------|
 | [`audio`](#audio-shared-properties) | The audio source properties           |
-| [`image`](#image-properties) | The image source (preferably squared) |
-| [`size`](#size-properties)   | The size of your player               |
-| [`color`](#color-properties) | Color options                         |
+| [`image`](#image-properties)        | The image source (preferably squared) |
+| [`color`](#color-properties)        | Color options                         |
 
 ## Audio shared properties
 
@@ -65,7 +75,7 @@ Define your configuration options with the `defineMusicfyPlayer` composable.
 
 | Provider                             | Value    |
 |--------------------------------------|----------|
-| [URL](#local-audio-properties)     | `local`  |
+| [URL](#local-audio-properties)       | `local`  |
 | [Dropbox](#dropbox-audio-properties) | `dropbox`|
 
 ### Local audio properties
@@ -88,13 +98,6 @@ Define your configuration options with the `defineMusicfyPlayer` composable.
 | `src`    | Image source link      | Yes      |
 | `alt`    | Image alternative text | No       |
 
-## Size properties
-
-| Property | Description            | Default value |
-|----------|------------------------|---------------|
-| `width`  | Music player width     | `100%`        |
-| `height` | Music player height    | `450px`       |
-
 ## Color properties
 
 | Property | Description                                                                                 | Default value         |
@@ -118,9 +121,6 @@ const config = defineMusicfyPlayer({
     src: "https://dimatis.yizack.com/images/reminiscences.jpg",
     alt: "Dimatis - Reminiscences"
   },
-  size: {
-    width: "100%"
-  },
   color: {
     detect: true
   }
@@ -128,7 +128,7 @@ const config = defineMusicfyPlayer({
 </script>
 
 <template>
-  <MusicfyPlayer :config="config" />
+  <MusicfyPlayer :config="config" width="100%" />
 </template>
 ```
 
@@ -175,17 +175,17 @@ npm run release
 ```
 
 <!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/nuxt-musicfyplayer/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-musicfyplayer/latest.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-version-href]: https://npmjs.com/package/nuxt-musicfyplayer
 
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-musicfyplayer.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-musicfyplayer.svg?style=flat&colorA=020420&colorB=00DC82
 [npm-downloads-href]: https://npmjs.com/package/nuxt-musicfyplayer
 
-[license-src]: https://img.shields.io/npm/l/nuxt-musicfyplayer.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-src]: https://img.shields.io/npm/l/nuxt-musicfyplayer.svg?style=flat&colorA=020420&colorB=00DC82
 [license-href]: LICENSE
 
-[tests-src]: https://img.shields.io/github/actions/workflow/status/Yizack/nuxt-musicfyplayer/tests.yml?style=flat&colorA=18181B&colorB=28CF8D&label=tests
+[tests-src]: https://img.shields.io/github/actions/workflow/status/Yizack/nuxt-musicfyplayer/tests.yml?style=flat&colorA=020420&colorB=00DC82&label=tests
 [tests-href]: https://github.com/Yizack/nuxt-musicfyplayer/actions/workflows/tests.yml
 
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
 [nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -2,7 +2,11 @@
   "name": "nuxt-musicfyplayer",
   "configKey": "nuxtMusicfyPlayer",
   "compatibility": {
-    "nuxt": "^3.0.0"
+    "nuxt": ">=3.0.0"
   },
-  "version": "1.0.1"
+  "version": "2.0.1",
+  "builder": {
+    "@nuxt/module-builder": "0.8.3",
+    "unbuild": "2.0.0"
+  }
 }

package/dist/module.mjs

@@ -1,11 +1,11 @@
-import { defineNuxtModule, createResolver, addComponent, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponent, addImportsDir, addTypeTemplate } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-musicfyplayer",
     configKey: "nuxtMusicfyPlayer",
     compatibility: {
-      nuxt: "^3.0.0"
+      nuxt: ">=3.0.0"
     }
   },
   setup() {
@@ -16,6 +16,10 @@ 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,21 +1,40 @@
 <script setup lang='ts'>
-import { onMounted, ref, type Ref } from '#imports'
-import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
 import ColorThief from 'colorthief'
+import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
+import { onMounted, ref, type Ref } from '#imports'
 
 const props = defineProps({
+  /**
+   * The configuration of the player
+   */
   config: {
     type: Object as () => MusicfyPlayerConfig,
-    required: true
-  }
+    required: true,
+  },
+  /**
+   * The width and height of the player
+   * @default '100%'
+   */
+  width: {
+    type: String,
+    default: '100%',
+  },
+  /**
+   * The height of the player
+   * @default '450px'
+   */
+  height: {
+    type: String,
+    default: '450px',
+  },
 })
 
 const audio = ref() as Ref<HTMLAudioElement>
-const size = ref({ width: props.config.sizeWidth, height: props.config.sizeHeight })
+const size = ref({ width: props.width, height: props.height })
 const backgroundColor = ref<string | undefined>()
 
 const generateColor = async () => {
-  if (process.client && props.config.colorDetect) {
+  if (import.meta.client && props.config.colorDetect) {
     const img = new Image()
     img.crossOrigin = 'Anonymous'
     img.src = props.config.imageSrc
@@ -40,7 +59,7 @@ onMounted(async () => {
     timeAndDurationSeparator: '<span></span>',
     iPadUseNativeControls: false,
     iPhoneUseNativeControls: false,
-    AndroidUseNativeControls: false
+    AndroidUseNativeControls: false,
   })
 })
 </script>

package/dist/runtime/composables/musicfyplayer.d.ts

@@ -1,2 +1,2 @@
-import type { MusicfyPlayerConfig, MusicfyPlayerDefinition } from './../types/musicfyplayer';
+import type { MusicfyPlayerConfig, MusicfyPlayerDefinition } from './../types/musicfyplayer.js';
 export declare const defineMusicfyPlayer: (config: MusicfyPlayerDefinition) => MusicfyPlayerConfig;

package/dist/runtime/composables/{musicfyplayer.mjs → musicfyplayer.js}

@@ -6,10 +6,6 @@ const srcDropbox = (id, rlkey) => {
 export const defineMusicfyPlayer = (config) => {
   const audioSrc = ref();
   const provider = config.audio.provider || "local";
-  const size = {
-    width: config.size?.width || "100%",
-    height: config.size?.height || "450px"
-  };
   switch (provider) {
     default:
     case "local":
@@ -19,16 +15,12 @@ export const defineMusicfyPlayer = (config) => {
       audioSrc.value = srcDropbox(config.audio.id, config.audio.rlkey);
       break;
   }
-  if (!audioSrc.value) {
-    throw new Error("Invalid audio source");
-  }
+  if (!audioSrc.value) throw new Error("Invalid audio source");
   return {
     imageSrc: config.image.src,
     imageAlt: config.image.alt || "Musicfy Player",
     audioType: config.audio.type || "audio/mpeg",
     audioSrc: audioSrc.value,
-    sizeWidth: size.width,
-    sizeHeight: size.height,
     colorClass: config.color?.class || "musicfyplayer-color",
     colorDetect: config.color?.detect || false
   };

package/dist/runtime/types/colorthief.d.ts

@@ -1,7 +1,9 @@
-declare module 'colorthief' {
-    type RGBColor = [number, number, number];
-    export default class ColorThief {
-        getColor: (img: HTMLImageElement | null, quality?: number) => RGBColor | null;
-        getPalette: (img: HTMLImageElement | null, colorCount: number, quality?: number) => RGBColor[] | null;
-    }
-}
+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>
+  }
+}

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

@@ -1,13 +1,14 @@
-export interface MediaElementPlayer {
-    new (node: HTMLAudioElement, options: MediaElementPlayerOptions): void;
-}
-export interface MediaElementPlayerOptions {
-    iconSprite: string;
-    audioHeight: number;
-    features: ('playpause' | 'current' | 'progress' | 'duration' | 'tracks' | 'volume' | 'fullscreen')[];
-    alwaysShowControls: boolean;
-    timeAndDurationSeparator: string;
-    iPadUseNativeControls: boolean;
-    iPhoneUseNativeControls: boolean;
-    AndroidUseNativeControls: boolean;
-}
+export interface MediaElementPlayer {
+  new (node: HTMLAudioElement, options: MediaElementPlayerOptions): void
+}
+
+export interface MediaElementPlayerOptions {
+  iconSprite: string
+  audioHeight: number
+  features: ('playpause' | 'current' | 'progress' | 'duration' | 'tracks' | 'volume' | 'fullscreen')[]
+  alwaysShowControls: boolean
+  timeAndDurationSeparator: string
+  iPadUseNativeControls: boolean
+  iPhoneUseNativeControls: boolean
+  AndroidUseNativeControls: boolean
+}

package/dist/runtime/types/musicfyplayer.d.ts

@@ -1,38 +1,67 @@
-export interface MusicfyPlayerDefinition {
-    image: {
-        src: string;
-        alt: string;
-    };
-    audio: {
-        provider: string;
-        type: string;
-    } & (LocalAudio | DropboxAudio);
-    color?: {
-        detect?: boolean;
-        class?: string;
-    };
-    size?: {
-        width?: string;
-        height?: string;
-    };
-}
-export interface LocalAudio {
-    provider: 'local';
-    src: string;
-}
-export interface DropboxAudio {
-    provider: 'dropbox';
-    id: string;
-    rlkey?: string;
-}
-export type AudioConfig = LocalAudio | DropboxAudio;
-export interface MusicfyPlayerConfig {
-    imageSrc: string;
-    imageAlt: string;
-    audioType: string;
-    audioSrc: string;
-    sizeWidth: string;
-    sizeHeight: string;
-    colorClass: string;
-    colorDetect: boolean;
-}
+export interface MusicfyPlayerDefinition {
+  /**
+   * Image configuration
+   */
+  image: {
+    src: string
+    /**
+     * Image alt text
+     * @default 'Musicfy Player'
+     */
+    alt?: string
+  }
+  audio: {
+    /**
+     * Audio provider
+     * @default 'local'
+     */
+    provider?: string
+    /**
+     * Audio type
+     * @default 'audio/mpeg'
+     */
+    type?: string
+  } & (LocalAudio | DropboxAudio)
+  /**
+   * Color configuration
+   */
+  color?: {
+    /**
+     * Set if the color should be detected from the image
+     * @default false
+     */
+    detect?: boolean
+    /**
+     * Custom class to apply to the player
+     * @default 'musicfyplayer-color'
+     */
+    class?: string
+  }
+}
+
+export interface LocalAudio {
+  provider?: 'local'
+  /**
+   * Path to the audio file
+   * @example '/path/to/audio.mp3'
+   * @example 'https://example.com/audio.mp3'
+   */
+  src: string
+}
+
+export interface DropboxAudio {
+  provider?: 'dropbox'
+  id: string
+  rlkey?: string
+}
+
+export type AudioConfig = LocalAudio | DropboxAudio
+
+export interface MusicfyPlayerConfig {
+  imageSrc: string
+  imageAlt: string
+  audioType: string
+  audioSrc: string
+  colorClass: string
+  colorDetect: boolean
+}

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

@@ -1,5 +1,5 @@
 import 'mediaelement/build/mediaelement-and-player.js';
-import type { MediaElementPlayer, MediaElementPlayerOptions } from '../types/mediaelement';
+import type { MediaElementPlayer, MediaElementPlayerOptions } from '../types/mediaelement.js';
 declare global {
     interface Window {
         MediaElementPlayer: MediaElementPlayer | undefined;

package/dist/runtime/utils/mediaelement.js

@@ -0,0 +1,8 @@
+import "mediaelement/build/mediaelement-and-player.js";
+import { createError } from "h3";
+export const mediaElementPlayer = (element, options) => {
+  const MediaElementPlayer = window.MediaElementPlayer;
+  if (!import.meta.client) throw createError({ status: 500, message: "MediaElementPlayer is not available on server side" });
+  if (!MediaElementPlayer) throw createError({ status: 500, message: "MediaElementPlayer is not available" });
+  return new MediaElementPlayer(element, options);
+};

package/dist/types.d.mts

@@ -1,16 +1 @@
-
-import type { ModuleOptions } from './module.js'
-
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['nuxtMusicfyPlayer']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['nuxtMusicfyPlayer']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['nuxtMusicfyPlayer']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['nuxtMusicfyPlayer']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module.js'
+export { type ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -1,16 +1 @@
-
-import type { ModuleOptions } from './module'
-
-
-declare module '@nuxt/schema' {
-  interface NuxtConfig { ['nuxtMusicfyPlayer']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['nuxtMusicfyPlayer']?: ModuleOptions }
-}
-
-declare module 'nuxt/schema' {
-  interface NuxtConfig { ['nuxtMusicfyPlayer']?: Partial<ModuleOptions> }
-  interface NuxtOptions { ['nuxtMusicfyPlayer']?: ModuleOptions }
-}
-
-
-export type { ModuleOptions, default } from './module'
+export { type ModuleOptions, default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-musicfyplayer",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "description": "Embed a simple and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and ColorThief.js",
   "keywords": [
     "nuxt",
@@ -8,7 +8,10 @@
     "music-player",
     "music"
   ],
-  "repository": "Yizack/nuxt-musicfyplayer",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yizack/nuxt-musicfyplayer.git"
+  },
   "homepage": "https://github.com/Yizack/nuxt-musicfyplayer",
   "author": {
     "name": "Yizack Rangel",
@@ -31,30 +34,32 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "dev": "npm run dev:prepare && nuxi dev playground",
+    "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "echo \"Error: no test specified\"",
+    "test:types": "vue-tsc --noEmit",
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.10.1",
+    "@nuxt/kit": "^3.13.0",
     "colorthief": "^2.4.0",
-    "mediaelement": "^7.0.3"
+    "mediaelement": "^7.0.5"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.0.8",
-    "@nuxt/eslint-config": "^0.2.0",
-    "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.10.1",
-    "@nuxt/test-utils": "^3.11.0",
-    "@types/node": "^20.11.17",
+    "@nuxt/devtools": "^1.4.1",
+    "@nuxt/eslint-config": "^0.5.3",
+    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/schema": "^3.13.0",
+    "@nuxt/test-utils": "^3.14.1",
+    "@types/node": "^22.5.1",
     "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "nuxt": "^3.10.1",
-    "vitest": "^1.2.2"
+    "eslint": "^9.9.1",
+    "nuxt": "^3.13.0",
+    "vitest": "^2.0.5",
+    "vue-tsc": "^2.1.2"
   },
   "changelog": {
     "repo": {
@@ -62,5 +67,6 @@
       "provider": "github",
       "domain": "github.com"
     }
-  }
-}
+  },
+  "packageManager": "pnpm@9.9.0"
+}

package/dist/runtime/utils/mediaelement.mjs

@@ -1,9 +0,0 @@
-import "mediaelement/build/mediaelement-and-player.js";
-export const mediaElementPlayer = (element, options) => {
-  const MediaElementPlayer = window.MediaElementPlayer;
-  if (!process.client)
-    throw new Error("MediaElementPlayer is not available on server side");
-  if (!MediaElementPlayer)
-    throw new Error("MediaElementPlayer is not available");
-  return new MediaElementPlayer(element, options);
-};