@schukai/monster 4.10.1 → 4.10.3

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
@@ -43,6 +43,12 @@ const controlElementSymbol = Symbol("copyElement");
  */
 const videoElementSymbol = Symbol("videoElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const fullScreenElementSymbol = Symbol("fullScreenElement");
+
 /**
  * @private
  * @type {symbol}
@@ -80,334 +86,350 @@ 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);
+		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;
+	}
 }
 
 /**
  * @private
  */
 function initCameraControl() {
-    const self = this;
-
-    if (
-        !navigator ||
-        !navigator.mediaDevices ||
-        !navigator.mediaDevices.getUserMedia
-    ) {
-        addErrorAttribute(self, "Browser not supported");
-        return;
-    }
-
-    navigator.mediaDevices.enumerateDevices().then((devices) => {
-        const cameras = devices.filter((device) => device.kind === "videoinput");
-
-        if (cameras.length === 0) {
-            addErrorAttribute(self, getTranslations().cameraNotSupportedOrNotAllowed);
-            return;
-        }
-
-        // Nur Dropdown anzeigen, wenn mehr als 1 Kamera vorhanden
-        if (cameras.length > 1) {
-            const select = document.createElement("select");
-            select.setAttribute("data-monster-role", "cameraSelector");
-            select.style.marginBottom = "0.5rem";
-
-            cameras.forEach((camera, index) => {
-                const option = document.createElement("option");
-                option.value = camera.deviceId;
-                option.text = camera.label || `Kamera ${index + 1}`;
-                select.appendChild(option);
-            });
-
-            select.addEventListener("change", () => {
-                startCameraWithDeviceId.call(self, select.value);
-            });
-
-            // Vor dem Video-Element einfügen
-            self[controlElementSymbol].insertBefore(select, self[videoElementSymbol]);
-        }
-
-        // Mit der ersten Kamera starten
-        startCameraWithDeviceId.call(self, cameras[0].deviceId);
-    });
+	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;
-        })
-        .catch(function (e) {
-            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);
+		});
 }
 
-
 /**
  * @private
  * @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.",
+			};
+	}
 }
 
 /**
@@ -416,17 +438,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;
 }
 
 /**
@@ -434,22 +456,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"]`,
+	);
 
-    // data-monster-role="emptyHistoryState"
-    this[emptyHistoryStateElementSymbol] = this.shadowRoot.querySelector(
-        `[data-monster-role="emptyHistoryState"]`,
-    );
+	this[fullScreenElementSymbol] = this.shadowRoot.querySelector(
+		`[data-monster-role="full-screen"]`,
+	);
 }
 
 /**
@@ -457,10 +482,10 @@ 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" data-monster-role="full-screen" data-monster-option-selector="#stream"></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"
@@ -494,7 +519,7 @@ function getTemplate() {
 
             
 
-            <video id="stream" autoplay style="display:none"></video>
+            <video autoplay style="display:none"></video>
             <canvas style="display:none;"></canvas>
             <div>
                 <monster-button part="takePictureButton" style="display:none"