@wakastellar/ui 4.0.0 → 4.1.1

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

@@ -0,0 +1,253 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuItem as i, DropdownMenuTrigger as a } from "../dropdown-menu/index.es.js";
+import { Slider as o } from "../slider/index.es.js";
+import * as s from "react";
+import { Loader2 as c, Maximize as l, Minimize as u, Pause as d, Play as f, Settings as p, SkipBack as m, SkipForward as ee, Volume2 as te, VolumeX as h } from "lucide-react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/waka-video/index.tsx
+function y(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}:${r.toString().padStart(2, "0")}`;
+}
+function b({ src: b, poster: x, autoPlay: S = !1, loop: C = !1, muted: w = !1, controls: T = !0, preload: ne = "metadata", width: E, height: D, aspectRatio: O = "16/9", showFullscreen: k = !0, showPlaybackSpeed: A = !0, showQualitySelector: j = !1, playbackSpeeds: re = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+], onReady: ie, onPlay: ae, onPause: oe, onEnded: se, onTimeUpdate: ce, onError: le, className: M }) {
+	let N = s.useRef(null), P = s.useRef(null), [F, I] = s.useState(S), [L, R] = s.useState(w), [z, B] = s.useState(1), [V, H] = s.useState(0), [U, W] = s.useState(0), [ue, G] = s.useState(!1), [K, q] = s.useState(!0), [de, J] = s.useState(!0), [fe, pe] = s.useState(1), [me, Y] = s.useState(""), X = s.useRef(void 0), Z = s.useMemo(() => typeof b == "string" ? [{
+		src: b,
+		type: "video/mp4"
+	}] : b, [b]);
+	s.useEffect(() => {
+		Z.length > 0 && Z[0].quality && Y(Z[0].quality);
+	}, [Z]);
+	let he = () => {
+		let e = N.current;
+		e && (W(e.duration), q(!1), ie?.());
+	}, ge = () => {
+		let e = N.current;
+		e && (H(e.currentTime), ce?.(e.currentTime));
+	}, _e = () => {
+		I(!0), ae?.();
+	}, ve = () => {
+		I(!1), oe?.();
+	}, ye = () => {
+		I(!1), se?.();
+	}, be = () => {
+		q(!1), le?.(/* @__PURE__ */ Error("Video failed to load"));
+	}, xe = () => {
+		q(!0);
+	}, Se = () => {
+		q(!1);
+	}, Q = () => {
+		let e = N.current;
+		e && (F ? e.pause() : e.play());
+	}, Ce = () => {
+		let e = N.current;
+		e && (e.muted = !L, R(!L));
+	}, we = (e) => {
+		let t = N.current;
+		if (!t) return;
+		let n = e[0];
+		t.volume = n, B(n), R(n === 0);
+	}, Te = (e) => {
+		let t = N.current;
+		t && (t.currentTime = e[0], H(e[0]));
+	}, $ = (e) => {
+		let t = N.current;
+		t && (t.currentTime = Math.max(0, Math.min(U, t.currentTime + e)));
+	}, Ee = (e) => {
+		let t = N.current;
+		t && (t.playbackRate = e, pe(e));
+	}, De = (e) => {
+		let t = N.current;
+		if (!t) return;
+		let n = t.currentTime;
+		t.src = e.src, t.currentTime = n, Y(e.quality || ""), F && t.play();
+	};
+	return s.useEffect(() => () => {
+		X.current && clearTimeout(X.current);
+	}, []), s.useEffect(() => {
+		let e = () => {
+			G(!!document.fullscreenElement);
+		};
+		return document.addEventListener("fullscreenchange", e), () => {
+			document.removeEventListener("fullscreenchange", e);
+		};
+	}, []), /* @__PURE__ */ v("div", {
+		ref: P,
+		className: e("relative bg-black overflow-hidden group", M),
+		style: {
+			width: E,
+			height: D,
+			aspectRatio: D ? void 0 : O
+		},
+		onMouseMove: () => {
+			J(!0), X.current && clearTimeout(X.current), F && (X.current = setTimeout(() => {
+				J(!1);
+			}, 3e3));
+		},
+		onMouseLeave: () => F && J(!1),
+		children: [
+			/* @__PURE__ */ _("video", {
+				ref: N,
+				className: "w-full h-full",
+				poster: x,
+				autoPlay: S,
+				loop: C,
+				muted: w,
+				preload: ne,
+				playsInline: !0,
+				onLoadedMetadata: he,
+				onTimeUpdate: ge,
+				onPlay: _e,
+				onPause: ve,
+				onEnded: ye,
+				onError: be,
+				onWaiting: xe,
+				onCanPlay: Se,
+				onClick: Q,
+				children: Z.map((e, t) => /* @__PURE__ */ _("source", {
+					src: e.src,
+					type: e.type
+				}, t))
+			}),
+			K && /* @__PURE__ */ _("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-black/50",
+				children: /* @__PURE__ */ _(c, { className: "h-10 w-10 text-white animate-spin" })
+			}),
+			!F && !K && /* @__PURE__ */ _("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-black/30",
+				children: /* @__PURE__ */ _(t, {
+					variant: "ghost",
+					size: "icon",
+					className: "h-16 w-16 rounded-full bg-white/90 hover:bg-white text-black",
+					onClick: Q,
+					children: /* @__PURE__ */ _(f, { className: "h-8 w-8 ml-1" })
+				})
+			}),
+			T && /* @__PURE__ */ v("div", {
+				className: e("absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity duration-300", de || !F ? "opacity-100" : "opacity-0"),
+				children: [/* @__PURE__ */ _(o, {
+					value: [V],
+					max: U || 100,
+					step: .1,
+					onValueChange: Te,
+					className: "mb-3"
+				}), /* @__PURE__ */ v("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ v("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ _(t, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-8 w-8 text-white hover:bg-white/20",
+								onClick: Q,
+								children: _(F ? d : f, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ _(t, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-8 w-8 text-white hover:bg-white/20",
+								onClick: () => $(-10),
+								children: /* @__PURE__ */ _(m, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ _(t, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-8 w-8 text-white hover:bg-white/20",
+								onClick: () => $(10),
+								children: /* @__PURE__ */ _(ee, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ _(t, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-8 w-8 text-white hover:bg-white/20",
+								onClick: Ce,
+								children: _(L || z === 0 ? h : te, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ _(o, {
+								value: [L ? 0 : z],
+								max: 1,
+								step: .1,
+								onValueChange: we,
+								className: "w-20"
+							}),
+							/* @__PURE__ */ v("span", {
+								className: "text-white text-sm ml-2",
+								children: [
+									y(V),
+									" / ",
+									y(U)
+								]
+							})
+						]
+					}), /* @__PURE__ */ v("div", {
+						className: "flex items-center gap-2",
+						children: [(A || j) && /* @__PURE__ */ v(n, { children: [/* @__PURE__ */ _(a, {
+							asChild: !0,
+							children: /* @__PURE__ */ _(t, {
+								variant: "ghost",
+								size: "icon",
+								className: "h-8 w-8 text-white hover:bg-white/20",
+								children: /* @__PURE__ */ _(p, { className: "h-5 w-5" })
+							})
+						}), /* @__PURE__ */ v(r, {
+							align: "end",
+							children: [A && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("div", {
+								className: "px-2 py-1 text-xs text-muted-foreground",
+								children: "Vitesse"
+							}), re.map((t) => /* @__PURE__ */ v(i, {
+								onClick: () => Ee(t),
+								className: e(fe === t && "bg-muted"),
+								children: [t, "x"]
+							}, t))] }), j && Z.some((e) => e.quality) && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("div", {
+								className: "px-2 py-1 text-xs text-muted-foreground mt-2",
+								children: "Qualité"
+							}), Z.filter((e) => e.quality).map((t, n) => /* @__PURE__ */ _(i, {
+								onClick: () => De(t),
+								className: e(me === t.quality && "bg-muted"),
+								children: t.quality
+							}, n))] })]
+						})] }), k && /* @__PURE__ */ _(t, {
+							variant: "ghost",
+							size: "icon",
+							className: "h-8 w-8 text-white hover:bg-white/20",
+							onClick: async () => {
+								let e = P.current;
+								if (e) try {
+									document.fullscreenElement ? (await document.exitFullscreen(), G(!1)) : (await e.requestFullscreen(), G(!0));
+								} catch (e) {
+									console.error("Fullscreen error:", e);
+								}
+							},
+							children: _(ue ? u : l, { className: "h-5 w-5" })
+						})]
+					})]
+				})]
+			})
+		]
+	});
+}
+function x(e = {}) {
+	let [t, n] = s.useState(e.autoPlay ?? !1), [r, i] = s.useState(e.muted ?? !1), [a, o] = s.useState(0), [c, l] = s.useState(0);
+	return {
+		isPlaying: t,
+		isMuted: r,
+		currentTime: a,
+		duration: c,
+		onPlay: () => n(!0),
+		onPause: () => n(!1),
+		onTimeUpdate: o,
+		onReady: () => {}
+	};
+}
+//#endregion
+export { b as WakaVideo, b as default, x as useVideo };

package/dist/components/waka-video-ad/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-ad-placeholder/index.cjs.js"),i=require("../waka-sponsored-badge/index.cjs.js");let a=require("react");a=e.__toESM(a);let o=require("lucide-react"),s=require("react/jsx-runtime");function c({slotId:e,width:c=640,height:l=360,aspectRatio:u=`16/9`,autoplay:d=!0,muted:f=!0,showControls:ee=!0,skipAfter:p=5,showProgress:m=!0,ctaPosition:h=`bottom`,className:g,onComplete:_,onSkip:v,onClick:y}){let b=(0,a.useRef)(null),x=(0,a.useRef)(null),{config:te,isReady:S,hasConsent:C,getCustomAd:w,trackEvent:T}=n.useAdContext(),{isVisible:E}=n.useAdVisibility(b),[D,O]=(0,a.useState)(`loading`),[k,ne]=(0,a.useState)(null),[A,j]=(0,a.useState)(!1),[M,N]=(0,a.useState)(f),[P,F]=(0,a.useState)(0),[I,L]=(0,a.useState)(0),[R,z]=(0,a.useState)(p===0),[B,V]=(0,a.useState)(p),[H,U]=(0,a.useState)(!1);(0,a.useEffect)(()=>{!S||C===!1||(async()=>{try{let t=await w(e);t?.videoUrl?(ne(t),O(`loaded`),T({type:`loaded`,slotId:e,timestamp:new Date})):O(`error`)}catch{O(`error`)}})()},[S,C,e,w,T]),(0,a.useEffect)(()=>{!x.current||!d||D!==`loaded`||(E?x.current.play().catch(()=>{}):x.current.pause())},[E,d,D]),(0,a.useEffect)(()=>{A&&k&&(T({type:`impression`,slotId:e,timestamp:new Date}),k.impressionUrl&&fetch(k.impressionUrl,{mode:`no-cors`}).catch(()=>{}))},[A,k,e,T]),(0,a.useEffect)(()=>{if(!A||R||p===0)return;let e=setInterval(()=>{V(e=>e<=1?(z(!0),0):e-1)},1e3);return()=>clearInterval(e)},[A,R,p]);let W=()=>{x.current?.play()},G=()=>{x.current?.pause()},K=()=>{A?G():W()},q=()=>{x.current&&(x.current.muted=!M,N(!M))},J=()=>{b.current?.requestFullscreen?.()},Y=()=>{if(x.current){let e=x.current.currentTime,t=x.current.duration;F(e/t*100),h===`end`&&t-e<5&&U(!0)}},X=()=>{x.current&&L(x.current.duration)},Z=()=>{j(!1),U(!0),T({type:`viewable`,slotId:e,timestamp:new Date,data:{completed:!0}}),_?.()},re=()=>{R&&(x.current?.pause(),U(!0),v?.())},Q=(0,a.useCallback)(()=>{k&&(T({type:`click`,slotId:e,timestamp:new Date}),y?.(),k.clickUrl&&fetch(k.clickUrl,{mode:`no-cors`}).catch(()=>{}),k.targetUrl&&window.open(k.targetUrl,`_blank`,`noopener,noreferrer`))},[k,e,T,y]),$=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,`0`)}`;return D===`error`?null:D===`loading`?(0,s.jsx)(`div`,{ref:b,children:(0,s.jsx)(r.WakaAdPlaceholder,{width:c,height:l})}):(0,s.jsxs)(`div`,{ref:b,className:t.cn(`relative overflow-hidden rounded-lg bg-black group`,g),style:{width:c,maxWidth:`100%`},children:[(0,s.jsxs)(`div`,{className:t.cn(`relative`,`aspect-[${u}]`),children:[(0,s.jsx)(`video`,{ref:x,src:k?.videoUrl,muted:M,playsInline:!0,onClick:K,onPlay:()=>j(!0),onPause:()=>j(!1),onTimeUpdate:Y,onLoadedMetadata:X,onEnded:Z,className:`w-full h-full object-contain cursor-pointer`}),(0,s.jsx)(`div`,{className:`absolute top-2 left-2 z-10`,children:(0,s.jsx)(i.WakaSponsoredBadge,{variant:`dark`,size:`sm`,sponsor:k?.sponsor})}),p>0&&(0,s.jsx)(`div`,{className:`absolute top-2 right-2 z-10`,children:R?(0,s.jsx)(`button`,{onClick:re,className:`px-3 py-1.5 bg-white/90 text-black text-sm font-medium rounded hover:bg-white transition-colors`,children:`Skip Ad`}):(0,s.jsxs)(`div`,{className:`px-3 py-1.5 bg-black/50 text-white text-sm rounded`,children:[`Skip in `,B,`s`]})}),!A&&(0,s.jsx)(`button`,{onClick:W,className:`absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity`,children:(0,s.jsx)(o.Play,{className:`h-16 w-16 text-white fill-white`})}),h===`overlay`&&k?.cta&&(0,s.jsxs)(`button`,{onClick:Q,className:`absolute bottom-16 left-1/2 -translate-x-1/2 px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center gap-2`,children:[k.cta,(0,s.jsx)(o.ExternalLink,{className:`h-4 w-4`})]}),H&&h===`end`&&(0,s.jsxs)(`div`,{className:`absolute inset-0 flex flex-col items-center justify-center bg-black/80 p-6`,children:[k?.imageUrl&&(0,s.jsx)(`img`,{src:k.imageUrl,alt:``,className:`w-24 h-24 rounded-lg object-cover mb-4`}),(0,s.jsx)(`h3`,{className:`text-white text-xl font-bold text-center mb-2`,children:k?.title}),k?.description&&(0,s.jsx)(`p`,{className:`text-white/80 text-center mb-4 max-w-sm`,children:k.description}),(0,s.jsxs)(`button`,{onClick:Q,className:`px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center gap-2`,children:[k?.cta||`Learn More`,(0,s.jsx)(o.ExternalLink,{className:`h-4 w-4`})]})]}),ee&&(0,s.jsxs)(`div`,{className:`absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity`,children:[m&&(0,s.jsx)(`div`,{className:`mb-2`,children:(0,s.jsx)(`div`,{className:`h-1 bg-white/30 rounded-full overflow-hidden`,children:(0,s.jsx)(`div`,{className:`h-full bg-primary transition-all`,style:{width:`${P}%`}})})}),(0,s.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,s.jsx)(`button`,{onClick:K,className:`p-1.5 hover:bg-white/20 rounded transition-colors`,children:A?(0,s.jsx)(o.Pause,{className:`h-5 w-5 text-white`}):(0,s.jsx)(o.Play,{className:`h-5 w-5 text-white fill-white`})}),(0,s.jsx)(`button`,{onClick:q,className:`p-1.5 hover:bg-white/20 rounded transition-colors`,children:M?(0,s.jsx)(o.VolumeX,{className:`h-5 w-5 text-white`}):(0,s.jsx)(o.Volume2,{className:`h-5 w-5 text-white`})}),(0,s.jsxs)(`span`,{className:`text-white text-xs`,children:[$(P/100*I),` / `,$(I)]})]}),(0,s.jsx)(`button`,{onClick:J,className:`p-1.5 hover:bg-white/20 rounded transition-colors`,children:(0,s.jsx)(o.Maximize,{className:`h-5 w-5 text-white`})})]})]})]}),h===`bottom`&&k?.cta&&(0,s.jsxs)(`button`,{onClick:Q,className:`w-full px-4 py-3 bg-muted hover:bg-muted/80 transition-colors flex items-center justify-between`,children:[(0,s.jsxs)(`div`,{className:`flex items-center gap-3`,children:[k.imageUrl&&(0,s.jsx)(`img`,{src:k.imageUrl,alt:``,className:`w-10 h-10 rounded object-cover`}),(0,s.jsxs)(`div`,{className:`text-left`,children:[(0,s.jsx)(`p`,{className:`font-medium text-sm`,children:k.title}),(0,s.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:k.sponsor})]})]}),(0,s.jsxs)(`span`,{className:`px-4 py-1.5 bg-primary text-primary-foreground rounded text-sm font-medium flex items-center gap-1`,children:[k.cta,(0,s.jsx)(o.ExternalLink,{className:`h-3 w-3`})]})]})]})}exports.WakaVideoAd=c,exports.default=c;

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

