wimui 0.1.0

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

@@ -0,0 +1,143 @@
+"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 "react";
+import o from "classnames";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/media/Video/Video.tsx
+var l = ({ src: l, width: ee, height: u, 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 { videoAriaLabel: L = "Video", seconds: R = "s" } = P, { containerRef: z, isLoaded: B, isIntersecting: V, notifyLoaded: H, shouldShowSkeleton: U } = t({
+		loading: j,
+		src: A?.[0]?.src || O?.[0]?.src || l,
+		demoDelay: N
+	}), W = n({
+		src: l,
+		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: z
+	}), { videoRef: G, isPlaying: K, activeSrc: q, activePoster: J, showNativeControls: Y, skipIndicator: X, activeMenu: Z, setActiveMenu: Q } = W, $ = {
+		width: "100%",
+		height: u || "auto",
+		objectFit: W.activeFit,
+		...C
+	}, te = g === "none" ? null : a[`radius${g.charAt(0).toUpperCase() + g.slice(1)}`];
+	return /* @__PURE__ */ c("figure", {
+		className: o("wim-video", a.root, S),
+		style: { width: "100%" },
+		role: "region",
+		"aria-label": L,
+		"data-testid": "video-root",
+		children: [/* @__PURE__ */ c("div", {
+			className: o(a.inner, te, _ && a.shadow, v && a.border, (w || T) && a.custom, M && a.fadeIn, M && B && a.isLoaded, U && a.loading),
+			ref: z,
+			"data-testid": "video-inner",
+			children: [
+				V && /* @__PURE__ */ s("video", {
+					ref: G,
+					src: q,
+					className: a.video,
+					style: $,
+					autoPlay: d && B,
+					loop: f && (!O || O.length <= 1),
+					muted: p,
+					controls: Y && m,
+					poster: J,
+					preload: b,
+					playsInline: !0,
+					onTimeUpdate: W.handleTimeUpdate,
+					onLoadedMetadata: W.handleLoadedMetadata,
+					onLoadedData: H,
+					onEnded: W.handleEnded,
+					onPlay: () => {},
+					onPause: () => {},
+					onClick: W.handleVideoClick,
+					"data-testid": "video-element",
+					...I,
+					children: F?.map((e, t) => /* @__PURE__ */ s("track", { ...e }, t))
+				}),
+				X.show && /* @__PURE__ */ c("div", {
+					className: a.skipIndicator,
+					children: [
+						/* @__PURE__ */ s(e, {
+							name: X.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
+							size: "lg"
+						}),
+						/* @__PURE__ */ s(e, {
+							name: X.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
+							size: "lg"
+						}),
+						/* @__PURE__ */ s(e, {
+							name: X.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
+							size: "lg"
+						}),
+						/* @__PURE__ */ c("span", { children: ["10", R] })
+					]
+				}),
+				(w || T) && /* @__PURE__ */ c("div", {
+					role: "none",
+					className: a.customControls,
+					onClick: () => Z && Q(null),
+					children: [T && /* @__PURE__ */ s(r, {
+						styles: a,
+						activeMenu: Z,
+						setActiveMenu: Q,
+						qualities: A,
+						currentQualityIndex: W.currentQualityIndex,
+						handleQualityChange: W.handleQualityChange,
+						playbackRate: W.playbackRate,
+						setPlaybackRate: W.setPlaybackRate,
+						activeFit: W.activeFit,
+						setActiveFit: W.setActiveFit,
+						playlist: O,
+						currentPlayIndex: W.currentPlayIndex,
+						playPlaylistItem: W.playPlaylistItem,
+						labels: P
+					}), /* @__PURE__ */ s(i, {
+						styles: a,
+						playlist: O,
+						advancedControls: T,
+						currentPlayIndex: W.currentPlayIndex,
+						setCurrentPlayIndex: W.setCurrentPlayIndex,
+						skip: W.skip,
+						isPlaying: K,
+						togglePlay: W.togglePlay,
+						currentTime: W.currentTime,
+						duration: W.duration,
+						handleSeek: W.handleSeek,
+						volume: W.volume,
+						isMuted: W.isMuted,
+						toggleMute: W.toggleMute,
+						handleVolumeChange: W.handleVolumeChange,
+						activeMenu: Z,
+						setActiveMenu: Q,
+						togglePiP: W.togglePiP,
+						isFullscreen: W.isFullscreen,
+						toggleFullscreen: W.toggleFullscreen,
+						formatTime: W.formatTime,
+						labels: P
+					})]
+				})
+			]
+		}), x && /* @__PURE__ */ s("figcaption", {
+			className: a.caption,
+			"data-testid": "video-caption",
+			children: x
+		})]
+	});
+};
+//#endregion
+export { l as Video };

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

@@ -0,0 +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;

package/dist/components/media/Video/components/VideoAdvancedMenu.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { VideoLabels } from './VideoControls';
+type FitOption = "contain" | "cover" | "fill" | "none" | "scale-down";
+type ActiveMenu = "main" | "quality" | "rate" | "fit" | "playlist" | null;
+interface VideoAdvancedMenuProps {
+    activeMenu: ActiveMenu;
+    setActiveMenu: (menu: ActiveMenu) => void;
+    qualities?: {
+        label: string;
+        src: string;
+    }[];
+    currentQualityIndex: number;
+    handleQualityChange: (index: number) => void;
+    playbackRate: number;
+    setPlaybackRate: (rate: number) => void;
+    activeFit: FitOption;
+    setActiveFit: (fit: FitOption) => void;
+    playlist?: {
+        src: string;
+        title?: string;
+        poster?: string;
+    }[];
+    currentPlayIndex: number;
+    playPlaylistItem: (index: number) => void;
+    labels?: VideoLabels;
+    styles: Record<string, string>;
+}
+export declare function VideoAdvancedMenu({ activeMenu, setActiveMenu, qualities, currentQualityIndex, handleQualityChange, playbackRate, setPlaybackRate, activeFit, setActiveFit, playlist, currentPlayIndex, playPlaylistItem, labels, styles, }: VideoAdvancedMenuProps): React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,261 @@
+"use client";
+import e from "../../../../icon/check.js";
+import t from "../../../../icon/chevron-left.js";
+import n from "../../../../icon/chevron-right.js";
+import r from "../../../../icon/close.js";
+import i from "../../../../icon/play.js";
+import { Icon as a } from "../../Icon/Icon.js";
+import "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/media/Video/components/VideoAdvancedMenu.tsx
+var l = [
+	.25,
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	1.75,
+	2
+], u = [
+	"contain",
+	"cover",
+	"fill",
+	"scale-down",
+	"none"
+];
+function d({ activeMenu: d, setActiveMenu: f, qualities: p, currentQualityIndex: m, handleQualityChange: h, playbackRate: g, setPlaybackRate: _, activeFit: v, setActiveFit: y, playlist: b, currentPlayIndex: x, playPlaylistItem: S, labels: C = {}, styles: w }) {
+	let { settings: T = "Settings", quality: E = "Quality", playbackRate: D = "Playback Speed", aspectRatio: O = "Aspect Ratio", standard: k = "Standard", playlist: A = "Playlist", contain: j = "Contain", cover: M = "Cover", fill: N = "Fill", scaleDown: P = "Scale Down", none: F = "None" } = C;
+	if (!d) 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 /* @__PURE__ */ c(o, { children: [
+		d === "main" && /* @__PURE__ */ c("div", {
+			className: w.advancedMenu,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Escape" && f(null);
+			},
+			role: "menu",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ s("div", {
+				className: w.menuTitle,
+				children: /* @__PURE__ */ s("span", { children: T })
+			}), /* @__PURE__ */ c("div", {
+				className: w.menuItems,
+				children: [
+					p && p.length > 0 && /* @__PURE__ */ c("button", {
+						className: w.menuBtn,
+						onClick: () => f("quality"),
+						children: [/* @__PURE__ */ s("span", { children: E }), /* @__PURE__ */ c("span", {
+							style: { opacity: .7 },
+							children: [
+								p[m].label,
+								" ",
+								/* @__PURE__ */ s(a, {
+									component: n,
+									size: "sm"
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ c("button", {
+						className: w.menuBtn,
+						onClick: () => f("rate"),
+						children: [/* @__PURE__ */ s("span", { children: D }), /* @__PURE__ */ c("span", {
+							style: { opacity: .7 },
+							children: [
+								g,
+								"x ",
+								/* @__PURE__ */ s(a, {
+									component: n,
+									size: "sm"
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ c("button", {
+						className: w.menuBtn,
+						onClick: () => f("fit"),
+						children: [/* @__PURE__ */ s("span", { children: O }), /* @__PURE__ */ c("span", {
+							style: { opacity: .7 },
+							children: [
+								I(v),
+								" ",
+								/* @__PURE__ */ s(a, {
+									component: n,
+									size: "sm"
+								})
+							]
+						})]
+					})
+				]
+			})]
+		}),
+		d === "quality" && /* @__PURE__ */ c("div", {
+			className: w.advancedMenu,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Escape" && f("main");
+			},
+			role: "menu",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ c("div", {
+				className: w.menuTitle,
+				children: [/* @__PURE__ */ s("button", {
+					onClick: () => f("main"),
+					className: w.btn,
+					children: /* @__PURE__ */ s(a, {
+						component: t,
+						size: "sm"
+					})
+				}), /* @__PURE__ */ s("span", { children: E })]
+			}), /* @__PURE__ */ s("div", {
+				className: w.menuItems,
+				children: p?.map((t, n) => /* @__PURE__ */ c("button", {
+					className: w.menuBtn,
+					"data-active": m === n,
+					onClick: () => h(n),
+					children: [m === n && /* @__PURE__ */ s(a, {
+						component: e,
+						size: "sm"
+					}), /* @__PURE__ */ s("span", {
+						style: { marginLeft: m === n ? 0 : 24 },
+						children: t.label
+					})]
+				}, n))
+			})]
+		}),
+		d === "rate" && /* @__PURE__ */ c("div", {
+			className: w.advancedMenu,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Escape" && f("main");
+			},
+			role: "menu",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ c("div", {
+				className: w.menuTitle,
+				children: [/* @__PURE__ */ s("button", {
+					onClick: () => f("main"),
+					className: w.btn,
+					children: /* @__PURE__ */ s(a, {
+						component: t,
+						size: "sm"
+					})
+				}), /* @__PURE__ */ s("span", { children: D })]
+			}), /* @__PURE__ */ s("div", {
+				className: w.menuItems,
+				children: l.map((t) => /* @__PURE__ */ c("button", {
+					className: w.menuBtn,
+					"data-active": g === t,
+					onClick: () => {
+						_(t), f("main");
+					},
+					children: [g === t && /* @__PURE__ */ s(a, {
+						component: e,
+						size: "sm"
+					}), /* @__PURE__ */ s("span", {
+						style: { marginLeft: g === t ? 0 : 24 },
+						children: t === 1 ? k : `${t}x`
+					})]
+				}, t))
+			})]
+		}),
+		d === "fit" && /* @__PURE__ */ c("div", {
+			className: w.advancedMenu,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Escape" && f("main");
+			},
+			role: "menu",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ c("div", {
+				className: w.menuTitle,
+				children: [/* @__PURE__ */ s("button", {
+					onClick: () => f("main"),
+					className: w.btn,
+					children: /* @__PURE__ */ s(a, {
+						component: t,
+						size: "sm"
+					})
+				}), /* @__PURE__ */ s("span", { children: O })]
+			}), /* @__PURE__ */ s("div", {
+				className: w.menuItems,
+				children: u.map((t) => /* @__PURE__ */ c("button", {
+					className: w.menuBtn,
+					"data-active": v === t,
+					onClick: () => {
+						y(t), f("main");
+					},
+					children: [v === t && /* @__PURE__ */ s(a, {
+						component: e,
+						size: "sm"
+					}), /* @__PURE__ */ s("span", {
+						style: { marginLeft: v === t ? 0 : 24 },
+						children: I(t)
+					})]
+				}, t))
+			})]
+		}),
+		d === "playlist" && /* @__PURE__ */ c("div", {
+			className: w.advancedMenu,
+			onClick: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.key === "Escape" && f(null);
+			},
+			style: {
+				bottom: 60,
+				right: 16,
+				width: 250
+			},
+			role: "menu",
+			tabIndex: -1,
+			children: [/* @__PURE__ */ c("div", {
+				className: w.menuTitle,
+				children: [/* @__PURE__ */ s("span", { children: A }), /* @__PURE__ */ s("button", {
+					onClick: () => f(null),
+					style: { marginLeft: "auto" },
+					className: w.btn,
+					children: /* @__PURE__ */ s(a, {
+						component: r,
+						size: "sm"
+					})
+				})]
+			}), /* @__PURE__ */ s("div", {
+				className: w.menuItems,
+				children: b?.map((e, t) => /* @__PURE__ */ s("button", {
+					className: w.menuBtn,
+					"data-active": x === t,
+					onClick: () => S(t),
+					style: {
+						flexDirection: "column",
+						alignItems: "flex-start",
+						gap: 4
+					},
+					children: /* @__PURE__ */ c("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 8
+						},
+						children: [x === t ? /* @__PURE__ */ s(a, {
+							component: i,
+							size: "sm"
+						}) : /* @__PURE__ */ s("div", { style: { width: 20 } }), /* @__PURE__ */ s("span", { children: e.title || `Track ${t + 1}` })]
+					})
+				}, t))
+			})]
+		})
+	] });
+}
+//#endregion
+export { d as VideoAdvancedMenu };

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

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../i18n/useWimTranslation.cjs"),n=require("../../../../icon/chevron-left.cjs"),r=require("../../../../icon/chevron-right.cjs"),i=require("../../../../icon/document.cjs"),a=require("../../../../icon/maximize.cjs"),o=require("../../../../icon/minimize.cjs"),s=require("../../../../icon/monitor.cjs"),c=require("../../../../icon/mute.cjs"),l=require("../../../../icon/pause.cjs"),u=require("../../../../icon/play.cjs"),d=require("../../../../icon/settings.cjs"),f=require("../../../../icon/volume.cjs"),p=require("../../Icon/Icon.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("classnames");h=e.__toESM(h,1);let g=require("react/jsx-runtime");function _({playlist:e,advancedControls:m,currentPlayIndex:_,setCurrentPlayIndex:v,skip:y,isPlaying:b,togglePlay:x,currentTime:S,duration:C,handleSeek:w,volume:T,isMuted:E,toggleMute:D,handleVolumeChange:O,activeMenu:k,setActiveMenu:A,togglePiP:j,isFullscreen:M,toggleFullscreen:N,formatTime:P,labels:F={},styles:I}){let{t:L}=t.useWimTranslation(`common`),{playlist:R=L(`a11y.playlist`),skipBackward:z=L(`a11y.skip_backward`),skipForward:B=L(`a11y.skip_forward`),play:V=L(`a11y.play`),pause:H=L(`a11y.pause`),nextTrack:U=L(`a11y.next_track`),seek:W=L(`a11y.seek`),mute:G=L(`a11y.mute`),unmute:K=L(`a11y.unmute`),volume:q=L(`a11y.volume`),settings:J=L(`a11y.settings`),pip:Y=L(`a11y.picture_in_picture`),fullscreen:X=L(`a11y.fullscreen`),exitFullscreen:Z=L(`a11y.exit_fullscreen`)}=F;return(0,g.jsxs)(`div`,{className:(0,h.default)(I.controlsBottom),children:[e&&e.length>0&&m&&(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),A(k===`playlist`?null:`playlist`)},"aria-label":R,children:(0,g.jsx)(p.Icon,{component:i.default,size:`sm`})}),m&&(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),y(-10)},"aria-label":z,children:(0,g.jsx)(p.Icon,{component:n.default,size:`sm`})}),(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn,I.btnPlay),onClick:e=>{e.stopPropagation(),x()},"aria-label":b?H:V,children:(0,g.jsx)(p.Icon,{component:b?l.default:u.default,size:`sm`})}),m&&(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),y(10)},"aria-label":B,children:(0,g.jsx)(p.Icon,{component:r.default,size:`sm`})}),e&&e.length>0&&m&&(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:t=>{t.stopPropagation(),_<e.length-1&&v(e=>e+1)},disabled:_>=e.length-1,style:{opacity:_>=e.length-1?.5:1},"aria-label":U,children:(0,g.jsx)(p.Icon,{component:r.default,size:`md`})}),(0,g.jsxs)(`div`,{className:(0,h.default)(I.timeContainer),children:[(0,g.jsx)(`span`,{className:I.timeCurrent,children:P(S)}),(0,g.jsxs)(`div`,{className:(0,h.default)(I.progressContainer),children:[(0,g.jsx)(`input`,{type:`range`,min:`0`,max:C||0,value:S,onChange:w,className:(0,h.default)(I.progress),"aria-label":W,onClick:e=>e.stopPropagation()}),(0,g.jsx)(`div`,{className:(0,h.default)(I.progressFill),style:{width:`${S/(C||1)*100}%`}})]}),(0,g.jsx)(`span`,{className:I.timeTotal,children:P(C)})]}),(0,g.jsxs)(`div`,{className:(0,h.default)(I.volumeContainer),children:[(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),D()},"aria-label":E?K:G,children:(0,g.jsx)(p.Icon,{component:E||T===0?c.default:f.default,size:`sm`})}),(0,g.jsx)(`input`,{type:`range`,min:`0`,max:`1`,step:`0.1`,value:E?0:T,onChange:e=>{e.stopPropagation(),O(e)},className:(0,h.default)(I.volume),"aria-label":q,onClick:e=>e.stopPropagation()})]}),m&&(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),A(k===`main`?null:`main`)},"aria-label":J,children:(0,g.jsx)(p.Icon,{component:d.default,size:`sm`})}),m&&(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),j()},"aria-label":Y,title:Y,children:(0,g.jsx)(p.Icon,{component:s.default,size:`sm`})}),(0,g.jsx)(`button`,{type:`button`,className:(0,h.default)(I.btn),onClick:e=>{e.stopPropagation(),N()},"aria-label":M?Z:X,children:(0,g.jsx)(p.Icon,{component:M?o.default:a.default,size:`sm`})})]})}exports.VideoControls=_;

