Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-28 12:36:35 +00:00
Code Issues Projects Releases Wiki Activity

Scope CSS vars to the UI_ROOT

Browse source
This commit is contained in:
Jordan Eldredge 2021-07-04 17:16:53 -07:00
parent 1dbca4c8a3
commit 3ff0d3bc46
3 changed files with 15 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/webamp-modern-2/src/UIRoot.ts
View file

@ -8,9 +8,10 @@ import GammaGroup from "./skin/GammaGroup";
import Container from "./skin/Container";
import Vm from "./skin/VM";
import BaseObject from "./skin/BaseObject";
import AudioPlayer from "./skin/AudioPlayer";
import AUDIO_PLAYER, { AudioPlayer } from "./skin/AudioPlayer";
export class UIRoot {
_div: HTMLDivElement = document.createElement("div");
// Just a temporary place to stash things
_bitmaps: Bitmap[] = [];
_fonts: (TrueTypeFont | BitmapFont)[] = [];
@ -25,7 +26,7 @@ export class UIRoot {
_objects: BaseObject[] = [];
vm: Vm = new Vm();
audio: AudioPlayer = new AudioPlayer();
audio: AudioPlayer = AUDIO_PLAYER;
reset() {
this.dispose();
@ -40,9 +41,10 @@ export class UIRoot {
// A list of all objects created for this skin.
this._objects = [];
}
this.vm = new Vm();
this.audio = new AudioPlayer();
getRootDiv() {
return this._div;
}
addObject(obj: BaseObject) {
@ -168,10 +170,7 @@ export class UIRoot {
}
const url = imgCache.get(groupId);
// TODO: Techincally we only need one per image/gammagroup.
document.documentElement.style.setProperty(
bitmap.getCSSVar(),
`url(${url})`
);
this._div.style.setProperty(bitmap.getCSSVar(), `url(${url})`);
}
}
@ -210,6 +209,7 @@ export class UIRoot {
}
dispose() {
this._div.remove();
for (const obj of this._objects) {
obj.dispose();
}

6
packages/webamp-modern-2/src/index.ts
View file

@ -13,8 +13,6 @@ function hack() {
}
addDropHandler(loadSkin);
const NODE = document.createElement("div");
document.body.appendChild(NODE);
const STATUS = document.getElementById("status");
@ -32,8 +30,8 @@ async function main() {
}
async function loadSkin(skinData: Blob) {
removeAllChildNodes(NODE);
UI_ROOT.reset();
document.body.appendChild(UI_ROOT.getRootDiv());
setStatus("Loading .wal archive...");
const zip = await JSZip.loadAsync(skinData);
@ -49,7 +47,7 @@ async function loadSkin(skinData: Blob) {
setStatus("Rendering skin for the first time...");
for (const container of uiRoot.getContainers()) {
container.draw();
NODE.appendChild(container.getDiv());
UI_ROOT.getRootDiv().appendChild(container.getDiv());
}
setStatus("Initializing Maki...");

6
packages/webamp-modern-2/src/skin/AudioPlayer.ts
View file

@ -1,4 +1,4 @@
export default class AudioPlayer {
export class AudioPlayer {
_input: HTMLInputElement = document.createElement("input");
_audio: HTMLAudioElement = document.createElement("audio");
constructor() {
@ -67,3 +67,7 @@ export default class AudioPlayer {
return this._audio.duration;
}
}
const AUDIO_PLAYER = new AudioPlayer();
export default AUDIO_PLAYER;