@amdadullah_raihan/react-custom-video-player/dist/index.umd.js

A customizable and modern video player built with React and Tailwind CSS.

(function(M,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],i):(M=typeof globalThis<"u"?globalThis:M||self,i(M.ReactCustomVideoPlayer={},M.React))})(this,function(M,i){"use strict";var X={exports:{}},I={};/**
 * @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 ee;function oe(){if(ee)return I;ee=1;var l=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function a(r,c,d){var u=null;if(d!==void 0&&(u=""+d),c.key!==void 0&&(u=""+c.key),"key"in c){d={};for(var h in c)h!=="key"&&(d[h]=c[h])}else d=c;return c=d.ref,{$$typeof:l,type:r,key:u,ref:c!==void 0?c:null,props:d}}return I.Fragment=s,I.jsx=a,I.jsxs=a,I}var F={};/**
 * @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 te;function ae(){return te||(te=1,process.env.NODE_ENV!=="production"&&function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case A:return"Profiler";case _:return"StrictMode";case W:return"Suspense";case Q:return"SuspenseList";case G: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 D:return(e.displayName||"Context")+".Provider";case R: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 Y:return o=e.displayName||null,o!==null?o:l(e.type)||"Memo";case J: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 m=o.error,x=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return m.call(o,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",x),s(e)}}function r(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===J)return"<...>";try{var o=l(e);return o?"<"+o+">":"<...>"}catch{return"<...>"}}function c(){var e=V.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function u(e){if(Z.call(e,"key")){var o=Object.getOwnPropertyDescriptor(e,"key").get;if(o&&o.isReactWarning)return!1}return e.key!==void 0}function h(e,o){function m(){v||(v=!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))}m.isReactWarning=!0,Object.defineProperty(e,"key",{get:m,configurable:!0})}function b(){var e=l(this.type);return g[e]||(g[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 f(e,o,m,x,C,P,K,q){return m=P.ref,e={$$typeof:S,type:e,key:o,props:P,_owner:C},(m!==void 0?m: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:K}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function E(e,o,m,x,C,P,K,q){var w=o.children;if(w!==void 0)if(x)if(B(w)){for(x=0;x<w.length;x++)k(w[x]);Object.freeze&&Object.freeze(w)}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(w);if(Z.call(o,"key")){w=l(e);var O=Object.keys(o).filter(function(fe){return fe!=="key"});x=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",U[w+x]||(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} />`,x,w,O,w),U[w+x]=!0)}if(w=null,m!==void 0&&(a(m),w=""+m),u(o)&&(a(o.key),w=""+o.key),"key"in o){m={};for(var $ in o)$!=="key"&&(m[$]=o[$])}else m=o;return w&&h(m,typeof e=="function"?e.displayName||e.name||"Unknown":e),f(e,w,P,C,c(),m,K,q)}function k(e){typeof e=="object"&&e!==null&&e.$$typeof===S&&e._store&&(e._store.validated=1)}var p=i,S=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),R=Symbol.for("react.consumer"),D=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),Y=Symbol.for("react.memo"),J=Symbol.for("react.lazy"),G=Symbol.for("react.activity"),z=Symbol.for("react.client.reference"),V=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,B=Array.isArray,n=console.createTask?console.createTask:function(){return null};p={"react-stack-bottom-frame":function(e){return e()}};var v,g={},L=p["react-stack-bottom-frame"].bind(p,d)(),j=n(r(d)),U={};F.Fragment=y,F.jsx=function(e,o,m,x,C){var P=1e4>V.recentlyCreatedOwnerStacks++;return E(e,o,m,!1,x,C,P?Error("react-stack-top-frame"):L,P?n(r(e)):j)},F.jsxs=function(e,o,m,x,C){var P=1e4>V.recentlyCreatedOwnerStacks++;return E(e,o,m,!0,x,C,P?Error("react-stack-top-frame"):L,P?n(r(e)):j)}}()),F}var re;function le(){return re||(re=1,process.env.NODE_ENV==="production"?X.exports=oe():X.exports=ae()),X.exports}var t=le();const ne=({min:l=0,max:s=100,value:a,onChange:r})=>{const c=i.useRef(null),[d,u]=i.useState(!1),h=p=>{if(!c.current)return;const{left:S,width:T}=c.current.getBoundingClientRect(),_=(p.clientX-S)/T*100,A=Math.max(l,Math.min(_/100*s,s));r(A)},b=p=>{u(!0),h(p)},f=p=>{d&&h(p)},E=p=>{p.preventDefault();const S=Math.sign(p.deltaY),T=(s-l)/100;let y=a-S*T;y=Math.max(l,Math.min(y,s)),r(y)},k=()=>u(!1);return i.useEffect(()=>(d?(window.addEventListener("mousemove",f),window.addEventListener("mouseup",k)):(window.removeEventListener("mousemove",f),window.removeEventListener("mouseup",k)),()=>{window.removeEventListener("mousemove",f),window.removeEventListener("mouseup",k)}),[d]),t.jsx("div",{ref:c,className:"relative w-full h-[0.3rem] bg-gray-300 rounded cursor-pointer",style:{width:"calc(100% - 1rem)"},onMouseDown:b,onWheel:E,children:t.jsx("div",{className:"relative h-full rounded bg-sky-500",style:{width:`${(a-l)/(s-l)*100}%`},children: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 ${d?"scale-150":"group-hover:scale-100"}`})})})},ce=({videoRef:l,rates:s=[1,1.25,1.5,1.75,2]})=>{const[a,r]=i.useState(1),[c,d]=i.useState(!1),u=i.useRef(null),h=i.useRef(null),b=()=>{d(f=>!f)};return i.useEffect(()=>{const f=E=>{var k,p;u!=null&&u.current&&!((k=u==null?void 0:u.current)!=null&&k.contains(E.target))&&(h!=null&&h.current)&&!((p=h==null?void 0:h.current)!=null&&p.contains(E.target))&&(d(!1),console.log("Clicked outside the dropdown"))};return document.addEventListener("mousedown",f),()=>document.removeEventListener("mousedown",f)},[]),t.jsxs("div",{ref:u,className:"relative flex items-center justify-center w-full h-full",children:[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"]}),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 "+(c?"block":"hidden"),children:s.length>1&&s.map(f=>t.jsxs("button",{ref:h,className:`p-1 px-2 font-medium transition rounded-lg cursor-pointer select-none  ${a===f?"bg-sky-500 text-white":"hover:ring-1 hover:ring-sky-500 "}`,onClick:()=>{r(f),l.current&&(l.current.playbackRate=f)},children:[f,"x"]},f))})]})},ie=({videoRef:l,setIsPlaying:s,size:a="24"})=>{const[r,c]=i.useState(!1),d=async()=>{if(l.current)try{document.pictureInPictureElement?(await document.exitPictureInPicture(),c(!1)):(await l.current.requestPictureInPicture(),c(!0))}catch(u){console.error("Error toggling PiP:",u)}};return i.useEffect(()=>{const u=()=>{c(!1),s(!1)};return document.addEventListener("leavepictureinpicture",u),()=>{document.removeEventListener("leavepictureinpicture",u)}},[s]),t.jsx("button",{onClick:d,className:"p-1 transition rounded-lg hover:bg-sky-500",children:r?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:[t.jsx("path",{d:"M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"}),t.jsx("rect",{width:"10",height:"7",x:"2",y:"4",rx:"2"})]}):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:[t.jsx("path",{d:"M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4"}),t.jsx("rect",{width:"10",height:"7",x:"12",y:"13",rx:"2"})]})})},ue=({isFullscreen:l,size:s=24,color:a="currentColor"})=>l?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:[t.jsx("path",{d:"M8 3v3a2 2 0 0 1-2 2H3"}),t.jsx("path",{d:"M21 8h-3a2 2 0 0 1-2-2V3"}),t.jsx("path",{d:"M3 16h3a2 2 0 0 1 2 2v3"}),t.jsx("path",{d:"M16 21v-3a2 2 0 0 1 2-2h3"})]}):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:[t.jsx("path",{d:"M8 3H5a2 2 0 0 0-2 2v3"}),t.jsx("path",{d:"M21 8V5a2 2 0 0 0-2-2h-3"}),t.jsx("path",{d:"M3 16v3a2 2 0 0 0 2 2h3"}),t.jsx("path",{d:"M16 21h3a2 2 0 0 0 2-2v-3"})]}),H=({direction:l="forward",size:s=24,color:a="white"})=>l==="backward"?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:[t.jsx("polygon",{points:"19 20 9 12 19 4 19 20"}),t.jsx("line",{x1:"5",x2:"5",y1:"19",y2:"5"})]}):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:[t.jsx("polygon",{points:"5 4 15 12 5 20 5 4"}),t.jsx("line",{x1:"19",x2:"19",y1:"5",y2:"19"})]}),se=({isPlaying:l,size:s=24,color:a="white"})=>l?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:[t.jsx("rect",{x:"5",y:"4",width:"4",height:"16",rx:"1"}),t.jsx("rect",{x:"15",y:"4",width:"4",height:"16",rx:"1"})]}):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:t.jsx("polygon",{points:"6 3 20 12 6 21 6 3"})}),de=({isMuted:l,volume:s,size:a=24,color:r="white"})=>l||s===0?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:[t.jsx("path",{d:"M16 9a5 5 0 0 1 .95 2.293"}),t.jsx("path",{d:"M19.364 5.636a9 9 0 0 1 1.889 9.96"}),t.jsx("path",{d:"m2 2 20 20"}),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"}),t.jsx("path",{d:"M9.828 4.172A.686.686 0 0 1 11 4.657v.686"})]}):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:[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"}),t.jsx("path",{d:"M16 9a5 5 0 0 1 0 6"}),t.jsx("path",{d:"M19.364 18.364a9 9 0 0 0 0-12.728"})]}),me=({title:l="",skipTime:s=10,src:a,ref:r})=>{const[c,d]=i.useState(!1),[u,h]=i.useState(!1),[b,f]=i.useState(!1),[E,k]=i.useState(!1),[p,S]=i.useState(0),[T,y]=i.useState(0),[_,A]=i.useState(1),[R,D]=i.useState(!0),N=i.useRef(null),W=i.useRef(null),Q=()=>{r.current&&S(r.current.duration)},Y=()=>{!r.current||!R||(r.current.paused?r.current.play():r.current.pause(),d(!c))},J=()=>{r.current&&y(r.current.currentTime)},G=()=>{if(!r.current)return;const n=Math.min(r.current.currentTime+s,r.current.duration);r.current.currentTime=n},z=()=>{if(!r.current)return;const n=Math.max(r.current.currentTime-s,0);r.current.currentTime=n},V=()=>{var n;r.current&&((n=r==null?void 0:r.current)!=null&&n.muted?r.current.muted=!1:r.current.muted=!0,h(!u))},Z=()=>{N.current&&(document.fullscreenElement?document.exitFullscreen():N.current.requestFullscreen(),f(!b))},B=n=>{if(isNaN(n)||n<0)return"0:00";const v=Math.floor(n/60),g=Math.floor(n%60);return`${v}:${g.toString().padStart(2,"0")}`};return i.useEffect(()=>{r.current&&(r.current.volume=_)},[_]),i.useEffect(()=>{const n=()=>{D(!0),clearTimeout(W.current),W.current=setTimeout(()=>{D(!1)},2e3)},v=N.current;return v&&v.addEventListener("mousemove",n),()=>{v&&v.removeEventListener("mousemove",n),clearTimeout(W.current)}},[]),i.useEffect(()=>{const n=r.current,v=()=>d(!0),g=()=>d(!1),L=()=>setIsInPiP(!0),j=()=>setIsInPiP(!1),U=()=>{f(!!document.fullscreenElement)};return n.addEventListener("play",v),n.addEventListener("pause",g),n.addEventListener("enterpictureinpicture",L),document.addEventListener("leavepictureinpicture",j),document.addEventListener("fullscreenchange",U),()=>{n.removeEventListener("play",v),n.removeEventListener("pause",g),n.removeEventListener("enterpictureinpicture",L),n.removeEventListener("leavepictureinpicture",j),document.removeEventListener("fullscreenchange",U)}},[]),i.useEffect(()=>{const n=r.current,v=g=>{var L;if(!(document.activeElement.tagName==="INPUT"||document.activeElement.tagName==="TEXTAREA"))switch(D(!0),g.key){case" ":g.preventDefault(),n.paused?n.play():n.pause();break;case"ArrowUp":g.preventDefault(),A(Math.min(n.volume+.1,1));break;case"ArrowDown":g.preventDefault(),A(Math.max(n.volume-.1,0));break;case"ArrowRight":g.preventDefault(),n.currentTime=Math.min(n.currentTime+s,n.duration);break;case"ArrowLeft":g.preventDefault(),n.currentTime=Math.max(n.currentTime-s,0);break;case"f":case"F":document.fullscreenElement?document.exitFullscreen():(L=N==null?void 0:N.current)==null||L.requestFullscreen(),f(j=>!j);break;case"Escape":document.fullscreenElement&&document.exitFullscreen();break;case"m":case"M":h(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",v),()=>{window.removeEventListener("keydown",v)}},[]),t.jsxs("div",{ref:N,className:`relative text-white group   ${!R&&c?"cursor-none":"cursor-default"}`,children:[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 ${R||!c?"opacity-100":"opacity-0 pointer-events-none cursor-none"}`,children:t.jsx("p",{className:"text-sm font-bold md:text-lg",children:l})}),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 ${R||!c?"opacity-100":"opacity-0 pointer-events-none cursor-none"} `,children:[t.jsx("div",{className:"absolute w-full top-12 ",children:t.jsx(ne,{min:0,max:p,value:T,onChange:n=>r.current.currentTime=n})}),t.jsxs("div",{className:"hidden md:block md:space-x-2",children:[t.jsx("button",{onClick:Y,className:"p-1 transition rounded-lg hover:bg-sky-500",children:t.jsx(se,{isPlaying:c,size:18})}),t.jsx("button",{onClick:z,className:"p-1 transition rounded-lg hover:bg-sky-500",children:t.jsx(H,{direction:"backward",size:18})}),t.jsx("button",{onClick:G,className:"p-1 transition rounded-lg hover:bg-sky-500",children:t.jsx(H,{direction:"forward",size:18})})]}),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?t.jsxs("span",{children:["-",B(p-T||0)]}):t.jsx("span",{children:B(T||0)})," ","/ ",t.jsx("span",{children:B(p||0)})]}),t.jsxs("div",{className:"flex items-center gap-2 md:ml-6",children:[t.jsx("button",{onClick:V,className:"p-1 transition rounded-lg hover:bg-sky-500",children:t.jsx(de,{isMuted:u,volume:_,size:18})}),t.jsx("div",{className:"w-16 md:w-20 ",children:t.jsx(ne,{min:0,max:1,value:_,onChange:n=>A(n)})})]}),t.jsxs("div",{className:"flex items-center gap-3 ml-auto",children:[t.jsx(ce,{videoRef:r}),t.jsx(ie,{videoRef:r,size:18,setIsPlaying:d}),t.jsx("button",{"aria-label":b?"Exit fullscreen":"Enter fullscreen",onClick:Z,className:"p-1 transition rounded-lg cursor-pointer hover:bg-sky-500",children:t.jsx(ue,{isFullscreen:b,size:18})})]})]}),t.jsxs("div",{className:`relative ${b?"  flex items-center justify-center h-full w-full":""}`,children:[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 ${R||!c?"opacity-100":"opacity-0 pointer-events-none cursor-none"} ${b?"top-[50%]":"top-[45%]"}`,children:[t.jsx("button",{onClick:z,className:"p-2 transition-all rounded-full bg-white/10 backdrop-blur-sm hover:bg-sky-600",children:t.jsx(H,{direction:"backward",size:20})}),t.jsx("button",{onClick:Y,className:"p-3 text-white transition-all rounded-full shadow-md bg-sky-500 hover:bg-sky-600",children:t.jsx(se,{isPlaying:c,size:30})}),t.jsx("button",{onClick:G,className:"p-2 transition-all rounded-full bg-white/10 backdrop-blur-sm hover:bg-sky-600",children:t.jsx(H,{direction:"forward",size:20})})]}),t.jsx("video",{ref:r,onClick:Y,src:a,className:"w-full   ",download:"false",onTimeUpdate:J,onLoadedMetadata:Q,onEnded:()=>d(!1),controls:!1,style:{WebkitMediaControls:"none"}})]})]})},he=({title:l="",skipTime:s=10,src:a,ref:r})=>{const c=u=>/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/.test(u),d=u=>new URLSearchParams(new URL(u).search).get("v")||u.split("/").pop();return t.jsx(t.Fragment,{children:c(a)?t.jsx("div",{className:"relative w-full pb-[56.25%]",children:t.jsx("iframe",{src:`https://www.youtube.com/embed/${d(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})}):t.jsx(me,{ref:r,src:a,title:l,accentColor:"#F79426"})})};M.VideoPlayer=he,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});