@schukai/monster 4.11.0 → 4.11.1

package/source/components/content/camera-capture.mjs

@@ -12,24 +12,24 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
-import { CustomElement } from "../../dom/customelement.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
+import {CustomElement} from "../../dom/customelement.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { CameraCaptureStyleSheet } from "./stylesheet/camera-capture.mjs";
+import {CameraCaptureStyleSheet} from "./stylesheet/camera-capture.mjs";
 import "../form/button.mjs";
 import "../state/state.mjs";
-import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { addErrorAttribute } from "../../dom/error.mjs";
-import { Queue } from "../../types/queue.mjs";
-import { fireCustomEvent } from "../../dom/events.mjs";
+import {getLocaleOfDocument} from "../../dom/locale.mjs";
+import {addErrorAttribute} from "../../dom/error.mjs";
+import {Queue} from "../../types/queue.mjs";
+import {fireCustomEvent} from "../../dom/events.mjs";
 
 import "../layout/full-screen.mjs";
 
-export { CameraCapture };
+export {CameraCapture};
 
 /**
  * @private
@@ -86,202 +86,232 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
  * @fires monster-camera-capture-captured
  */
 class CameraCapture extends CustomElement {
-	/**
-	 * Constructor for the CameraCapture class.
-	 * Calls the parent class constructor.
-	 */
-	constructor() {
-		super();
-
-		this[queueSymbol] = new Queue();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/content/camera-capture@instance",
-		);
-	}
-
-	/**
-	 *
-	 * @return {Components.Content.Copy
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initCameraControl.call(this);
-		return this;
-	}
-
-	/**
-	 * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} actions Callbacks
-	 * @property {string} actions.click="throw Error" Callback when clicked
-	 * @property {Object} features Features
-	 * @property {boolean} features.stripTags=true Strip tags from the copied text
-	 * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
-	 * @property {Object} popper Popper configuration
-	 * @property {string} popper.placement="top" Popper placement
-	 * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			disabled: false,
-			features: {},
-
-			labels: getTranslations(),
-		});
-	}
-
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-camera-capture";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [CameraCaptureStyleSheet];
-	}
-
-	/**
-	 * Retrieve the next image from the queue.
-	 * If the queue is empty, it returns `null`.
-	 * @returns {string|null}
-	 */
-	getNextImage() {
-		if (!this[queueSymbol].isEmpty()) {
-			const next = this[queueSymbol].poll();
-			if (!next) {
-				return null;
-			}
-			return next;
-		}
-		return null;
-	}
-
-	/**
-	 * Capture an image from the camera and add it to the queue.
-	 * The image is returned as a data URL.
-	 * @returns {string}
-	 */
-	capture() {
-		this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
-		this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
-		const ctx = this[canvasElementSymbol].getContext("2d");
-		ctx.drawImage(
-			this[videoElementSymbol],
-			0,
-			0,
-			this[canvasElementSymbol].width,
-			this[canvasElementSymbol].height,
-		);
-		const dataURL = this[canvasElementSymbol].toDataURL("image/png");
-		this[queueSymbol].add(dataURL);
-		return dataURL;
-	}
+    /**
+     * Constructor for the CameraCapture class.
+     * Calls the parent class constructor.
+     */
+    constructor() {
+        super();
+
+        this[queueSymbol] = new Queue();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for(
+            "@schukai/monster/components/content/camera-capture@instance",
+        );
+    }
+
+    /**
+     *
+     * @return {Components.Content.Copy
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+        setupLazyCameraInit.call(this);
+        return this;
+    }
+
+    /**
+     * To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {Object} actions Callbacks
+     * @property {string} actions.click="throw Error" Callback when clicked
+     * @property {Object} features Features
+     * @property {boolean} features.stripTags=true Strip tags from the copied text
+     * @property {boolean} features.preventOpenEventSent=false Prevent open event from being sent
+     * @property {Object} popper Popper configuration
+     * @property {string} popper.placement="top" Popper placement
+     * @property {string[]} popper.middleware=["autoPlacement", "shift", "offset:15", "arrow"] Popper middleware
+     * @property {boolean} disabled=false Disabled state
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            disabled: false,
+            features: {},
+
+            labels: getTranslations(),
+        });
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-camera-capture";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [CameraCaptureStyleSheet];
+    }
+
+    /**
+     * Retrieve the next image from the queue.
+     * If the queue is empty, it returns `null`.
+     * @returns {string|null}
+     */
+    getNextImage() {
+        if (!this[queueSymbol].isEmpty()) {
+            const next = this[queueSymbol].poll();
+            if (!next) {
+                return null;
+            }
+            return next;
+        }
+        return null;
+    }
+
+    /**
+     * Capture an image from the camera and add it to the queue.
+     * The image is returned as a data URL.
+     * @returns {string}
+     */
+    capture() {
+        this[canvasElementSymbol].width = this[videoElementSymbol].videoWidth;
+        this[canvasElementSymbol].height = this[videoElementSymbol].videoHeight;
+        const ctx = this[canvasElementSymbol].getContext("2d");
+        ctx.drawImage(
+            this[videoElementSymbol],
+            0,
+            0,
+            this[canvasElementSymbol].width,
+            this[canvasElementSymbol].height,
+        );
+        const dataURL = this[canvasElementSymbol].toDataURL("image/png");
+        this[queueSymbol].add(dataURL);
+        return dataURL;
+    }
 }
 
 /**
  * @private
  */
