diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5d6a8a2e45..c1d5fb5a76 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -23,7 +23,7 @@ jobs: run: pnpm install --frozen-lockfile - name: Build all packages run: | - npx turbo build build-library + npx turbo build env: NODE_ENV: production - name: Lint and type-check diff --git a/README.md b/README.md index 50aa0ede8c..75711bb926 100755 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ A reimplementation of Winamp in HTML5 and JavaScript with full skin support. As seen on [TechCrunch], [Motherboard], [Gizmodo], Hacker News ([1], [2], [3], [4]), and [elsewhere](./packages/webamp/docs/press.md). -[![Screenshot of Webamp](https://raw.githubusercontent.com/captbaritone/webamp/master/packages/webamp/demo/images/preview.png)](https://webamp.org) +[![Screenshot of Webamp](https://raw.githubusercontent.com/captbaritone/webamp/master/packages/webamp-demo/images/preview.png)](https://webamp.org) Check out this [Twitter thread](https://twitter.com/captbaritone/status/961274714013319168) for an illustrated list of features. Works in modern versions of Edge, Firefox, Safari and Chrome. IE is [not supported](http://caniuse.com/#feat=audio-api). @@ -19,7 +19,7 @@ Check out this [Twitter thread](https://twitter.com/captbaritone/status/96127471 Webamp uses a [monorepo](https://en.wikipedia.org/wiki/Monorepo) approach, so in addition to the Webamp NPM module, this repository contains code for a few closely related projects and some pieces of Webamp which are published as standalone modules: - [`packages/webamp`](https://github.com/captbaritone/webamp/tree/master/packages/webamp): The [Webamp NPM module](https://www.npmjs.com/package/webamp) -- [`packages/webamp/demo`](https://github.com/captbaritone/webamp/tree/master/packages/webamp/demo): The demo site which lives at [webamp.org](https://webamp.org) +- [`packages/webamp-demo`](https://github.com/captbaritone/webamp/tree/master/packages/webamp-demo): The demo site which lives at [webamp.org](https://webamp.org) - [`packages/webamp-docs`](https://github.com/captbaritone/webamp/tree/master/packages/webamp-docs): The documentation site for Webamp the NPM library which lives at [docs.webamp.org](https://docs.webamp.org) - [`packages/ani-cursor`](https://github.com/captbaritone/webamp/tree/master/packages/ani-cursor): An NPM module for rendering animiated `.ani` cursors as CSS animations - [`packages/skin-database`](https://github.com/captbaritone/webamp/tree/master/packages/skin-database): The server component of https://skins.webamp.org which also runs our [Twitter bot](https://twitter.com/winampskins), and a Discord bot for our community chat diff --git a/netlify.toml b/netlify.toml index 0b597cc1ef..19a3b95ea4 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,6 +1,6 @@ [build] command = "pnpm run deploy" -publish = "packages/webamp/dist/demo-site/" +publish = "packages/webamp-demo/dist/" # A short URL for listeners of https://changelog.com/podcast/291 [[redirects]] diff --git a/package.json b/package.json index ce42d46770..31b4dd34bd 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "test:unit": "jest", "lint": "npx turbo lint", "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter skin-database type-check && pnpm --filter webamp-docs type-check && pnpm --filter winamp-eqf type-check", - "deploy": "npx turbo webamp#build webamp-modern#build --concurrency 1 && mv packages/webamp-modern/build packages/webamp/dist/demo-site/modern", + "deploy": "npx turbo build webamp-modern#build --concurrency 1 && mv packages/webamp-modern/build packages/webamp-demo/dist/modern", "format": "prettier --write '**/*.{js,ts,tsx}'" }, "devDependencies": { diff --git a/packages/webamp/demo/css/page.css b/packages/webamp-demo/css/page.css similarity index 100% rename from packages/webamp/demo/css/page.css rename to packages/webamp-demo/css/page.css diff --git a/packages/webamp/docs/music-credits.md b/packages/webamp-demo/docs/music-credits.md similarity index 100% rename from packages/webamp/docs/music-credits.md rename to packages/webamp-demo/docs/music-credits.md diff --git a/packages/webamp/demo/images/favicon.ico b/packages/webamp-demo/images/favicon.ico similarity index 100% rename from packages/webamp/demo/images/favicon.ico rename to packages/webamp-demo/images/favicon.ico diff --git a/packages/webamp/demo/images/icons/internet-folder-32x32.png b/packages/webamp-demo/images/icons/internet-folder-32x32.png similarity index 100% rename from packages/webamp/demo/images/icons/internet-folder-32x32.png rename to packages/webamp-demo/images/icons/internet-folder-32x32.png diff --git a/packages/webamp/demo/images/icons/paint-file-32x32.png b/packages/webamp-demo/images/icons/paint-file-32x32.png similarity index 100% rename from packages/webamp/demo/images/icons/paint-file-32x32.png rename to packages/webamp-demo/images/icons/paint-file-32x32.png diff --git a/packages/webamp/demo/images/icons/soundcloud-32x32.png b/packages/webamp-demo/images/icons/soundcloud-32x32.png similarity index 100% rename from packages/webamp/demo/images/icons/soundcloud-32x32.png rename to packages/webamp-demo/images/icons/soundcloud-32x32.png diff --git a/packages/webamp/demo/images/icons/winamp2-32x32.png b/packages/webamp-demo/images/icons/winamp2-32x32.png similarity index 100% rename from packages/webamp/demo/images/icons/winamp2-32x32.png rename to packages/webamp-demo/images/icons/winamp2-32x32.png diff --git a/packages/webamp/demo/images/manifest/icon-144x144.png b/packages/webamp-demo/images/manifest/icon-144x144.png similarity index 100% rename from packages/webamp/demo/images/manifest/icon-144x144.png rename to packages/webamp-demo/images/manifest/icon-144x144.png diff --git a/packages/webamp/demo/images/manifest/icon-192x192.png b/packages/webamp-demo/images/manifest/icon-192x192.png similarity index 100% rename from packages/webamp/demo/images/manifest/icon-192x192.png rename to packages/webamp-demo/images/manifest/icon-192x192.png diff --git a/packages/webamp/demo/images/manifest/icon-48x48.png b/packages/webamp-demo/images/manifest/icon-48x48.png similarity index 100% rename from packages/webamp/demo/images/manifest/icon-48x48.png rename to packages/webamp-demo/images/manifest/icon-48x48.png diff --git a/packages/webamp/demo/images/manifest/icon-512x512.png b/packages/webamp-demo/images/manifest/icon-512x512.png similarity index 100% rename from packages/webamp/demo/images/manifest/icon-512x512.png rename to packages/webamp-demo/images/manifest/icon-512x512.png diff --git a/packages/webamp/demo/images/manifest/icon-72x72.png b/packages/webamp-demo/images/manifest/icon-72x72.png similarity index 100% rename from packages/webamp/demo/images/manifest/icon-72x72.png rename to packages/webamp-demo/images/manifest/icon-72x72.png diff --git a/packages/webamp/demo/images/manifest/icon-96x96.png b/packages/webamp-demo/images/manifest/icon-96x96.png similarity index 100% rename from packages/webamp/demo/images/manifest/icon-96x96.png rename to packages/webamp-demo/images/manifest/icon-96x96.png diff --git a/packages/webamp/demo/images/manifest/icon.svg b/packages/webamp-demo/images/manifest/icon.svg similarity index 100% rename from packages/webamp/demo/images/manifest/icon.svg rename to packages/webamp-demo/images/manifest/icon.svg diff --git a/packages/webamp/demo/images/preview.png b/packages/webamp-demo/images/preview.png similarity index 100% rename from packages/webamp/demo/images/preview.png rename to packages/webamp-demo/images/preview.png diff --git a/packages/webamp/demo/images/share/butterchurn-bg.png b/packages/webamp-demo/images/share/butterchurn-bg.png similarity index 100% rename from packages/webamp/demo/images/share/butterchurn-bg.png rename to packages/webamp-demo/images/share/butterchurn-bg.png diff --git a/packages/webamp/demo/images/share/eye.svg b/packages/webamp-demo/images/share/eye.svg similarity index 100% rename from packages/webamp/demo/images/share/eye.svg rename to packages/webamp-demo/images/share/eye.svg diff --git a/packages/webamp/demo/images/share/github.svg b/packages/webamp-demo/images/share/github.svg similarity index 100% rename from packages/webamp/demo/images/share/github.svg rename to packages/webamp-demo/images/share/github.svg diff --git a/packages/webamp/demo/images/share/music.svg b/packages/webamp-demo/images/share/music.svg similarity index 100% rename from packages/webamp/demo/images/share/music.svg rename to packages/webamp-demo/images/share/music.svg diff --git a/packages/webamp/demo/index.html b/packages/webamp-demo/index.html similarity index 99% rename from packages/webamp/demo/index.html rename to packages/webamp-demo/index.html index 39a24ab393..c6bfc2eaa7 100755 --- a/packages/webamp/demo/index.html +++ b/packages/webamp-demo/index.html @@ -63,7 +63,7 @@ diff --git a/packages/webamp/demo/js/DemoDesktop.tsx b/packages/webamp-demo/js/DemoDesktop.tsx similarity index 96% rename from packages/webamp/demo/js/DemoDesktop.tsx rename to packages/webamp-demo/js/DemoDesktop.tsx index 0ae42ba3c3..5438f808be 100644 --- a/packages/webamp/demo/js/DemoDesktop.tsx +++ b/packages/webamp-demo/js/DemoDesktop.tsx @@ -1,10 +1,10 @@ -import WebampLazy from "../../js/webampLazy"; +import WebampLazy from "../../webamp/js/webampLazy"; import { Suspense } from "react"; import WebampIcon from "./WebampIcon"; // import Mp3Icon from "./Mp3Icon"; import SkinIcon from "./SkinIcon"; import { /* defaultInitialTracks, */ SHOW_DESKTOP_ICONS } from "./config"; -import { useWindowSize } from "../../js/hooks"; +import { useWindowSize } from "../../webamp/js/hooks"; import availableSkins from "./availableSkins"; import DesktopLinkIcon from "./DesktopLinkIcon"; import museumIcon from "../images/icons/internet-folder-32x32.png"; diff --git a/packages/webamp/demo/js/DesktopIcon.tsx b/packages/webamp-demo/js/DesktopIcon.tsx similarity index 100% rename from packages/webamp/demo/js/DesktopIcon.tsx rename to packages/webamp-demo/js/DesktopIcon.tsx diff --git a/packages/webamp/demo/js/DesktopLinkIcon.tsx b/packages/webamp-demo/js/DesktopLinkIcon.tsx similarity index 100% rename from packages/webamp/demo/js/DesktopLinkIcon.tsx rename to packages/webamp-demo/js/DesktopLinkIcon.tsx diff --git a/packages/webamp/demo/js/IconImage.tsx b/packages/webamp-demo/js/IconImage.tsx similarity index 100% rename from packages/webamp/demo/js/IconImage.tsx rename to packages/webamp-demo/js/IconImage.tsx diff --git a/packages/webamp/demo/js/MilkIcon.tsx b/packages/webamp-demo/js/MilkIcon.tsx similarity index 87% rename from packages/webamp/demo/js/MilkIcon.tsx rename to packages/webamp-demo/js/MilkIcon.tsx index 34183e5a72..0d057338c0 100644 --- a/packages/webamp/demo/js/MilkIcon.tsx +++ b/packages/webamp-demo/js/MilkIcon.tsx @@ -1,5 +1,5 @@ -import type WebampLazy from "../../js/webampLazy"; -import { loadPresets } from "../../js/actionCreators/milkdrop"; +import type WebampLazy from "../../webamp/js/webampLazy"; +import { loadPresets } from "../../webamp/js/actionCreators/milkdrop"; import { useCallback } from "react"; // @ts-ignore import iconLarge from "../images/manifest/icon-96x96.png"; diff --git a/packages/webamp/demo/js/Mp3Icon.tsx b/packages/webamp-demo/js/Mp3Icon.tsx similarity index 90% rename from packages/webamp/demo/js/Mp3Icon.tsx rename to packages/webamp-demo/js/Mp3Icon.tsx index a76caf5abc..9e6b5e1487 100644 --- a/packages/webamp/demo/js/Mp3Icon.tsx +++ b/packages/webamp-demo/js/Mp3Icon.tsx @@ -1,5 +1,5 @@ -import WebampLazy from "../../js/webampLazy"; -import { URLTrack } from "../../js/types"; +import WebampLazy from "../../webamp/js/webampLazy"; +import { URLTrack } from "../../webamp/js/types"; import { useCallback } from "react"; // @ts-ignore import iconLarge from "../images/manifest/icon-96x96.png"; diff --git a/packages/webamp/demo/js/SkinIcon.tsx b/packages/webamp-demo/js/SkinIcon.tsx similarity index 91% rename from packages/webamp/demo/js/SkinIcon.tsx rename to packages/webamp-demo/js/SkinIcon.tsx index 25f5e8657e..edf947ee78 100644 --- a/packages/webamp/demo/js/SkinIcon.tsx +++ b/packages/webamp-demo/js/SkinIcon.tsx @@ -1,4 +1,4 @@ -import WebampLazy from "../../js/webampLazy"; +import WebampLazy from "../../webamp/js/webampLazy"; // @ts-ignore import iconSmall from "../images/icons/paint-file-32x32.png"; import DesktopIcon from "./DesktopIcon"; diff --git a/packages/webamp/demo/js/SoundCloud.ts b/packages/webamp-demo/js/SoundCloud.ts similarity index 96% rename from packages/webamp/demo/js/SoundCloud.ts rename to packages/webamp-demo/js/SoundCloud.ts index a375e0537e..3959d5f5e6 100644 --- a/packages/webamp/demo/js/SoundCloud.ts +++ b/packages/webamp-demo/js/SoundCloud.ts @@ -1,4 +1,4 @@ -import { Track } from "../../js/types"; +import { Track } from "../../webamp/js/types"; const CLIENT_ID = "T9EbIJ75SnsJK3iX8lOZaDlGIYgQB32G"; diff --git a/packages/webamp/demo/js/SuspenseImage.tsx b/packages/webamp-demo/js/SuspenseImage.tsx similarity index 100% rename from packages/webamp/demo/js/SuspenseImage.tsx rename to packages/webamp-demo/js/SuspenseImage.tsx diff --git a/packages/webamp/demo/js/WebampIcon.tsx b/packages/webamp-demo/js/WebampIcon.tsx similarity index 93% rename from packages/webamp/demo/js/WebampIcon.tsx rename to packages/webamp-demo/js/WebampIcon.tsx index 621d6d59af..b79103a463 100644 --- a/packages/webamp/demo/js/WebampIcon.tsx +++ b/packages/webamp-demo/js/WebampIcon.tsx @@ -1,4 +1,4 @@ -import WebampLazy from "../../js/webampLazy"; +import WebampLazy from "../../webamp/js/webampLazy"; import { useEffect, useState } from "react"; // @ts-ignore import iconSmall from "../images/icons/winamp2-32x32.png"; diff --git a/packages/webamp/demo/js/availableSkins.ts b/packages/webamp-demo/js/availableSkins.ts similarity index 100% rename from packages/webamp/demo/js/availableSkins.ts rename to packages/webamp-demo/js/availableSkins.ts diff --git a/packages/webamp/demo/js/butterchurnOptions.ts b/packages/webamp-demo/js/butterchurnOptions.ts similarity index 98% rename from packages/webamp/demo/js/butterchurnOptions.ts rename to packages/webamp-demo/js/butterchurnOptions.ts index 4747375903..c35bb6e795 100644 --- a/packages/webamp/demo/js/butterchurnOptions.ts +++ b/packages/webamp-demo/js/butterchurnOptions.ts @@ -1,4 +1,4 @@ -import { ButterchurnOptions } from "../../js/types"; +import { ButterchurnOptions } from "../../webamp/js/types"; const KNOWN_PRESET_URLS_REGEXES = [ /^https:\/\/unpkg\.com\/butterchurn-presets\/.*\.json$/, diff --git a/packages/webamp/demo/js/choreography.ts b/packages/webamp-demo/js/choreography.ts similarity index 97% rename from packages/webamp/demo/js/choreography.ts rename to packages/webamp-demo/js/choreography.ts index 0009806d0f..acc360ab89 100644 --- a/packages/webamp/demo/js/choreography.ts +++ b/packages/webamp-demo/js/choreography.ts @@ -1,5 +1,5 @@ -import Webamp from "../../js/webampLazy"; -import { Slider } from "../../js/types"; +import Webamp from "../../webamp/js/webampLazy"; +import { Slider } from "../../webamp/js/types"; import { batch } from "react-redux"; const BANDS: Slider[] = [ diff --git a/packages/webamp/demo/js/config.ts b/packages/webamp-demo/js/config.ts similarity index 98% rename from packages/webamp/demo/js/config.ts rename to packages/webamp-demo/js/config.ts index f8e45c61ae..a2934f4410 100644 --- a/packages/webamp/demo/js/config.ts +++ b/packages/webamp-demo/js/config.ts @@ -1,4 +1,4 @@ -import { Track, URLTrack, PartialState } from "../../js/types"; +import { Track, URLTrack, PartialState } from "../../webamp/js/types"; // @ts-ignore import llamaAudio from "../mp3/llama-2.91.mp3"; diff --git a/packages/webamp/demo/js/delete-service-worker.js b/packages/webamp-demo/js/delete-service-worker.js similarity index 100% rename from packages/webamp/demo/js/delete-service-worker.js rename to packages/webamp-demo/js/delete-service-worker.js diff --git a/packages/webamp/demo/js/dropboxFilePicker.ts b/packages/webamp-demo/js/dropboxFilePicker.ts similarity index 95% rename from packages/webamp/demo/js/dropboxFilePicker.ts rename to packages/webamp-demo/js/dropboxFilePicker.ts index f60fcf5651..0e5f8607b5 100644 --- a/packages/webamp/demo/js/dropboxFilePicker.ts +++ b/packages/webamp-demo/js/dropboxFilePicker.ts @@ -1,4 +1,4 @@ -import { FilePicker } from "../../js/types"; +import { FilePicker } from "../../webamp/js/types"; interface DropboxFile { link: string; diff --git a/packages/webamp/demo/js/eventLogger.ts b/packages/webamp-demo/js/eventLogger.ts similarity index 98% rename from packages/webamp/demo/js/eventLogger.ts rename to packages/webamp-demo/js/eventLogger.ts index cc590e7a5e..3bb2d422c6 100644 --- a/packages/webamp/demo/js/eventLogger.ts +++ b/packages/webamp-demo/js/eventLogger.ts @@ -1,5 +1,5 @@ import { log, GoogleAnalyticsEvent } from "./logger"; -import { Action } from "../../js/types"; +import { Action } from "../../webamp/js/types"; function logEventFromAction(action: Action): GoogleAnalyticsEvent | null { switch (action.type) { diff --git a/packages/webamp/demo/js/index.tsx b/packages/webamp-demo/js/index.tsx similarity index 98% rename from packages/webamp/demo/js/index.tsx rename to packages/webamp-demo/js/index.tsx index 95f4b97eea..234183aa90 100644 --- a/packages/webamp/demo/js/index.tsx +++ b/packages/webamp-demo/js/index.tsx @@ -6,7 +6,7 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min"; import { getWebampConfig } from "./webampConfig"; import * as SoundCloud from "./SoundCloud"; -import WebampLazy from "../../js/webampLazy"; +import WebampLazy from "../../webamp/js/webampLazy"; import { disableMarquee, skinUrl as configSkinUrl } from "./config"; import DemoDesktop from "./DemoDesktop"; diff --git a/packages/webamp/demo/js/logger.ts b/packages/webamp-demo/js/logger.ts similarity index 100% rename from packages/webamp/demo/js/logger.ts rename to packages/webamp-demo/js/logger.ts diff --git a/packages/webamp/demo/js/screenshotInitialState.ts b/packages/webamp-demo/js/screenshotInitialState.ts similarity index 95% rename from packages/webamp/demo/js/screenshotInitialState.ts rename to packages/webamp-demo/js/screenshotInitialState.ts index a9f106647b..8c64b04e48 100644 --- a/packages/webamp/demo/js/screenshotInitialState.ts +++ b/packages/webamp-demo/js/screenshotInitialState.ts @@ -1,4 +1,4 @@ -import { PartialState } from "../../js/types"; +import { PartialState } from "../../webamp/js/types"; const defaultTracksState = { "0": { diff --git a/packages/webamp/demo/js/webampConfig.ts b/packages/webamp-demo/js/webampConfig.ts similarity index 95% rename from packages/webamp/demo/js/webampConfig.ts rename to packages/webamp-demo/js/webampConfig.ts index 64a15cace7..688e5cbf0e 100644 --- a/packages/webamp/demo/js/webampConfig.ts +++ b/packages/webamp-demo/js/webampConfig.ts @@ -6,7 +6,7 @@ import isButterchurnSupported from "butterchurn/dist/isSupported.min"; import { loggerMiddleware } from "./eventLogger"; import * as SoundCloud from "./SoundCloud"; -import { Action, Options, AppState, WindowLayout } from "../../js/types"; +import { Action, Options, AppState, WindowLayout } from "../../webamp/js/types"; import { getButterchurnOptions } from "./butterchurnOptions"; import dropboxFilePicker from "./dropboxFilePicker"; @@ -14,7 +14,7 @@ import availableSkins from "./availableSkins"; import { initialTracks, initialState } from "./config"; import screenshotInitialState from "./screenshotInitialState"; -import { InjectableDependencies, PrivateOptions } from "../../js/webampLazy"; +import { InjectableDependencies, PrivateOptions } from "../../webamp/js/webampLazy"; const NOISY_ACTION_TYPES = new Set([ "STEP_MARQUEE", diff --git a/packages/webamp/demo/mp3/llama-2.91.mp3 b/packages/webamp-demo/mp3/llama-2.91.mp3 similarity index 100% rename from packages/webamp/demo/mp3/llama-2.91.mp3 rename to packages/webamp-demo/mp3/llama-2.91.mp3 diff --git a/packages/webamp-demo/package.json b/packages/webamp-demo/package.json new file mode 100644 index 0000000000..778d9a1c62 --- /dev/null +++ b/packages/webamp-demo/package.json @@ -0,0 +1,39 @@ +{ + "name": "webamp-demo", + "version": "0.0.0", + "private": true, + "scripts": { + "start": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "devDependencies": { + "@sentry/browser": "5.9.1", + "ani-cursor": "workspace:*", + "butterchurn": "3.0.0-beta.5", + "butterchurn-presets": "3.0.0-beta.4", + "classnames": "^2.2.5", + "invariant": "^2.2.3", + "jszip": "^3.10.1", + "lodash": "^4.17.21", + "milkdrop-preset-converter-aws": "^0.1.6", + "music-metadata": "^11.6.0", + "music-metadata-browser": "^0.6.1", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-redux": "^8.0.5", + "redux": "^5.0.0-alpha.0", + "redux-sentry-middleware": "^0.1.3", + "redux-thunk": "^3.1.0", + "reselect": "^3.0.1", + "strtok3": "^10.3.1", + "tinyqueue": "^3.0.0", + "@types/react": "^18.0.26", + "@types/react-dom": "^18.0.10", + "rollup-plugin-polyfill-node": "^0.13.0", + "typescript": "^5.6.2", + "vite": "^5.2.12", + "webamp": "workspace:*", + "winamp-eqf": "workspace:*" + } +} diff --git a/packages/webamp/demo/readme.md b/packages/webamp-demo/readme.md similarity index 50% rename from packages/webamp/demo/readme.md rename to packages/webamp-demo/readme.md index 968c65f84a..2610abeaf0 100644 --- a/packages/webamp/demo/readme.md +++ b/packages/webamp-demo/readme.md @@ -1,6 +1,8 @@ # Webamp.org -The Webamp demo site, [webamp.org](https://webamp.org), uses the same interface as the NPM module but adds the following functionality by utilizing Webamp's public API +> **Note:** This package is the source for the [webamp.org](https://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](../../examples/) directory or the [documentation site](https://docs.webamp.org). + +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](https://sentry.io) - Analytics using [Google Analytics](https://analytics.google.com/analytics/web/) @@ -9,35 +11,37 @@ The Webamp demo site, [webamp.org](https://webamp.org), uses the same interface Additionally, it makes use of some private Webamp APIs to add the following functionality: -- [Butterchun](https://github.com/jberg/butterchurn) integration to render [MilkDrop](https://en.wikipedia.org/wiki/MilkDrop) visualizations. We intend to make this part of the public API soon. +- [Butterchurn](https://github.com/jberg/butterchurn) integration to render [MilkDrop](https://en.wikipedia.org/wiki/MilkDrop) visualizations. We intend to make this part of the public API soon. - "Screenshot" mode `https://webamp.org/?screenshot=1` which can be used together with [Puppeteer](https://github.com/GoogleChrome/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, you can run: +To do an optimized build of the demo site: pnpm run build -If you wish to test this build locally, run: +To test the production build locally: pnpm run serve -Then open the local ip/port that is output to the console in your browser. - ## Deploying -[Netlify](https://www.netlify.com/) watches GitHub for new versions of master. When a new version is seen, it is automatically built using `npm run build` 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!". This enables easy high level testing of pull requests. +[Netlify](https://www.netlify.com/) 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. -Additionally, if you want to fork the project, deploying should be as simple as setting up a free Netlify account - ### 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](packages/webamp/js/reducers/index.ts). Values from this object will be recursively merged into the actual default state. +- `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. \ No newline at end of file +**Note:** These are intended mostly as development tools and are subject to change at any time. diff --git a/packages/webamp/demo/skins/.gitignore b/packages/webamp-demo/skins/.gitignore similarity index 100% rename from packages/webamp/demo/skins/.gitignore rename to packages/webamp-demo/skins/.gitignore diff --git a/packages/webamp/demo/skins/AmigaPPC-dark.wsz b/packages/webamp-demo/skins/AmigaPPC-dark.wsz similarity index 100% rename from packages/webamp/demo/skins/AmigaPPC-dark.wsz rename to packages/webamp-demo/skins/AmigaPPC-dark.wsz diff --git a/packages/webamp/demo/skins/Green-Dimension-V2.wsz b/packages/webamp-demo/skins/Green-Dimension-V2.wsz similarity index 100% rename from packages/webamp/demo/skins/Green-Dimension-V2.wsz rename to packages/webamp-demo/skins/Green-Dimension-V2.wsz diff --git a/packages/webamp/demo/skins/Internet-Archive.wsz b/packages/webamp-demo/skins/Internet-Archive.wsz similarity index 100% rename from packages/webamp/demo/skins/Internet-Archive.wsz rename to packages/webamp-demo/skins/Internet-Archive.wsz diff --git a/packages/webamp/demo/skins/MacOSXAqua1-5.wsz b/packages/webamp-demo/skins/MacOSXAqua1-5.wsz similarity index 100% rename from packages/webamp/demo/skins/MacOSXAqua1-5.wsz rename to packages/webamp-demo/skins/MacOSXAqua1-5.wsz diff --git a/packages/webamp/demo/skins/My_Funny_Valentine.wsz b/packages/webamp-demo/skins/My_Funny_Valentine.wsz similarity index 100% rename from packages/webamp/demo/skins/My_Funny_Valentine.wsz rename to packages/webamp-demo/skins/My_Funny_Valentine.wsz diff --git a/packages/webamp/demo/skins/Skinner_Atlas.wsz b/packages/webamp-demo/skins/Skinner_Atlas.wsz similarity index 100% rename from packages/webamp/demo/skins/Skinner_Atlas.wsz rename to packages/webamp-demo/skins/Skinner_Atlas.wsz diff --git a/packages/webamp/demo/skins/Sonic_Attitude.wsz b/packages/webamp-demo/skins/Sonic_Attitude.wsz similarity index 100% rename from packages/webamp/demo/skins/Sonic_Attitude.wsz rename to packages/webamp-demo/skins/Sonic_Attitude.wsz diff --git a/packages/webamp/demo/skins/TopazAmp1-2.wsz b/packages/webamp-demo/skins/TopazAmp1-2.wsz similarity index 100% rename from packages/webamp/demo/skins/TopazAmp1-2.wsz rename to packages/webamp-demo/skins/TopazAmp1-2.wsz diff --git a/packages/webamp/demo/skins/Vizor1-01.wsz b/packages/webamp-demo/skins/Vizor1-01.wsz similarity index 100% rename from packages/webamp/demo/skins/Vizor1-01.wsz rename to packages/webamp-demo/skins/Vizor1-01.wsz diff --git a/packages/webamp/demo/skins/XMMS-Turquoise.wsz b/packages/webamp-demo/skins/XMMS-Turquoise.wsz similarity index 100% rename from packages/webamp/demo/skins/XMMS-Turquoise.wsz rename to packages/webamp-demo/skins/XMMS-Turquoise.wsz diff --git a/packages/webamp/demo/skins/ZaxonRemake1-0.wsz b/packages/webamp-demo/skins/ZaxonRemake1-0.wsz similarity index 100% rename from packages/webamp/demo/skins/ZaxonRemake1-0.wsz rename to packages/webamp-demo/skins/ZaxonRemake1-0.wsz diff --git a/packages/webamp/demo/skins/base-2.91.wsz b/packages/webamp-demo/skins/base-2.91.wsz similarity index 100% rename from packages/webamp/demo/skins/base-2.91.wsz rename to packages/webamp-demo/skins/base-2.91.wsz diff --git a/packages/webamp/demo/skins/rei_1.wsz b/packages/webamp-demo/skins/rei_1.wsz similarity index 100% rename from packages/webamp/demo/skins/rei_1.wsz rename to packages/webamp-demo/skins/rei_1.wsz diff --git a/packages/webamp-demo/tsconfig.json b/packages/webamp-demo/tsconfig.json new file mode 100644 index 0000000000..8a806eff27 --- /dev/null +++ b/packages/webamp-demo/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "moduleResolution": "node", + "target": "esnext", + "module": "esnext", + "allowJs": true, + "skipLibCheck": true, + "allowSyntheticDefaultImports": true, + "resolveJsonModule": true, + "strict": true, + "jsx": "react-jsx", + "noEmit": true + }, + "include": ["**/*.ts", "**/*.tsx"], + "exclude": ["node_modules", "dist"] +} diff --git a/packages/webamp-demo/vite.config.ts b/packages/webamp-demo/vite.config.ts new file mode 100644 index 0000000000..5e42bed5e4 --- /dev/null +++ b/packages/webamp-demo/vite.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from "vite"; +import nodePolyfills from "rollup-plugin-polyfill-node"; + +export default defineConfig({ + build: { + outDir: "dist", + chunkSizeWarningLimit: 2500, + }, + assetsInclude: ["**/*.wsz", "**/*.mp3"], + plugins: [ + // Needed for music-metadata-browser which uses polyfillable node APIs + // @ts-expect-error Rollup plugin type mismatch with Vite's stricter types + nodePolyfills(), + ], +}); diff --git a/packages/webamp/README.md b/packages/webamp/README.md index ef49663725..d26614336d 100644 --- a/packages/webamp/README.md +++ b/packages/webamp/README.md @@ -2,26 +2,22 @@ ## Development -I do most development by starting the demo site in dev mode and iterating that way. The following commands will install all dependencies, run an initial development build and then start a local server. Every time you save a file, it will rebuild the bundle and automatically refresh the page. +The demo site in `packages/webamp-demo` imports the library source directly, so you can iterate on the library with live reloading: - # First clone the repo, then... - cd webamp - # Change into the NPM module's sub directory - cd packages/webamp - # __Note:__ Please use pnpm over npm/yarn, since pnpm will respect our `pnpm-lock.yaml` file - pnpm install + cd packages/webamp-demo pnpm start -`http://localhost:8080/` should automatically open in your browser. +Any edits to library source files in `packages/webamp/js/` are immediately reflected in the browser — no rebuild needed. - # Run tests and lint checks + # Run tests + cd packages/webamp pnpm test ## Building -The NPM module is built separately from the demo site. To build it run: +To build the library for publishing: - pnpm run build-library + pnpm run build This will write files to `./built`. diff --git a/packages/webamp/package.json b/packages/webamp/package.json index e7201a2193..ca4e19591b 100644 --- a/packages/webamp/package.json +++ b/packages/webamp/package.json @@ -12,11 +12,6 @@ "types": "built/types/js/webamp.d.ts", "browser": "built/webamp.bundle.min.mjs", "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead", - "targets": { - "demo-site": { - "source": "demo/index.html" - } - }, "exports": { ".": { "require": "./built/webamp.bundle.min.js", @@ -40,11 +35,8 @@ "lint-fix": "eslint . --ext ts,tsx,js --fix", "lint": "eslint . --ext ts,tsx,js", "type-check": "tsc", - "build": "vite build --emptyOutDir", - "build-library": "node ./scripts/rollup.mjs", - "prepublishOnly": "npm run build-library && npm run type-check", - "serve": "vite preview", - "start": "vite", + "build": "node ./scripts/rollup.mjs", + "prepublishOnly": "npm run build && npm run type-check", "test": "vitest run", "tdd": "vitest", "format": "prettier --write \"**/*.{js,ts,tsx,d.ts,css}\"", @@ -71,7 +63,6 @@ }, "homepage": "https://github.com/captbaritone/webamp/", "devDependencies": { - "@sentry/browser": "5.9.1", "ani-cursor": "workspace:*", "butterchurn": "3.0.0-beta.5", "butterchurn-presets": "3.0.0-beta.4", @@ -79,14 +70,12 @@ "invariant": "^2.2.3", "jszip": "^3.10.1", "lodash": "^4.17.21", - "milkdrop-preset-converter-aws": "^0.1.6", "music-metadata": "^11.6.0", "music-metadata-browser": "^0.6.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-redux": "^8.0.5", "redux": "^5.0.0-alpha.0", - "redux-sentry-middleware": "^0.1.3", "redux-thunk": "^3.1.0", "reselect": "^3.0.1", "strtok3": "^10.3.1", @@ -119,8 +108,7 @@ "rollup-plugin-polyfill-node": "^0.13.0", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-visualizer": "^5.12.0", - "typescript": "^5.6.2", - "vite": "^5.2.12" + "typescript": "^5.6.2" }, "prettier": { "trailingComma": "es5" diff --git a/packages/webamp/scripts/rollupPlugins.mjs b/packages/webamp/scripts/rollupPlugins.mjs index 06cad0b2f7..f2eba753fd 100644 --- a/packages/webamp/scripts/rollupPlugins.mjs +++ b/packages/webamp/scripts/rollupPlugins.mjs @@ -11,14 +11,14 @@ import atImport from "postcss-import"; import nodePolyfills from "rollup-plugin-polyfill-node"; import path from "node:path"; -export function getPlugins({ minify, outputFile, vite }) { +export function getPlugins({ minify, outputFile }) { const plugins = [ replace({ // Ensure we don't use the dev build of React values: { "process.env.NODE_ENV": JSON.stringify("production") }, preventAssignment: true, }), - vite ? null : stripInlineSuffix(), + stripInlineSuffix(), // https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency // TODO: We could offer a version which does not inline React/React-DOM nodeResolve({ @@ -30,27 +30,19 @@ export function getPlugins({ minify, outputFile, vite }) { // Needed for music-metadata-browser in the Webamp bundle which depends upon // being able to use some polyfillable node APIs nodePolyfills(), - // Vite handles TypeScript natively, so only use the plugin for Rollup builds - vite - ? null - : typescript({ - compilerOptions: { - jsx: "react-jsx", - module: "esnext", - declarationDir: "dist/demo-site/declarations", - outDir: "./tsBuilt", - }, - }), - // Enable importing .json files. But Vite already enables this, so enabling it there - // causes it to try to parse the js version as JSON. - vite ? null : json(), - // https://www.npmjs.com/package/rollup-plugin-import-css - vite - ? null - : postcss({ - inject: false, - plugins: [atImport, postcssOptimizeDataUriPngs], - }), + typescript({ + compilerOptions: { + jsx: "react-jsx", + module: "esnext", + declarationDir: "dist/demo-site/declarations", + outDir: "./tsBuilt", + }, + }), + json(), + postcss({ + inject: false, + plugins: [atImport, postcssOptimizeDataUriPngs], + }), // Required because React still ships as CJS commonjs(), minify diff --git a/packages/webamp/vite.config.mts b/packages/webamp/vite.config.mts deleted file mode 100644 index c463b619c4..0000000000 --- a/packages/webamp/vite.config.mts +++ /dev/null @@ -1,43 +0,0 @@ -import { defineConfig } from "vite"; -import { getPlugins } from "./scripts/rollupPlugins.mjs"; - -export default defineConfig({ - build: { - outDir: "../dist/demo-site", - chunkSizeWarningLimit: 2500, // Suppress warnings for chunks larger than 500kb - }, - root: "demo", - // Used only by the demo site, not the library - assetsInclude: ["**/*.wsz", "**/*.mp3"], - optimizeDeps: { - include: ["winamp-eqf"], - }, - // @ts-ignore - plugins: [ - ...getPlugins({ - minify: true, - outputFile: "dist/demo-site/report", - vite: true, - }), - /* - replace({ - // Ensure we don't use the dev build of React - values: { "process.env.NODE_ENV": JSON.stringify("production") }, - preventAssignment: true, - }), - nodeResolve(), - typescript({ - compilerOptions: { - jsx: "react-jsx", - module: "esnext", - declarationDir: "dist/declarations", - }, - }), - commonjs(), - babel({ babelHelpers: "bundled" }), - */ - ], - worker: { - rollupOptions: {}, - }, -}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94e5aba242..722a910346 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -341,9 +341,6 @@ importers: '@rollup/plugin-typescript': specifier: ^11.1.6 version: 11.1.6(rollup@4.18.0)(tslib@2.8.1)(typescript@5.6.3) - '@sentry/browser': - specifier: 5.9.1 - version: 5.9.1 '@types/classnames': specifier: ^2.2.6 version: 2.3.1 @@ -404,9 +401,6 @@ importers: lodash: specifier: ^4.17.21 version: 4.17.21 - milkdrop-preset-converter-aws: - specifier: ^0.1.6 - version: 0.1.6 music-metadata: specifier: ^11.6.0 version: 11.6.0 @@ -434,9 +428,6 @@ importers: redux: specifier: ^5.0.0-alpha.0 version: 5.0.1 - redux-sentry-middleware: - specifier: ^0.1.3 - version: 0.1.8 redux-thunk: specifier: ^3.1.0 version: 3.1.0(redux@5.0.1) @@ -464,9 +455,6 @@ importers: typescript: specifier: ^5.6.2 version: 5.6.3 - vite: - specifier: ^5.2.12 - version: 5.2.12(@types/node@24.0.10)(lightningcss@1.24.1)(terser@5.43.0) vitest: specifier: ^3.2.0 version: 3.2.6(@edge-runtime/vm@2.1.2)(@types/debug@4.1.12)(@types/node@24.0.10)(jiti@1.21.7)(jsdom@20.0.3(bufferutil@4.0.8)(utf-8-validate@5.0.10))(lightningcss@1.24.1)(terser@5.43.0) @@ -474,6 +462,90 @@ importers: specifier: workspace:* version: link:../winamp-eqf + packages/webamp-demo: + devDependencies: + '@sentry/browser': + specifier: 5.9.1 + version: 5.9.1 + '@types/react': + specifier: ^18.0.26 + version: 18.2.74 + '@types/react-dom': + specifier: ^18.0.10 + version: 18.2.24 + ani-cursor: + specifier: workspace:* + version: link:../ani-cursor + butterchurn: + specifier: 3.0.0-beta.5 + version: 3.0.0-beta.5(patch_hash=dn4lya4siqyl4wmtq4serjeoma) + butterchurn-presets: + specifier: 3.0.0-beta.4 + version: 3.0.0-beta.4 + classnames: + specifier: ^2.2.5 + version: 2.5.1 + invariant: + specifier: ^2.2.3 + version: 2.2.4 + jszip: + specifier: ^3.10.1 + version: 3.10.1 + lodash: + specifier: ^4.17.21 + version: 4.17.21 + milkdrop-preset-converter-aws: + specifier: ^0.1.6 + version: 0.1.6 + music-metadata: + specifier: ^11.6.0 + version: 11.6.0 + music-metadata-browser: + specifier: ^0.6.1 + version: 0.6.6 + react: + specifier: ^19.1.0 + version: 19.1.0 + react-dom: + specifier: ^19.1.0 + version: 19.1.0(react@19.1.0) + react-redux: + specifier: ^8.0.5 + version: 8.1.3(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(redux@5.0.1) + redux: + specifier: ^5.0.0-alpha.0 + version: 5.0.1 + redux-sentry-middleware: + specifier: ^0.1.3 + version: 0.1.8 + redux-thunk: + specifier: ^3.1.0 + version: 3.1.0(redux@5.0.1) + reselect: + specifier: ^3.0.1 + version: 3.0.1 + rollup-plugin-polyfill-node: + specifier: ^0.13.0 + version: 0.13.0(rollup@4.45.0) + strtok3: + specifier: ^10.3.1 + version: 10.3.1 + tinyqueue: + specifier: ^3.0.0 + version: 3.0.0 + typescript: + specifier: ^5.6.2 + version: 5.8.3 + vite: + specifier: ^5.2.12 + version: 5.2.12(@types/node@24.0.10)(lightningcss@1.24.1)(terser@5.43.0) + webamp: + specifier: workspace:* + version: link:../webamp + winamp-eqf: + specifier: workspace:* + version: link:../winamp-eqf + packages/webamp-docs: dependencies: '@docusaurus/core': @@ -14979,7 +15051,7 @@ snapshots: dependencies: '@docusaurus/types': 3.8.1(@swc/core@1.4.12(@swc/helpers@0.5.15))(acorn@8.15.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@types/history': 4.7.11 - '@types/react': 18.2.74 + '@types/react': 19.2.7 '@types/react-router-config': 5.0.11 '@types/react-router-dom': 5.3.3 react: 19.1.0 @@ -15413,7 +15485,7 @@ snapshots: '@docusaurus/utils': 3.8.1(@swc/core@1.4.12(@swc/helpers@0.5.15))(acorn@8.15.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@docusaurus/utils-common': 3.8.1(@swc/core@1.4.12(@swc/helpers@0.5.15))(acorn@8.15.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@types/history': 4.7.11 - '@types/react': 18.2.74 + '@types/react': 19.2.7 '@types/react-router-config': 5.0.11 clsx: 2.1.1 parse-numeric-range: 1.3.0 @@ -15483,7 +15555,7 @@ snapshots: dependencies: '@mdx-js/mdx': 3.1.0(acorn@8.15.0) '@types/history': 4.7.11 - '@types/react': 18.2.74 + '@types/react': 19.2.7 commander: 5.1.0 joi: 17.12.3 react: 19.1.0 @@ -16684,6 +16756,14 @@ snapshots: optionalDependencies: rollup: 4.18.0 + '@rollup/plugin-inject@5.0.5(rollup@4.45.0)': + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.45.0) + estree-walker: 2.0.2 + magic-string: 0.30.10 + optionalDependencies: + rollup: 4.45.0 + '@rollup/plugin-json@4.1.0(rollup@2.37.1)': dependencies: '@rollup/pluginutils': 3.1.0(rollup@2.37.1) @@ -16766,6 +16846,14 @@ snapshots: optionalDependencies: rollup: 4.18.0 + '@rollup/pluginutils@5.1.0(rollup@4.45.0)': + dependencies: + '@types/estree': 1.0.8 + estree-walker: 2.0.2 + picomatch: 2.3.1 + optionalDependencies: + rollup: 4.45.0 + '@rollup/rollup-android-arm-eabi@4.18.0': optional: true @@ -17358,7 +17446,7 @@ snapshots: '@types/hoist-non-react-statics@3.3.5': dependencies: - '@types/react': 18.2.74 + '@types/react': 19.2.7 hoist-non-react-statics: 3.3.2 '@types/html-minifier-terser@6.1.0': {} @@ -17479,19 +17567,19 @@ snapshots: '@types/react-router-config@5.0.11': dependencies: '@types/history': 4.7.11 - '@types/react': 18.2.74 + '@types/react': 19.2.7 '@types/react-router': 5.1.20 '@types/react-router-dom@5.3.3': dependencies: '@types/history': 4.7.11 - '@types/react': 18.2.74 + '@types/react': 19.2.7 '@types/react-router': 5.1.20 '@types/react-router@5.1.20': dependencies: '@types/history': 4.7.11 - '@types/react': 18.2.74 + '@types/react': 19.2.7 '@types/react@18.2.74': dependencies: @@ -27059,6 +27147,11 @@ snapshots: '@rollup/plugin-inject': 5.0.5(rollup@4.18.0) rollup: 4.18.0 + rollup-plugin-polyfill-node@0.13.0(rollup@4.45.0): + dependencies: + '@rollup/plugin-inject': 5.0.5(rollup@4.45.0) + rollup: 4.45.0 + rollup-plugin-polyfill-node@0.6.2(rollup@2.37.1): dependencies: '@rollup/plugin-inject': 4.0.4(rollup@2.37.1) diff --git a/turbo.json b/turbo.json index 2e31e31cf6..a7eeac4662 100644 --- a/turbo.json +++ b/turbo.json @@ -8,19 +8,15 @@ "outputs": ["built/**", "dist/**"] }, "webamp#build": { + "dependsOn": ["ani-cursor#build", "winamp-eqf#build", "webamp#type-check"], + "outputs": ["built/**"] + }, + "webamp-demo#build": { "dependsOn": ["ani-cursor#build", "winamp-eqf#build"], "outputs": ["dist/**"] }, - "webamp#build-library": { - "dependsOn": [ - "ani-cursor#build", - "winamp-eqf#build", - "webamp#type-check" - ], - "outputs": ["built/**"] - }, "webamp-docs#build": { - "dependsOn": ["webamp#build-library"], + "dependsOn": ["webamp#build"], "outputs": ["build/**", ".docusaurus/**"] }, "ani-cursor#type-check": {}, @@ -29,7 +25,7 @@ "dependsOn": ["ani-cursor#build", "winamp-eqf#build"] }, "webamp-docs#type-check": { - "dependsOn": ["webamp#build-library"] + "dependsOn": ["webamp#build"] }, "skin-database#type-check": { "dependsOn": ["skin-database#grats"]