82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
|
import { BaseUiElementFactory, PublicUiElementIdAndClasses } from "./base";
|
||
|
|
import { Html5QrcodeScannerStrings } from "../../strings";
|
||
|
|
export class CameraSelectionUi {
|
||
|
|
constructor(cameras) {
|
||
|
|
this.selectElement = BaseUiElementFactory
|
||
|
|
.createElement("select", PublicUiElementIdAndClasses.CAMERA_SELECTION_SELECT_ID);
|
||
|
|
this.cameras = cameras;
|
||
|
|
this.options = [];
|
||
|
|
}
|
||
|
|
render(parentElement) {
|
||
|
|
const cameraSelectionContainer = document.createElement("span");
|
||
|
|
cameraSelectionContainer.style.marginRight = "10px";
|
||
|
|
const numCameras = this.cameras.length;
|
||
|
|
if (numCameras === 0) {
|
||
|
|
throw new Error("No cameras found");
|
||
|
|
}
|
||
|
|
if (numCameras === 1) {
|
||
|
|
cameraSelectionContainer.style.display = "none";
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
const selectCameraString = Html5QrcodeScannerStrings.selectCamera();
|
||
|
|
cameraSelectionContainer.innerText
|
||
|
|
= `${selectCameraString} (${this.cameras.length}) `;
|
||
|
|
}
|
||
|
|
let anonymousCameraId = 1;
|
||
|
|
for (const camera of this.cameras) {
|
||
|
|
const value = camera.id;
|
||
|
|
let name = camera.label == null ? value : camera.label;
|
||
|
|
if (!name || name === "") {
|
||
|
|
name = [
|
||
|
|
Html5QrcodeScannerStrings.anonymousCameraPrefix(),
|
||
|
|
anonymousCameraId++
|
||
|
|
].join(" ");
|
||
|
|
}
|
||
|
|
const option = document.createElement("option");
|
||
|
|
option.value = value;
|
||
|
|
option.innerText = name;
|
||
|
|
this.options.push(option);
|
||
|
|
this.selectElement.appendChild(option);
|
||
|
|
}
|
||
|
|
cameraSelectionContainer.appendChild(this.selectElement);
|
||
|
|
parentElement.appendChild(cameraSelectionContainer);
|
||
|
|
}
|
||
|
|
disable() {
|
||
|
|
this.selectElement.disabled = true;
|
||
|
|
}
|
||
|
|
isDisabled() {
|
||
|
|
return this.selectElement.disabled === true;
|
||
|
|
}
|
||
|
|
enable() {
|
||
|
|
this.selectElement.disabled = false;
|
||
|
|
}
|
||
|
|
getValue() {
|
||
|
|
return this.selectElement.value;
|
||
|
|
}
|
||
|
|
hasValue(value) {
|
||
|
|
for (const option of this.options) {
|
||
|
|
if (option.value === value) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
setValue(value) {
|
||
|
|
if (!this.hasValue(value)) {
|
||
|
|
throw new Error(`${value} is not present in the camera list.`);
|
||
|
|
}
|
||
|
|
this.selectElement.value = value;
|
||
|
|
}
|
||
|
|
hasSingleItem() {
|
||
|
|
return this.cameras.length === 1;
|
||
|
|
}
|
||
|
|
numCameras() {
|
||
|
|
return this.cameras.length;
|
||
|
|
}
|
||
|
|
static create(parentElement, cameras) {
|
||
|
|
let cameraSelectUi = new CameraSelectionUi(cameras);
|
||
|
|
cameraSelectUi.render(parentElement);
|
||
|
|
return cameraSelectUi;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=camera-selection-ui.js.map
|