@@ -28,5 +28,5 @@ export interface WakaVideoAdProps {
     /** Callback when clicked */
     onClick?: () => void;
 }
-export declare function WakaVideoAd({ slotId, width, height, aspectRatio, autoplay, muted, showControls, skipAfter, showProgress, ctaPosition, className, onComplete, onSkip, onClick, }: WakaVideoAdProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaVideoAd({ slotId, width, height, aspectRatio, autoplay, muted, showControls, skipAfter, showProgress, ctaPosition, className, onComplete, onSkip, onClick, }: WakaVideoAdProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaVideoAd;

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

@@ -0,0 +1,253 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { useAdContext as t, useAdVisibility as n } from "../waka-ad-provider/index.es.js";
+import { WakaAdPlaceholder as r } from "../waka-ad-placeholder/index.es.js";
+import { WakaSponsoredBadge as i } from "../waka-sponsored-badge/index.es.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { ExternalLink as l, Maximize as u, Pause as d, Play as f, Volume2 as ee, VolumeX as p } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/waka-video-ad/index.tsx
+function g({ slotId: g, width: _ = 640, height: v = 360, aspectRatio: y = "16/9", autoplay: b = !0, muted: te = !0, showControls: x = !0, skipAfter: S = 5, showProgress: C = !0, ctaPosition: w = "bottom", className: ne, onComplete: re, onSkip: ie, onClick: T }) {
+	let E = s(null), D = s(null), { config: ae, isReady: O, hasConsent: k, getCustomAd: A, trackEvent: j } = t(), { isVisible: M } = n(E), [N, P] = c("loading"), [F, I] = c(null), [L, R] = c(!1), [z, B] = c(te), [V, H] = c(0), [U, W] = c(0), [G, K] = c(S === 0), [q, J] = c(S), [oe, Y] = c(!1);
+	o(() => {
+		!O || k === !1 || (async () => {
+			try {
+				let e = await A(g);
+				e?.videoUrl ? (I(e), P("loaded"), j({
+					type: "loaded",
+					slotId: g,
+					timestamp: /* @__PURE__ */ new Date()
+				})) : P("error");
+			} catch {
+				P("error");
+			}
+		})();
+	}, [
+		O,
+		k,
+		g,
+		A,
+		j
+	]), o(() => {
+		!D.current || !b || N !== "loaded" || (M ? D.current.play().catch(() => {}) : D.current.pause());
+	}, [
+		M,
+		b,
+		N
+	]), o(() => {
+		L && F && (j({
+			type: "impression",
+			slotId: g,
+			timestamp: /* @__PURE__ */ new Date()
+		}), F.impressionUrl && fetch(F.impressionUrl, { mode: "no-cors" }).catch(() => {}));
+	}, [
+		L,
+		F,
+		g,
+		j
+	]), o(() => {
+		if (!L || G || S === 0) return;
+		let e = setInterval(() => {
+			J((e) => e <= 1 ? (K(!0), 0) : e - 1);
+		}, 1e3);
+		return () => clearInterval(e);
+	}, [
+		L,
+		G,
+		S
+	]);
+	let X = () => {
+		D.current?.play();
+	}, se = () => {
+		D.current?.pause();
+	}, Z = () => {
+		L ? se() : X();
+	}, ce = () => {
+		D.current && (D.current.muted = !z, B(!z));
+	}, le = () => {
+		E.current?.requestFullscreen?.();
+	}, ue = () => {
+		if (D.current) {
+			let e = D.current.currentTime, t = D.current.duration;
+			H(e / t * 100), w === "end" && t - e < 5 && Y(!0);
+		}
+	}, de = () => {
+		D.current && W(D.current.duration);
+	}, fe = () => {
+		R(!1), Y(!0), j({
+			type: "viewable",
+			slotId: g,
+			timestamp: /* @__PURE__ */ new Date(),
+			data: { completed: !0 }
+		}), re?.();
+	}, pe = () => {
+		G && (D.current?.pause(), Y(!0), ie?.());
+	}, Q = a(() => {
+		F && (j({
+			type: "click",
+			slotId: g,
+			timestamp: /* @__PURE__ */ new Date()
+		}), T?.(), F.clickUrl && fetch(F.clickUrl, { mode: "no-cors" }).catch(() => {}), F.targetUrl && window.open(F.targetUrl, "_blank", "noopener,noreferrer"));
+	}, [
+		F,
+		g,
+		j,
+		T
+	]), $ = (e) => `${Math.floor(e / 60)}:${Math.floor(e % 60).toString().padStart(2, "0")}`;
+	return N === "error" ? null : N === "loading" ? /* @__PURE__ */ m("div", {
+		ref: E,
+		children: /* @__PURE__ */ m(r, {
+			width: _,
+			height: v
+		})
+	}) : /* @__PURE__ */ h("div", {
+		ref: E,
+		className: e("relative overflow-hidden rounded-lg bg-black group", ne),
+		style: {
+			width: _,
+			maxWidth: "100%"
+		},
+		children: [/* @__PURE__ */ h("div", {
+			className: e("relative", `aspect-[${y}]`),
+			children: [
+				/* @__PURE__ */ m("video", {
+					ref: D,
+					src: F?.videoUrl,
+					muted: z,
+					playsInline: !0,
+					onClick: Z,
+					onPlay: () => R(!0),
+					onPause: () => R(!1),
+					onTimeUpdate: ue,
+					onLoadedMetadata: de,
+					onEnded: fe,
+					className: "w-full h-full object-contain cursor-pointer"
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "absolute top-2 left-2 z-10",
+					children: /* @__PURE__ */ m(i, {
+						variant: "dark",
+						size: "sm",
+						sponsor: F?.sponsor
+					})
+				}),
+				S > 0 && /* @__PURE__ */ m("div", {
+					className: "absolute top-2 right-2 z-10",
+					children: G ? /* @__PURE__ */ m("button", {
+						onClick: pe,
+						className: "px-3 py-1.5 bg-white/90 text-black text-sm font-medium rounded hover:bg-white transition-colors",
+						children: "Skip Ad"
+					}) : /* @__PURE__ */ h("div", {
+						className: "px-3 py-1.5 bg-black/50 text-white text-sm rounded",
+						children: [
+							"Skip in ",
+							q,
+							"s"
+						]
+					})
+				}),
+				!L && /* @__PURE__ */ m("button", {
+					onClick: X,
+					className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity",
+					children: /* @__PURE__ */ m(f, { className: "h-16 w-16 text-white fill-white" })
+				}),
+				w === "overlay" && F?.cta && /* @__PURE__ */ h("button", {
+					onClick: Q,
+					className: "absolute bottom-16 left-1/2 -translate-x-1/2 px-6 py-2 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center gap-2",
+					children: [F.cta, /* @__PURE__ */ m(l, { className: "h-4 w-4" })]
+				}),
+				oe && w === "end" && /* @__PURE__ */ h("div", {
+					className: "absolute inset-0 flex flex-col items-center justify-center bg-black/80 p-6",
+					children: [
+						F?.imageUrl && /* @__PURE__ */ m("img", {
+							src: F.imageUrl,
+							alt: "",
+							className: "w-24 h-24 rounded-lg object-cover mb-4"
+						}),
+						/* @__PURE__ */ m("h3", {
+							className: "text-white text-xl font-bold text-center mb-2",
+							children: F?.title
+						}),
+						F?.description && /* @__PURE__ */ m("p", {
+							className: "text-white/80 text-center mb-4 max-w-sm",
+							children: F.description
+						}),
+						/* @__PURE__ */ h("button", {
+							onClick: Q,
+							className: "px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center gap-2",
+							children: [F?.cta || "Learn More", /* @__PURE__ */ m(l, { className: "h-4 w-4" })]
+						})
+					]
+				}),
+				x && /* @__PURE__ */ h("div", {
+					className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity",
+					children: [C && /* @__PURE__ */ m("div", {
+						className: "mb-2",
+						children: /* @__PURE__ */ m("div", {
+							className: "h-1 bg-white/30 rounded-full overflow-hidden",
+							children: /* @__PURE__ */ m("div", {
+								className: "h-full bg-primary transition-all",
+								style: { width: `${V}%` }
+							})
+						})
+					}), /* @__PURE__ */ h("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ h("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ m("button", {
+									onClick: Z,
+									className: "p-1.5 hover:bg-white/20 rounded transition-colors",
+									children: L ? /* @__PURE__ */ m(d, { className: "h-5 w-5 text-white" }) : /* @__PURE__ */ m(f, { className: "h-5 w-5 text-white fill-white" })
+								}),
+								/* @__PURE__ */ m("button", {
+									onClick: ce,
+									className: "p-1.5 hover:bg-white/20 rounded transition-colors",
+									children: m(z ? p : ee, { className: "h-5 w-5 text-white" })
+								}),
+								/* @__PURE__ */ h("span", {
+									className: "text-white text-xs",
+									children: [
+										$(V / 100 * U),
+										" / ",
+										$(U)
+									]
+								})
+							]
+						}), /* @__PURE__ */ m("button", {
+							onClick: le,
+							className: "p-1.5 hover:bg-white/20 rounded transition-colors",
+							children: /* @__PURE__ */ m(u, { className: "h-5 w-5 text-white" })
+						})]
+					})]
+				})
+			]
+		}), w === "bottom" && F?.cta && /* @__PURE__ */ h("button", {
+			onClick: Q,
+			className: "w-full px-4 py-3 bg-muted hover:bg-muted/80 transition-colors flex items-center justify-between",
+			children: [/* @__PURE__ */ h("div", {
+				className: "flex items-center gap-3",
+				children: [F.imageUrl && /* @__PURE__ */ m("img", {
+					src: F.imageUrl,
+					alt: "",
+					className: "w-10 h-10 rounded object-cover"
+				}), /* @__PURE__ */ h("div", {
+					className: "text-left",
+					children: [/* @__PURE__ */ m("p", {
+						className: "font-medium text-sm",
+						children: F.title
+					}), /* @__PURE__ */ m("p", {
+						className: "text-xs text-muted-foreground",
+						children: F.sponsor
+					})]
+				})]
+			}), /* @__PURE__ */ h("span", {
+				className: "px-4 py-1.5 bg-primary text-primary-foreground rounded text-sm font-medium flex items-center gap-1",
+				children: [F.cta, /* @__PURE__ */ m(l, { className: "h-3 w-3" })]
+			})]
+		})]
+	});
+}
+//#endregion
+export { g as WakaVideoAd, g as default };

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

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

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

