Spaces:
Runtime error
Runtime error
File size: 2,534 Bytes
21e6506 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
class DeviceChangeEvent extends CustomEvent<{ deviceId: string | null }> {
constructor(type: string, detail: { deviceId: string | null }) {
super(type, { detail });
}
}
class AVSettingsMenuElement extends HTMLElement {
constructor() {
super();
this.addEventListener("click", (e) => {
if (e.target instanceof HTMLAnchorElement) {
const a = e.target;
if (a.classList.contains("camera-device-item")) {
this.cameraId = a.dataset.deviceId!;
} else if (a.classList.contains("mic-device-item")) {
this.micId = a.dataset.deviceId!;
}
}
});
}
#setDevices(deviceType: "camera" | "mic", devices: MediaDeviceInfo[]) {
const deviceEls = devices.map((dev) =>
this.#createDeviceElement(dev, `${deviceType}-device-item`)
);
const header = this.querySelector(`.${deviceType}-header`)!;
header.after(...deviceEls);
}
setCameras(cameras: MediaDeviceInfo[]) {
this.#setDevices("camera", cameras);
}
setMics(mics: MediaDeviceInfo[]) {
this.#setDevices("mic", mics);
}
get cameraId(): string | null {
return this.#getSelectedDevice("camera");
}
set cameraId(id: string | null) {
this.#setSelectedDevice("camera", id);
}
get micId(): string | null {
return this.#getSelectedDevice("mic");
}
set micId(id: string | null) {
this.#setSelectedDevice("mic", id);
}
#createDeviceElement(dev: MediaDeviceInfo, className: string): HTMLLIElement {
const li = this.ownerDocument.createElement("li");
const a = li.appendChild(this.ownerDocument.createElement("a"));
a.onclick = (e) => e.preventDefault();
a.href = "#";
a.textContent = dev.label;
a.dataset.deviceId = dev.deviceId!;
a.className = className;
return li;
}
#getSelectedDevice(device: "camera" | "mic"): string | null {
return (
(
this.querySelector(
`a.${device}-device-item.active`
) as HTMLAnchorElement
)?.dataset.deviceId ?? null
);
}
#setSelectedDevice(device: "camera" | "mic", id: string | null) {
this.querySelectorAll(`a.${device}-device-item.active`).forEach((a) =>
a.classList.remove("active")
);
if (id) {
this.querySelector(
`a.${device}-device-item[data-device-id="${id}"]`
)!.classList.add("active");
}
this.dispatchEvent(
new DeviceChangeEvent(`${device}-change`, {
deviceId: id,
})
);
}
}
customElements.define("av-settings-menu", AVSettingsMenuElement);
|