c7a282c1fd
* Split demo site into its own package Move the demo site from packages/webamp/demo/ into packages/webamp-demo/ as a standalone workspace package. This cleanly separates the library (published to npm) from the demo site (deployed to webamp.org). Key changes: - Demo imports webamp source via relative paths (no aliases needed) - Demo has its own package.json with demo-specific deps - Simplified vite config (just nodePolyfills plugin) - Removed vite branching from rollupPlugins.mjs (library-only now) - Renamed build-library -> build in webamp package - Updated turbo.json, CI, netlify config, and code-size workflow - Removed demo-only deps from webamp package (sentry, butterchurn stays for the butterchurn bundle) - Zero bundle size change for the library Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix: add type-check dependency to webamp#build task The webamp-docs package needs type declarations from webamp to type-check. These are generated by tsc (type-check), which must run before the build task. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Add updated readme to webamp-demo package Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Document the live reloading dev flow in both readmes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Fix code-size CI: use deploy script that exists on both branches The compressed-size-action checks out master and runs the build script. Master doesn't have a root "build" script, so revert to using "deploy" which exists on both branches. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| css | ||
| docs | ||
| images | ||
| js | ||
| mp3 | ||
| skins | ||
| index.html | ||
| package.json | ||
| readme.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
Webamp.org
Note: This package is the source for the webamp.org demo site. It is not a good reference for how to use Webamp in your own project — it relies on private internal APIs and imports library source directly. For examples of how to use Webamp as a consumer, see the examples directory or the documentation site.
The demo site uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API
- Error reporting using Sentry
- Analytics using Google Analytics
- Updating document's title to reflect the currently playing track
- Media Session API integration
Additionally, it makes use of some private Webamp APIs to add the following functionality:
- Butterchurn integration to render MilkDrop visualizations. We intend to make this part of the public API soon.
- "Screenshot" mode
https://webamp.org/?screenshot=1which can be used together with Puppeteer to automate the generation of Winamp skin screenshots
Development
pnpm start
This starts a Vite dev server that imports the webamp library source directly via relative paths. Any edits to files in packages/webamp/js/ are immediately reflected in the browser without a rebuild step.
Production Builds
To do an optimized build of the demo site:
pnpm run build
To test the production build locally:
pnpm run serve
Deploying
Netlify watches GitHub for new versions of master. When a new version is seen, it is automatically built and pushed to the server. Additionally, Netlify will run a build on every pull request and include a link under the heading "Deploy preview ready!".
In short, deploying should be as simple as pushing a commit to master.
Advanced Usage
There are some "feature flags" which you can manipulate by passing a specially crafted URL hash. Simply supply a JSON blob after the # of the URL to change these settings:
skinUrl(string) Url of the default skin to use. Note, this file must be served with the correct Allows Origin header.audioUrl(string) Url of the default audio file to use. Note, this file must be served with the correct Allows Origin header.initialState(object) Override the initial Redux state. Values from this object will be recursively merged into the actual default state.
Note: These are intended mostly as development tools and are subject to change at any time.