Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 09:37:17 +00:00
Code Issues Projects Releases Wiki Activity

Hack on choreo

Browse source
This commit is contained in:
Jordan Eldredge 2021-11-25 08:17:34 -08:00
parent cd5ad3dc82
commit 999a1db2e7
2 changed files with 111 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

132
packages/webamp/demo/js/choreography.ts
View file

@ -15,34 +15,120 @@ const BANDS: Slider[] = [
14000,
16000,
];
function activateId(id: string) {
document.getElementById(id)!.classList.add("active");
}
function deactivateId(id: string) {
document.getElementById(id)!.classList.remove("active");
}
function hoverPlButton(id: string, i: number) {
const elements = document.querySelector(id)!.childNodes;
elements[i]!.classList.add("hover");
}
function unhoverPlButton(id: string, i: number) {
const elements = document.querySelector(id)!.childNodes;
elements[i]!.classList.remove("hover");
}
function handleBeat(beat: number) {
switch (beat) {
case 1:
activateId("previous");
break;
case 2:
deactivateId("previous");
activateId("play");
break;
case 3:
deactivateId("play");
activateId("pause");
break;
case 4:
deactivateId("pause");
activateId("stop");
break;
case 5:
deactivateId("stop");
activateId("next");
break;
case 6:
deactivateId("next");
activateId("eject");
break;
case 7:
deactivateId("eject");
activateId("shuffle");
break;
case 8:
deactivateId("shuffle");
activateId("repeat");
break;
case 17:
document.getElementById("playlist-add-menu")!.click();
break;
// TODO: Triplet?
case 18: {
hoverPlButton("#playlist-add-menu ul", 2);
break;
}
case 19:
unhoverPlButton("#playlist-add-menu ul", 2);
hoverPlButton("#playlist-add-menu ul", 1);
break;
case 20:
unhoverPlButton("#playlist-add-menu ul", 1);
hoverPlButton("#playlist-add-menu ul", 0);
break;
case 21:
unhoverPlButton("#playlist-add-menu ul", 0);
document.getElementById("playlist-add-menu")!.click();
document.getElementById("playlist-remove-menu")!.click();
break;
case 22:
hoverPlButton("#playlist-remove-menu ul", 3);
break;
case 23:
unhoverPlButton("#playlist-remove-menu ul", 3);
hoverPlButton("#playlist-remove-menu ul", 2);
break;
case 24:
unhoverPlButton("#playlist-remove-menu ul", 2);
hoverPlButton("#playlist-remove-menu ul", 1);
break;
case 25:
unhoverPlButton("#playlist-remove-menu ul", 1);
hoverPlButton("#playlist-remove-menu ul", 0);
break;
case 26:
hoverPlButton("#playlist-remove-menu ul", 0);
document.getElementById("playlist-remove-menu ul")!.click();
break;
}
}
export function choreograph(webamp: Webamp) {
let frameNum = 0;
let lastBeat = 16;
function tick() {
frameNum += 1;
batch(() => {
for (const [i, band] of BANDS.entries()) {
const value = (Math.sin(i + frameNum / 60) + 1) * 50;
webamp.store.dispatch({ type: "SET_BAND_VALUE", band, value });
}
});
if (frameNum === 200 || frameNum === 400) {
document.getElementById("previous")?.classList.add("active");
document.getElementById("playlist-add-menu")?.click();
document
.querySelector("#playlist-add-menu ul")
.firstChild.classList.add("hover");
const beat = Math.floor(frameNum / 30);
if (beat !== lastBeat) {
lastBeat = beat;
handleBeat(beat);
}
if (frameNum === 400 || frameNum === 600) {
document.getElementById("playlist-remove-menu")?.click();
}
if (frameNum === 600 || frameNum === 800) {
document.getElementById("playlist-selection-menu")?.click();
}
if (frameNum === 800 || frameNum === 1000) {
document.getElementById("playlist-misc-menu")?.click();
}
if (frameNum === 1000 || frameNum === 1200) {
document.getElementById("playlist-list-menu")?.click();
if (beat > 8 && beat <= 16) {
batch(() => {
for (const [i, band] of BANDS.entries()) {
const value = (Math.sin(i + frameNum / 60) + 1) * 50;
webamp.store.dispatch({ type: "SET_BAND_VALUE", band, value });
}
});
}
window.requestAnimationFrame(tick);
}

3
packages/webamp/js/components/Skin.tsx
View file

@ -59,7 +59,8 @@ const getCssRules = createSelector(
const imageUrl =
skinImages[imageName] || skinImages[FALLBACKS[imageName]];
if (imageUrl) {
imageSelectors[imageName].forEach((selector) => {
imageSelectors[imageName].forEach((_selector) => {
const selector = _selector; // .replace(":active", ".active");
cssRules.push(
`${CSS_PREFIX} ${selector} {background-image: url(${imageUrl})}`
);