@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-video-call/index.es.js

@@ -0,0 +1,604 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { ChevronDown as n, ChevronUp as r, Circle as i, Grid3X3 as a, Hand as o, LayoutGrid as s, Maximize as c, MessageSquare as l, Mic as u, MicOff as d, Minimize as f, Monitor as p, MonitorOff as m, MoreVertical as h, Phone as g, PictureInPicture2 as _, Pin as v, PinOff as y, Sidebar as b, UserMinus as x, Users as S, Video as C, VideoOff as w, VolumeX as T, WifiOff as E, X as D } from "lucide-react";
+import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
+//#region src/components/waka-video-call/index.tsx
+var j = {
+	excellent: {
+		color: "text-green-500",
+		bars: 4,
+		label: "Excellent"
+	},
+	good: {
+		color: "text-green-400",
+		bars: 3,
+		label: "Good"
+	},
+	fair: {
+		color: "text-yellow-500",
+		bars: 2,
+		label: "Fair"
+	},
+	poor: {
+		color: "text-red-500",
+		bars: 1,
+		label: "Poor"
+	},
+	disconnected: {
+		color: "text-gray-500",
+		bars: 0,
+		label: "Disconnected"
+	}
+}, M = {
+	grid: {
+		icon: a,
+		label: "Grid"
+	},
+	speaker: {
+		icon: s,
+		label: "Speaker"
+	},
+	sidebar: {
+		icon: b,
+		label: "Sidebar"
+	}
+};
+function N(e) {
+	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
+	return t > 0 ? `${t}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+}
+function P(e) {
+	return e.split(" ").map((e) => e[0]).join("").toUpperCase().slice(0, 2);
+}
+function F({ quality: t, showLabel: n = !1, size: r = "default", className: i }) {
+	let a = j[t], o = r === "sm" ? [
+		3,
+		5,
+		7,
+		9
+	] : [
+		4,
+		6,
+		8,
+		10
+	], s = r === "sm" ? 2 : 3;
+	return t === "disconnected" ? /* @__PURE__ */ A("div", {
+		className: e("flex items-center gap-1", i),
+		children: [/* @__PURE__ */ k(E, { className: e("h-3 w-3", a.color) }), n && /* @__PURE__ */ k("span", {
+			className: e("text-xs", a.color),
+			children: a.label
+		})]
+	}) : /* @__PURE__ */ A("div", {
+		className: e("flex items-center gap-1", i),
+		children: [/* @__PURE__ */ k("div", {
+			className: "flex items-end gap-0.5",
+			children: o.map((t, n) => /* @__PURE__ */ k("div", {
+				className: e("rounded-sm transition-colors", n < a.bars ? a.color.replace("text-", "bg-") : "bg-gray-400/30"),
+				style: {
+					width: s,
+					height: t
+				}
+			}, n))
+		}), n && /* @__PURE__ */ k("span", {
+			className: e("text-xs", a.color),
+			children: a.label
+		})]
+	});
+}
+function I({ className: t }) {
+	return /* @__PURE__ */ A("div", {
+		className: e("flex items-center gap-1.5 px-2 py-1 rounded-md bg-red-500/20", t),
+		children: [/* @__PURE__ */ k(i, { className: "h-2.5 w-2.5 fill-red-500 text-red-500 animate-pulse" }), /* @__PURE__ */ k("span", {
+			className: "text-xs font-medium text-red-500",
+			children: "REC"
+		})]
+	});
+}
+function L({ startTime: n, className: r }) {
+	let [i, a] = t.useState(0);
+	return t.useEffect(() => {
+		if (!n) return;
+		let e = setInterval(() => {
+			a(Math.floor((Date.now() - n.getTime()) / 1e3));
+		}, 1e3);
+		return () => clearInterval(e);
+	}, [n]), /* @__PURE__ */ k("div", {
+		className: e("text-sm font-medium text-muted-foreground tabular-nums", r),
+		children: N(i)
+	});
+}
+function R({ participant: t, size: n = "default", showStatus: r = !0, className: i }) {
+	return /* @__PURE__ */ A("div", {
+		className: e("relative", i),
+		children: [/* @__PURE__ */ k("div", {
+			className: e("flex items-center justify-center rounded-full bg-muted font-semibold", {
+				sm: "h-8 w-8 text-xs",
+				default: "h-12 w-12 text-sm",
+				lg: "h-16 w-16 text-lg",
+				xl: "h-24 w-24 text-2xl"
+			}[n], t.isSpeaking && "ring-2 ring-green-500 ring-offset-2 ring-offset-background"),
+			children: t.avatar ? /* @__PURE__ */ k("img", {
+				src: t.avatar,
+				alt: t.name,
+				className: "h-full w-full rounded-full object-cover"
+			}) : /* @__PURE__ */ k("span", {
+				className: "text-muted-foreground",
+				children: P(t.name)
+			})
+		}), r && /* @__PURE__ */ A(O, { children: [t.isMuted && /* @__PURE__ */ k("div", {
+			className: "absolute -bottom-1 -right-1 rounded-full bg-red-500 p-0.5",
+			children: /* @__PURE__ */ k(d, { className: "h-2.5 w-2.5 text-white" })
+		}), t.hasRaisedHand && /* @__PURE__ */ k("div", {
+			className: "absolute -top-1 -right-1 rounded-full bg-yellow-500 p-0.5 animate-bounce",
+			children: /* @__PURE__ */ k(o, { className: "h-2.5 w-2.5 text-white" })
+		})] })]
+	});
+}
+function z({ participant: n, isMain: r = !1, showControls: i = !0, onPin: a, onUnpin: s, onMute: c, onRemove: l, className: u }) {
+	let [f, m] = t.useState(!1);
+	return /* @__PURE__ */ A("div", {
+		className: e("relative group rounded-xl overflow-hidden bg-gray-900 transition-all", "aspect-video", n.isSpeaking && "ring-2 ring-green-500", u),
+		children: [
+			n.isVideoOff ? /* @__PURE__ */ k("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900",
+				children: /* @__PURE__ */ k(R, {
+					participant: n,
+					size: r ? "xl" : "lg",
+					showStatus: !1
+				})
+			}) : /* @__PURE__ */ k("div", {
+				className: "absolute inset-0 bg-gradient-to-br from-gray-800 to-gray-900",
+				children: /* @__PURE__ */ k("div", {
+					className: "h-full w-full flex items-center justify-center text-muted-foreground text-sm",
+					children: n.isScreenSharing ? /* @__PURE__ */ k(p, { className: "h-12 w-12 opacity-50" }) : /* @__PURE__ */ k(C, { className: "h-12 w-12 opacity-50" })
+				})
+			}),
+			/* @__PURE__ */ k("div", { className: "absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" }),
+			/* @__PURE__ */ A("div", {
+				className: "absolute bottom-2 left-2 right-2 flex items-center justify-between",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ A("span", {
+							className: "text-white text-sm font-medium truncate max-w-[120px]",
+							children: [n.name, n.isLocal && " (You)"]
+						}),
+						n.isMuted && /* @__PURE__ */ k(d, { className: "h-3.5 w-3.5 text-red-400" }),
+						n.isScreenSharing && /* @__PURE__ */ k(p, { className: "h-3.5 w-3.5 text-blue-400" })
+					]
+				}), n.connectionQuality && /* @__PURE__ */ k(F, {
+					quality: n.connectionQuality,
+					size: "sm"
+				})]
+			}),
+			n.hasRaisedHand && /* @__PURE__ */ k("div", {
+				className: "absolute top-2 right-2 rounded-full bg-yellow-500 p-1.5 animate-bounce",
+				children: /* @__PURE__ */ k(o, { className: "h-4 w-4 text-white" })
+			}),
+			n.isPinned && /* @__PURE__ */ k("div", {
+				className: "absolute top-2 left-2 rounded-full bg-blue-500 p-1",
+				children: /* @__PURE__ */ k(v, { className: "h-3 w-3 text-white" })
+			}),
+			i && !n.isLocal && /* @__PURE__ */ k("div", {
+				className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+				children: /* @__PURE__ */ A("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ k("button", {
+						onClick: () => m(!f),
+						className: "rounded-full bg-black/50 p-1.5 hover:bg-black/70 transition-colors",
+						children: /* @__PURE__ */ k(h, { className: "h-4 w-4 text-white" })
+					}), f && /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k("div", {
+						className: "fixed inset-0 z-10",
+						onClick: () => m(!1)
+					}), /* @__PURE__ */ A("div", {
+						className: "absolute right-0 top-8 z-20 w-40 rounded-lg bg-popover border shadow-lg py-1",
+						children: [
+							n.isPinned ? /* @__PURE__ */ A("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
+								onClick: () => {
+									s?.(), m(!1);
+								},
+								children: [/* @__PURE__ */ k(y, { className: "h-4 w-4" }), "Unpin"]
+							}) : /* @__PURE__ */ A("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
+								onClick: () => {
+									a?.(), m(!1);
+								},
+								children: [/* @__PURE__ */ k(v, { className: "h-4 w-4" }), "Pin"]
+							}),
+							/* @__PURE__ */ A("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent",
+								onClick: () => {
+									c?.(), m(!1);
+								},
+								children: [/* @__PURE__ */ k(T, { className: "h-4 w-4" }), "Mute"]
+							}),
+							/* @__PURE__ */ A("button", {
+								className: "w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent text-red-500",
+								onClick: () => {
+									l?.(), m(!1);
+								},
+								children: [/* @__PURE__ */ k(x, { className: "h-4 w-4" }), "Remove"]
+							})
+						]
+					})] })]
+				})
+			}),
+			/* @__PURE__ */ k("style", { children: "\n        @keyframes speaking-pulse {\n          0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }\n          50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }\n        }\n      " })
+		]
+	});
+}
+function B({ icon: t, label: n, isActive: r = !1, isDestructive: i = !1, onClick: a, disabled: o = !1, className: s }) {
+	return /* @__PURE__ */ A("button", {
+		onClick: a,
+		disabled: o,
+		className: e("flex flex-col items-center gap-1 px-3 py-2 rounded-xl transition-all", "hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed", r && !i && "bg-accent", i && "bg-red-500/10 hover:bg-red-500/20 text-red-500", s),
+		title: n,
+		children: [/* @__PURE__ */ k("div", {
+			className: e("flex items-center justify-center h-10 w-10 rounded-full transition-colors", i ? "bg-red-500 text-white" : r ? "bg-primary text-primary-foreground" : "bg-muted"),
+			children: /* @__PURE__ */ k(t, { className: "h-5 w-5" })
+		}), /* @__PURE__ */ k("span", {
+			className: "text-xs font-medium",
+			children: n
+		})]
+	});
+}
+function V({ participants: t, isOpen: n, onClose: r, className: i }) {
+	return n ? /* @__PURE__ */ A("div", {
+		className: e("absolute right-0 top-0 bottom-0 w-72 bg-background border-l shadow-lg z-20", "animate-in slide-in-from-right duration-200", i),
+		children: [/* @__PURE__ */ A("div", {
+			className: "flex items-center justify-between p-4 border-b",
+			children: [/* @__PURE__ */ A("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ k(S, { className: "h-5 w-5" }), /* @__PURE__ */ A("span", {
+					className: "font-semibold",
+					children: [
+						"Participants (",
+						t.length,
+						")"
+					]
+				})]
+			}), /* @__PURE__ */ k("button", {
+				onClick: r,
+				className: "rounded-full p-1 hover:bg-accent transition-colors",
+				children: /* @__PURE__ */ k(D, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ k("div", {
+			className: "p-2 space-y-1 overflow-y-auto max-h-[calc(100%-60px)]",
+			children: t.map((e) => /* @__PURE__ */ A("div", {
+				className: "flex items-center gap-3 p-2 rounded-lg hover:bg-accent transition-colors",
+				children: [
+					/* @__PURE__ */ k(R, {
+						participant: e,
+						size: "sm"
+					}),
+					/* @__PURE__ */ A("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ A("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ A("span", {
+								className: "text-sm font-medium truncate",
+								children: [e.name, e.isLocal && " (You)"]
+							}), e.hasRaisedHand && /* @__PURE__ */ k(o, { className: "h-3.5 w-3.5 text-yellow-500" })]
+						}), /* @__PURE__ */ A("div", {
+							className: "flex items-center gap-2 text-xs text-muted-foreground",
+							children: [e.isMuted && /* @__PURE__ */ A("span", {
+								className: "flex items-center gap-0.5",
+								children: [/* @__PURE__ */ k(d, { className: "h-3 w-3" }), " Muted"]
+							}), e.isScreenSharing && /* @__PURE__ */ A("span", {
+								className: "flex items-center gap-0.5",
+								children: [/* @__PURE__ */ k(p, { className: "h-3 w-3" }), " Sharing"]
+							})]
+						})]
+					}),
+					e.connectionQuality && /* @__PURE__ */ k(F, {
+						quality: e.connectionQuality,
+						size: "sm"
+					})
+				]
+			}, e.id))
+		})]
+	}) : null;
+}
+function H({ currentLayout: i, onLayoutChange: a, className: o }) {
+	let [s, c] = t.useState(!1);
+	return /* @__PURE__ */ A("div", {
+		className: e("relative", o),
+		children: [/* @__PURE__ */ A("button", {
+			onClick: () => c(!s),
+			className: "flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-accent transition-colors",
+			children: [
+				t.createElement(M[i].icon, { className: "h-4 w-4" }),
+				/* @__PURE__ */ k("span", {
+					className: "text-sm",
+					children: M[i].label
+				}),
+				k(s ? r : n, { className: "h-3 w-3" })
+			]
+		}), s && /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k("div", {
+			className: "fixed inset-0 z-10",
+			onClick: () => c(!1)
+		}), /* @__PURE__ */ k("div", {
+			className: "absolute bottom-full mb-2 left-0 w-36 rounded-lg bg-popover border shadow-lg py-1 z-20",
+			children: Object.keys(M).map((t) => {
+				let n = M[t];
+				return /* @__PURE__ */ A("button", {
+					className: e("w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent", i === t && "bg-accent"),
+					onClick: () => {
+						a(t), c(!1);
+					},
+					children: [/* @__PURE__ */ k(n.icon, { className: "h-4 w-4" }), n.label]
+				}, t);
+			})
+		})] })]
+	});
+}
+function U({ participants: n, localParticipantId: r, isRecording: i = !1, callStartTime: a, layout: s = "speaker", showChat: h = !1, isFullscreen: v = !1, onToggleMute: y, onToggleVideo: b, onToggleScreenShare: x, onToggleChat: T, onEndCall: E, onToggleFullscreen: D, onTogglePictureInPicture: O, onRaiseHand: j, onChangeLayout: M, onPinParticipant: N, onUnpinParticipant: P, onMuteParticipant: R, onRemoveParticipant: U, className: W }) {
+	let [G, K] = t.useState(!1), q = t.useRef(null), J = n.find((e) => e.id === r), Y = n.filter((e) => e.id !== r), X = n.find((e) => e.isPinned), Z = n.find((e) => e.isScreenSharing), Q = X || Z || Y.find((e) => e.isSpeaking) || Y[0], $ = n.filter((e) => e.id !== Q?.id);
+	return /* @__PURE__ */ A("div", {
+		ref: q,
+		className: e("relative flex flex-col bg-background rounded-xl border overflow-hidden", v && "fixed inset-0 z-50 rounded-none", W),
+		children: [
+			/* @__PURE__ */ A("div", {
+				className: "flex items-center justify-between px-4 py-2 border-b bg-muted/30",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-center gap-3",
+					children: [i && /* @__PURE__ */ k(I, {}), /* @__PURE__ */ k(L, { startTime: a })]
+				}), /* @__PURE__ */ A("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ A("button", {
+							onClick: () => K(!G),
+							className: e("flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-colors", "hover:bg-accent", G && "bg-accent"),
+							children: [/* @__PURE__ */ k(S, { className: "h-4 w-4" }), /* @__PURE__ */ k("span", {
+								className: "text-sm font-medium",
+								children: n.length
+							})]
+						}),
+						/* @__PURE__ */ k(H, {
+							currentLayout: s,
+							onLayoutChange: (e) => M?.(e)
+						}),
+						J?.connectionQuality && /* @__PURE__ */ k(F, {
+							quality: J.connectionQuality,
+							showLabel: !0
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "flex-1 min-h-0 relative",
+				children: [(() => {
+					switch (s) {
+						case "grid": return /* @__PURE__ */ k("div", {
+							className: e("grid gap-2 p-2 h-full", n.length <= 2 && "grid-cols-1 md:grid-cols-2", n.length > 2 && n.length <= 4 && "grid-cols-2", n.length > 4 && n.length <= 6 && "grid-cols-2 md:grid-cols-3", n.length > 6 && "grid-cols-3 md:grid-cols-4"),
+							children: n.map((e) => /* @__PURE__ */ k(z, {
+								participant: e,
+								onPin: () => N?.(e.id),
+								onUnpin: () => P?.(e.id),
+								onMute: () => R?.(e.id),
+								onRemove: () => U?.(e.id)
+							}, e.id))
+						});
+						case "speaker": return /* @__PURE__ */ A("div", {
+							className: "flex flex-col h-full p-2 gap-2",
+							children: [/* @__PURE__ */ k("div", {
+								className: "flex-1 min-h-0",
+								children: Q && /* @__PURE__ */ k(z, {
+									participant: Q,
+									isMain: !0,
+									onPin: () => N?.(Q.id),
+									onUnpin: () => P?.(Q.id),
+									onMute: () => R?.(Q.id),
+									onRemove: () => U?.(Q.id),
+									className: "h-full"
+								})
+							}), $.length > 0 && /* @__PURE__ */ k("div", {
+								className: "flex gap-2 overflow-x-auto pb-1",
+								children: $.map((e) => /* @__PURE__ */ k(z, {
+									participant: e,
+									onPin: () => N?.(e.id),
+									onUnpin: () => P?.(e.id),
+									onMute: () => R?.(e.id),
+									onRemove: () => U?.(e.id),
+									className: "w-36 flex-shrink-0"
+								}, e.id))
+							})]
+						});
+						case "sidebar": return /* @__PURE__ */ A("div", {
+							className: "flex h-full p-2 gap-2",
+							children: [/* @__PURE__ */ k("div", {
+								className: "flex-1 min-w-0",
+								children: Q && /* @__PURE__ */ k(z, {
+									participant: Q,
+									isMain: !0,
+									onPin: () => N?.(Q.id),
+									onUnpin: () => P?.(Q.id),
+									onMute: () => R?.(Q.id),
+									onRemove: () => U?.(Q.id),
+									className: "h-full"
+								})
+							}), $.length > 0 && /* @__PURE__ */ k("div", {
+								className: "w-48 flex-shrink-0 flex flex-col gap-2 overflow-y-auto",
+								children: $.map((e) => /* @__PURE__ */ k(z, {
+									participant: e,
+									onPin: () => N?.(e.id),
+									onUnpin: () => P?.(e.id),
+									onMute: () => R?.(e.id),
+									onRemove: () => U?.(e.id)
+								}, e.id))
+							})]
+						});
+						default: return null;
+					}
+				})(), /* @__PURE__ */ k(V, {
+					participants: n,
+					isOpen: G,
+					onClose: () => K(!1)
+				})]
+			}),
+			/* @__PURE__ */ A("div", {
+				className: "flex items-center justify-center gap-2 px-4 py-3 border-t bg-muted/30",
+				children: [
+					/* @__PURE__ */ k(B, {
+						icon: J?.isMuted ? d : u,
+						label: J?.isMuted ? "Unmute" : "Mute",
+						isActive: !J?.isMuted,
+						onClick: y
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: J?.isVideoOff ? w : C,
+						label: J?.isVideoOff ? "Start Video" : "Stop Video",
+						isActive: !J?.isVideoOff,
+						onClick: b
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: J?.isScreenSharing ? m : p,
+						label: J?.isScreenSharing ? "Stop Share" : "Share Screen",
+						isActive: J?.isScreenSharing,
+						onClick: x
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: l,
+						label: "Chat",
+						isActive: h,
+						onClick: T
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: o,
+						label: J?.hasRaisedHand ? "Lower Hand" : "Raise Hand",
+						isActive: J?.hasRaisedHand,
+						onClick: j
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: _,
+						label: "PiP",
+						onClick: O
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: v ? f : c,
+						label: v ? "Exit Fullscreen" : "Fullscreen",
+						onClick: D
+					}),
+					/* @__PURE__ */ k(B, {
+						icon: g,
+						label: "Leave",
+						isDestructive: !0,
+						onClick: E
+					})
+				]
+			}),
+			/* @__PURE__ */ k("style", { children: "\n        @keyframes pulse-recording {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.5; }\n        }\n      " })
+		]
+	});
+}
+function W(e = {}) {
+	let { initialMuted: n = !1, initialVideoOff: r = !1, onStateChange: i } = e, [a, o] = t.useState({
+		isMuted: n,
+		isVideoOff: r,
+		isScreenSharing: !1,
+		hasRaisedHand: !1,
+		layout: "speaker",
+		showChat: !1,
+		isFullscreen: !1,
+		isPictureInPicture: !1,
+		showParticipantList: !1,
+		showSettings: !1,
+		pinnedParticipantId: null,
+		elapsedTime: 0
+	}), [s, c] = t.useState(null);
+	t.useEffect(() => {
+		if (!s) return;
+		let e = setInterval(() => {
+			o((e) => ({
+				...e,
+				elapsedTime: Math.floor((Date.now() - s.getTime()) / 1e3)
+			}));
+		}, 1e3);
+		return () => clearInterval(e);
+	}, [s]), t.useEffect(() => {
+		i?.(a);
+	}, [a, i]);
+	let l = t.useCallback(() => {
+		c(/* @__PURE__ */ new Date());
+	}, []), u = t.useCallback(() => {
+		c(null), o((e) => ({
+			...e,
+			elapsedTime: 0,
+			isScreenSharing: !1,
+			hasRaisedHand: !1,
+			isPictureInPicture: !1
+		}));
+	}, []), d = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			isMuted: !e.isMuted
+		}));
+	}, []), f = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			isVideoOff: !e.isVideoOff
+		}));
+	}, []), p = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			isScreenSharing: !e.isScreenSharing
+		}));
+	}, []), m = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			hasRaisedHand: !e.hasRaisedHand
+		}));
+	}, []), h = t.useCallback((e) => {
+		o((t) => ({
+			...t,
+			layout: e
+		}));
+	}, []), g = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			showChat: !e.showChat
+		}));
+	}, []), _ = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			isFullscreen: !e.isFullscreen
+		}));
+	}, []), v = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			isPictureInPicture: !e.isPictureInPicture
+		}));
+	}, []), y = t.useCallback(() => {
+		o((e) => ({
+			...e,
+			showParticipantList: !e.showParticipantList
+		}));
+	}, []), b = t.useCallback((e) => {
+		o((t) => ({
+			...t,
+			pinnedParticipantId: e
+		}));
+	}, []);
+	return {
+		...a,
+		callStartTime: s,
+		isInCall: s !== null,
+		startCall: l,
+		endCall: u,
+		toggleMute: d,
+		toggleVideo: f,
+		toggleScreenShare: p,
+		toggleRaiseHand: m,
+		setLayout: h,
+		toggleChat: g,
+		toggleFullscreen: _,
+		togglePictureInPicture: v,
+		toggleParticipantList: y,
+		pinParticipant: b
+	};
+}
+//#endregion
+export { L as CallTimer, F as ConnectionQualityIndicator, B as ControlButton, H as LayoutSelector, R as ParticipantAvatar, V as ParticipantsPanel, I as RecordingIndicator, z as VideoTile, U as WakaVideoCall, U as default, W as useVideoCall };

package/dist/components/waka-video-overlay/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../waka-ad-provider/index.cjs.js"),r=require("../waka-sponsored-badge/index.cjs.js");let i=require("react");i=e.__toESM(i);let a=require("lucide-react"),o=require("react/jsx-runtime");function s({slotId:e,visible:s=!0,trigger:c=`manual`,triggerTime:l=0,position:u=`bottom`,dismissable:d=!0,hideAfter:f=0,className:p,onDismiss:m,onClick:h}){let{config:g,isReady:_,hasConsent:v,getCustomAd:y,trackEvent:b}=n.useAdContext(),[x,S]=(0,i.useState)(`loading`),[C,w]=(0,i.useState)(null),[T,E]=(0,i.useState)(s);(0,i.useEffect)(()=>{!_||v===!1||(async()=>{try{let t=await y(e);t?(w(t),S(`loaded`),b({type:`loaded`,slotId:e,timestamp:new Date})):S(`error`)}catch{S(`error`)}})()},[_,v,e,y,b]),(0,i.useEffect)(()=>{T&&x===`loaded`&&C&&(b({type:`impression`,slotId:e,timestamp:new Date}),C.impressionUrl&&fetch(C.impressionUrl,{mode:`no-cors`}).catch(()=>{}))},[T,x,C,e,b]),(0,i.useEffect)(()=>{E(s)},[s]),(0,i.useEffect)(()=>{if(f===0||!T)return;let e=setTimeout(()=>{E(!1),S(`hidden`),m?.()},f*1e3);return()=>clearTimeout(e)},[f,T,m]);let D=(0,i.useCallback)(()=>{d&&(E(!1),S(`hidden`),m?.())},[d,m]),O=(0,i.useCallback)(()=>{C&&(b({type:`click`,slotId:e,timestamp:new Date}),h?.(),C.clickUrl&&fetch(C.clickUrl,{mode:`no-cors`}).catch(()=>{}),C.targetUrl&&window.open(C.targetUrl,`_blank`,`noopener,noreferrer`))},[C,e,b,h]);if(x===`error`||x===`hidden`||!T||x===`loading`)return null;let k={bottom:`bottom-0 left-0 right-0`,top:`top-0 left-0 right-0`,corner:`bottom-4 right-4 max-w-sm`};return u===`corner`?(0,o.jsxs)(`div`,{className:t.cn(`absolute z-20 rounded-lg overflow-hidden shadow-lg bg-card border animate-in slide-in-from-right`,k[u],p),children:[d&&(0,o.jsx)(`button`,{onClick:D,className:`absolute top-2 right-2 p-1 rounded-full bg-black/50 hover:bg-black/70 transition-colors z-10`,children:(0,o.jsx)(a.X,{className:`h-3 w-3 text-white`})}),(0,o.jsxs)(`button`,{onClick:O,className:`w-full text-left`,children:[C?.imageUrl&&(0,o.jsx)(`div`,{className:`aspect-video bg-muted`,children:(0,o.jsx)(`img`,{src:C.imageUrl,alt:``,className:`w-full h-full object-cover`})}),(0,o.jsxs)(`div`,{className:`p-3`,children:[(0,o.jsx)(`div`,{className:`flex items-start justify-between gap-2 mb-1`,children:(0,o.jsx)(`p`,{className:`font-medium text-sm line-clamp-2`,children:C?.title})}),C?.description&&(0,o.jsx)(`p`,{className:`text-xs text-muted-foreground line-clamp-2 mb-2`,children:C.description}),(0,o.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,o.jsx)(r.WakaSponsoredBadge,{size:`sm`,sponsor:C?.sponsor,showIcon:!1}),C?.cta&&(0,o.jsxs)(`span`,{className:`text-xs text-primary font-medium flex items-center gap-1`,children:[C.cta,(0,o.jsx)(a.ExternalLink,{className:`h-3 w-3`})]})]})]})]})]}):(0,o.jsx)(`div`,{className:t.cn(`absolute z-20 bg-gradient-to-t from-black/80 to-black/50 backdrop-blur-sm`,u===`top`&&`bg-gradient-to-b`,k[u],p),children:(0,o.jsxs)(`div`,{className:`flex items-center gap-4 p-3`,children:[C?.imageUrl&&(0,o.jsx)(`button`,{onClick:O,className:`flex-shrink-0`,children:(0,o.jsx)(`img`,{src:C.imageUrl,alt:``,className:`w-16 h-16 rounded object-cover`})}),(0,o.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,o.jsx)(`div`,{className:`flex items-center gap-2 mb-0.5`,children:(0,o.jsx)(r.WakaSponsoredBadge,{variant:`dark`,size:`sm`,showIcon:!1})}),(0,o.jsxs)(`button`,{onClick:O,className:`text-left`,children:[(0,o.jsx)(`p`,{className:`font-medium text-white text-sm line-clamp-1`,children:C?.title}),C?.description&&(0,o.jsx)(`p`,{className:`text-xs text-white/70 line-clamp-1`,children:C.description})]})]}),(0,o.jsxs)(`div`,{className:`flex items-center gap-2 flex-shrink-0`,children:[C?.cta&&(0,o.jsxs)(`button`,{onClick:O,className:`px-4 py-2 bg-primary text-primary-foreground rounded text-sm font-medium hover:bg-primary/90 transition-colors flex items-center gap-1`,children:[C.cta,(0,o.jsx)(a.ExternalLink,{className:`h-3 w-3`})]}),d&&(0,o.jsx)(`button`,{onClick:D,className:`p-1.5 rounded-full hover:bg-white/20 transition-colors`,children:(0,o.jsx)(a.X,{className:`h-4 w-4 text-white`})})]})]})})}exports.WakaVideoOverlay=s,exports.default=s;

package/dist/components/waka-video-overlay/index.d.ts

@@ -22,5 +22,5 @@ export interface WakaVideoOverlayProps {
     /** Callback when clicked */
     onClick?: () => void;
 }
-export declare function WakaVideoOverlay({ slotId, visible, trigger, triggerTime, position, dismissable, hideAfter, className, onDismiss, onClick, }: WakaVideoOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaVideoOverlay({ slotId, visible, trigger, triggerTime, position, dismissable, hideAfter, className, onDismiss, onClick, }: WakaVideoOverlayProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaVideoOverlay;