From 6fc00c9d3f652a5f4f4e2d052133f30c0c0c7f6a Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Mon, 28 Jun 2021 20:31:49 -0700 Subject: [PATCH] Stub out actual audio player --- packages/webamp-modern-2/src/UIRoot.ts | 28 ++++++++++- .../webamp-modern-2/src/skin/AudioPlayer.ts | 50 +++++++++++++++++++ packages/webamp-modern-2/src/skin/Button.ts | 7 +++ .../webamp-modern-2/src/skin/SystemObject.ts | 17 ++++++- packages/webamp-modern-2/src/utils.ts | 4 ++ 5 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 packages/webamp-modern-2/src/skin/AudioPlayer.ts diff --git a/packages/webamp-modern-2/src/UIRoot.ts b/packages/webamp-modern-2/src/UIRoot.ts index c1f62ea5..cb1c756a 100644 --- a/packages/webamp-modern-2/src/UIRoot.ts +++ b/packages/webamp-modern-2/src/UIRoot.ts @@ -1,9 +1,10 @@ import Bitmap from "./skin/Bitmap"; import { XmlElement } from "@rgrove/parse-xml"; import TrueTypeFont from "./skin/TrueTypeFont"; -import { assert } from "./utils"; +import { assert, assume } from "./utils"; import BitmapFont from "./skin/BitmapFont"; import Color from "./skin/Color"; +import AUDIO_PLAYER from "./skin/AudioPlayer"; class UIRoot { // Just a temporary place to stash things @@ -83,6 +84,31 @@ class UIRoot { return found ?? null; } + + dispatch(action: string) { + switch (action) { + case "PLAY": + AUDIO_PLAYER.play(); + break; + case "PAUSE": + AUDIO_PLAYER.pause(); + break; + case "STOP": + AUDIO_PLAYER.stop(); + break; + case "NEXT": + AUDIO_PLAYER.next(); + break; + case "PREV": + AUDIO_PLAYER.previous(); + break; + case "EJECT": + AUDIO_PLAYER.eject(); + break; + default: + assume(false, `Unknown global action: ${action}`); + } + } } // Global Singleton for now diff --git a/packages/webamp-modern-2/src/skin/AudioPlayer.ts b/packages/webamp-modern-2/src/skin/AudioPlayer.ts new file mode 100644 index 00000000..2d2fa825 --- /dev/null +++ b/packages/webamp-modern-2/src/skin/AudioPlayer.ts @@ -0,0 +1,50 @@ +class AudioPlayer { + _input: HTMLInputElement = document.createElement("input"); + _audio: HTMLAudioElement = document.createElement("audio"); + constructor() { + this._audio.src = + "https://raw.githubusercontent.com/captbaritone/webamp-music/4b556fbf/Auto-Pilot_-_03_-_Seventeen.mp3"; + this._input.type = "file"; + // document.body.appendChild(this._input); + // TODO: dispose + this._input.onchange = (e) => { + const file = this._input.files[0]; + if (file == null) { + return; + } + this._audio.src = URL.createObjectURL(file); + this.play(); + }; + } + // 0-1 + getVolume(): number { + return this._audio.volume; + } + play() { + this._audio.play(); + } + stop() { + // TODO: Actually stop + this._audio.pause(); + } + pause() { + this._audio.pause(); + } + + eject() { + this._input.click(); + } + + next() {} + + previous() {} + + // 0-1 + setVolume(volume: number) { + this._audio.volume = volume; + } +} + +const AUDIO_PLAYER = new AudioPlayer(); + +export default AUDIO_PLAYER; diff --git a/packages/webamp-modern-2/src/skin/Button.ts b/packages/webamp-modern-2/src/skin/Button.ts index 3a8d6de7..e6fc4894 100644 --- a/packages/webamp-modern-2/src/skin/Button.ts +++ b/packages/webamp-modern-2/src/skin/Button.ts @@ -8,6 +8,7 @@ export default class Button extends GuiObj { _image: string; _downimage: string; _active: boolean = false; + _action: string | null = null; setXmlAttr(_key: string, value: string): boolean { const key = _key.toLowerCase(); @@ -21,6 +22,9 @@ export default class Button extends GuiObj { case "downimage": this._downimage = value; break; + case "action": + this._action = value; + break; default: return false; } @@ -83,6 +87,9 @@ export default class Button extends GuiObj { // TODO: Cleanup! this._div.addEventListener("mousedown", this._handleMouseDown.bind(this)); this._div.addEventListener("click", (e) => { + if (this._action) { + UI_ROOT.dispatch(this._action); + } // TODO: Only left button this.onLeftClick(); }); diff --git a/packages/webamp-modern-2/src/skin/SystemObject.ts b/packages/webamp-modern-2/src/skin/SystemObject.ts index c1d2e24b..caa2b2fb 100644 --- a/packages/webamp-modern-2/src/skin/SystemObject.ts +++ b/packages/webamp-modern-2/src/skin/SystemObject.ts @@ -2,9 +2,10 @@ import { getClass } from "../maki/objects"; import { ParsedMaki } from "../maki/parser"; import { V } from "../maki/v"; import { SkinContext } from "../types"; +import AUDIO_PLAYER from "./AudioPlayer"; import BaseObject from "./BaseObject"; import Container from "./Container"; - +import { clamp } from "../utils"; import Group from "./Group"; import PRIVATE_CONFIG from "./PrivateConfig"; import { VM } from "./VM"; @@ -151,7 +152,19 @@ export default class SystemObject extends BaseObject { * @ret The current volume. **/ getvolume() { - return 100; + return AUDIO_PLAYER.getVolume() * 255; + } + + /** + * Set the volume to the desired value. + * Range is from 0 to 255. + * + * @param vol The desired volume value. + */ + setvolume(_vol: number) { + const vol = clamp(_vol, 0, 255); + + AUDIO_PLAYER.setVolume(vol / 255); } /** diff --git a/packages/webamp-modern-2/src/utils.ts b/packages/webamp-modern-2/src/utils.ts index e24c77fc..af0988a4 100644 --- a/packages/webamp-modern-2/src/utils.ts +++ b/packages/webamp-modern-2/src/utils.ts @@ -44,3 +44,7 @@ export function getId(): number { export function ensureVmInt(num: number): number { return Math.floor(num); } + +export function clamp(num: number, min: number, max: number): number { + return Math.max(min, Math.min(num, max)); +}