From 037b10fd0ba5494dd304a8999cebdc62663259e3 Mon Sep 17 00:00:00 2001 From: jberg Date: Tue, 19 Mar 2019 08:31:22 -0700 Subject: [PATCH] Webpack example with lazy loading butterchurn and presets --- examples/webpackLazyLoad/README.md | 17 ++++++++++++ examples/webpackLazyLoad/index.html | 13 +++++++++ examples/webpackLazyLoad/index.js | 38 +++++++++++++++++++++++++++ examples/webpackLazyLoad/package.json | 19 ++++++++++++++ 4 files changed, 87 insertions(+) create mode 100644 examples/webpackLazyLoad/README.md create mode 100755 examples/webpackLazyLoad/index.html create mode 100644 examples/webpackLazyLoad/index.js create mode 100644 examples/webpackLazyLoad/package.json diff --git a/examples/webpackLazyLoad/README.md b/examples/webpackLazyLoad/README.md new file mode 100644 index 00000000..3221085a --- /dev/null +++ b/examples/webpackLazyLoad/README.md @@ -0,0 +1,17 @@ +# Minimal Example + +## API is still being finalized and may change when released + +This example includes Webamp in a Webpack bundle. The audio file and skin are fetched from a free CDN at run time. Milkdrop and visualizer presets are lazy loaded after playing starts. + +**Note:** Currently Webamp is published to NPM as a single bundle which includes all of its dependencies. This means that no matter what you do, Webamp is going to bring along it's own React, Redux, JSZip, etc. If you have a use case where you would like Webamp to share some or all of these dependencies with your own application, please file an issue and I can look into it. + +To try it out: + +``` +$ git clone git@github.com:captbaritone/webamp.git +$ cd webamp/examples/webpack/ +$ npm install +$ npm run build +$ open index.html +``` diff --git a/examples/webpackLazyLoad/index.html b/examples/webpackLazyLoad/index.html new file mode 100755 index 00000000..12bacaea --- /dev/null +++ b/examples/webpackLazyLoad/index.html @@ -0,0 +1,13 @@ + + + + + + + + +
+ + + + diff --git a/examples/webpackLazyLoad/index.js b/examples/webpackLazyLoad/index.js new file mode 100644 index 00000000..74fea670 --- /dev/null +++ b/examples/webpackLazyLoad/index.js @@ -0,0 +1,38 @@ +import Webamp from "webamp"; // eslint-disable-line import/no-unresolved + +new Webamp({ + initialTracks: [ + { + metaData: { + artist: "DJ Mike Llama", + title: "Llama Whippin' Intro", + }, + url: + "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3", + duration: 5.322286, + }, + ], + __butterchurnOptions: { + importButterchurn: () => { + // Only load butterchurn when music starts playing to reduce initial page load + return import("butterchurn"); + }, + getPresets: async () => { + // Load presets from preset URL mapping on demand as they are used + const resp = await fetch( + "https://unpkg.com/butterchurn-presets-weekly@0.0.2/weeks/week1/presets.json" + ); + const namesToPresetUrls = await resp.json(); + return Object.keys(namesToPresetUrls).map(name => { + return { name, butterchurnPresetUrl: namesToPresetUrls[name] }; + }); + }, + butterchurnOpen: true, + }, + __initialWindowLayout: { + main: { position: { x: 0, y: 0 } }, + equalizer: { position: { x: 0, y: 116 } }, + playlist: { position: { x: 0, y: 232 }, size: [0, 4] }, + milkdrop: { position: { x: 275, y: 0 }, size: [7, 12] }, + }, +}).renderWhenReady(document.getElementById("app")); diff --git a/examples/webpackLazyLoad/package.json b/examples/webpackLazyLoad/package.json new file mode 100644 index 00000000..3e3dd792 --- /dev/null +++ b/examples/webpackLazyLoad/package.json @@ -0,0 +1,19 @@ +{ + "name": "webamp-webpack-example", + "version": "0.0.0", + "description": "An example of using Webamp within a Webpack bundle", + "main": "index.js", + "scripts": { + "build": "webpack index.js -o bundle.js" + }, + "author": "", + "license": "ISC", + "dependencies": { + "butterchurn": "^2.6.7", + "webamp": "1.3.1" + }, + "devDependencies": { + "webpack": "^4.29.6", + "webpack-cli": "^3.3.0" + } +}