@amdadullah_raihan/react-custom-video-player
Version:
A customizable and modern video player built with React and Tailwind CSS.
883 lines (882 loc) • 31.5 kB
JavaScript
import le, { useRef as U, useState as g, useEffect as R } from "react";
var G = { exports: {} }, B = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var te;
function ie() {
if (te) return B;
te = 1;
var l = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
function a(r, i, u) {
var c = null;
if (u !== void 0 && (c = "" + u), i.key !== void 0 && (c = "" + i.key), "key" in i) {
u = {};
for (var m in i)
m !== "key" && (u[m] = i[m]);
} else u = i;
return i = u.ref, {
$$typeof: l,
type: r,
key: c,
ref: i !== void 0 ? i : null,
props: u
};
}
return B.Fragment = s, B.jsx = a, B.jsxs = a, B;
}
var V = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var re;
function ce() {
return re || (re = 1, process.env.NODE_ENV !== "production" && function() {
function l(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === H ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case y:
return "Fragment";
case S:
return "Profiler";
case L:
return "StrictMode";
case F:
return "Suspense";
case Z:
return "SuspenseList";
case X:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case T:
return "Portal";
case I:
return (e.displayName || "Context") + ".Provider";
case A:
return (e._context.displayName || "Context") + ".Consumer";
case N:
var o = e.render;
return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case D:
return o = e.displayName || null, o !== null ? o : l(e.type) || "Memo";
case q:
o = e._payload, e = e._init;
try {
return l(e(o));
} catch {
}
}
return null;
}
function s(e) {
return "" + e;
}
function a(e) {
try {
s(e);
var o = !1;
} catch {
o = !0;
}
if (o) {
o = console;
var d = o.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return d.call(
o,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
f
), s(e);
}
}
function r(e) {
if (e === y) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === q)
return "<...>";
try {
var o = l(e);
return o ? "<" + o + ">" : "<...>";
} catch {
return "<...>";
}
}
function i() {
var e = $.A;
return e === null ? null : e.getOwner();
}
function u() {
return Error("react-stack-top-frame");
}
function c(e) {
if (J.call(e, "key")) {
var o = Object.getOwnPropertyDescriptor(e, "key").get;
if (o && o.isReactWarning) return !1;
}
return e.key !== void 0;
}
function m(e, o) {
function d() {
w || (w = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
o
));
}
d.isReactWarning = !0, Object.defineProperty(e, "key", {
get: d,
configurable: !0
});
}
function b() {
var e = l(this.type);
return v[e] || (v[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function h(e, o, d, f, M, P, Q, K) {
return d = P.ref, e = {
$$typeof: _,
type: e,
key: o,
props: P,
_owner: M
}, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: b
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Q
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: K
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function E(e, o, d, f, M, P, Q, K) {
var x = o.children;
if (x !== void 0)
if (f)
if (W(x)) {
for (f = 0; f < x.length; f++)
k(x[f]);
Object.freeze && Object.freeze(x);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else k(x);
if (J.call(o, "key")) {
x = l(e);
var O = Object.keys(o).filter(function(ae) {
return ae !== "key";
});
f = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", Y[x + f] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
f,
x,
O,
x
), Y[x + f] = !0);
}
if (x = null, d !== void 0 && (a(d), x = "" + d), c(o) && (a(o.key), x = "" + o.key), "key" in o) {
d = {};
for (var ee in o)
ee !== "key" && (d[ee] = o[ee]);
} else d = o;
return x && m(
d,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), h(
e,
x,
P,
M,
i(),
d,
Q,
K
);
}
function k(e) {
typeof e == "object" && e !== null && e.$$typeof === _ && e._store && (e._store.validated = 1);
}
var p = le, _ = Symbol.for("react.transitional.element"), T = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), L = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), A = Symbol.for("react.consumer"), I = Symbol.for("react.context"), N = Symbol.for("react.forward_ref"), F = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), X = Symbol.for("react.activity"), H = Symbol.for("react.client.reference"), $ = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, W = Array.isArray, n = console.createTask ? console.createTask : function() {
return null;
};
p = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var w, v = {}, C = p["react-stack-bottom-frame"].bind(
p,
u
)(), j = n(r(u)), Y = {};
V.Fragment = y, V.jsx = function(e, o, d, f, M) {
var P = 1e4 > $.recentlyCreatedOwnerStacks++;
return E(
e,
o,
d,
!1,
f,
M,
P ? Error("react-stack-top-frame") : C,
P ? n(r(e)) : j
);
}, V.jsxs = function(e, o, d, f, M) {
var P = 1e4 > $.recentlyCreatedOwnerStacks++;
return E(
e,
o,
d,
!0,
f,
M,
P ? Error("react-stack-top-frame") : C,
P ? n(r(e)) : j
);
};
}()), V;
}
var ne;
function ue() {
return ne || (ne = 1, process.env.NODE_ENV === "production" ? G.exports = ie() : G.exports = ce()), G.exports;
}
var t = ue();
const se = ({ min: l = 0, max: s = 100, value: a, onChange: r }) => {
const i = U(null), [u, c] = g(!1), m = (p) => {
if (!i.current) return;
const { left: _, width: T } = i.current.getBoundingClientRect(), L = (p.clientX - _) / T * 100, S = Math.max(
l,
Math.min(L / 100 * s, s)
);
r(S);
}, b = (p) => {
c(!0), m(p);
}, h = (p) => {
u && m(p);
}, E = (p) => {
p.preventDefault();
const _ = Math.sign(p.deltaY), T = (s - l) / 100;
let y = a - _ * T;
y = Math.max(l, Math.min(y, s)), r(y);
}, k = () => c(!1);
return R(() => (u ? (window.addEventListener("mousemove", h), window.addEventListener("mouseup", k)) : (window.removeEventListener("mousemove", h), window.removeEventListener("mouseup", k)), () => {
window.removeEventListener("mousemove", h), window.removeEventListener("mouseup", k);
}), [u]), /* @__PURE__ */ t.jsx(
"div",
{
ref: i,
className: "relative w-full h-[0.3rem] bg-gray-300 rounded cursor-pointer",
style: { width: "calc(100% - 1rem)" },
onMouseDown: b,
onWheel: E,
children: /* @__PURE__ */ t.jsx(
"div",
{
className: "relative h-full rounded bg-sky-500",
style: { width: `${(a - l) / (s - l) * 100}%` },
children: /* @__PURE__ */ t.jsx(
"div",
{
className: `absolute w-3 h-3 transition-all -translate-x-1/2 -translate-y-1/2 bg-sky-500 border-[4px] shadow rounded-full left-full top-1/2 ${u ? "scale-150" : "group-hover:scale-100"}`
}
)
}
)
}
);
}, de = ({ videoRef: l, rates: s = [1, 1.25, 1.5, 1.75, 2] }) => {
const [a, r] = g(1), [i, u] = g(!1), c = U(null), m = U(null), b = () => {
u((h) => !h);
};
return R(() => {
const h = (E) => {
var k, p;
c != null && c.current && !((k = c == null ? void 0 : c.current) != null && k.contains(E.target)) && (m != null && m.current) && !((p = m == null ? void 0 : m.current) != null && p.contains(E.target)) && (u(!1), console.log("Clicked outside the dropdown"));
};
return document.addEventListener("mousedown", h), () => document.removeEventListener("mousedown", h);
}, []), /* @__PURE__ */ t.jsxs(
"div",
{
ref: c,
className: "relative flex items-center justify-center w-full h-full",
children: [
/* @__PURE__ */ t.jsxs(
"p",
{
className: "p-1 px-2 font-bold transition rounded-lg cursor-pointer select-none hover:bg-sky-500",
onClick: b,
title: "Change Playback Speed",
children: [
a,
"x"
]
}
),
/* @__PURE__ */ t.jsx(
"div",
{
className: "absolute flex justify-between gap-2 p-2 mt-2 mr-2 text-black bg-white rounded-lg shadow-[0_0_15px_5px_rgba(0,0,0,0.5)] -right-[5.3rem] -top-[4.9rem] text-normal " + (i ? "block" : "hidden"),
children: s.length > 1 && s.map((h) => /* @__PURE__ */ t.jsxs(
"button",
{
ref: m,
className: `p-1 px-2 font-medium transition rounded-lg cursor-pointer select-none ${a === h ? "bg-sky-500 text-white" : "hover:ring-1 hover:ring-sky-500 "}`,
onClick: () => {
r(h), l.current && (l.current.playbackRate = h);
},
children: [
h,
"x"
]
},
h
))
}
)
]
}
);
}, me = ({ videoRef: l, setIsPlaying: s, size: a = "24" }) => {
const [r, i] = g(!1), u = async () => {
if (l.current)
try {
document.pictureInPictureElement ? (await document.exitPictureInPicture(), i(!1)) : (await l.current.requestPictureInPicture(), i(!0));
} catch (c) {
console.error("Error toggling PiP:", c);
}
};
return R(() => {
const c = () => {
i(!1), s(!1);
};
return document.addEventListener("leavepictureinpicture", c), () => {
document.removeEventListener("leavepictureinpicture", c);
};
}, [s]), /* @__PURE__ */ t.jsx(
"button",
{
onClick: u,
className: "p-1 transition rounded-lg hover:bg-sky-500",
children: r ? /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: a,
height: a,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "3",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "lucide lucide-picture-in-picture-exit",
children: [
/* @__PURE__ */ t.jsx("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }),
/* @__PURE__ */ t.jsx("rect", { width: "10", height: "7", x: "2", y: "4", rx: "2" })
]
}
) : /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: a,
height: a,
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "3",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "lucide lucide-picture-in-picture-2",
children: [
/* @__PURE__ */ t.jsx("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }),
/* @__PURE__ */ t.jsx("rect", { width: "10", height: "7", x: "12", y: "13", rx: "2" })
]
}
)
}
);
}, he = ({
isFullscreen: l,
size: s = 24,
color: a = "currentColor"
}) => l ? /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: s,
height: s,
viewBox: "0 0 24 24",
fill: "none",
stroke: a,
strokeWidth: "3",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-transform duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
/* @__PURE__ */ t.jsx("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
/* @__PURE__ */ t.jsx("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
/* @__PURE__ */ t.jsx("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
]
}
) : /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: s,
height: s,
viewBox: "0 0 24 24",
fill: "none",
stroke: a,
strokeWidth: "3",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-transform duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
/* @__PURE__ */ t.jsx("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
/* @__PURE__ */ t.jsx("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
/* @__PURE__ */ t.jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
]
}
), z = ({ direction: l = "forward", size: s = 24, color: a = "white" }) => l === "backward" ? /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: s,
height: s,
viewBox: "0 0 24 24",
fill: a,
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-all duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("polygon", { points: "19 20 9 12 19 4 19 20" }),
/* @__PURE__ */ t.jsx("line", { x1: "5", x2: "5", y1: "19", y2: "5" })
]
}
) : /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: s,
height: s,
viewBox: "0 0 24 24",
fill: a,
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-all duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("polygon", { points: "5 4 15 12 5 20 5 4" }),
/* @__PURE__ */ t.jsx("line", { x1: "19", x2: "19", y1: "5", y2: "19" })
]
}
), oe = ({ isPlaying: l, size: s = 24, color: a = "white" }) => l ? /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: s,
height: s,
viewBox: "0 0 24 24",
fill: a,
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-all duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("rect", { x: "5", y: "4", width: "4", height: "16", rx: "1" }),
/* @__PURE__ */ t.jsx("rect", { x: "15", y: "4", width: "4", height: "16", rx: "1" })
]
}
) : /* @__PURE__ */ t.jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: s,
height: s,
viewBox: "0 0 24 24",
fill: a,
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-all duration-200 ease-in-out",
children: /* @__PURE__ */ t.jsx("polygon", { points: "6 3 20 12 6 21 6 3" })
}
), pe = ({ isMuted: l, volume: s, size: a = 24, color: r = "white" }) => l || s === 0 ? /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: a,
height: a,
viewBox: "0 0 24 24",
fill: r,
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-all duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("path", { d: "M16 9a5 5 0 0 1 .95 2.293" }),
/* @__PURE__ */ t.jsx("path", { d: "M19.364 5.636a9 9 0 0 1 1.889 9.96" }),
/* @__PURE__ */ t.jsx("path", { d: "m2 2 20 20" }),
/* @__PURE__ */ t.jsx("path", { d: "m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11" }),
/* @__PURE__ */ t.jsx("path", { d: "M9.828 4.172A.686.686 0 0 1 11 4.657v.686" })
]
}
) : /* @__PURE__ */ t.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: a,
height: a,
viewBox: "0 0 24 24",
fill: r,
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className: "transition-all duration-200 ease-in-out",
children: [
/* @__PURE__ */ t.jsx("path", { d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z" }),
/* @__PURE__ */ t.jsx("path", { d: "M16 9a5 5 0 0 1 0 6" }),
/* @__PURE__ */ t.jsx("path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728" })
]
}
), fe = ({ title: l = "", skipTime: s = 10, src: a, ref: r }) => {
const [i, u] = g(!1), [c, m] = g(!1), [b, h] = g(!1), [E, k] = g(!1), [p, _] = g(0), [T, y] = g(0), [L, S] = g(1), [A, I] = g(!0), N = U(null), F = U(null), Z = () => {
r.current && _(r.current.duration);
}, D = () => {
!r.current || !A || (r.current.paused ? r.current.play() : r.current.pause(), u(!i));
}, q = () => {
r.current && y(r.current.currentTime);
}, X = () => {
if (!r.current) return;
const n = Math.min(
r.current.currentTime + s,
r.current.duration
// Ensure we don't exceed duration
);
r.current.currentTime = n;
}, H = () => {
if (!r.current) return;
const n = Math.max(
r.current.currentTime - s,
0
// Ensure we don't go below 0
);
r.current.currentTime = n;
}, $ = () => {
var n;
r.current && ((n = r == null ? void 0 : r.current) != null && n.muted ? r.current.muted = !1 : r.current.muted = !0, m(!c));
}, J = () => {
N.current && (document.fullscreenElement ? document.exitFullscreen() : N.current.requestFullscreen(), h(!b));
}, W = (n) => {
if (isNaN(n) || n < 0) return "0:00";
const w = Math.floor(n / 60), v = Math.floor(n % 60);
return `${w}:${v.toString().padStart(2, "0")}`;
};
return R(() => {
r.current && (r.current.volume = L);
}, [L]), R(() => {
const n = () => {
I(!0), clearTimeout(F.current), F.current = setTimeout(() => {
I(!1);
}, 2e3);
}, w = N.current;
return w && w.addEventListener("mousemove", n), () => {
w && w.removeEventListener("mousemove", n), clearTimeout(F.current);
};
}, []), R(() => {
const n = r.current, w = () => u(!0), v = () => u(!1), C = () => setIsInPiP(!0), j = () => setIsInPiP(!1), Y = () => {
h(!!document.fullscreenElement);
};
return n.addEventListener("play", w), n.addEventListener("pause", v), n.addEventListener("enterpictureinpicture", C), document.addEventListener("leavepictureinpicture", j), document.addEventListener("fullscreenchange", Y), () => {
n.removeEventListener("play", w), n.removeEventListener("pause", v), n.removeEventListener("enterpictureinpicture", C), n.removeEventListener("leavepictureinpicture", j), document.removeEventListener("fullscreenchange", Y);
};
}, []), R(() => {
const n = r.current, w = (v) => {
var C;
if (!(document.activeElement.tagName === "INPUT" || document.activeElement.tagName === "TEXTAREA"))
switch (I(!0), v.key) {
case " ":
v.preventDefault(), n.paused ? n.play() : n.pause();
break;
case "ArrowUp":
v.preventDefault(), S(Math.min(n.volume + 0.1, 1));
break;
case "ArrowDown":
v.preventDefault(), S(Math.max(n.volume - 0.1, 0));
break;
case "ArrowRight":
v.preventDefault(), n.currentTime = Math.min(
n.currentTime + s,
n.duration
);
break;
case "ArrowLeft":
v.preventDefault(), n.currentTime = Math.max(n.currentTime - s, 0);
break;
case "f":
case "F":
document.fullscreenElement ? document.exitFullscreen() : (C = N == null ? void 0 : N.current) == null || C.requestFullscreen(), h((j) => !j);
break;
case "Escape":
document.fullscreenElement && document.exitFullscreen();
break;
case "m":
case "M":
m((j) => !j), n.muted = !n.muted;
break;
case "p":
case "P":
document.pictureInPictureElement ? document.exitPictureInPicture() : n !== document.pictureInPictureElement && document.pictureInPictureEnabled && n.requestPictureInPicture().catch((j) => {
console.error("Failed to enter PiP mode:", j);
});
break;
}
};
return window.addEventListener("keydown", w), () => {
window.removeEventListener("keydown", w);
};
}, []), /* @__PURE__ */ t.jsxs(
"div",
{
ref: N,
className: `relative text-white group ${!A && i ? "cursor-none" : "cursor-default"}`,
children: [
/* @__PURE__ */ t.jsx(
"div",
{
className: `w-full absolute top-0 left-0 px-4 pt-2 pb-16 bg-gradient-to-b from-black/80 via-black/60 to-transparent
transition duration-500 z-50 ${A || !i ? "opacity-100" : "opacity-0 pointer-events-none cursor-none"}`,
children: /* @__PURE__ */ t.jsx("p", { className: "text-sm font-bold md:text-lg", children: l })
}
),
/* @__PURE__ */ t.jsxs(
"div",
{
className: `absolute w-full flex items-center gap-2 px-2 pt-16 pb-2 bottom-0 bg-gradient-to-t from-black/80 via-black/60 to-transparent
transition duration-500 z-40 ${A || !i ? "opacity-100" : "opacity-0 pointer-events-none cursor-none"} `,
children: [
/* @__PURE__ */ t.jsx("div", { className: "absolute w-full top-12 ", children: /* @__PURE__ */ t.jsx(
se,
{
min: 0,
max: p,
value: T,
onChange: (n) => r.current.currentTime = n
}
) }),
/* @__PURE__ */ t.jsxs("div", { className: "hidden md:block md:space-x-2", children: [
/* @__PURE__ */ t.jsx(
"button",
{
onClick: D,
className: "p-1 transition rounded-lg hover:bg-sky-500",
children: /* @__PURE__ */ t.jsx(oe, { isPlaying: i, size: 18 })
}
),
/* @__PURE__ */ t.jsx(
"button",
{
onClick: H,
className: "p-1 transition rounded-lg hover:bg-sky-500",
children: /* @__PURE__ */ t.jsx(z, { direction: "backward", size: 18 })
}
),
/* @__PURE__ */ t.jsx(
"button",
{
onClick: X,
className: "p-1 transition rounded-lg hover:bg-sky-500",
children: /* @__PURE__ */ t.jsx(z, { direction: "forward", size: 18 })
}
)
] }),
/* @__PURE__ */ t.jsxs(
"p",
{
onClick: () => k(!E),
className: "p-1 text-sm rounded-lg cursor-pointer select-none md:px-2 md:text-lg hover:bg-sky-500",
children: [
E ? /* @__PURE__ */ t.jsxs("span", { children: [
"-",
W(p - T || 0)
] }) : /* @__PURE__ */ t.jsx("span", { children: W(T || 0) }),
" ",
"/ ",
/* @__PURE__ */ t.jsx("span", { children: W(p || 0) })
]
}
),
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 md:ml-6", children: [
/* @__PURE__ */ t.jsx(
"button",
{
onClick: $,
className: "p-1 transition rounded-lg hover:bg-sky-500",
children: /* @__PURE__ */ t.jsx(pe, { isMuted: c, volume: L, size: 18 })
}
),
/* @__PURE__ */ t.jsx("div", { className: "w-16 md:w-20 ", children: /* @__PURE__ */ t.jsx(
se,
{
min: 0,
max: 1,
value: L,
onChange: (n) => S(n)
}
) })
] }),
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [
/* @__PURE__ */ t.jsx(de, { videoRef: r }),
/* @__PURE__ */ t.jsx(
me,
{
videoRef: r,
size: 18,
setIsPlaying: u
}
),
/* @__PURE__ */ t.jsx(
"button",
{
"aria-label": b ? "Exit fullscreen" : "Enter fullscreen",
onClick: J,
className: "p-1 transition rounded-lg cursor-pointer hover:bg-sky-500",
children: /* @__PURE__ */ t.jsx(he, { isFullscreen: b, size: 18 })
}
)
] })
]
}
),
/* @__PURE__ */ t.jsxs(
"div",
{
className: `relative ${b ? " flex items-center justify-center h-full w-full" : ""}`,
children: [
/* @__PURE__ */ t.jsxs(
"div",
{
className: `absolute z-50 flex items-center gap-6 transform -translate-x-1/2 -translate-y-1/2 md:hidden left-1/2
rounded-full p-2 transition-all duration-300 ${A || !i ? "opacity-100" : "opacity-0 pointer-events-none cursor-none"} ${b ? "top-[50%]" : "top-[45%]"}`,
children: [
/* @__PURE__ */ t.jsx(
"button",
{
onClick: H,
className: "p-2 transition-all rounded-full bg-white/10 backdrop-blur-sm hover:bg-sky-600",
children: /* @__PURE__ */ t.jsx(z, { direction: "backward", size: 20 })
}
),
/* @__PURE__ */ t.jsx(
"button",
{
onClick: D,
className: "p-3 text-white transition-all rounded-full shadow-md bg-sky-500 hover:bg-sky-600",
children: /* @__PURE__ */ t.jsx(oe, { isPlaying: i, size: 30 })
}
),
/* @__PURE__ */ t.jsx(
"button",
{
onClick: X,
className: "p-2 transition-all rounded-full bg-white/10 backdrop-blur-sm hover:bg-sky-600",
children: /* @__PURE__ */ t.jsx(z, { direction: "forward", size: 20 })
}
)
]
}
),
/* @__PURE__ */ t.jsx(
"video",
{
ref: r,
onClick: D,
src: a,
className: "w-full ",
download: "false",
onTimeUpdate: q,
onLoadedMetadata: Z,
onEnded: () => u(!1),
controls: !1,
style: { WebkitMediaControls: "none" }
}
)
]
}
)
]
}
);
}, we = ({ title: l = "", skipTime: s = 10, src: a, ref: r }) => {
const i = (c) => /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/.test(c), u = (c) => new URLSearchParams(new URL(c).search).get("v") || c.split("/").pop();
return /* @__PURE__ */ t.jsx(t.Fragment, { children: i(a) ? /* @__PURE__ */ t.jsx("div", { className: "relative w-full pb-[56.25%]", children: /* @__PURE__ */ t.jsx(
"iframe",
{
src: `https://www.youtube.com/embed/${u(a)}`,
title: l,
className: "absolute top-0 left-0 w-full h-full",
frameBorder: "0",
allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
allowFullScreen: !0
}
) }) : /* @__PURE__ */ t.jsx(
fe,
{
ref: r,
src: a,
title: l,
accentColor: "#F79426"
}
) });
};
export {
we as VideoPlayer
};