@beterdichtbij/component-library 0.73.0 → 0.73.2

package/dist/bd-component-lib.es.js

@@ -32182,9 +32182,9 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 			call: null
 		}), ce = j(null), le = j(null), ue = j(null), de = j(null), fe = j(0), pe = j(0), me = j(null), he = j(!1), ge = j(""), _e = j(""), ve = j(null), ye = j(null), be = j(!0), xe = j(!1), Ce = j(!1), we = null, Te = null, Ee = null, De = a(() => {
 			switch (fe.value) {
-				case 0: return Ie.value.hasNoAvailableCamera;
-				case 1: return Ie.value.hasOneAvailableCamera;
-				default: return Ie.value.hasMultipleAvailableCameras;
+				case 0: return Re.value.hasNoAvailableCamera;
+				case 1: return Re.value.hasOneAvailableCamera;
+				default: return Re.value.hasMultipleAvailableCameras;
 			}
 		}), Oe = a(() => {
 			let e = navigator.userAgent;
@@ -32192,187 +32192,185 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 		}), ke = a(() => {
 			let e = navigator.userAgent, t = e.indexOf("Android") !== -1, n = /Mobi/.test(e), r = /iPad|iPhone|iPod/.test(e) && !window.MSStream;
 			return !(t && n || r);
-		}), Ae = a(() => !ae.value?.video && We.value), je = a(() => !ae.value?.audio && We.value), Me = a(() => oe.value === i.Declined ? "incoming--declined" : "incoming--loading");
-		a(() => {
+		}), Ae = a(() => !ae.value?.video && Ke.value), je = a(() => !ae.value?.audio && Ke.value), Me = a(() => oe.value === i.Declined ? "incoming--declined" : "incoming--loading"), Ne = a(() => {
 			switch (ne.value) {
 				case 0: return "weak";
 				case 1: return "steady";
 				case 2: return "strong";
 				default: return null;
 			}
-		}), a(() => {
+		}), Pe = a(() => {
 			switch (ne.value) {
 				case 0: return E.value.signalStrength.weak;
 				case 1: return E.value.signalStrength.steady;
 				case 2: return E.value.signalStrength.strong;
 				default: return null;
 			}
-		});
-		let Ne = a(() => E.value.videoCallTemplate || E.value), Pe = a(() => Ne.value.actions || Ne.value), L = a(() => Ne.value.help || Ne.value), Fe = a(() => Ne.value.permissions || Ne.value), Ie = a(() => Ne.value.cameraAvailability || Ne.value), Le = a(() => D.value ? Pe.value.stopSharingScreen : Pe.value.shareScreen), Re = a(() => L.value.placeholderSettingsHelpTitle), ze = a(() => L.value.placeholderSettingsHelpMessage), Be = a(() => oe.value === i.Declined), Ve = a(() => oe.value === i.HangedUp), He = a(() => oe.value === i.Connected), Ue = a(() => !He.value), We = a(() => oe.value === i.DevicePermissionDenied), Ge = a(() => Ne.value.statusTextMessage || Ne.value), Ke = a(() => Ne.value.statusDetailMessage || Ne.value), qe = a(() => b.participantRole), Je = a(() => Ce.value ? Pe.value.microphoneUnmute : Pe.value.microphoneMute), Ye = a(() => xe.value ? Pe.value.cameraOn : Pe.value.cameraOff), Xe = a(() => be.value ? Pe.value.backgroundBlur : Pe.value.backgroundUnblur);
-		function Ze(e) {
+		}), L = a(() => E.value.videoCallTemplate || E.value), Fe = a(() => L.value.actions || L.value), Ie = a(() => L.value.help || L.value), Le = a(() => L.value.permissions || L.value), Re = a(() => L.value.cameraAvailability || L.value), ze = a(() => D.value ? Fe.value.stopSharingScreen : Fe.value.shareScreen), Be = a(() => Ie.value.placeholderSettingsHelpTitle), Ve = a(() => Ie.value.placeholderSettingsHelpMessage), He = a(() => oe.value === i.Declined), Ue = a(() => oe.value === i.HangedUp), We = a(() => oe.value === i.Connected), Ge = a(() => !We.value), Ke = a(() => oe.value === i.DevicePermissionDenied), qe = a(() => L.value.statusTextMessage || L.value), Je = a(() => L.value.statusDetailMessage || L.value), Ye = a(() => b.participantRole), Xe = a(() => Ce.value ? Fe.value.microphoneUnmute : Fe.value.microphoneMute), Ze = a(() => xe.value ? Fe.value.cameraOn : Fe.value.cameraOff), Qe = a(() => be.value ? Fe.value.backgroundBlur : Fe.value.backgroundUnblur);
+		function $e(e) {
 			if (typeof e != "string") return e;
-			let t = e.replaceAll("{participantRole}", qe.value);
+			let t = e.replaceAll("{participantRole}", Ye.value);
 			return t && t.charAt(0).toLocaleUpperCase() + t.slice(1);
 		}
