wimui 0.51.1 → 0.52.0

package/dist/components/media/Lightbox/Lightbox.js

@@ -2,183 +2,184 @@
 import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
 import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
 import { OverlayBase as r } from "../../_internal/OverlayBase.js";
-import i from "../../../icon/chevron-left.js";
-import a from "../../../icon/chevron-right.js";
-import o from "../../../icon/close.js";
-import s from "../../../icon/minus.js";
-import c from "../../../icon/plus.js";
-import { Icon as l } from "../Icon/Icon.js";
-import u from "./lightbox.module.js";
-import { createContext as d, useCallback as f, useContext as p, useEffect as m, useState as h } from "react";
-import g from "classnames";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { componentsNs as i } from "../../../i18n/generated/components.js";
+import a from "../../../icon/chevron-left.js";
+import o from "../../../icon/chevron-right.js";
+import s from "../../../icon/close.js";
+import c from "../../../icon/minus.js";
+import l from "../../../icon/plus.js";
+import { Icon as u } from "../Icon/Icon.js";
+import d from "./lightbox.module.js";
+import { createContext as f, useCallback as p, useContext as m, useEffect as h, useState as g } from "react";
+import _ from "classnames";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/media/Lightbox/Lightbox.tsx
-var y = d(void 0), b = () => {
-	let e = p(y);
+var b = f(void 0), x = () => {
+	let e = m(b);
 	if (!e) throw Error("Lightbox components must be used within Lightbox");
 	return e;
-}, x = ({ children: e, open: t, onOpenChange: n, defaultOpen: r = !1, defaultIndex: i = 0 }) => {
-	let [a, o] = h(r), [s, c] = h(i), [l, u] = h([]), d = t !== void 0, p = d ? t : a, m = f((e) => {
+}, S = ({ children: e, open: t, onOpenChange: n, defaultOpen: r = !1, defaultIndex: i = 0 }) => {
+	let [a, o] = g(r), [s, c] = g(i), [l, u] = g([]), d = t !== void 0, f = d ? t : a, m = p((e) => {
 		d || o(e), n?.(e);
-	}, [d, n]), g = f((e) => {
+	}, [d, n]), h = p((e) => {
 		let t = -1;
 		return u((n) => (t = n.length, [...n, e])), t;
-	}, []), v = f((e) => {}, []);
-	return /* @__PURE__ */ _(y.Provider, {
+	}, []), _ = p((e) => {}, []);
+	return /* @__PURE__ */ v(b.Provider, {
 		value: {
-			open: p,
+			open: f,
 			setOpen: m,
 			currentIndex: s,
 			setCurrentIndex: c,
 			items: l,
 			setItems: u,
-			registerItem: g,
-			unregisterItem: v
+			registerItem: h,
+			unregisterItem: _
 		},
 		children: e
 	});
-}, S = ({ children: r, className: i, onClick: a, asChild: o = !1, index: s, src: c, alt: l, caption: d, ...f }) => {
-	let { setOpen: p, setCurrentIndex: m, items: h, setItems: v } = b(), { t: y } = n("components"), x = (e) => {
-		if (a?.(e), s !== void 0) m(s);
-		else if (c) {
-			let e = h.findIndex((e) => e.src === c);
-			if (e !== -1) m(e);
+}, C = ({ children: r, className: a, onClick: o, asChild: s = !1, index: c, src: l, alt: u, caption: f, ...p }) => {
+	let { setOpen: m, setCurrentIndex: h, items: g, setItems: y } = x(), { t: b } = n(i), S = (e) => {
+		if (o?.(e), c !== void 0) h(c);
+		else if (l) {
+			let e = g.findIndex((e) => e.src === l);
+			if (e !== -1) h(e);
 			else {
-				let e = h.length;
-				v((e) => [...e, {
-					src: c,
-					alt: l,
-					caption: d
-				}]), m(e);
+				let e = g.length;
+				y((e) => [...e, {
+					src: l,
+					alt: u,
+					caption: f
+				}]), h(e);
 			}
 		}
-		p(!0);
-	}, S = o ? e : "button", C = s === void 0 ? void 0 : h[s]?.alt, w = f["aria-label"] !== void 0 || f["aria-labelledby"] !== void 0, T = l ?? C, E = w ? void 0 : T ? y("lightbox.open_named", { name: T }) : y("lightbox.open");
-	return /* @__PURE__ */ _(S, {
+		m(!0);
+	}, C = s ? e : "button", w = c === void 0 ? void 0 : g[c]?.alt, T = p["aria-label"] !== void 0 || p["aria-labelledby"] !== void 0, E = u ?? w, D = T ? void 0 : E ? b("lightbox.open_named", { name: E }) : b("lightbox.open");
+	return /* @__PURE__ */ v(C, {
 		type: "button",
-		className: g(u.trigger, i),
-		onClick: x,
-		"aria-label": E,
-		...f,
-		children: /* @__PURE__ */ _(t, { children: r })
+		className: _(d.trigger, a),
+		onClick: S,
+		"aria-label": D,
+		...p,
+		children: /* @__PURE__ */ v(t, { children: r })
 	});
-}, C = ({ className: e, showCloseButton: t = !0, showNavigation: d = !0, showCounter: p = !0, closeOnOverlayClick: y = !0, ...x }) => {
-	let { open: S, setOpen: C, currentIndex: w, setCurrentIndex: T, items: E } = b(), { t: D } = n("components"), [O, k] = h(1), A = f(() => {
-		T((w - 1 + E.length) % E.length), k(1);
+}, w = ({ className: e, showCloseButton: t = !0, showNavigation: f = !0, showCounter: m = !0, closeOnOverlayClick: b = !0, ...S }) => {
+	let { open: C, setOpen: w, currentIndex: T, setCurrentIndex: E, items: D } = x(), { t: O } = n(i), [k, A] = g(1), j = p(() => {
+		E((T - 1 + D.length) % D.length), A(1);
 	}, [
-		w,
-		E.length,
-		T
-	]), j = f(() => {
-		T((w + 1) % E.length), k(1);
+		T,
+		D.length,
+		E
+	]), M = p(() => {
+		E((T + 1) % D.length), A(1);
 	}, [
-		w,
-		E.length,
-		T
-	]), M = () => {
-		k((e) => e === 1 ? 2 : 1);
+		T,
+		D.length,
+		E
+	]), N = () => {
+		A((e) => e === 1 ? 2 : 1);
 	};
-	m(() => {
-		if (!S) return;
+	h(() => {
+		if (!C) return;
 		let e = (e) => {
-			e.key === "ArrowLeft" && A(), e.key === "ArrowRight" && j(), e.key === "Escape" && C(!1);
+			e.key === "ArrowLeft" && j(), e.key === "ArrowRight" && M(), e.key === "Escape" && w(!1);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [
-		S,
-		A,
+		C,
 		j,
-		C
+		M,
+		w
 	]);
-	let N = E[w];
-	return N ? /* @__PURE__ */ _(r, {
-		...x,
-		open: S,
-		onOpenChange: C,
-		closeOnOverlayClick: y,
-		overlayClassName: u.overlay,
-		className: g("wim-lightbox", u.contentRoot, e),
-		"aria-label": x["aria-labelledby"] ? void 0 : x["aria-label"] ?? (N.title || N.alt || D("lightbox.dialog")),
+	let P = D[T];
+	return P ? /* @__PURE__ */ v(r, {
+		...S,
+		open: C,
+		onOpenChange: w,
+		closeOnOverlayClick: b,
+		overlayClassName: d.overlay,
+		className: _("wim-lightbox", d.contentRoot, e),
+		"aria-label": S["aria-labelledby"] ? void 0 : S["aria-label"] ?? (P.title || P.alt || O("lightbox.dialog")),
 		transitionProps: {
 			preset: "fade",
-			enter: u.contentEnter,
-			enterFrom: u.contentEnterFrom,
-			enterTo: u.contentEnterTo
+			enter: d.contentEnter,
+			enterFrom: d.contentEnterFrom,
+			enterTo: d.contentEnterTo
 		},
-		children: /* @__PURE__ */ v("div", {
-			className: u.container,
+		children: /* @__PURE__ */ y("div", {
+			className: d.container,
 			children: [
-				/* @__PURE__ */ v("div", {
-					className: u.header,
-					children: [p && E.length > 1 && /* @__PURE__ */ _("div", {
-						className: u.counter,
-						children: D("lightbox.counter", {
-							current: w + 1,
-							total: E.length
+				/* @__PURE__ */ y("div", {
+					className: d.header,
+					children: [m && D.length > 1 && /* @__PURE__ */ v("div", {
+						className: d.counter,
+						children: O("lightbox.counter", {
+							current: T + 1,
+							total: D.length
 						})
-					}), /* @__PURE__ */ v("div", {
-						className: u.controls,
-						children: [/* @__PURE__ */ _("button", {
-							className: u.iconButton,
-							onClick: M,
-							"aria-label": D(O > 1 ? "lightbox.zoom_out" : "lightbox.zoom_in"),
-							children: O > 1 ? /* @__PURE__ */ _(l, { component: s }) : /* @__PURE__ */ _(l, { component: c })
-						}), t && /* @__PURE__ */ _("button", {
-							className: u.iconButton,
-							onClick: () => C(!1),
-							"aria-label": D("lightbox.close"),
-							children: /* @__PURE__ */ _(l, { component: o })
+					}), /* @__PURE__ */ y("div", {
+						className: d.controls,
+						children: [/* @__PURE__ */ v("button", {
+							className: d.iconButton,
+							onClick: N,
+							"aria-label": O(k > 1 ? "lightbox.zoom_out" : "lightbox.zoom_in"),
+							children: k > 1 ? /* @__PURE__ */ v(u, { component: c }) : /* @__PURE__ */ v(u, { component: l })
+						}), t && /* @__PURE__ */ v("button", {
+							className: d.iconButton,
+							onClick: () => w(!1),
+							"aria-label": O("lightbox.close"),
+							children: /* @__PURE__ */ v(u, { component: s })
 						})]
 					})]
 				}),
-				/* @__PURE__ */ v("div", {
-					className: u.viewport,
+				/* @__PURE__ */ y("div", {
+					className: d.viewport,
 					children: [
-						d && E.length > 1 && /* @__PURE__ */ _("button", {
-							className: g(u.navButton, u.prev),
-							onClick: A,
-							"aria-label": D("lightbox.previous"),
-							children: /* @__PURE__ */ _(l, { component: i })
+						f && D.length > 1 && /* @__PURE__ */ v("button", {
+							className: _(d.navButton, d.prev),
+							onClick: j,
+							"aria-label": O("lightbox.previous"),
+							children: /* @__PURE__ */ v(u, { component: a })
 						}),
-						/* @__PURE__ */ _("div", {
-							className: u.mediaWrapper,
-							style: { transform: `scale(${O})` },
-							children: /* @__PURE__ */ _("img", {
-								src: N.src,
-								alt: N.alt || "",
-								className: u.image
+						/* @__PURE__ */ v("div", {
+							className: d.mediaWrapper,
+							style: { transform: `scale(${k})` },
+							children: /* @__PURE__ */ v("img", {
+								src: P.src,
+								alt: P.alt || "",
+								className: d.image
 							})
 						}),
-						d && E.length > 1 && /* @__PURE__ */ _("button", {
-							className: g(u.navButton, u.next),
-							onClick: j,
-							"aria-label": D("lightbox.next"),
-							children: /* @__PURE__ */ _(l, { component: a })
+						f && D.length > 1 && /* @__PURE__ */ v("button", {
+							className: _(d.navButton, d.next),
+							onClick: M,
+							"aria-label": O("lightbox.next"),
+							children: /* @__PURE__ */ v(u, { component: o })
 						})
 					]
 				}),
-				(N.title || N.caption) && /* @__PURE__ */ v("div", {
-					className: u.footer,
-					children: [N.title && /* @__PURE__ */ _("h3", {
-						className: u.title,
-						children: N.title
-					}), N.caption && /* @__PURE__ */ _("p", {
-						className: u.caption,
-						children: N.caption
+				(P.title || P.caption) && /* @__PURE__ */ y("div", {
+					className: d.footer,
+					children: [P.title && /* @__PURE__ */ v("h3", {
+						className: d.title,
+						children: P.title
+					}), P.caption && /* @__PURE__ */ v("p", {
+						className: d.caption,
+						children: P.caption
 					})]
 				})
 			]
 		})
 	}) : null;
-}, w = ({ items: e, children: t }) => {
-	let { setItems: n } = b();
-	return m(() => {
+}, T = ({ items: e, children: t }) => {
+	let { setItems: n } = x();
+	return h(() => {
 		n(e);
-	}, [e, n]), /* @__PURE__ */ _("div", {
-		className: u.gallery,
+	}, [e, n]), /* @__PURE__ */ v("div", {
+		className: d.gallery,
 		children: t
 	});
-}, T = x;
-T.Trigger = S, T.Content = C, T.Gallery = w, T.displayName = "Lightbox", S.displayName = "Lightbox.Trigger", C.displayName = "Lightbox.Content", w.displayName = "Lightbox.Gallery";
+}, E = S;
+E.Trigger = C, E.Content = w, E.Gallery = T, E.displayName = "Lightbox", C.displayName = "Lightbox.Trigger", w.displayName = "Lightbox.Content", T.displayName = "Lightbox.Gallery";
 //#endregion
-export { x as Lightbox, C as LightboxContent, w as LightboxGallery, T as LightboxRoot, T as default, S as LightboxTrigger, b as useLightbox };
+export { S as Lightbox, w as LightboxContent, T as LightboxGallery, E as LightboxRoot, E as default, C as LightboxTrigger, x as useLightbox };

package/dist/components/media/Video/Video.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Icon/Icon.cjs"),n=require("../../../hooks/useMediaLoader.cjs"),r=require("./hooks/useVideoPlayer.cjs"),i=require("./components/VideoAdvancedMenu.cjs"),a=require("./components/VideoControls.cjs"),o=require("./video.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=({src:e,width:u,height:d,autoPlay:f=!1,loop:p=!1,muted:m=!1,controls:h=!0,poster:g,radius:_=`none`,shadow:v=!1,border:y=!1,fit:b=`cover`,preload:x,caption:S,className:C,style:w,customControls:T=!1,advancedControls:E=!1,videoId:D,resumePlayback:O=!1,playlist:k,autoPlayNext:A=!1,qualities:j,loading:M=`lazy`,fadeIn:N=!1,demoDelay:P,labels:F={},tracks:I,...L})=>{let{videoAriaLabel:R=`Video`,seconds:z=`s`}=F,{containerRef:B,isLoaded:V,isIntersecting:H,notifyLoaded:U,shouldShowSkeleton:W}=n.useMediaLoader({loading:M,src:j?.[0]?.src||k?.[0]?.src||e,demoDelay:P}),G=r.useVideoPlayer({src:e,autoPlay:f,loop:p,muted:m,fit:b,videoId:D,resumePlayback:O,playlist:k,autoPlayNext:A,qualities:j,customControls:T,advancedControls:E,poster:g,containerRef:B}),{videoRef:K,isPlaying:q,activeSrc:J,activePoster:Y,showNativeControls:X,skipIndicator:Z,activeMenu:Q,setActiveMenu:$}=G;s.default.useEffect(()=>{let e=K.current;e&&(m?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[m,K,J,H]);let ee={width:`100%`,height:d||`auto`,objectFit:G.activeFit,...w},te=_===`none`?null:o.default[`radius${_.charAt(0).toUpperCase()+_.slice(1)}`];return(0,l.jsxs)(`figure`,{className:(0,c.default)(`wim-video`,o.default.root,C),style:{width:`100%`},"aria-label":R,"data-testid":`video-root`,children:[(0,l.jsxs)(`div`,{className:(0,c.default)(o.default.inner,te,v&&o.default.shadow,y&&o.default.border,(T||E)&&o.default.custom,N&&o.default.fadeIn,N&&V&&o.default.isLoaded,W&&o.default.loading),ref:B,"data-testid":`video-inner`,children:[H&&(0,l.jsx)(`video`,{ref:K,src:J,className:o.default.video,style:ee,autoPlay:f&&V,loop:p&&(!k||k.length<=1),muted:m,controls:X&&h,poster:Y,preload:x,playsInline:!0,onTimeUpdate:G.handleTimeUpdate,onLoadedMetadata:G.handleLoadedMetadata,onLoadedData:U,onEnded:G.handleEnded,onPlay:()=>{},onPause:()=>{},onClick:G.handleVideoClick,"data-testid":`video-element`,...L,children:I?.map((e,t)=>(0,l.jsx)(`track`,{...e},t))}),Z.show&&(0,l.jsxs)(`div`,{className:o.default.skipIndicator,children:[(0,l.jsx)(t.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsx)(t.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsx)(t.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsxs)(`span`,{children:[`10`,z]})]}),(T||E)&&(0,l.jsxs)(`div`,{role:`none`,className:o.default.customControls,onClick:()=>Q&&$(null),children:[E&&(0,l.jsx)(i.VideoAdvancedMenu,{styles:o.default,activeMenu:Q,setActiveMenu:$,qualities:j,currentQualityIndex:G.currentQualityIndex,handleQualityChange:G.handleQualityChange,playbackRate:G.playbackRate,setPlaybackRate:G.setPlaybackRate,activeFit:G.activeFit,setActiveFit:G.setActiveFit,playlist:k,currentPlayIndex:G.currentPlayIndex,playPlaylistItem:G.playPlaylistItem,labels:F}),(0,l.jsx)(a.VideoControls,{styles:o.default,playlist:k,advancedControls:E,currentPlayIndex:G.currentPlayIndex,setCurrentPlayIndex:G.setCurrentPlayIndex,skip:G.skip,isPlaying:q,togglePlay:G.togglePlay,currentTime:G.currentTime,duration:G.duration,handleSeek:G.handleSeek,volume:G.volume,isMuted:G.isMuted,toggleMute:G.toggleMute,handleVolumeChange:G.handleVolumeChange,activeMenu:Q,setActiveMenu:$,togglePiP:G.togglePiP,isFullscreen:G.isFullscreen,toggleFullscreen:G.toggleFullscreen,formatTime:G.formatTime,labels:F})]})]}),S&&(0,l.jsx)(`figcaption`,{className:o.default.caption,"data-testid":`video-caption`,children:S})]})};exports.Video=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Icon/Icon.cjs"),ee=require("../../../hooks/useMediaLoader.cjs"),i=require("./hooks/useVideoPlayer.cjs"),a=require("./components/VideoAdvancedMenu.cjs"),o=require("./components/VideoControls.cjs"),s=require("./video.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=({src:e,width:d,height:te,autoPlay:f=!1,loop:p=!1,muted:m=!1,controls:h=!0,poster:g,radius:_=`none`,shadow:v=!1,border:y=!1,fit:b=`cover`,preload:x,caption:S,className:C,style:ne,customControls:w=!1,advancedControls:T=!1,videoId:E,resumePlayback:D=!1,playlist:O,autoPlayNext:k=!1,qualities:A,loading:j=`lazy`,fadeIn:M=!1,demoDelay:N,labels:P={},tracks:F,...I})=>{let{t:L}=t.useWimTranslation(n.commonNs),{videoAriaLabel:R=L(`video.label`),seconds:z=`s`}=P,{containerRef:B,isLoaded:V,isIntersecting:H,notifyLoaded:U,shouldShowSkeleton:W}=ee.useMediaLoader({loading:j,src:A?.[0]?.src||O?.[0]?.src||e,demoDelay:N}),G=i.useVideoPlayer({src:e,autoPlay:f,loop:p,muted:m,fit:b,videoId:E,resumePlayback:D,playlist:O,autoPlayNext:k,qualities:A,customControls:w,advancedControls:T,poster:g,containerRef:B}),{videoRef:K,isPlaying:q,activeSrc:J,activePoster:Y,showNativeControls:X,skipIndicator:Z,activeMenu:Q,setActiveMenu:$}=G;c.default.useEffect(()=>{let e=K.current;e&&(m?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[m,K,J,H]);let re={width:`100%`,height:te||`auto`,objectFit:G.activeFit,...ne},ie=_===`none`?null:s.default[`radius${_.charAt(0).toUpperCase()+_.slice(1)}`];return(0,u.jsxs)(`figure`,{className:(0,l.default)(`wim-video`,s.default.root,C),style:{width:`100%`},"aria-label":R,"data-testid":`video-root`,children:[(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.inner,ie,v&&s.default.shadow,y&&s.default.border,(w||T)&&s.default.custom,M&&s.default.fadeIn,M&&V&&s.default.isLoaded,W&&s.default.loading),ref:B,"data-testid":`video-inner`,children:[H&&(0,u.jsx)(`video`,{ref:K,src:J,className:s.default.video,style:re,autoPlay:f&&V,loop:p&&(!O||O.length<=1),muted:m,controls:X&&h,poster:Y,preload:x,playsInline:!0,onTimeUpdate:G.handleTimeUpdate,onLoadedMetadata:G.handleLoadedMetadata,onLoadedData:U,onEnded:G.handleEnded,onPlay:()=>{},onPause:()=>{},onClick:G.handleVideoClick,"data-testid":`video-element`,...I,children:F?.map((e,t)=>(0,u.jsx)(`track`,{...e},t))}),Z.show&&(0,u.jsxs)(`div`,{className:s.default.skipIndicator,children:[(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsxs)(`span`,{children:[`10`,z]})]}),(w||T)&&(0,u.jsxs)(`div`,{role:`none`,className:s.default.customControls,onClick:()=>Q&&$(null),children:[T&&(0,u.jsx)(a.VideoAdvancedMenu,{styles:s.default,activeMenu:Q,setActiveMenu:$,qualities:A,currentQualityIndex:G.currentQualityIndex,handleQualityChange:G.handleQualityChange,playbackRate:G.playbackRate,setPlaybackRate:G.setPlaybackRate,activeFit:G.activeFit,setActiveFit:G.setActiveFit,playlist:O,currentPlayIndex:G.currentPlayIndex,playPlaylistItem:G.playPlaylistItem,labels:P}),(0,u.jsx)(o.VideoControls,{styles:s.default,playlist:O,advancedControls:T,currentPlayIndex:G.currentPlayIndex,setCurrentPlayIndex:G.setCurrentPlayIndex,skip:G.skip,isPlaying:q,togglePlay:G.togglePlay,currentTime:G.currentTime,duration:G.duration,handleSeek:G.handleSeek,volume:G.volume,isMuted:G.isMuted,toggleMute:G.toggleMute,handleVolumeChange:G.handleVolumeChange,activeMenu:Q,setActiveMenu:$,togglePiP:G.togglePiP,isFullscreen:G.isFullscreen,toggleFullscreen:G.toggleFullscreen,formatTime:G.formatTime,labels:P})]})]}),S&&(0,u.jsx)(`figcaption`,{className:s.default.caption,"data-testid":`video-caption`,children:S})]})};exports.Video=d;

package/dist/components/media/Video/Video.js

@@ -1,71 +1,73 @@
 "use client";
-import { Icon as e } from "../Icon/Icon.js";
-import { useMediaLoader as t } from "../../../hooks/useMediaLoader.js";
-import { useVideoPlayer as n } from "./hooks/useVideoPlayer.js";
-import { VideoAdvancedMenu as r } from "./components/VideoAdvancedMenu.js";
-import { VideoControls as i } from "./components/VideoControls.js";
-import a from "./video.module.js";
-import o from "react";
-import s from "classnames";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { commonNs as t } from "../../../i18n/generated/common.js";
+import { Icon as n } from "../Icon/Icon.js";
+import { useMediaLoader as ee } from "../../../hooks/useMediaLoader.js";
+import { useVideoPlayer as r } from "./hooks/useVideoPlayer.js";
+import { VideoAdvancedMenu as i } from "./components/VideoAdvancedMenu.js";
+import { VideoControls as a } from "./components/VideoControls.js";
+import o from "./video.module.js";
+import s from "react";
+import c from "classnames";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/media/Video/Video.tsx
-var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted: m = !1, controls: h = !0, poster: g, radius: _ = "none", shadow: v = !1, border: y = !1, fit: b = "cover", preload: x, caption: S, className: C, style: w, customControls: T = !1, advancedControls: E = !1, videoId: D, resumePlayback: O = !1, playlist: k, autoPlayNext: A = !1, qualities: j, loading: M = "lazy", fadeIn: N = !1, demoDelay: P, labels: F = {}, tracks: I, ...L }) => {
-	let { videoAriaLabel: R = "Video", seconds: z = "s" } = F, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = t({
-		loading: M,
-		src: j?.[0]?.src || k?.[0]?.src || u,
-		demoDelay: P
-	}), G = n({
-		src: u,
-		autoPlay: f,
-		loop: p,
-		muted: m,
-		fit: b,
-		videoId: D,
-		resumePlayback: O,
-		playlist: k,
-		autoPlayNext: A,
-		qualities: j,
-		customControls: T,
-		advancedControls: E,
-		poster: g,
+var d = ({ src: d, width: te, height: f, autoPlay: p = !1, loop: m = !1, muted: h = !1, controls: ne = !0, poster: re, radius: g = "none", shadow: _ = !1, border: v = !1, fit: y = "cover", preload: b, caption: x, className: S, style: C, customControls: w = !1, advancedControls: T = !1, videoId: E, resumePlayback: D = !1, playlist: O, autoPlayNext: k = !1, qualities: A, loading: j = "lazy", fadeIn: M = !1, demoDelay: N, labels: P = {}, tracks: F, ...I }) => {
+	let { t: L } = e(t), { videoAriaLabel: R = L("video.label"), seconds: z = "s" } = P, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = ee({
+		loading: j,
+		src: A?.[0]?.src || O?.[0]?.src || d,
+		demoDelay: N
+	}), G = r({
+		src: d,
+		autoPlay: p,
+		loop: m,
+		muted: h,
+		fit: y,
+		videoId: E,
+		resumePlayback: D,
+		playlist: O,
+		autoPlayNext: k,
+		qualities: A,
+		customControls: w,
+		advancedControls: T,
+		poster: re,
 		containerRef: B
 	}), { videoRef: K, isPlaying: q, activeSrc: J, activePoster: Y, showNativeControls: X, skipIndicator: Z, activeMenu: Q, setActiveMenu: $ } = G;
-	o.useEffect(() => {
+	s.useEffect(() => {
 		let e = K.current;
-		e && (m ? e.setAttribute("muted", "") : e.removeAttribute("muted"));
+		e && (h ? e.setAttribute("muted", "") : e.removeAttribute("muted"));
 	}, [
-		m,
+		h,
 		K,
 		J,
 		H
 	]);
-	let te = {
+	let ie = {
 		width: "100%",
-		height: d || "auto",
+		height: f || "auto",
 		objectFit: G.activeFit,
-		...w
-	}, ne = _ === "none" ? null : a[`radius${_.charAt(0).toUpperCase() + _.slice(1)}`];
-	return /* @__PURE__ */ l("figure", {
-		className: s("wim-video", a.root, C),
+		...C
+	}, ae = g === "none" ? null : o[`radius${g.charAt(0).toUpperCase() + g.slice(1)}`];
+	return /* @__PURE__ */ u("figure", {
+		className: c("wim-video", o.root, S),
 		style: { width: "100%" },
 		"aria-label": R,
 		"data-testid": "video-root",
-		children: [/* @__PURE__ */ l("div", {
-			className: s(a.inner, ne, v && a.shadow, y && a.border, (T || E) && a.custom, N && a.fadeIn, N && V && a.isLoaded, W && a.loading),
+		children: [/* @__PURE__ */ u("div", {
+			className: c(o.inner, ae, _ && o.shadow, v && o.border, (w || T) && o.custom, M && o.fadeIn, M && V && o.isLoaded, W && o.loading),
 			ref: B,
 			"data-testid": "video-inner",
 			children: [
-				H && /* @__PURE__ */ c("video", {
+				H && /* @__PURE__ */ l("video", {
 					ref: K,
 					src: J,
-					className: a.video,
-					style: te,
-					autoPlay: f && V,
-					loop: p && (!k || k.length <= 1),
-					muted: m,
-					controls: X && h,
+					className: o.video,
+					style: ie,
+					autoPlay: p && V,
+					loop: m && (!O || O.length <= 1),
+					muted: h,
+					controls: X && ne,
 					poster: Y,
-					preload: x,
+					preload: b,
 					playsInline: !0,
 					onTimeUpdate: G.handleTimeUpdate,
 					onLoadedMetadata: G.handleLoadedMetadata,
@@ -75,50 +77,50 @@ var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted:
 					onPause: () => {},
 					onClick: G.handleVideoClick,
 					"data-testid": "video-element",
-					...L,
-					children: I?.map((e, t) => /* @__PURE__ */ c("track", { ...e }, t))
+					...I,
+					children: F?.map((e, t) => /* @__PURE__ */ l("track", { ...e }, t))
 				}),
-				Z.show && /* @__PURE__ */ l("div", {
-					className: a.skipIndicator,
+				Z.show && /* @__PURE__ */ u("div", {
+					className: o.skipIndicator,
 					children: [
-						/* @__PURE__ */ c(e, {
+						/* @__PURE__ */ l(n, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ c(e, {
+						/* @__PURE__ */ l(n, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ c(e, {
+						/* @__PURE__ */ l(n, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ l("span", { children: ["10", z] })
+						/* @__PURE__ */ u("span", { children: ["10", z] })
 					]
 				}),
-				(T || E) && /* @__PURE__ */ l("div", {
+				(w || T) && /* @__PURE__ */ u("div", {
 					role: "none",
-					className: a.customControls,
+					className: o.customControls,
 					onClick: () => Q && $(null),
-					children: [E && /* @__PURE__ */ c(r, {
-						styles: a,
+					children: [T && /* @__PURE__ */ l(i, {
+						styles: o,
 						activeMenu: Q,
 						setActiveMenu: $,
-						qualities: j,
+						qualities: A,
 						currentQualityIndex: G.currentQualityIndex,
 						handleQualityChange: G.handleQualityChange,
 						playbackRate: G.playbackRate,
 						setPlaybackRate: G.setPlaybackRate,
 						activeFit: G.activeFit,
 						setActiveFit: G.setActiveFit,
-						playlist: k,
+						playlist: O,
 						currentPlayIndex: G.currentPlayIndex,
 						playPlaylistItem: G.playPlaylistItem,
-						labels: F
-					}), /* @__PURE__ */ c(i, {
-						styles: a,
-						playlist: k,
-						advancedControls: E,
+						labels: P
+					}), /* @__PURE__ */ l(a, {
+						styles: o,
+						playlist: O,
+						advancedControls: T,
 						currentPlayIndex: G.currentPlayIndex,
 						setCurrentPlayIndex: G.setCurrentPlayIndex,
 						skip: G.skip,
@@ -137,16 +139,16 @@ var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted:
 						isFullscreen: G.isFullscreen,
 						toggleFullscreen: G.toggleFullscreen,
 						formatTime: G.formatTime,
-						labels: F
+						labels: P
 					})]
 				})
 			]
-		}), S && /* @__PURE__ */ c("figcaption", {
-			className: a.caption,
+		}), x && /* @__PURE__ */ l("figcaption", {
+			className: o.caption,
 			"data-testid": "video-caption",
-			children: S
+			children: x
 		})]
 	});
 };
 //#endregion
-export { u as Video };
+export { d as Video };

package/dist/components/media/Video/components/VideoAdvancedMenu.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../icon/check.cjs"),n=require("../../../../icon/chevron-left.cjs"),r=require("../../../../icon/chevron-right.cjs"),i=require("../../../../icon/close.cjs"),a=require("../../../../icon/play.cjs"),o=require("../../Icon/Icon.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=[.25,.5,.75,1,1.25,1.5,1.75,2],u=[`contain`,`cover`,`fill`,`scale-down`,`none`];function d({activeMenu:e,setActiveMenu:s,qualities:d,currentQualityIndex:f,handleQualityChange:p,playbackRate:m,setPlaybackRate:h,activeFit:g,setActiveFit:_,playlist:v,currentPlayIndex:y,playPlaylistItem:b,labels:x={},styles:S}){let{settings:C=`Settings`,quality:w=`Quality`,playbackRate:T=`Playback Speed`,aspectRatio:E=`Aspect Ratio`,standard:D=`Standard`,playlist:O=`Playlist`,contain:k=`Contain`,cover:A=`Cover`,fill:j=`Fill`,scaleDown:M=`Scale Down`,none:N=`None`}=x;if(!e)return null;let P=e=>{switch(e){case`contain`:return k;case`cover`:return A;case`fill`:return j;case`scale-down`:return M;case`none`:return N;default:return e}};return(0,c.jsxs)(c.Fragment,{children:[e===`main`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(null)},role:`menu`,tabIndex:-1,children:[(0,c.jsx)(`div`,{className:S.menuTitle,children:(0,c.jsx)(`span`,{children:C})}),(0,c.jsxs)(`div`,{className:S.menuItems,children:[d&&d.length>0&&(0,c.jsxs)(`button`,{className:S.menuBtn,onClick:()=>s(`quality`),children:[(0,c.jsx)(`span`,{children:w}),(0,c.jsxs)(`span`,{style:{opacity:.7},children:[d[f].label,` `,(0,c.jsx)(o.Icon,{component:r.default,size:`sm`})]})]}),(0,c.jsxs)(`button`,{className:S.menuBtn,onClick:()=>s(`rate`),children:[(0,c.jsx)(`span`,{children:T}),(0,c.jsxs)(`span`,{style:{opacity:.7},children:[m,`x `,(0,c.jsx)(o.Icon,{component:r.default,size:`sm`})]})]}),(0,c.jsxs)(`button`,{className:S.menuBtn,onClick:()=>s(`fit`),children:[(0,c.jsx)(`span`,{children:E}),(0,c.jsxs)(`span`,{style:{opacity:.7},children:[P(g),` `,(0,c.jsx)(o.Icon,{component:r.default,size:`sm`})]})]})]})]}),e===`quality`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(`main`)},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`button`,{onClick:()=>s(`main`),className:S.btn,children:(0,c.jsx)(o.Icon,{component:n.default,size:`sm`})}),(0,c.jsx)(`span`,{children:w})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:d?.map((e,n)=>(0,c.jsxs)(`button`,{className:S.menuBtn,"data-active":f===n,onClick:()=>p(n),children:[f===n&&(0,c.jsx)(o.Icon,{component:t.default,size:`sm`}),(0,c.jsx)(`span`,{style:{marginLeft:f===n?0:24},children:e.label})]},n))})]}),e===`rate`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(`main`)},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`button`,{onClick:()=>s(`main`),className:S.btn,children:(0,c.jsx)(o.Icon,{component:n.default,size:`sm`})}),(0,c.jsx)(`span`,{children:T})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:l.map(e=>(0,c.jsxs)(`button`,{className:S.menuBtn,"data-active":m===e,onClick:()=>{h(e),s(`main`)},children:[m===e&&(0,c.jsx)(o.Icon,{component:t.default,size:`sm`}),(0,c.jsx)(`span`,{style:{marginLeft:m===e?0:24},children:e===1?D:`${e}x`})]},e))})]}),e===`fit`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(`main`)},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`button`,{onClick:()=>s(`main`),className:S.btn,children:(0,c.jsx)(o.Icon,{component:n.default,size:`sm`})}),(0,c.jsx)(`span`,{children:E})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:u.map(e=>(0,c.jsxs)(`button`,{className:S.menuBtn,"data-active":g===e,onClick:()=>{_(e),s(`main`)},children:[g===e&&(0,c.jsx)(o.Icon,{component:t.default,size:`sm`}),(0,c.jsx)(`span`,{style:{marginLeft:g===e?0:24},children:P(e)})]},e))})]}),e===`playlist`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(null)},style:{bottom:60,right:16,width:250},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`span`,{children:O}),(0,c.jsx)(`button`,{onClick:()=>s(null),style:{marginLeft:`auto`},className:S.btn,children:(0,c.jsx)(o.Icon,{component:i.default,size:`sm`})})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:v?.map((e,t)=>(0,c.jsx)(`button`,{className:S.menuBtn,"data-active":y===t,onClick:()=>b(t),style:{flexDirection:`column`,alignItems:`flex-start`,gap:4},children:(0,c.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[y===t?(0,c.jsx)(o.Icon,{component:a.default,size:`sm`}):(0,c.jsx)(`div`,{style:{width:20}}),(0,c.jsx)(`span`,{children:e.title||`Track ${t+1}`})]})},t))})]})]})}exports.VideoAdvancedMenu=d;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../i18n/useWimTranslation.cjs"),n=require("../../../../i18n/generated/common.cjs"),r=require("../../../../icon/check.cjs"),i=require("../../../../icon/chevron-left.cjs"),a=require("../../../../icon/chevron-right.cjs"),o=require("../../../../icon/close.cjs"),s=require("../../../../icon/play.cjs"),c=require("../../Icon/Icon.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=[.25,.5,.75,1,1.25,1.5,1.75,2],f=[`contain`,`cover`,`fill`,`scale-down`,`none`];function p({activeMenu:e,setActiveMenu:l,qualities:p,currentQualityIndex:m,handleQualityChange:h,playbackRate:g,setPlaybackRate:_,activeFit:v,setActiveFit:y,playlist:b,currentPlayIndex:x,playPlaylistItem:S,labels:C={},styles:w}){let{t:T}=t.useWimTranslation(n.commonNs),{settings:E=T(`a11y.settings`),quality:D=T(`quality`),playbackRate:O=T(`playback.speed`),aspectRatio:k=T(`aspect.ratio`),standard:A=T(`standard`),playlist:j=T(`a11y.playlist`),contain:M=T(`video.fit_contain`),cover:N=T(`video.fit_cover`),fill:P=T(`video.fit_fill`),scaleDown:F=T(`video.fit_scale_down`),none:I=T(`common.none`)}=C;if(!e)return null;let L=e=>{switch(e){case`contain`:return M;case`cover`:return N;case`fill`:return P;case`scale-down`:return F;case`none`:return I;default:return e}};return(0,u.jsxs)(u.Fragment,{children:[e===`main`&&(0,u.jsxs)(`div`,{className:w.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&l(null)},role:`menu`,tabIndex:-1,children:[(0,u.jsx)(`div`,{className:w.menuTitle,children:(0,u.jsx)(`span`,{children:E})}),(0,u.jsxs)(`div`,{className:w.menuItems,children:[p&&p.length>0&&(0,u.jsxs)(`button`,{className:w.menuBtn,onClick:()=>l(`quality`),children:[(0,u.jsx)(`span`,{children:D}),(0,u.jsxs)(`span`,{style:{opacity:.7},children:[p[m].label,` `,(0,u.jsx)(c.Icon,{component:a.default,size:`sm`})]})]}),(0,u.jsxs)(`button`,{className:w.menuBtn,onClick:()=>l(`rate`),children:[(0,u.jsx)(`span`,{children:O}),(0,u.jsxs)(`span`,{style:{opacity:.7},children:[g,`x `,(0,u.jsx)(c.Icon,{component:a.default,size:`sm`})]})]}),(0,u.jsxs)(`button`,{className:w.menuBtn,onClick:()=>l(`fit`),children:[(0,u.jsx)(`span`,{children:k}),(0,u.jsxs)(`span`,{style:{opacity:.7},children:[L(v),` `,(0,u.jsx)(c.Icon,{component:a.default,size:`sm`})]})]})]})]}),e===`quality`&&(0,u.jsxs)(`div`,{className:w.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&l(`main`)},role:`menu`,tabIndex:-1,children:[(0,u.jsxs)(`div`,{className:w.menuTitle,children:[(0,u.jsx)(`button`,{onClick:()=>l(`main`),className:w.btn,children:(0,u.jsx)(c.Icon,{component:i.default,size:`sm`})}),(0,u.jsx)(`span`,{children:D})]}),(0,u.jsx)(`div`,{className:w.menuItems,children:p?.map((e,t)=>(0,u.jsxs)(`button`,{className:w.menuBtn,"data-active":m===t,onClick:()=>h(t),children:[m===t&&(0,u.jsx)(c.Icon,{component:r.default,size:`sm`}),(0,u.jsx)(`span`,{style:{marginLeft:m===t?0:24},children:e.label})]},t))})]}),e===`rate`&&(0,u.jsxs)(`div`,{className:w.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&l(`main`)},role:`menu`,tabIndex:-1,children:[(0,u.jsxs)(`div`,{className:w.menuTitle,children:[(0,u.jsx)(`button`,{onClick:()=>l(`main`),className:w.btn,children:(0,u.jsx)(c.Icon,{component:i.default,size:`sm`})}),(0,u.jsx)(`span`,{children:O})]}),(0,u.jsx)(`div`,{className:w.menuItems,children:d.map(e=>(0,u.jsxs)(`button`,{className:w.menuBtn,"data-active":g===e,onClick:()=>{_(e),l(`main`)},children:[g===e&&(0,u.jsx)(c.Icon,{component:r.default,size:`sm`}),(0,u.jsx)(`span`,{style:{marginLeft:g===e?0:24},children:e===1?A:`${e}x`})]},e))})]}),e===`fit`&&(0,u.jsxs)(`div`,{className:w.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&l(`main`)},role:`menu`,tabIndex:-1,children:[(0,u.jsxs)(`div`,{className:w.menuTitle,children:[(0,u.jsx)(`button`,{onClick:()=>l(`main`),className:w.btn,children:(0,u.jsx)(c.Icon,{component:i.default,size:`sm`})}),(0,u.jsx)(`span`,{children:k})]}),(0,u.jsx)(`div`,{className:w.menuItems,children:f.map(e=>(0,u.jsxs)(`button`,{className:w.menuBtn,"data-active":v===e,onClick:()=>{y(e),l(`main`)},children:[v===e&&(0,u.jsx)(c.Icon,{component:r.default,size:`sm`}),(0,u.jsx)(`span`,{style:{marginLeft:v===e?0:24},children:L(e)})]},e))})]}),e===`playlist`&&(0,u.jsxs)(`div`,{className:w.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&l(null)},style:{bottom:60,right:16,width:250},role:`menu`,tabIndex:-1,children:[(0,u.jsxs)(`div`,{className:w.menuTitle,children:[(0,u.jsx)(`span`,{children:j}),(0,u.jsx)(`button`,{onClick:()=>l(null),style:{marginLeft:`auto`},className:w.btn,children:(0,u.jsx)(c.Icon,{component:o.default,size:`sm`})})]}),(0,u.jsx)(`div`,{className:w.menuItems,children:b?.map((e,t)=>(0,u.jsx)(`button`,{className:w.menuBtn,"data-active":x===t,onClick:()=>S(t),style:{flexDirection:`column`,alignItems:`flex-start`,gap:4},children:(0,u.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[x===t?(0,u.jsx)(c.Icon,{component:s.default,size:`sm`}):(0,u.jsx)(`div`,{style:{width:20}}),(0,u.jsx)(`span`,{children:e.title||`Track ${t+1}`})]})},t))})]})]})}exports.VideoAdvancedMenu=p;