package/dist/components/media/Video/components/VideoControls.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+type ActiveMenu = "main" | "quality" | "rate" | "fit" | "playlist" | null;
+export type VideoLabels = {
+    playlist?: string;
+    skipBackward?: string;
+    skipForward?: string;
+    play?: string;
+    pause?: string;
+    nextTrack?: string;
+    seek?: string;
+    mute?: string;
+    unmute?: string;
+    volume?: string;
+    settings?: string;
+    pip?: string;
+    fullscreen?: string;
+    exitFullscreen?: string;
+    quality?: string;
+    playbackRate?: string;
+    aspectRatio?: string;
+    standard?: string;
+    back?: string;
+    auto?: string;
+    fit?: string;
+    fill?: string;
+    contain?: string;
+    cover?: string;
+    scaleDown?: string;
+    none?: string;
+    videoAriaLabel?: string;
+    seconds?: string;
+};
+interface VideoControlsProps {
+    playlist?: {
+        src: string;
+        title?: string;
+        poster?: string;
+    }[];
+    advancedControls: boolean;
+    currentPlayIndex: number;
+    setCurrentPlayIndex: React.Dispatch<React.SetStateAction<number>>;
+    skip: (seconds: number) => void;
+    isPlaying: boolean;
+    togglePlay: () => void;
+    currentTime: number;
+    duration: number;
+    handleSeek: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    volume: number;
+    isMuted: boolean;
+    toggleMute: () => void;
+    handleVolumeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    activeMenu: ActiveMenu;
+    setActiveMenu: (menu: ActiveMenu) => void;
+    togglePiP: () => void;
+    isFullscreen: boolean;
+    toggleFullscreen: () => void;
+    formatTime: (time: number) => string;
+    labels?: VideoLabels;
+    styles: Record<string, string>;
+}
+export declare function VideoControls({ playlist, advancedControls, currentPlayIndex, setCurrentPlayIndex, skip, isPlaying, togglePlay, currentTime, duration, handleSeek, volume, isMuted, toggleMute, handleVolumeChange, activeMenu, setActiveMenu, togglePiP, isFullscreen, toggleFullscreen, formatTime, labels, styles, }: VideoControlsProps): React.JSX.Element;
+export {};