@zuude-ui/video 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +4 -1
  4. package/dist/index.d.ts +4 -1
  5. package/dist/index.js +1 -1
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var J=Object.create;var S=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var _=(t,r)=>{for(var e in r)S(t,e,{get:r[e],enumerable:!0})},K=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of X(r))!Z.call(t,n)&&n!==e&&S(t,n,{get:()=>r[n],enumerable:!(s=Q(r,n))||s.enumerable});return t};var E=(t,r,e)=>(e=t!=null?J(Y(t)):{},K(r||!t||!t.__esModule?S(e,"default",{value:t,enumerable:!0}):e,t)),$=t=>K(S({},"__esModule",{value:!0}),t);var lt={};_(lt,{Controls:()=>v,ExitFullscreen:()=>ot,Fullscreen:()=>st,Loading:()=>ut,Mute:()=>rt,Pause:()=>tt,Play:()=>R,SeekBackward:()=>ct,SeekForward:()=>nt,Unmute:()=>et,Video:()=>N,VideoProvider:()=>B});module.exports=$(lt);var u=E(require("react"),1),A=require("react/jsx-runtime"),f=(0,u.createContext)(null),B=u.default.memo(({children:t,config:r,onError:e,...s})=>{let[n,c]=(0,u.useState)({current:null}),[o,l]=(0,u.useState)(null),[i,P]=(0,u.useState)(!1),M=(0,u.useRef)(null);return(0,u.useEffect)(()=>{e==null||e(o)},[o]),(0,u.useEffect)(()=>{if(i){let T=I=>{var H;(H=M.current)!=null&&H.contains(I.target)||P(!1)};return document.addEventListener("click",T),()=>{document.removeEventListener("click",T)}}},[i]),console.log("VideoProvider"),(0,A.jsx)(f.Provider,{value:{videoRef:n,setVideoRef:c,config:{clickToPlay:!0,...r},error:o,setError:l,isFocused:i,setIsFocused:P},children:(0,A.jsx)("div",{ref:M,"data-zuude-video-wrapper":!0,onClick:()=>P(!0),...s,children:t})})}),a=()=>{let t=(0,u.useContext)(f);if(!t)throw new Error("useVideo must be used within a VideoProvider");return t};var C=require("react");var U=E(require("react"),1),z=(t,r,e)=>{U.default.useEffect(()=>{if(!(t!=null&&t.current)||!r)return;(async()=>{var n;try{await((n=t.current)==null?void 0:n.play())}catch(c){if(c instanceof Error&&c.name==="NotAllowedError"){if(e==null||e("NotAllowedError"),console.error("NotAllowedError"),t!=null&&t.current){t.current.muted=!0;try{await t.current.play()}catch(o){console.error(o)}}}else console.error(c)}})()},[r,t==null?void 0:t.current])};var D=require("react"),V=(t,r,e=!0)=>{let s=n=>{n.preventDefault(),n.key===t&&r(n)};(0,D.useEffect)(()=>{if(e)return document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)}},[t,r,e])};var O=E(require("react"),1),F=(t,r=10)=>{let e=O.default.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime+=r)},[t==null?void 0:t.current]),s=O.default.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime-=r)},[t==null?void 0:t.current]);return{seekForward:e,seekBackward:s}};var k=E(require("react"),1),x=t=>{let[r,e]=k.default.useState(!1),s=k.default.useCallback(()=>{t!=null&&t.current&&(t.current.paused?t.current.play():t.current.pause())},[t==null?void 0:t.current]),n=k.default.useCallback(()=>{t!=null&&t.current&&t.current.play()},[t==null?void 0:t.current]),c=k.default.useCallback(()=>{t!=null&&t.current&&t.current.pause()},[t==null?void 0:t.current]);return k.default.useEffect(()=>{if(!(t!=null&&t.current))return;let o=()=>{e(!0)},l=()=>{e(!1)};if(e(!(t!=null&&t.current.paused)),t!=null&&t.current)return t.current.addEventListener("play",o),t.current.addEventListener("pause",l),()=>{var i,P;(i=t.current)==null||i.removeEventListener("play",o),(P=t.current)==null||P.removeEventListener("pause",l)}},[t==null?void 0:t.current]),{togglePlay:s,isPlaying:r,play:n,pause:c}};var b=E(require("react"),1),h=t=>{let[r,e]=b.default.useState(!1),s=b.default.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!t.current.muted)},[t==null?void 0:t.current]),n=b.default.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!0)},[t==null?void 0:t.current]),c=b.default.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!1)},[t==null?void 0:t.current]);return b.default.useEffect(()=>{if(!(t!=null&&t.current))return;e(t.current.muted);let o=()=>{t.current&&e(t.current.muted)};return t.current.addEventListener("volumechange",o),()=>{var l;(l=t.current)==null||l.removeEventListener("volumechange",o)}},[t==null?void 0:t.current]),{toggleMute:s,isMuted:r,mute:n,unmute:c}};var q=E(require("react"),1),L=t=>{let[r,e]=q.default.useState(!1);q.default.useEffect(()=>{let n=()=>{e==null||e(!!document.fullscreenElement),s()};return document.addEventListener("fullscreenchange",n),()=>document.removeEventListener("fullscreenchange",n)},[r]);let s=()=>{console.log("toggleFullscreen");let n=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),c=t==null?void 0:t.current;if(c&&n){if(c.webkitEnterFullscreen){c.webkitEnterFullscreen();return}else if(c.requestFullscreen){c.requestFullscreen();return}}let o=c==null?void 0:c.closest("[data-zuude-video-wrapper]");o&&(r?(document.exitFullscreen(),c&&(c.style.objectFit="cover")):(o.requestFullscreen(),c&&(c.style.objectFit="contain")))};return{isFullscreen:r!=null?r:!1,toggleFullscreen:s}};var W=t=>({togglePictureInPicture:async()=>{let n=t==null?void 0:t.current;if(n)try{document.pictureInPictureElement?await document.exitPictureInPicture():await n.requestPictureInPicture()}catch(c){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))n.webkitEnterFullscreen?n.webkitEnterFullscreen():n.requestFullscreen&&n.requestFullscreen();else{let l=n.closest("[data-zuude-video-wrapper]");l&&(document.fullscreenElement?await document.exitFullscreen():await l.requestFullscreen())}}},requestPictureInPicture:async()=>{let n=t==null?void 0:t.current;n&&await n.requestPictureInPicture()},exitPictureInPicture:async()=>{t!=null&&t.current&&await document.exitPictureInPicture()}});var G=()=>{let{videoRef:t}=a(),{seekForward:r,seekBackward:e}=F(t),{togglePlay:s}=x(t),{toggleMute:n}=h(t),{toggleFullscreen:c}=L(t),{togglePictureInPicture:o}=W(t);return V("ArrowRight",()=>{r()}),V("ArrowLeft",()=>{e()}),V(" ",()=>{s()}),V("m",()=>{n()}),V("f",()=>{c()}),V("p",()=>{o()}),null};var g=require("react/jsx-runtime"),N=(0,C.forwardRef)(({src:t,autoPlay:r,muteFallback:e,controls:s,...n},c)=>{let{videoRef:o,setVideoRef:l,config:i,setError:P,error:M,isFocused:T}=a(),I=(0,C.useRef)(null);(0,C.useEffect)(()=>{let d=I.current,w=c;w?l(w):d&&l({current:d})},[t]),z(o,r==="force"&&n.muted===void 0,P);let H=()=>{var d,w,j;(d=o==null?void 0:o.current)!=null&&d.paused?(w=o.current)==null||w.play():(j=o==null?void 0:o.current)==null||j.pause()};return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)("video",{ref:c||I,src:t,onClick:i!=null&&i.clickToPlay?H:void 0,autoPlay:r==="force"?!0:r,...n}),s&&T&&(0,g.jsx)(G,{}),M==="NotAllowedError"&&typeof e=="function"&&e(()=>{o!=null&&o.current&&(o.current.muted=!o.current.muted),P(null)})]})});N.displayName="Video";var p=E(require("react"),1),y=require("@radix-ui/react-slot");var m=require("react/jsx-runtime"),v=p.default.memo(({children:t,asChild:r,...e})=>(0,m.jsx)("div",{...e,children:t})),R=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{play:c}=x(n);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),tt=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{pause:c}=x(n);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),rt=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{mute:c}=h(n);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),et=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{unmute:c}=h(n);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),nt=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{seekForward:c}=F(n,10);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),ct=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{seekBackward:c}=F(n,10);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),st=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{toggleFullscreen:c}=L(n);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),ot=p.default.memo(({children:t,asChild:r,...e})=>{let s=r?y.Slot:"button",{videoRef:n}=a(),{toggleFullscreen:c}=L(n);return(0,m.jsx)(s,{...e,onClick:c,children:t})}),ut=()=>(0,m.jsx)("div",{children:"Loading"});0&&(module.exports={Controls,ExitFullscreen,Fullscreen,Loading,Mute,Pause,Play,SeekBackward,SeekForward,Unmute,Video,VideoProvider});
1
+ "use strict";"use client";var $=Object.create;var q=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var tt=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var rt=(t,e)=>{for(var r in e)q(t,r,{get:e[r],enumerable:!0})},W=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of R(e))!et.call(t,n)&&n!==r&&q(t,n,{get:()=>e[n],enumerable:!(o=v(e,n))||o.enumerable});return t};var w=(t,e,r)=>(r=t!=null?$(tt(t)):{},W(e||!t||!t.__esModule?q(r,"default",{value:t,enumerable:!0}):r,t)),nt=t=>W(q({},"__esModule",{value:!0}),t);var Et={};rt(Et,{Controls:()=>st,ExitFullscreen:()=>pt,Fullscreen:()=>mt,Loading:()=>dt,Mute:()=>ct,Pause:()=>ut,Play:()=>ot,SeekBackward:()=>it,SeekForward:()=>at,Shadow:()=>yt,Unmute:()=>lt,Video:()=>z,VideoProvider:()=>J});module.exports=nt(Et);var l=w(require("react"),1),O=require("react/jsx-runtime"),G=(0,l.createContext)(null),J=l.default.memo(({children:t,config:e,onError:r,...o})=>{let[n,s]=(0,l.useState)({current:null}),[u,a]=(0,l.useState)(null),[p,P]=(0,l.useState)(!1),b=(0,l.useRef)(null);return(0,l.useEffect)(()=>{r==null||r(u)},[u]),(0,l.useEffect)(()=>{let i=b.current;if(i){let h=i.querySelectorAll("[data-zuude-hide-elements]"),d=i.querySelector("[data-zuude-video]");if(h){let c=null,k=3e3,C=!1,K=()=>{c&&(clearTimeout(c),c=null),c=setTimeout(()=>{C&&d&&!d.paused&&h.forEach(V=>{V.setAttribute("data-hidden","true")}),c=null},k)},H=()=>{C=!0,h.forEach(V=>{V.removeAttribute("data-hidden")}),K()},B=()=>{C=!1,c&&(clearTimeout(c),c=null),d&&!d.paused&&h.forEach(V=>{V.setAttribute("data-hidden","true")})},D=()=>{C&&(h.forEach(V=>{V.hasAttribute("data-hidden")&&V.removeAttribute("data-hidden")}),K())},U=()=>{C||h.forEach(V=>{V.setAttribute("data-hidden","true")})};return i.addEventListener("mouseenter",H),i.addEventListener("mouseleave",B),i.addEventListener("mousemove",D),d.addEventListener("pause",H),d.addEventListener("play",U),()=>{c&&clearTimeout(c),i.removeEventListener("mouseenter",H),i.removeEventListener("mouseleave",B),i.removeEventListener("mousemove",D),d.removeEventListener("pause",H),d.removeEventListener("play",U)}}}},[]),(0,l.useEffect)(()=>{if(p){let i=h=>{var d;(d=b.current)!=null&&d.contains(h.target)||P(!1)};return document.addEventListener("click",i),()=>{document.removeEventListener("click",i)}}},[p]),(0,O.jsx)(G.Provider,{value:{videoRef:n,setVideoRef:s,config:{clickToPlay:!0,...e},error:u,setError:a,isFocused:p,setIsFocused:P},children:(0,O.jsx)("div",{ref:b,"data-zuude-video-wrapper":!0,onClick:()=>P(!0),...o,children:t})})}),m=()=>{let t=(0,l.useContext)(G);if(!t)throw new Error("useVideo must be used within a VideoProvider");return t};var x=require("react");var Q=w(require("react"),1),X=(t,e,r)=>{Q.default.useEffect(()=>{if(!(t!=null&&t.current)||!e)return;(async()=>{var n;try{await((n=t.current)==null?void 0:n.play())}catch(s){if(s instanceof Error&&s.name==="NotAllowedError"){if(r==null||r("NotAllowedError"),console.error("NotAllowedError"),t!=null&&t.current){t.current.muted=!0;try{await t.current.play()}catch(u){console.error(u)}}}else console.error(s)}})()},[e,t==null?void 0:t.current])};var Y=require("react"),L=(t,e,r=!0)=>{let o=n=>{n.key===t&&(n.preventDefault(),e(n))};(0,Y.useEffect)(()=>{if(r)return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[t,e,r])};var N=w(require("react"),1),M=(t,e=10)=>{let r=N.default.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime+=e)},[t==null?void 0:t.current]),o=N.default.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime-=e)},[t==null?void 0:t.current]);return{seekForward:r,seekBackward:o}};var f=w(require("react"),1),I=t=>{let[e,r]=f.default.useState(!1),o=f.default.useCallback(()=>{t!=null&&t.current&&(t.current.paused?t.current.play():t.current.pause())},[t==null?void 0:t.current]),n=f.default.useCallback(()=>{t!=null&&t.current&&t.current.play()},[t==null?void 0:t.current]),s=f.default.useCallback(()=>{t!=null&&t.current&&t.current.pause()},[t==null?void 0:t.current]);return f.default.useEffect(()=>{if(!(t!=null&&t.current))return;let u=()=>{r(!0)},a=()=>{r(!1)};if(r(!(t!=null&&t.current.paused)),t!=null&&t.current)return t.current.addEventListener("play",u),t.current.addEventListener("pause",a),()=>{var p,P;(p=t.current)==null||p.removeEventListener("play",u),(P=t.current)==null||P.removeEventListener("pause",a)}},[t==null?void 0:t.current]),{togglePlay:o,isPlaying:e,play:n,pause:s}};var T=w(require("react"),1),A=t=>{let[e,r]=T.default.useState(!1),o=T.default.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!t.current.muted)},[t==null?void 0:t.current]),n=T.default.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!0)},[t==null?void 0:t.current]),s=T.default.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!1)},[t==null?void 0:t.current]);return T.default.useEffect(()=>{if(!(t!=null&&t.current))return;r(t.current.muted);let u=()=>{t.current&&r(t.current.muted)};return t.current.addEventListener("volumechange",u),()=>{var a;(a=t.current)==null||a.removeEventListener("volumechange",u)}},[t==null?void 0:t.current]),{toggleMute:o,isMuted:e,mute:n,unmute:s}};var j=w(require("react"),1),S=t=>{let[e,r]=j.default.useState(!1);j.default.useEffect(()=>{let n=()=>{r==null||r(!!document.fullscreenElement),o()};return document.addEventListener("fullscreenchange",n),()=>document.removeEventListener("fullscreenchange",n)},[e]);let o=()=>{console.log("toggleFullscreen");let n=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),s=t==null?void 0:t.current;if(s&&n){if(s.webkitEnterFullscreen){s.webkitEnterFullscreen();return}else if(s.requestFullscreen){s.requestFullscreen();return}}let u=s==null?void 0:s.closest("[data-zuude-video-wrapper]");u&&(e?(document.exitFullscreen(),s&&(s.style.objectFit="cover")):(u.requestFullscreen(),s&&(s.style.objectFit="contain")))};return{isFullscreen:e!=null?e:!1,toggleFullscreen:o}};var Z=t=>({togglePictureInPicture:async()=>{let n=t==null?void 0:t.current;if(n)try{document.pictureInPictureElement?await document.exitPictureInPicture():await n.requestPictureInPicture()}catch(s){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))n.webkitEnterFullscreen?n.webkitEnterFullscreen():n.requestFullscreen&&n.requestFullscreen();else{let a=n.closest("[data-zuude-video-wrapper]");a&&(document.fullscreenElement?await document.exitFullscreen():await a.requestFullscreen())}}},requestPictureInPicture:async()=>{let n=t==null?void 0:t.current;n&&await n.requestPictureInPicture()},exitPictureInPicture:async()=>{t!=null&&t.current&&await document.exitPictureInPicture()}});var _=()=>{let{videoRef:t}=m(),{seekForward:e,seekBackward:r}=M(t),{togglePlay:o}=I(t),{toggleMute:n}=A(t),{toggleFullscreen:s}=S(t),{togglePictureInPicture:u}=Z(t);return L("ArrowRight",()=>{e()}),L("ArrowLeft",()=>{r()}),L(" ",()=>{o()}),L("m",()=>{n()}),L("f",()=>{s()}),L("p",()=>{u()}),null};var F=require("react/jsx-runtime"),z=(0,x.forwardRef)(({src:t,autoPlay:e,muteFallback:r,controls:o,...n},s)=>{let{videoRef:u,setVideoRef:a,config:p,setError:P,error:b,isFocused:i}=m(),h=(0,x.useRef)(null);(0,x.useEffect)(()=>{let c=h.current,k=s;k?a(k):c&&a({current:c})},[t]),X(u,e==="force"&&n.muted===void 0,P);let d=()=>{var c,k,C;(c=u==null?void 0:u.current)!=null&&c.paused?(k=u.current)==null||k.play():(C=u==null?void 0:u.current)==null||C.pause()};return(0,F.jsxs)(F.Fragment,{children:[(0,F.jsx)("video",{ref:s||h,"data-zuude-video":!0,src:t,onClick:p!=null&&p.clickToPlay?d:void 0,autoPlay:e==="force"?!0:e,...n}),o&&i&&(0,F.jsx)(_,{}),b==="NotAllowedError"&&typeof r=="function"&&r(()=>{u!=null&&u.current&&(u.current.muted=!u.current.muted),P(null)})]})});z.displayName="Video";var E=w(require("react"),1),g=require("@radix-ui/react-slot");var y=require("react/jsx-runtime"),st=E.default.memo(({children:t,asChild:e,...r})=>(0,y.jsx)("div",{"data-zuude-hide-elements":!0,...r,children:t})),ot=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{play:s}=I(n);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),ut=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{pause:s}=I(n);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),ct=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{mute:s}=A(n);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),lt=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{unmute:s}=A(n);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),at=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{seekForward:s}=M(n,10);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),it=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{seekBackward:s}=M(n,10);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),mt=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{toggleFullscreen:s}=S(n);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),pt=E.default.memo(({children:t,asChild:e,...r})=>{let o=e?g.Slot:"button",{videoRef:n}=m(),{toggleFullscreen:s}=S(n);return(0,y.jsx)(o,{...r,onClick:s,children:t})}),dt=()=>(0,y.jsx)("div",{children:"Loading"}),yt=({...t})=>{let{videoRef:e}=m(),r=(0,E.useRef)(null);return E.default.useEffect(()=>{let o=e==null?void 0:e.current;if(r.current&&o){let n=0,s=!1,u=null,a=()=>{u&&clearInterval(u),u=setInterval(()=>{console.log("currentTime",o.currentTime),n=o.currentTime,r.current&&(r.current.currentTime=n)},100)},p=()=>{u&&(clearInterval(u),u=null)},P=()=>{s=!0,a()},b=()=>{s=!1,p()};return o.addEventListener("play",P),o.addEventListener("pause",b),()=>{p(),o.removeEventListener("play",P),o.removeEventListener("pause",b)}}},[e==null?void 0:e.current]),e!=null&&e.current?(0,y.jsx)("div",{...t,style:{...t.style,position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"},children:(0,y.jsx)("video",{ref:r,src:e.current.src,muted:!0,playsInline:!0,style:{width:"100%",height:"100%",objectFit:"cover"}})}):null};0&&(module.exports={Controls,ExitFullscreen,Fullscreen,Loading,Mute,Pause,Play,SeekBackward,SeekForward,Shadow,Unmute,Video,VideoProvider});
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/wrapper.tsx","../src/video.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-hot-keys.tsx","../src/hooks/use-seek.tsx","../src/hooks/use-play-pause.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/keyboard.tsx","../src/components.tsx"],"sourcesContent":["\"use client\";\n\nexport { VideoProvider } from \"./wrapper\";\nexport { Video } from \"./video\";\nexport * from \"./components\";\nexport * from \"./types\";\n","import React, {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { VideoRef } from \"./types\";\n\ninterface VideoConfig {\n config?: Partial<{\n clickToPlay: boolean;\n }>;\n}\n\ninterface VideoContextType extends VideoConfig {\n videoRef: VideoRef;\n setVideoRef: (video: VideoRef) => void;\n error: string | null;\n setError: (error: string | null) => void;\n isFocused: boolean;\n setIsFocused: (isFocused: boolean) => void;\n}\n\nexport const VideoContext = createContext<VideoContextType | null>(null);\n\ntype VideoProviderProps = Omit<React.ComponentProps<\"div\">, \"onError\"> &\n VideoConfig & {\n children: React.ReactNode;\n onError?: (error: string | null) => void;\n };\n\nexport const VideoProvider = React.memo(\n ({ children, config, onError, ...props }: VideoProviderProps) => {\n const [videoRef, setVideoRef] = useState<VideoRef>({ current: null });\n const [error, setError] = useState<string | null>(null);\n const [isFocused, setIsFocused] = useState(false);\n\n const videoWrapperRef = useRef<HTMLDivElement>(null);\n\n // Sending error to user if it exists\n useEffect(() => {\n onError?.(error);\n }, [error]);\n\n useEffect(() => {\n if (isFocused) {\n const handleClick = (event: MouseEvent) => {\n if (!videoWrapperRef.current?.contains(event.target as Node)) {\n setIsFocused(false);\n }\n };\n document.addEventListener(\"click\", handleClick);\n\n return () => {\n document.removeEventListener(\"click\", handleClick);\n };\n }\n }, [isFocused]);\n\n console.log(\"VideoProvider\");\n\n return (\n <VideoContext.Provider\n value={{\n videoRef,\n setVideoRef,\n config: { clickToPlay: true, ...config },\n error,\n setError,\n isFocused,\n setIsFocused,\n }}\n >\n <div\n ref={videoWrapperRef}\n data-zuude-video-wrapper\n onClick={() => setIsFocused(true)}\n {...props}\n >\n {children}\n </div>\n </VideoContext.Provider>\n );\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\";\nimport { Keyboards } from \"./keyboard\";\n\ninterface Props extends Omit<React.ComponentProps<\"video\">, \"autoPlay\"> {\n src: string;\n autoPlay?: VideoAutoplay;\n controls?: boolean;\n muteFallback?: (onMute: () => void) => React.ReactNode;\n}\n\nexport const Video = forwardRef<HTMLVideoElement, Props>(\n ({ src, autoPlay, muteFallback, controls, ...props }, ref) => {\n const { videoRef, setVideoRef, config, setError, error, isFocused } =\n 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 onClick={config?.clickToPlay ? onPlay : undefined}\n autoPlay={autoPlay === \"force\" ? true : autoPlay}\n {...props}\n />\n\n {controls && isFocused && <Keyboards />}\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 type { VideoRef } from \"../types\";\n\nexport const useAutoplayByForce = (\n videoRef: VideoRef,\n enabled: boolean,\n setError?: (error: string | null) => void\n) => {\n React.useEffect(() => {\n if (!videoRef?.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await videoRef.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 (videoRef?.current) {\n videoRef.current.muted = true;\n try {\n await videoRef.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, videoRef?.current]);\n};\n","import { useEffect } from \"react\";\n\nexport const useHotKeys = (\n key: string,\n func: (event: KeyboardEvent) => void,\n enabled = true\n) => {\n const handleKeyDown = (event: KeyboardEvent) => {\n event.preventDefault();\n if (event.key === key) {\n func(event);\n }\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [key, func, enabled]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSeek = (videoRef: VideoRef, value = 10) => {\n const seekForward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime += value;\n }\n }, [videoRef?.current]);\n\n const seekBackward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime -= value;\n }\n }, [videoRef?.current]);\n\n return { seekForward, seekBackward };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (videoRef: VideoRef) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.paused\n ? videoRef.current.play()\n : videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n const play = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.play();\n }\n }, [videoRef?.current]);\n\n const pause = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!videoRef?.current.paused);\n\n if (videoRef?.current) {\n videoRef.current.addEventListener(\"play\", handlePlay);\n videoRef.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n videoRef.current?.removeEventListener(\"play\", handlePlay);\n videoRef.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [videoRef?.current]);\n\n return { togglePlay, isPlaying, play, pause };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (videoRef: VideoRef) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = !videoRef.current.muted;\n }\n }, [videoRef?.current]);\n\n const mute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = true;\n }\n }, [videoRef?.current]);\n\n const unmute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = false;\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n // Set the initial state\n setIsMuted(videoRef.current.muted);\n\n const handleVolumeChange = () => {\n if (videoRef.current) {\n setIsMuted(videoRef.current.muted);\n }\n };\n\n videoRef.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n videoRef.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [videoRef?.current]);\n\n return { toggleMute, isMuted, mute, unmute };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nconst useFullscreen = (videoRef: VideoRef) => {\n const [isFullscreen, setIsFullscreen] = React.useState(false);\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n toggleFullscreen();\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, [isFullscreen]);\n\n const toggleFullscreen = () => {\n console.log(\"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 = video?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n if (video) {\n video.style.objectFit = \"contain\";\n }\n } else {\n document.exitFullscreen();\n if (video) {\n video.style.objectFit = \"cover\";\n }\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n\nexport { useFullscreen };\n","import type { VideoRef } from \"../types\";\n\nexport const usePictureInPicture = (videoRef: VideoRef) => {\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 const requestPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await video.requestPictureInPicture();\n };\n\n const exitPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await document.exitPictureInPicture();\n };\n\n return {\n togglePictureInPicture,\n requestPictureInPicture,\n exitPictureInPicture,\n };\n};\n","import { useVideo } from \"./wrapper\";\nimport { useHotKeys } from \"./hooks/use-hot-keys\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\n\nexport const Keyboards = () => {\n const { videoRef } = useVideo();\n\n const { seekForward, seekBackward } = useSeek(videoRef);\n const { togglePlay } = usePlayPause(videoRef);\n const { toggleMute } = useMuteUnmute(videoRef);\n const { toggleFullscreen } = useFullscreen(videoRef);\n const { togglePictureInPicture } = usePictureInPicture(videoRef);\n\n useHotKeys(\"ArrowRight\", () => {\n seekForward();\n });\n useHotKeys(\"ArrowLeft\", () => {\n seekBackward();\n });\n useHotKeys(\" \", () => {\n togglePlay();\n });\n useHotKeys(\"m\", () => {\n toggleMute();\n });\n useHotKeys(\"f\", () => {\n toggleFullscreen();\n });\n useHotKeys(\"p\", () => {\n togglePictureInPicture();\n });\n\n return null;\n};\n","import React, { RefObject } from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useVideo } from \"./wrapper\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\n\ninterface ControlsProps extends React.ComponentProps<\"div\"> {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\nconst Controls = React.memo(\n ({ children, asChild, ...props }: ControlsProps) => {\n return <div {...props}>{children}</div>;\n }\n);\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 { play } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={play}>\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 { pause } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={pause}>\n {children}\n </Element>\n );\n});\n\nconst Mute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { mute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={mute}>\n {children}\n </Element>\n );\n});\n\nconst Unmute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { unmute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={unmute}>\n {children}\n </Element>\n );\n});\n\nconst SeekForward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekForward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekForward}>\n {children}\n </Element>\n );\n});\n\nconst SeekBackward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekBackward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekBackward}>\n {children}\n </Element>\n );\n});\n\nconst Fullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst ExitFullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst Loading = () => {\n return <div>Loading</div>;\n};\n\nexport {\n Controls,\n Play,\n Pause,\n Mute,\n Unmute,\n SeekForward,\n SeekBackward,\n Fullscreen,\n ExitFullscreen,\n Loading,\n};\n"],"mappings":"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","names":["index_exports","__export","Controls","ExitFullscreen","Fullscreen","Loading","Mute","Pause","Play","SeekBackward","SeekForward","Unmute","Video","VideoProvider","__toCommonJS","import_react","import_jsx_runtime","VideoContext","VideoProvider","React","children","config","onError","props","videoRef","setVideoRef","error","setError","isFocused","setIsFocused","videoWrapperRef","handleClick","event","_a","useVideo","context","import_react","import_react","useAutoplayByForce","videoRef","enabled","setError","React","_a","error","retryError","import_react","useHotKeys","key","func","enabled","handleKeyDown","event","import_react","useSeek","videoRef","value","seekForward","React","seekBackward","import_react","usePlayPause","videoRef","isPlaying","setIsPlaying","React","togglePlay","play","pause","handlePlay","handlePause","_a","_b","import_react","useMuteUnmute","videoRef","isMuted","setIsMuted","React","toggleMute","mute","unmute","handleVolumeChange","_a","import_react","useFullscreen","videoRef","isFullscreen","setIsFullscreen","React","handleFullscreenChange","toggleFullscreen","isSafari","video","videoContainer","usePictureInPicture","videoRef","video","error","videoContainer","Keyboards","videoRef","useVideo","seekForward","seekBackward","useSeek","togglePlay","usePlayPause","toggleMute","useMuteUnmute","toggleFullscreen","useFullscreen","togglePictureInPicture","usePictureInPicture","useHotKeys","import_jsx_runtime","Video","src","autoPlay","muteFallback","controls","props","ref","videoRef","setVideoRef","config","setError","error","isFocused","useVideo","refVideo","video","thirdPartyRef","useAutoplayByForce","onPlay","_a","_b","_c","Keyboards","import_react","import_react_slot","import_jsx_runtime","Controls","React","children","asChild","props","Play","Element","videoRef","useVideo","play","usePlayPause","Pause","pause","Mute","mute","useMuteUnmute","Unmute","unmute","SeekForward","seekForward","useSeek","SeekBackward","seekBackward","Fullscreen","toggleFullscreen","useFullscreen","ExitFullscreen","Loading"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/wrapper.tsx","../src/video.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-hot-keys.tsx","../src/hooks/use-seek.tsx","../src/hooks/use-play-pause.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/keyboard.tsx","../src/components.tsx"],"sourcesContent":["\"use client\";\n\nexport { VideoProvider } from \"./wrapper\";\nexport { Video } from \"./video\";\nexport * from \"./components\";\nexport * from \"./types\";\n","import React, {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { VideoRef } from \"./types\";\n\ninterface VideoConfig {\n config?: Partial<{\n clickToPlay: boolean;\n }>;\n}\n\ninterface VideoContextType extends VideoConfig {\n videoRef: VideoRef;\n setVideoRef: (video: VideoRef) => void;\n error: string | null;\n setError: (error: string | null) => void;\n isFocused: boolean;\n setIsFocused: (isFocused: boolean) => void;\n}\n\nexport const VideoContext = createContext<VideoContextType | null>(null);\n\ntype VideoProviderProps = Omit<React.ComponentProps<\"div\">, \"onError\"> &\n VideoConfig & {\n children: React.ReactNode;\n onError?: (error: string | null) => void;\n };\n\nexport const VideoProvider = React.memo(\n ({ children, config, onError, ...props }: VideoProviderProps) => {\n const [videoRef, setVideoRef] = useState<VideoRef>({ current: null });\n const [error, setError] = useState<string | null>(null);\n const [isFocused, setIsFocused] = useState(false);\n\n const videoWrapperRef = useRef<HTMLDivElement>(null);\n\n // Sending error to user if it exists\n useEffect(() => {\n onError?.(error);\n }, [error]);\n\n useEffect(() => {\n const videoWrapper = videoWrapperRef.current;\n if (videoWrapper) {\n const controls = videoWrapper.querySelectorAll(\n \"[data-zuude-hide-elements]\"\n );\n const video = videoWrapper.querySelector(\n \"[data-zuude-video]\"\n ) as HTMLVideoElement;\n\n if (controls) {\n let hideTimeout: ReturnType<typeof setTimeout> | null = null;\n const hideDelay = 3000; // 3 seconds delay\n let isMouseOver = false;\n\n const resetTimer = () => {\n // Clear any pending hide timeout\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n hideTimeout = null;\n }\n\n // Start new timer to hide controls after delay\n hideTimeout = setTimeout(() => {\n if (isMouseOver) {\n // Check if video is paused - don't hide controls if paused\n if (video && !video.paused) {\n controls.forEach((control) => {\n control.setAttribute(\"data-hidden\", \"true\");\n });\n }\n }\n hideTimeout = null;\n }, hideDelay);\n };\n\n const showControls = () => {\n isMouseOver = true;\n controls.forEach((control) => {\n control.removeAttribute(\"data-hidden\");\n });\n resetTimer();\n };\n\n const hideControls = () => {\n isMouseOver = false;\n // Clear any pending hide timeout\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n hideTimeout = null;\n }\n // Hide controls immediately when mouse leaves\n if (video && !video.paused) {\n controls.forEach((control) => {\n control.setAttribute(\"data-hidden\", \"true\");\n });\n }\n };\n\n const handleMouseMove = () => {\n if (isMouseOver) {\n // If controls are hidden, show them\n controls.forEach((control) => {\n if (control.hasAttribute(\"data-hidden\")) {\n control.removeAttribute(\"data-hidden\");\n }\n });\n resetTimer();\n }\n };\n\n const handlePlay = () => {\n // Hide controls when video starts playing (autoplay)\n if (!isMouseOver) {\n controls.forEach((control) => {\n control.setAttribute(\"data-hidden\", \"true\");\n });\n }\n };\n\n videoWrapper.addEventListener(\"mouseenter\", showControls);\n videoWrapper.addEventListener(\"mouseleave\", hideControls);\n videoWrapper.addEventListener(\"mousemove\", handleMouseMove);\n video.addEventListener(\"pause\", showControls);\n video.addEventListener(\"play\", handlePlay);\n\n // Cleanup function\n return () => {\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n }\n videoWrapper.removeEventListener(\"mouseenter\", showControls);\n videoWrapper.removeEventListener(\"mouseleave\", hideControls);\n videoWrapper.removeEventListener(\"mousemove\", handleMouseMove);\n video.removeEventListener(\"pause\", showControls);\n video.removeEventListener(\"play\", handlePlay);\n };\n }\n }\n }, []);\n\n useEffect(() => {\n if (isFocused) {\n const handleClick = (event: MouseEvent) => {\n if (!videoWrapperRef.current?.contains(event.target as Node)) {\n setIsFocused(false);\n }\n };\n document.addEventListener(\"click\", handleClick);\n\n return () => {\n document.removeEventListener(\"click\", handleClick);\n };\n }\n }, [isFocused]);\n\n return (\n <VideoContext.Provider\n value={{\n videoRef,\n setVideoRef,\n config: { clickToPlay: true, ...config },\n error,\n setError,\n isFocused,\n setIsFocused,\n }}\n >\n <div\n ref={videoWrapperRef}\n data-zuude-video-wrapper\n onClick={() => setIsFocused(true)}\n {...props}\n >\n {children}\n </div>\n </VideoContext.Provider>\n );\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\";\nimport { Keyboards } from \"./keyboard\";\n\ninterface Props extends Omit<React.ComponentProps<\"video\">, \"autoPlay\"> {\n src: string;\n autoPlay?: VideoAutoplay;\n controls?: boolean;\n muteFallback?: (onMute: () => void) => React.ReactNode;\n}\n\nexport const Video = forwardRef<HTMLVideoElement, Props>(\n ({ src, autoPlay, muteFallback, controls, ...props }, ref) => {\n const { videoRef, setVideoRef, config, setError, error, isFocused } =\n 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 data-zuude-video\n src={src}\n onClick={config?.clickToPlay ? onPlay : undefined}\n autoPlay={autoPlay === \"force\" ? true : autoPlay}\n {...props}\n />\n\n {controls && isFocused && <Keyboards />}\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 type { VideoRef } from \"../types\";\n\nexport const useAutoplayByForce = (\n videoRef: VideoRef,\n enabled: boolean,\n setError?: (error: string | null) => void\n) => {\n React.useEffect(() => {\n if (!videoRef?.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await videoRef.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 (videoRef?.current) {\n videoRef.current.muted = true;\n try {\n await videoRef.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, videoRef?.current]);\n};\n","import { useEffect } from \"react\";\n\nexport const useHotKeys = (\n key: string,\n func: (event: KeyboardEvent) => void,\n enabled = true\n) => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === key) {\n event.preventDefault();\n func(event);\n }\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [key, func, enabled]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSeek = (videoRef: VideoRef, value = 10) => {\n const seekForward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime += value;\n }\n }, [videoRef?.current]);\n\n const seekBackward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime -= value;\n }\n }, [videoRef?.current]);\n\n return { seekForward, seekBackward };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (videoRef: VideoRef) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.paused\n ? videoRef.current.play()\n : videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n const play = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.play();\n }\n }, [videoRef?.current]);\n\n const pause = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!videoRef?.current.paused);\n\n if (videoRef?.current) {\n videoRef.current.addEventListener(\"play\", handlePlay);\n videoRef.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n videoRef.current?.removeEventListener(\"play\", handlePlay);\n videoRef.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [videoRef?.current]);\n\n return { togglePlay, isPlaying, play, pause };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (videoRef: VideoRef) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = !videoRef.current.muted;\n }\n }, [videoRef?.current]);\n\n const mute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = true;\n }\n }, [videoRef?.current]);\n\n const unmute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = false;\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n // Set the initial state\n setIsMuted(videoRef.current.muted);\n\n const handleVolumeChange = () => {\n if (videoRef.current) {\n setIsMuted(videoRef.current.muted);\n }\n };\n\n videoRef.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n videoRef.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [videoRef?.current]);\n\n return { toggleMute, isMuted, mute, unmute };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nconst useFullscreen = (videoRef: VideoRef) => {\n const [isFullscreen, setIsFullscreen] = React.useState(false);\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n toggleFullscreen();\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, [isFullscreen]);\n\n const toggleFullscreen = () => {\n console.log(\"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 = video?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n if (video) {\n video.style.objectFit = \"contain\";\n }\n } else {\n document.exitFullscreen();\n if (video) {\n video.style.objectFit = \"cover\";\n }\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n\nexport { useFullscreen };\n","import type { VideoRef } from \"../types\";\n\nexport const usePictureInPicture = (videoRef: VideoRef) => {\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 const requestPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await video.requestPictureInPicture();\n };\n\n const exitPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await document.exitPictureInPicture();\n };\n\n return {\n togglePictureInPicture,\n requestPictureInPicture,\n exitPictureInPicture,\n };\n};\n","import { useVideo } from \"./wrapper\";\nimport { useHotKeys } from \"./hooks/use-hot-keys\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\n\nexport const Keyboards = () => {\n const { videoRef } = useVideo();\n\n const { seekForward, seekBackward } = useSeek(videoRef);\n const { togglePlay } = usePlayPause(videoRef);\n const { toggleMute } = useMuteUnmute(videoRef);\n const { toggleFullscreen } = useFullscreen(videoRef);\n const { togglePictureInPicture } = usePictureInPicture(videoRef);\n\n useHotKeys(\"ArrowRight\", () => {\n seekForward();\n });\n useHotKeys(\"ArrowLeft\", () => {\n seekBackward();\n });\n useHotKeys(\" \", () => {\n togglePlay();\n });\n useHotKeys(\"m\", () => {\n toggleMute();\n });\n useHotKeys(\"f\", () => {\n toggleFullscreen();\n });\n useHotKeys(\"p\", () => {\n togglePictureInPicture();\n });\n\n return null;\n};\n","import React, { RefObject, useRef } from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useVideo } from \"./wrapper\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useCurrentTime } from \"./hooks/use-current-time\";\n\ninterface ControlsProps extends React.ComponentProps<\"div\"> {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\nconst Controls = React.memo(\n ({ children, asChild, ...props }: ControlsProps) => {\n return (\n <div data-zuude-hide-elements {...props}>\n {children}\n </div>\n );\n }\n);\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 { play } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={play}>\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 { pause } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={pause}>\n {children}\n </Element>\n );\n});\n\nconst Mute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { mute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={mute}>\n {children}\n </Element>\n );\n});\n\nconst Unmute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { unmute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={unmute}>\n {children}\n </Element>\n );\n});\n\nconst SeekForward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekForward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekForward}>\n {children}\n </Element>\n );\n});\n\nconst SeekBackward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekBackward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekBackward}>\n {children}\n </Element>\n );\n});\n\nconst Fullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst ExitFullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst Loading = () => {\n return <div>Loading</div>;\n};\n\ninterface ShadowProps extends React.ComponentProps<\"div\"> {}\n\nconst Shadow = ({ ...props }: ShadowProps) => {\n const { videoRef } = useVideo();\n\n const shadowVideoRef = useRef<HTMLVideoElement>(null);\n\n React.useEffect(() => {\n const video = videoRef?.current;\n if (shadowVideoRef.current && video) {\n let currentTime = 0;\n let isPlaying = false;\n let interval: ReturnType<typeof setInterval> | null = null;\n\n const startInterval = () => {\n if (interval) clearInterval(interval);\n interval = setInterval(() => {\n console.log(\"currentTime\", video.currentTime);\n currentTime = video.currentTime;\n if (shadowVideoRef.current) {\n shadowVideoRef.current.currentTime = currentTime;\n }\n }, 100);\n };\n\n const stopInterval = () => {\n if (interval) {\n clearInterval(interval);\n interval = null;\n }\n };\n\n const handlePlay = () => {\n isPlaying = true;\n startInterval();\n };\n\n const handlePause = () => {\n isPlaying = false;\n stopInterval();\n };\n\n video.addEventListener(\"play\", handlePlay);\n video.addEventListener(\"pause\", handlePause);\n\n return () => {\n stopInterval();\n video.removeEventListener(\"play\", handlePlay);\n video.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [videoRef?.current]);\n\n if (!videoRef?.current) return null;\n\n return (\n <div\n {...props}\n style={{\n ...props.style,\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n pointerEvents: \"none\",\n }}\n >\n <video\n ref={shadowVideoRef}\n src={videoRef.current.src}\n muted\n playsInline\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n }}\n />\n </div>\n );\n};\n\nexport {\n Controls,\n Play,\n Pause,\n Mute,\n Unmute,\n SeekForward,\n SeekBackward,\n Fullscreen,\n ExitFullscreen,\n Loading,\n Shadow,\n};\n"],"mappings":"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","names":["index_exports","__export","Controls","ExitFullscreen","Fullscreen","Loading","Mute","Pause","Play","SeekBackward","SeekForward","Shadow","Unmute","Video","VideoProvider","__toCommonJS","import_react","import_jsx_runtime","VideoContext","VideoProvider","React","children","config","onError","props","videoRef","setVideoRef","error","setError","isFocused","setIsFocused","videoWrapperRef","videoWrapper","controls","video","hideTimeout","hideDelay","isMouseOver","resetTimer","control","showControls","hideControls","handleMouseMove","handlePlay","handleClick","event","_a","useVideo","context","import_react","import_react","useAutoplayByForce","videoRef","enabled","setError","React","_a","error","retryError","import_react","useHotKeys","key","func","enabled","handleKeyDown","event","import_react","useSeek","videoRef","value","seekForward","React","seekBackward","import_react","usePlayPause","videoRef","isPlaying","setIsPlaying","React","togglePlay","play","pause","handlePlay","handlePause","_a","_b","import_react","useMuteUnmute","videoRef","isMuted","setIsMuted","React","toggleMute","mute","unmute","handleVolumeChange","_a","import_react","useFullscreen","videoRef","isFullscreen","setIsFullscreen","React","handleFullscreenChange","toggleFullscreen","isSafari","video","videoContainer","usePictureInPicture","videoRef","video","error","videoContainer","Keyboards","videoRef","useVideo","seekForward","seekBackward","useSeek","togglePlay","usePlayPause","toggleMute","useMuteUnmute","toggleFullscreen","useFullscreen","togglePictureInPicture","usePictureInPicture","useHotKeys","import_jsx_runtime","Video","src","autoPlay","muteFallback","controls","props","ref","videoRef","setVideoRef","config","setError","error","isFocused","useVideo","refVideo","video","thirdPartyRef","useAutoplayByForce","onPlay","_a","_b","_c","Keyboards","import_react","import_react_slot","import_jsx_runtime","Controls","React","children","asChild","props","Play","Element","videoRef","useVideo","play","usePlayPause","Pause","pause","Mute","mute","useMuteUnmute","Unmute","unmute","SeekForward","seekForward","useSeek","SeekBackward","seekBackward","Fullscreen","toggleFullscreen","useFullscreen","ExitFullscreen","Loading","Shadow","shadowVideoRef","video","currentTime","isPlaying","interval","startInterval","stopInterval","handlePlay","handlePause"]}
package/dist/index.d.cts CHANGED
@@ -44,5 +44,8 @@ declare const SeekBackward: React.MemoExoticComponent<({ children, asChild, ...p
44
44
  declare const Fullscreen: React.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
45
45
  declare const ExitFullscreen: React.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
46
46
  declare const Loading: () => react_jsx_runtime.JSX.Element;
47
+ interface ShadowProps extends React.ComponentProps<"div"> {
48
+ }
49
+ declare const Shadow: ({ ...props }: ShadowProps) => react_jsx_runtime.JSX.Element | null;
47
50
 
48
- export { Controls, type CustomVideoRef, ExitFullscreen, Fullscreen, Loading, Mute, Pause, Play, SeekBackward, SeekForward, Unmute, Video, type VideoAutoplay, VideoProvider, type VideoRef };
51
+ export { Controls, type CustomVideoRef, ExitFullscreen, Fullscreen, Loading, Mute, Pause, Play, SeekBackward, SeekForward, Shadow, Unmute, Video, type VideoAutoplay, VideoProvider, type VideoRef };
package/dist/index.d.ts CHANGED
@@ -44,5 +44,8 @@ declare const SeekBackward: React.MemoExoticComponent<({ children, asChild, ...p
44
44
  declare const Fullscreen: React.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
45
45
  declare const ExitFullscreen: React.MemoExoticComponent<({ children, asChild, ...props }: Props) => react_jsx_runtime.JSX.Element>;
46
46
  declare const Loading: () => react_jsx_runtime.JSX.Element;
47
+ interface ShadowProps extends React.ComponentProps<"div"> {
48
+ }
49
+ declare const Shadow: ({ ...props }: ShadowProps) => react_jsx_runtime.JSX.Element | null;
47
50
 
48
- export { Controls, type CustomVideoRef, ExitFullscreen, Fullscreen, Loading, Mute, Pause, Play, SeekBackward, SeekForward, Unmute, Video, type VideoAutoplay, VideoProvider, type VideoRef };
51
+ export { Controls, type CustomVideoRef, ExitFullscreen, Fullscreen, Loading, Mute, Pause, Play, SeekBackward, SeekForward, Shadow, Unmute, Video, type VideoAutoplay, VideoProvider, type VideoRef };
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import B,{createContext as U,useContext as z,useEffect as I,useRef as D,useState as M}from"react";import{jsx as H}from"react/jsx-runtime";var S=U(null),W=B.memo(({children:t,config:n,onError:e,...s})=>{let[r,c]=M({current:null}),[o,u]=M(null),[a,i]=M(!1),F=D(null);return I(()=>{e==null||e(o)},[o]),I(()=>{if(a){let x=h=>{var L;(L=F.current)!=null&&L.contains(h.target)||i(!1)};return document.addEventListener("click",x),()=>{document.removeEventListener("click",x)}}},[a]),console.log("VideoProvider"),H(S.Provider,{value:{videoRef:r,setVideoRef:c,config:{clickToPlay:!0,...n},error:o,setError:u,isFocused:a,setIsFocused:i},children:H("div",{ref:F,"data-zuude-video-wrapper":!0,onClick:()=>i(!0),...s,children:t})})}),l=()=>{let t=z(S);if(!t)throw new Error("useVideo must be used within a VideoProvider");return t};import{forwardRef as Q,useEffect as X,useRef as Y}from"react";import G from"react";var A=(t,n,e)=>{G.useEffect(()=>{if(!(t!=null&&t.current)||!n)return;(async()=>{var r;try{await((r=t.current)==null?void 0:r.play())}catch(c){if(c instanceof Error&&c.name==="NotAllowedError"){if(e==null||e("NotAllowedError"),console.error("NotAllowedError"),t!=null&&t.current){t.current.muted=!0;try{await t.current.play()}catch(o){console.error(o)}}}else console.error(c)}})()},[n,t==null?void 0:t.current])};import{useEffect as J}from"react";var y=(t,n,e=!0)=>{let s=r=>{r.preventDefault(),r.key===t&&n(r)};J(()=>{if(e)return document.addEventListener("keydown",s),()=>{document.removeEventListener("keydown",s)}},[t,n,e])};import O from"react";var g=(t,n=10)=>{let e=O.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime+=n)},[t==null?void 0:t.current]),s=O.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime-=n)},[t==null?void 0:t.current]);return{seekForward:e,seekBackward:s}};import k from"react";var b=t=>{let[n,e]=k.useState(!1),s=k.useCallback(()=>{t!=null&&t.current&&(t.current.paused?t.current.play():t.current.pause())},[t==null?void 0:t.current]),r=k.useCallback(()=>{t!=null&&t.current&&t.current.play()},[t==null?void 0:t.current]),c=k.useCallback(()=>{t!=null&&t.current&&t.current.pause()},[t==null?void 0:t.current]);return k.useEffect(()=>{if(!(t!=null&&t.current))return;let o=()=>{e(!0)},u=()=>{e(!1)};if(e(!(t!=null&&t.current.paused)),t!=null&&t.current)return t.current.addEventListener("play",o),t.current.addEventListener("pause",u),()=>{var a,i;(a=t.current)==null||a.removeEventListener("play",o),(i=t.current)==null||i.removeEventListener("pause",u)}},[t==null?void 0:t.current]),{togglePlay:s,isPlaying:n,play:r,pause:c}};import C from"react";var d=t=>{let[n,e]=C.useState(!1),s=C.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!t.current.muted)},[t==null?void 0:t.current]),r=C.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!0)},[t==null?void 0:t.current]),c=C.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!1)},[t==null?void 0:t.current]);return C.useEffect(()=>{if(!(t!=null&&t.current))return;e(t.current.muted);let o=()=>{t.current&&e(t.current.muted)};return t.current.addEventListener("volumechange",o),()=>{var u;(u=t.current)==null||u.removeEventListener("volumechange",o)}},[t==null?void 0:t.current]),{toggleMute:s,isMuted:n,mute:r,unmute:c}};import q from"react";var w=t=>{let[n,e]=q.useState(!1);q.useEffect(()=>{let r=()=>{e==null||e(!!document.fullscreenElement),s()};return document.addEventListener("fullscreenchange",r),()=>document.removeEventListener("fullscreenchange",r)},[n]);let s=()=>{console.log("toggleFullscreen");let r=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),c=t==null?void 0:t.current;if(c&&r){if(c.webkitEnterFullscreen){c.webkitEnterFullscreen();return}else if(c.requestFullscreen){c.requestFullscreen();return}}let o=c==null?void 0:c.closest("[data-zuude-video-wrapper]");o&&(n?(document.exitFullscreen(),c&&(c.style.objectFit="cover")):(o.requestFullscreen(),c&&(c.style.objectFit="contain")))};return{isFullscreen:n!=null?n:!1,toggleFullscreen:s}};var N=t=>({togglePictureInPicture:async()=>{let r=t==null?void 0:t.current;if(r)try{document.pictureInPictureElement?await document.exitPictureInPicture():await r.requestPictureInPicture()}catch(c){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))r.webkitEnterFullscreen?r.webkitEnterFullscreen():r.requestFullscreen&&r.requestFullscreen();else{let u=r.closest("[data-zuude-video-wrapper]");u&&(document.fullscreenElement?await document.exitFullscreen():await u.requestFullscreen())}}},requestPictureInPicture:async()=>{let r=t==null?void 0:t.current;r&&await r.requestPictureInPicture()},exitPictureInPicture:async()=>{t!=null&&t.current&&await document.exitPictureInPicture()}});var j=()=>{let{videoRef:t}=l(),{seekForward:n,seekBackward:e}=g(t),{togglePlay:s}=b(t),{toggleMute:r}=d(t),{toggleFullscreen:c}=w(t),{togglePictureInPicture:o}=N(t);return y("ArrowRight",()=>{n()}),y("ArrowLeft",()=>{e()}),y(" ",()=>{s()}),y("m",()=>{r()}),y("f",()=>{c()}),y("p",()=>{o()}),null};import{Fragment as Z,jsx as K,jsxs as _}from"react/jsx-runtime";var f=Q(({src:t,autoPlay:n,muteFallback:e,controls:s,...r},c)=>{let{videoRef:o,setVideoRef:u,config:a,setError:i,error:F,isFocused:x}=l(),h=Y(null);X(()=>{let E=h.current,V=c;V?u(V):E&&u({current:E})},[t]),A(o,n==="force"&&r.muted===void 0,i);let L=()=>{var E,V,T;(E=o==null?void 0:o.current)!=null&&E.paused?(V=o.current)==null||V.play():(T=o==null?void 0:o.current)==null||T.pause()};return _(Z,{children:[K("video",{ref:c||h,src:t,onClick:a!=null&&a.clickToPlay?L:void 0,autoPlay:n==="force"?!0:n,...r}),s&&x&&K(j,{}),F==="NotAllowedError"&&typeof e=="function"&&e(()=>{o!=null&&o.current&&(o.current.muted=!o.current.muted),i(null)})]})});f.displayName="Video";import p from"react";import{Slot as P}from"@radix-ui/react-slot";import{jsx as m}from"react/jsx-runtime";var Kt=p.memo(({children:t,asChild:n,...e})=>m("div",{...e,children:t})),ft=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{play:c}=b(r);return m(s,{...e,onClick:c,children:t})}),Bt=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{pause:c}=b(r);return m(s,{...e,onClick:c,children:t})}),Ut=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{mute:c}=d(r);return m(s,{...e,onClick:c,children:t})}),zt=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{unmute:c}=d(r);return m(s,{...e,onClick:c,children:t})}),Dt=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{seekForward:c}=g(r,10);return m(s,{...e,onClick:c,children:t})}),Wt=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{seekBackward:c}=g(r,10);return m(s,{...e,onClick:c,children:t})}),Gt=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{toggleFullscreen:c}=w(r);return m(s,{...e,onClick:c,children:t})}),Jt=p.memo(({children:t,asChild:n,...e})=>{let s=n?P:"button",{videoRef:r}=l(),{toggleFullscreen:c}=w(r);return m(s,{...e,onClick:c,children:t})}),Qt=()=>m("div",{children:"Loading"});export{Kt as Controls,Jt as ExitFullscreen,Gt as Fullscreen,Qt as Loading,Ut as Mute,Bt as Pause,ft as Play,Wt as SeekBackward,Dt as SeekForward,zt as Unmute,f as Video,W as VideoProvider};
1
+ "use client";import J,{createContext as Q,useContext as X,useEffect as I,useRef as Y,useState as A}from"react";import{jsx as N}from"react/jsx-runtime";var j=Q(null),Z=J.memo(({children:t,config:e,onError:n,...o})=>{let[r,s]=A({current:null}),[u,l]=A(null),[m,d]=A(!1),V=Y(null);return I(()=>{n==null||n(u)},[u]),I(()=>{let a=V.current;if(a){let E=a.querySelectorAll("[data-zuude-hide-elements]"),p=a.querySelector("[data-zuude-video]");if(E){let c=null,C=3e3,g=!1,S=()=>{c&&(clearTimeout(c),c=null),c=setTimeout(()=>{g&&p&&!p.paused&&E.forEach(P=>{P.setAttribute("data-hidden","true")}),c=null},C)},M=()=>{g=!0,E.forEach(P=>{P.removeAttribute("data-hidden")}),S()},H=()=>{g=!1,c&&(clearTimeout(c),c=null),p&&!p.paused&&E.forEach(P=>{P.setAttribute("data-hidden","true")})},q=()=>{g&&(E.forEach(P=>{P.hasAttribute("data-hidden")&&P.removeAttribute("data-hidden")}),S())},O=()=>{g||E.forEach(P=>{P.setAttribute("data-hidden","true")})};return a.addEventListener("mouseenter",M),a.addEventListener("mouseleave",H),a.addEventListener("mousemove",q),p.addEventListener("pause",M),p.addEventListener("play",O),()=>{c&&clearTimeout(c),a.removeEventListener("mouseenter",M),a.removeEventListener("mouseleave",H),a.removeEventListener("mousemove",q),p.removeEventListener("pause",M),p.removeEventListener("play",O)}}}},[]),I(()=>{if(m){let a=E=>{var p;(p=V.current)!=null&&p.contains(E.target)||d(!1)};return document.addEventListener("click",a),()=>{document.removeEventListener("click",a)}}},[m]),N(j.Provider,{value:{videoRef:r,setVideoRef:s,config:{clickToPlay:!0,...e},error:u,setError:l,isFocused:m,setIsFocused:d},children:N("div",{ref:V,"data-zuude-video-wrapper":!0,onClick:()=>d(!0),...o,children:t})})}),i=()=>{let t=X(j);if(!t)throw new Error("useVideo must be used within a VideoProvider");return t};import{forwardRef as v,useEffect as R,useRef as tt}from"react";import _ from"react";var z=(t,e,n)=>{_.useEffect(()=>{if(!(t!=null&&t.current)||!e)return;(async()=>{var r;try{await((r=t.current)==null?void 0:r.play())}catch(s){if(s instanceof Error&&s.name==="NotAllowedError"){if(n==null||n("NotAllowedError"),console.error("NotAllowedError"),t!=null&&t.current){t.current.muted=!0;try{await t.current.play()}catch(u){console.error(u)}}}else console.error(s)}})()},[e,t==null?void 0:t.current])};import{useEffect as $}from"react";var k=(t,e,n=!0)=>{let o=r=>{r.key===t&&(r.preventDefault(),e(r))};$(()=>{if(n)return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o)}},[t,e,n])};import K from"react";var w=(t,e=10)=>{let n=K.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime+=e)},[t==null?void 0:t.current]),o=K.useCallback(()=>{t!=null&&t.current&&(t.current.currentTime-=e)},[t==null?void 0:t.current]);return{seekForward:n,seekBackward:o}};import L from"react";var F=t=>{let[e,n]=L.useState(!1),o=L.useCallback(()=>{t!=null&&t.current&&(t.current.paused?t.current.play():t.current.pause())},[t==null?void 0:t.current]),r=L.useCallback(()=>{t!=null&&t.current&&t.current.play()},[t==null?void 0:t.current]),s=L.useCallback(()=>{t!=null&&t.current&&t.current.pause()},[t==null?void 0:t.current]);return L.useEffect(()=>{if(!(t!=null&&t.current))return;let u=()=>{n(!0)},l=()=>{n(!1)};if(n(!(t!=null&&t.current.paused)),t!=null&&t.current)return t.current.addEventListener("play",u),t.current.addEventListener("pause",l),()=>{var m,d;(m=t.current)==null||m.removeEventListener("play",u),(d=t.current)==null||d.removeEventListener("pause",l)}},[t==null?void 0:t.current]),{togglePlay:o,isPlaying:e,play:r,pause:s}};import f from"react";var T=t=>{let[e,n]=f.useState(!1),o=f.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!t.current.muted)},[t==null?void 0:t.current]),r=f.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!0)},[t==null?void 0:t.current]),s=f.useCallback(()=>{t!=null&&t.current&&(t.current.muted=!1)},[t==null?void 0:t.current]);return f.useEffect(()=>{if(!(t!=null&&t.current))return;n(t.current.muted);let u=()=>{t.current&&n(t.current.muted)};return t.current.addEventListener("volumechange",u),()=>{var l;(l=t.current)==null||l.removeEventListener("volumechange",u)}},[t==null?void 0:t.current]),{toggleMute:o,isMuted:e,mute:r,unmute:s}};import B from"react";var x=t=>{let[e,n]=B.useState(!1);B.useEffect(()=>{let r=()=>{n==null||n(!!document.fullscreenElement),o()};return document.addEventListener("fullscreenchange",r),()=>document.removeEventListener("fullscreenchange",r)},[e]);let o=()=>{console.log("toggleFullscreen");let r=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),s=t==null?void 0:t.current;if(s&&r){if(s.webkitEnterFullscreen){s.webkitEnterFullscreen();return}else if(s.requestFullscreen){s.requestFullscreen();return}}let u=s==null?void 0:s.closest("[data-zuude-video-wrapper]");u&&(e?(document.exitFullscreen(),s&&(s.style.objectFit="cover")):(u.requestFullscreen(),s&&(s.style.objectFit="contain")))};return{isFullscreen:e!=null?e:!1,toggleFullscreen:o}};var D=t=>({togglePictureInPicture:async()=>{let r=t==null?void 0:t.current;if(r)try{document.pictureInPictureElement?await document.exitPictureInPicture():await r.requestPictureInPicture()}catch(s){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))r.webkitEnterFullscreen?r.webkitEnterFullscreen():r.requestFullscreen&&r.requestFullscreen();else{let l=r.closest("[data-zuude-video-wrapper]");l&&(document.fullscreenElement?await document.exitFullscreen():await l.requestFullscreen())}}},requestPictureInPicture:async()=>{let r=t==null?void 0:t.current;r&&await r.requestPictureInPicture()},exitPictureInPicture:async()=>{t!=null&&t.current&&await document.exitPictureInPicture()}});var U=()=>{let{videoRef:t}=i(),{seekForward:e,seekBackward:n}=w(t),{togglePlay:o}=F(t),{toggleMute:r}=T(t),{toggleFullscreen:s}=x(t),{togglePictureInPicture:u}=D(t);return k("ArrowRight",()=>{e()}),k("ArrowLeft",()=>{n()}),k(" ",()=>{o()}),k("m",()=>{r()}),k("f",()=>{s()}),k("p",()=>{u()}),null};import{Fragment as et,jsx as W,jsxs as rt}from"react/jsx-runtime";var G=v(({src:t,autoPlay:e,muteFallback:n,controls:o,...r},s)=>{let{videoRef:u,setVideoRef:l,config:m,setError:d,error:V,isFocused:a}=i(),E=tt(null);R(()=>{let c=E.current,C=s;C?l(C):c&&l({current:c})},[t]),z(u,e==="force"&&r.muted===void 0,d);let p=()=>{var c,C,g;(c=u==null?void 0:u.current)!=null&&c.paused?(C=u.current)==null||C.play():(g=u==null?void 0:u.current)==null||g.pause()};return rt(et,{children:[W("video",{ref:s||E,"data-zuude-video":!0,src:t,onClick:m!=null&&m.clickToPlay?p:void 0,autoPlay:e==="force"?!0:e,...r}),o&&a&&W(U,{}),V==="NotAllowedError"&&typeof n=="function"&&n(()=>{u!=null&&u.current&&(u.current.muted=!u.current.muted),d(null)})]})});G.displayName="Video";import h,{useRef as nt}from"react";import{Slot as b}from"@radix-ui/react-slot";import{jsx as y}from"react/jsx-runtime";var Gt=h.memo(({children:t,asChild:e,...n})=>y("div",{"data-zuude-hide-elements":!0,...n,children:t})),Jt=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{play:s}=F(r);return y(o,{...n,onClick:s,children:t})}),Qt=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{pause:s}=F(r);return y(o,{...n,onClick:s,children:t})}),Xt=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{mute:s}=T(r);return y(o,{...n,onClick:s,children:t})}),Yt=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{unmute:s}=T(r);return y(o,{...n,onClick:s,children:t})}),Zt=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{seekForward:s}=w(r,10);return y(o,{...n,onClick:s,children:t})}),_t=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{seekBackward:s}=w(r,10);return y(o,{...n,onClick:s,children:t})}),$t=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{toggleFullscreen:s}=x(r);return y(o,{...n,onClick:s,children:t})}),vt=h.memo(({children:t,asChild:e,...n})=>{let o=e?b:"button",{videoRef:r}=i(),{toggleFullscreen:s}=x(r);return y(o,{...n,onClick:s,children:t})}),Rt=()=>y("div",{children:"Loading"}),te=({...t})=>{let{videoRef:e}=i(),n=nt(null);return h.useEffect(()=>{let o=e==null?void 0:e.current;if(n.current&&o){let r=0,s=!1,u=null,l=()=>{u&&clearInterval(u),u=setInterval(()=>{console.log("currentTime",o.currentTime),r=o.currentTime,n.current&&(n.current.currentTime=r)},100)},m=()=>{u&&(clearInterval(u),u=null)},d=()=>{s=!0,l()},V=()=>{s=!1,m()};return o.addEventListener("play",d),o.addEventListener("pause",V),()=>{m(),o.removeEventListener("play",d),o.removeEventListener("pause",V)}}},[e==null?void 0:e.current]),e!=null&&e.current?y("div",{...t,style:{...t.style,position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"},children:y("video",{ref:n,src:e.current.src,muted:!0,playsInline:!0,style:{width:"100%",height:"100%",objectFit:"cover"}})}):null};export{Gt as Controls,vt as ExitFullscreen,$t as Fullscreen,Rt as Loading,Xt as Mute,Qt as Pause,Jt as Play,_t as SeekBackward,Zt as SeekForward,te as Shadow,Yt as Unmute,G as Video,Z as VideoProvider};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/wrapper.tsx","../src/video.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-hot-keys.tsx","../src/hooks/use-seek.tsx","../src/hooks/use-play-pause.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/keyboard.tsx","../src/components.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { VideoRef } from \"./types\";\n\ninterface VideoConfig {\n config?: Partial<{\n clickToPlay: boolean;\n }>;\n}\n\ninterface VideoContextType extends VideoConfig {\n videoRef: VideoRef;\n setVideoRef: (video: VideoRef) => void;\n error: string | null;\n setError: (error: string | null) => void;\n isFocused: boolean;\n setIsFocused: (isFocused: boolean) => void;\n}\n\nexport const VideoContext = createContext<VideoContextType | null>(null);\n\ntype VideoProviderProps = Omit<React.ComponentProps<\"div\">, \"onError\"> &\n VideoConfig & {\n children: React.ReactNode;\n onError?: (error: string | null) => void;\n };\n\nexport const VideoProvider = React.memo(\n ({ children, config, onError, ...props }: VideoProviderProps) => {\n const [videoRef, setVideoRef] = useState<VideoRef>({ current: null });\n const [error, setError] = useState<string | null>(null);\n const [isFocused, setIsFocused] = useState(false);\n\n const videoWrapperRef = useRef<HTMLDivElement>(null);\n\n // Sending error to user if it exists\n useEffect(() => {\n onError?.(error);\n }, [error]);\n\n useEffect(() => {\n if (isFocused) {\n const handleClick = (event: MouseEvent) => {\n if (!videoWrapperRef.current?.contains(event.target as Node)) {\n setIsFocused(false);\n }\n };\n document.addEventListener(\"click\", handleClick);\n\n return () => {\n document.removeEventListener(\"click\", handleClick);\n };\n }\n }, [isFocused]);\n\n console.log(\"VideoProvider\");\n\n return (\n <VideoContext.Provider\n value={{\n videoRef,\n setVideoRef,\n config: { clickToPlay: true, ...config },\n error,\n setError,\n isFocused,\n setIsFocused,\n }}\n >\n <div\n ref={videoWrapperRef}\n data-zuude-video-wrapper\n onClick={() => setIsFocused(true)}\n {...props}\n >\n {children}\n </div>\n </VideoContext.Provider>\n );\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\";\nimport { Keyboards } from \"./keyboard\";\n\ninterface Props extends Omit<React.ComponentProps<\"video\">, \"autoPlay\"> {\n src: string;\n autoPlay?: VideoAutoplay;\n controls?: boolean;\n muteFallback?: (onMute: () => void) => React.ReactNode;\n}\n\nexport const Video = forwardRef<HTMLVideoElement, Props>(\n ({ src, autoPlay, muteFallback, controls, ...props }, ref) => {\n const { videoRef, setVideoRef, config, setError, error, isFocused } =\n 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 onClick={config?.clickToPlay ? onPlay : undefined}\n autoPlay={autoPlay === \"force\" ? true : autoPlay}\n {...props}\n />\n\n {controls && isFocused && <Keyboards />}\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 type { VideoRef } from \"../types\";\n\nexport const useAutoplayByForce = (\n videoRef: VideoRef,\n enabled: boolean,\n setError?: (error: string | null) => void\n) => {\n React.useEffect(() => {\n if (!videoRef?.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await videoRef.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 (videoRef?.current) {\n videoRef.current.muted = true;\n try {\n await videoRef.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, videoRef?.current]);\n};\n","import { useEffect } from \"react\";\n\nexport const useHotKeys = (\n key: string,\n func: (event: KeyboardEvent) => void,\n enabled = true\n) => {\n const handleKeyDown = (event: KeyboardEvent) => {\n event.preventDefault();\n if (event.key === key) {\n func(event);\n }\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [key, func, enabled]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSeek = (videoRef: VideoRef, value = 10) => {\n const seekForward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime += value;\n }\n }, [videoRef?.current]);\n\n const seekBackward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime -= value;\n }\n }, [videoRef?.current]);\n\n return { seekForward, seekBackward };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (videoRef: VideoRef) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.paused\n ? videoRef.current.play()\n : videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n const play = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.play();\n }\n }, [videoRef?.current]);\n\n const pause = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!videoRef?.current.paused);\n\n if (videoRef?.current) {\n videoRef.current.addEventListener(\"play\", handlePlay);\n videoRef.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n videoRef.current?.removeEventListener(\"play\", handlePlay);\n videoRef.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [videoRef?.current]);\n\n return { togglePlay, isPlaying, play, pause };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (videoRef: VideoRef) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = !videoRef.current.muted;\n }\n }, [videoRef?.current]);\n\n const mute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = true;\n }\n }, [videoRef?.current]);\n\n const unmute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = false;\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n // Set the initial state\n setIsMuted(videoRef.current.muted);\n\n const handleVolumeChange = () => {\n if (videoRef.current) {\n setIsMuted(videoRef.current.muted);\n }\n };\n\n videoRef.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n videoRef.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [videoRef?.current]);\n\n return { toggleMute, isMuted, mute, unmute };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nconst useFullscreen = (videoRef: VideoRef) => {\n const [isFullscreen, setIsFullscreen] = React.useState(false);\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n toggleFullscreen();\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, [isFullscreen]);\n\n const toggleFullscreen = () => {\n console.log(\"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 = video?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n if (video) {\n video.style.objectFit = \"contain\";\n }\n } else {\n document.exitFullscreen();\n if (video) {\n video.style.objectFit = \"cover\";\n }\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n\nexport { useFullscreen };\n","import type { VideoRef } from \"../types\";\n\nexport const usePictureInPicture = (videoRef: VideoRef) => {\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 const requestPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await video.requestPictureInPicture();\n };\n\n const exitPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await document.exitPictureInPicture();\n };\n\n return {\n togglePictureInPicture,\n requestPictureInPicture,\n exitPictureInPicture,\n };\n};\n","import { useVideo } from \"./wrapper\";\nimport { useHotKeys } from \"./hooks/use-hot-keys\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\n\nexport const Keyboards = () => {\n const { videoRef } = useVideo();\n\n const { seekForward, seekBackward } = useSeek(videoRef);\n const { togglePlay } = usePlayPause(videoRef);\n const { toggleMute } = useMuteUnmute(videoRef);\n const { toggleFullscreen } = useFullscreen(videoRef);\n const { togglePictureInPicture } = usePictureInPicture(videoRef);\n\n useHotKeys(\"ArrowRight\", () => {\n seekForward();\n });\n useHotKeys(\"ArrowLeft\", () => {\n seekBackward();\n });\n useHotKeys(\" \", () => {\n togglePlay();\n });\n useHotKeys(\"m\", () => {\n toggleMute();\n });\n useHotKeys(\"f\", () => {\n toggleFullscreen();\n });\n useHotKeys(\"p\", () => {\n togglePictureInPicture();\n });\n\n return null;\n};\n","import React, { RefObject } from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useVideo } from \"./wrapper\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\n\ninterface ControlsProps extends React.ComponentProps<\"div\"> {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\nconst Controls = React.memo(\n ({ children, asChild, ...props }: ControlsProps) => {\n return <div {...props}>{children}</div>;\n }\n);\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 { play } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={play}>\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 { pause } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={pause}>\n {children}\n </Element>\n );\n});\n\nconst Mute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { mute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={mute}>\n {children}\n </Element>\n );\n});\n\nconst Unmute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { unmute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={unmute}>\n {children}\n </Element>\n );\n});\n\nconst SeekForward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekForward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekForward}>\n {children}\n </Element>\n );\n});\n\nconst SeekBackward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekBackward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekBackward}>\n {children}\n </Element>\n );\n});\n\nconst Fullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst ExitFullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst Loading = () => {\n return <div>Loading</div>;\n};\n\nexport {\n Controls,\n Play,\n Pause,\n Mute,\n Unmute,\n SeekForward,\n SeekBackward,\n Fullscreen,\n ExitFullscreen,\n Loading,\n};\n"],"mappings":"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","names":["React","createContext","useContext","useEffect","useRef","useState","jsx","VideoContext","VideoProvider","children","config","onError","props","videoRef","setVideoRef","error","setError","isFocused","setIsFocused","videoWrapperRef","handleClick","event","_a","useVideo","context","forwardRef","useEffect","useRef","React","useAutoplayByForce","videoRef","enabled","setError","_a","error","retryError","useEffect","useHotKeys","key","func","enabled","handleKeyDown","event","React","useSeek","videoRef","value","seekForward","seekBackward","React","usePlayPause","videoRef","isPlaying","setIsPlaying","togglePlay","play","pause","handlePlay","handlePause","_a","_b","React","useMuteUnmute","videoRef","isMuted","setIsMuted","toggleMute","mute","unmute","handleVolumeChange","_a","React","useFullscreen","videoRef","isFullscreen","setIsFullscreen","handleFullscreenChange","toggleFullscreen","isSafari","video","videoContainer","usePictureInPicture","videoRef","video","error","videoContainer","Keyboards","videoRef","useVideo","seekForward","seekBackward","useSeek","togglePlay","usePlayPause","toggleMute","useMuteUnmute","toggleFullscreen","useFullscreen","togglePictureInPicture","usePictureInPicture","useHotKeys","Fragment","jsx","jsxs","Video","forwardRef","src","autoPlay","muteFallback","controls","props","ref","videoRef","setVideoRef","config","setError","error","isFocused","useVideo","refVideo","useRef","useEffect","video","thirdPartyRef","useAutoplayByForce","onPlay","_a","_b","_c","Keyboards","React","Slot","jsx","Controls","React","children","asChild","props","Play","Element","Slot","videoRef","useVideo","play","usePlayPause","Pause","pause","Mute","mute","useMuteUnmute","Unmute","unmute","SeekForward","seekForward","useSeek","SeekBackward","seekBackward","Fullscreen","toggleFullscreen","useFullscreen","ExitFullscreen","Loading"]}
1
+ {"version":3,"sources":["../src/wrapper.tsx","../src/video.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-hot-keys.tsx","../src/hooks/use-seek.tsx","../src/hooks/use-play-pause.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/keyboard.tsx","../src/components.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { VideoRef } from \"./types\";\n\ninterface VideoConfig {\n config?: Partial<{\n clickToPlay: boolean;\n }>;\n}\n\ninterface VideoContextType extends VideoConfig {\n videoRef: VideoRef;\n setVideoRef: (video: VideoRef) => void;\n error: string | null;\n setError: (error: string | null) => void;\n isFocused: boolean;\n setIsFocused: (isFocused: boolean) => void;\n}\n\nexport const VideoContext = createContext<VideoContextType | null>(null);\n\ntype VideoProviderProps = Omit<React.ComponentProps<\"div\">, \"onError\"> &\n VideoConfig & {\n children: React.ReactNode;\n onError?: (error: string | null) => void;\n };\n\nexport const VideoProvider = React.memo(\n ({ children, config, onError, ...props }: VideoProviderProps) => {\n const [videoRef, setVideoRef] = useState<VideoRef>({ current: null });\n const [error, setError] = useState<string | null>(null);\n const [isFocused, setIsFocused] = useState(false);\n\n const videoWrapperRef = useRef<HTMLDivElement>(null);\n\n // Sending error to user if it exists\n useEffect(() => {\n onError?.(error);\n }, [error]);\n\n useEffect(() => {\n const videoWrapper = videoWrapperRef.current;\n if (videoWrapper) {\n const controls = videoWrapper.querySelectorAll(\n \"[data-zuude-hide-elements]\"\n );\n const video = videoWrapper.querySelector(\n \"[data-zuude-video]\"\n ) as HTMLVideoElement;\n\n if (controls) {\n let hideTimeout: ReturnType<typeof setTimeout> | null = null;\n const hideDelay = 3000; // 3 seconds delay\n let isMouseOver = false;\n\n const resetTimer = () => {\n // Clear any pending hide timeout\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n hideTimeout = null;\n }\n\n // Start new timer to hide controls after delay\n hideTimeout = setTimeout(() => {\n if (isMouseOver) {\n // Check if video is paused - don't hide controls if paused\n if (video && !video.paused) {\n controls.forEach((control) => {\n control.setAttribute(\"data-hidden\", \"true\");\n });\n }\n }\n hideTimeout = null;\n }, hideDelay);\n };\n\n const showControls = () => {\n isMouseOver = true;\n controls.forEach((control) => {\n control.removeAttribute(\"data-hidden\");\n });\n resetTimer();\n };\n\n const hideControls = () => {\n isMouseOver = false;\n // Clear any pending hide timeout\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n hideTimeout = null;\n }\n // Hide controls immediately when mouse leaves\n if (video && !video.paused) {\n controls.forEach((control) => {\n control.setAttribute(\"data-hidden\", \"true\");\n });\n }\n };\n\n const handleMouseMove = () => {\n if (isMouseOver) {\n // If controls are hidden, show them\n controls.forEach((control) => {\n if (control.hasAttribute(\"data-hidden\")) {\n control.removeAttribute(\"data-hidden\");\n }\n });\n resetTimer();\n }\n };\n\n const handlePlay = () => {\n // Hide controls when video starts playing (autoplay)\n if (!isMouseOver) {\n controls.forEach((control) => {\n control.setAttribute(\"data-hidden\", \"true\");\n });\n }\n };\n\n videoWrapper.addEventListener(\"mouseenter\", showControls);\n videoWrapper.addEventListener(\"mouseleave\", hideControls);\n videoWrapper.addEventListener(\"mousemove\", handleMouseMove);\n video.addEventListener(\"pause\", showControls);\n video.addEventListener(\"play\", handlePlay);\n\n // Cleanup function\n return () => {\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n }\n videoWrapper.removeEventListener(\"mouseenter\", showControls);\n videoWrapper.removeEventListener(\"mouseleave\", hideControls);\n videoWrapper.removeEventListener(\"mousemove\", handleMouseMove);\n video.removeEventListener(\"pause\", showControls);\n video.removeEventListener(\"play\", handlePlay);\n };\n }\n }\n }, []);\n\n useEffect(() => {\n if (isFocused) {\n const handleClick = (event: MouseEvent) => {\n if (!videoWrapperRef.current?.contains(event.target as Node)) {\n setIsFocused(false);\n }\n };\n document.addEventListener(\"click\", handleClick);\n\n return () => {\n document.removeEventListener(\"click\", handleClick);\n };\n }\n }, [isFocused]);\n\n return (\n <VideoContext.Provider\n value={{\n videoRef,\n setVideoRef,\n config: { clickToPlay: true, ...config },\n error,\n setError,\n isFocused,\n setIsFocused,\n }}\n >\n <div\n ref={videoWrapperRef}\n data-zuude-video-wrapper\n onClick={() => setIsFocused(true)}\n {...props}\n >\n {children}\n </div>\n </VideoContext.Provider>\n );\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\";\nimport { Keyboards } from \"./keyboard\";\n\ninterface Props extends Omit<React.ComponentProps<\"video\">, \"autoPlay\"> {\n src: string;\n autoPlay?: VideoAutoplay;\n controls?: boolean;\n muteFallback?: (onMute: () => void) => React.ReactNode;\n}\n\nexport const Video = forwardRef<HTMLVideoElement, Props>(\n ({ src, autoPlay, muteFallback, controls, ...props }, ref) => {\n const { videoRef, setVideoRef, config, setError, error, isFocused } =\n 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 data-zuude-video\n src={src}\n onClick={config?.clickToPlay ? onPlay : undefined}\n autoPlay={autoPlay === \"force\" ? true : autoPlay}\n {...props}\n />\n\n {controls && isFocused && <Keyboards />}\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 type { VideoRef } from \"../types\";\n\nexport const useAutoplayByForce = (\n videoRef: VideoRef,\n enabled: boolean,\n setError?: (error: string | null) => void\n) => {\n React.useEffect(() => {\n if (!videoRef?.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await videoRef.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 (videoRef?.current) {\n videoRef.current.muted = true;\n try {\n await videoRef.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, videoRef?.current]);\n};\n","import { useEffect } from \"react\";\n\nexport const useHotKeys = (\n key: string,\n func: (event: KeyboardEvent) => void,\n enabled = true\n) => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === key) {\n event.preventDefault();\n func(event);\n }\n };\n\n useEffect(() => {\n if (!enabled) return;\n\n document.addEventListener(\"keydown\", handleKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [key, func, enabled]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSeek = (videoRef: VideoRef, value = 10) => {\n const seekForward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime += value;\n }\n }, [videoRef?.current]);\n\n const seekBackward = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.currentTime -= value;\n }\n }, [videoRef?.current]);\n\n return { seekForward, seekBackward };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (videoRef: VideoRef) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.paused\n ? videoRef.current.play()\n : videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n const play = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.play();\n }\n }, [videoRef?.current]);\n\n const pause = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.pause();\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!videoRef?.current.paused);\n\n if (videoRef?.current) {\n videoRef.current.addEventListener(\"play\", handlePlay);\n videoRef.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n videoRef.current?.removeEventListener(\"play\", handlePlay);\n videoRef.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [videoRef?.current]);\n\n return { togglePlay, isPlaying, play, pause };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (videoRef: VideoRef) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = !videoRef.current.muted;\n }\n }, [videoRef?.current]);\n\n const mute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = true;\n }\n }, [videoRef?.current]);\n\n const unmute = React.useCallback(() => {\n if (videoRef?.current) {\n videoRef.current.muted = false;\n }\n }, [videoRef?.current]);\n\n React.useEffect(() => {\n if (!videoRef?.current) return;\n\n // Set the initial state\n setIsMuted(videoRef.current.muted);\n\n const handleVolumeChange = () => {\n if (videoRef.current) {\n setIsMuted(videoRef.current.muted);\n }\n };\n\n videoRef.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n videoRef.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [videoRef?.current]);\n\n return { toggleMute, isMuted, mute, unmute };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nconst useFullscreen = (videoRef: VideoRef) => {\n const [isFullscreen, setIsFullscreen] = React.useState(false);\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n toggleFullscreen();\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, [isFullscreen]);\n\n const toggleFullscreen = () => {\n console.log(\"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 = video?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n if (video) {\n video.style.objectFit = \"contain\";\n }\n } else {\n document.exitFullscreen();\n if (video) {\n video.style.objectFit = \"cover\";\n }\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n\nexport { useFullscreen };\n","import type { VideoRef } from \"../types\";\n\nexport const usePictureInPicture = (videoRef: VideoRef) => {\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 const requestPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await video.requestPictureInPicture();\n };\n\n const exitPictureInPicture = async () => {\n const video = videoRef?.current;\n if (!video) return;\n await document.exitPictureInPicture();\n };\n\n return {\n togglePictureInPicture,\n requestPictureInPicture,\n exitPictureInPicture,\n };\n};\n","import { useVideo } from \"./wrapper\";\nimport { useHotKeys } from \"./hooks/use-hot-keys\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\n\nexport const Keyboards = () => {\n const { videoRef } = useVideo();\n\n const { seekForward, seekBackward } = useSeek(videoRef);\n const { togglePlay } = usePlayPause(videoRef);\n const { toggleMute } = useMuteUnmute(videoRef);\n const { toggleFullscreen } = useFullscreen(videoRef);\n const { togglePictureInPicture } = usePictureInPicture(videoRef);\n\n useHotKeys(\"ArrowRight\", () => {\n seekForward();\n });\n useHotKeys(\"ArrowLeft\", () => {\n seekBackward();\n });\n useHotKeys(\" \", () => {\n togglePlay();\n });\n useHotKeys(\"m\", () => {\n toggleMute();\n });\n useHotKeys(\"f\", () => {\n toggleFullscreen();\n });\n useHotKeys(\"p\", () => {\n togglePictureInPicture();\n });\n\n return null;\n};\n","import React, { RefObject, useRef } from \"react\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useVideo } from \"./wrapper\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { useSeek } from \"./hooks/use-seek\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useCurrentTime } from \"./hooks/use-current-time\";\n\ninterface ControlsProps extends React.ComponentProps<\"div\"> {\n children: React.ReactNode;\n asChild?: boolean;\n}\n\nconst Controls = React.memo(\n ({ children, asChild, ...props }: ControlsProps) => {\n return (\n <div data-zuude-hide-elements {...props}>\n {children}\n </div>\n );\n }\n);\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 { play } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={play}>\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 { pause } = usePlayPause(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={pause}>\n {children}\n </Element>\n );\n});\n\nconst Mute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { mute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={mute}>\n {children}\n </Element>\n );\n});\n\nconst Unmute = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { unmute } = useMuteUnmute(videoRef as RefObject<HTMLVideoElement>);\n\n return (\n <Element {...props} onClick={unmute}>\n {children}\n </Element>\n );\n});\n\nconst SeekForward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekForward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekForward}>\n {children}\n </Element>\n );\n});\n\nconst SeekBackward = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { seekBackward } = useSeek(videoRef as RefObject<HTMLVideoElement>, 10);\n\n return (\n <Element {...props} onClick={seekBackward}>\n {children}\n </Element>\n );\n});\n\nconst Fullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst ExitFullscreen = React.memo(({ children, asChild, ...props }: Props) => {\n const Element = asChild ? Slot : \"button\";\n const { videoRef } = useVideo();\n\n const { toggleFullscreen } = useFullscreen(videoRef);\n\n return (\n <Element {...props} onClick={toggleFullscreen}>\n {children}\n </Element>\n );\n});\n\nconst Loading = () => {\n return <div>Loading</div>;\n};\n\ninterface ShadowProps extends React.ComponentProps<\"div\"> {}\n\nconst Shadow = ({ ...props }: ShadowProps) => {\n const { videoRef } = useVideo();\n\n const shadowVideoRef = useRef<HTMLVideoElement>(null);\n\n React.useEffect(() => {\n const video = videoRef?.current;\n if (shadowVideoRef.current && video) {\n let currentTime = 0;\n let isPlaying = false;\n let interval: ReturnType<typeof setInterval> | null = null;\n\n const startInterval = () => {\n if (interval) clearInterval(interval);\n interval = setInterval(() => {\n console.log(\"currentTime\", video.currentTime);\n currentTime = video.currentTime;\n if (shadowVideoRef.current) {\n shadowVideoRef.current.currentTime = currentTime;\n }\n }, 100);\n };\n\n const stopInterval = () => {\n if (interval) {\n clearInterval(interval);\n interval = null;\n }\n };\n\n const handlePlay = () => {\n isPlaying = true;\n startInterval();\n };\n\n const handlePause = () => {\n isPlaying = false;\n stopInterval();\n };\n\n video.addEventListener(\"play\", handlePlay);\n video.addEventListener(\"pause\", handlePause);\n\n return () => {\n stopInterval();\n video.removeEventListener(\"play\", handlePlay);\n video.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [videoRef?.current]);\n\n if (!videoRef?.current) return null;\n\n return (\n <div\n {...props}\n style={{\n ...props.style,\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n pointerEvents: \"none\",\n }}\n >\n <video\n ref={shadowVideoRef}\n src={videoRef.current.src}\n muted\n playsInline\n style={{\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n }}\n />\n </div>\n );\n};\n\nexport {\n Controls,\n Play,\n Pause,\n Mute,\n Unmute,\n SeekForward,\n SeekBackward,\n Fullscreen,\n ExitFullscreen,\n Loading,\n Shadow,\n};\n"],"mappings":"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","names":["React","createContext","useContext","useEffect","useRef","useState","jsx","VideoContext","VideoProvider","children","config","onError","props","videoRef","setVideoRef","error","setError","isFocused","setIsFocused","videoWrapperRef","videoWrapper","controls","video","hideTimeout","hideDelay","isMouseOver","resetTimer","control","showControls","hideControls","handleMouseMove","handlePlay","handleClick","event","_a","useVideo","context","forwardRef","useEffect","useRef","React","useAutoplayByForce","videoRef","enabled","setError","_a","error","retryError","useEffect","useHotKeys","key","func","enabled","handleKeyDown","event","React","useSeek","videoRef","value","seekForward","seekBackward","React","usePlayPause","videoRef","isPlaying","setIsPlaying","togglePlay","play","pause","handlePlay","handlePause","_a","_b","React","useMuteUnmute","videoRef","isMuted","setIsMuted","toggleMute","mute","unmute","handleVolumeChange","_a","React","useFullscreen","videoRef","isFullscreen","setIsFullscreen","handleFullscreenChange","toggleFullscreen","isSafari","video","videoContainer","usePictureInPicture","videoRef","video","error","videoContainer","Keyboards","videoRef","useVideo","seekForward","seekBackward","useSeek","togglePlay","usePlayPause","toggleMute","useMuteUnmute","toggleFullscreen","useFullscreen","togglePictureInPicture","usePictureInPicture","useHotKeys","Fragment","jsx","jsxs","Video","forwardRef","src","autoPlay","muteFallback","controls","props","ref","videoRef","setVideoRef","config","setError","error","isFocused","useVideo","refVideo","useRef","useEffect","video","thirdPartyRef","useAutoplayByForce","onPlay","_a","_b","_c","Keyboards","React","useRef","Slot","jsx","Controls","React","children","asChild","props","Play","Element","Slot","videoRef","useVideo","play","usePlayPause","Pause","pause","Mute","mute","useMuteUnmute","Unmute","unmute","SeekForward","seekForward","useSeek","SeekBackward","seekBackward","Fullscreen","toggleFullscreen","useFullscreen","ExitFullscreen","Loading","Shadow","shadowVideoRef","useRef","video","currentTime","isPlaying","interval","startInterval","stopInterval","handlePlay","handlePause"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.1.5",
6
+ "version": "0.1.7",
7
7
  "main": "./dist/index.js",
8
8
  "module": "./dist/index.mjs",
9
9
  "types": "./dist/index.d.ts",