uapp-communication-sdk 1.0.0-dev.101

package/rtk-audio-visualizer_4.entry-xfJm5ZS2.js

@@ -0,0 +1,274 @@
+import { $ as e, G as t, J as n, Q as r, Y as i, Z as a, g as o } from "./ui-store-4fbabb78-D3qAYH9k.js";
+import { t as s } from "./index-8be19fcf-cQ0uyH2h.js";
+import { t as c } from "./hark-6327d91e-BC3gpCxb.js";
+import { t as l } from "./browser-24d8ab3e-NtKNY0W9.js";
+//#region node_modules/@cloudflare/realtimekit-ui/dist/esm/rtk-audio-visualizer_4.entry.js
+var u = (e, t) => {
+	if (e == null) return;
+	let n = [...[
+		,
+		,
+		,
+	]].map((e, n) => {
+		let r = n;
+		return r > 1 && (r = 3 - r - 1), Math.round((r + 1) / 3 * t);
+	}), { width: r, height: i } = e, a = e.getContext("2d"), o = 2, s = r * 1 / n.length, c = s - 4;
+	a.clearRect(0, 0, r, i), a.fillStyle = "rgb(0,0,0,0.0)", a.fillRect(0, 0, r, i);
+	let l = getComputedStyle(e).getPropertyValue("color");
+	a.fillStyle = l, a.strokeStyle = l, a.lineCap = "round", a.lineWidth = 4, a.beginPath();
+	for (let e of n) {
+		let t = Math.min(-Math.abs(e * 1.2 / 10 * i) + i / 2, i / 2 - 2.5), n = Math.max((i / 2 - t) * 2, 5);
+		a.moveTo(o + c / 2, t), a.lineTo(o + c / 2, t + n), o += s;
+	}
+	a.stroke();
+}, d = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;width:-moz-fit-content;width:fit-content}.audioActivePadding{padding:var(--rtk-space-1, 4px)}canvas,rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){transform:scale(0.9)}canvas{display:none}canvas.visible{display:block}canvas.bars{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}", f = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, p = class {
+	constructor(e) {
+		r(this, e), this.variant = "bars", this.iconPack = o, this.t = t(), this.hideMuted = !1, this.isScreenShare = !1, this.volume = 0;
+	}
+	connectedCallback() {
+		this.participantChanged(this.participant);
+	}
+	componentDidLoad() {
+		u(this.visualizer, 0);
+	}
+	disconnectedCallback() {
+		var e, t, n;
+		(e = this.hark) == null || e.stop(), this.audioUpdateListener && ((t = this.participant) == null || t.removeListener("audioUpdate", this.audioUpdateListener)), this.screenShareUpdateListener && ((n = this.participant) == null || n.removeListener("screenShareUpdate", this.screenShareUpdateListener));
+	}
+	participantChanged(e) {
+		e != null && (this.audioUpdateListener = ({ audioEnabled: e, audioTrack: t }) => {
+			var n;
+			if ((n = this.hark) == null || n.stop(), e && t != null) {
+				this.audioEnabled = !0;
+				let e = new MediaStream();
+				e.addTrack(t), this.calcVolume(e), u(this.visualizer, 0);
+			} else this.volume = 0, this.audioEnabled = !1;
+		}, this.isScreenShare ? (this.screenShareUpdateListener = ({ screenShareEnabled: e, screenShareTracks: t }) => {
+			this.audioUpdateListener({
+				audioEnabled: e && t.audio != null,
+				audioTrack: t.audio
+			});
+		}, this.screenShareUpdateListener({
+			screenShareEnabled: e.screenShareEnabled,
+			screenShareTracks: {
+				audio: e.screenShareTracks.audio,
+				video: e.screenShareTracks.video
+			}
+		}), e.addListener("screenShareUpdate", this.screenShareUpdateListener)) : (this.audioUpdateListener(e), e.addListener("audioUpdate", this.audioUpdateListener)));
+	}
+	calcVolume(e) {
+		this.hark = c(e, {
+			play: !1,
+			interval: 1e3 / 10
+		}), this.hark.on("volume_change", (e) => {
+			let t = this.volume, n = Math.round(10 ** (e / 115) * 10);
+			n < 3 && (n = 0);
+			let r = Math.round((t * 2 + n) / 3);
+			t !== r && (this.volume = r, u(this.visualizer, this.volume));
+		});
+	}
+	render() {
+		return this.hideMuted && !this.audioEnabled ? null : a(n, null, a("div", { class: { audioActivePadding: this.hideMuted && this.audioEnabled } }, a("canvas", {
+			width: "24",
+			height: "24",
+			class: {
+				bars: !0,
+				visible: this.audioEnabled
+			},
+			ref: (e) => this.visualizer = e,
+			part: "canvas"
+		}), !this.isScreenShare && !this.audioEnabled && a("rtk-icon", {
+			icon: this.iconPack.mic_off,
+			part: "mic-off-icon"
+		})));
+	}
+	static get watchers() {
+		return { participant: ["participantChanged"] };
+	}
+};
+f([s()], p.prototype, "iconPack", void 0), f([s()], p.prototype, "t", void 0), p.style = d;
+var m = ".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.inline.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0\\.5, 2px)}.inline.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline.container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}", h = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, g = class {
+	constructor(e) {
+		r(this, e), this.iconPack = o, this.variant = "full", this.t = t(), this.audioinputDevices = [], this.canProduceAudio = !0, this.currentDevices = { audio: void 0 }, this.stageStateListener = () => {
+			this.canProduceAudio = this.meeting.self.permissions.canProduceAudio === "ALLOWED";
+		}, this.deviceListUpdateListener = async () => {
+			let e = await this.meeting.self.getAudioDevices();
+			this.audioinputDevices = e;
+		}, this.deviceUpdateListener = ({ device: e }) => {
+			e.kind === "audioinput" && (this.currentDevices = { audio: e });
+		}, this.mediaPermissionUpdateListener = async ({ kind: e, message: t }) => {
+			this.meeting && e === "audio" && t === "ACCEPTED" && (this.audioinputDevices = await this.meeting.self.getAudioDevices());
+		};
+	}
+	connectedCallback() {
+		this.meetingChanged(this.meeting);
+	}
+	disconnectedCallback() {
+		var e, t, n, r;
+		(e = this.meeting?.stage) == null || e.removeListener("stageStatusUpdate", this.stageStateListener), (t = this.meeting) == null || t.self.removeListener("deviceListUpdate", this.deviceListUpdateListener), (n = this.meeting) == null || n.self.removeListener("deviceUpdate", this.deviceUpdateListener), (r = this.meeting) == null || r.self.removeListener("mediaPermissionUpdate", this.mediaPermissionUpdateListener);
+	}
+	meetingChanged(t) {
+		t && e(async () => {
+			let { self: e, stage: n } = t, r = await t.self.getAudioDevices(), i = t.self.getCurrentDevices()?.audio;
+			this.currentDevices = { audio: i }, this.canProduceAudio = t.self.permissions.canProduceAudio === "ALLOWED", n?.addListener("stageStatusUpdate", this.stageStateListener), e.addListener("deviceListUpdate", this.deviceListUpdateListener), e.addListener("deviceUpdate", this.deviceUpdateListener), e.addListener("mediaPermissionUpdate", this.mediaPermissionUpdateListener), i == null ? this.audioinputDevices = r : this.audioinputDevices = [r.find((e) => e.deviceId === i.deviceId) ?? i, ...r.filter((e) => e.deviceId !== i.deviceId)];
+		});
+	}
+	setDevice(e) {
+		var t;
+		if (l(this.meeting)) return;
+		let n = this.audioinputDevices.find((t) => t.deviceId === e);
+		n != null && (this.currentDevices = { audio: n }, (t = this.meeting) == null || t.self.setDevice(n));
+	}
+	render() {
+		if (!this.meeting) return null;
+		let e = 0;
+		return a(n, null, this.canProduceAudio && a("div", {
+			part: "microphone-selection",
+			class: "group container " + this.variant
+		}, a("label", { slot: "label" }, this.variant !== "inline" && this.t("settings.microphone_input"), a("rtk-icon", {
+			icon: this.iconPack.mic_on,
+			size: "sm"
+		})), a("div", { class: "row" }, a("select", {
+			class: "rtk-select",
+			onChange: (e) => this.setDevice(e.target.value)
+		}, this.audioinputDevices.map(({ deviceId: t, label: n }) => a("option", {
+			value: t,
+			selected: this.currentDevices.audio?.deviceId === t
+		}, n || `Microphone ${++e}`))), a("slot", { name: "indicator" }))));
+	}
+	static get watchers() {
+		return { meeting: ["meetingChanged"] };
+	}
+};
+h([s()], g.prototype, "meeting", void 0), h([s()], g.prototype, "iconPack", void 0), h([s()], g.prototype, "t", void 0), g.style = m;
+var _ = ".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.inline.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0\\.5, 2px)}.inline.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline .container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}", v = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, y = class {
+	constructor(e) {
+		r(this, e), this.variant = "full", this.iconPack = o, this.t = t(), this.speakerDevices = [], this.currentDevices = { speaker: void 0 }, this.deviceListUpdateListener = async () => {
+			let e = await this.meeting.self.getSpeakerDevices();
+			this.speakerDevices = e;
+		}, this.deviceUpdateListener = ({ device: e }) => {
+			e.kind === "audiooutput" && (this.currentDevices = { speaker: e });
+		}, this.mediaPermissionUpdate = async ({ kind: e, message: t }) => {
+			this.meeting && e === "audio" && t === "ACCEPTED" && (this.speakerDevices = await this.meeting.self.getSpeakerDevices());
+		};
+	}
+	connectedCallback() {
+		this.meetingChanged(this.meeting);
+	}
+	disconnectedCallback() {
+		var e, t, n;
+		(e = this.meeting) == null || e.self.removeListener("deviceListUpdate", this.deviceListUpdateListener), (t = this.meeting) == null || t.self.removeListener("deviceUpdate", this.deviceUpdateListener), (n = this.meeting) == null || n.self.addListener("mediaPermissionUpdate", this.mediaPermissionUpdate);
+	}
+	meetingChanged(t) {
+		t && e(async () => {
+			let { self: e } = t, n = await t.self.getSpeakerDevices(), r = t.self.getCurrentDevices()?.speaker;
+			this.currentDevices = { speaker: r }, e.addListener("deviceListUpdate", this.deviceListUpdateListener), e.addListener("deviceUpdate", this.deviceUpdateListener), e.addListener("mediaPermissionUpdate", this.mediaPermissionUpdate), r == null ? this.speakerDevices = n : this.speakerDevices = [n.find((e) => e.deviceId === r.deviceId) ?? r, ...n.filter((e) => e.deviceId !== r.deviceId)];
+		});
+	}
+	testAudio() {
+		var e;
+		(e = this.testAudioEl) == null || e.play();
+	}
+	setDevice(e) {
+		var t, n;
+		if (l(this.meeting)) return;
+		let r = this.speakerDevices.find((t) => t.deviceId === e);
+		this.currentDevices = { speaker: r }, r != null && ((t = this.meeting) == null || t.self.setDevice(r), (n = this.testAudioEl) == null || n.setSinkId(r.deviceId));
+	}
+	render() {
+		if (!this.meeting) return null;
+		let e = 0;
+		return a(n, null, a("audio", {
+			preload: "auto",
+			src: "https://rtk-assets.realtime.cloudflare.com/ui-kit/speaker-test.mp3",
+			ref: (e) => this.testAudioEl = e
+		}), a("div", {
+			class: "group " + this.variant,
+			part: "speaker-selection"
+		}, this.speakerDevices.length > 0 && !l(this.meeting) && a("div", { class: "container" }, a("label", null, this.variant !== "inline" && this.t("settings.speaker_output"), a("rtk-icon", {
+			icon: this.iconPack.speaker,
+			size: "sm"
+		})), a("div", { class: "row" }, a("select", {
+			class: "rtk-select",
+			onChange: (e) => this.setDevice(e.target.value)
+		}, this.speakerDevices.map(({ deviceId: t, label: n }) => a("option", {
+			value: t,
+			selected: this.currentDevices.speaker?.deviceId === t
+		}, n || `Speaker ${++e}`))))), this.variant === "full" && a("rtk-button", {
+			variant: "secondary",
+			onClick: () => this.testAudio()
+		}, a("rtk-icon", {
+			icon: this.iconPack.speaker,
+			slot: "start"
+		}), this.t("test"))));
+	}
+	static get watchers() {
+		return { meeting: ["meetingChanged"] };
+	}
+};
+v([s()], y.prototype, "meeting", void 0), v([s()], y.prototype, "states", void 0), v([s()], y.prototype, "iconPack", void 0), v([s()], y.prototype, "t", void 0), y.style = _;
+var b = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-10, 40px);align-items:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;background-color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer}.switch{box-sizing:border-box;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);background-color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:9999px;transition-property:var(--rtk-transition-property, all);transition-duration:200ms}:host(.checked){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host(.checked) .switch{transform:translateX(100%)}:host([readonly]),:host([disabled]){cursor:not-allowed;opacity:0.6}", x = function(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}, S = class {
+	constructor(e) {
+		r(this, e), this.onChange = i(this, "rtkChange", 4), this.checked = !1, this.readonly = !1, this.disabled = !1, this.iconPack = o, this.t = t(), this.onClick = () => {
+			!this.readonly && !this.disabled && (this.checked = !this.checked);
+		}, this.onKeyPress = (e) => {
+			if (!this.readonly) switch (e.key) {
+				case "Enter":
+				case " ":
+					this.checked = !this.checked;
+					break;
+			}
+		};
+	}
+	connectedCallback() {
+		this.checkedChange(this.checked);
+	}
+	checkedChange(e) {
+		this.checked = e, this.onChange.emit(e);
+	}
+	render() {
+		return a(n, {
+			key: "af0bcf0202cda77f3ec27510b867ed149c478bdf",
+			role: "switch",
+			tabIndex: this.disabled && 0,
+			"aria-readonly": this.readonly,
+			"aria-checked": this.checked,
+			"aria-disabled": this.disabled,
+			class: { checked: this.checked },
+			onClick: this.onClick,
+			onKeyPress: this.onKeyPress
+		}, a("div", {
+			key: "e6f5eeb8acf33e9f058b029423eddc099033053c",
+			class: "switch",
+			part: "switch"
+		}));
+	}
+	static get watchers() {
+		return { checked: ["checkedChange"] };
+	}
+};
+x([s()], S.prototype, "iconPack", void 0), x([s()], S.prototype, "t", void 0), S.style = b;
+//#endregion
+export { p as rtk_audio_visualizer, g as rtk_microphone_selector, y as rtk_speaker_selector, S as rtk_switch };
+
+//# sourceMappingURL=rtk-audio-visualizer_4.entry-xfJm5ZS2.js.map