nuxt-musicfyplayer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Yizack Rangel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# 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
+
+- [✨ 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)
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Generate type stubs
+npm run dev:prepare
+
+# Develop with the playground
+npm run dev
+
+# Build the playground
+npm run dev:build
+
+# Run ESLint
+npm run lint
+
+# Run Vitest
+npm run test
+npm run test:watch
+
+# Release new version
+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-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-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-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-href]: https://github.com/Yizack/nuxt-musicfyplayer/actions/workflows/tests.yml
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

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

package/dist/module.d.ts

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

package/dist/module.json

@@ -0,0 +1,8 @@
+{
+  "name": "nuxt-musicfyplayer",
+  "configKey": "nuxtMusicfyPlayer",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "1.0.0"
+}

package/dist/module.mjs

@@ -0,0 +1,22 @@
+import { defineNuxtModule, createResolver, addComponent, addImportsDir } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-musicfyplayer",
+    configKey: "nuxtMusicfyPlayer",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  setup() {
+    const { resolve } = createResolver(import.meta.url);
+    addComponent({
+      name: "MusicfyPlayer",
+      global: true,
+      filePath: resolve("./runtime/components/MusicfyPlayer.vue")
+    });
+    addImportsDir(resolve("./runtime/composables"));
+  }
+});
+
+export { module as default };

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

@@ -0,0 +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='18' height='18' fill='%23fff' viewBox='4 3.5 9 9'%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='18' height='18' fill='%23fff' viewBox='4 3.5 9 9'%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__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}

package/dist/runtime/components/MusicfyPlayer.vue

@@ -0,0 +1,73 @@
+<script setup lang='ts'>
+import { onMounted, ref, type Ref } from '#imports'
+import type { MusicfyPlayerConfig } from './../types/musicfyplayer'
+import ColorThief from 'colorthief'
+
+const props = defineProps({
+  config: {
+    type: Object as () => MusicfyPlayerConfig,
+    required: true
+  }
+})
+
+const audio = ref() as Ref<HTMLAudioElement>
+const size = ref({ width: props.config.sizeWidth, height: props.config.sizeHeight })
+const backgroundColor = ref<string | undefined>()
+
+const generateColor = async () => {
+  if (process.client && props.config.colorDetect) {
+    const img = new Image()
+    img.crossOrigin = 'Anonymous'
+    img.src = props.config.imageSrc
+
+    img.onload = () => {
+      const colorThief = new ColorThief()
+      const color = colorThief.getColor(img)
+      backgroundColor.value = color ? `rgb(${color[0]}, ${color[1]}, ${color[2]})` : undefined
+    }
+  }
+}
+
+generateColor()
+
+onMounted(async () => {
+  const { mediaElementPlayer } = await import('./../utils/mediaelement')
+  mediaElementPlayer(audio.value, {
+    iconSprite: '',
+    audioHeight: 40,
+    features: ['playpause', 'current', 'duration', 'progress', 'volume', 'tracks', 'fullscreen'],
+    alwaysShowControls: true,
+    timeAndDurationSeparator: '<span></span>',
+    iPadUseNativeControls: false,
+    iPhoneUseNativeControls: false,
+    AndroidUseNativeControls: false
+  })
+})
+</script>
+
+<template>
+  <div class="musicfyplayer" :class="{ [`${config.colorClass}`]: config.colorClass }" :style="{ ...size, backgroundColor }">
+    <div class="box">
+      <div class="controls">
+        <div class="lecteur">
+          <audio ref="audio" class="music fc-media">
+            <source :src="config.audioSrc" :type="config.audioType">
+          </audio>
+        </div>
+      </div>
+      <div class="cover">
+        <div class="box-1">
+          <div class="box-2">
+            <div class="box-3">
+              <img class="image" :src="config.imageSrc" :alt="config.imageAlt">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+@import "mediaelement/build/mediaelementplayer.min.css";@import "./../assets/css/musicfyplayer.css";
+</style>

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

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

package/dist/runtime/composables/musicfyplayer.mjs

@@ -0,0 +1,35 @@
+import { ref } from "#imports";
+const srcDropbox = (id, rlkey) => {
+  const dropboxBase = "https://www.dropbox.com";
+  return rlkey ? `${dropboxBase}/scl/fi/${id}/?rlkey=${rlkey}&dl=1` : `${dropboxBase}/s/${id}?dl=1`;
+};
+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":
+      audioSrc.value = config.audio.src;
+      break;
+    case "dropbox":
+      audioSrc.value = srcDropbox(config.audio.id, config.audio.rlkey);
+      break;
+  }
+  if (!audioSrc.value) {
+    throw new Error("Invalid audio source");
+  }
+  return {
+    imageSrc: config.image.src,
+    imageAlt: config.image.alt,
+    audioType: config.audio.type,
+    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

@@ -0,0 +1,7 @@
+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;
+    }
+}

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,38 @@
+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;
+}

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

@@ -0,0 +1,8 @@
+import 'mediaelement/build/mediaelement-and-player.js';
+import type { MediaElementPlayer, MediaElementPlayerOptions } from '../types/mediaelement';
+declare global {
+    interface Window {
+        MediaElementPlayer: MediaElementPlayer | undefined;
+    }
+}
+export declare const mediaElementPlayer: (element: HTMLAudioElement, options: MediaElementPlayerOptions) => void;

package/dist/runtime/utils/mediaelement.mjs

@@ -0,0 +1,9 @@
+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);
+};

package/dist/types.d.mts

@@ -0,0 +1,16 @@
+
+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'

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+
+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'

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "nuxt-musicfyplayer",
+  "version": "1.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",
+    "nuxt3",
+    "music-player",
+    "music"
+  ],
+  "repository": "Yizack/nuxt-musicfyplayer",
+  "homepage": "https://github.com/Yizack/nuxt-musicfyplayer",
+  "author": {
+    "name": "Yizack Rangel",
+    "email": "yizackr@gmail.com",
+    "url": "https://yizack.com/"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "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",
+    "lint": "eslint .",
+    "test": "echo \"Error: no test specified\"",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.10.1",
+    "colorthief": "^2.4.0",
+    "mediaelement": "^7.0.3"
+  },
+  "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",
+    "changelogen": "^0.5.5",
+    "eslint": "^8.56.0",
+    "nuxt": "^3.10.1",
+    "vitest": "^1.2.2"
+  },
+  "changelog": {
+    "repo": {
+      "repo": "Yizack/nuxt-musicfyplayer",
+      "provider": "github",
+      "domain": "github.com"
+    }
+  }
+}