Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 02:15:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Milkdrop to docs example

Browse source
This commit is contained in:
Jordan Eldredge 2025-07-04 19:44:47 -07:00
parent 7e159f2173
commit e52900d4fc
2 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

37
packages/webamp-docs/src/components/HomepageFeatures/index.tsx
View file

@ -6,7 +6,7 @@ import type { URLTrack } from "webamp";
let Webamp: typeof import("webamp").default | undefined;
if (ExecutionEnvironment.canUseDOM) {
Webamp = require("webamp");
Webamp = require("webamp/butterchurn").default;
}
// https://freemusicarchive.org/music/netBloc_Artists/netBloc_Vol_24_tiuqottigeloot/
@ -140,8 +140,39 @@ function WebampComponent(): ReactNode {
if (!ref || !Webamp) {
return;
}
let windowLayout;
if (document.body.clientWidth < MIN_MILKDROP_WIDTH) {
windowLayout = {
main: { position: { left: 0, top: 0 } },
equalizer: { position: { left: 0, top: 116 } },
playlist: {
position: { left: 0, top: 232 },
size: { extraHeight: 0, extraWidth: 0 },
},
milkdrop: {
position: { left: 0, top: 348 },
size: { extraHeight: 0, extraWidth: 0 },
},
};
} else {
windowLayout = {
main: { position: { left: 0, top: 0 } },
equalizer: { position: { left: 0, top: 116 } },
playlist: {
position: { left: 0, top: 232 },
size: { extraHeight: 4, extraWidth: 0 },
},
milkdrop: {
position: { left: 275, top: 0 },
size: { extraHeight: 12, extraWidth: 7 },
},
};
}
const webamp = new Webamp({
initialTracks,
windowLayout,
enableMediaSession: true,
enableHotkeys: true,
});
webamp.renderWhenReady(ref);
@ -154,11 +185,13 @@ function WebampComponent(): ReactNode {
return <div ref={setRef} style={{ height: "100%", width: "100%" }}></div>;
}
const MIN_MILKDROP_WIDTH = 725;
export default function HomepageFeatures(): ReactNode {
return (
<section className={styles.features}>
<div className="container">
<div className="row" style={{ height: "400px" }}>
<div className="row" style={{ height: "500px" }}>
<BrowserOnly>{() => <WebampComponent />}</BrowserOnly>
</div>
</div>

5
packages/webamp-docs/src/components/HomepageFeatures/styles.module.css
View file

@ -4,8 +4,3 @@
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}