@zuude-ui/video 0.1.3585 → 0.1.3587

package/dist/chunk-WLYC6MHJ.js

@@ -0,0 +1,2 @@
+import a from"react";var u=(o,c,r)=>{a.useEffect(()=>{if(!(o!=null&&o.current)||!c)return;(async()=>{var l;try{await((l=o.current)==null?void 0:l.play())}catch(t){if(t instanceof Error&&t.name==="NotAllowedError"){if(r==null||r("NotAllowedError"),console.error("NotAllowedError"),o!=null&&o.current){o.current.muted=!0;try{await o.current.play()}catch(n){console.error(n)}}}else console.error(t)}})()},[c,o==null?void 0:o.current])};export{u as a};
+//# sourceMappingURL=chunk-WLYC6MHJ.js.map

package/dist/chunk-WLYC6MHJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-autoplay-by-force.tsx"],"sourcesContent":["import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (\n  ref: VideoRef | null,\n  enabled: boolean,\n  setError?: (error: string | null) => void\n) => {\n  React.useEffect(() => {\n    if (!ref?.current || !enabled) return;\n\n    const playVideo = async () => {\n      try {\n        await ref.current?.play();\n      } catch (error) {\n        // If autoplay fails, try muting and playing again\n        if (error instanceof Error && error.name === \"NotAllowedError\") {\n          setError?.(\"NotAllowedError\");\n          console.error(\"NotAllowedError\");\n          if (ref?.current) {\n            ref.current.muted = true;\n            try {\n              await ref.current.play();\n            } catch (retryError) {\n              console.error(retryError);\n            }\n          }\n        } else {\n          console.error(error);\n        }\n      }\n    };\n\n    playVideo();\n  }, [enabled, ref?.current]);\n};\n"],"mappings":"AAAA,OAAOA,MAAW,QAGX,IAAMC,EAAqB,CAChCC,EACAC,EACAC,IACG,CACHJ,EAAM,UAAU,IAAM,CACpB,GAAI,EAACE,GAAA,MAAAA,EAAK,UAAW,CAACC,EAAS,QAEb,SAAY,CAXlC,IAAAE,EAYM,GAAI,CACF,OAAMA,EAAAH,EAAI,UAAJ,YAAAG,EAAa,OACrB,OAASC,EAAO,CAEd,GAAIA,aAAiB,OAASA,EAAM,OAAS,mBAG3C,GAFAF,GAAA,MAAAA,EAAW,mBACX,QAAQ,MAAM,iBAAiB,EAC3BF,GAAA,MAAAA,EAAK,QAAS,CAChBA,EAAI,QAAQ,MAAQ,GACpB,GAAI,CACF,MAAMA,EAAI,QAAQ,KAAK,CACzB,OAASK,EAAY,CACnB,QAAQ,MAAMA,CAAU,CAC1B,CACF,OAEA,QAAQ,MAAMD,CAAK,CAEvB,CACF,GAEU,CACZ,EAAG,CAACH,EAASD,GAAA,YAAAA,EAAK,OAAO,CAAC,CAC5B","names":["React","useAutoplayByForce","ref","enabled","setError","_a","error","retryError"]}

package/dist/index.js

@@ -1,3 +1,3 @@
-"use client";function R(e,{insertAt:n}={}){if(!e||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",n==="top"&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}R(`.reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}
-`);import E from"react";import C from"react";import{jsx as Q}from"react/jsx-runtime";var A=C.createContext(void 0),l=()=>{let e=C.useContext(A);if(!e)throw new Error("useVideo must be used within a VideoProvider");return e},N=({children:e,videoRef:n,duration:r,showHidingElement:t,setShowHidingElement:u})=>{let[s,o]=C.useState(!1);return Q(A.Provider,{value:{videoRef:n,duration:r,isFullscreen:s,setIsFullscreen:o,showHidingElement:t,setShowHidingElement:u},children:e})};import X from"react";var g=(e,n,r)=>{X.useEffect(()=>{if(!(e!=null&&e.current)||!n)return;(async()=>{var u;try{await((u=e.current)==null?void 0:u.play())}catch(s){if(s instanceof Error&&s.name==="NotAllowedError"){if(r==null||r("NotAllowedError"),console.error("NotAllowedError"),e!=null&&e.current){e.current.muted=!0;try{await e.current.play()}catch(o){console.error(o)}}}else console.error(s)}})()},[n,e==null?void 0:e.current])};import Y from"react";var T=(e,n)=>{Y.useEffect(()=>{if(!(e!=null&&e.current)||!n)return;let r=e==null?void 0:e.current;r&&n&&(r.currentTime=n)},[n,e==null?void 0:e.current])};import Z from"react";var O=(e,n,r)=>{Z.useEffect(()=>{if(!r||!(e!=null&&e.current))return;let t=new IntersectionObserver(u=>{u.forEach(s=>{var o;e!=null&&e.current&&(s.isIntersecting?e.current.play().catch(a=>{e.current&&(e.current.pause(),e.current.muted=!0,e.current.play(),console.error(a))}):(o=e.current)==null||o.pause())})},{threshold:n!=null?n:.5});return t.observe(e==null?void 0:e.current),()=>{t.disconnect()}},[r,e==null?void 0:e.current])};import w from"react";var V=(e,n)=>{let[r,t]=w.useState(!1),u=w.useCallback(()=>{console.log(e==null?void 0:e.current),e!=null&&e.current&&(e.current.paused?e.current.play():e.current.pause())},[e==null?void 0:e.current]);return w.useEffect(()=>{if(!n||!(e!=null&&e.current))return;let s=()=>{t(!0)},o=()=>{t(!1)};if(t(!(e!=null&&e.current.paused)),e!=null&&e.current)return e.current.addEventListener("play",s),e.current.addEventListener("pause",o),()=>{var a,d;(a=e.current)==null||a.removeEventListener("play",s),(d=e.current)==null||d.removeEventListener("pause",o)}},[e==null?void 0:e.current,n]),{togglePlay:u,isPlaying:r}};import{jsx as _}from"react/jsx-runtime";var z=()=>{let{videoRef:e}=l(),{togglePlay:n}=V(e,!0);return _("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},onClick:n})};import re from"react";import L from"react";var F=(e,n)=>{let[r,t]=L.useState(!1),u=L.useCallback(()=>{e!=null&&e.current&&(e.current.muted=!e.current.muted)},[e==null?void 0:e.current]);return L.useEffect(()=>{if(!n||!(e!=null&&e.current))return;t(e.current.muted);let s=()=>{e.current&&t(e.current.muted)};return e.current.addEventListener("volumechange",s),()=>{var o;(o=e.current)==null||o.removeEventListener("volumechange",s)}},[e==null?void 0:e.current,n]),{toggleMute:u,isMuted:r}};import ee from"react";var M=()=>{let{videoRef:e,isFullscreen:n,setIsFullscreen:r}=l();ee.useEffect(()=>{let u=()=>{r==null||r(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",u),()=>document.removeEventListener("fullscreenchange",u)},[]);let t=()=>{var a;let u=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),s=e==null?void 0:e.current;if(s&&u){if(s.webkitEnterFullscreen){s.webkitEnterFullscreen();return}else if(s.requestFullscreen){s.requestFullscreen();return}}let o=(a=e==null?void 0:e.current)==null?void 0:a.closest("[data-zuude-video-wrapper]");o&&(n?document.exitFullscreen():o.requestFullscreen())};return{isFullscreen:n!=null?n:!1,toggleFullscreen:t}};import te from"react";var q=()=>{let{videoRef:e,isPictureInPicture:n,setIsPictureInPicture:r}=l();te.useEffect(()=>{let u=()=>{r==null||r(!!document.pictureInPictureElement)};return document.addEventListener("pictureinpicturechange",u),()=>document.removeEventListener("pictureinpicturechange",u)},[]);let t=async()=>{let u=e==null?void 0:e.current;if(u)try{document.pictureInPictureElement?await document.exitPictureInPicture():await u.requestPictureInPicture()}catch(s){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))u.webkitEnterFullscreen?u.webkitEnterFullscreen():u.requestFullscreen&&u.requestFullscreen();else{let a=u.closest("[data-zuude-video-wrapper]");a&&(document.fullscreenElement?await document.exitFullscreen():await a.requestFullscreen())}}};return{isPictureInPicture:n!=null?n:!1,togglePictureInPicture:t}};import S from"react";var $=(e,n)=>{let[r,t]=S.useState(1),u=s=>{t(s)};return S.useEffect(()=>{e!=null&&e.current&&t(e.current.playbackRate)},[e==null?void 0:e.current]),S.useEffect(()=>{!n||!(e!=null&&e.current)||(e.current.playbackRate=r)},[r,n,e==null?void 0:e.current]),{speed:r,onChangeSpeed:u}};var B=re.forwardRef(({children:e},n)=>{let{duration:r,showHidingElement:t}=l(),{togglePlay:u,isPlaying:s}=V(n,typeof e=="function"),{speed:o,onChangeSpeed:a}=$(n,typeof e=="function"),{toggleMute:d,isMuted:m}=F(n,typeof e=="function"),{isFullscreen:v,toggleFullscreen:b}=M(),{isPictureInPicture:f,togglePictureInPicture:i}=q();return typeof e!="function"?null:e({isPlaying:s,togglePlay:u,isMuted:m,toggleMute:d,speed:o,onChangeSpeed:a,isFullscreen:v,toggleFullscreen:b,isPictureInPicture:f,togglePictureInPicture:i,duration:r,showHidingElement:t!=null?t:!1})});import ne from"react";import{jsx as oe}from"react/jsx-runtime";var D=ne.forwardRef(({children:e,className:n,...r})=>{let{videoRef:t}=l(),{isPlaying:u}=V(t,!0),{showHidingElement:s,setShowHidingElement:o}=l();return oe("div",{"data-zuude-hiding-element":!0,"data-show":!u||s,className:n,onMouseEnter:()=>{o==null||o(!0)},onMouseLeave:()=>{o==null||o(!1)},...r,children:e})});import{jsx as I,jsxs as se}from"react/jsx-runtime";var U=E.forwardRef(({children:e,autoPlay:n,className:r,config:t,ratio:u,controls:s,pause:o,...a},d)=>{let[m,v]=E.useState(null),[b,f]=E.useState(null),i=d||E.useRef(null),[j,h]=E.useState(!1),y=E.useRef(null),G=()=>{var c;(c=i.current)!=null&&c.paused||(h(!0),y.current&&clearTimeout(y.current))},W=()=>{var c;(c=i.current)!=null&&c.paused||(h(!1),y.current&&clearTimeout(y.current))},J=()=>{var c;(c=i.current)!=null&&c.paused||(h(!0),y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{h(!1)},3e3))};return E.useEffect(()=>{var c,p;o!==void 0&&(o?(c=i.current)==null||c.pause():(p=i.current)==null||p.play())},[o,i.current]),g(i,n==="force"&&a.muted===void 0&&!(t!=null&&t.autoplayOnVisible),f),T(i,t==null?void 0:t.startAt),O(i,typeof(t==null?void 0:t.autoplayOnVisible)=="number"?t.autoplayOnVisible:void 0,t==null?void 0:t.autoplayOnVisible),I(N,{videoRef:i,duration:m,showHidingElement:j,setShowHidingElement:h,children:se("div",{"data-zuude-video-wrapper":!0,className:r,style:{aspectRatio:u},children:[I("video",{"data-zuude-video":!0,ref:i,autoPlay:t!=null&&t.autoplayOnVisible?!1:n==="force"?!0:n,playsInline:!0,onMouseEnter:G,onMouseLeave:W,onMouseMove:J,onClick:()=>{var c,p,P;t!=null&&t.clickToPlay&&((c=i.current)!=null&&c.paused?(p=i.current)==null||p.play():(P=i.current)==null||P.pause())},onLoadedMetadata:c=>{console.log("loaded metadata"),v(c.target.duration)},onTimeUpdate:c=>{var p;if(t!=null&&t.range){let[P,K]=t.range;if(!(i!=null&&i.current))return;((p=i==null?void 0:i.current)==null?void 0:p.currentTime)<P&&(i.current.currentTime=P),i.current.currentTime>K&&(i.current.currentTime=P)}},className:r,style:{aspectRatio:u},...a}),typeof e=="function"?I(B,{ref:i,children:e}):e,b==="NotAllowedError"&&typeof(t==null?void 0:t.muteFallback)=="function"&&t.muteFallback(()=>{i.current&&(i.current.muted=!i.current.muted),f(null)})]})})});U.displayName="Video";var ue=Object.assign(U,{PlayPauseOnVideo:z,HidingElement:D});import H from"react";var ie=()=>{let[e,n]=H.useState(100),{videoRef:r}=l(),t=u=>{n(u)};return H.useEffect(()=>{r!=null&&r.current&&n(r.current.volume*100)},[r==null?void 0:r.current]),H.useEffect(()=>{r!=null&&r.current&&(r.current.volume=e/100)},[e,r==null?void 0:r.current]),{volume:e,onChangeVolume:t}};import x from"react";var ae=()=>{let[e,n]=x.useState(!1),[r,t]=x.useState(0),[u,s]=x.useState(0),{videoRef:o,duration:a}=l();return x.useEffect(()=>{if(o!=null&&o.current&&e){let d=setInterval(()=>{var m,v;t(((m=o.current)==null?void 0:m.currentTime)||0),(v=o.current)!=null&&v.buffered.length&&s(o.current.buffered.end(o.current.buffered.length-1))},10);return()=>clearInterval(d)}},[o==null?void 0:o.current,e]),x.useEffect(()=>{if(o!=null&&o.current)return o.current.addEventListener("play",()=>n(!0)),o.current.addEventListener("pause",()=>n(!1)),()=>{var d,m;(d=o.current)==null||d.removeEventListener("play",()=>n(!0)),(m=o.current)==null||m.removeEventListener("pause",()=>n(!1))}},[]),{currentTime:r,duration:a,buffered:u,setCurrentTime:t}};import k from"react";var ce=e=>{let[n,r]=k.useState(!1),[t,u]=k.useState(null);return k.useEffect(()=>{if(e!=null&&e.current)return r(!0),e.current.addEventListener("loadedmetadata",()=>{var s,o;u((o=(s=e.current)==null?void 0:s.duration)!=null?o:null),r(!1)}),e.current.addEventListener("error",()=>{r(!1)}),()=>{var s,o;(s=e.current)==null||s.removeEventListener("loadedmetadata",()=>{}),(o=e.current)==null||o.removeEventListener("error",()=>{})}},[e==null?void 0:e.current]),{duration:t,isLoading:n}};function le(e,n="mm:ss"){let r=Math.floor(e/60),t=Math.floor(e%60);return n==="h:mm:ss"?`${Math.floor(r/60)}:${r}:${t<10?"0":""}${t}`:`${r}:${t<10?"0":""}${t}`}export{ue as Video,le as formatTime,g as useAutoplayByForce,M as useFullscreen,ce as useGetDuration,F as useMuteUnmute,V as usePlayPause,T as useStartAt,ae as useTimeline,l as useVideo,ie as useVolume};
+"use client";import{a as C}from"./chunk-WLYC6MHJ.js";function R(e,{insertAt:n}={}){if(!e||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",n==="top"&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}R(`.reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}
+`);import E from"react";import g from"react";import{jsx as Q}from"react/jsx-runtime";var O=g.createContext(void 0),l=()=>{let e=g.useContext(O);if(!e)throw new Error("useVideo must be used within a VideoProvider");return e},z=({children:e,videoRef:n,duration:r,showHidingElement:t,setShowHidingElement:u})=>{let[s,o]=g.useState(!1);return Q(O.Provider,{value:{videoRef:n,duration:r,isFullscreen:s,setIsFullscreen:o,showHidingElement:t,setShowHidingElement:u},children:e})};import X from"react";var T=(e,n)=>{X.useEffect(()=>{if(!(e!=null&&e.current)||!n)return;let r=e==null?void 0:e.current;r&&n&&(r.currentTime=n)},[n,e==null?void 0:e.current])};import Y from"react";var A=(e,n,r)=>{Y.useEffect(()=>{if(!r||!(e!=null&&e.current))return;let t=new IntersectionObserver(u=>{u.forEach(s=>{var o;e!=null&&e.current&&(s.isIntersecting?e.current.play().catch(a=>{e.current&&(e.current.pause(),e.current.muted=!0,e.current.play(),console.error(a))}):(o=e.current)==null||o.pause())})},{threshold:n!=null?n:.5});return t.observe(e==null?void 0:e.current),()=>{t.disconnect()}},[r,e==null?void 0:e.current])};import L from"react";var V=(e,n)=>{let[r,t]=L.useState(!1),u=L.useCallback(()=>{console.log(e==null?void 0:e.current),e!=null&&e.current&&(e.current.paused?e.current.play():e.current.pause())},[e==null?void 0:e.current]);return L.useEffect(()=>{if(!n||!(e!=null&&e.current))return;let s=()=>{t(!0)},o=()=>{t(!1)};if(t(!(e!=null&&e.current.paused)),e!=null&&e.current)return e.current.addEventListener("play",s),e.current.addEventListener("pause",o),()=>{var a,d;(a=e.current)==null||a.removeEventListener("play",s),(d=e.current)==null||d.removeEventListener("pause",o)}},[e==null?void 0:e.current,n]),{togglePlay:u,isPlaying:r}};import{jsx as Z}from"react/jsx-runtime";var N=()=>{let{videoRef:e}=l(),{togglePlay:n}=V(e,!0);return Z("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},onClick:n})};import te from"react";import F from"react";var M=(e,n)=>{let[r,t]=F.useState(!1),u=F.useCallback(()=>{e!=null&&e.current&&(e.current.muted=!e.current.muted)},[e==null?void 0:e.current]);return F.useEffect(()=>{if(!n||!(e!=null&&e.current))return;t(e.current.muted);let s=()=>{e.current&&t(e.current.muted)};return e.current.addEventListener("volumechange",s),()=>{var o;(o=e.current)==null||o.removeEventListener("volumechange",s)}},[e==null?void 0:e.current,n]),{toggleMute:u,isMuted:r}};import _ from"react";var w=()=>{let{videoRef:e,isFullscreen:n,setIsFullscreen:r}=l();_.useEffect(()=>{let u=()=>{r==null||r(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",u),()=>document.removeEventListener("fullscreenchange",u)},[]);let t=()=>{var a;let u=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),s=e==null?void 0:e.current;if(s&&u){if(s.webkitEnterFullscreen){s.webkitEnterFullscreen();return}else if(s.requestFullscreen){s.requestFullscreen();return}}let o=(a=e==null?void 0:e.current)==null?void 0:a.closest("[data-zuude-video-wrapper]");o&&(n?document.exitFullscreen():o.requestFullscreen())};return{isFullscreen:n!=null?n:!1,toggleFullscreen:t}};import ee from"react";var q=()=>{let{videoRef:e,isPictureInPicture:n,setIsPictureInPicture:r}=l();ee.useEffect(()=>{let u=()=>{r==null||r(!!document.pictureInPictureElement)};return document.addEventListener("pictureinpicturechange",u),()=>document.removeEventListener("pictureinpicturechange",u)},[]);let t=async()=>{let u=e==null?void 0:e.current;if(u)try{document.pictureInPictureElement?await document.exitPictureInPicture():await u.requestPictureInPicture()}catch(s){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))u.webkitEnterFullscreen?u.webkitEnterFullscreen():u.requestFullscreen&&u.requestFullscreen();else{let a=u.closest("[data-zuude-video-wrapper]");a&&(document.fullscreenElement?await document.exitFullscreen():await a.requestFullscreen())}}};return{isPictureInPicture:n!=null?n:!1,togglePictureInPicture:t}};import S from"react";var $=(e,n)=>{let[r,t]=S.useState(1),u=s=>{t(s)};return S.useEffect(()=>{e!=null&&e.current&&t(e.current.playbackRate)},[e==null?void 0:e.current]),S.useEffect(()=>{!n||!(e!=null&&e.current)||(e.current.playbackRate=r)},[r,n,e==null?void 0:e.current]),{speed:r,onChangeSpeed:u}};var B=te.forwardRef(({children:e},n)=>{let{duration:r,showHidingElement:t}=l(),{togglePlay:u,isPlaying:s}=V(n,typeof e=="function"),{speed:o,onChangeSpeed:a}=$(n,typeof e=="function"),{toggleMute:d,isMuted:m}=M(n,typeof e=="function"),{isFullscreen:v,toggleFullscreen:b}=w(),{isPictureInPicture:x,togglePictureInPicture:i}=q();return typeof e!="function"?null:e({isPlaying:s,togglePlay:u,isMuted:m,toggleMute:d,speed:o,onChangeSpeed:a,isFullscreen:v,toggleFullscreen:b,isPictureInPicture:x,togglePictureInPicture:i,duration:r,showHidingElement:t!=null?t:!1})});import re from"react";import{jsx as ne}from"react/jsx-runtime";var D=re.forwardRef(({children:e,className:n,...r})=>{let{videoRef:t}=l(),{isPlaying:u}=V(t,!0),{showHidingElement:s,setShowHidingElement:o}=l();return ne("div",{"data-zuude-hiding-element":!0,"data-show":!u||s,className:n,onMouseEnter:()=>{o==null||o(!0)},onMouseLeave:()=>{o==null||o(!1)},...r,children:e})});import{jsx as I,jsxs as ue}from"react/jsx-runtime";var U=E.forwardRef(({children:e,autoPlay:n,className:r,config:t,ratio:u,controls:s,pause:o,...a},d)=>{let[m,v]=E.useState(null),[b,x]=E.useState(null),i=d||E.useRef(null),[j,h]=E.useState(!1),y=E.useRef(null),G=()=>{var c;(c=i.current)!=null&&c.paused||(h(!0),y.current&&clearTimeout(y.current))},W=()=>{var c;(c=i.current)!=null&&c.paused||(h(!1),y.current&&clearTimeout(y.current))},J=()=>{var c;(c=i.current)!=null&&c.paused||(h(!0),y.current&&clearTimeout(y.current),y.current=setTimeout(()=>{h(!1)},3e3))};return E.useEffect(()=>{var c,p;o!==void 0&&(o?(c=i.current)==null||c.pause():(p=i.current)==null||p.play())},[o,i.current]),C(i,n==="force"&&a.muted===void 0&&!(t!=null&&t.autoplayOnVisible),x),T(i,t==null?void 0:t.startAt),A(i,typeof(t==null?void 0:t.autoplayOnVisible)=="number"?t.autoplayOnVisible:void 0,t==null?void 0:t.autoplayOnVisible),I(z,{videoRef:i,duration:m,showHidingElement:j,setShowHidingElement:h,children:ue("div",{"data-zuude-video-wrapper":!0,className:r,style:{aspectRatio:u},children:[I("video",{"data-zuude-video":!0,ref:i,autoPlay:t!=null&&t.autoplayOnVisible?!1:n==="force"?!0:n,playsInline:!0,onMouseEnter:G,onMouseLeave:W,onMouseMove:J,onClick:()=>{var c,p,P;t!=null&&t.clickToPlay&&((c=i.current)!=null&&c.paused?(p=i.current)==null||p.play():(P=i.current)==null||P.pause())},onLoadedMetadata:c=>{console.log("loaded metadata"),v(c.target.duration)},onTimeUpdate:c=>{var p;if(t!=null&&t.range){let[P,K]=t.range;if(!(i!=null&&i.current))return;((p=i==null?void 0:i.current)==null?void 0:p.currentTime)<P&&(i.current.currentTime=P),i.current.currentTime>K&&(i.current.currentTime=P)}},className:r,style:{aspectRatio:u},...a}),typeof e=="function"?I(B,{ref:i,children:e}):e,b==="NotAllowedError"&&typeof(t==null?void 0:t.muteFallback)=="function"&&t.muteFallback(()=>{i.current&&(i.current.muted=!i.current.muted),x(null)})]})})});U.displayName="Video";var oe=Object.assign(U,{PlayPauseOnVideo:N,HidingElement:D});import H from"react";var se=()=>{let[e,n]=H.useState(100),{videoRef:r}=l(),t=u=>{n(u)};return H.useEffect(()=>{r!=null&&r.current&&n(r.current.volume*100)},[r==null?void 0:r.current]),H.useEffect(()=>{r!=null&&r.current&&(r.current.volume=e/100)},[e,r==null?void 0:r.current]),{volume:e,onChangeVolume:t}};import f from"react";var ie=()=>{let[e,n]=f.useState(!1),[r,t]=f.useState(0),[u,s]=f.useState(0),{videoRef:o,duration:a}=l();return f.useEffect(()=>{if(o!=null&&o.current&&e){let d=setInterval(()=>{var m,v;t(((m=o.current)==null?void 0:m.currentTime)||0),(v=o.current)!=null&&v.buffered.length&&s(o.current.buffered.end(o.current.buffered.length-1))},10);return()=>clearInterval(d)}},[o==null?void 0:o.current,e]),f.useEffect(()=>{if(o!=null&&o.current)return o.current.addEventListener("play",()=>n(!0)),o.current.addEventListener("pause",()=>n(!1)),()=>{var d,m;(d=o.current)==null||d.removeEventListener("play",()=>n(!0)),(m=o.current)==null||m.removeEventListener("pause",()=>n(!1))}},[]),{currentTime:r,duration:a,buffered:u,setCurrentTime:t}};import k from"react";var ae=e=>{let[n,r]=k.useState(!1),[t,u]=k.useState(null);return k.useEffect(()=>{if(e!=null&&e.current)return r(!0),e.current.addEventListener("loadedmetadata",()=>{var s,o;u((o=(s=e.current)==null?void 0:s.duration)!=null?o:null),r(!1)}),e.current.addEventListener("error",()=>{r(!1)}),()=>{var s,o;(s=e.current)==null||s.removeEventListener("loadedmetadata",()=>{}),(o=e.current)==null||o.removeEventListener("error",()=>{})}},[e==null?void 0:e.current]),{duration:t,isLoading:n}};function ce(e,n="mm:ss"){let r=Math.floor(e/60),t=Math.floor(e%60);return n==="h:mm:ss"?`${Math.floor(r/60)}:${r}:${t<10?"0":""}${t}`:`${r}:${t<10?"0":""}${t}`}export{oe as Video,ce as formatTime,C as useAutoplayByForce,w as useFullscreen,ae as useGetDuration,M as useMuteUnmute,V as usePlayPause,T as useStartAt,ie as useTimeline,l as useVideo,se as useVolume};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/video.tsx","../src/context.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-start-at.tsx","../src/hooks/use-autoplay-on-visible.tsx","../src/hooks/use-play-pause.tsx","../src/components/play-pause-on-video.tsx","../src/function-children.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/hooks/use-speed.tsx","../src/components/hiding-element.tsx","../src/hooks/use-volume.tsx","../src/hooks/use-timeline.tsx","../src/hooks/use-get-duration.tsx","../src/utils.ts"],"sourcesContent":["\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}\\n\")","import React from \"react\";\n\n// 📦 Types\nimport type { VideoProps, VideoRef } from \"./types\";\n\n// 🔍 Context\nimport { VideoProvider } from \"./context\";\n\n// 🔗 Hooks\nimport { useAutoplayByForce } from \"./hooks/use-autoplay-by-force\";\nimport { useStartAt } from \"./hooks/use-start-at\";\nimport { useAutoplayOnVisible } from \"./hooks/use-autoplay-on-visible\";\n\n// 🔧 Components\nimport { PlayPauseOnVideo } from \"./components/play-pause-on-video\";\nimport { FunctionChildren } from \"./function-children\";\nimport { HidingElement, HidingElementProps } from \"./components/hiding-element\";\n\n/**\n * Main Video component structure\n * @param {VideoProps} props - Video component props\n */\n\nconst VideoComponent = React.forwardRef<\n  HTMLVideoElement,\n  VideoProps & { pause?: boolean }\n>(\n  (\n    { children, autoPlay, className, config, ratio, controls, pause, ...props },\n    ref\n  ) => {\n    const [duration, setDuration] = React.useState<number | null>(null);\n    const [error, setError] = React.useState<string | null>(null);\n\n    const videoRef = (ref as VideoRef) || React.useRef<VideoRef>(null);\n\n    const [showHidingElement, setShowHidingElement] = React.useState(false);\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n    const handleMouseEnter = () => {\n      if (videoRef.current?.paused) return;\n\n      setShowHidingElement(true);\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n    const handleMouseLeave = () => {\n      if (videoRef.current?.paused) return;\n\n      setShowHidingElement(false);\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n    const handleMouseMove = () => {\n      if (videoRef.current?.paused) return;\n\n      setShowHidingElement(true);\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(() => {\n        setShowHidingElement(false);\n      }, 3000);\n    };\n\n    React.useEffect(() => {\n      if (pause !== undefined) {\n        if (pause) {\n          videoRef.current?.pause();\n        } else {\n          videoRef.current?.play();\n        }\n      }\n    }, [pause, videoRef.current]);\n\n    useAutoplayByForce(\n      videoRef,\n      autoPlay === \"force\" &&\n        props.muted === undefined &&\n        !config?.autoplayOnVisible,\n      setError\n    );\n    useStartAt(videoRef, config?.startAt);\n    useAutoplayOnVisible(\n      videoRef,\n      typeof config?.autoplayOnVisible === \"number\"\n        ? config.autoplayOnVisible\n        : undefined,\n      config?.autoplayOnVisible\n    );\n\n    return (\n      <VideoProvider\n        videoRef={videoRef}\n        duration={duration}\n        showHidingElement={showHidingElement}\n        setShowHidingElement={setShowHidingElement}\n      >\n        <div\n          data-zuude-video-wrapper\n          className={className}\n          style={{ aspectRatio: ratio }}\n        >\n          <video\n            data-zuude-video\n            // @ts-ignore\n            ref={videoRef}\n            autoPlay={\n              config?.autoplayOnVisible\n                ? false\n                : autoPlay === \"force\"\n                  ? true\n                  : autoPlay\n            }\n            playsInline\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onMouseMove={handleMouseMove}\n            onClick={() => {\n              if (config?.clickToPlay) {\n                if (videoRef.current?.paused) {\n                  videoRef.current?.play();\n                } else {\n                  videoRef.current?.pause();\n                }\n              }\n            }}\n            onLoadedMetadata={(e) => {\n              console.log(\"loaded metadata\");\n              setDuration((e.target as HTMLVideoElement).duration);\n            }}\n            onTimeUpdate={(e) => {\n              /**\n               * If the current time is less than the start time, set the current time to the start time\n               * If the current time is greater than the end time, set the current time to the start time\n               */\n              if (config?.range) {\n                const [start, end] = config.range;\n\n                if (!videoRef?.current) return;\n\n                if (videoRef?.current?.currentTime < start) {\n                  videoRef.current.currentTime = start;\n                }\n\n                if (videoRef.current.currentTime > end) {\n                  videoRef.current.currentTime = start;\n                }\n              }\n            }}\n            className={className}\n            style={{ aspectRatio: ratio }}\n            {...props}\n          />\n          {typeof children === \"function\" ? (\n            <FunctionChildren ref={videoRef} children={children} />\n          ) : (\n            children\n          )}\n          {error === \"NotAllowedError\" &&\n            typeof config?.muteFallback === \"function\" &&\n            config.muteFallback(() => {\n              if (videoRef.current) {\n                videoRef.current.muted = !videoRef.current.muted;\n              }\n              setError(null);\n            })}\n        </div>\n      </VideoProvider>\n    );\n  }\n);\n\nVideoComponent.displayName = \"Video\";\n\n/**\n * Using compound components pattern\n */\nexport const Video = Object.assign(VideoComponent, {\n  PlayPauseOnVideo,\n  HidingElement: HidingElement as React.ComponentType<HidingElementProps>,\n});\n","import React from \"react\";\nimport type { VideoContextType } from \"./types.js\";\n\nconst VideoContext = React.createContext<VideoContextType | undefined>(\n  undefined\n);\n\nconst useVideo = () => {\n  const context = React.useContext(VideoContext);\n  if (!context) {\n    throw new Error(\"useVideo must be used within a VideoProvider\");\n  }\n  return context;\n};\n\ninterface VideoProviderProps extends VideoContextType {\n  children: React.ReactNode;\n}\n\nconst VideoProvider = ({\n  children,\n  videoRef,\n  duration,\n  showHidingElement,\n  setShowHidingElement,\n}: VideoProviderProps) => {\n  const [fullscreen, setFullscreen] = React.useState(false);\n\n  return (\n    <VideoContext.Provider\n      value={{\n        videoRef,\n        duration,\n        isFullscreen: fullscreen,\n        setIsFullscreen: setFullscreen,\n        showHidingElement,\n        setShowHidingElement,\n      }}\n    >\n      {children}\n    </VideoContext.Provider>\n  );\n};\n\nexport { useVideo, VideoProvider };\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (\n  ref: VideoRef | null,\n  enabled: boolean,\n  setError?: (error: string | null) => void\n) => {\n  React.useEffect(() => {\n    if (!ref?.current || !enabled) return;\n\n    const playVideo = async () => {\n      try {\n        await ref.current?.play();\n      } catch (error) {\n        // If autoplay fails, try muting and playing again\n        if (error instanceof Error && error.name === \"NotAllowedError\") {\n          setError?.(\"NotAllowedError\");\n          console.error(\"NotAllowedError\");\n          if (ref?.current) {\n            ref.current.muted = true;\n            try {\n              await ref.current.play();\n            } catch (retryError) {\n              console.error(retryError);\n            }\n          }\n        } else {\n          console.error(error);\n        }\n      }\n    };\n\n    playVideo();\n  }, [enabled, ref?.current]);\n};\n","import React from \"react\";\nimport type { VideoConfig, VideoRef } from \"../types\";\n\nexport const useStartAt = (ref: VideoRef, startAt?: VideoConfig[\"startAt\"]) => {\n  React.useEffect(() => {\n    if (!ref?.current || !startAt) return;\n\n    const video = ref?.current;\n    if (video && startAt) {\n      video.currentTime = startAt;\n    }\n  }, [startAt, ref?.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useAutoplayOnVisible = (\n  ref: VideoRef,\n  threshold: number | undefined,\n  enabled: boolean | number | null | undefined\n) => {\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!ref?.current) return;\n\n          if (entry.isIntersecting) {\n            ref.current.play().catch((error) => {\n              if (!ref.current) return;\n\n              ref.current.pause();\n              ref.current.muted = true;\n              ref.current.play();\n              console.error(error);\n            });\n          } else {\n            ref.current?.pause();\n          }\n        });\n      },\n      { threshold: threshold ?? 0.5 }\n    );\n\n    observer.observe(ref?.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [enabled, ref?.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (ref: VideoRef, enabled: boolean) => {\n  const [isPlaying, setIsPlaying] = React.useState(false);\n\n  const togglePlay = React.useCallback(() => {\n    console.log(ref?.current);\n    if (ref?.current) {\n      ref.current.paused ? ref.current.play() : ref.current.pause();\n    }\n  }, [ref?.current]);\n\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    const handlePlay = () => {\n      setIsPlaying(true);\n    };\n    const handlePause = () => {\n      setIsPlaying(false);\n    };\n\n    setIsPlaying(!ref?.current.paused);\n\n    if (ref?.current) {\n      ref.current.addEventListener(\"play\", handlePlay);\n      ref.current.addEventListener(\"pause\", handlePause);\n\n      return () => {\n        ref.current?.removeEventListener(\"play\", handlePlay);\n        ref.current?.removeEventListener(\"pause\", handlePause);\n      };\n    }\n  }, [ref?.current, enabled]);\n\n  return { togglePlay, isPlaying };\n};\n","import { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport const PlayPauseOnVideo = () => {\n  const { videoRef } = useVideo();\n\n  const { togglePlay } = usePlayPause(videoRef, true);\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      }}\n      onClick={togglePlay}\n    ></div>\n  );\n};\n","import React from \"react\";\n\nimport type { VideoChildren, VideoRef } from \"./types\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useVideo } from \"./context\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\nimport { useSpeed } from \"./hooks/use-speed\";\n\nexport const FunctionChildren = React.forwardRef<\n  any,\n  {\n    children: VideoChildren;\n  }\n>(({ children }, ref) => {\n  const { duration, showHidingElement } = useVideo();\n\n  /**\n   * Only use these hooks if the children is a function\n   */\n  const { togglePlay, isPlaying } = usePlayPause(\n    ref as VideoRef,\n    typeof children === \"function\"\n  );\n  const { speed, onChangeSpeed } = useSpeed(\n    ref as VideoRef,\n    typeof children === \"function\"\n  );\n  const { toggleMute, isMuted } = useMuteUnmute(\n    ref as VideoRef,\n    typeof children === \"function\"\n  );\n  const { isFullscreen, toggleFullscreen } = useFullscreen();\n  const { isPictureInPicture, togglePictureInPicture } = usePictureInPicture();\n\n  if (typeof children !== \"function\") return null;\n\n  return children({\n    isPlaying,\n    togglePlay,\n    isMuted,\n    toggleMute,\n    speed,\n    onChangeSpeed,\n    isFullscreen,\n    toggleFullscreen,\n    isPictureInPicture,\n    togglePictureInPicture,\n    duration,\n    showHidingElement: showHidingElement ?? false,\n  });\n});\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (ref: VideoRef, enabled: boolean) => {\n  const [isMuted, setIsMuted] = React.useState(false);\n\n  const toggleMute = React.useCallback(() => {\n    if (ref?.current) {\n      ref.current.muted = !ref.current.muted;\n    }\n  }, [ref?.current]);\n\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    // Set the initial state\n    setIsMuted(ref.current.muted);\n\n    const handleVolumeChange = () => {\n      if (ref.current) {\n        setIsMuted(ref.current.muted);\n      }\n    };\n\n    ref.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n    return () => {\n      ref.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n    };\n  }, [ref?.current, enabled]);\n\n  return { toggleMute, isMuted };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useFullscreen = () => {\n  const { videoRef, isFullscreen, setIsFullscreen } = useVideo();\n\n  React.useEffect(() => {\n    const handleFullscreenChange = () => {\n      setIsFullscreen?.(!!document.fullscreenElement);\n    };\n\n    document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n    return () =>\n      document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n  }, []);\n\n  const toggleFullscreen = () => {\n    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n    const video = videoRef?.current;\n\n    if (video && isSafari) {\n      if ((video as any).webkitEnterFullscreen) {\n        (video as any).webkitEnterFullscreen();\n        return;\n      } else if (video.requestFullscreen) {\n        video.requestFullscreen();\n        return;\n      }\n    }\n\n    const videoContainer = videoRef?.current?.closest(\n      \"[data-zuude-video-wrapper]\"\n    ) as HTMLElement;\n\n    if (videoContainer) {\n      if (!isFullscreen) {\n        videoContainer.requestFullscreen();\n      } else {\n        document.exitFullscreen();\n      }\n    }\n  };\n\n  return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const usePictureInPicture = () => {\n  const { videoRef, isPictureInPicture, setIsPictureInPicture } = useVideo();\n\n  React.useEffect(() => {\n    const handlePictureInPictureChange = () => {\n      setIsPictureInPicture?.(!!document.pictureInPictureElement);\n    };\n\n    document.addEventListener(\n      \"pictureinpicturechange\",\n      handlePictureInPictureChange\n    );\n    return () =>\n      document.removeEventListener(\n        \"pictureinpicturechange\",\n        handlePictureInPictureChange\n      );\n  }, []);\n\n  const togglePictureInPicture = async () => {\n    const video = videoRef?.current;\n    if (!video) return;\n\n    try {\n      if (document.pictureInPictureElement) {\n        await document.exitPictureInPicture();\n      } else {\n        await video.requestPictureInPicture();\n      }\n    } catch (error) {\n      // Fallback for browsers that don't support PiP\n      const isSafari = /^((?!chrome|android).)*safari/i.test(\n        navigator.userAgent\n      );\n\n      if (isSafari) {\n        if ((video as any).webkitEnterFullscreen) {\n          (video as any).webkitEnterFullscreen();\n        } else if (video.requestFullscreen) {\n          video.requestFullscreen();\n        }\n      } else {\n        const videoContainer = video.closest(\n          \"[data-zuude-video-wrapper]\"\n        ) as HTMLElement;\n        if (videoContainer) {\n          if (!document.fullscreenElement) {\n            await videoContainer.requestFullscreen();\n          } else {\n            await document.exitFullscreen();\n          }\n        }\n      }\n    }\n  };\n\n  return {\n    isPictureInPicture: isPictureInPicture ?? false,\n    togglePictureInPicture,\n  };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSpeed = (ref: VideoRef, enabled: boolean) => {\n  const [speed, setSpeed] = React.useState(1);\n\n  const onChangeSpeed = (speed: number) => {\n    setSpeed(speed);\n  };\n\n  // Get the speed from the video element\n  React.useEffect(() => {\n    if (!ref?.current) return;\n    setSpeed(ref.current.playbackRate);\n  }, [ref?.current]);\n\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    ref.current.playbackRate = speed;\n  }, [speed, enabled, ref?.current]);\n\n  return { speed, onChangeSpeed };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport interface HidingElementProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const HidingElement = React.forwardRef<\n  HTMLDivElement,\n  HidingElementProps\n>(({ children, className, ...props }: HidingElementProps) => {\n  const { videoRef } = useVideo();\n  const { isPlaying } = usePlayPause(videoRef, true);\n  const { showHidingElement, setShowHidingElement } = useVideo();\n\n  return (\n    <div\n      data-zuude-hiding-element\n      data-show={!isPlaying || showHidingElement}\n      className={className}\n      onMouseEnter={() => {\n        setShowHidingElement?.(true);\n      }}\n      onMouseLeave={() => {\n        setShowHidingElement?.(false);\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useVolume = () => {\n  const [volume, setVolume] = React.useState(100);\n  const { videoRef } = useVideo();\n\n  const onChangeVolume = (volume: number) => {\n    setVolume(volume);\n  };\n\n  // Get the volume from the video element\n  React.useEffect(() => {\n    if (!videoRef?.current) return;\n    setVolume(videoRef.current.volume * 100);\n  }, [videoRef?.current]);\n\n  React.useEffect(() => {\n    if (!videoRef?.current) return;\n\n    videoRef.current.volume = volume / 100;\n  }, [volume, videoRef?.current]);\n\n  return { volume, onChangeVolume };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useTimeline = () => {\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [buffered, setBuffered] = React.useState(0);\n\n  const { videoRef, duration } = useVideo();\n\n  React.useEffect(() => {\n    if (videoRef?.current && isPlaying) {\n      const intervalId = setInterval(() => {\n        setCurrentTime(videoRef.current?.currentTime || 0);\n\n        if (videoRef.current?.buffered.length) {\n          setBuffered(\n            videoRef.current.buffered.end(videoRef.current.buffered.length - 1)\n          );\n        }\n      }, 10);\n\n      return () => clearInterval(intervalId);\n    }\n  }, [videoRef?.current, isPlaying]);\n\n  React.useEffect(() => {\n    if (!videoRef?.current) return;\n\n    videoRef.current.addEventListener(\"play\", () => setIsPlaying(true));\n    videoRef.current.addEventListener(\"pause\", () => setIsPlaying(false));\n\n    return () => {\n      videoRef.current?.removeEventListener(\"play\", () => setIsPlaying(true));\n      videoRef.current?.removeEventListener(\"pause\", () => setIsPlaying(false));\n    };\n  }, []);\n\n  return {\n    currentTime,\n    duration,\n    buffered,\n    setCurrentTime,\n  };\n};\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useGetDuration = (ref: VideoRef) => {\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [duration, setDuration] = React.useState<number | null>(null);\n\n  React.useEffect(() => {\n    if (!ref?.current) return;\n    setIsLoading(true);\n\n    ref.current.addEventListener(\"loadedmetadata\", () => {\n      setDuration(ref.current?.duration ?? null);\n      setIsLoading(false);\n    });\n\n    ref.current.addEventListener(\"error\", () => {\n      setIsLoading(false);\n    });\n\n    return () => {\n      ref.current?.removeEventListener(\"loadedmetadata\", () => {});\n      ref.current?.removeEventListener(\"error\", () => {});\n    };\n  }, [ref?.current]);\n\n  return { duration, isLoading };\n};\n","function formatTime(time: number, type: \"h:mm:ss\" | \"mm:ss\" = \"mm:ss\"): string {\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.floor(time % 60);\n  if (type === \"h:mm:ss\") {\n    const hours = Math.floor(minutes / 60);\n    return `${hours}:${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n  }\n  return `${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n}\n\nexport { formatTime };\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","React","jsx","VideoContext","useVideo","context","VideoProvider","children","videoRef","duration","showHidingElement","setShowHidingElement","fullscreen","setFullscreen","React","useAutoplayByForce","ref","enabled","setError","_a","error","retryError","React","useStartAt","ref","startAt","video","React","useAutoplayOnVisible","ref","threshold","enabled","observer","entries","entry","_a","error","React","usePlayPause","ref","enabled","isPlaying","setIsPlaying","togglePlay","handlePlay","handlePause","_a","_b","jsx","PlayPauseOnVideo","videoRef","useVideo","togglePlay","usePlayPause","React","React","useMuteUnmute","ref","enabled","isMuted","setIsMuted","toggleMute","handleVolumeChange","_a","React","useFullscreen","videoRef","isFullscreen","setIsFullscreen","useVideo","React","handleFullscreenChange","toggleFullscreen","_a","isSafari","video","videoContainer","React","usePictureInPicture","videoRef","isPictureInPicture","setIsPictureInPicture","useVideo","React","handlePictureInPictureChange","togglePictureInPicture","video","error","videoContainer","React","useSpeed","ref","enabled","speed","setSpeed","onChangeSpeed","FunctionChildren","React","children","ref","duration","showHidingElement","useVideo","togglePlay","isPlaying","usePlayPause","speed","onChangeSpeed","useSpeed","toggleMute","isMuted","useMuteUnmute","isFullscreen","toggleFullscreen","useFullscreen","isPictureInPicture","togglePictureInPicture","usePictureInPicture","React","jsx","HidingElement","React","children","className","props","videoRef","useVideo","isPlaying","usePlayPause","showHidingElement","setShowHidingElement","jsx","jsxs","VideoComponent","React","children","autoPlay","className","config","ratio","controls","pause","props","ref","duration","setDuration","error","setError","videoRef","showHidingElement","setShowHidingElement","timeoutRef","handleMouseEnter","_a","handleMouseLeave","handleMouseMove","_b","useAutoplayByForce","useStartAt","useAutoplayOnVisible","VideoProvider","_c","e","start","end","FunctionChildren","Video","PlayPauseOnVideo","HidingElement","React","useVolume","volume","setVolume","React","videoRef","useVideo","onChangeVolume","React","useTimeline","isPlaying","setIsPlaying","React","currentTime","setCurrentTime","buffered","setBuffered","videoRef","duration","useVideo","intervalId","_a","_b","React","useGetDuration","ref","isLoading","setIsLoading","duration","setDuration","_a","_b","formatTime","time","type","minutes","seconds"]}
+{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/video.tsx","../src/context.tsx","../src/hooks/use-start-at.tsx","../src/hooks/use-autoplay-on-visible.tsx","../src/hooks/use-play-pause.tsx","../src/components/play-pause-on-video.tsx","../src/function-children.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/hooks/use-speed.tsx","../src/components/hiding-element.tsx","../src/hooks/use-volume.tsx","../src/hooks/use-timeline.tsx","../src/hooks/use-get-duration.tsx","../src/utils.ts"],"sourcesContent":["\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}\\n\")","import React from \"react\";\n\n// 📦 Types\nimport type { VideoProps, VideoRef } from \"./types\";\n\n// 🔍 Context\nimport { VideoProvider } from \"./context\";\n\n// 🔗 Hooks\nimport { useAutoplayByForce } from \"./hooks/use-autoplay-by-force\";\nimport { useStartAt } from \"./hooks/use-start-at\";\nimport { useAutoplayOnVisible } from \"./hooks/use-autoplay-on-visible\";\n\n// 🔧 Components\nimport { PlayPauseOnVideo } from \"./components/play-pause-on-video\";\nimport { FunctionChildren } from \"./function-children\";\nimport { HidingElement, HidingElementProps } from \"./components/hiding-element\";\n\n/**\n * Main Video component structure\n * @param {VideoProps} props - Video component props\n */\n\nconst VideoComponent = React.forwardRef<\n  HTMLVideoElement,\n  VideoProps & { pause?: boolean }\n>(\n  (\n    { children, autoPlay, className, config, ratio, controls, pause, ...props },\n    ref\n  ) => {\n    const [duration, setDuration] = React.useState<number | null>(null);\n    const [error, setError] = React.useState<string | null>(null);\n\n    const videoRef = (ref as VideoRef) || React.useRef<VideoRef>(null);\n\n    const [showHidingElement, setShowHidingElement] = React.useState(false);\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n    const handleMouseEnter = () => {\n      if (videoRef.current?.paused) return;\n\n      setShowHidingElement(true);\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n    const handleMouseLeave = () => {\n      if (videoRef.current?.paused) return;\n\n      setShowHidingElement(false);\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n    const handleMouseMove = () => {\n      if (videoRef.current?.paused) return;\n\n      setShowHidingElement(true);\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(() => {\n        setShowHidingElement(false);\n      }, 3000);\n    };\n\n    React.useEffect(() => {\n      if (pause !== undefined) {\n        if (pause) {\n          videoRef.current?.pause();\n        } else {\n          videoRef.current?.play();\n        }\n      }\n    }, [pause, videoRef.current]);\n\n    useAutoplayByForce(\n      videoRef,\n      autoPlay === \"force\" &&\n        props.muted === undefined &&\n        !config?.autoplayOnVisible,\n      setError\n    );\n    useStartAt(videoRef, config?.startAt);\n    useAutoplayOnVisible(\n      videoRef,\n      typeof config?.autoplayOnVisible === \"number\"\n        ? config.autoplayOnVisible\n        : undefined,\n      config?.autoplayOnVisible\n    );\n\n    return (\n      <VideoProvider\n        videoRef={videoRef}\n        duration={duration}\n        showHidingElement={showHidingElement}\n        setShowHidingElement={setShowHidingElement}\n      >\n        <div\n          data-zuude-video-wrapper\n          className={className}\n          style={{ aspectRatio: ratio }}\n        >\n          <video\n            data-zuude-video\n            // @ts-ignore\n            ref={videoRef}\n            autoPlay={\n              config?.autoplayOnVisible\n                ? false\n                : autoPlay === \"force\"\n                  ? true\n                  : autoPlay\n            }\n            playsInline\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onMouseMove={handleMouseMove}\n            onClick={() => {\n              if (config?.clickToPlay) {\n                if (videoRef.current?.paused) {\n                  videoRef.current?.play();\n                } else {\n                  videoRef.current?.pause();\n                }\n              }\n            }}\n            onLoadedMetadata={(e) => {\n              console.log(\"loaded metadata\");\n              setDuration((e.target as HTMLVideoElement).duration);\n            }}\n            onTimeUpdate={(e) => {\n              /**\n               * If the current time is less than the start time, set the current time to the start time\n               * If the current time is greater than the end time, set the current time to the start time\n               */\n              if (config?.range) {\n                const [start, end] = config.range;\n\n                if (!videoRef?.current) return;\n\n                if (videoRef?.current?.currentTime < start) {\n                  videoRef.current.currentTime = start;\n                }\n\n                if (videoRef.current.currentTime > end) {\n                  videoRef.current.currentTime = start;\n                }\n              }\n            }}\n            className={className}\n            style={{ aspectRatio: ratio }}\n            {...props}\n          />\n          {typeof children === \"function\" ? (\n            <FunctionChildren ref={videoRef} children={children} />\n          ) : (\n            children\n          )}\n          {error === \"NotAllowedError\" &&\n            typeof config?.muteFallback === \"function\" &&\n            config.muteFallback(() => {\n              if (videoRef.current) {\n                videoRef.current.muted = !videoRef.current.muted;\n              }\n              setError(null);\n            })}\n        </div>\n      </VideoProvider>\n    );\n  }\n);\n\nVideoComponent.displayName = \"Video\";\n\n/**\n * Using compound components pattern\n */\nexport const Video = Object.assign(VideoComponent, {\n  PlayPauseOnVideo,\n  HidingElement: HidingElement as React.ComponentType<HidingElementProps>,\n});\n","import React from \"react\";\nimport type { VideoContextType } from \"./types.js\";\n\nconst VideoContext = React.createContext<VideoContextType | undefined>(\n  undefined\n);\n\nconst useVideo = () => {\n  const context = React.useContext(VideoContext);\n  if (!context) {\n    throw new Error(\"useVideo must be used within a VideoProvider\");\n  }\n  return context;\n};\n\ninterface VideoProviderProps extends VideoContextType {\n  children: React.ReactNode;\n}\n\nconst VideoProvider = ({\n  children,\n  videoRef,\n  duration,\n  showHidingElement,\n  setShowHidingElement,\n}: VideoProviderProps) => {\n  const [fullscreen, setFullscreen] = React.useState(false);\n\n  return (\n    <VideoContext.Provider\n      value={{\n        videoRef,\n        duration,\n        isFullscreen: fullscreen,\n        setIsFullscreen: setFullscreen,\n        showHidingElement,\n        setShowHidingElement,\n      }}\n    >\n      {children}\n    </VideoContext.Provider>\n  );\n};\n\nexport { useVideo, VideoProvider };\n","import React from \"react\";\nimport type { VideoConfig, VideoRef } from \"../types\";\n\nexport const useStartAt = (ref: VideoRef, startAt?: VideoConfig[\"startAt\"]) => {\n  React.useEffect(() => {\n    if (!ref?.current || !startAt) return;\n\n    const video = ref?.current;\n    if (video && startAt) {\n      video.currentTime = startAt;\n    }\n  }, [startAt, ref?.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useAutoplayOnVisible = (\n  ref: VideoRef,\n  threshold: number | undefined,\n  enabled: boolean | number | null | undefined\n) => {\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach((entry) => {\n          if (!ref?.current) return;\n\n          if (entry.isIntersecting) {\n            ref.current.play().catch((error) => {\n              if (!ref.current) return;\n\n              ref.current.pause();\n              ref.current.muted = true;\n              ref.current.play();\n              console.error(error);\n            });\n          } else {\n            ref.current?.pause();\n          }\n        });\n      },\n      { threshold: threshold ?? 0.5 }\n    );\n\n    observer.observe(ref?.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [enabled, ref?.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (ref: VideoRef, enabled: boolean) => {\n  const [isPlaying, setIsPlaying] = React.useState(false);\n\n  const togglePlay = React.useCallback(() => {\n    console.log(ref?.current);\n    if (ref?.current) {\n      ref.current.paused ? ref.current.play() : ref.current.pause();\n    }\n  }, [ref?.current]);\n\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    const handlePlay = () => {\n      setIsPlaying(true);\n    };\n    const handlePause = () => {\n      setIsPlaying(false);\n    };\n\n    setIsPlaying(!ref?.current.paused);\n\n    if (ref?.current) {\n      ref.current.addEventListener(\"play\", handlePlay);\n      ref.current.addEventListener(\"pause\", handlePause);\n\n      return () => {\n        ref.current?.removeEventListener(\"play\", handlePlay);\n        ref.current?.removeEventListener(\"pause\", handlePause);\n      };\n    }\n  }, [ref?.current, enabled]);\n\n  return { togglePlay, isPlaying };\n};\n","import { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport const PlayPauseOnVideo = () => {\n  const { videoRef } = useVideo();\n\n  const { togglePlay } = usePlayPause(videoRef, true);\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      }}\n      onClick={togglePlay}\n    ></div>\n  );\n};\n","import React from \"react\";\n\nimport type { VideoChildren, VideoRef } from \"./types\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useVideo } from \"./context\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\nimport { useSpeed } from \"./hooks/use-speed\";\n\nexport const FunctionChildren = React.forwardRef<\n  any,\n  {\n    children: VideoChildren;\n  }\n>(({ children }, ref) => {\n  const { duration, showHidingElement } = useVideo();\n\n  /**\n   * Only use these hooks if the children is a function\n   */\n  const { togglePlay, isPlaying } = usePlayPause(\n    ref as VideoRef,\n    typeof children === \"function\"\n  );\n  const { speed, onChangeSpeed } = useSpeed(\n    ref as VideoRef,\n    typeof children === \"function\"\n  );\n  const { toggleMute, isMuted } = useMuteUnmute(\n    ref as VideoRef,\n    typeof children === \"function\"\n  );\n  const { isFullscreen, toggleFullscreen } = useFullscreen();\n  const { isPictureInPicture, togglePictureInPicture } = usePictureInPicture();\n\n  if (typeof children !== \"function\") return null;\n\n  return children({\n    isPlaying,\n    togglePlay,\n    isMuted,\n    toggleMute,\n    speed,\n    onChangeSpeed,\n    isFullscreen,\n    toggleFullscreen,\n    isPictureInPicture,\n    togglePictureInPicture,\n    duration,\n    showHidingElement: showHidingElement ?? false,\n  });\n});\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (ref: VideoRef, enabled: boolean) => {\n  const [isMuted, setIsMuted] = React.useState(false);\n\n  const toggleMute = React.useCallback(() => {\n    if (ref?.current) {\n      ref.current.muted = !ref.current.muted;\n    }\n  }, [ref?.current]);\n\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    // Set the initial state\n    setIsMuted(ref.current.muted);\n\n    const handleVolumeChange = () => {\n      if (ref.current) {\n        setIsMuted(ref.current.muted);\n      }\n    };\n\n    ref.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n    return () => {\n      ref.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n    };\n  }, [ref?.current, enabled]);\n\n  return { toggleMute, isMuted };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useFullscreen = () => {\n  const { videoRef, isFullscreen, setIsFullscreen } = useVideo();\n\n  React.useEffect(() => {\n    const handleFullscreenChange = () => {\n      setIsFullscreen?.(!!document.fullscreenElement);\n    };\n\n    document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n    return () =>\n      document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n  }, []);\n\n  const toggleFullscreen = () => {\n    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n    const video = videoRef?.current;\n\n    if (video && isSafari) {\n      if ((video as any).webkitEnterFullscreen) {\n        (video as any).webkitEnterFullscreen();\n        return;\n      } else if (video.requestFullscreen) {\n        video.requestFullscreen();\n        return;\n      }\n    }\n\n    const videoContainer = videoRef?.current?.closest(\n      \"[data-zuude-video-wrapper]\"\n    ) as HTMLElement;\n\n    if (videoContainer) {\n      if (!isFullscreen) {\n        videoContainer.requestFullscreen();\n      } else {\n        document.exitFullscreen();\n      }\n    }\n  };\n\n  return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const usePictureInPicture = () => {\n  const { videoRef, isPictureInPicture, setIsPictureInPicture } = useVideo();\n\n  React.useEffect(() => {\n    const handlePictureInPictureChange = () => {\n      setIsPictureInPicture?.(!!document.pictureInPictureElement);\n    };\n\n    document.addEventListener(\n      \"pictureinpicturechange\",\n      handlePictureInPictureChange\n    );\n    return () =>\n      document.removeEventListener(\n        \"pictureinpicturechange\",\n        handlePictureInPictureChange\n      );\n  }, []);\n\n  const togglePictureInPicture = async () => {\n    const video = videoRef?.current;\n    if (!video) return;\n\n    try {\n      if (document.pictureInPictureElement) {\n        await document.exitPictureInPicture();\n      } else {\n        await video.requestPictureInPicture();\n      }\n    } catch (error) {\n      // Fallback for browsers that don't support PiP\n      const isSafari = /^((?!chrome|android).)*safari/i.test(\n        navigator.userAgent\n      );\n\n      if (isSafari) {\n        if ((video as any).webkitEnterFullscreen) {\n          (video as any).webkitEnterFullscreen();\n        } else if (video.requestFullscreen) {\n          video.requestFullscreen();\n        }\n      } else {\n        const videoContainer = video.closest(\n          \"[data-zuude-video-wrapper]\"\n        ) as HTMLElement;\n        if (videoContainer) {\n          if (!document.fullscreenElement) {\n            await videoContainer.requestFullscreen();\n          } else {\n            await document.exitFullscreen();\n          }\n        }\n      }\n    }\n  };\n\n  return {\n    isPictureInPicture: isPictureInPicture ?? false,\n    togglePictureInPicture,\n  };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSpeed = (ref: VideoRef, enabled: boolean) => {\n  const [speed, setSpeed] = React.useState(1);\n\n  const onChangeSpeed = (speed: number) => {\n    setSpeed(speed);\n  };\n\n  // Get the speed from the video element\n  React.useEffect(() => {\n    if (!ref?.current) return;\n    setSpeed(ref.current.playbackRate);\n  }, [ref?.current]);\n\n  React.useEffect(() => {\n    if (!enabled || !ref?.current) return;\n\n    ref.current.playbackRate = speed;\n  }, [speed, enabled, ref?.current]);\n\n  return { speed, onChangeSpeed };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport interface HidingElementProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const HidingElement = React.forwardRef<\n  HTMLDivElement,\n  HidingElementProps\n>(({ children, className, ...props }: HidingElementProps) => {\n  const { videoRef } = useVideo();\n  const { isPlaying } = usePlayPause(videoRef, true);\n  const { showHidingElement, setShowHidingElement } = useVideo();\n\n  return (\n    <div\n      data-zuude-hiding-element\n      data-show={!isPlaying || showHidingElement}\n      className={className}\n      onMouseEnter={() => {\n        setShowHidingElement?.(true);\n      }}\n      onMouseLeave={() => {\n        setShowHidingElement?.(false);\n      }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useVolume = () => {\n  const [volume, setVolume] = React.useState(100);\n  const { videoRef } = useVideo();\n\n  const onChangeVolume = (volume: number) => {\n    setVolume(volume);\n  };\n\n  // Get the volume from the video element\n  React.useEffect(() => {\n    if (!videoRef?.current) return;\n    setVolume(videoRef.current.volume * 100);\n  }, [videoRef?.current]);\n\n  React.useEffect(() => {\n    if (!videoRef?.current) return;\n\n    videoRef.current.volume = volume / 100;\n  }, [volume, videoRef?.current]);\n\n  return { volume, onChangeVolume };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useTimeline = () => {\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [buffered, setBuffered] = React.useState(0);\n\n  const { videoRef, duration } = useVideo();\n\n  React.useEffect(() => {\n    if (videoRef?.current && isPlaying) {\n      const intervalId = setInterval(() => {\n        setCurrentTime(videoRef.current?.currentTime || 0);\n\n        if (videoRef.current?.buffered.length) {\n          setBuffered(\n            videoRef.current.buffered.end(videoRef.current.buffered.length - 1)\n          );\n        }\n      }, 10);\n\n      return () => clearInterval(intervalId);\n    }\n  }, [videoRef?.current, isPlaying]);\n\n  React.useEffect(() => {\n    if (!videoRef?.current) return;\n\n    videoRef.current.addEventListener(\"play\", () => setIsPlaying(true));\n    videoRef.current.addEventListener(\"pause\", () => setIsPlaying(false));\n\n    return () => {\n      videoRef.current?.removeEventListener(\"play\", () => setIsPlaying(true));\n      videoRef.current?.removeEventListener(\"pause\", () => setIsPlaying(false));\n    };\n  }, []);\n\n  return {\n    currentTime,\n    duration,\n    buffered,\n    setCurrentTime,\n  };\n};\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useGetDuration = (ref: VideoRef) => {\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [duration, setDuration] = React.useState<number | null>(null);\n\n  React.useEffect(() => {\n    if (!ref?.current) return;\n    setIsLoading(true);\n\n    ref.current.addEventListener(\"loadedmetadata\", () => {\n      setDuration(ref.current?.duration ?? null);\n      setIsLoading(false);\n    });\n\n    ref.current.addEventListener(\"error\", () => {\n      setIsLoading(false);\n    });\n\n    return () => {\n      ref.current?.removeEventListener(\"loadedmetadata\", () => {});\n      ref.current?.removeEventListener(\"error\", () => {});\n    };\n  }, [ref?.current]);\n\n  return { duration, isLoading };\n};\n","function formatTime(time: number, type: \"h:mm:ss\" | \"mm:ss\" = \"mm:ss\"): string {\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.floor(time % 60);\n  if (type === \"h:mm:ss\") {\n    const hours = Math.floor(minutes / 60);\n    return `${hours}:${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n  }\n  return `${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n}\n\nexport { formatTime };\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","React","jsx","VideoContext","useVideo","context","VideoProvider","children","videoRef","duration","showHidingElement","setShowHidingElement","fullscreen","setFullscreen","React","useStartAt","ref","startAt","video","React","useAutoplayOnVisible","ref","threshold","enabled","observer","entries","entry","_a","error","React","usePlayPause","ref","enabled","isPlaying","setIsPlaying","togglePlay","handlePlay","handlePause","_a","_b","jsx","PlayPauseOnVideo","videoRef","useVideo","togglePlay","usePlayPause","React","React","useMuteUnmute","ref","enabled","isMuted","setIsMuted","toggleMute","handleVolumeChange","_a","React","useFullscreen","videoRef","isFullscreen","setIsFullscreen","useVideo","React","handleFullscreenChange","toggleFullscreen","_a","isSafari","video","videoContainer","React","usePictureInPicture","videoRef","isPictureInPicture","setIsPictureInPicture","useVideo","React","handlePictureInPictureChange","togglePictureInPicture","video","error","videoContainer","React","useSpeed","ref","enabled","speed","setSpeed","onChangeSpeed","FunctionChildren","React","children","ref","duration","showHidingElement","useVideo","togglePlay","isPlaying","usePlayPause","speed","onChangeSpeed","useSpeed","toggleMute","isMuted","useMuteUnmute","isFullscreen","toggleFullscreen","useFullscreen","isPictureInPicture","togglePictureInPicture","usePictureInPicture","React","jsx","HidingElement","React","children","className","props","videoRef","useVideo","isPlaying","usePlayPause","showHidingElement","setShowHidingElement","jsx","jsxs","VideoComponent","React","children","autoPlay","className","config","ratio","controls","pause","props","ref","duration","setDuration","error","setError","videoRef","showHidingElement","setShowHidingElement","timeoutRef","handleMouseEnter","_a","handleMouseLeave","handleMouseMove","_b","useAutoplayByForce","useStartAt","useAutoplayOnVisible","VideoProvider","_c","e","start","end","FunctionChildren","Video","PlayPauseOnVideo","HidingElement","React","useVolume","volume","setVolume","React","videoRef","useVideo","onChangeVolume","React","useTimeline","isPlaying","setIsPlaying","React","currentTime","setCurrentTime","buffered","setBuffered","videoRef","duration","useVideo","intervalId","_a","_b","React","useGetDuration","ref","isLoading","setIsLoading","duration","setDuration","_a","_b","formatTime","time","type","minutes","seconds"]}

package/dist/new/index.cjs

@@ -0,0 +1,2 @@
+"use strict";"use client";var O=Object.create;var m=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of H(t))!j.call(e,r)&&r!==o&&m(e,r,{get:()=>t[r],enumerable:!(i=M(t,r))||i.enumerable});return e};var b=(e,t,o)=>(o=e!=null?O(S(e)):{},h(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),F=e=>h(m({},"__esModule",{value:!0}),e);var G={};B(G,{Loading:()=>z,Pause:()=>q,Play:()=>I,Video:()=>v,VideoProvider:()=>w,useVideoState:()=>D});module.exports=F(G);var l=require("react"),P=require("react/jsx-runtime"),k=(0,l.createContext)(void 0),w=({children:e,config:t,onError:o,...i})=>{let[r,n]=(0,l.useState)(null),[c,d]=(0,l.useState)(null);return(0,l.useEffect)(()=>{o==null||o(c)},[c]),(0,P.jsx)(k.Provider,{value:{videoRef:r,setVideoRef:n,config:{clickToPlay:!0,...t},error:c,setError:d},children:(0,P.jsx)("div",{...i,children:e})})},f=()=>{let e=(0,l.useContext)(k);if(!e)throw new Error("useVideo must be used within a VideoProvider");return e};var s=require("react");var L=b(require("react"),1),T=(e,t,o)=>{L.default.useEffect(()=>{if(!(e!=null&&e.current)||!t)return;(async()=>{var r;try{await((r=e.current)==null?void 0:r.play())}catch(n){if(n instanceof Error&&n.name==="NotAllowedError"){if(o==null||o("NotAllowedError"),console.error("NotAllowedError"),e!=null&&e.current){e.current.muted=!0;try{await e.current.play()}catch(c){console.error(c)}}}else console.error(n)}})()},[t,e==null?void 0:e.current])};var u=require("react/jsx-runtime"),v=(0,s.forwardRef)(({src:e,autoPlay:t,muteFallback:o,...i},r)=>{let{videoRef:n,setVideoRef:c,config:d,setError:E,error:A}=f(),x=(0,s.useRef)(null);(0,s.useEffect)(()=>{let a=x.current,p=r;p?c(p):a&&c({current:a})},[e]),T(n,t==="force"&&i.muted===void 0,E);let N=()=>{var a,p,g;(a=n==null?void 0:n.current)!=null&&a.paused?(p=n.current)==null||p.play():(g=n==null?void 0:n.current)==null||g.pause()};return(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)("video",{ref:r||x,src:e,...i,onClick:d!=null&&d.clickToPlay?N:void 0}),A==="NotAllowedError"&&typeof o=="function"&&o(()=>{n!=null&&n.current&&(n.current.muted=!n.current.muted),E(null)})]})});v.displayName="Video";var R=b(require("react"),1),C=require("@radix-ui/react-slot");var V=require("react/jsx-runtime"),I=R.default.memo(({children:e,asChild:t,...o})=>{let i=t?C.Slot:"button",{videoRef:r}=f();return(0,V.jsx)(i,{...o,onClick:()=>{var c,d;(c=r==null?void 0:r.current)!=null&&c.paused&&((d=r.current)==null||d.play())},children:e})}),q=R.default.memo(({children:e,asChild:t,...o})=>{let i=t?C.Slot:"button",{videoRef:r}=f();return(0,V.jsx)(i,{...o,onClick:()=>{var c;r!=null&&r.current&&((c=r.current)==null||c.pause())},children:e})}),z=()=>(0,V.jsx)("div",{children:"Loading"});var y=require("react"),D=e=>{let[t,o]=(0,y.useState)(!1);return(0,y.useEffect)(()=>{let i=e.current;if(i)return i.addEventListener("play",()=>o(!0)),i.addEventListener("pause",()=>o(!1)),()=>{i.removeEventListener("play",()=>o(!0)),i.removeEventListener("pause",()=>o(!1))}},[e]),{isPlaying:t}};0&&(module.exports={Loading,Pause,Play,Video,VideoProvider,useVideoState});
+//# sourceMappingURL=index.cjs.map

package/dist/new/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/new/index.ts","../../src/new/wrapper.tsx","../../src/new/video.tsx","../../src/hooks/use-autoplay-by-force.tsx","../../src/new/components.tsx","../../src/new/hook.tsx"],"sourcesContent":["\"use client\";\n\nexport { VideoProvider } from \"./wrapper\";\nexport { Video } from \"./video\";\nexport * from \"./components\";\nexport * from \"./hook\";\n","import {\n  createContext,\n  RefObject,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport { VideoRef } from \"./types\";\n\ninterface VideoConfig {\n  config?: Partial<{\n    clickToPlay: boolean;\n  }>;\n}\n\ninterface VideoContextType extends VideoConfig {\n  videoRef: VideoRef | null;\n  setVideoRef: (video: VideoRef | null) => void;\n  error: string | null;\n  setError: (error: string | null) => void;\n}\n\nexport const VideoContext = createContext<VideoContextType | undefined>(\n  undefined\n);\n\ntype VideoProviderProps = React.ComponentProps<\"div\"> &\n  VideoConfig & {\n    children: React.ReactNode;\n    onError?: (error: string | null) => void;\n  };\n\nexport const VideoProvider = ({\n  children,\n  config,\n  onError,\n  ...props\n}: VideoProviderProps) => {\n  const [videoRef, setVideoRef] = useState<VideoRef | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  // Sending error to user if it exists\n  useEffect(() => {\n    onError?.(error);\n  }, [error]);\n\n  return (\n    <VideoContext.Provider\n      value={{\n        videoRef,\n        setVideoRef,\n        config: { clickToPlay: true, ...config },\n        error,\n        setError,\n      }}\n    >\n      <div {...props}>{children}</div>\n    </VideoContext.Provider>\n  );\n};\n\nexport const useVideo = () => {\n  const context = useContext(VideoContext);\n  if (!context) {\n    throw new Error(\"useVideo must be used within a VideoProvider\");\n  }\n  return context;\n};\n","import React, { forwardRef, RefObject, useEffect, useRef } from \"react\";\nimport { useVideo } from \"./wrapper\";\nimport { VideoAutoplay } from \"./types\";\nimport { useAutoplayByForce } from \"../hooks/use-autoplay-by-force\";\n\ninterface Props extends Omit<React.ComponentProps<\"video\">, \"autoPlay\"> {\n  src: string;\n  autoPlay?: VideoAutoplay;\n  muteFallback?: (onMute: () => void) => React.ReactNode;\n}\n\nexport const Video = forwardRef<HTMLVideoElement, Props>(\n  ({ src, autoPlay, muteFallback, ...props }, ref) => {\n    const { videoRef, setVideoRef, config, setError, error } = useVideo();\n\n    const refVideo = useRef<HTMLVideoElement>(null);\n\n    useEffect(() => {\n      const video = refVideo.current;\n      const thirdPartyRef = ref;\n\n      if (thirdPartyRef) {\n        setVideoRef(thirdPartyRef as RefObject<HTMLVideoElement>);\n      } else {\n        if (video) {\n          setVideoRef({ current: video });\n        }\n      }\n    }, [src]);\n\n    useAutoplayByForce(\n      videoRef,\n      autoPlay === \"force\" && props.muted === undefined,\n      setError\n    );\n\n    const onPlay = () => {\n      if (videoRef?.current?.paused) {\n        videoRef.current?.play();\n      } else {\n        videoRef?.current?.pause();\n      }\n    };\n\n    return (\n      <>\n        <video\n          ref={ref || refVideo}\n          src={src}\n          {...props}\n          onClick={config?.clickToPlay ? onPlay : undefined}\n        />\n\n        {error === \"NotAllowedError\" &&\n          typeof muteFallback === \"function\" &&\n          muteFallback(() => {\n            if (videoRef?.current) {\n              videoRef.current.muted = !videoRef.current.muted;\n            }\n            setError(null);\n          })}\n      </>\n    );\n  }\n);\n\nVideo.displayName = \"Video\";\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (\n  ref: VideoRef | null,\n  enabled: boolean,\n  setError?: (error: string | null) => void\n) => {\n  React.useEffect(() => {\n    if (!ref?.current || !enabled) return;\n\n    const playVideo = async () => {\n      try {\n        await ref.current?.play();\n      } catch (error) {\n        // If autoplay fails, try muting and playing again\n        if (error instanceof Error && error.name === \"NotAllowedError\") {\n          setError?.(\"NotAllowedError\");\n          console.error(\"NotAllowedError\");\n          if (ref?.current) {\n            ref.current.muted = true;\n            try {\n              await ref.current.play();\n            } catch (retryError) {\n              console.error(retryError);\n            }\n          }\n        } else {\n          console.error(error);\n        }\n      }\n    };\n\n    playVideo();\n  }, [enabled, ref?.current]);\n};\n","import React from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useVideo } from \"./wrapper\";\n\ninterface Props extends React.ComponentProps<\"button\"> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nconst Play = React.memo(({ children, asChild, ...props }: Props) => {\n  const Element = asChild ? Slot : \"button\";\n  const { videoRef } = useVideo();\n\n  const handleClick = () => {\n    if (videoRef?.current?.paused) {\n      videoRef.current?.play();\n    }\n  };\n\n  return (\n    <Element {...props} onClick={handleClick}>\n      {children}\n    </Element>\n  );\n});\n\nconst Pause = React.memo(({ children, asChild, ...props }: Props) => {\n  const Element = asChild ? Slot : \"button\";\n  const { videoRef } = useVideo();\n\n  const handleClick = () => {\n    if (videoRef?.current) {\n      videoRef.current?.pause();\n    }\n  };\n\n  return (\n    <Element {...props} onClick={handleClick}>\n      {children}\n    </Element>\n  );\n});\n\nconst Loading = () => {\n  return <div>Loading</div>;\n};\n\nexport { Play, Pause, Loading };\n","import { RefObject, useEffect, useState } from \"react\";\n\nconst useVideoState = (videoRef: RefObject<HTMLVideoElement | null>) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (video) {\n      video.addEventListener(\"play\", () => setIsPlaying(true));\n      video.addEventListener(\"pause\", () => setIsPlaying(false));\n\n      return () => {\n        video.removeEventListener(\"play\", () => setIsPlaying(true));\n        video.removeEventListener(\"pause\", () => setIsPlaying(false));\n      };\n    }\n  }, [videoRef]);\n\n  return { isPlaying };\n};\n\nexport { useVideoState };\n"],"mappings":"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","names":["new_exports","__export","Loading","Pause","Play","Video","VideoProvider","useVideoState","__toCommonJS","import_react","import_jsx_runtime","VideoContext","VideoProvider","children","config","onError","props","videoRef","setVideoRef","error","setError","useVideo","context","import_react","import_react","useAutoplayByForce","ref","enabled","setError","React","_a","error","retryError","import_jsx_runtime","Video","src","autoPlay","muteFallback","props","ref","videoRef","setVideoRef","config","setError","error","useVideo","refVideo","video","thirdPartyRef","useAutoplayByForce","onPlay","_a","_b","_c","import_react","import_react_slot","import_jsx_runtime","Play","React","children","asChild","props","Element","videoRef","useVideo","_a","_b","Pause","Loading","import_react","useVideoState","videoRef","isPlaying","setIsPlaying","video"]}

package/dist/new/index.d.cts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { RefObject } from 'react';
+
+type VideoAutoplay = boolean | "force";
+
+interface VideoConfig {
+    config?: Partial<{
+        clickToPlay: boolean;
+    }>;
+}
+type VideoProviderProps = React.ComponentProps<"div"> & VideoConfig & {
+    children: React.ReactNode;
+    onError?: (error: string | null) => void;
+};
+declare const VideoProvider: ({ children, config, onError, ...props }: VideoProviderProps) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 extends Omit<React$1.ComponentProps<"video">, "autoPlay"> {
+    src: string;
+    autoPlay?: VideoAutoplay;
+    muteFallback?: (onMute: () => void) => React$1.ReactNode;
+}
+declare const Video: React$1.ForwardRefExoticComponent<Omit<Props$1, "ref"> & React$1.RefAttributes<HTMLVideoElement>>;
+
+interface Props extends React$1.ComponentProps<"button"> {
+    children: React$1.ReactNode;
+    asChild?: boolean;
+}
+declare const Play: React$1.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
+declare const Pause: React$1.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
+declare const Loading: () => react_jsx_runtime.JSX.Element;
+
+declare const useVideoState: (videoRef: RefObject<HTMLVideoElement | null>) => {
+    isPlaying: boolean;
+};
+
+export { Loading, Pause, Play, Video, VideoProvider, useVideoState };

package/dist/new/index.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { RefObject } from 'react';
+
+type VideoAutoplay = boolean | "force";
+
+interface VideoConfig {
+    config?: Partial<{
+        clickToPlay: boolean;
+    }>;
+}
+type VideoProviderProps = React.ComponentProps<"div"> & VideoConfig & {
+    children: React.ReactNode;
+    onError?: (error: string | null) => void;
+};
+declare const VideoProvider: ({ children, config, onError, ...props }: VideoProviderProps) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 extends Omit<React$1.ComponentProps<"video">, "autoPlay"> {
+    src: string;
+    autoPlay?: VideoAutoplay;
+    muteFallback?: (onMute: () => void) => React$1.ReactNode;
+}
+declare const Video: React$1.ForwardRefExoticComponent<Omit<Props$1, "ref"> & React$1.RefAttributes<HTMLVideoElement>>;
+
+interface Props extends React$1.ComponentProps<"button"> {
+    children: React$1.ReactNode;
+    asChild?: boolean;
+}
+declare const Play: React$1.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
+declare const Pause: React$1.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
+declare const Loading: () => react_jsx_runtime.JSX.Element;
+
+declare const useVideoState: (videoRef: RefObject<HTMLVideoElement | null>) => {
+    isPlaying: boolean;
+};
+
+export { Loading, Pause, Play, Video, VideoProvider, useVideoState };

package/dist/new/index.js

@@ -0,0 +1,2 @@
+"use client";import{a as V}from"../chunk-WLYC6MHJ.js";import{createContext as b,useContext as h,useEffect as k,useState as P}from"react";import{jsx as y}from"react/jsx-runtime";var v=b(void 0),L=({children:t,config:d,onError:o,...r})=>{let[n,e]=P(null),[i,s]=P(null);return k(()=>{o==null||o(i)},[i]),y(v.Provider,{value:{videoRef:n,setVideoRef:e,config:{clickToPlay:!0,...d},error:i,setError:s},children:y("div",{...r,children:t})})},u=()=>{let t=h(v);if(!t)throw new Error("useVideo must be used within a VideoProvider");return t};import{forwardRef as T,useEffect as O,useRef as w}from"react";import{Fragment as N,jsx as M,jsxs as A}from"react/jsx-runtime";var C=T(({src:t,autoPlay:d,muteFallback:o,...r},n)=>{let{videoRef:e,setVideoRef:i,config:s,setError:f,error:E}=u(),p=w(null);O(()=>{let c=p.current,l=n;l?i(l):c&&i({current:c})},[t]),V(e,d==="force"&&r.muted===void 0,f);let g=()=>{var c,l,m;(c=e==null?void 0:e.current)!=null&&c.paused?(l=e.current)==null||l.play():(m=e==null?void 0:e.current)==null||m.pause()};return A(N,{children:[M("video",{ref:n||p,src:t,...r,onClick:s!=null&&s.clickToPlay?g:void 0}),E==="NotAllowedError"&&typeof o=="function"&&o(()=>{e!=null&&e.current&&(e.current.muted=!e.current.muted),f(null)})]})});C.displayName="Video";import R from"react";import{Slot as x}from"@radix-ui/react-slot";import{jsx as a}from"react/jsx-runtime";var Y=R.memo(({children:t,asChild:d,...o})=>{let r=d?x:"button",{videoRef:n}=u();return a(r,{...o,onClick:()=>{var i,s;(i=n==null?void 0:n.current)!=null&&i.paused&&((s=n.current)==null||s.play())},children:t})}),Z=R.memo(({children:t,asChild:d,...o})=>{let r=d?x:"button",{videoRef:n}=u();return a(r,{...o,onClick:()=>{var i;n!=null&&n.current&&((i=n.current)==null||i.pause())},children:t})}),_=()=>a("div",{children:"Loading"});import{useEffect as H,useState as S}from"react";var re=t=>{let[d,o]=S(!1);return H(()=>{let r=t.current;if(r)return r.addEventListener("play",()=>o(!0)),r.addEventListener("pause",()=>o(!1)),()=>{r.removeEventListener("play",()=>o(!0)),r.removeEventListener("pause",()=>o(!1))}},[t]),{isPlaying:d}};export{_ as Loading,Z as Pause,Y as Play,C as Video,L as VideoProvider,re as useVideoState};
+//# sourceMappingURL=index.js.map

package/dist/new/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/new/wrapper.tsx","../../src/new/video.tsx","../../src/new/components.tsx","../../src/new/hook.tsx"],"sourcesContent":["import {\n  createContext,\n  RefObject,\n  useContext,\n  useEffect,\n  useState,\n} from \"react\";\nimport { VideoRef } from \"./types\";\n\ninterface VideoConfig {\n  config?: Partial<{\n    clickToPlay: boolean;\n  }>;\n}\n\ninterface VideoContextType extends VideoConfig {\n  videoRef: VideoRef | null;\n  setVideoRef: (video: VideoRef | null) => void;\n  error: string | null;\n  setError: (error: string | null) => void;\n}\n\nexport const VideoContext = createContext<VideoContextType | undefined>(\n  undefined\n);\n\ntype VideoProviderProps = React.ComponentProps<\"div\"> &\n  VideoConfig & {\n    children: React.ReactNode;\n    onError?: (error: string | null) => void;\n  };\n\nexport const VideoProvider = ({\n  children,\n  config,\n  onError,\n  ...props\n}: VideoProviderProps) => {\n  const [videoRef, setVideoRef] = useState<VideoRef | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  // Sending error to user if it exists\n  useEffect(() => {\n    onError?.(error);\n  }, [error]);\n\n  return (\n    <VideoContext.Provider\n      value={{\n        videoRef,\n        setVideoRef,\n        config: { clickToPlay: true, ...config },\n        error,\n        setError,\n      }}\n    >\n      <div {...props}>{children}</div>\n    </VideoContext.Provider>\n  );\n};\n\nexport const useVideo = () => {\n  const context = useContext(VideoContext);\n  if (!context) {\n    throw new Error(\"useVideo must be used within a VideoProvider\");\n  }\n  return context;\n};\n","import React, { forwardRef, RefObject, useEffect, useRef } from \"react\";\nimport { useVideo } from \"./wrapper\";\nimport { VideoAutoplay } from \"./types\";\nimport { useAutoplayByForce } from \"../hooks/use-autoplay-by-force\";\n\ninterface Props extends Omit<React.ComponentProps<\"video\">, \"autoPlay\"> {\n  src: string;\n  autoPlay?: VideoAutoplay;\n  muteFallback?: (onMute: () => void) => React.ReactNode;\n}\n\nexport const Video = forwardRef<HTMLVideoElement, Props>(\n  ({ src, autoPlay, muteFallback, ...props }, ref) => {\n    const { videoRef, setVideoRef, config, setError, error } = useVideo();\n\n    const refVideo = useRef<HTMLVideoElement>(null);\n\n    useEffect(() => {\n      const video = refVideo.current;\n      const thirdPartyRef = ref;\n\n      if (thirdPartyRef) {\n        setVideoRef(thirdPartyRef as RefObject<HTMLVideoElement>);\n      } else {\n        if (video) {\n          setVideoRef({ current: video });\n        }\n      }\n    }, [src]);\n\n    useAutoplayByForce(\n      videoRef,\n      autoPlay === \"force\" && props.muted === undefined,\n      setError\n    );\n\n    const onPlay = () => {\n      if (videoRef?.current?.paused) {\n        videoRef.current?.play();\n      } else {\n        videoRef?.current?.pause();\n      }\n    };\n\n    return (\n      <>\n        <video\n          ref={ref || refVideo}\n          src={src}\n          {...props}\n          onClick={config?.clickToPlay ? onPlay : undefined}\n        />\n\n        {error === \"NotAllowedError\" &&\n          typeof muteFallback === \"function\" &&\n          muteFallback(() => {\n            if (videoRef?.current) {\n              videoRef.current.muted = !videoRef.current.muted;\n            }\n            setError(null);\n          })}\n      </>\n    );\n  }\n);\n\nVideo.displayName = \"Video\";\n","import React from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useVideo } from \"./wrapper\";\n\ninterface Props extends React.ComponentProps<\"button\"> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nconst Play = React.memo(({ children, asChild, ...props }: Props) => {\n  const Element = asChild ? Slot : \"button\";\n  const { videoRef } = useVideo();\n\n  const handleClick = () => {\n    if (videoRef?.current?.paused) {\n      videoRef.current?.play();\n    }\n  };\n\n  return (\n    <Element {...props} onClick={handleClick}>\n      {children}\n    </Element>\n  );\n});\n\nconst Pause = React.memo(({ children, asChild, ...props }: Props) => {\n  const Element = asChild ? Slot : \"button\";\n  const { videoRef } = useVideo();\n\n  const handleClick = () => {\n    if (videoRef?.current) {\n      videoRef.current?.pause();\n    }\n  };\n\n  return (\n    <Element {...props} onClick={handleClick}>\n      {children}\n    </Element>\n  );\n});\n\nconst Loading = () => {\n  return <div>Loading</div>;\n};\n\nexport { Play, Pause, Loading };\n","import { RefObject, useEffect, useState } from \"react\";\n\nconst useVideoState = (videoRef: RefObject<HTMLVideoElement | null>) => {\n  const [isPlaying, setIsPlaying] = useState(false);\n\n  useEffect(() => {\n    const video = videoRef.current;\n\n    if (video) {\n      video.addEventListener(\"play\", () => setIsPlaying(true));\n      video.addEventListener(\"pause\", () => setIsPlaying(false));\n\n      return () => {\n        video.removeEventListener(\"play\", () => setIsPlaying(true));\n        video.removeEventListener(\"pause\", () => setIsPlaying(false));\n      };\n    }\n  }, [videoRef]);\n\n  return { isPlaying };\n};\n\nexport { useVideoState };\n"],"mappings":"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","names":["createContext","useContext","useEffect","useState","jsx","VideoContext","VideoProvider","children","config","onError","props","videoRef","setVideoRef","error","setError","useVideo","context","forwardRef","useEffect","useRef","Fragment","jsx","jsxs","Video","forwardRef","src","autoPlay","muteFallback","props","ref","videoRef","setVideoRef","config","setError","error","useVideo","refVideo","useRef","useEffect","video","thirdPartyRef","useAutoplayByForce","onPlay","_a","_b","_c","React","Slot","jsx","Play","React","children","asChild","props","Element","Slot","videoRef","useVideo","_a","_b","Pause","Loading","useEffect","useState","useVideoState","videoRef","isPlaying","setIsPlaying","video"]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.3585",
+  "version": "0.1.3587",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,6 +11,18 @@
     "dist/**"
   ],
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.cjs",
+      "require": "./dist/index.js"
+    },
+    "./new": {
+      "types": "./dist/new/index.d.ts",
+      "import": "./dist/new/index.cjs",
+      "require": "./dist/new/index.js"
+    }
+  },
   "scripts": {
     "build": "tsup",
     "lint": "tsc"