From 2fe3235d511a4e85c264bae63e8d56e867cc3066 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Thu, 1 Jan 2026 15:43:48 -0800 Subject: [PATCH] Remove contained example and clarify position requirements --- examples/contained/.gitignore | 24 ------------- examples/contained/README.md | 3 -- examples/contained/index.html | 13 ------- examples/contained/package.json | 18 ---------- examples/contained/src/main.ts | 36 ------------------- examples/contained/src/vite-env.d.ts | 1 - examples/contained/tsconfig.json | 25 ------------- .../webamp-docs/docs/03_initialization.md | 2 +- .../docs/06_API/03_instance-methods.md | 6 ++++ 9 files changed, 7 insertions(+), 121 deletions(-) delete mode 100644 examples/contained/.gitignore delete mode 100644 examples/contained/README.md delete mode 100644 examples/contained/index.html delete mode 100644 examples/contained/package.json delete mode 100644 examples/contained/src/main.ts delete mode 100644 examples/contained/src/vite-env.d.ts delete mode 100644 examples/contained/tsconfig.json diff --git a/examples/contained/.gitignore b/examples/contained/.gitignore deleted file mode 100644 index a547bf36..00000000 --- a/examples/contained/.gitignore +++ /dev/null @@ -1,24 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/examples/contained/README.md b/examples/contained/README.md deleted file mode 100644 index c767aa54..00000000 --- a/examples/contained/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# `webamp/contained` Example - -Example for Webamp fully contained into a DOM element. Uses [Vite](https://vitejs.dev/) for development and bundling. diff --git a/examples/contained/index.html b/examples/contained/index.html deleted file mode 100644 index 99441f43..00000000 --- a/examples/contained/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Webamp (contained) - - -
- - - diff --git a/examples/contained/package.json b/examples/contained/package.json deleted file mode 100644 index 62b308a5..00000000 --- a/examples/contained/package.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "name": "contained", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview" - }, - "devDependencies": { - "typescript": "~5.8.3", - "vite": "^7.0.4" - }, - "dependencies": { - "webamp": "^2.2.0" - } -} diff --git a/examples/contained/src/main.ts b/examples/contained/src/main.ts deleted file mode 100644 index 523b6e2f..00000000 --- a/examples/contained/src/main.ts +++ /dev/null @@ -1,36 +0,0 @@ -import Webamp from "../../../packages/webamp/js/webamp"; - -const webamp = new Webamp({ - initialTracks: [ - { - metaData: { - artist: "DJ Mike Llama", - title: "Llama Whippin' Intro", - }, - // NOTE: Your audio file must be served from the same domain as your HTML - // file, or served with permissive CORS HTTP headers: - // https://docs.webamp.org/docs/guides/cors - url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3", - duration: 5.322286, - }, - ], - windowLayout: { - main: { position: { left: 0, top: 0 } }, - equalizer: { position: { left: 0, top: 116 } }, - playlist: { - position: { left: 0, top: 232 }, - size: { extraHeight: 4, extraWidth: 0 }, - }, - }, -}); - -// Container smaller than body -const container = document.getElementById("app"); -container!.style.position = "absolute"; -container!.style.left = "20px"; -container!.style.top = "20px"; -container!.style.right = "120px"; -container!.style.bottom = "120px"; -container!.style.backgroundColor = "lightyellow"; - -webamp.renderWhenReady(container!, true); diff --git a/examples/contained/src/vite-env.d.ts b/examples/contained/src/vite-env.d.ts deleted file mode 100644 index 11f02fe2..00000000 --- a/examples/contained/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/examples/contained/tsconfig.json b/examples/contained/tsconfig.json deleted file mode 100644 index 4f5edc24..00000000 --- a/examples/contained/tsconfig.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2022", - "useDefineForClassFields": true, - "module": "ESNext", - "lib": ["ES2022", "DOM", "DOM.Iterable"], - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, - "moduleDetection": "force", - "noEmit": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["src"] -} diff --git a/packages/webamp-docs/docs/03_initialization.md b/packages/webamp-docs/docs/03_initialization.md index 2541c189..98478b7e 100644 --- a/packages/webamp-docs/docs/03_initialization.md +++ b/packages/webamp-docs/docs/03_initialization.md @@ -13,7 +13,7 @@ Create a DOM element somewhere in your HTML document. This will be used by Webam :::tip **Webamp will not actually insert itself as a child of this element.** It will will insert itself as a child of the body element, and will attempt to center itself within this element. This is needed to allow the various Webamp windows to dragged around the page unencumbered. -If you want Webamp to be a child of a specific element, use the [`renderInto(domNode)`](./06_API/03_instance-methods.md#renderintodomnode-htmlelement-promisevoid) method instead. +If you want Webamp to be a child of a specific element, use the [`renderInto(domNode)`](./06_API/03_instance-methods.md#renderintodomnode-htmlelement-promisevoid) method instead _(available in unreleased version)_. Note that the target element must have a non-static CSS position (e.g., `position: relative`) for this to work correctly. ::: ## Initialize Webamp instance diff --git a/packages/webamp-docs/docs/06_API/03_instance-methods.md b/packages/webamp-docs/docs/06_API/03_instance-methods.md index 9493beca..c132ee78 100644 --- a/packages/webamp-docs/docs/06_API/03_instance-methods.md +++ b/packages/webamp-docs/docs/06_API/03_instance-methods.md @@ -233,8 +233,14 @@ webamp.toggleRepeat(); Webamp will wait until it has fetched the skin and fully parsed it, and then render itself as a child of the provided `domNode` and position itself in the center of that DOM node. +:::warning +**The `domNode` must have a non-static CSS position** (e.g., `position: relative`, `position: absolute`, or `position: fixed`) for Webamp to render correctly within it. +::: + A promise is returned which will resolve after the render is complete. +**Since** [Unreleased](../12_changelog.md#unreleased) + ```ts const container = document.getElementById("webamp-container"); webamp.renderWhenReady(container).then(() => {