koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
176 lines (175 loc) • 6.96 kB
JavaScript
"use client";
import { jsxs as a, jsx as n } from "react/jsx-runtime";
import { forwardRef as se, useState as le, useMemo as u, useCallback as ie } from "react";
import c from "classnames";
import { useLocalTheme as me } from "css-vars-hook";
import { IconPlay as v } from "../../internal/Icons/IconPlay.js";
import { IconPause as ce } from "../../internal/Icons/IconPause.js";
import { IconVolume as ue } from "../../internal/Icons/IconVolume.js";
import { IconVolumeOff as de } from "../../internal/Icons/IconVolumeOff.js";
import { IconFullscreen as pe } from "../../internal/Icons/IconFullscreen.js";
import { IconPictureInPicture as fe } from "../../internal/Icons/IconPictureInPicture.js";
import { IconDownloadVideo as he } from "../../internal/Icons/IconDownloadVideo.js";
import { IconVideo as Ne } from "../../internal/Icons/IconVideo.js";
import { useInternalRef as ge } from "../../internal/hooks/useInternalRef.js";
import { PlayModes as l } from "../../internal/MediaEmbeds/types.js";
import { usePlay as ve } from "../../internal/MediaEmbeds/usePlay.js";
import { getFileName as y } from "../../internal/MediaEmbeds/getFileName.js";
import { useLoadingState as ye } from "../../internal/MediaEmbeds/useLoadingState.js";
import { useTime as Ie } from "../../internal/MediaEmbeds/useTime.js";
import { useSound as Pe } from "../../internal/MediaEmbeds/useSound.js";
import I from "../../internal/MediaEmbeds/RangeInput.module.css.js";
import e from "./Video.module.css.js";
import { useFullscreen as be } from "./useFullscreen.js";
const P = (r = 0) => {
const s = new Intl.NumberFormat(void 0, { minimumIntegerDigits: 2 }).format(
Math.floor(r / 60)
), i = new Intl.NumberFormat(void 0, { minimumIntegerDigits: 2 }).format(
Math.floor(r % 60)
);
return `${s}:${i}`;
}, b = (r) => typeof r == "string" ? r : `${r}px`, Ce = se(
({
className: r,
width: s = "100%",
height: i,
poster: C,
src: T,
sources: S = [],
loop: F = !1,
muted: M = !1,
preload: V = "auto",
autoPlay: k = !1,
enablePictureInPicture: d = !0,
showDownload: x = !0,
enableFullscreen: D = !0,
showControls: L = !0,
showTitle: w = !0,
title: p,
onReady: R = () => {
},
onError: $ = () => {
},
onPlay: j = () => {
},
onPause: B = () => {
},
...E
}, q) => {
const o = ge(q), { playMode: t, handleTogglePlay: f, handlePlay: O, handlePause: z } = ve({
embedRef: o,
onPlay: j,
onPause: B
}), [h, A] = le(0), { handleLoadedMetaData: G, handleError: H, handleCanPlay: J, readyToPlay: K } = ye({
embedRef: o,
onError: $,
onReady: R,
setDuration: A
}), { isFullScreen: Q, handleFullscreen: U } = be(o), { volume: W, handleSetVolume: X, muted: m, handleToggleMuted: Y } = Pe({ embedRef: o, mutedProp: M }), { handleSetTime: Z, currentTime: N } = Ie({ embedRef: o, playMode: t }), _ = u(() => t === l.pause || t === l.pristine ? v : ce, [t]), ee = u(() => m ? de : ue, [m]), ne = ie(() => {
o.current?.requestPictureInPicture?.();
}, [o]), { LocalRoot: oe } = me(), re = u(
() => ({ width: b(s), height: b(i) }),
[i, s]
);
return /* @__PURE__ */ a(oe, { theme: re, className: e.container, children: [
/* @__PURE__ */ n(
"video",
{
...E,
title: p,
src: T,
poster: C,
className: c(e.video, r),
controls: Q,
width: s,
loop: F,
muted: m,
preload: V,
autoPlay: k,
disablePictureInPicture: !d,
onCanPlay: J,
onError: H,
onLoadedMetadata: G,
onPause: z,
onPlay: O,
ref: o,
children: S.map(({ src: g, type: ae, mediaCondition: te }) => /* @__PURE__ */ n("source", { src: g, type: ae, media: te }, g))
}
),
t === l.pristine && /* @__PURE__ */ n("div", { className: e.overlayButton, children: /* @__PURE__ */ n(
"button",
{
onClick: f,
className: c({ [e.loading]: !K }),
children: /* @__PURE__ */ n(v, { className: e.icon })
}
) }),
t !== l.pristine && w && /* @__PURE__ */ a("div", { className: e.overlayTitle, children: [
/* @__PURE__ */ n(Ne, { className: e.icon }),
/* @__PURE__ */ n("span", { className: e.title, children: p || y(o.current?.currentSrc) }),
x && /* @__PURE__ */ n(
"a",
{
href: o.current?.currentSrc,
download: y(o.current?.currentSrc),
className: e.button,
children: /* @__PURE__ */ n(he, { className: e.icon })
}
)
] }),
t !== l.pristine && L && /* @__PURE__ */ a("div", { className: e.overlayControls, children: [
/* @__PURE__ */ n("div", { className: e.timelineContainer, children: /* @__PURE__ */ n(
"input",
{
className: c(I.range, e.range),
type: "range",
onChange: Z,
value: N,
name: "seek",
min: 0,
max: h,
step: 1
}
) }),
/* @__PURE__ */ a("div", { className: e.buttonsContainer, children: [
/* @__PURE__ */ a("div", { className: e.left, children: [
/* @__PURE__ */ n("button", { className: e.buttonBig, onClick: f, children: /* @__PURE__ */ n(_, { className: e.icon }) }),
/* @__PURE__ */ a("div", { className: e.timeStamp, children: [
/* @__PURE__ */ n("span", { className: e.time, children: P(N) }),
/* @__PURE__ */ n("span", { className: e.spacer, children: "/" }),
/* @__PURE__ */ n("span", { className: e.time, children: P(h) })
] })
] }),
/* @__PURE__ */ a("div", { className: e.right, children: [
/* @__PURE__ */ a("fieldset", { className: e.volume, children: [
/* @__PURE__ */ n("button", { className: e.button, onClick: Y, children: /* @__PURE__ */ n(ee, { className: e.icon }) }),
/* @__PURE__ */ n(
"input",
{
type: "range",
name: "volume",
min: 0,
max: 1,
step: 0.01,
value: m ? 0 : W,
onChange: X,
className: c(
I.range,
e.range
)
}
)
] }),
d && /* @__PURE__ */ n("button", { className: e.button, onClick: ne, children: /* @__PURE__ */ n(fe, { className: e.icon }) }),
D && /* @__PURE__ */ n("button", { className: e.button, onClick: U, children: /* @__PURE__ */ n(pe, { className: e.icon }) })
] })
] })
] })
] });
}
);
Ce.displayName = "Video";
export {
Ce as Video
};
//# sourceMappingURL=Video.js.map