-		let Qe = a(() => {
+		let et = a(() => {
 			switch (oe.value) {
-				case i.Initializing: return Ze(Ge.value.initializing);
-				case i.Dialing: return Ze(Ge.value.dialing);
-				case i.Ringing: return Ze(Ge.value.ringing);
-				case i.Answered: return Ze(Ge.value.answered);
-				case i.Connected: return Ze(Ge.value.connected);
-				case i.Declined: return Ze(Ge.value.videoCallDeclined);
-				case i.HangedUp: return Ze(Ge.value.videoCallHangedUp);
-				case i.DevicePermissionDenied: return Ze(Ge.value.devicePermissionDenied);
-			}
-		}), $e = a(() => ge.value || Qe.value), et = a(() => _e.value), tt = a(() => ee.value ? ".incoming__screenshare" : ".incoming__video");
+				case i.Initializing: return $e(qe.value.initializing);
+				case i.Dialing: return $e(qe.value.dialing);
+				case i.Ringing: return $e(qe.value.ringing);
+				case i.Answered: return $e(qe.value.answered);
+				case i.Connected: return $e(qe.value.connected);
+				case i.Declined: return $e(qe.value.videoCallDeclined);
+				case i.HangedUp: return $e(qe.value.videoCallHangedUp);
+				case i.DevicePermissionDenied: return $e(qe.value.devicePermissionDenied);
+			}
+		}), tt = a(() => ge.value || et.value), nt = a(() => _e.value), rt = a(() => ee.value ? ".incoming__screenshare" : ".incoming__video");
 		te(() => {
-			Vt(), rt(), ye.value = window.setInterval(gt, 5e3);
+			Ut(), at(), ye.value = window.setInterval(vt, 5e3);
 		}), re(() => {
-			me.value && window.clearInterval(me.value), ye.value && window.clearInterval(ye.value), nt(), zt();
+			me.value && window.clearInterval(me.value), ye.value && window.clearInterval(ye.value), it(), Vt();
 		});