-function initCameraControl() {
-	const self = this;
-
-	if (
-		!navigator ||
-		!navigator.mediaDevices ||
-		!navigator.mediaDevices.getUserMedia
-	) {
-		self[fullScreenElementSymbol].style.display = "none";
-		addErrorAttribute(self, "Browser not supported");
-		return;
-	}
-
-	navigator.mediaDevices
-		.getUserMedia({ video: true })
-		.then((stream) => {
-			stream.getTracks().forEach((track) => track.stop());
-			return navigator.mediaDevices.enumerateDevices();
-		})
-		.then((devices) => {
-			const cameras = devices.filter((device) => device.kind === "videoinput");
-
-			if (cameras.length === 0) {
-				addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed);
-				return;
-			}
-
-			if (cameras.length > 0) {
-				const select = document.createElement("select");
-				select.setAttribute("data-monster-role", "cameraSelector");
-				select.style.marginBottom = "0.5rem";
-				select.style.width = "100%";
-				select.style.maxWidth = "100%";
-				select.style.height = "1.4rem";
-				select.style.marginTop = "0";
-				select.style.marginBottom = "0";
-
-				cameras.forEach((camera, index) => {
-					const option = document.createElement("option");
-					option.value = camera.deviceId;
-					option.text = camera.label || `Camera ${index + 1}`;
-					select.appendChild(option);
-				});
-
-				select.addEventListener("change", () => {
-					startCameraWithDeviceId.call(self, select.value);
-				});
-
-				self[fullScreenElementSymbol].style.top = "2rem";
-				self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
-			}
-
-			startCameraWithDeviceId.call(self, cameras[0].deviceId);
-		})
-		.catch((err) => {
-			self[fullScreenElementSymbol].style.display = "none";
-			addErrorAttribute(self, err);
-		});
+function setupLazyCameraInit() {
+    const self = this;
+
+    let initialized = false;
+
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (entry.isIntersecting && !initialized) {
+                initialized = true;
+                observer.disconnect();
+                initCameraControl.call(self);
+            }
+        }
+    }, {
+        root: null,
+        threshold: 0.1,
+    });
+
+    observer.observe(this);
 }
 
 
