wimui 0.51.1 → 0.52.0

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

@@ -1,14 +1,16 @@
 "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 { useWimTranslation as e } from "../../../../i18n/useWimTranslation.js";
+import { commonNs as t } from "../../../../i18n/generated/common.js";
+import n from "../../../../icon/check.js";
+import r from "../../../../icon/chevron-left.js";
+import i from "../../../../icon/chevron-right.js";
+import a from "../../../../icon/close.js";
+import o from "../../../../icon/play.js";
+import { Icon as s } from "../../Icon/Icon.js";
 import "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/media/Video/components/VideoAdvancedMenu.tsx
-var l = [
+var d = [
 	.25,
 	.5,
 	.75,
@@ -17,81 +19,81 @@ var l = [
 	1.5,
 	1.75,
 	2
-], u = [
+], f = [
 	"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) => {
+function p({ activeMenu: p, setActiveMenu: m, qualities: h, currentQualityIndex: g, handleQualityChange: _, playbackRate: v, setPlaybackRate: y, activeFit: b, setActiveFit: x, playlist: S, currentPlayIndex: C, playPlaylistItem: w, labels: T = {}, styles: E }) {
+	let { t: D } = e(t), { settings: O = D("a11y.settings"), quality: k = D("quality"), playbackRate: A = D("playback.speed"), aspectRatio: j = D("aspect.ratio"), standard: M = D("standard"), playlist: N = D("a11y.playlist"), contain: P = D("video.fit_contain"), cover: F = D("video.fit_cover"), fill: I = D("video.fit_fill"), scaleDown: L = D("video.fit_scale_down"), none: R = D("common.none") } = T;
+	if (!p) return null;
+	let z = (e) => {
 		switch (e) {
-			case "contain": return j;
-			case "cover": return M;
-			case "fill": return N;
-			case "scale-down": return P;
-			case "none": return F;
+			case "contain": return P;
+			case "cover": return F;
+			case "fill": return I;
+			case "scale-down": return L;
+			case "none": return R;
 			default: return e;
 		}
 	};
-	return /* @__PURE__ */ c(o, { children: [
-		d === "main" && /* @__PURE__ */ c("div", {
-			className: w.advancedMenu,
+	return /* @__PURE__ */ u(c, { children: [
+		p === "main" && /* @__PURE__ */ u("div", {
+			className: E.advancedMenu,
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.key === "Escape" && f(null);
+				e.key === "Escape" && m(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: [/* @__PURE__ */ l("div", {
+				className: E.menuTitle,
+				children: /* @__PURE__ */ l("span", { children: O })
+			}), /* @__PURE__ */ u("div", {
+				className: E.menuItems,
 				children: [
-					p && p.length > 0 && /* @__PURE__ */ c("button", {
-						className: w.menuBtn,
-						onClick: () => f("quality"),
-						children: [/* @__PURE__ */ s("span", { children: E }), /* @__PURE__ */ c("span", {
+					h && h.length > 0 && /* @__PURE__ */ u("button", {
+						className: E.menuBtn,
+						onClick: () => m("quality"),
+						children: [/* @__PURE__ */ l("span", { children: k }), /* @__PURE__ */ u("span", {
 							style: { opacity: .7 },
 							children: [
-								p[m].label,
+								h[g].label,
 								" ",
-								/* @__PURE__ */ s(a, {
-									component: n,
+								/* @__PURE__ */ l(s, {
+									component: i,
 									size: "sm"
 								})
 							]
 						})]
 					}),
-					/* @__PURE__ */ c("button", {
-						className: w.menuBtn,
-						onClick: () => f("rate"),
-						children: [/* @__PURE__ */ s("span", { children: D }), /* @__PURE__ */ c("span", {
+					/* @__PURE__ */ u("button", {
+						className: E.menuBtn,
+						onClick: () => m("rate"),
+						children: [/* @__PURE__ */ l("span", { children: A }), /* @__PURE__ */ u("span", {
 							style: { opacity: .7 },
 							children: [
-								g,
+								v,
 								"x ",
-								/* @__PURE__ */ s(a, {
-									component: n,
+								/* @__PURE__ */ l(s, {
+									component: i,
 									size: "sm"
 								})
 							]
 						})]
 					}),
-					/* @__PURE__ */ c("button", {
-						className: w.menuBtn,
-						onClick: () => f("fit"),
-						children: [/* @__PURE__ */ s("span", { children: O }), /* @__PURE__ */ c("span", {
+					/* @__PURE__ */ u("button", {
+						className: E.menuBtn,
+						onClick: () => m("fit"),
+						children: [/* @__PURE__ */ l("span", { children: j }), /* @__PURE__ */ u("span", {
 							style: { opacity: .7 },
 							children: [
-								I(v),
+								z(b),
 								" ",
-								/* @__PURE__ */ s(a, {
-									component: n,
+								/* @__PURE__ */ l(s, {
+									component: i,
 									size: "sm"
 								})
 							]
@@ -100,117 +102,117 @@ function d({ activeMenu: d, setActiveMenu: f, qualities: p, currentQualityIndex:
 				]
 			})]
 		}),
-		d === "quality" && /* @__PURE__ */ c("div", {
-			className: w.advancedMenu,
+		p === "quality" && /* @__PURE__ */ u("div", {
+			className: E.advancedMenu,
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.key === "Escape" && f("main");
+				e.key === "Escape" && m("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,
+			children: [/* @__PURE__ */ u("div", {
+				className: E.menuTitle,
+				children: [/* @__PURE__ */ l("button", {
+					onClick: () => m("main"),
+					className: E.btn,
+					children: /* @__PURE__ */ l(s, {
+						component: r,
 						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,
+				}), /* @__PURE__ */ l("span", { children: k })]
+			}), /* @__PURE__ */ l("div", {
+				className: E.menuItems,
+				children: h?.map((e, t) => /* @__PURE__ */ u("button", {
+					className: E.menuBtn,
+					"data-active": g === t,
+					onClick: () => _(t),
+					children: [g === t && /* @__PURE__ */ l(s, {
+						component: n,
 						size: "sm"
-					}), /* @__PURE__ */ s("span", {
-						style: { marginLeft: m === n ? 0 : 24 },
-						children: t.label
+					}), /* @__PURE__ */ l("span", {
+						style: { marginLeft: g === t ? 0 : 24 },
+						children: e.label
 					})]
-				}, n))
+				}, t))
 			})]
 		}),
-		d === "rate" && /* @__PURE__ */ c("div", {
-			className: w.advancedMenu,
+		p === "rate" && /* @__PURE__ */ u("div", {
+			className: E.advancedMenu,
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.key === "Escape" && f("main");
+				e.key === "Escape" && m("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,
+			children: [/* @__PURE__ */ u("div", {
+				className: E.menuTitle,
+				children: [/* @__PURE__ */ l("button", {
+					onClick: () => m("main"),
+					className: E.btn,
+					children: /* @__PURE__ */ l(s, {
+						component: r,
 						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,
+				}), /* @__PURE__ */ l("span", { children: A })]
+			}), /* @__PURE__ */ l("div", {
+				className: E.menuItems,
+				children: d.map((e) => /* @__PURE__ */ u("button", {
+					className: E.menuBtn,
+					"data-active": v === e,
 					onClick: () => {
-						_(t), f("main");
+						y(e), m("main");
 					},
-					children: [g === t && /* @__PURE__ */ s(a, {
-						component: e,
+					children: [v === e && /* @__PURE__ */ l(s, {
+						component: n,
 						size: "sm"
-					}), /* @__PURE__ */ s("span", {
-						style: { marginLeft: g === t ? 0 : 24 },
-						children: t === 1 ? k : `${t}x`
+					}), /* @__PURE__ */ l("span", {
+						style: { marginLeft: v === e ? 0 : 24 },
+						children: e === 1 ? M : `${e}x`
 					})]
-				}, t))
+				}, e))
 			})]
 		}),
-		d === "fit" && /* @__PURE__ */ c("div", {
-			className: w.advancedMenu,
+		p === "fit" && /* @__PURE__ */ u("div", {
+			className: E.advancedMenu,
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.key === "Escape" && f("main");
+				e.key === "Escape" && m("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,
+			children: [/* @__PURE__ */ u("div", {
+				className: E.menuTitle,
+				children: [/* @__PURE__ */ l("button", {
+					onClick: () => m("main"),
+					className: E.btn,
+					children: /* @__PURE__ */ l(s, {
+						component: r,
 						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,
+				}), /* @__PURE__ */ l("span", { children: j })]
+			}), /* @__PURE__ */ l("div", {
+				className: E.menuItems,
+				children: f.map((e) => /* @__PURE__ */ u("button", {
+					className: E.menuBtn,
+					"data-active": b === e,
 					onClick: () => {
-						y(t), f("main");
+						x(e), m("main");
 					},
-					children: [v === t && /* @__PURE__ */ s(a, {
-						component: e,
+					children: [b === e && /* @__PURE__ */ l(s, {
+						component: n,
 						size: "sm"
-					}), /* @__PURE__ */ s("span", {
-						style: { marginLeft: v === t ? 0 : 24 },
-						children: I(t)
+					}), /* @__PURE__ */ l("span", {
+						style: { marginLeft: b === e ? 0 : 24 },
+						children: z(e)
 					})]
-				}, t))
+				}, e))
 			})]
 		}),
-		d === "playlist" && /* @__PURE__ */ c("div", {
-			className: w.advancedMenu,
+		p === "playlist" && /* @__PURE__ */ u("div", {
+			className: E.advancedMenu,
 			onClick: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.key === "Escape" && f(null);
+				e.key === "Escape" && m(null);
 			},
 			style: {
 				bottom: 60,
@@ -219,38 +221,38 @@ function d({ activeMenu: d, setActiveMenu: f, qualities: p, currentQualityIndex:
 			},
 			role: "menu",
 			tabIndex: -1,
-			children: [/* @__PURE__ */ c("div", {
-				className: w.menuTitle,
-				children: [/* @__PURE__ */ s("span", { children: A }), /* @__PURE__ */ s("button", {
-					onClick: () => f(null),
+			children: [/* @__PURE__ */ u("div", {
+				className: E.menuTitle,
+				children: [/* @__PURE__ */ l("span", { children: N }), /* @__PURE__ */ l("button", {
+					onClick: () => m(null),
 					style: { marginLeft: "auto" },
-					className: w.btn,
-					children: /* @__PURE__ */ s(a, {
-						component: r,
+					className: E.btn,
+					children: /* @__PURE__ */ l(s, {
+						component: a,
 						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),
+			}), /* @__PURE__ */ l("div", {
+				className: E.menuItems,
+				children: S?.map((e, t) => /* @__PURE__ */ l("button", {
+					className: E.menuBtn,
+					"data-active": C === t,
+					onClick: () => w(t),
 					style: {
 						flexDirection: "column",
 						alignItems: "flex-start",
 						gap: 4
 					},
-					children: /* @__PURE__ */ c("div", {
+					children: /* @__PURE__ */ u("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							gap: 8
 						},
-						children: [x === t ? /* @__PURE__ */ s(a, {
-							component: i,
+						children: [C === t ? /* @__PURE__ */ l(s, {
+							component: o,
 							size: "sm"
-						}) : /* @__PURE__ */ s("div", { style: { width: 20 } }), /* @__PURE__ */ s("span", { children: e.title || `Track ${t + 1}` })]
+						}) : /* @__PURE__ */ l("div", { style: { width: 20 } }), /* @__PURE__ */ l("span", { children: e.title || `Track ${t + 1}` })]
 					})
 				}, t))
 			})]
@@ -258,4 +260,4 @@ function d({ activeMenu: d, setActiveMenu: f, qualities: p, currentQualityIndex:
 	] });
 }
 //#endregion
-export { d as VideoAdvancedMenu };
+export { p as VideoAdvancedMenu };

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

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