@beterdichtbij/component-library 0.66.0-alpha.11 → 0.66.0-alpha.13

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

@@ -191186,103 +191186,114 @@ var gBe = { class: "video-call-template" }, _Be = {
 			deviceManager: null,
 			incomingCall: null,
 			call: null
-		}), E = M(null), ee = M(null), O = M(null), k = M(null), A = M(0), ne = M(0), ie = M(null), N = M(!1), ae = a(() => {
+		}), E = M(null), ee = M(null), O = M(null), k = M(null), A = M(0), ie = M(0), N = M(null), ae = M(!1), oe = a(() => {
 			switch (A.value) {
 				case 0: return g.value.hasNoAvailableCamera;
 				case 1: return g.value.hasOneAvailableCamera;
 				default: return g.value.hasMultipleAvailableCameras;
 			}
-		}), oe = a(() => {
+		}), ce = a(() => {
 			let e = navigator.userAgent;
 			return /Mobi/.test(e) && !_.value;
-		}), ce = a(() => {
+		}), le = 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);
-		}), le = a(() => !x.value?.video && _e.value), ue = a(() => !x.value?.audio && _e.value), F = a(() => S.value === Z9 ? "incoming--declined" : "incoming--loading"), de = a(() => {
+		}), ue = a(() => !x.value?.video && z.value), F = a(() => !x.value?.audio && z.value), de = a(() => S.value === Z9 ? "incoming--declined" : "incoming--loading"), I = a(() => {
 			switch (b.value) {
 				case 0: return "weak";
 				case 1: return "steady";
 				case 2: return "strong";
 				default: return null;
 			}
-		}), I = a(() => {
+		}), fe = a(() => {
 			switch (b.value) {
 				case 0: return g.value.signalStrength.weak;
 				case 1: return g.value.signalStrength.steady;
 				case 2: return g.value.signalStrength.strong;
 				default: return null;
 			}
-		}), fe = a(() => _.value ? g.value.stopSharingScreen : g.value.shareScreen), pe = a(() => g.value.placeholderSettingsHelpTitle), me = a(() => g.value.placeholderSettingsHelpMessage), L = a(() => S.value === Z9), he = a(() => S.value === FBe), R = a(() => S.value === IBe), ge = a(() => !R.value), _e = a(() => S.value === $9), z = a(() => he.value ? g.value.messageWhenVideoCallHangedUp : L.value ? g.value.messageWhenVideoCallDeclined : _e.value ? g.value.messageWhenDevicePermissionDenied : i.messageWhenLoading), ve = a(() => y.value ? ".incoming__screenshare" : ".incoming__video");
+		}), pe = a(() => _.value ? g.value.stopSharingScreen : g.value.shareScreen), me = a(() => g.value.placeholderSettingsHelpTitle), L = a(() => g.value.placeholderSettingsHelpMessage), he = a(() => S.value === Z9), R = a(() => S.value === FBe), ge = a(() => S.value === IBe), _e = a(() => !ge.value), z = a(() => S.value === $9), ve = a(() => R.value ? g.value.messageWhenVideoCallHangedUp : he.value ? g.value.messageWhenVideoCallDeclined : z.value ? g.value.messageWhenDevicePermissionDenied : i.messageWhenLoading), V = a(() => y.value ? ".incoming__screenshare" : ".incoming__video");
 		te(() => {
-			Ke();
+			console.log("onMounted"), qe();
+		}), ne(() => {
+			console.log("onUnmounted"), N.value && window.clearInterval(N.value), Ge();
 		});