+/**
+ * @private
+ */
+function initCameraControl() {
+    const self = this;
+
+    if (
+        !navigator ||
+        !navigator.mediaDevices ||
+        !navigator.mediaDevices.getUserMedia
+    ) {
+        self[fullScreenElementSymbol].style.display = "none";
+        addErrorAttribute(self, "Browser not supported");
+        return;
+    }
+
+    navigator.mediaDevices
+        .getUserMedia({video: true})
+        .then((stream) => {
+            stream.getTracks().forEach((track) => track.stop());
+            return navigator.mediaDevices.enumerateDevices();
+        })
+        .then((devices) => {
+            const cameras = devices.filter((device) => device.kind === "videoinput");
+
+            if (cameras.length === 0) {
+                addErrorAttribute(
+                    self,
+                    getTranslations().cameraNotSupportedOrNotAllowed,
+                );
+                return;
+            }
+
+            if (cameras.length > 0) {
+                const select = document.createElement("select");
+                select.setAttribute("data-monster-role", "cameraSelector");
+                select.style.marginBottom = "0.5rem";
+                select.style.width = "100%";
+                select.style.maxWidth = "100%";
+                select.style.height = "1.4rem";
+                select.style.marginTop = "0";
+                select.style.marginBottom = "0";
+
+                cameras.forEach((camera, index) => {
+                    const option = document.createElement("option");
+                    option.value = camera.deviceId;
+                    option.text = camera.label || `Camera ${index + 1}`;
+                    select.appendChild(option);
+                });
+
+                select.addEventListener("change", () => {
+                    startCameraWithDeviceId.call(self, select.value);
+                });
+
+                self[fullScreenElementSymbol].style.top = "2rem";
+                self[controlElementSymbol].insertBefore(
+                    select,
+                    self[videoElementSymbol],
+                );
+            }
+
+            startCameraWithDeviceId.call(self, cameras[0].deviceId);
+        })
+        .catch((err) => {
+            self[fullScreenElementSymbol].style.display = "none";
+            addErrorAttribute(self, err);
+        });
+}
+
 function startCameraWithDeviceId(deviceId) {
-	const self = this;
-	navigator.mediaDevices
-		.getUserMedia({ video: { deviceId: { exact: deviceId } } })
-		.then(function (stream) {
-			self[takePictureButtonElementSymbol].style.display = "block";
-			self[videoElementSymbol].style.display = "block";
-			self[emptyHistoryStateElementSymbol].style.display = "none";
-
-			self[videoElementSymbol].srcObject = stream;
-
-			self[fullScreenElementSymbol].style.display = "block";
-		})
-		.catch(function (e) {
-			self[fullScreenElementSymbol].style.display = "none";
-			addErrorAttribute(self, e);
-		});
+    const self = this;
+    navigator.mediaDevices
+        .getUserMedia({video: {deviceId: {exact: deviceId}}})
+        .then(function (stream) {
+            self[takePictureButtonElementSymbol].style.display = "block";
+            self[videoElementSymbol].style.display = "block";
+            self[emptyHistoryStateElementSymbol].style.display = "none";
+
+            self[videoElementSymbol].srcObject = stream;
+
+            self[fullScreenElementSymbol].style.display = "block";
+        })
+        .catch(function (e) {
+            self[fullScreenElementSymbol].style.display = "none";
+            addErrorAttribute(self, e);
+        });
 }
 
 /**
@@ -289,147 +319,147 @@ function startCameraWithDeviceId(deviceId) {
  * @returns {{takePicture: string}}
  */
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				takePicture: "Bild aufnehmen",
-				cameraNotSupportedOrNotAllowed:
-					"Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
-			};
-
-		case "es":
-			return {
-				takePicture: "Tomar una foto",
-				cameraNotSupportedOrNotAllowed:
-					"La cámara no es compatible o no se ha otorgado permiso.",
-			};
-
-		case "zh":
-			return {
-				takePicture: "拍照",
-				cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
-			};
-
-		case "hi":
-			return {
-				takePicture: "तस्वीर खींचें",
-				cameraNotSupportedOrNotAllowed:
-					"कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
-			};
-
-		case "bn":
-			return {
-				takePicture: "ছবি তুলুন",
-				cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
-			};
-
-		case "pt":
-			return {
-				takePicture: "Tirar uma foto",
-				cameraNotSupportedOrNotAllowed:
-					"A câmera não é suportada ou a permissão não foi concedida.",
-			};
-
-		case "ru":
-			return {
-				takePicture: "Сделать фото",
-				cameraNotSupportedOrNotAllowed:
-					"Камера не поддерживается или разрешение не предоставлено.",
-			};
-
-		case "ja":
-			return {
-				takePicture: "写真を撮る",
-				cameraNotSupportedOrNotAllowed:
-					"カメラがサポートされていないか、許可が付与されていません。",
-			};
-
-		case "pa":
-			return {
-				takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
-				cameraNotSupportedOrNotAllowed:
-					"ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
-			};
-
-		case "mr":
-			return {
-				takePicture: "फोटो घ्या",
-				cameraNotSupportedOrNotAllowed:
-					"कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
-			};
-
-		case "fr":
-			return {
-				takePicture: "Prendre une photo",
-				cameraNotSupportedOrNotAllowed:
-					"La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
-			};
-
-		case "it":
-			return {
-				takePicture: "Scattare una foto",
-				cameraNotSupportedOrNotAllowed:
-					"La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
-			};
-
-		case "nl":
-			return {
-				takePicture: "Maak een foto",
-				cameraNotSupportedOrNotAllowed:
-					"De camera wordt niet ondersteund of er is geen toestemming verleend.",
-			};
-
-		case "sv":
-			return {
-				takePicture: "Ta ett foto",
-				cameraNotSupportedOrNotAllowed:
-					"Kameran stöds inte eller tillståndet har inte beviljats.",
-			};
-
-		case "pl":
-			return {
-				takePicture: "Zrób zdjęcie",
-				cameraNotSupportedOrNotAllowed:
-					"Kamera nie jest obsługiwana lub nie udzielono zgody.",
-			};
-
-		case "da":
-			return {
-				takePicture: "Tag et billede",
-				cameraNotSupportedOrNotAllowed:
-					"Kameraen understøttes ikke eller tilladelsen er ikke givet.",
-			};
-
-		case "fi":
-			return {
-				takePicture: "Ota kuva",
-				cameraNotSupportedOrNotAllowed:
-					"Kameraa ei tueta tai lupaa ei ole myönnetty.",
-			};
-
-		case "no":
-			return {
-				takePicture: "Ta et bilde",
-				cameraNotSupportedOrNotAllowed:
-					"Kameraen støttes ikke eller tillatelsen er ikke gitt.",
-			};
-
-		case "cs":
-			return {
-				takePicture: "Vyfotit",
-				cameraNotSupportedOrNotAllowed:
-					"Fotoaparát není podporován nebo povolení nebylo uděleno.",
-			};
-
-		case "en":
-		default:
-			return {
-				takePicture: "Take a picture",
-				cameraNotSupportedOrNotAllowed:
-					"The camera is not supported or permission has not been granted.",
-			};
-	}
+    const locale = getLocaleOfDocument();
+    switch (locale.language) {
+        case "de":
+            return {
+                takePicture: "Bild aufnehmen",
+                cameraNotSupportedOrNotAllowed:
+                    "Die Kamera wird nicht unterstützt oder die Berechtigung wurde nicht erteilt.",
+            };
+
+        case "es":
+            return {
+                takePicture: "Tomar una foto",
+                cameraNotSupportedOrNotAllowed:
+                    "La cámara no es compatible o no se ha otorgado permiso.",
+            };
+
+        case "zh":
+            return {
+                takePicture: "拍照",
+                cameraNotSupportedOrNotAllowed: "相机不受支持或未授予权限。",
+            };
+
+        case "hi":
+            return {
+                takePicture: "तस्वीर खींचें",
+                cameraNotSupportedOrNotAllowed:
+                    "कैमरा समर्थित नहीं है या अनुमति नहीं दी गई है।",
+            };
+
+        case "bn":
+            return {
+                takePicture: "ছবি তুলুন",
+                cameraNotSupportedOrNotAllowed: "ক্যামেরা সমর্থিত নয় বা অনুমতি দেয়া হয়নি।",
+            };
+
+        case "pt":
+            return {
+                takePicture: "Tirar uma foto",
+                cameraNotSupportedOrNotAllowed:
+                    "A câmera não é suportada ou a permissão não foi concedida.",
+            };
+
+        case "ru":
+            return {
+                takePicture: "Сделать фото",
+                cameraNotSupportedOrNotAllowed:
+                    "Камера не поддерживается или разрешение не предоставлено.",
+            };
+
+        case "ja":
+            return {
+                takePicture: "写真を撮る",
+                cameraNotSupportedOrNotAllowed:
+                    "カメラがサポートされていないか、許可が付与されていません。",
+            };
+
+        case "pa":
+            return {
+                takePicture: "ਤਸਵੀਰ ਖਿੱਚੋ",
+                cameraNotSupportedOrNotAllowed:
+                    "ਕੈਮਰਾ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਹੈ ਜਾਂ ਅਨੁਮਤੀ ਨਹੀਂ ਦਿੱਤੀ ਗਈ ਹੈ।",
+            };
+
+        case "mr":
+            return {
+                takePicture: "फोटो घ्या",
+                cameraNotSupportedOrNotAllowed:
+                    "कॅमेरा समर्थित नाही किंवा परवानगी दिलेली नाही.",
+            };
+
+        case "fr":
+            return {
+                takePicture: "Prendre une photo",
+                cameraNotSupportedOrNotAllowed:
+                    "La caméra n'est pas prise en charge ou l'autorisation n'a pas été accordée.",
+            };
+
+        case "it":
+            return {
+                takePicture: "Scattare una foto",
+                cameraNotSupportedOrNotAllowed:
+                    "La fotocamera non è supportata o l'autorizzazione non è stata concessa.",
+            };
+
+        case "nl":
+            return {
+                takePicture: "Maak een foto",
+                cameraNotSupportedOrNotAllowed:
+                    "De camera wordt niet ondersteund of er is geen toestemming verleend.",
+            };
+
+        case "sv":
+            return {
+                takePicture: "Ta ett foto",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameran stöds inte eller tillståndet har inte beviljats.",
+            };
+
+        case "pl":
+            return {
+                takePicture: "Zrób zdjęcie",
+                cameraNotSupportedOrNotAllowed:
+                    "Kamera nie jest obsługiwana lub nie udzielono zgody.",
+            };
+
+        case "da":
+            return {
+                takePicture: "Tag et billede",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameraen understøttes ikke eller tilladelsen er ikke givet.",
+            };
+
+        case "fi":
+            return {
+                takePicture: "Ota kuva",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameraa ei tueta tai lupaa ei ole myönnetty.",
+            };
+
+        case "no":
+            return {
+                takePicture: "Ta et bilde",
+                cameraNotSupportedOrNotAllowed:
+                    "Kameraen støttes ikke eller tillatelsen er ikke gitt.",
+            };
+
+        case "cs":
+            return {
+                takePicture: "Vyfotit",
+                cameraNotSupportedOrNotAllowed:
+                    "Fotoaparát není podporován nebo povolení nebylo uděleno.",
+            };
+
+        case "en":
+        default:
+            return {
+                takePicture: "Take a picture",
+                cameraNotSupportedOrNotAllowed:
+                    "The camera is not supported or permission has not been granted.",
+            };
+    }
 }
 
 /**
@@ -438,17 +468,17 @@ function getTranslations() {
  * @fires monster-camera-capture-captured
  */
 function initEventHandler() {
-	const self = this;
+    const self = this;
 
-	this[takePictureButtonElementSymbol].setOption("actions.click", function () {
-		self.capture();
+    this[takePictureButtonElementSymbol].setOption("actions.click", function () {
+        self.capture();
 
-		fireCustomEvent(self, "monster-camera-capture-captured", {
-			element: self,
-		});
-	});
+        fireCustomEvent(self, "monster-camera-capture-captured", {
+            element: self,
+        });
+    });
 
-	return this;
+    return this;
 }
 
 /**
@@ -456,25 +486,25 @@ function initEventHandler() {
  * @return {void}
  */
 function initControlReferences() {
-	this[controlElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="control"]`,
-	);
+    this[controlElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}="control"]`,
+    );
 
