nuxt-musicfyplayer 1.0.0 → 2.0.0

package/README.md

@@ -1,16 +1,153 @@
+![musicfyplayer](https://github.com/Yizack/nuxt-musicfyplayer/assets/16264115/d1603014-8331-4327-9b65-4ff580c3624d)
+
 # nuxt-musicfyplayer
 
 [![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 and beautiful HTML music player from local or hosted audio on your website using MediaElement.js and ColorThief.js
+Embed a simple HTML music player from local or hosted audio on your Nuxt app using MediaElement.js and ColorThief.js
 
 - [✨ Release Notes](https://github.com/Yizack/nuxt-musicfyplayer/blob/main/CHANGELOG.md)
 - [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue)
 
+## Quick Setup
+
+1. Add `nuxt-musicfyplayer` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D nuxt-musicfyplayer
+
+# Using yarn
+yarn add --dev nuxt-musicfyplayer
+
+# Using npm
+npm install --save-dev nuxt-musicfyplayer
+```
+
+2. Add `nuxt-musicfyplayer` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    'nuxt-musicfyplayer'
+  ]
+})
+```
+
+That's it! You can now use `nuxt-musicfyplayer` in your Nuxt app ✨
+
+## Usage
+
+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                           |
+|-------------------------------------|---------------------------------------|
+| [`audio`](#audio-shared-properties) | The audio source properties           |
+| [`image`](#image-properties)        | The image source (preferably squared) |
+| [`color`](#color-properties)        | Color options                         |
+
+## Audio shared properties
+
+| Property   | Description                      | Default value |
+|------------|----------------------------------|---------------|
+| `provider` | Provider of the audio source.    | `local`       |
+| `type`     | Content-type fo the audio source | `audio/mpeg`  |
+| [`...`](#supported-audio-providers) | Selected audio provider properties ||
+
+### Supported audio providers
+
+| Provider                             | Value    |
+|--------------------------------------|----------|
+| [URL](#local-audio-properties)       | `local`  |
+| [Dropbox](#dropbox-audio-properties) | `dropbox`|
+
+### Local audio properties
+
+| Audio property | Description               | Required |
+|----------------|---------------------------|----------|
+| `src`          | Audio source link         | Yes      |
+
+### Dropbox audio properties
+
+| Audio property | Description               | Required |
+|----------------|---------------------------|----------|
+| `id`           | File identifier           | Yes      |
+| `rlkey`        | New file identifier param | No       |
+
+## Image properties
+
+| Property | Description            | Required |
+|----------|------------------------|----------|
+| `src`    | Image source link      | Yes      |
+| `alt`    | Image alternative text | No       |
+
+## Color properties
+
+| Property | Description                                                                                 | Default value         |
+|----------|---------------------------------------------------------------------------------------------|-----------------------|
+| `class`  | A custom class for your player's background color                                           | `musicfyplayer-color` |
+| `detect` | Detect the dominant color from the image source and use it as the player's background color | `false`               |
+
+## Example
+
+Use the emoji property to render an emoji by character.
+
+```html
+<script setup lang="ts">
+const config = defineMusicfyPlayer({
+  audio: {
+    provider: "dropbox",
+    id: "soep3xvq8aee4eh6hcj4r",
+    rlkey: "g7sqo9y5zl3f69oxftzo5auc5"
+  },
+  image: {
+    src: "https://dimatis.yizack.com/images/reminiscences.jpg",
+    alt: "Dimatis - Reminiscences"
+  },
+  color: {
+    detect: true
+  }
+})
+</script>
+
+<template>
+  <MusicfyPlayer :config="config" width="100%" />
+</template>
+```
+
+### More examples
+
+Example of use on a website: [Dimatis Website](https://dimatis.yizack.com)
+
+[![Live Demo](https://yizack.com/images/embeddable-music-player/embeddeds.jpg)](https://dimatis.yizack.com)
+
+[![Live Demo](https://yizack.com/images/embeddable-music-player/embeddeds2.jpg)](https://dimatis.yizack.com/music/fly-again)
+
+Check out the [🏀 Online playground](https://stackblitz.com/github/yizack/nuxt-musicfyplayer?file=playground%2Fapp.vue) for more examples.
+
+## Credits
+
+- Detect dominant color with [ColorThief](https://lokeshdhakar.com/projects/color-thief/)
+- 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)
+
 ## Development
 
 ```bash
@@ -38,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.json

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

package/dist/module.mjs

@@ -5,7 +5,7 @@ const module = defineNuxtModule({
     name: "nuxt-musicfyplayer",
     configKey: "nuxtMusicfyPlayer",
     compatibility: {
-      nuxt: "^3.0.0"
+      nuxt: ">=3.0.0"
     }
   },
   setup() {

package/dist/runtime/components/MusicfyPlayer.vue

@@ -1,21 +1,29 @@
 <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({
   config: {
     type: Object as () => MusicfyPlayerConfig,
-    required: true
-  }
+    required: true,
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  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 +48,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 || "100%"
-  };
   switch (provider) {
     default:
     case "local":
@@ -19,16 +15,13 @@ export const defineMusicfyPlayer = (config) => {
       audioSrc.value = srcDropbox(config.audio.id, config.audio.rlkey);
       break;
   }
-  if (!audioSrc.value) {
+  if (!audioSrc.value)
     throw new Error("Invalid audio source");
-  }
   return {
     imageSrc: config.image.src,
-    imageAlt: config.image.alt,
-    audioType: config.audio.type,
+    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,15 @@
-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' {
+  export 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
+  }
+}

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,10 @@
+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.0",
+  "version": "2.0.0",
   "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",
@@ -34,27 +34,29 @@
     "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.12.3",
     "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.3.9",
+    "@nuxt/eslint-config": "^0.3.13",
+    "@nuxt/module-builder": "^0.8.1",
+    "@nuxt/schema": "^3.12.3",
+    "@nuxt/test-utils": "^3.13.1",
+    "@types/node": "^20.14.10",
     "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "nuxt": "^3.10.1",
-    "vitest": "^1.2.2"
+    "eslint": "^9.6.0",
+    "nuxt": "^3.12.3",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.26"
   },
   "changelog": {
     "repo": {
@@ -62,5 +64,6 @@
       "provider": "github",
       "domain": "github.com"
     }
-  }
+  },
+  "packageManager": "pnpm@9.4.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);
-};