@@ -130,7 +130,7 @@ interface ParticipantsPanelProps {
     onClose: () => void;
     className?: string;
 }
-declare function ParticipantsPanel({ participants, isOpen, onClose, className, }: ParticipantsPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function ParticipantsPanel({ participants, isOpen, onClose, className, }: ParticipantsPanelProps): import("react/jsx-runtime").JSX.Element | null;
 interface LayoutSelectorProps {
     currentLayout: VideoCallLayout;
     onLayoutChange: (layout: VideoCallLayout) => void;
@@ -139,7 +139,7 @@ interface LayoutSelectorProps {
 declare function LayoutSelector({ currentLayout, onLayoutChange, className }: LayoutSelectorProps): import("react/jsx-runtime").JSX.Element;
 export declare function WakaVideoCall({ participants, localParticipantId, isRecording, callStartTime, layout, showChat, isFullscreen, onToggleMute, onToggleVideo, onToggleScreenShare, onToggleChat, onEndCall, onToggleFullscreen, onTogglePictureInPicture, onRaiseHand, onChangeLayout, onPinParticipant, onUnpinParticipant, onMuteParticipant, onRemoveParticipant, className, }: WakaVideoCallProps): import("react/jsx-runtime").JSX.Element;
 export declare function useVideoCall(options?: UseVideoCallOptions): {
-    callStartTime: Date;
+    callStartTime: Date | null;
     isInCall: boolean;
     startCall: () => void;
     endCall: () => void;