@camera.ui/server 2.1.11 → 2.1.13

package/dist/interface/ha/ungrouped-BpaM88Y-.js

@@ -0,0 +1,1116 @@
+import { Et as e, et as t, f as n, gt as r, i, m as a, rt as o } from "./ripple-BilzxWfY.js";
+import { n as s } from "./virtualscroller-s_gNqN5p.js";
+import { D as c, G as l, H as u, Jt as d, K as f, M as p, N as m, Wt as h, Y as g, d as _, f as v, kt as y, l as b, lt as x, ot as S, p as C, q as w, qt as T, r as E, rt as D, u as O, ut as k, x as A, xt as j, y as M, z as ee } from "./runtime-core.esm-bundler-D8slQ3BU.js";
+import { t as te } from "./tooltip-BIrD_hC8.js";
+import { Bn as ne, J as N, Nn as re, Pn as ie, Qn as ae, Un as oe, Y as se, Zn as P, _r as ce, at as le, fr as ue, gi as de, hr as fe, ia as pe, ir as me, jn as he, lt as ge, o as _e, or as ve, ot as ye, sr as be, ut as xe, vr as F, yr as Se, zn as Ce } from "./api-CWJkvtnM.js";
+import { _ as we, o as Te } from "./intercomService-jB2mTgsn.js";
+import { n as Ee } from "./vue-i18n-Dcb07o5U.js";
+import { M as De } from "./dist-Ca9_5rzq.js";
+import { t as I } from "./spinner-D6iUldg9.js";
+import { t as Oe } from "./button-BlYuI0Q7.js";
+//#region src/components/CuiRecordings/RecordingCard.vue?vue&type=script&setup=true&lang.ts
+var ke = ["src"], Ae = {
+	key: 2,
+	class: "w-full h-full flex items-center justify-center bg-neutral-800/80"
+}, je = { class: "absolute top-0 left-0 right-0 p-2 bg-gradient-to-b from-black/80 to-transparent z-[3]" }, Me = { class: "flex items-center gap-1.5" }, Ne = { class: "text-xs font-semibold text-white truncate min-w-0 flex-1" }, Pe = {
+	key: 1,
+	class: "text-[10px] font-semibold text-white/80 bg-black/60 px-1.5 py-0.5 rounded-md shrink-0"
+}, Fe = { class: "text-[10px] text-white/70" }, Ie = { class: "block text-[11px] text-white font-medium truncate bg-black/50 rounded-md px-2 py-0.5" }, Le = { class: "flex items-center gap-1 min-w-0" }, Re = ["title"], ze = {
+	key: 0,
+	class: "flex items-center gap-0.5 shrink-0 opacity-85 group-hover:opacity-100 transition-opacity duration-200"
+}, Be = ["onClick"], Ve = ["src", "alt"], He = {
+	key: 0,
+	class: "text-[10px] text-white/60 font-medium"
+}, Ue = {
+	key: 6,
+	class: "absolute inset-0 z-[4] flex items-center justify-center pointer-events-none"
+}, We = {
+	key: 7,
+	class: "absolute bottom-10 left-1/2 -translate-x-1/2 z-[4] pointer-events-none"
+}, Ge = {
+	class: "text-[10px] font-semibold text-white bg-black/60 px-1.5 py-0.5 rounded-md whitespace-nowrap",
+	style: { "font-variant-numeric": "tabular-nums" }
+}, Ke = 24, qe = 30, Je = 22, Ye = 28, Xe = 8, L = /*#__PURE__*/ F(/* @__PURE__ */ A({
+	__name: "RecordingCard",
+	props: {
+		event: {},
+		cameraName: {},
+		camera: {},
+		loadThumbnails: { type: Function },
+		semanticScore: {},
+		segIndex: {},
+		hideSegmentBadge: { type: Boolean },
+		selectionMode: { type: Boolean },
+		selected: { type: Boolean },
+		siblingActive: { type: Boolean }
+	},
+	emits: [
+		"scrollToEvent",
+		"select",
+		"openTrace"
+	],
+	setup(e, { emit: t }) {
+		let r = e, i = t, o = Te(), s = de(), { t: f } = Ee(), p = ae("@camera.ui/camera-ui-nvr"), { plugin: m } = De("@camera.ui/camera-ui-nvr"), { icons: w } = se(), T = p.getCachedThumbnails(r.event.id), A = T ? P(T, r.event, "card", r.segIndex).url ? "loaded" : "empty" : "loading", F = c(re, void 0), I = D("rootRef"), L = D("previewCanvasRef"), R = D("footerRef"), z = j(!1), B = N(I, () => xt(), () => $()), V = j(!1), H = j(T ?? null), U = j(A), W = j(!1), G = j(0), { width: Ze } = we(R), Qe = b(() => (p.storeVersion.value, r.event.segments?.find((e) => e?.description)?.description?.title)), K = b(() => {
+			if (r.semanticScore == null) return;
+			let e = Math.max(0, Math.min(1, r.semanticScore));
+			return {
+				pct: e,
+				label: `${(e * 100).toFixed(0)}%`,
+				color: e >= .5 ? "bg-green-500/80" : e >= .25 ? "bg-yellow-500/80" : "bg-red-400/80"
+			};
+		}), q = b(() => H.value ? P(H.value, r.event, "card", r.segIndex) : null), $e = b(() => {
+			let e = r.segIndex ?? q.value?.segIndex;
+			return e === void 0 ? void 0 : r.event.segments?.[e];
+		}), et = b(() => q.value?.url), tt = b(() => q.value?.label), nt = b(() => q.value?.type ?? r.event.types[0] ?? "motion"), rt = b(() => {
+			if (r.hideSegmentBadge) return;
+			let e = r.event.segments?.length ?? 0;
+			return r.segIndex !== void 0 && e > 1 ? `${r.segIndex + 1}/${e}` : void 0;
+		}), J = b(() => {
+			let e = H.value, t = q.value?.url;
+			if (!e || !t) return [];
+			let n = [{
+				url: t,
+				label: q.value?.label,
+				type: nt.value,
+				crop: !1
+			}];
+			for (let t of he(e, r.segIndex)) n.some((e) => e.url === t.url) || n.push({
+				url: t.url,
+				label: t.label,
+				type: t.type,
+				crop: !0
+			});
+			if (r.segIndex === void 0) for (let t of Object.keys(e.cards ?? e.strips ?? {}).sort((e, t) => Number(e) - Number(t))) {
+				let i = Ce(e.cards?.[t] ?? e.strips?.[t]);
+				if (!i || n.some((e) => e.url === i)) continue;
+				let a = ye(r.event, t);
+				n.push({
+					url: i,
+					label: a,
+					type: a,
+					crop: !1
+				});
+			}
+			return n.length > 1 ? n : [];
+		}), it = b(() => J.value.length > 1), Y = b(() => J.value.length ? Math.min(G.value, J.value.length - 1) : 0), at = b(() => it.value ? J.value[Y.value] : void 0), ot = b(() => !!at.value?.crop), st = b(() => at.value?.url ?? et.value), ct = b(() => at.value?.label ?? tt.value), X = b(() => {
+			let e = $e.value;
+			return (e ? oe(r.event, e) : [...new Set(r.event.types)]).filter((e) => e !== "motion" && e !== "audio");
+		}), lt = b(() => r.cameraName ?? r.event.cameraId), Z = b(() => J.value.map((e) => ({
+			url: e.url,
+			type: e.type
+		}))), ut = b(() => X.value.slice(0, Q.value.icons)), Q = b(() => {
+			let e = Ze.value;
+			if (!e) return {
+				icons: 2,
+				tiles: 2
+			};
+			let t = e - Xe;
+			r.selectionMode && (t -= Ye);
+			let n = Z.value.length > 0 ? 52 : 0, i = _t(X.value.length, Math.max(0, t - n), Ke), a = X.value.length > 0 ? Math.max(1, i) : 0, o = a * Ke + (a < X.value.length ? Je : 0);
+			return {
+				icons: a,
+				tiles: _t(Z.value.length, Math.max(0, t - o), qe)
+			};
+		}), dt = b(() => X.value.slice(Q.value.icons)), ft = b(() => Z.value.slice(0, Q.value.tiles)), pt = b(() => Z.value.length - Q.value.tiles), mt = b(() => {
+			let e = r.segIndex === void 0 ? void 0 : r.event.segments?.[r.segIndex]?.firstSeen, t = new Date(e ?? r.event.thumbnailAt ?? r.event.startTime), n = /* @__PURE__ */ new Date(), i = t.toDateString() === n.toDateString(), a = t.toLocaleTimeString([], {
+				hour: "2-digit",
+				minute: "2-digit"
+			});
+			return i ? a : `${t.toLocaleDateString([], {
+				month: "short",
+				day: "numeric"
+			})} ${a}`;
+		}), ht = b(() => !!(m.value && r.event.endTime && r.event.hasRecording !== !1)), gt = b(() => F ? z.value ? f("views.recordings.no_preview") : V.value ? F.status.value === "unavailable" ? f("views.recordings.no_preview") : F.status.value === "playing" && F.previewTimeMs.value ? bt(F.previewTimeMs.value) : "" : "" : "");
+		function _t(e, t, n) {
+			return e === 0 || t < n ? 0 : e * n <= t ? e : Math.max(0, Math.floor((t - Je) / n));
+		}
+		function vt(e) {
+			let t = J.value.length;
+			t && ($(), G.value = (Y.value + e + t) % t);
+		}
+		function yt(e, t) {
+			it.value && (t.stopPropagation(), $(), G.value = e);
+		}
+		function $() {
+			z.value = !1, !(!F || !V.value) && (V.value = !1, F.onHoverEnd());
+		}
+		function bt(e) {
+			let t = new Date(e);
+			return `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}:${String(t.getSeconds()).padStart(2, "0")}`;
+		}
+		function xt() {
+			if (!F || Y.value > 0) return;
+			let e = L.value;
+			if (!e) return;
+			let t = ne(r.event);
+			if (r.event.hasRecording === !1 || !t) {
+				z.value = !0;
+				return;
+			}
+			V.value = !0, F.onHoverStart(e, r.event.cameraId, r.event.id, r.event.startTime, t, r.camera?.zones?.privacy, ie(r.event));
+		}
+		function St() {
+			B.blocksMouseEnter() || xt();
+		}
+		function Ct() {
+			z.value = !1, F && (V.value = !1, F.onHoverEnd());
+		}
+		async function wt(e = 2) {
+			let t = await r.loadThumbnails(r.event.id, r.event.startTime);
+			if (t) {
+				H.value = t;
+				let e = P(t, r.event, "card");
+				U.value = e.url ? "loaded" : "empty";
+			} else if (e > 0) return await new Promise((e) => setTimeout(e, 500)), wt(e - 1);
+			else U.value = r.event.state === "active" ? "loading" : "empty";
+		}
+		function Tt() {
+			if (!B.consumesClick()) {
+				if (r.selectionMode) {
+					i("select");
+					return;
+				}
+				i("scrollToEvent", $e.value?.firstSeen ?? le(r.event));
+			}
+		}
+		async function Et() {
+			if (W.value) return;
+			let e = m.value;
+			if (!(!e?.nvrExport || !r.event.endTime)) {
+				W.value = !0;
+				try {
+					let t = await e.nvrExport(r.event.cameraId, r.event.startTime * 1e3, r.event.endTime * 1e3);
+					await fe({
+						url: t.url,
+						filename: t.filename
+					});
+				} catch (e) {
+					o.error("Download failed:", e), s.add({
+						severity: "error",
+						summary: f("views.recordings.download_failed"),
+						detail: _e(e),
+						life: 5e3
+					});
+				} finally {
+					W.value = !1;
+				}
+			}
+		}
+		return S(() => p.storeVersion.value, () => {
+			let e = p.getCachedThumbnails(r.event.id);
+			e && (H.value = e, P(e, r.event, "card").url && (U.value = "loaded"));
+		}), ee(() => {
+			A === "loading" && wt();
+		}), (t, r) => {
+			let o = pe, s = ce, c = me, f = ge, p = Oe, m = xe, b = ve, S = be, T = ue, D = Se, A = te;
+			return u(), C("div", {
+				ref_key: "rootRef",
+				ref: I,
+				class: "recording-card relative group cursor-pointer",
+				onClick: Tt,
+				onMouseenter: St,
+				onMouseleave: Ct
+			}, [O("div", {
+				class: h(["bg-neutral-900 w-full rounded-xl overflow-hidden relative transition-shadow duration-200", { "ring-2 ring-inset ring-primary/70": e.siblingActive }]),
+				style: { "aspect-ratio": "1/1" }
+			}, [
+				y(U) === "loading" ? (u(), _(o, {
+					key: 0,
+					width: "100%",
+					height: "100%",
+					class: "rounded-xl"
+				})) : y(st) ? (u(), C(E, { key: 1 }, [y(ot) ? (u(), C("img", {
+					key: 0,
+					src: y(st),
+					"aria-hidden": "true",
+					class: "absolute inset-0 w-full h-full object-cover blur-xl scale-110 opacity-50 pointer-events-none"
+				}, null, 8, ke)) : v("", !0), M(s, {
+					src: y(st),
+					alt: y(lt),
+					class: "pointer-events-none w-full h-full transition-transform duration-300 group-hover:scale-105",
+					"image-style": { objectFit: y(ot) ? "contain" : "cover" },
+					"image-container-class": "w-full h-full"
+				}, null, 8, [
+					"src",
+					"alt",
+					"image-style"
+				])], 64)) : (u(), C("div", Ae, [(u(), _(g(y(w)[y(nt)] ?? y(w).motion), { class: "w-10 h-10 text-white/20" }))])),
+				y(F) ? k((u(), C("canvas", {
+					key: 3,
+					ref_key: "previewCanvasRef",
+					ref: L,
+					class: "absolute inset-0 w-full h-full object-cover pointer-events-none z-[1]"
+				}, null, 512)), [[n, y(V)]]) : v("", !0),
+				r[3] ||= O("div", { class: "absolute inset-0 bg-transparent group-hover:bg-black/30 pointer-events-none transition-colors duration-200 z-[2]" }, null, -1),
+				O("div", je, [O("div", Me, [
+					y(Qe) ? (u(), _(c, {
+						key: 0,
+						position: "inline"
+					})) : v("", !0),
+					O("p", Ne, d(y(lt)), 1),
+					y(rt) ? (u(), C("span", Pe, d(y(rt)), 1)) : v("", !0),
+					y(K) ? (u(), C("span", {
+						key: 2,
+						class: h(["text-[10px] font-bold text-white px-1.5 py-0.5 rounded-md shrink-0", y(K).color])
+					}, d(y(K).label), 3)) : v("", !0),
+					e.camera && !e.selectionMode ? k((u(), _(p, {
+						key: 3,
+						rounded: "",
+						text: "",
+						severity: "secondary",
+						class: "!w-5 !h-5 !p-0 shrink-0 bg-black/60 hover:!bg-black/80",
+						onClick: r[0] ||= a((e) => i("openTrace"), ["stop"]),
+						onMouseenter: $
+					}, {
+						icon: x(() => [M(f, { class: "w-3 h-3 text-white" })]),
+						_: 1
+					})), [[
+						A,
+						{ value: t.$t("views.recordings.open_trace") },
+						void 0,
+						{ left: !0 }
+					]]) : v("", !0),
+					y(ht) && !e.selectionMode ? k((u(), _(p, {
+						key: 4,
+						rounded: "",
+						text: "",
+						severity: "secondary",
+						loading: y(W),
+						class: "!w-5 !h-5 !p-0 shrink-0 bg-black/60 hover:!bg-black/80",
+						onClick: a(Et, ["stop"]),
+						onMouseenter: $
+					}, {
+						icon: x(() => [M(m, { class: "w-3 h-3 text-white" })]),
+						_: 1
+					}, 8, ["loading"])), [[
+						A,
+						{ value: t.$t("views.recordings.download") },
+						void 0,
+						{ left: !0 }
+					]]) : v("", !0)
+				]), O("p", Fe, d(y(mt)), 1)]),
+				y(J).length > 1 ? (u(), C(E, { key: 4 }, [M(p, {
+					rounded: "",
+					text: "",
+					severity: "secondary",
+					class: "carousel-nav !absolute left-1 top-1/2 -translate-y-1/2 z-[3] !w-7 !h-7 !p-0 bg-black/40 hover:!bg-black/60 transition-opacity duration-200",
+					"aria-label": t.$t("views.recordings.prev_image"),
+					onClick: r[1] ||= a((e) => vt(-1), ["stop"]),
+					onMouseenter: $
+				}, {
+					icon: x(() => [M(b, { class: "w-5 h-5 text-white" })]),
+					_: 1
+				}, 8, ["aria-label"]), M(p, {
+					rounded: "",
+					text: "",
+					severity: "secondary",
+					class: "carousel-nav !absolute right-1 top-1/2 -translate-y-1/2 z-[3] !w-7 !h-7 !p-0 bg-black/40 hover:!bg-black/60 transition-opacity duration-200",
+					"aria-label": t.$t("views.recordings.next_image"),
+					onClick: r[2] ||= a((e) => vt(1), ["stop"]),
+					onMouseenter: $
+				}, {
+					icon: x(() => [M(S, { class: "w-5 h-5 text-white" })]),
+					_: 1
+				}, 8, ["aria-label"])], 64)) : v("", !0),
+				y(ct) ? (u(), C("div", {
+					key: 5,
+					class: h(["absolute left-1/2 -translate-x-1/2 z-[3] max-w-[85%] pointer-events-none transition-all duration-200", y(gt) ? "bottom-16" : "bottom-10"])
+				}, [O("span", Ie, d(y(ct)), 1)], 2)) : v("", !0),
+				O("div", {
+					ref_key: "footerRef",
+					ref: R,
+					class: "absolute bottom-2 left-2 right-2 flex items-center justify-between gap-2 z-[3]"
+				}, [O("div", Le, [
+					e.selectionMode ? (u(), C("div", {
+						key: 0,
+						class: h(["w-6 h-6 rounded-full border-2 flex items-center justify-center transition-colors shrink-0", e.selected ? "bg-primary border-primary" : "bg-black/40 border-white/80"])
+					}, [e.selected ? (u(), _(T, {
+						key: 0,
+						class: "w-4 h-4 text-white"
+					})) : v("", !0)], 2)) : v("", !0),
+					(u(!0), C(E, null, l(y(ut), (e) => (u(), C("div", {
+						key: e,
+						class: "flex items-center justify-center w-5 h-5 rounded-md bg-black/60 shrink-0"
+					}, [(u(), _(g(y(w)[e] ?? y(w).motion), { class: "w-3 h-3 text-white/80" }))]))), 128)),
+					y(dt).length > 0 ? (u(), C("span", {
+						key: 1,
+						title: y(dt).join(", "),
+						class: "text-[10px] text-white/60 font-medium shrink-0"
+					}, " +" + d(y(dt).length), 9, Re)) : v("", !0)
+				]), y(ft).length > 0 || y(pt) > 0 ? (u(), C("div", ze, [(u(!0), C(E, null, l(y(ft), (e, t) => (u(), C("div", {
+					key: t,
+					class: h(["w-7 h-7 rounded overflow-hidden border bg-neutral-800 cursor-pointer", t === y(Y) ? "border-primary/80" : "border-white/20"]),
+					onClick: (e) => yt(t, e)
+				}, [O("img", {
+					src: e.url,
+					alt: e.type,
+					decoding: "async",
+					loading: "lazy",
+					class: "w-full h-full object-cover"
+				}, null, 8, Ve)], 10, Be))), 128)), y(pt) > 0 ? (u(), C("span", He, "+" + d(y(pt)), 1)) : v("", !0)])) : v("", !0)], 512),
+				y(F) && y(V) && y(F).isLoading.value ? (u(), C("div", Ue, [M(D, {
+					class: "w-[28px] h-[28px] m-0",
+					"stroke-width": "6"
+				})])) : v("", !0),
+				y(gt) ? (u(), C("div", We, [O("span", Ge, d(y(gt)), 1)])) : v("", !0)
+			], 2)], 544);
+		};
+	}
+}), [["__scopeId", "data-v-97ad8176"]]), R = {
+	name: "VirtualScroller",
+	components: { SpinnerIcon: I },
+	extends: {
+		name: "BaseVirtualScroller",
+		extends: i,
+		provide() {
+			return {
+				$pcVirtualScroller: this,
+				$parentInstance: this
+			};
+		},
+		props: {
+			id: {
+				type: String,
+				default: null
+			},
+			style: null,
+			class: null,
+			items: {
+				type: Array,
+				default: null
+			},
+			itemSize: {
+				type: [Number, Array],
+				default: 0
+			},
+			scrollHeight: null,
+			scrollWidth: null,
+			orientation: {
+				type: String,
+				default: "vertical"
+			},
+			rtl: {
+				type: Boolean,
+				default: !1
+			},
+			numToleratedItems: {
+				type: Number,
+				default: null
+			},
+			delay: {
+				type: Number,
+				default: 0
+			},
+			resizeDelay: {
+				type: Number,
+				default: 10
+			},
+			lazy: {
+				type: Boolean,
+				default: !1
+			},
+			disabled: {
+				type: Boolean,
+				default: !1
+			},
+			loaderDisabled: {
+				type: Boolean,
+				default: !1
+			},
+			columns: {
+				type: Array,
+				default: null
+			},
+			loading: {
+				type: Boolean,
+				default: !1
+			},
+			showSpacer: {
+				type: Boolean,
+				default: !0
+			},
+			showLoader: {
+				type: Boolean,
+				default: !1
+			},
+			tabindex: {
+				type: Number,
+				default: 0
+			},
+			inline: {
+				type: Boolean,
+				default: !1
+			},
+			step: {
+				type: Number,
+				default: 0
+			},
+			appendOnly: {
+				type: Boolean,
+				default: !1
+			},
+			autoSize: {
+				type: Boolean,
+				default: !1
+			},
+			itemKey: {
+				type: [String, Function],
+				default: null
+			}
+		},
+		style: s,
+		beforeMount() {
+			s.loadCSS({ nonce: this.$primevueConfig?.csp?.nonce });
+		}
+	},
+	inheritAttrs: !1,
+	emits: [
+		"update:numToleratedItems",
+		"scroll",
+		"scroll-index-change",
+		"lazy-load"
+	],
+	data() {
+		let e = this.isBoth();
+		return {
+			first: e ? {
+				rows: 0,
+				cols: 0
+			} : 0,
+			last: e ? {
+				rows: 0,
+				cols: 0
+			} : 0,
+			page: e ? {
+				rows: 0,
+				cols: 0
+			} : 0,
+			numItemsInViewport: e ? {
+				rows: 0,
+				cols: 0
+			} : 0,
+			lastScrollPos: e ? {
+				top: 0,
+				left: 0
+			} : 0,
+			d_numToleratedItems: this.numToleratedItems,
+			d_loading: this.loading,
+			loaderArr: [],
+			spacerStyle: {},
+			contentStyle: {}
+		};
+	},
+	element: null,
+	content: null,
+	lastScrollPos: null,
+	scrollTimeout: null,
+	resizeTimeout: null,
+	defaultWidth: 0,
+	defaultHeight: 0,
+	defaultContentWidth: 0,
+	defaultContentHeight: 0,
+	isRangeChanged: !1,
+	lazyLoadState: {},
+	resizeListener: null,
+	initialized: !1,
+	computed: {
+		containerClass() {
+			return [
+				"p-virtualscroller",
+				this.class,
+				{
+					"p-virtualscroller-inline": this.inline,
+					"p-virtualscroller-both p-both-scroll": this.isBoth(),
+					"p-virtualscroller-horizontal p-horizontal-scroll": this.isHorizontal(),
+					"p-virtualscroller-rtl": this.rtl && this.isHorizontal()
+				}
+			];
+		},
+		contentClass() {
+			return ["p-virtualscroller-content", { "p-virtualscroller-loading": this.d_loading }];
+		},
+		loaderClass() {
+			return ["p-virtualscroller-loader", { "p-virtualscroller-loader-mask": !this.$slots.loader }];
+		},
+		loadedItems() {
+			return this.items && !this.d_loading ? this.isBoth() ? this.items.slice(this.appendOnly ? 0 : this.first.rows, this.last.rows).map((e) => this.columns ? e : e.slice(this.appendOnly ? 0 : this.first.cols, this.last.cols)) : this.isHorizontal() && this.columns ? this.items : this.items.slice(this.appendOnly ? 0 : this.first, this.last) : [];
+		},
+		loadedRows() {
+			return this.d_loading ? this.loaderDisabled ? this.loaderArr : [] : this.loadedItems;
+		},
+		loadedColumns() {
+			if (this.columns) {
+				let e = this.isBoth(), t = this.isHorizontal();
+				if (e || t) return this.d_loading && this.loaderDisabled ? e ? this.loaderArr[0] : this.loaderArr : this.columns.slice(e ? this.first.cols : this.first, e ? this.last.cols : this.last);
+			}
+			return this.columns;
+		}
+	},
+	watch: {
+		numToleratedItems(e) {
+			this.d_numToleratedItems = e;
+		},
+		loading(e, t) {
+			this.lazy && e !== t && e !== this.d_loading && (this.d_loading = e);
+		},
+		items(e, t) {
+			(!t || t.length !== (e || []).length) && this.scheduleInit();
+		},
+		itemSize() {
+			this.scheduleInit();
+		},
+		orientation() {
+			this.lastScrollPos = this.isBoth() ? {
+				top: 0,
+				left: 0
+			} : 0;
+		},
+		scrollHeight() {
+			this.scheduleInit();
+		},
+		scrollWidth() {
+			this.scheduleInit();
+		}
+	},
+	mounted() {
+		this.viewInit(), this.lastScrollPos = this.isBoth() ? {
+			top: 0,
+			left: 0
+		} : 0, this.lazyLoadState = this.lazyLoadState || {};
+	},
+	updated() {
+		!this.initialized && this.viewInit();
+	},
+	unmounted() {
+		this.unbindResizeListener(), this.initialized = !1;
+	},
+	methods: {
+		resolveItemKey(e, t) {
+			let n = this.itemKey;
+			return typeof n == "function" ? n(e, t) ?? t : typeof n == "string" && typeof e == "object" && e ? e[n] ?? t : t;
+		},
+		viewInit() {
+			r(this.element) && (this.setContentEl(this.content), this.init(), this.calculateAutoSize(), this.bindResizeListener(), this.defaultWidth = t(this.element), this.defaultHeight = o(this.element), this.defaultContentWidth = t(this.content), this.defaultContentHeight = o(this.content), this.initialized = !0);
+		},
+		init() {
+			this.disabled || (this.setSize(), this.calculateOptions(), this.setSpacerSize());
+		},
+		scheduleInit() {
+			this._initScheduled || (this._initScheduled = !0, Promise.resolve().then(() => {
+				this._initScheduled = !1, this.init(), this.calculateAutoSize();
+			}));
+		},
+		isVertical() {
+			return this.orientation === "vertical";
+		},
+		isHorizontal() {
+			return this.orientation === "horizontal";
+		},
+		isBoth() {
+			return this.orientation === "both";
+		},
+		scrollTo(e) {
+			this.element && this.element.scrollTo(e);
+		},
+		scrollToIndex(e, t = "auto") {
+			let n = this.isBoth(), r = this.isHorizontal(), i = this.rtl && r;
+			if (n ? e.every((e) => e > -1) : e > -1) {
+				let a = this.first, { scrollTop: o = 0, scrollLeft: s = 0 } = this.element, { numToleratedItems: c } = this.calculateNumItems(), l = this.getContentPosition(), u = this.itemSize, d = (e = 0, t) => e <= t ? 0 : e, f = (e, t, n) => e * t + n, p = (e = 0, n = 0) => {
+					i && (e = this.element.scrollWidth - this.element.clientWidth - e), this.scrollTo({
+						left: e,
+						top: n,
+						behavior: t
+					});
+				}, m = n ? {
+					rows: 0,
+					cols: 0
+				} : 0, h = !1, g = !1;
+				n ? (m = {
+					rows: d(e[0], c[0]),
+					cols: d(e[1], c[1])
+				}, p(f(m.cols, u[1], l.left), f(m.rows, u[0], l.top)), g = this.lastScrollPos.top !== o || this.lastScrollPos.left !== s, h = m.rows !== a.rows || m.cols !== a.cols) : (m = d(e, c), r ? p(f(m, u, l.left), o) : p(s, f(m, u, l.top)), g = this.lastScrollPos !== (r ? s : o), h = m !== a), this.isRangeChanged = h, g && (this.first = m);
+			}
+		},
+		scrollInView(e, t, n = "auto") {
+			if (t) {
+				let r = this.isBoth(), i = this.isHorizontal();
+				if (r ? e.every((e) => e > -1) : e > -1) {
+					let { first: a, viewport: o } = this.getRenderedRange(), s = (e = 0, t = 0) => this.scrollTo({
+						left: e,
+						top: t,
+						behavior: n
+					}), c = t === "to-start", l = t === "to-end";
+					if (c) {
+						if (r) o.first.rows - a.rows > e[0] ? s(o.first.cols * this.itemSize[1], (o.first.rows - 1) * this.itemSize[0]) : o.first.cols - a.cols > e[1] && s((o.first.cols - 1) * this.itemSize[1], o.first.rows * this.itemSize[0]);
+						else if (o.first - a > e) {
+							let e = (o.first - 1) * this.itemSize;
+							i ? s(e, 0) : s(0, e);
+						}
+					} else if (l) {
+						if (r) o.last.rows - a.rows <= e[0] + 1 ? s(o.first.cols * this.itemSize[1], (o.first.rows + 1) * this.itemSize[0]) : o.last.cols - a.cols <= e[1] + 1 && s((o.first.cols + 1) * this.itemSize[1], o.first.rows * this.itemSize[0]);
+						else if (o.last - a <= e + 1) {
+							let e = (o.first + 1) * this.itemSize;
+							i ? s(e, 0) : s(0, e);
+						}
+					}
+				}
+			} else this.scrollToIndex(e, n);
+		},
+		getRenderedRange() {
+			let e = (e, t) => Math.floor(e / (t || e)), t = this.first, n = 0;
+			if (this.element) {
+				let r = this.isBoth(), i = this.isHorizontal(), { scrollTop: a, scrollLeft: o } = this.element;
+				r ? (t = {
+					rows: e(a, this.itemSize[0]),
+					cols: e(o, this.itemSize[1])
+				}, n = {
+					rows: t.rows + this.numItemsInViewport.rows,
+					cols: t.cols + this.numItemsInViewport.cols
+				}) : (t = e(i ? o : a, this.itemSize), n = t + this.numItemsInViewport);
+			}
+			return {
+				first: this.first,
+				last: this.last,
+				viewport: {
+					first: t,
+					last: n
+				}
+			};
+		},
+		calculateNumItems() {
+			let e = this.isBoth(), t = this.isHorizontal(), n = this.itemSize, r = this.getContentPosition(), i = this.element ? this.element.offsetWidth - r.left : 0, a = this.element ? this.element.offsetHeight - r.top : 0, o = (e, t) => Math.ceil(e / (t || e)), s = (e) => Math.ceil(e / 2), c = e ? {
+				rows: o(a, n[0]),
+				cols: o(i, n[1])
+			} : o(t ? i : a, n);
+			return {
+				numItemsInViewport: c,
+				numToleratedItems: this.d_numToleratedItems || (e ? [s(c.rows), s(c.cols)] : s(c))
+			};
+		},
+		calculateOptions() {
+			let e = this.isBoth(), t = this.first, { numItemsInViewport: n, numToleratedItems: r } = this.calculateNumItems(), i = (e, t, n, r = !1) => this.getLast(e + t + (e < n ? 2 : 3) * n, r), a = e ? {
+				rows: i(t.rows, n.rows, r[0]),
+				cols: i(t.cols, n.cols, r[1], !0)
+			} : i(t, n, r);
+			this.last = a, this.numItemsInViewport = n, this.d_numToleratedItems = r, this.$emit("update:numToleratedItems", this.d_numToleratedItems), this.showLoader && (this.loaderArr = e ? Array.from({ length: n.rows }).map(() => Array.from({ length: n.cols })) : Array.from({ length: n })), this.lazy && Promise.resolve().then(() => {
+				this.lazyLoadState = {
+					first: this.step ? e ? {
+						rows: 0,
+						cols: t.cols
+					} : 0 : t,
+					last: Math.min(this.step ? this.step : a, this.items?.length - 1 || 0)
+				}, this.$emit("lazy-load", this.lazyLoadState);
+			});
+		},
+		calculateAutoSize() {
+			this.autoSize && !this.d_loading && Promise.resolve().then(() => {
+				if (this.content) {
+					let e = this.isBoth(), n = this.isHorizontal(), r = this.isVertical();
+					this.content.style.minHeight = this.content.style.minWidth = "auto", this.content.style.position = "relative", this.element.style.contain = "none";
+					let [i, a] = [t(this.element), o(this.element)];
+					(e || n) && (this.element.style.width = i < this.defaultWidth ? i + "px" : this.scrollWidth || this.defaultWidth + "px"), (e || r) && (this.element.style.height = a < this.defaultHeight ? a + "px" : this.scrollHeight || this.defaultHeight + "px"), this.content.style.minHeight = this.content.style.minWidth = "", this.content.style.position = "", this.element.style.contain = "";
+				}
+			});
+		},
+		getLast(e = 0, t) {
+			return this.items ? Math.min(t ? (this.columns || this.items[0])?.length || 0 : this.items?.length || 0, e) : 0;
+		},
+		getContentPosition() {
+			if (this.content) {
+				let e = getComputedStyle(this.content), t = parseFloat(e.paddingLeft) + Math.max(parseFloat(e.left) || 0, 0), n = parseFloat(e.paddingRight) + Math.max(parseFloat(e.right) || 0, 0), r = parseFloat(e.paddingTop) + Math.max(parseFloat(e.top) || 0, 0), i = parseFloat(e.paddingBottom) + Math.max(parseFloat(e.bottom) || 0, 0);
+				return {
+					left: t,
+					right: n,
+					top: r,
+					bottom: i,
+					x: t + n,
+					y: r + i
+				};
+			}
+			return {
+				left: 0,
+				right: 0,
+				top: 0,
+				bottom: 0,
+				x: 0,
+				y: 0
+			};
+		},
+		setSize() {
+			if (this.element) {
+				let e = this.isBoth(), t = this.isHorizontal(), n = this.element.parentElement, r = this.scrollWidth || `${this.element.offsetWidth || n.offsetWidth}px`, i = this.scrollHeight || `${this.element.offsetHeight || n.offsetHeight}px`, a = (e, t) => this.element.style[e] = t;
+				e || t ? (a("height", i), a("width", r)) : a("height", i);
+			}
+		},
+		setSpacerSize() {
+			let e = this.items;
+			if (e) {
+				let t = this.isBoth(), n = this.isHorizontal(), r = this.getContentPosition(), i = (e, t, n, r = 0) => this.spacerStyle = {
+					...this.spacerStyle,
+					[`${e}`]: (t || []).length * n + r + "px"
+				};
+				t ? (i("height", e, this.itemSize[0], r.y), i("width", this.columns || e[1], this.itemSize[1], r.x)) : n ? i("width", this.columns || e, this.itemSize, r.x) : i("height", e, this.itemSize, r.y);
+			}
+		},
+		setContentPosition(e) {
+			if (this.content && !this.appendOnly) {
+				let t = this.isBoth(), n = this.isHorizontal(), r = this.rtl && n, i = e ? e.first : this.first, a = (e, t) => e * t, o = (e = 0, t = 0) => {
+					let n = r ? -e : e;
+					this.contentStyle = {
+						...this.contentStyle,
+						transform: `translate3d(${n}px, ${t}px, 0)`
+					};
+				};
+				if (t) {
+					let e = i.rows, t = i.cols, n = this.itemSize;
+					o(a(t, n[1]), a(e, n[0]));
+				} else {
+					let e = i, t = this.itemSize, r = a(e, t);
+					n ? o(r, 0) : o(0, r);
+				}
+			}
+		},
+		onScrollPositionChange(e) {
+			let t = e.target, n = this.isBoth(), r = this.isHorizontal(), i = this.rtl && r, a = this.getContentPosition(), o = (e, t) => e ? e > t ? e - t : e : 0, s = (e, t) => Math.floor(e / (t || e)), c = o(t.scrollTop, a.top), l = o(t.scrollLeft, a.left);
+			i && l < 0 && (l = Math.abs(l));
+			let u = n ? {
+				rows: 0,
+				cols: 0
+			} : 0, d = this.last, f = !1, p = this.lastScrollPos;
+			if (n) {
+				let e = this.lastScrollPos.top <= c, n = this.lastScrollPos.left <= l;
+				if (!this.appendOnly || this.appendOnly && (e || n)) {
+					let r = {
+						rows: s(c, this.itemSize[0]),
+						cols: s(l, this.itemSize[1])
+					}, i = {
+						rows: this.calculateTriggerIndex(r.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], e),
+						cols: this.calculateTriggerIndex(r.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], n)
+					};
+					u = {
+						rows: this.calculateFirst(r.rows, i.rows, this.first.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0], e),
+						cols: this.calculateFirst(r.cols, i.cols, this.first.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], n, !0)
+					}, d = {
+						rows: this.calculateLast(r.rows, u.rows, this.last.rows, this.numItemsInViewport.rows, this.d_numToleratedItems[0]),
+						cols: this.calculateLast(r.cols, u.cols, this.last.cols, this.numItemsInViewport.cols, this.d_numToleratedItems[1], !0)
+					}, f = u.rows !== this.first.rows || d.rows !== this.last.rows || u.cols !== this.first.cols || d.cols !== this.last.cols || this.isRangeChanged, p = {
+						top: c,
+						left: t.scrollLeft
+					};
+				}
+			} else {
+				let e = r ? l : c, t = this.lastScrollPos <= e;
+				if (!this.appendOnly || this.appendOnly && t) {
+					let n = s(e, this.itemSize), r = this.calculateTriggerIndex(n, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, t);
+					u = this.calculateFirst(n, r, this.first, this.last, this.numItemsInViewport, this.d_numToleratedItems, t), d = this.calculateLast(n, u, this.last, this.numItemsInViewport, this.d_numToleratedItems), f = u !== this.first || d !== this.last || this.isRangeChanged, p = e;
+				}
+			}
+			return {
+				first: u,
+				last: d,
+				isRangeChanged: f,
+				scrollPos: p
+			};
+		},
+		calculateTriggerIndex(e, t, n, r, i, a) {
+			return e <= i ? i : a ? n - r - i : t + i - 1;
+		},
+		calculateFirst(e, t, n, r, i, a, o, s = !1) {
+			if (e <= a) return 0;
+			let c = Math.max(0, o ? e < t ? n : e - a : e > t ? n : e - 2 * a), l = this.getLast(c, s);
+			return c > l ? l - i : c;
+		},
+		calculateLast(e, t, n, r, i, a = !1) {
+			let o = t + r + 2 * i;
+			return e >= i && (o += i + 1), this.getLast(o, a);
+		},
+		onScrollChange(e) {
+			let { first: t, last: n, isRangeChanged: r, scrollPos: i } = this.onScrollPositionChange(e);
+			if (r) {
+				let e = {
+					first: t,
+					last: n
+				};
+				if (this.setContentPosition(e), this.first = t, this.last = n, this.lastScrollPos = i, this.$emit("scroll-index-change", e), this.lazy && this.isPageChanged(t)) {
+					let e = {
+						first: this.step ? Math.min(this.getPageByFirst(t) * this.step, (this.items?.length || 0) - this.step) : t,
+						last: Math.min(this.step ? (this.getPageByFirst(t) + 1) * this.step : n, this.items?.length - 1 || 0)
+					};
+					(this.lazyLoadState.first !== e.first || this.lazyLoadState.last !== e.last) && this.$emit("lazy-load", e), this.lazyLoadState = e;
+				}
+			}
+		},
+		onScroll(e) {
+			if (this.$emit("scroll", e), this.delay) {
+				if (this.scrollTimeout && clearTimeout(this.scrollTimeout), this.isPageChanged()) {
+					if (!this.d_loading && this.showLoader) {
+						let { isRangeChanged: t } = this.onScrollPositionChange(e);
+						(t || this.step && this.isPageChanged()) && (this.d_loading = !0);
+					}
+					this.scrollTimeout = setTimeout(() => {
+						this.onScrollChange(e), this.d_loading && this.showLoader && (!this.lazy || this.loading === void 0) && (this.d_loading = !1, this.page = this.getPageByFirst());
+					}, this.delay);
+				}
+			} else this.onScrollChange(e);
+		},
+		onResize() {
+			this.resizeTimeout && clearTimeout(this.resizeTimeout), this.resizeTimeout = setTimeout(() => {
+				if (r(this.element)) {
+					let e = this.isBoth(), n = this.isVertical(), r = this.isHorizontal(), [i, a] = [t(this.element), o(this.element)], [s, c] = [i !== this.defaultWidth, a !== this.defaultHeight];
+					(e ? s || c : r ? s : n && c) && (this.d_numToleratedItems = this.numToleratedItems, this.defaultWidth = i, this.defaultHeight = a, this.defaultContentWidth = t(this.content), this.defaultContentHeight = o(this.content), this.init());
+				}
+			}, this.resizeDelay);
+		},
+		bindResizeListener() {
+			this.resizeListener || (this.resizeListener = this.onResize.bind(this), window.addEventListener("resize", this.resizeListener), window.addEventListener("orientationchange", this.resizeListener));
+		},
+		unbindResizeListener() {
+			this.resizeListener &&= (window.removeEventListener("resize", this.resizeListener), window.removeEventListener("orientationchange", this.resizeListener), null);
+		},
+		getOptions(e) {
+			let t = (this.items || []).length, n = this.isBoth() ? this.first.rows + e : this.first + e;
+			return {
+				index: n,
+				count: t,
+				first: n === 0,
+				last: n === t - 1,
+				even: n % 2 == 0,
+				odd: n % 2 != 0
+			};
+		},
+		getLoaderOptions(e, t) {
+			let n = this.loaderArr.length;
+			return {
+				index: e,
+				count: n,
+				first: e === 0,
+				last: e === n - 1,
+				even: e % 2 == 0,
+				odd: e % 2 != 0,
+				...t
+			};
+		},
+		getPageByFirst(e) {
+			return Math.floor(((e ?? this.first) + this.d_numToleratedItems * 4) / (this.step || 1));
+		},
+		isPageChanged(e) {
+			return this.step && !this.lazy ? this.page !== this.getPageByFirst(e ?? this.first) : !0;
+		},
+		setContentEl(t) {
+			this.content = t || this.content || e(this.element, "[data-pc-section=\"content\"]");
+		},
+		elementRef(e) {
+			this.element = e;
+		},
+		contentRef(e) {
+			this.content = e;
+		}
+	}
+}, z = ["tabindex"];
+function B(e, t, n, r, i, a) {
+	let o = w("SpinnerIcon");
+	return e.disabled ? (u(), C(E, { key: 1 }, [f(e.$slots, "default"), f(e.$slots, "content", {
+		items: e.items,
+		rows: e.items,
+		columns: a.loadedColumns
+	})], 64)) : (u(), C("div", p({
+		key: 0,
+		ref: a.elementRef,
+		class: a.containerClass,
+		tabindex: e.tabindex,
+		style: e.style
+	}, e.ptmi("root"), { onScroll: t[0] ||= (...e) => a.onScroll && a.onScroll(...e) }), [
+		f(e.$slots, "content", {
+			styleClass: a.contentClass,
+			items: a.loadedItems,
+			getItemOptions: a.getOptions,
+			loading: i.d_loading,
+			getLoaderOptions: a.getLoaderOptions,
+			itemSize: e.itemSize,
+			rows: a.loadedRows,
+			columns: a.loadedColumns,
+			contentRef: a.contentRef,
+			spacerStyle: i.spacerStyle,
+			contentStyle: i.contentStyle,
+			vertical: a.isVertical(),
+			horizontal: a.isHorizontal(),
+			both: a.isBoth()
+		}, () => [O("div", p({
+			ref: a.contentRef,
+			class: a.contentClass,
+			style: i.contentStyle
+		}, e.ptm("content")), [(u(!0), C(E, null, l(a.loadedItems, (t, n) => f(e.$slots, "item", {
+			item: t,
+			options: a.getOptions(n)
+		}, void 0, void 0, a.resolveItemKey(t, n))), 128))], 16)]),
+		e.showSpacer ? (u(), C("div", p({
+			key: 0,
+			class: "p-virtualscroller-spacer",
+			style: i.spacerStyle
+		}, e.ptm("spacer")), null, 16)) : v("", !0),
+		!e.loaderDisabled && e.showLoader && i.d_loading ? (u(), C("div", p({
+			key: 1,
+			class: a.loaderClass
+		}, e.ptm("loader")), [e.$slots && e.$slots.loader ? (u(!0), C(E, { key: 0 }, l(i.loaderArr, (t, n) => f(e.$slots, "loader", { options: a.getLoaderOptions(n, a.isBoth() && { numCols: e.d_numItemsInViewport.cols }) }, void 0, void 0, n)), 128)) : v("", !0), f(e.$slots, "loadingicon", {}, () => [M(o, p({
+			spin: "",
+			class: "p-virtualscroller-loading-icon"
+		}, e.ptm("loadingIcon")), null, 16)])], 16)) : v("", !0)
+	], 16, z));
+}
+var V = /*#__PURE__*/ F(R, [["render", B]]), H = /*#__PURE__*/ F(/* @__PURE__ */ A({
+	__name: "CuiRecordingsGrid",
+	props: {
+		items: {},
+		minItemWidth: {},
+		aspectRatio: { default: 1 },
+		gap: { default: 8 },
+		hasMore: {
+			type: Boolean,
+			default: !1
+		},
+		loadMore: {
+			type: Function,
+			default: void 0
+		},
+		itemKey: {
+			type: Function,
+			default: void 0
+		}
+	},
+	setup(e, { expose: t }) {
+		let n = e, r = D("containerRef"), { width: i, height: a } = we(r), o = b(() => a.value > 0 ? `${a.value}px` : void 0), s = b(() => {
+			let e = i.value;
+			if (!e) return 0;
+			let t = n.gap;
+			return Math.max(1, Math.floor((e + t) / (n.minItemWidth + t)));
+		}), c = b(() => {
+			let e = i.value, t = s.value;
+			return !e || !t ? 0 : Math.floor((e - (t - 1) * n.gap) / t);
+		}), d = b(() => c.value ? Math.floor(c.value / n.aspectRatio) : 0), p = b(() => d.value ? d.value + n.gap : 0), h = b(() => {
+			let e = s.value;
+			if (!e) return [];
+			let t = [];
+			for (let r = 0; r < n.items.length; r += e) t.push(n.items.slice(r, r + e));
+			return t;
+		});
+		function g(e) {
+			if (n.itemKey) return n.itemKey(e);
+			let t = e;
+			return t.id ?? t.key ?? JSON.stringify(e);
+		}
+		function w(e) {
+			let t = e;
+			if (!(!t || t.length === 0)) return g(t[0]);
+		}
+		let k = !1, A = null;
+		async function M() {
+			if (k || !n.hasMore || !n.loadMore || A !== null && n.items.length === A) return;
+			k = !0;
+			let e = n.items.length;
+			try {
+				await Promise.resolve(n.loadMore());
+			} finally {
+				k = !1, A = n.items.length === e ? e : null;
+			}
+		}
+		let ee = j(0);
+		function te(e) {
+			let t = e.target;
+			if (!t) return;
+			ee.value = t.scrollTop;
+			let n = p.value * 3;
+			t.scrollTop + t.clientHeight >= t.scrollHeight - n && M();
+		}
+		function ne() {
+			(r.value?.querySelector(".recordings-scroll"))?.scrollTo({
+				top: 0,
+				behavior: "smooth"
+			});
+		}
+		let N = !1;
+		return S([
+			() => n.items.length,
+			a,
+			p,
+			() => n.hasMore
+		], () => {
+			N || (N = !0, m(() => {
+				if (N = !1, !n.hasMore) return;
+				let e = a.value, t = h.value.length * p.value;
+				e > 0 && p.value > 0 && t < e + p.value && M();
+			}));
+		}, { flush: "post" }), t({
+			scrollToTop: ne,
+			scrollY: ee
+		}), (t, n) => {
+			let i = V;
+			return u(), C("div", {
+				ref_key: "containerRef",
+				ref: r,
+				class: "recordings-grid-root"
+			}, [y(h).length > 0 && y(c) > 0 ? (u(), _(i, {
+				key: 0,
+				items: y(h),
+				"item-size": y(p),
+				"scroll-height": y(o),
+				orientation: "vertical",
+				class: "recordings-scroll",
+				"num-tolerated-items": 2,
+				"item-key": w,
+				onScroll: te
+			}, {
+				item: x(({ item: n }) => [O("div", {
+					class: "recordings-row",
+					style: T({
+						height: `${y(p)}px`,
+						gap: `${e.gap}px`
+					})
+				}, [(u(!0), C(E, null, l(n, (e) => (u(), C("div", {
+					key: g(e),
+					style: T({
+						width: `${y(c)}px`,
+						height: `${y(d)}px`
+					})
+				}, [f(t.$slots, "item", { item: e }, void 0, !0)], 4))), 128))], 4)]),
+				_: 3
+			}, 8, [
+				"items",
+				"item-size",
+				"scroll-height"
+			])) : v("", !0)], 512);
+		};
+	}
+}), [["__scopeId", "data-v-e61b8b84"]]);
+//#endregion
+//#region src/components/CuiRecordings/ungrouped.ts
+function U(e) {
+	if (e.episode) return e.episode.endTime;
+	if (e.segIndex !== void 0) {
+		let t = e.event.segments?.[e.segIndex];
+		if (t) return t.firstSeen;
+	}
+	return e.event.thumbnailAt ?? e.event.startTime;
+}
+function W(e) {
+	let t = [];
+	for (let n of e) {
+		let e = n.segments ?? [];
+		if (e.length <= 1) {
+			t.push({
+				event: n,
+				key: n.id
+			});
+			continue;
+		}
+		e.forEach((e, r) => {
+			e && t.push({
+				event: n,
+				key: `${n.id}:seg:${r}`,
+				segIndex: r
+			});
+		});
+	}
+	return t.sort((e, t) => U(t) - U(e)), t;
+}
+//#endregion
+export { L as i, U as n, H as r, W as t };