-		function V() {
-			S.value = Z9;
+		function H() {
+			console.log("CallDeclined"), S.value = Z9;
 		}
-		function H() {}
 		function ye() {
-			S.value !== $9 && T.agent && (!T.call || T.call.state === "Disconnected") && we();
+			console.log("CallAnswered");
+		}
+		function be() {
+			console.log("CallStartVideoCall"), S.value !== $9 && !i.isCallee && Te();
 		}
-		async function be() {
-			S.value = FBe, x.value.video && He();
+		async function xe() {
+			console.log("CallHangUp"), S.value = FBe, x.value.video && Ue();
 		}
-		async function xe(e) {
-			T.client = w(new G9());
+		async function Se(e) {
+			console.log("InitializeAcsConnection"), T.client = w(new G9());
 			let t = new Hue(e);
 			T.agent = w(await T.client.createCallAgent(t)), T.deviceManager = await T.client.getDeviceManager(), x.value = await T.deviceManager.askDevicePermission({
 				video: !0,
 				audio: !0
-			}), ie.value = window.setInterval(He, 5e3), (!x.value.audio || !x.value.video) && (S.value = $9), i.isCallee && (T.agent.on("incomingCall", Se), o("ready"));
+			}), N.value = window.setInterval(Ue, 5e3), (!x.value.audio || !x.value.video) && (S.value = $9), i.isCallee && (T.agent.on("incomingCall", Ce), o("ready"));
 		}
-		async function Se(e) {
-			if (!N.value) try {
-				N.value = !0, T.incomingCall = e.incomingCall, await Te();
+		async function Ce(e) {
+			if (console.log("SetIncomingCall"), !ae.value) try {
+				ae.value = !0, T.incomingCall = e.incomingCall, await Ee();
 			} catch {
 				console.log("error occured during starting call");
 			} finally {
-				N.value = !1;
+				ae.value = !1;
 			}
 		}
-		async function Ce() {
-			let e = await Ee();
+		async function we() {
+			console.log("CreateNewVideoOptions");
+			let e = await De();
 			return e ? { localVideoStreams: [e] } : void 0;
 		}
-		async function we() {
+		async function Te() {
+			console.log("StartCall");
 			try {
-				if (!T.agent || !i.participant?.videoCallIdentityId || T.call && T.call.state !== "Disconnected") return;
-				let e = await Ce(), t = { communicationUserId: i.participant.videoCallIdentityId };
-				T.call = T.agent.startCall([t], { videoOptions: e }), Oe(), De();
+				let e = { videoOptions: await we() }, t = [{ communicationUserId: i.participant.videoCallIdentityId }];
+				T.call = T.agent.startCall(t, e), je(), Oe();
 			} catch (e) {
 				console.error(e);
 			}
 		}
-		async function Te() {
-			if (!T.incomingCall || T.call && T.call.state !== "Disconnected") return;
-			let e = await Ce();
-			T.call = await T.incomingCall.accept({ videoOptions: e }), Oe(), De();
-		}
 		async function Ee() {
+			console.log("AcceptCall");
+			let e = await we();
+			try {
+				T.call = await T.incomingCall.accept({ videoOptions: e });
+			} catch (e) {
+				console.error(e);
+			}
+			je(), Oe();
+		}
+		async function De() {
+			console.log("CreateLocalVideoStream");
 			let e = (await T.deviceManager.getCameras())[0];
 			if (e) return new Z6(e);
 			console.error("No camera device found on the system");
 		}
-		function De() {
-			T.call.on("stateChanged", Me), T.call.on("localVideoStreamsUpdated", (e) => {
-				e.added.forEach(Pe), e.removed.forEach(Ne);
-			}), T.call.remoteParticipants.forEach(Ie), T.call.on("remoteParticipantsUpdated", (e) => {
-				e.added.forEach(Ie);
+		function Oe() {
+			console.log("SubscribeToCall"), T.call.on("stateChanged", Ne), T.call.on("localVideoStreamsUpdated", (e) => {
+				e.added.forEach(Fe), e.removed.forEach(Pe);
+			}), T.call.remoteParticipants.forEach(Le), T.call.on("remoteParticipantsUpdated", (e) => {
+				e.added.forEach(Le);
 			}), T.call.on("isScreenSharingOnChanged", () => {
 				_.value = T.call.isScreenSharingOn;
 			});
 		}
-		function Oe() {
-			C.value = T.call.feature($5.UserFacingDiagnostics), C.value.media.on("diagnosticChanged", je), C.value.network.on("diagnosticChanged", je);
+		function je() {
+			console.log("SubscribeToDiagnostics"), C.value = T.call.feature($5.UserFacingDiagnostics), C.value.media.on("diagnosticChanged", Me), C.value.network.on("diagnosticChanged", Me);
 		}
-		function je(e) {
-			(e.diagnostic === "networkReceiveQuality" || e.diagnostic === "networkSendQuality") && (e.value === r6.Bad ? (console.error(`${e.diagnostic} is bad quality`), b.value = 0) : e.value === r6.Poor ? (console.error(`${e.diagnostic} is poor quality`), b.value = 1) : b.value = 2);
+		function Me(e) {
+			console.log("DiagnosticChangedListener"), (e.diagnostic === "networkReceiveQuality" || e.diagnostic === "networkSendQuality") && (e.value === r6.Bad ? (console.error(`${e.diagnostic} is bad quality`), b.value = 0) : e.value === r6.Poor ? (console.error(`${e.diagnostic} is poor quality`), b.value = 1) : b.value = 2);
 		}
-		function Me() {
-			switch (console.log("Call state changed to: " + T.call.state), T.call.state) {
+		function Ne() {
+			switch (console.log("CallStateIsChanged", T.call.state), T.call.state) {
 				case "EarlyMedia":
 					S.value = Q9;
 					break;
@@ -191293,20 +191304,20 @@ var gBe = { class: "video-call-template" }, _Be = {
 					S.value = IBe;
 					break;
 				case "Disconnected":
-					be();
+					xe();
 					break;
 			}
 		}
-		async function Ne(e) {
-			if (!e || e.mediaStreamType !== "ScreenSharing" || !k.value) return;
+		async function Pe(e) {
+			if (console.log("RemoveLocalScreenShareStream"), !e || e.mediaStreamType !== "ScreenSharing" || !k.value) return;
 			k.value.dispose();
 			let t = document.querySelector(".outgoing__screenshare");
 			t.style.display = "none";
 			let n = document.querySelector(".outgoing__video");
 			n.style.display = "flex";
 		}
-		async function Pe(e) {
-			if (!e || e.mediaStreamType !== "ScreenSharing") return;
+		async function Fe(e) {
+			if (console.log("DisplayLocalScreenShareStream"), !e || e.mediaStreamType !== "ScreenSharing") return;
 			k.value = await new A7(e).createView();
 			let t = document.querySelector(".outgoing__screenshare");
 			t.replaceChildren(k.value.target), t.style.display = "flex";
@@ -191315,8 +191326,8 @@ var gBe = { class: "video-call-template" }, _Be = {
 			let r = t.querySelector("video");
 			r.style.objectFit = "contain";
 		}
-		async function Fe(e) {
-			if (e && e.source && E.value && E.value.source && E.value.source.id == e.source.id) return !0;
+		async function Ie(e) {
+			if (console.log("DisplayLocalVideoStream"), e && e.source && E.value && E.value.source && E.value.source.id == e.source.id) return !0;
 			try {
 				ee.value = new A7(e);
 				let t = await ee.value.createView(), n = document.querySelector(".outgoing__video");
@@ -191326,79 +191337,83 @@ var gBe = { class: "video-call-template" }, _Be = {
 			}
 			return E.value = e, !0;
 		}
-		async function Ie(e) {
-			e.videoStreams.forEach(Le), e.on("videoStreamsUpdated", (e) => {
-				e.added.forEach(Le);
+		async function Le(e) {
+			console.log("SubscribeToRemoteParticipant"), e.videoStreams.forEach(Re), e.on("videoStreamsUpdated", (e) => {
+				e.added.forEach(Re);
 			});
 		}
-		async function Le(e) {
-			if (e.mediaStreamType === "Video" && (await Re(e), e.on("isAvailableChanged", async () => await Re(e))), e.mediaStreamType === "ScreenSharing" && e.on("isAvailableChanged", Be), e.mediaStreamType === "ScreenSharing" && e.isAvailable) {
+		async function Re(e) {
+			if (console.log("DisplayRemoteVideoStream"), e.mediaStreamType === "Video" && (await ze(e), e.on("isAvailableChanged", async () => await ze(e))), e.mediaStreamType === "ScreenSharing" && e.on("isAvailableChanged", Ve), e.mediaStreamType === "ScreenSharing" && e.isAvailable) {
 				O.value = new A7(e);
 				let t = await O.value.createView(), n = document.querySelector(".incoming__screenshare");
-				ze(!0), y.value = !0, Ue(".incoming__screenshare"), n.replaceChildren(t.target);
+				Be(!0), y.value = !0, We(".incoming__screenshare"), n.replaceChildren(t.target);
 			}
 		}
-		async function Re(e) {
-			if (!e.isAvailable) return;
+		async function ze(e) {
+			if (console.log("RenderVideo"), !e.isAvailable) return;
 			O.value = new A7(e);
 			let t = await O.value.createView(), n = document.querySelector(".incoming__video");
-			n.hidden = !1, n.replaceChildren(t.target), Ue(".incoming__video"), ze(!1);
+			n.hidden = !1, n.replaceChildren(t.target), We(".incoming__video"), Be(!1);
 		}
-		function ze(e) {
+		function Be(e) {
+			console.log("HideCameraStream");
 			let t = document.querySelector(".incoming__video"), n = document.querySelector(".incoming__screenshare");
 			t.style.display = e ? "none" : "block", n.style.display = e ? "flex" : "none";
 		}
-		function Be() {
-			y.value = !1, ze(!1);
+		function Ve() {
+			console.log("ScreenSharingAvailabilityChanged"), y.value = !1, Be(!1);
 		}
-		async function Ve() {
-			He(!0);
+		async function He() {
+			console.log("SwitchLocalVideoStream"), Ue(!0);
 		}
-		async function He(e = !1) {
+		async function Ue(e = !1) {
+			console.log("DisplayAvailableLocalVideoStream");
 			let t = T.call?.state;
 			if (t === "Connecting" || t === "EarlyMedia") return;
 			let n = (await T.deviceManager.getCameras()).filter((e) => e.name != "OBS Virtual Camera");
 			A.value = n.length;
 			for (let t = 0; t < A.value; t++) {
-				(e || t != 0) && (ne.value = (ne.value + 1) % A.value);
-				let r = n[ne.value];
-				if (await Fe(new Z6(r))) break;
+				(e || t != 0) && (ie.value = (ie.value + 1) % A.value);
+				let r = n[ie.value];
+				if (await Ie(new Z6(r))) break;
 			}
 		}
-		function Ue(e) {
+		function We(e) {
+			console.log("EnableMiniPlayerOnVideoElement");
 			let t = document.querySelector(e);
 			if (!t) return;
 			let n = t.querySelector("video");
 			n && (n.style.objectFit = "contain", n.disablePictureInPicture = !1);
 		}
-		async function We() {
-			T.call && T.call.state !== "Disconnected" && (await T.call.hangUp({ forEveryone: !0 }), await T.agent.dispose()), o("end-video-call"), window.close();
-		}
-		function Ge() {
-			window.close();
+		async function Ge() {
+			console.log("EndVideoCall"), T.call && T.call.state !== "Disconnected" && (await T.call.hangUp({ forEveryone: !0 }), await T.agent.dispose()), o("end-video-call"), window.close();
 		}
 		function Ke() {
-			_oe("verbose"), goe.log = (...e) => {
+			console.log("CloseWindow"), window.close();
+		}
+		function qe() {
+			console.log("InitAzureLogger"), _oe("verbose"), goe.log = (...e) => {
 				let t = [...e];
 				f.value = f.value.splice(1 - LBe).concat(t);
 			};
 		}
-		function qe() {
-			document.querySelector(ve.value).querySelector("video").requestFullscreen();
-		}
 		function Je() {
-			let e = document.querySelector(ve.value).querySelector("video");
+			console.log("ChangeToFullscreen"), document.querySelector(V.value).querySelector("video").requestFullscreen();
+		}
+		function Ye() {
+			console.log("ChangeToMiniPlayer");
+			let e = document.querySelector(V.value).querySelector("video");
 			document.pictureInPictureElement ? e.exitPictureInPicture() : document.pictureInPictureEnabled && e.requestPictureInPicture();
 		}
-		async function Ye() {
-			T.call && T.call.isScreenSharingOn ? await T.call.stopScreenSharing() : await T.call.startScreenSharing();
+		async function Xe() {
+			console.log("OnShareScreen"), T.call && T.call.isScreenSharingOn ? await T.call.stopScreenSharing() : await T.call.startScreenSharing();
 		}
 		return n({
-			CallDeclined: V,
-			CallAnswered: H,
-			CallStartVideoCall: ye,
-			CallHangUp: be,
-			InitializeAcsConnection: xe
+			CallDeclined: H,
+			CallAnswered: ye,
+			CallStartVideoCall: be,
+			CallHangUp: xe,
+			InitializeAcsConnection: Se
 		}), (n, r) => {
 			let a = se("BDLoader");
 			return j(), l("div", gBe, [m(ke, null, {
@@ -191414,21 +191429,21 @@ var gBe = { class: "video-call-template" }, _Be = {
 				}), m(Ae, null, {
 					default: B(() => [m(U, {
 						sm: "12",
-						lg: L.value ? "12" : "8"
+						lg: he.value ? "12" : "8"
 					}, {
-						default: B(() => [u("div", { class: D(["incoming", F.value]) }, [ge.value ? (j(), l("div", _Be, [
+						default: B(() => [u("div", { class: D(["incoming", de.value]) }, [_e.value ? (j(), l("div", _Be, [
 							m(a, {
 								size: "lg",
-								message: z.value,
-								stopAnimation: L.value || he.value || _e.value
+								message: ve.value,
+								stopAnimation: he.value || R.value || z.value
 							}, null, 8, ["message", "stopAnimation"]),
-							ue.value ? (j(), l("div", vBe, [u("div", yBe, [m(Mi, { class: "icon-xl icon-state-error" })]), u("span", null, P(g.value.permissionDeniedForAudio), 1)])) : c("", !0),
-							le.value ? (j(), l("div", bBe, [u("div", xBe, [m(eo, { class: "icon-xl icon-state-error" })]), u("span", null, P(g.value.permissionDeniedForVideo), 1)])) : c("", !0),
-							L.value || he.value || _e.value ? (j(), s(xo, {
+							F.value ? (j(), l("div", vBe, [u("div", yBe, [m(Mi, { class: "icon-xl icon-state-error" })]), u("span", null, P(g.value.permissionDeniedForAudio), 1)])) : c("", !0),
+							ue.value ? (j(), l("div", bBe, [u("div", xBe, [m(eo, { class: "icon-xl icon-state-error" })]), u("span", null, P(g.value.permissionDeniedForVideo), 1)])) : c("", !0),
+							he.value || R.value || z.value ? (j(), s(xo, {
 								key: 2,
 								variant: "primary",
 								class: "text-center",
-								onClick: Ge
+								onClick: Ke
 							}, {
 								default: B(() => [p(P(g.value.closeWindow), 1)]),
 								_: 1
@@ -191439,7 +191454,7 @@ var gBe = { class: "video-call-template" }, _Be = {
 							u("div", CBe, [m(xo, {
 								variant: "primary",
 								class: "text-center",
-								onClick: qe
+								onClick: Je
 							}, {
 								default: B(() => [m(ha), u("span", null, P(g.value.fullScreen), 1)]),
 								_: 1
@@ -191447,45 +191462,45 @@ var gBe = { class: "video-call-template" }, _Be = {
 								key: 0,
 								variant: "primary",
 								class: "text-center",
-								onClick: Je
+								onClick: Ye
 							}, {
 								default: B(() => [m(ha), u("span", null, P(g.value.miniPlayer), 1)]),
 								_: 1
 							})) : c("", !0)])
 						]))], 2)]),
 						_: 1
-					}, 8, ["lg"]), L.value ? c("", !0) : (j(), s(U, {
+					}, 8, ["lg"]), he.value ? c("", !0) : (j(), s(U, {
 						key: 0,
 						sm: "12",
 						lg: "4"
 					}, {
 						default: B(() => [u("div", wBe, [u("div", null, [u("div", TBe, [u("div", EBe, [
-							_e.value ? c("", !0) : (j(), l("div", DBe)),
+							z.value ? c("", !0) : (j(), l("div", DBe)),
 							r[2] ||= u("div", { class: "outgoing__screenshare" }, null, -1),
-							ce.value && !_e.value && !v.value && !ge.value ? (j(), s(xo, {
+							le.value && !z.value && !v.value && !_e.value ? (j(), s(xo, {
 								key: 1,
 								variant: _.value ? "danger" : "primary",
 								class: "text-center",
-								onClick: Ye
+								onClick: Xe
 							}, {
-								default: B(() => [m(ha), u("span", null, P(fe.value), 1)]),
+								default: B(() => [m(ha), u("span", null, P(pe.value), 1)]),
 								_: 1
 							}, 8, ["variant"])) : c("", !0),
-							oe.value ? (j(), l(t, { key: 2 }, [m(xo, {
+							ce.value ? (j(), l(t, { key: 2 }, [m(xo, {
 								class: "text-center",
-								onClick: Ve
+								onClick: He
 							}, {
 								default: B(() => [p(P(g.value.switchCamera), 1)]),
 								_: 1
-							}), u("p", OBe, P(ae.value), 1)], 64)) : c("", !0),
-							le.value ? (j(), l("div", kBe, [u("div", ABe, [m(eo, { class: "icon-xxl icon-state-error" })]), u("span", null, P(g.value.permissionDeniedForVideo), 1)])) : c("", !0)
-						])]), u("div", jBe, [u("div", { class: D(["settings__signal", de.value]) }, [r[3] ||= u("ul", { class: "indicator" }, [
+							}), u("p", OBe, P(oe.value), 1)], 64)) : c("", !0),
+							ue.value ? (j(), l("div", kBe, [u("div", ABe, [m(eo, { class: "icon-xxl icon-state-error" })]), u("span", null, P(g.value.permissionDeniedForVideo), 1)])) : c("", !0)
+						])]), u("div", jBe, [u("div", { class: D(["settings__signal", I.value]) }, [r[3] ||= u("ul", { class: "indicator" }, [
 							u("li"),
 							u("li"),
 							u("li")
-						], -1), u("p", null, P(I.value), 1)], 2), u("div", MBe, [
-							u("p", null, [u("b", null, P(pe.value), 1)]),
-							u("p", null, P(me.value), 1),
+						], -1), u("p", null, P(fe.value), 1)], 2), u("div", MBe, [
+							u("p", null, [u("b", null, P(me.value), 1)]),
+							u("p", null, P(L.value), 1),
 							u("p", null, [
 								u("a", {
 									href: i.videoTestUrl,
@@ -191495,11 +191510,11 @@ var gBe = { class: "video-call-template" }, _Be = {
 								r[4] ||= p(" • ", -1),
 								u("a", PBe, P(g.value.serviceDesk), 1)
 							])
-						])])]), !he.value && !_e.value ? (j(), s(xo, {
+						])])]), !R.value && !z.value ? (j(), s(xo, {
 							key: 0,
 							variant: "danger",
 							class: "text-center w-100",
-							onClick: We
+							onClick: Ge
 						}, {
 							default: B(() => [m(Fn), u("span", null, P(g.value.endCall), 1)]),
 							_: 1