-	this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
-		`[data-monster-role="takePicture"]`,
-	);
+    this[takePictureButtonElementSymbol] = this.shadowRoot.querySelector(
+        `[data-monster-role="takePicture"]`,
+    );
 
-	this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
+    this[videoElementSymbol] = this.shadowRoot.querySelector(`video`);
 
-	this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
+    this[canvasElementSymbol] = this.shadowRoot.querySelector(`canvas`);
 
-	this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
-		`[data-monster-role="emptyHistoryState"]`,
-	);
+    this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
+        `[data-monster-role="emptyHistoryState"]`,
+    );
 
-	this[fullScreenElementSymbol] = this.shadowRoot.querySelector(
-		`[data-monster-role="full-screen"]`,
-	);
+    this[fullScreenElementSymbol] = this.shadowRoot.querySelector(
+        `[data-monster-role="full-screen"]`,
+    );
 }
 
 /**
@@ -482,10 +512,11 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control">
-            <monster-full-screen part="full-screen" style="display: none" data-monster-role="full-screen" data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
+            <monster-full-screen part="full-screen" style="display: none" data-monster-role="full-screen"
+                                 data-monster-option-selector="[data-monster-role=control]"></monster-full-screen>
             <monster-state data-monster-role="emptyHistoryState">
                 <svg slot="visual" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="350"
@@ -514,10 +545,10 @@ function getTemplate() {
                     </g>
                 </svg>
 
-                <p class="camera-not-supported-text" data-monster-replace="path:labels.cameraNotSupportedOrNotAllowed | default:there was an error:string"></p>
+                <p class="camera-not-supported-text"
+                   data-monster-replace="path:labels.cameraNotSupportedOrNotAllowed | default:there was an error:string"></p>
             </monster-state>
 
-            
 
             <video autoplay style="display:none"></video>
             <canvas style="display:none;"></canvas>