wimui 0.51.2 → 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("../../../i18n/useWimTranslation.cjs"),n=require("../Icon/Icon.cjs"),ee=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:te,autoPlay:d=!1,loop:f=!1,muted:p=!1,controls:m=!0,poster:h,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}=t.useWimTranslation(`common`),{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=r.useVideoPlayer({src:e,autoPlay:d,loop:f,muted:p,fit:y,videoId:E,resumePlayback:D,playlist:O,autoPlayNext:k,qualities:A,customControls:w,advancedControls:T,poster:h,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&&(p?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[p,K,J,H]);let ne={width:`100%`,height:te||`auto`,objectFit:G.activeFit,...C},re=g===`none`?null:o.default[`radius${g.charAt(0).toUpperCase()+g.slice(1)}`];return(0,l.jsxs)(`figure`,{className:(0,c.default)(`wim-video`,o.default.root,S),style:{width:`100%`},"aria-label":R,"data-testid":`video-root`,children:[(0,l.jsxs)(`div`,{className:(0,c.default)(o.default.inner,re,_&&o.default.shadow,v&&o.default.border,(w||T)&&o.default.custom,M&&o.default.fadeIn,M&&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:ne,autoPlay:d&&V,loop:f&&(!O||O.length<=1),muted:p,controls:X&&m,poster:Y,preload:b,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,l.jsx)(`track`,{...e},t))}),Z.show&&(0,l.jsxs)(`div`,{className:o.default.skipIndicator,children:[(0,l.jsx)(n.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsx)(n.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsx)(n.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsxs)(`span`,{children:[`10`,z]})]}),(w||T)&&(0,l.jsxs)(`div`,{role:`none`,className:o.default.customControls,onClick:()=>Q&&$(null),children:[T&&(0,l.jsx)(i.VideoAdvancedMenu,{styles:o.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,l.jsx)(a.VideoControls,{styles:o.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})]})]}),x&&(0,l.jsx)(`figcaption`,{className:o.default.caption,"data-testid":`video-caption`,children:x})]})};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,26 +1,27 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { Icon as t } from "../Icon/Icon.js";
-import { useMediaLoader as n } from "../../../hooks/useMediaLoader.js";
-import { useVideoPlayer as ee } 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 { 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: te, 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: 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 } = e("common"), { videoAriaLabel: R = L("video.label"), seconds: z = "s" } = P, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = n({
+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 || u,
+		src: A?.[0]?.src || O?.[0]?.src || d,
 		demoDelay: N
-	}), G = ee({
-		src: u,
-		autoPlay: f,
-		loop: p,
-		muted: m,
-		fit: b,
+	}), G = r({
+		src: d,
+		autoPlay: p,
+		loop: m,
+		muted: h,
+		fit: y,
 		videoId: E,
 		resumePlayback: D,
 		playlist: O,
@@ -28,45 +29,45 @@ var u = ({ src: u, width: te, height: d, autoPlay: f = !1, loop: p = !1, muted:
 		qualities: A,
 		customControls: w,
 		advancedControls: T,
-		poster: g,
+		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 re = {
+	let ie = {
 		width: "100%",
-		height: d || "auto",
+		height: f || "auto",
 		objectFit: G.activeFit,
-		...ne
-	}, ie = _ === "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, ie, v && a.shadow, y && a.border, (w || T) && a.custom, M && a.fadeIn, M && 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: re,
-					autoPlay: f && V,
-					loop: p && (!O || O.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,
@@ -77,32 +78,32 @@ var u = ({ src: u, width: te, height: d, autoPlay: f = !1, loop: p = !1, muted:
 					onClick: G.handleVideoClick,
 					"data-testid": "video-element",
 					...I,
-					children: F?.map((e, t) => /* @__PURE__ */ c("track", { ...e }, t))
+					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(t, {
+						/* @__PURE__ */ l(n, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ c(t, {
+						/* @__PURE__ */ l(n, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ c(t, {
+						/* @__PURE__ */ l(n, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ l("span", { children: ["10", z] })
+						/* @__PURE__ */ u("span", { children: ["10", z] })
 					]
 				}),
-				(w || T) && /* @__PURE__ */ l("div", {
+				(w || T) && /* @__PURE__ */ u("div", {
 					role: "none",
-					className: a.customControls,
+					className: o.customControls,
 					onClick: () => Q && $(null),
-					children: [T && /* @__PURE__ */ c(r, {
-						styles: a,
+					children: [T && /* @__PURE__ */ l(i, {
+						styles: o,
 						activeMenu: Q,
 						setActiveMenu: $,
 						qualities: A,
@@ -116,8 +117,8 @@ var u = ({ src: u, width: te, height: d, autoPlay: f = !1, loop: p = !1, muted:
 						currentPlayIndex: G.currentPlayIndex,
 						playPlaylistItem: G.playPlaylistItem,
 						labels: P
-					}), /* @__PURE__ */ c(i, {
-						styles: a,
+					}), /* @__PURE__ */ l(a, {
+						styles: o,
 						playlist: O,
 						advancedControls: T,
 						currentPlayIndex: G.currentPlayIndex,
@@ -142,12 +143,12 @@ var u = ({ src: u, width: te, height: d, autoPlay: f = !1, loop: p = !1, muted:
 					})]
 				})
 			]
-		}), 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("../../../../i18n/useWimTranslation.cjs"),n=require("../../../../icon/check.cjs"),r=require("../../../../icon/chevron-left.cjs"),i=require("../../../../icon/chevron-right.cjs"),a=require("../../../../icon/close.cjs"),o=require("../../../../icon/play.cjs"),s=require("../../Icon/Icon.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=[.25,.5,.75,1,1.25,1.5,1.75,2],d=[`contain`,`cover`,`fill`,`scale-down`,`none`];function f({activeMenu:e,setActiveMenu:c,qualities:f,currentQualityIndex:p,handleQualityChange:m,playbackRate:h,setPlaybackRate:g,activeFit:_,setActiveFit:v,playlist:y,currentPlayIndex:b,playPlaylistItem:x,labels:S={},styles:C}){let{t:w}=t.useWimTranslation(`common`),{settings:T=w(`a11y.settings`),quality:E=w(`quality`),playbackRate:D=w(`playback.speed`),aspectRatio:O=w(`aspect.ratio`),standard:k=w(`standard`),playlist:A=w(`a11y.playlist`),contain:j=w(`video.fit_contain`),cover:M=w(`video.fit_cover`),fill:N=w(`video.fit_fill`),scaleDown:P=w(`video.fit_scale_down`),none:F=w(`common.none`)}=S;if(!e)return null;let I=e=>{switch(e){case`contain`:return j;case`cover`:return M;case`fill`:return N;case`scale-down`:return P;case`none`:return F;default:return e}};return(0,l.jsxs)(l.Fragment,{children:[e===`main`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(null)},role:`menu`,tabIndex:-1,children:[(0,l.jsx)(`div`,{className:C.menuTitle,children:(0,l.jsx)(`span`,{children:T})}),(0,l.jsxs)(`div`,{className:C.menuItems,children:[f&&f.length>0&&(0,l.jsxs)(`button`,{className:C.menuBtn,onClick:()=>c(`quality`),children:[(0,l.jsx)(`span`,{children:E}),(0,l.jsxs)(`span`,{style:{opacity:.7},children:[f[p].label,` `,(0,l.jsx)(s.Icon,{component:i.default,size:`sm`})]})]}),(0,l.jsxs)(`button`,{className:C.menuBtn,onClick:()=>c(`rate`),children:[(0,l.jsx)(`span`,{children:D}),(0,l.jsxs)(`span`,{style:{opacity:.7},children:[h,`x `,(0,l.jsx)(s.Icon,{component:i.default,size:`sm`})]})]}),(0,l.jsxs)(`button`,{className:C.menuBtn,onClick:()=>c(`fit`),children:[(0,l.jsx)(`span`,{children:O}),(0,l.jsxs)(`span`,{style:{opacity:.7},children:[I(_),` `,(0,l.jsx)(s.Icon,{component:i.default,size:`sm`})]})]})]})]}),e===`quality`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(`main`)},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`button`,{onClick:()=>c(`main`),className:C.btn,children:(0,l.jsx)(s.Icon,{component:r.default,size:`sm`})}),(0,l.jsx)(`span`,{children:E})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:f?.map((e,t)=>(0,l.jsxs)(`button`,{className:C.menuBtn,"data-active":p===t,onClick:()=>m(t),children:[p===t&&(0,l.jsx)(s.Icon,{component:n.default,size:`sm`}),(0,l.jsx)(`span`,{style:{marginLeft:p===t?0:24},children:e.label})]},t))})]}),e===`rate`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(`main`)},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`button`,{onClick:()=>c(`main`),className:C.btn,children:(0,l.jsx)(s.Icon,{component:r.default,size:`sm`})}),(0,l.jsx)(`span`,{children:D})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:u.map(e=>(0,l.jsxs)(`button`,{className:C.menuBtn,"data-active":h===e,onClick:()=>{g(e),c(`main`)},children:[h===e&&(0,l.jsx)(s.Icon,{component:n.default,size:`sm`}),(0,l.jsx)(`span`,{style:{marginLeft:h===e?0:24},children:e===1?k:`${e}x`})]},e))})]}),e===`fit`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(`main`)},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`button`,{onClick:()=>c(`main`),className:C.btn,children:(0,l.jsx)(s.Icon,{component:r.default,size:`sm`})}),(0,l.jsx)(`span`,{children:O})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:d.map(e=>(0,l.jsxs)(`button`,{className:C.menuBtn,"data-active":_===e,onClick:()=>{v(e),c(`main`)},children:[_===e&&(0,l.jsx)(s.Icon,{component:n.default,size:`sm`}),(0,l.jsx)(`span`,{style:{marginLeft:_===e?0:24},children:I(e)})]},e))})]}),e===`playlist`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(null)},style:{bottom:60,right:16,width:250},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`span`,{children:A}),(0,l.jsx)(`button`,{onClick:()=>c(null),style:{marginLeft:`auto`},className:C.btn,children:(0,l.jsx)(s.Icon,{component:a.default,size:`sm`})})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:y?.map((e,t)=>(0,l.jsx)(`button`,{className:C.menuBtn,"data-active":b===t,onClick:()=>x(t),style:{flexDirection:`column`,alignItems:`flex-start`,gap:4},children:(0,l.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[b===t?(0,l.jsx)(s.Icon,{component:o.default,size:`sm`}):(0,l.jsx)(`div`,{style:{width:20}}),(0,l.jsx)(`span`,{children:e.title||`Track ${t+1}`})]})},t))})]})]})}exports.VideoAdvancedMenu=f;
+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;