@uploadcare/file-uploader 1.27.0 → 1.28.0-alpha.0

package/dist/CameraSource-DbyO6GoK.js

@@ -0,0 +1,481 @@
+/**
+* @license
+* Package: @uploadcare/file-uploader@1.28.0-alpha.0 (MIT)
+* License: https://github.com/uploadcare/blob/main/LICENSE
+* Built: 2026-03-02T14:46:15.080Z
+*/
+import { A as CameraSourceTypes, F as InternalEventType, Q as stringToArray, ct as __decorate, k as CameraSourceEvents, lt as debounce } from "./Icon-CqTVC82Q.js";
+import { c as UploadSource, f as deserializeCsv } from "./plugins-DxjsQUa8.js";
+import { n as LitActivityBlock, t as LitUploaderBlock } from "./LitUploaderBlock-BA34rzeU.js";
+import { html } from "lit";
+import { state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { styleMap } from "lit/directives/style-map.js";
+const canUsePermissionsApi = () => navigator.permissions !== void 0;
+var DEFAULT_VIDEO_CONFIG = {
+	width: { ideal: 1920 },
+	height: { ideal: 1080 },
+	frameRate: { ideal: 30 }
+}, DEFAULT_PERMISSIONS = ["camera", "microphone"];
+function formatTime(e) {
+	return `${Math.floor(e / 60).toString().padStart(2, "0")}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
+}
+var DEFAULT_PICTURE_FORMAT = "image/jpeg", DEFAULT_VIDEO_FORMAT = "video/webm", CameraSource = class extends LitUploaderBlock {
+	constructor(...v) {
+		super(...v), this.couldBeCtxOwner = !0, this._unsubPermissions = null, this._capturing = !1, this._chunks = [], this._mediaRecorder = null, this._stream = null, this._selectedAudioId = null, this._selectedCameraId = null, this._activeTab = null, this._options = {}, this._canvas = null, this._ctx = null, this._cameraDevices = [], this._audioDevices = [], this._permissionResponses = {}, this._permissionCleanupFns = [], this._currentVideoSource = null, this._handlePreviewPlay = () => {
+			this._startTimeline(), this._currentTimelineIcon = "pause";
+		}, this._handlePreviewPause = () => {
+			this._currentTimelineIcon = "play", this._stopTimeline();
+		}, this._timerRef = createRef(), this._lineRef = createRef(), this._videoRef = createRef(), this._switcherRef = createRef(), this._startTime = 0, this._elapsedTime = 0, this._videoTransformCss = null, this._videoHidden = !0, this._messageHidden = !0, this._requestBtnHidden = canUsePermissionsApi(), this._cameraSelectOptions = [], this._cameraSelectHidden = !0, this._l10nMessage = "", this._timerHidden = !0, this._cameraHidden = !0, this._cameraActionsHidden = !0, this._audioSelectOptions = [], this._audioSelectHidden = !0, this._audioSelectDisabled = !0, this._audioToggleMicrophoneHidden = !0, this._tabCameraHidden = !0, this._tabVideoHidden = !0, this._currentIcon = "camera-full", this._currentTimelineIcon = "play", this._toggleMicrophoneIcon = "microphone", this._mutableClassButton = "uc-shot-btn uc-camera-action", this._chooseActionWithCamera = () => {
+			if (this.telemetryManager.sendEvent({
+				eventType: InternalEventType.ACTION_EVENT,
+				payload: { metadata: {
+					event: "start-camera",
+					node: this.tagName,
+					tabId: this._activeTab
+				} }
+			}), this._activeTab === CameraSourceTypes.PHOTO && this._shot(), this._activeTab === CameraSourceTypes.VIDEO) {
+				if (this._mediaRecorder?.state === "recording") {
+					this._stopRecording();
+					return;
+				}
+				this._startRecording();
+			}
+		}, this._handleCameraSelectChange = (e) => {
+			let _ = e.target;
+			_ && (this._selectedCameraId = _.value, this._capture());
+		}, this._handleAudioSelectChange = (e) => {
+			let _ = e.target;
+			_ && (this._selectedAudioId = _.value, this._capture());
+		}, this._handleRequestPermissions = () => {
+			this._capture();
+		}, this._handleStartCamera = () => {
+			this.telemetryManager.sendEvent({
+				eventType: InternalEventType.ACTION_EVENT,
+				payload: { metadata: {
+					event: "shot-camera",
+					node: this.tagName,
+					tabId: this._activeTab
+				} }
+			}), this._chooseActionWithCamera();
+		}, this._handleToggleRecording = () => {
+			this._toggleRecording();
+		}, this._handleToggleAudio = () => {
+			this._toggleEnableAudio();
+		}, this._handleRetake = () => {
+			this.telemetryManager.sendEvent({
+				eventType: InternalEventType.ACTION_EVENT,
+				payload: { metadata: {
+					event: "retake-camera",
+					node: this.tagName,
+					tabId: this._activeTab
+				} }
+			}), this._retake();
+		}, this._handleAccept = () => {
+			this.telemetryManager.sendEvent({
+				eventType: InternalEventType.ACTION_EVENT,
+				payload: { metadata: {
+					event: "accept-camera",
+					node: this.tagName,
+					tabId: this._activeTab
+				} }
+			}), this._accept();
+		}, this._handleClickTab = (e) => {
+			let _ = e.currentTarget?.getAttribute("data-id");
+			_ && this._handleActiveTab(_);
+		}, this._updateTimer = () => {
+			let e = Math.floor((performance.now() - this._startTime + this._elapsedTime) / 1e3);
+			if (typeof this.cfg.maxVideoRecordingDuration == "number" && this.cfg.maxVideoRecordingDuration > 0) {
+				let _ = this.cfg.maxVideoRecordingDuration - e;
+				if (_ <= 0) {
+					let e = this._timerRef.value;
+					e && (e.textContent = formatTime(_)), this._stopRecording();
+					return;
+				}
+				let v = this._timerRef.value;
+				v && (v.textContent = formatTime(_));
+			} else {
+				let _ = this._timerRef.value;
+				_ && (_.textContent = formatTime(e));
+			}
+			this._animationFrameId = requestAnimationFrame(this._updateTimer);
+		}, this._startTimer = () => {
+			this._startTime = performance.now(), this._elapsedTime = 0, this._updateTimer();
+		}, this._stopTimer = () => {
+			this._animationFrameId && cancelAnimationFrame(this._animationFrameId);
+		}, this._startTimeline = () => {
+			let e = this._videoRef.value;
+			if (!e) return;
+			let _ = e.currentTime, v = e.duration || 1, y = this._lineRef.value;
+			y && (y.style.transform = `scaleX(${_ / v})`);
+			let b = this._timerRef.value;
+			b && (b.textContent = formatTime(_)), this._animationFrameId = requestAnimationFrame(this._startTimeline);
+		}, this._stopTimeline = () => {
+			this._animationFrameId && cancelAnimationFrame(this._animationFrameId);
+		}, this._animationFrameId = null, this._startRecording = () => {
+			try {
+				this._chunks = [], this._options = { ...this.cfg.mediaRecorderOptions };
+				let { mimeType: e } = this.cfg.mediaRecorderOptions || {};
+				e && MediaRecorder.isTypeSupported(e) ? this._options.mimeType = e : MediaRecorder.isTypeSupported(DEFAULT_VIDEO_FORMAT) ? this._options.mimeType = DEFAULT_VIDEO_FORMAT : this._options.mimeType = "video/mp4", this._stream && (this._mediaRecorder = new MediaRecorder(this._stream, this._options), this._mediaRecorder.start(), this._mediaRecorder.addEventListener("dataavailable", (e) => {
+					this._chunks.push(e.data);
+				}), this._startTimer(), this.classList.add("uc-recording"), this._setCameraState(CameraSourceEvents.PLAY));
+			} catch (e) {
+				console.error("Failed to start recording", e), this.telemetryManager.sendEventError(e, "camera recording. Failed to start recording");
+			}
+		}, this._stopRecording = () => {
+			this._mediaRecorder?.addEventListener("stop", () => {
+				this._previewVideo(), this._stopTimer(), this._setCameraState(CameraSourceEvents.STOP);
+			}), this._mediaRecorder?.stop(), this.classList.remove("uc-recording"), this.telemetryManager.sendEvent({
+				eventType: InternalEventType.ACTION_EVENT,
+				payload: { metadata: {
+					event: "stop-camera",
+					node: this.tagName,
+					tabId: this._activeTab
+				} }
+			});
+		}, this._toggleRecording = () => {
+			if (this._mediaRecorder?.state === "recording") return;
+			let e = this._videoRef.value;
+			e && (!e.paused && !e.ended && e.readyState > 2 ? e.pause() : e.paused && e.play());
+		}, this._toggleEnableAudio = () => {
+			this._stream?.getAudioTracks().forEach((e) => {
+				e.enabled = !e.enabled, this._toggleMicrophoneIcon = e.enabled ? "microphone" : "microphone-mute", this._audioSelectDisabled = !e.enabled;
+			});
+		}, this._previewVideo = () => {
+			try {
+				let e = new Blob(this._chunks, { type: this._mediaRecorder?.mimeType }), _ = URL.createObjectURL(e), v = this._videoRef.value;
+				if (!v) return;
+				v.muted = !1, v.volume = 1, this._setVideoSource(null), v.src = _, this._attachPreviewListeners(v);
+			} catch (e) {
+				console.error("Failed to preview video", e), this.telemetryManager.sendEventError(e, "camera previewing. Failed to preview video");
+			}
+		}, this._retake = () => {
+			if (this._setCameraState(CameraSourceEvents.RETAKE), this._activeTab === CameraSourceTypes.VIDEO) {
+				this._setVideoSource(this._stream);
+				let e = this._videoRef.value;
+				e && (e.muted = !0);
+			}
+			this._videoRef.value?.play?.();
+		}, this._accept = () => {
+			if (this._setCameraState(CameraSourceEvents.ACCEPT), this._activeTab === CameraSourceTypes.PHOTO) {
+				this._canvas?.toBlob((e) => {
+					if (!e) return;
+					let _ = this._createFile("camera", "jpeg", DEFAULT_PICTURE_FORMAT, e);
+					this._toSend(_);
+				}, DEFAULT_PICTURE_FORMAT);
+				return;
+			}
+			let _ = new Blob(this._chunks, { type: this._mediaRecorder?.mimeType }), v = this._guessExtensionByMime(this._mediaRecorder?.mimeType), y = this._createFile("video", v, `video/${v}`, _);
+			this._toSend(y), this._chunks = [];
+		}, this._handlePhoto = (_) => {
+			_ === CameraSourceEvents.SHOT && (this._tabVideoHidden = !0, this._cameraHidden = !0, this._tabCameraHidden = !0, this._cameraActionsHidden = !1, this._cameraSelectHidden = !0), (_ === CameraSourceEvents.RETAKE || _ === CameraSourceEvents.ACCEPT) && (this._tabVideoHidden = !this._cameraModes.includes(CameraSourceTypes.VIDEO), this._tabCameraHidden = !this._cameraModes.includes(CameraSourceTypes.PHOTO), this._cameraHidden = !1, this._cameraActionsHidden = !0, this._cameraSelectHidden = this._cameraDevices.length <= 1);
+		}, this._handleVideo = (_) => {
+			_ === CameraSourceEvents.PLAY && (this._timerHidden = !1, this._tabCameraHidden = !0, this._cameraSelectHidden = !0, this._audioSelectHidden = !0, this._currentTimelineIcon = "pause", this._currentIcon = "square", this._mutableClassButton = "uc-shot-btn uc-camera-action uc-stop-record"), _ === CameraSourceEvents.STOP && (this._timerHidden = !1, this._cameraHidden = !0, this._audioToggleMicrophoneHidden = !0, this._cameraActionsHidden = !1), (_ === CameraSourceEvents.RETAKE || _ === CameraSourceEvents.ACCEPT) && (this._timerHidden = !0, this._tabVideoHidden = !this._cameraModes.includes(CameraSourceTypes.VIDEO), this._tabCameraHidden = !this._cameraModes.includes(CameraSourceTypes.PHOTO), this._cameraHidden = !1, this._cameraActionsHidden = !0, this._audioToggleMicrophoneHidden = !this.cfg.enableAudioRecording, this._currentIcon = "video-camera-full", this._mutableClassButton = "uc-shot-btn uc-camera-action", this._audioSelectHidden = !this.cfg.enableAudioRecording || this._audioDevices.length <= 1, this._cameraSelectHidden = this._cameraDevices.length <= 1);
+		}, this._setCameraState = (_) => {
+			this._activeTab === CameraSourceTypes.PHOTO && (_ === "shot" || _ === "retake" || _ === "accept") && this._handlePhoto(_), this._activeTab === CameraSourceTypes.VIDEO && (_ === "play" || _ === "stop" || _ === "retake" || _ === "accept" || _ === "pause" || _ === "resume") && this._handleVideo(_);
+		}, this._handleActiveTab = (v) => {
+			this._switcherRef.value?.querySelectorAll("button").forEach((e) => {
+				e.classList.toggle("uc-active", e.getAttribute("data-id") === v);
+			}), v === CameraSourceTypes.PHOTO && (this._currentIcon = "camera-full", this._audioSelectHidden = !0, this._audioToggleMicrophoneHidden = !0), v === CameraSourceTypes.VIDEO && (this._currentTimelineIcon = "play", this._currentIcon = "video-camera-full", this._audioSelectHidden = !this.cfg.enableAudioRecording || this._audioDevices.length <= 1, this._audioToggleMicrophoneHidden = !this.cfg.enableAudioRecording), this.telemetryManager.sendEvent({
+				eventType: InternalEventType.ACTION_EVENT,
+				payload: { metadata: {
+					event: "camera-tab-switch",
+					node: this.tagName,
+					tabId: v
+				} }
+			}), this._activeTab = v;
+		}, this._createFile = (e, _, v, y) => {
+			let b = Date.now(), x = `${e}-${b}.${_}`;
+			return new File([y], x, {
+				lastModified: b,
+				type: v
+			});
+		}, this._toSend = (e) => {
+			this.api.addFileFromObject(e, { source: UploadSource.CAMERA }), this.set$({ "*currentActivity": LitActivityBlock.activities.UPLOAD_LIST }), this.modalManager?.open(LitActivityBlock.activities.UPLOAD_LIST);
+		}, this._setPermissionsState = debounce((_) => {
+			this.classList.toggle("uc-initialized", _ === "granted");
+			let v = this._activeTab === CameraSourceTypes.VIDEO && this.cfg.enableAudioRecording, y = this._activeTab === CameraSourceTypes.PHOTO ? "camera-full" : "video-camera-full";
+			_ === "granted" ? (this._videoHidden = !1, this._cameraHidden = !1, this._tabCameraHidden = !this._cameraModes.includes(CameraSourceTypes.PHOTO), this._tabVideoHidden = !this._cameraModes.includes(CameraSourceTypes.VIDEO), this._messageHidden = !0, this._timerHidden = !0, this._currentIcon = y, this._audioToggleMicrophoneHidden = !v, this._audioSelectHidden = !v) : _ === "prompt" ? (this._l10nMessage = "camera-permissions-prompt", this._videoHidden = !0, this._cameraHidden = !0, this._tabCameraHidden = !0, this._messageHidden = !1, this._stopCapture()) : (this._l10nMessage = "camera-permissions-denied", this._videoHidden = !0, this._messageHidden = !1, this._tabCameraHidden = !this._cameraModes.includes(CameraSourceTypes.PHOTO), this._tabVideoHidden = !this._cameraModes.includes(CameraSourceTypes.VIDEO), this._cameraActionsHidden = !0, this._mutableClassButton = "uc-shot-btn uc-camera-action", this._stopCapture());
+		}, 300), this._makeStreamInactive = () => {
+			if (!this._stream) return !1;
+			let e = this._stream?.getAudioTracks(), _ = this._stream?.getVideoTracks();
+			return e.forEach((e) => {
+				e.stop();
+			}), _.forEach((e) => {
+				e.stop();
+			}), !0;
+		}, this._stopCapture = () => {
+			this._capturing &&= (this._videoRef.value && (this._videoRef.value.volume = 0), (this._currentVideoSource?.getTracks?.())?.[0]?.stop(), this._detachPreviewListeners(this._videoRef.value), this._setVideoSource(null), this._makeStreamInactive(), this._stopTimer(), !1);
+		}, this._capture = async () => {
+			let e = {
+				video: { ...DEFAULT_VIDEO_CONFIG },
+				audio: this.cfg.enableAudioRecording ? {} : !1
+			};
+			this._selectedCameraId && (e.video = { deviceId: { exact: this._selectedCameraId } }), this._selectedAudioId && this.cfg.enableAudioRecording && (e.audio = { deviceId: { exact: this._selectedAudioId } }), this._videoRef.value && (this._videoRef.value.volume = 0);
+			try {
+				this._setPermissionsState("prompt"), this._stream = await navigator.mediaDevices.getUserMedia(e), this._stream.addEventListener("inactive", () => {
+					this._setPermissionsState("denied");
+				}), this._setVideoSource(this._stream), this._capturing = !0, this._setPermissionsState("granted");
+			} catch (e) {
+				this._setPermissionsState("denied"), console.log("Failed to capture camera", e), this.telemetryManager.sendEventError(e, "camera capturing. Failed to capture camera");
+			}
+		}, this._handlePermissionsChange = () => {
+			this._capture();
+		}, this._permissionAccess = async () => {
+			try {
+				this._teardownPermissionListeners();
+				for (let e of DEFAULT_PERMISSIONS) {
+					let _ = await navigator.permissions.query({ name: e });
+					this._permissionResponses[e] = _, _.addEventListener("change", this._handlePermissionsChange), this._permissionCleanupFns.push(() => {
+						_.removeEventListener("change", this._handlePermissionsChange);
+					});
+				}
+				this._unsubPermissions = () => {
+					this._teardownPermissionListeners();
+				};
+			} catch (e) {
+				this._teardownPermissionListeners(), console.log("Failed to use permissions API. Fallback to manual request mode.", e), this.telemetryManager.sendEventError(e, "camera permissions. Failed to use permissions API"), this._capture();
+			}
+		}, this._requestDeviceAccess = async () => {
+			try {
+				await navigator.mediaDevices.getUserMedia({
+					video: !0,
+					audio: this.cfg.enableAudioRecording
+				}), await this._getDevices(), navigator.mediaDevices.addEventListener("devicechange", this._getDevices);
+			} catch (e) {
+				this.telemetryManager.sendEventError(e, "camera devices. Failed to get user media"), console.log("Failed to get user media", e);
+			}
+		}, this._getDevices = async () => {
+			try {
+				let e = await navigator.mediaDevices.enumerateDevices();
+				this._cameraDevices = e.filter((e) => e.kind === "videoinput").map((e, _) => ({
+					text: e.label.trim() || `${this.l10n("caption-camera")} ${_ + 1}`,
+					value: e.deviceId
+				})), this._audioDevices = this.cfg.enableAudioRecording ? e.filter((e) => e.kind === "audioinput").map((e) => ({
+					text: e.label.trim(),
+					value: e.deviceId
+				})) : [], this._cameraSelectOptions = this._cameraDevices, this._cameraSelectHidden = this._cameraDevices.length <= 1, this._selectedCameraId = this._cameraDevices[0]?.value ?? null, this._audioSelectOptions = this._audioDevices, this._audioSelectHidden = !this.cfg.enableAudioRecording || this._audioDevices.length <= 1, this._selectedAudioId = this._audioDevices[0]?.value ?? null;
+			} catch (e) {
+				this.telemetryManager.sendEventError(e, "camera devices. Failed to get devices"), console.log("Failed to get devices", e);
+			}
+		}, this._onActivate = async () => {
+			await this._permissionAccess(), await this._requestDeviceAccess(), await this._capture(), this._handleCameraModes(this._cameraModes);
+		}, this._onDeactivate = async () => {
+			this._unsubPermissions && this._unsubPermissions(), window.chrome || this._setPermissionsState("denied"), this._stopCapture();
+		}, this._handleCameraModes = (_) => {
+			this._tabVideoHidden = !_.includes(CameraSourceTypes.VIDEO), this._tabCameraHidden = !_.includes(CameraSourceTypes.PHOTO);
+			let v = _[0];
+			v && (!this._activeTab || !_.includes(this._activeTab)) && this._handleActiveTab(v);
+		};
+	}
+	_attachPreviewListeners(e) {
+		this._detachPreviewListeners(e), e.addEventListener("play", this._handlePreviewPlay), e.addEventListener("pause", this._handlePreviewPause);
+	}
+	_detachPreviewListeners(e) {
+		e?.removeEventListener("play", this._handlePreviewPlay), e?.removeEventListener("pause", this._handlePreviewPause);
+	}
+	_setVideoSource(e) {
+		this._currentVideoSource !== e && (this._currentVideoSource = e, this._applyVideoSource());
+	}
+	_applyVideoSource() {
+		let e = this._videoRef.value;
+		if (!e) return;
+		let _ = this._currentVideoSource ?? null;
+		e.srcObject !== _ && (e.srcObject = _);
+	}
+	_shot() {
+		if (this._setCameraState("shot"), this._canvas = document.createElement("canvas"), this._ctx = this._canvas.getContext("2d"), !this._ctx) throw Error("Failed to get canvas context");
+		let e = this._videoRef.value;
+		if (!e) throw Error("Video element not found");
+		this._canvas.height = e.videoHeight, this._canvas.width = e.videoWidth, this.cfg.cameraMirror && (this._ctx.translate(this._canvas.width, 0), this._ctx.scale(-1, 1)), this._ctx.drawImage(e, 0, 0), e.pause();
+	}
+	_guessExtensionByMime(e) {
+		let _ = {
+			mp4: "mp4",
+			ogg: "ogg",
+			webm: "webm",
+			quicktime: "mov",
+			"x-matroska": "mkv"
+		};
+		if (e === "") return "webm";
+		if (e) {
+			let v = e.split("/");
+			if (v?.[0] === "video") {
+				let e = v.slice(1).join("/")?.split(";")[0];
+				if (e && _[e]) return _[e];
+			}
+		}
+		return "avi";
+	}
+	get _cameraModes() {
+		return stringToArray(this.cfg.cameraModes).filter((_) => _ === CameraSourceTypes.PHOTO || _ === CameraSourceTypes.VIDEO);
+	}
+	_teardownPermissionListeners() {
+		if (this._permissionCleanupFns.length !== 0) {
+			for (let e of this._permissionCleanupFns) e();
+			this._permissionCleanupFns = [], this._unsubPermissions = null;
+		}
+	}
+	initCallback() {
+		super.initCallback(), this.subConfigValue("cameraMirror", (e) => {
+			this._videoTransformCss = e ? "scaleX(-1)" : null;
+		}), this.subConfigValue("enableAudioRecording", (e) => {
+			this._audioToggleMicrophoneHidden = !e, this._audioSelectDisabled = !e;
+		}), this.subConfigValue("cameraModes", (_) => {
+			if (!this.isConnected) return;
+			let v = deserializeCsv(_);
+			this._handleCameraModes(v.filter((_) => _ === CameraSourceTypes.PHOTO || _ === CameraSourceTypes.VIDEO));
+		}), this._onActivate();
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this._applyVideoSource();
+	}
+	updated(e) {
+		super.updated(e), this._applyVideoSource();
+	}
+	_destroy() {
+		this._teardownPermissionListeners(), navigator.mediaDevices?.removeEventListener("devicechange", this._getDevices), this._detachPreviewListeners(this._videoRef.value), this._setVideoSource(null);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._onDeactivate(), this._destroy();
+	}
+	render() {
+		return html`
+  <uc-activity-header>
+    <button
+      type="button"
+      class="uc-mini-btn"
+      @click=${this.$["*historyBack"]}
+      title=${this.l10n("back")}
+    >
+      <uc-icon name="back"></uc-icon>
+    </button>
+    <div ?hidden=${!this._cameraSelectHidden}>
+      <uc-icon name="camera"></uc-icon>
+      <span>${this.l10n("caption-camera")}</span>
+    </div>
+    <uc-select
+      class="uc-camera-select"
+      .options=${this._cameraSelectOptions}
+      ?hidden=${this._cameraSelectHidden}
+      @change=${this._handleCameraSelectChange}
+    >
+    </uc-select>
+    <button
+      type="button"
+      class="uc-mini-btn uc-close-btn"
+      @click=${this.$["*closeModal"]}
+      title=${this.l10n("a11y-activity-header-button-close")}
+      aria-label=${this.l10n("a11y-activity-header-button-close")}
+    >
+      <uc-icon name="close"></uc-icon>
+    </button>
+  </uc-activity-header>
+  <div class="uc-content">
+    <video
+      muted
+      autoplay
+      playsinline
+      style=${styleMap({ transform: this._videoTransformCss })}
+      ?hidden=${this._videoHidden}
+      ${ref(this._videoRef)}
+    ></video>
+    <div class="uc-message-box" ?hidden=${this._messageHidden}>
+      <span>${this.l10n(this._l10nMessage)}</span>
+      <button
+        type="button"
+        @click=${this._handleRequestPermissions}
+        ?hidden=${this._requestBtnHidden}
+        >${this.l10n("camera-permissions-request")}</button>
+    </div>
+  </div>
+
+  <div class="uc-controls">
+    <div ${ref(this._switcherRef)} class="uc-switcher" ?hidden=${!this._timerHidden}>
+      <button
+        data-id="photo"
+        type="button"
+        class="uc-switch uc-mini-btn"
+        @click=${this._handleClickTab}
+        ?hidden=${this._tabCameraHidden}
+        data-testid="tab-photo"
+      >
+        <uc-icon name="camera"></uc-icon>
+      </button>
+      <button
+        data-id="video"
+        type="button"
+        class="uc-switch uc-mini-btn"
+        @click=${this._handleClickTab}
+        ?hidden=${this._tabVideoHidden}
+        data-testid="tab-video"
+      >
+        <uc-icon name="video-camera"></uc-icon>
+      </button>
+    </div>
+
+    <button
+      class="uc-secondary-btn uc-recording-timer"
+      @click=${this._handleToggleRecording}
+      ?hidden=${this._timerHidden}
+      data-testid="recording-timer"
+    >
+      <uc-icon name=${this._currentTimelineIcon}></uc-icon>
+      <span ${ref(this._timerRef)}> 00:00 </span>
+      <span ${ref(this._lineRef)} class="uc-line"></span>
+    </button>
+
+    <div
+      class="uc-camera-actions uc-camera-action"
+      ?hidden=${this._cameraActionsHidden}
+    >
+      <button type="button" class="uc-secondary-btn" @click=${this._handleRetake}>
+        Retake
+      </button>
+      <button
+        type="button"
+        class="uc-primary-btn"
+        @click=${this._handleAccept}
+        data-testid="accept"
+      >
+        Accept
+      </button>
+    </div>
+
+    <button
+      type="button"
+      data-testid="shot"
+      @click=${this._handleStartCamera}
+      class=${this._mutableClassButton}
+      ?hidden=${this._cameraHidden}
+    >
+      <uc-icon name=${this._currentIcon}></uc-icon>
+    </button>
+
+    <div class="uc-select">
+      <button
+        type="button"
+        class="uc-mini-btn uc-btn-microphone"
+        @click=${this._handleToggleAudio}
+        ?hidden=${this._audioToggleMicrophoneHidden}
+        data-testid="toggle-microphone"
+      >
+        <uc-icon name=${this._toggleMicrophoneIcon}></uc-icon>
+      </button>
+
+      <uc-select
+        class="uc-audio-select"
+        .options=${this._audioSelectOptions}
+        ?hidden=${this._audioSelectHidden}
+        ?disabled=${this._audioSelectDisabled}
+        @change=${this._handleAudioSelectChange}
+        data-testid="audio-select"
+      >
+      </uc-select>
+    </div>
+  </div>
+`;
+	}
+};
+__decorate([state()], CameraSource.prototype, "_videoTransformCss", void 0), __decorate([state()], CameraSource.prototype, "_videoHidden", void 0), __decorate([state()], CameraSource.prototype, "_messageHidden", void 0), __decorate([state()], CameraSource.prototype, "_requestBtnHidden", void 0), __decorate([state()], CameraSource.prototype, "_cameraSelectOptions", void 0), __decorate([state()], CameraSource.prototype, "_cameraSelectHidden", void 0), __decorate([state()], CameraSource.prototype, "_l10nMessage", void 0), __decorate([state()], CameraSource.prototype, "_timerHidden", void 0), __decorate([state()], CameraSource.prototype, "_cameraHidden", void 0), __decorate([state()], CameraSource.prototype, "_cameraActionsHidden", void 0), __decorate([state()], CameraSource.prototype, "_audioSelectOptions", void 0), __decorate([state()], CameraSource.prototype, "_audioSelectHidden", void 0), __decorate([state()], CameraSource.prototype, "_audioSelectDisabled", void 0), __decorate([state()], CameraSource.prototype, "_audioToggleMicrophoneHidden", void 0), __decorate([state()], CameraSource.prototype, "_tabCameraHidden", void 0), __decorate([state()], CameraSource.prototype, "_tabVideoHidden", void 0), __decorate([state()], CameraSource.prototype, "_currentIcon", void 0), __decorate([state()], CameraSource.prototype, "_currentTimelineIcon", void 0), __decorate([state()], CameraSource.prototype, "_toggleMicrophoneIcon", void 0), __decorate([state()], CameraSource.prototype, "_mutableClassButton", void 0);
+export { CameraSource as t };

package/dist/CameraSource-px4BzEMI.js

@@ -0,0 +1,9 @@
+/**
+* @license
+* Package: @uploadcare/file-uploader@1.28.0-alpha.0 (MIT)
+* License: https://github.com/uploadcare/blob/main/LICENSE
+* Built: 2026-03-02T14:46:15.080Z
+*/
+import "./Icon-CqTVC82Q.js";
+import { t as CameraSource } from "./CameraSource-DbyO6GoK.js";
+export { CameraSource };