-		function nt() {
+		function it() {
 			we &&= (window.clearTimeout(we), null), Te &&= (window.clearTimeout(Te), null), Ee &&= (window.clearTimeout(Ee), null);
 		}
-		function rt() {
-			nt(), oe.value === i.Initializing ? we = window.setTimeout(() => {
-				oe.value === i.Initializing && (ge.value = Ze(Ge.value.callNotDelivered), _e.value = Ze(Ke.value.callNotDeliveredDetail));
+		function at() {
+			it(), oe.value === i.Initializing ? we = window.setTimeout(() => {
+				oe.value === i.Initializing && (ge.value = $e(qe.value.callNotDelivered), _e.value = $e(Je.value.callNotDeliveredDetail));
 			}, 3e4) : oe.value === i.Dialing ? Te = window.setTimeout(() => {
-				oe.value === i.Dialing && (ge.value = "", _e.value = Ze(Ke.value.notAnsweredDetail));
+				oe.value === i.Dialing && (ge.value = "", _e.value = $e(Je.value.notAnsweredDetail));
 			}, 1e4) : oe.value === i.Connected && (Ee = window.setTimeout(() => {
-				oe.value === i.Connected && (_e.value = Ze(Ke.value.noVideoHint));
+				oe.value === i.Connected && (_e.value = $e(Je.value.noVideoHint));
 			}, 5e3));
 		}
-		function it(e) {
+		function ot(e) {
 			[
 				i.Declined,
 				i.HangedUp,
 				i.DevicePermissionDenied
-			].includes(oe.value) || (oe.value = e, ge.value = "", _e.value = "", rt());
-		}
-		function at() {
-			Ce.value = !Ce.value, console.log("Microphone toggled");
-		}
-		function ot() {
-			xe.value = !xe.value, console.log("Camera toggled");
+			].includes(oe.value) || (oe.value = e, ge.value = "", _e.value = "", at());
 		}
 		function st() {
-			be.value = !be.value, console.log("Background blur toggled");
+			Ce.value = !Ce.value, console.log("Microphone toggled");
 		}
 		function ct() {
-			it(i.Declined);
+			xe.value = !xe.value, console.log("Camera toggled");
 		}
 		function lt() {
-			it(i.Answered);
+			be.value = !be.value, console.log("Background blur toggled");
 		}
 		function ut() {
-			oe.value !== i.Connected && it(i.Dialing);
+			ot(i.Declined);
 		}
 		function dt() {
-			oe.value !== i.DevicePermissionDenied && !b.isCallee && bt();
+			ot(i.Answered);
 		}
-		async function ft() {
-			it(i.HangedUp), ae.value.video && Lt();
+		function ft() {
+			oe.value !== i.Connected && ot(i.Dialing);
 		}
-		function pt(e) {
-			it(i.HangedUp), _e.value = Dt(e);
+		function pt() {
+			oe.value !== i.DevicePermissionDenied && !b.isCallee && St();
 		}
-		function mt() {
-			ge.value = Ze(Ge.value.signalHold), _e.value = Ze(Ke.value.signalHoldDetail);
+		async function mt() {
+			ot(i.HangedUp), ae.value.video && zt();
 		}
-		function ht() {
-			ve.value = /* @__PURE__ */ new Date();
+		function ht(e) {
+			ot(i.HangedUp), _e.value = kt(e);
 		}
 		function gt() {
+			ge.value = $e(qe.value.signalHold), _e.value = $e(Je.value.signalHoldDetail);
+		}
+		function _t() {
+			ve.value = /* @__PURE__ */ new Date();
+		}
+		function vt() {
 			if (!ve.value || oe.value === i.HangedUp) return;
 			let e = /* @__PURE__ */ new Date(), t = new Date(ve.value), n = Math.abs(e.getTime() - t.getTime()), r = Math.ceil(n / 1e3);
-			r >= 40 ? (ge.value = Ge.value.connectionIssues, _e.value = Ke.value.connectionIssuesStrong, ne.value = 0) : r > 20 && (ge.value = Ge.value.connectionIssues, _e.value = Ke.value.connectionIssuesMedium, ne.value = 1);
+			r >= 40 ? (ge.value = qe.value.connectionIssues, _e.value = Je.value.connectionIssuesStrong, ne.value = 0) : r > 20 && (ge.value = qe.value.connectionIssues, _e.value = Je.value.connectionIssuesMedium, ne.value = 1);
 		}
-		async function _t(e) {
-			await Bt(), N.client = w(new f());
+		async function yt(e) {
+			await Ht(), N.client = w(new f());
 			let t = new y(e);
 			if (N.agent = w(await N.client.createCallAgent(t)), N.deviceManager = await N.client.getDeviceManager(), ae.value = await N.deviceManager.askDevicePermission({
 				video: !0,
 				audio: !0
-			}), (await N.deviceManager.getCameras()).length || (ae.value.video = !1), me.value = window.setInterval(Lt, 5e3), !ae.value.audio || !ae.value.video) {
-				it(i.DevicePermissionDenied);
+			}), (await N.deviceManager.getCameras()).length || (ae.value.video = !1), me.value = window.setInterval(zt, 5e3), !ae.value.audio || !ae.value.video) {
+				ot(i.DevicePermissionDenied);
 				return;
 			}
-			N.agent.on("incomingCall", vt), b.isCallee ? x("ready") : x("start-call");
+			N.agent.on("incomingCall", bt), b.isCallee ? x("ready") : x("start-call");
 		}
-		async function vt(e) {
+		async function bt(e) {
 			if (!he.value) try {
-				he.value = !0, N.incomingCall = e.incomingCall, await xt();
+				he.value = !0, N.incomingCall = e.incomingCall, await Ct();
 			} catch (e) {
 				console.log("error occured during starting call", e);
 			} finally {
 				he.value = !1;
 			}
 		}
-		async function yt() {
-			let e = await St();
+		async function xt() {
+			let e = await wt();
 			return e ? { localVideoStreams: [e] } : void 0;
 		}
-		async function bt() {
+		async function St() {
 			try {
-				it(i.Dialing);
-				let e = { videoOptions: await yt() }, t = [{ communicationUserId: b.participant.videoCallIdentityId }];
-				N.call = N.agent.startCall(t, e), wt(), Ct();
+				ot(i.Dialing);
+				let e = { videoOptions: await xt() }, t = [{ communicationUserId: b.participant.videoCallIdentityId }];
+				N.call = N.agent.startCall(t, e), Et(), Tt();
 			} catch (e) {
 				console.error(e);
 			}
 		}
-		async function xt() {
-			let e = await yt();
+		async function Ct() {
+			let e = await xt();
 			try {
 				N.call = await N.incomingCall.accept({ videoOptions: e });
 			} catch (e) {
 				console.error("Error occurred during accepting call", e);
 			}
-			wt(), Ct();
+			Et(), Tt();
 		}
-		async function St() {
+		async function wt() {
 			let e = (await N.deviceManager.getCameras())[0];
 			if (e) return new g(e);
 			console.error("No camera device found on the system");
 		}
-		function Ct() {
-			N.call.on("stateChanged", Et), N.call.on("localVideoStreamsUpdated", (e) => {
-				e.added.forEach(kt), e.removed.forEach(Ot);
-			}), N.call.remoteParticipants.forEach(jt), N.call.on("remoteParticipantsUpdated", (e) => {
-				e.added.forEach(jt);
+		function Tt() {
+			N.call.on("stateChanged", Ot), N.call.on("localVideoStreamsUpdated", (e) => {
+				e.added.forEach(jt), e.removed.forEach(At);
+			}), N.call.remoteParticipants.forEach(Nt), N.call.on("remoteParticipantsUpdated", (e) => {
+				e.added.forEach(Nt);
 			}), N.call.on("isScreenSharingOnChanged", () => {
 				D.value = N.call.isScreenSharingOn;
 			});
 		}
-		function wt() {
-			M.value = N.call.feature(_.UserFacingDiagnostics), M.value.media.on("diagnosticChanged", Tt), M.value.network.on("diagnosticChanged", Tt);
+		function Et() {
+			M.value = N.call.feature(_.UserFacingDiagnostics), M.value.media.on("diagnosticChanged", Dt), M.value.network.on("diagnosticChanged", Dt);
 		}
-		function Tt(e) {
+		function Dt(e) {
 			(e.diagnostic === "networkReceiveQuality" || e.diagnostic === "networkSendQuality") && (e.value === v.Bad ? (console.error(`${e.diagnostic} is bad quality`), ne.value = 0) : e.value === v.Poor ? (console.error(`${e.diagnostic} is poor quality`), ne.value = 1) : ne.value = 2);
 		}
-		function Et() {
+		function Ot() {
 			switch (N.call.state) {
 				case "EarlyMedia":
-					it(i.Dialing);
+					ot(i.Dialing);
 					break;
 				case "Ringing":
-					it(i.Ringing);
+					ot(i.Ringing);
 					break;
 				case "Connected":
-					it(i.Connected);
+					ot(i.Connected);
 					break;
 				case "Disconnected":
 					let e = N.call.callEndReason;
-					console.log("Call end reason:", e), console.log("Code:", e?.code), console.log("SubCode:", e?.subCode), ft();
+					console.log("Call end reason:", e), console.log("Code:", e?.code), console.log("SubCode:", e?.subCode), mt();
 					break;
 			}
 		}
-		function Dt(e) {
+		function kt(e) {
 			let t = String(e);
-			return Ze(Ne.value.endReasons?.[t] || "");
+			return $e(L.value.endReasons?.[t] || "");
 		}
-		async function Ot(e) {
+		async function At(e) {
 			if (!e || e.mediaStreamType !== "ScreenSharing" || !de.value) return;
 			de.value.dispose();
 			let t = document.querySelector(".outgoing__screenshare");
@@ -32380,7 +32378,7 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 			let n = document.querySelector(".outgoing__video");
 			n.style.display = "flex";
 		}
-		async function kt(e) {
+		async function jt(e) {
 			if (!e || e.mediaStreamType !== "ScreenSharing") return;
 			de.value = await new h(e).createView();
 			let t = document.querySelector(".outgoing__screenshare");
@@ -32390,7 +32388,7 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 			let r = t.querySelector("video");
 			r.style.objectFit = "contain";
 		}
-		async function At(e) {
+		async function Mt(e) {
 			if (e && e.source && ce.value && ce.value.source && ce.value.source.id == e.source.id) return !0;
 			try {
 				le.value = new h(e);
@@ -32401,35 +32399,35 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 			}
 			return ce.value = e, !0;
 		}
-		async function jt(e) {
-			e.videoStreams.forEach(Mt), e.on("videoStreamsUpdated", (e) => {
-				e.added.forEach(Mt);
+		async function Nt(e) {
+			e.videoStreams.forEach(Pt), e.on("videoStreamsUpdated", (e) => {
+				e.added.forEach(Pt);
 			});
 		}
-		async function Mt(e) {
-			if (e.mediaStreamType === "Video" && (await Nt(e), e.on("isAvailableChanged", async () => await Nt(e))), e.mediaStreamType === "ScreenSharing" && e.on("isAvailableChanged", Ft), e.mediaStreamType === "ScreenSharing" && e.isAvailable) {
+		async function Pt(e) {
+			if (e.mediaStreamType === "Video" && (await Ft(e), e.on("isAvailableChanged", async () => await Ft(e))), e.mediaStreamType === "ScreenSharing" && e.on("isAvailableChanged", Lt), e.mediaStreamType === "ScreenSharing" && e.isAvailable) {
 				ue.value = new h(e);
 				let t = await ue.value.createView(), n = document.querySelector(".incoming__screenshare");
-				Pt(!0), ee.value = !0, Rt(".incoming__screenshare"), n.replaceChildren(t.target);
+				It(!0), ee.value = !0, Bt(".incoming__screenshare"), n.replaceChildren(t.target);
 			}
 		}
-		async function Nt(e) {
+		async function Ft(e) {
 			if (!e.isAvailable) return;
 			ue.value = new h(e);
 			let t = await ue.value.createView(), n = document.querySelector(".incoming__video");
-			n.hidden = !1, n.replaceChildren(t.target), Rt(".incoming__video"), Pt(!1);
+			n.hidden = !1, n.replaceChildren(t.target), Bt(".incoming__video"), It(!1);
 		}
-		function Pt(e) {
+		function It(e) {
 			let t = document.querySelector(".incoming__video"), n = document.querySelector(".incoming__screenshare");
 			t.style.display = e ? "none" : "block", n.style.display = e ? "flex" : "none";
 		}
-		function Ft() {
-			ee.value = !1, Pt(!1);
+		function Lt() {
+			ee.value = !1, It(!1);
 		}
-		async function It() {
-			Lt(!0);
+		async function Rt() {
+			zt(!0);
 		}
-		async function Lt(e = !1) {
+		async function zt(e = !1) {
 			let t = N.call?.state;
 			if (t === "Connecting" || t === "EarlyMedia") return;
 			let n = (await N.deviceManager.getCameras()).filter((e) => e.name != "OBS Virtual Camera");
@@ -32437,24 +32435,24 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 			for (let t = 0; t < fe.value; t++) {
 				(e || t != 0) && (pe.value = (pe.value + 1) % fe.value);
 				let r = n[pe.value];
-				if (await At(new g(r))) break;
+				if (await Mt(new g(r))) break;
 			}
 		}
-		function Rt(e) {
+		function Bt(e) {
 			let t = document.querySelector(e);
 			if (!t) return;
 			let n = t.querySelector("video");
 			n && (n.style.objectFit = "contain", n.disablePictureInPicture = !1);
 		}
-		async function zt() {
+		async function Vt() {
 			N.call && N.call.state !== "Disconnected" && (await N.call.hangUp({ forEveryone: !0 }), await N.agent.dispose()), x("end-call", C.value);
 		}
-		async function Bt() {
+		async function Ht() {
 			return o ||= Promise.all([import("@azure/communication-calling"), import("@azure/communication-common")]).then(([e, t]) => {
 				f = e.CallClient, h = e.VideoStreamRenderer, g = e.LocalVideoStream, _ = e.Features, v = e.DiagnosticQuality, y = t.AzureCommunicationTokenCredential;
 			}), o;
 		}
-		async function Vt() {
+		async function Ut() {
 			d ||= import("./browser-aFX0ImH2.js");
 			let { AzureLogger: e, setLogLevel: t } = await d;
 			e.log = (...e) => console.log(...e), t("info"), e.log = (...e) => {
@@ -32462,26 +32460,26 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 				C.value = C.value.splice(1 - TZ).concat(t);
 			};
 		}
-		function Ht() {
-			document.querySelector(tt.value).querySelector("video").requestFullscreen();
+		function Wt() {
+			document.querySelector(rt.value).querySelector("video").requestFullscreen();
 		}
-		function Ut() {
-			let e = document.querySelector(tt.value).querySelector("video");
+		function Gt() {
+			let e = document.querySelector(rt.value).querySelector("video");
 			document.pictureInPictureElement ? e.exitPictureInPicture() : document.pictureInPictureEnabled && e.requestPictureInPicture();
 		}
-		async function Wt() {
+		async function Kt() {
 			N.call && N.call.isScreenSharingOn ? await N.call.stopScreenSharing() : await N.call.startScreenSharing();
 		}
 		return n({
-			CallDeclined: ct,
-			CallAnswered: lt,
-			CallForDataReceived: ut,
-			CallClosedWithStatusCode: pt,
-			CallHeartbeatReceived: ht,
-			CallSignalHoldDetected: mt,
-			CallStartVideoCall: dt,
-			CallHangUp: ft,
-			InitializeAcsConnection: _t
+			CallDeclined: ut,
+			CallAnswered: dt,
+			CallForDataReceived: ft,
+			CallClosedWithStatusCode: ht,
+			CallHeartbeatReceived: _t,
+			CallSignalHoldDetected: gt,
+			CallStartVideoCall: pt,
+			CallHangUp: mt,
+			InitializeAcsConnection: yt
 		}), (e, n) => {
 			let r = se("BDLoader");
 			return A(), l("div", QX, [m(Xq, null, {
@@ -32494,23 +32492,23 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 				}), m(Zq, null, {
 					default: I(() => [m(Yq, {
 						sm: "12",
-						lg: Be.value ? "12" : "8"
+						lg: He.value ? "12" : "8"
 					}, {
-						default: I(() => [u("div", { class: O(["incoming", Me.value]) }, [Ue.value ? (A(), l("div", $X, [
+						default: I(() => [u("div", { class: O(["incoming", Me.value]) }, [Ge.value ? (A(), l("div", $X, [
 							m(r, {
 								size: "lg",
-								message: Qe.value,
-								stopAnimation: Be.value || Ve.value || We.value
+								message: et.value,
+								stopAnimation: He.value || Ue.value || Ke.value
 							}, null, 8, ["message", "stopAnimation"]),
-							je.value ? (A(), l("div", eZ, [u("div", tZ, [m(Ri, { class: "icon-xl icon-state-error" })]), u("span", null, P(Fe.value.permissionDeniedForAudio), 1)])) : c("", !0),
-							Ae.value ? (A(), l("div", nZ, [u("div", rZ, [m(oo, { class: "icon-xl icon-state-error" })]), u("span", null, P(Fe.value.permissionDeniedForVideo), 1)])) : c("", !0),
-							Be.value || Ve.value || We.value ? (A(), s(R, {
+							je.value ? (A(), l("div", eZ, [u("div", tZ, [m(Ri, { class: "icon-xl icon-state-error" })]), u("span", null, P(Le.value.permissionDeniedForAudio), 1)])) : c("", !0),
+							Ae.value ? (A(), l("div", nZ, [u("div", rZ, [m(oo, { class: "icon-xl icon-state-error" })]), u("span", null, P(Le.value.permissionDeniedForVideo), 1)])) : c("", !0),
+							He.value || Ue.value || Ke.value ? (A(), s(R, {
 								key: 2,
 								variant: "primary",
 								class: "text-center",
-								onClick: zt
+								onClick: Vt
 							}, {
-								default: I(() => [p(P(Pe.value.closeWindow), 1)]),
+								default: I(() => [p(P(Fe.value.closeWindow), 1)]),
 								_: 1
 							})) : c("", !0)
 						])) : (A(), l("div", iZ, [
@@ -32519,109 +32517,117 @@ var ZX = /*#__PURE__*/ L(JX, [["render", XX]]), QX = { class: "video-call-templa
 							u("div", aZ, [m(R, {
 								variant: "primary",
 								class: "text-center",
-								onClick: Ht
+								onClick: Wt
 							}, {
-								default: I(() => [m(xa), u("span", null, P(Pe.value.fullScreen), 1)]),
+								default: I(() => [m(xa), u("span", null, P(Fe.value.fullScreen), 1)]),
 								_: 1
 							}), !T && !k.value ? (A(), s(R, {
 								key: 0,
 								variant: "primary",
 								class: "text-center",
-								onClick: Ut
+								onClick: Gt
 							}, {
-								default: I(() => [m(xa), u("span", null, P(Pe.value.miniPlayer), 1)]),
+								default: I(() => [m(xa), u("span", null, P(Fe.value.miniPlayer), 1)]),
 								_: 1
 							})) : c("", !0)])
 						]))], 2)]),
 						_: 1
-					}, 8, ["lg"]), Be.value ? c("", !0) : (A(), s(Yq, {
+					}, 8, ["lg"]), He.value ? c("", !0) : (A(), s(Yq, {
 						key: 0,
 						sm: "12",
 						lg: "4"
 					}, {
 						default: I(() => [u("div", oZ, [u("div", null, [
 							u("div", sZ, [u("div", cZ, [
-								We.value ? c("", !0) : (A(), l("div", lZ)),
+								Ke.value ? c("", !0) : (A(), l("div", lZ)),
 								n[2] ||= u("div", { class: "outgoing__screenshare" }, null, -1),
 								u("div", uZ, [
 									Se((A(), s(R, {
 										class: O({ "btn-danger": Ce.value }),
-										onClick: at
+										onClick: st
 									}, {
 										default: I(() => [Ce.value ? (A(), l("img", {
 											key: 0,
 											src: BX,
-											alt: Je.value
+											alt: Xe.value
 										}, null, 8, dZ)) : (A(), l("img", {
 											key: 1,
 											src: VX,
-											alt: Je.value
+											alt: Xe.value
 										}, null, 8, fZ))]),
 										_: 1
-									}, 8, ["class"])), [[F(wK), Je.value]]),
+									}, 8, ["class"])), [[F(wK), Xe.value]]),
 									Se((A(), s(R, {
 										class: O({ "btn-danger": xe.value }),
-										onClick: ot
+										onClick: ct
 									}, {
 										default: I(() => [xe.value ? (A(), l("img", {
 											key: 0,
 											src: HX,
-											alt: Ye.value
+											alt: Ze.value
 										}, null, 8, pZ)) : (A(), l("img", {
 											key: 1,
 											src: UX,
-											alt: Ye.value
+											alt: Ze.value
 										}, null, 8, mZ))]),
 										_: 1
-									}, 8, ["class"])), [[F(wK), Ye.value]]),
+									}, 8, ["class"])), [[F(wK), Ze.value]]),
 									Se((A(), s(R, {
 										class: O(["blur-button", { off: be.value }]),
-										onClick: st
+										onClick: lt
 									}, {
 										default: I(() => [m(ZX), m(qX)]),
 										_: 1
-									}, 8, ["class"])), [[F(wK), Xe.value]])
+									}, 8, ["class"])), [[F(wK), Qe.value]])
 								]),
-								ke.value && !We.value && !k.value && !Ue.value ? (A(), s(R, {
+								ke.value && !Ke.value && !k.value && !Ge.value ? (A(), s(R, {
 									key: 1,
 									variant: D.value ? "danger" : "primary",
 									class: "share-button",
-									onClick: Wt
+									onClick: Kt
 								}, {
-									default: I(() => [m(xa), u("span", null, P(Le.value), 1)]),
+									default: I(() => [m(xa), u("span", null, P(ze.value), 1)]),
 									_: 1
 								}, 8, ["variant"])) : c("", !0),
 								Oe.value ? (A(), l(t, { key: 2 }, [m(R, {
 									class: "text-center",
-									onClick: It
+									onClick: Rt
 								}, {
-									default: I(() => [p(P(Pe.value.switchCamera), 1)]),
+									default: I(() => [p(P(Fe.value.switchCamera), 1)]),
 									_: 1
 								}), u("p", hZ, P(De.value), 1)], 64)) : c("", !0),
-								Ae.value ? (A(), l("div", gZ, [u("div", _Z, [m(oo, { class: "icon-xxl icon-state-error" })]), u("span", null, P(Fe.value.permissionDeniedForVideo), 1)])) : c("", !0)
+								Ae.value ? (A(), l("div", gZ, [u("div", _Z, [m(oo, { class: "icon-xxl icon-state-error" })]), u("span", null, P(Le.value.permissionDeniedForVideo), 1)])) : c("", !0)
 							])]),
-							!Ve.value && !We.value ? (A(), s(R, {
+							!Ue.value && !Ke.value ? (A(), s(R, {
 								key: 0,
 								variant: "danger",
 								class: "end-call-button text-center w-100",
-								onClick: zt
+								onClick: Vt
 							}, {
-								default: I(() => [m(zn), u("span", null, P(Pe.value.endCall), 1)]),
+								default: I(() => [m(zn), u("span", null, P(Fe.value.endCall), 1)]),
 								_: 1
 							})) : c("", !0),
-							u("div", vZ, [u("div", yZ, [u("p", bZ, P($e.value), 1), et.value ? (A(), l("small", xZ, P(et.value), 1)) : c("", !0)]), u("div", SZ, [
-								u("p", null, [u("b", null, P(Re.value), 1)]),
-								u("p", null, P(ze.value), 1),
-								u("p", null, [
-									u("a", {
-										href: b.videoTestUrl,
-										target: "_blank",
-										rel: "noopener noreferrer"
-									}, P(Pe.value.testCall), 9, CZ),
-									n[3] ||= p(" • ", -1),
-									u("a", wZ, P(Pe.value.serviceDesk), 1)
+							u("div", vZ, [
+								u("div", { class: O(["settings__signal", Ne.value]) }, [n[3] ||= u("ul", { class: "indicator" }, [
+									u("li"),
+									u("li"),
+									u("li")
+								], -1), u("p", null, P(Pe.value), 1)], 2),
+								u("div", yZ, [u("p", bZ, P(tt.value), 1), nt.value ? (A(), l("small", xZ, P(nt.value), 1)) : c("", !0)]),
+								u("div", SZ, [
+									u("p", null, [u("b", null, P(Be.value), 1)]),
+									u("p", null, P(Ve.value), 1),
+									u("p", null, [
+										u("a", {
+											href: b.videoTestUrl,
+											target: "_blank",
+											rel: "noopener noreferrer"
+										}, P(Fe.value.testCall), 9, CZ),
+										n[4] ||= p(" • ", -1),
+										u("a", wZ, P(Fe.value.serviceDesk), 1)
+									])
 								])
-							])])
+							])
 						])])]),
 						_: 1
 					}))]),