@zuude-ui/video 0.0.5 → 0.0.6
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.
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
2
|
-
`);var
|
|
1
|
+
"use strict";"use client";var de=Object.create;var b=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var ve=(e,t)=>{for(var n in t)b(e,n,{get:t[n],enumerable:!0})},A=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of pe(t))!ye.call(e,r)&&r!==n&&b(e,r,{get:()=>t[r],enumerable:!(o=me(t,r))||o.enumerable});return e};var d=(e,t,n)=>(n=e!=null?de(fe(e)):{},A(t||!e||!e.__esModule?b(n,"default",{value:e,enumerable:!0}):n,e)),Ee=e=>A(b({},"__esModule",{value:!0}),e);var Ve={};ve(Ve,{Video:()=>te,formatTime:()=>ue,useFullscreen:()=>M,useGetDuration:()=>oe,useMuteUnmute:()=>w,usePlayPause:()=>f,useStartAt:()=>C,useTimeline:()=>ne,useVideo:()=>c,useVolume:()=>re});module.exports=Ee(Ve);function I(e,{insertAt:t}={}){if(!e||typeof document=="undefined")return;let n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}I(`.reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}
|
|
2
|
+
`);var y=d(require("react"),1);var g=d(require("react"),1),z=require("react/jsx-runtime"),N=g.default.createContext(void 0),c=()=>{let e=g.default.useContext(N);if(!e)throw new Error("useVideo must be used within a VideoProvider");return e},k=({children:e,ref:t,duration:n,showHidingElement:o,setShowHidingElement:r})=>{let[s,u]=g.default.useState(!1);return(0,z.jsx)(N.Provider,{value:{ref:t,duration:n,isFullscreen:s,setIsFullscreen:u,showHidingElement:o,setShowHidingElement:r},children:e})};var q=d(require("react"),1),$=(e,t,n)=>{q.default.useEffect(()=>{if(!e.current||!t)return;(async()=>{var r;try{await((r=e.current)==null?void 0:r.play())}catch(s){if(s instanceof Error&&s.name==="NotAllowedError"){if(n==null||n("NotAllowedError"),console.error("NotAllowedError"),e.current){e.current.muted=!0;try{await e.current.play()}catch(u){console.error(u)}}}else console.error(s)}})()},[t,e.current])};var B=d(require("react"),1),C=(e,t)=>{B.default.useEffect(()=>{if(!e.current||!t)return;let n=e.current;n&&t&&(n.currentTime=t)},[t])};var D=d(require("react"),1),j=(e,t,n)=>{D.default.useEffect(()=>{if(!n||!e.current)return;let o=new IntersectionObserver(r=>{r.forEach(s=>{var u;e.current&&(s.isIntersecting?e.current.play().catch(a=>{e.current&&(e.current.pause(),e.current.muted=!0,e.current.play(),console.error(a))}):(u=e.current)==null||u.pause())})},{threshold:t!=null?t:.5});return o.observe(e.current),()=>{o.disconnect()}},[n,e.current])};var T=d(require("react"),1),f=(e,t)=>{let[n,o]=T.default.useState(!1),r=T.default.useCallback(()=>{e.current&&(e.current.paused?e.current.play():e.current.pause())},[e.current]);return T.default.useEffect(()=>{if(!t||!e.current)return;let s=()=>{o(!0)},u=()=>{o(!1)};if(o(!e.current.paused),e.current)return e.current.addEventListener("play",s),e.current.addEventListener("pause",u),()=>{var a,m;(a=e.current)==null||a.removeEventListener("play",s),(m=e.current)==null||m.removeEventListener("pause",u)}},[e.current,t]),{togglePlay:r,isPlaying:n}};var G=require("react/jsx-runtime"),U=()=>{let{ref:e}=c(),{togglePlay:t}=f(e,!0);return(0,G.jsx)("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},onClick:t})};var L=d(require("react"),1),w=(e,t)=>{let[n,o]=L.default.useState(!1),r=L.default.useCallback(()=>{e!=null&&e.current&&(e.current.muted=!e.current.muted)},[e.current]);return L.default.useEffect(()=>{if(!t||!e.current)return;o(e.current.muted);let s=()=>{e.current&&o(e.current.muted)};return e.current.addEventListener("volumechange",s),()=>{var u;(u=e.current)==null||u.removeEventListener("volumechange",s)}},[e.current,t]),{toggleMute:r,isMuted:n}};var W=d(require("react"),1);var M=()=>{let{ref:e,isFullscreen:t,setIsFullscreen:n}=c();W.default.useEffect(()=>{let r=()=>{n==null||n(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",r),()=>document.removeEventListener("fullscreenchange",r)},[]);let o=()=>{var a;let r=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),s=e.current;if(s&&r){if(s.webkitEnterFullscreen){s.webkitEnterFullscreen();return}else if(s.requestFullscreen){s.requestFullscreen();return}}let u=(a=e.current)==null?void 0:a.closest("[data-zuude-video-wrapper]");u&&(t?document.exitFullscreen():u.requestFullscreen())};return{isFullscreen:t!=null?t:!1,toggleFullscreen:o}};var J=d(require("react"),1);var K=()=>{let{ref:e,isPictureInPicture:t,setIsPictureInPicture:n}=c();J.default.useEffect(()=>{let r=()=>{n==null||n(!!document.pictureInPictureElement)};return document.addEventListener("pictureinpicturechange",r),()=>document.removeEventListener("pictureinpicturechange",r)},[]);let o=async()=>{let r=e.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 a=r.closest("[data-zuude-video-wrapper]");a&&(document.fullscreenElement?await document.exitFullscreen():await a.requestFullscreen())}}};return{isPictureInPicture:t!=null?t:!1,togglePictureInPicture:o}};var H=d(require("react"),1),Q=(e,t)=>{let[n,o]=H.default.useState(1),r=s=>{o(s)};return H.default.useEffect(()=>{!t||!e.current||(e.current.playbackRate=n)},[n,t,e.current]),{speed:n,onChangeSpeed:r}};var X=({ref:e,children:t})=>{let{duration:n,showHidingElement:o}=c(),{togglePlay:r,isPlaying:s}=f(e,typeof t=="function"),{speed:u,onChangeSpeed:a}=Q(e,typeof t=="function"),{toggleMute:m,isMuted:p}=w(e,typeof t=="function"),{isFullscreen:E,toggleFullscreen:S}=M(),{isPictureInPicture:x,togglePictureInPicture:i}=K();return typeof t!="function"?null:t({isPlaying:s,togglePlay:r,isMuted:p,toggleMute:m,speed:u,onChangeSpeed:a,isFullscreen:E,toggleFullscreen:S,isPictureInPicture:x,togglePictureInPicture:i,duration:n,showHidingElement:o!=null?o:!1})};var Y=d(require("react"),1);var _=require("react/jsx-runtime"),Z=Y.default.forwardRef(({children:e,className:t,...n})=>{let{ref:o}=c(),{isPlaying:r}=f(o,!0),{showHidingElement:s,setShowHidingElement:u}=c();return(0,_.jsx)("div",{"data-zuude-hiding-element":!0,"data-show":!r||s,className:t,onMouseEnter:()=>{u==null||u(!0)},onMouseLeave:()=>{u==null||u(!1)},...n,children:e})});var P=require("react/jsx-runtime"),ee=y.default.forwardRef(({children:e,autoPlay:t,className:n,ratio:o,config:r,controls:s,pause:u,...a},m)=>{let[p,E]=y.default.useState(null),[S,x]=y.default.useState(null),i=m||y.default.useRef(null),[se,R]=y.default.useState(!1),v=y.default.useRef(null),ie=()=>{var l;(l=i.current)!=null&&l.paused||(R(!0),v.current&&clearTimeout(v.current))},ae=()=>{var l;(l=i.current)!=null&&l.paused||(R(!1),v.current&&clearTimeout(v.current))},ce=()=>{var l;(l=i.current)!=null&&l.paused||(R(!0),v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{R(!1)},3e3))};return y.default.useEffect(()=>{var l,V;u!==void 0&&(u?(l=i.current)==null||l.pause():(V=i.current)==null||V.play())},[u,i.current]),$(i,t==="force"&&a.muted===void 0&&!(r!=null&&r.autoplayOnVisible),x),C(i,r==null?void 0:r.startAt),j(i,typeof(r==null?void 0:r.autoplayOnVisible)=="number"?r.autoplayOnVisible:void 0,r==null?void 0:r.autoplayOnVisible),(0,P.jsx)(k,{ref:i,duration:p,showHidingElement:se,setShowHidingElement:R,children:(0,P.jsxs)("div",{"data-zuude-video-wrapper":!0,style:{aspectRatio:o},className:n,children:[(0,P.jsx)("video",{"data-zuude-video":!0,ref:i,autoPlay:r!=null&&r.autoplayOnVisible?!1:t==="force"?!0:t,playsInline:!0,onMouseEnter:ie,onMouseLeave:ae,onMouseMove:ce,onLoadedMetadata:l=>{console.log("loaded metadata"),E(l.target.duration)},onTimeUpdate:l=>{if(r!=null&&r.range){let[V,le]=r.range;i.current.currentTime<V&&(i.current.currentTime=V),i.current.currentTime>le&&(i.current.currentTime=V)}},...a}),typeof e=="function"?(0,P.jsx)(X,{ref:i,children:e}):e,S==="NotAllowedError"&&typeof(r==null?void 0:r.muteFallback)=="function"&&r.muteFallback(()=>{i.current&&(i.current.muted=!i.current.muted),x(null)})]})})});ee.displayName="Video";var te=Object.assign(ee,{PlayPauseOnVideo:U,HidingElement:Z});var O=d(require("react"),1);var re=()=>{let[e,t]=O.default.useState(100),{ref:n}=c(),o=r=>{t(r)};return O.default.useEffect(()=>{n.current&&(n.current.volume=e/100)},[e]),{volume:e,onChangeVolume:o}};var h=d(require("react"),1);var ne=()=>{let[e,t]=h.default.useState(!1),[n,o]=h.default.useState(0),[r,s]=h.default.useState(0),{ref:u,duration:a}=c();return h.default.useEffect(()=>{if(u.current&&e){let m=setInterval(()=>{var p,E;o(((p=u.current)==null?void 0:p.currentTime)||0),(E=u.current)!=null&&E.buffered.length&&s(u.current.buffered.end(u.current.buffered.length-1))},10);return()=>clearInterval(m)}},[u.current,e]),h.default.useEffect(()=>{if(u.current)return u.current.addEventListener("play",()=>t(!0)),u.current.addEventListener("pause",()=>t(!1)),()=>{var m,p;(m=u.current)==null||m.removeEventListener("play",()=>t(!0)),(p=u.current)==null||p.removeEventListener("pause",()=>t(!1))}},[]),{currentTime:n,duration:a,buffered:r,setCurrentTime:o}};var F=d(require("react"),1),oe=e=>{let[t,n]=F.default.useState(!1),[o,r]=F.default.useState(null);return F.default.useEffect(()=>{if(e.current)return n(!0),e.current.addEventListener("loadedmetadata",()=>{var s,u;r((u=(s=e.current)==null?void 0:s.duration)!=null?u:null),n(!1)}),e.current.addEventListener("error",()=>{n(!1)}),()=>{var s,u;(s=e.current)==null||s.removeEventListener("loadedmetadata",()=>{}),(u=e.current)==null||u.removeEventListener("error",()=>{})}},[e.current]),{duration:o,isLoading:t}};function ue(e,t="mm:ss"){let n=Math.floor(e/60),o=Math.floor(e%60);return t==="h:mm:ss"?`${Math.floor(n/60)}:${n}:${o<10?"0":""}${o}`:`${n}:${o<10?"0":""}${o}`}0&&(module.exports={Video,formatTime,useFullscreen,useGetDuration,useMuteUnmute,usePlayPause,useStartAt,useTimeline,useVideo,useVolume});
|
|
3
3
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","#style-inject:#style-inject","../src/styles.css","../src/video.tsx","../src/context.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-start-at.tsx","../src/hooks/use-autoplay-on-visible.tsx","../src/hooks/use-play-pause.tsx","../src/components/play-pause-on-video.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/hooks/use-speed.tsx","../src/function-children.tsx","../src/components/hiding-element.tsx","../src/hooks/use-volume.tsx","../src/hooks/use-timeline.tsx","../src/hooks/get-duration.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport \"./styles.css\";\n\nexport { Video } from \"./video\";\n\n// Context\nexport { useVideo } from \"./context\";\n\n// Hooks\nexport { useVolume } from \"./hooks/use-volume\";\nexport { useTimeline } from \"./hooks/use-timeline\";\nexport { useGetDuration } from \"./hooks/get-duration\";\nexport { usePlayPause } from \"./hooks/use-play-pause\";\nexport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nexport { useStartAt } from \"./hooks/use-start-at\";\nexport { useFullscreen } from \"./hooks/use-fullscreen\";\n\n// Utils\nexport { formatTime } from \"./utils\";\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}\\n\")","import React from \"react\";\n\n// 📦 Types\nimport type { VideoProps } from \"./types\";\n\n// 🔍 Context\nimport { VideoProvider } from \"./context\";\n\n// 🔗 Hooks\nimport { useAutoplayByForce } from \"./hooks/use-autoplay-by-force\";\nimport { useStartAt } from \"./hooks/use-start-at\";\nimport { useAutoplayOnVisible } from \"./hooks/use-autoplay-on-visible\";\n\n// 🔧 Components\nimport { PlayPauseOnVideo } from \"./components/play-pause-on-video\";\nimport { FunctionChildren } from \"./function-children\";\nimport { HidingElement, HidingElementProps } from \"./components/hiding-element\";\n\n/**\n * Main Video component structure\n * @param {VideoProps} props - Video component props\n */\n\nconst VideoComponent = React.forwardRef<\n HTMLVideoElement,\n VideoProps & { pause?: boolean }\n>(\n (\n { children, autoPlay, className, ratio, config, controls, pause, ...props },\n ref\n ) => {\n const [duration, setDuration] = React.useState<number | null>(null);\n\n const videoRef =\n (ref as React.RefObject<HTMLVideoElement>) ||\n React.useRef<HTMLVideoElement>(null);\n\n const [showHidingElement, setShowHidingElement] = React.useState(false);\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n const handleMouseEnter = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseLeave = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(false);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseMove = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setShowHidingElement(false);\n }, 3000);\n };\n\n React.useEffect(() => {\n if (pause !== undefined) {\n if (pause) {\n videoRef.current?.pause();\n } else {\n videoRef.current?.play();\n }\n }\n }, [pause, videoRef.current]);\n\n useAutoplayByForce(\n videoRef,\n autoPlay === \"force\" &&\n props.muted === undefined &&\n !config?.autoplayOnVisible\n );\n useStartAt(videoRef, config?.startAt);\n useAutoplayOnVisible(\n videoRef,\n typeof config?.autoplayOnVisible === \"number\"\n ? config.autoplayOnVisible\n : undefined,\n config?.autoplayOnVisible\n );\n\n return (\n <VideoProvider\n ref={videoRef}\n duration={duration}\n showHidingElement={showHidingElement}\n setShowHidingElement={setShowHidingElement}\n >\n <div\n data-zuude-video-wrapper\n style={{\n aspectRatio: ratio,\n }}\n className={className}\n >\n <video\n data-zuude-video\n ref={videoRef}\n autoPlay={\n config?.autoplayOnVisible\n ? false\n : autoPlay === \"force\"\n ? true\n : autoPlay\n }\n playsInline\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseMove={handleMouseMove}\n onLoadedMetadata={(e) => {\n setDuration((e.target as HTMLVideoElement).duration);\n }}\n onTimeUpdate={(e) => {\n /**\n * If the current time is less than the start time, set the current time to the start time\n * If the current time is greater than the end time, set the current time to the start time\n */\n if (config?.range) {\n const [start, end] = config.range;\n\n if (videoRef.current.currentTime < start) {\n videoRef.current.currentTime = start;\n }\n\n if (videoRef.current.currentTime > end) {\n videoRef.current.currentTime = start;\n }\n }\n }}\n {...props}\n />\n {typeof children === \"function\" ? (\n <FunctionChildren ref={videoRef} children={children} />\n ) : (\n children\n )}\n </div>\n </VideoProvider>\n );\n }\n);\n\nVideoComponent.displayName = \"Video\";\n\n/**\n * Using compound components pattern\n */\nexport const Video = Object.assign(VideoComponent, {\n PlayPauseOnVideo,\n HidingElement: HidingElement as React.ComponentType<HidingElementProps>,\n});\n","import React from \"react\";\nimport type { VideoContextType } from \"./types.js\";\n\nconst VideoContext = React.createContext<VideoContextType | undefined>(\n undefined\n);\n\nconst useVideo = () => {\n const context = React.useContext(VideoContext);\n if (!context) {\n throw new Error(\"useVideo must be used within a VideoProvider\");\n }\n return context;\n};\n\ninterface VideoProviderProps extends VideoContextType {\n children: React.ReactNode;\n}\n\nconst VideoProvider = ({\n children,\n ref,\n duration,\n showHidingElement,\n setShowHidingElement,\n}: VideoProviderProps) => {\n const [fullscreen, setFullscreen] = React.useState(false);\n\n return (\n <VideoContext.Provider\n value={{\n ref,\n duration,\n isFullscreen: fullscreen,\n setIsFullscreen: setFullscreen,\n showHidingElement,\n setShowHidingElement,\n }}\n >\n {children}\n </VideoContext.Provider>\n );\n};\n\nexport { useVideo, VideoProvider };\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (ref: VideoRef, enabled: boolean) => {\n React.useEffect(() => {\n if (!ref.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await ref.current?.play();\n } catch (error) {\n // If autoplay fails, try muting and playing again\n if (error instanceof Error && error.name === \"NotAllowedError\") {\n console.error(\"NotAllowedError\");\n if (ref.current) {\n ref.current.muted = true;\n try {\n await ref.current.play();\n } catch (retryError) {\n console.error(retryError);\n }\n }\n } else {\n console.error(error);\n }\n }\n };\n\n playVideo();\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoConfig, VideoRef } from \"../types\";\n\nexport const useStartAt = (ref: VideoRef, startAt?: VideoConfig[\"startAt\"]) => {\n React.useEffect(() => {\n if (!ref.current || !startAt) return;\n\n const video = ref.current;\n if (video && startAt) {\n video.currentTime = startAt;\n }\n }, [startAt]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useAutoplayOnVisible = (\n ref: VideoRef,\n threshold: number | undefined,\n enabled: boolean | number | null | undefined\n) => {\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (!ref.current) return;\n\n if (entry.isIntersecting) {\n ref.current.play().catch((error) => {\n if (!ref.current) return;\n\n ref.current.pause();\n ref.current.muted = true;\n ref.current.play();\n console.error(error);\n });\n } else {\n ref.current?.pause();\n }\n });\n },\n { threshold: threshold ?? 0.5 }\n );\n\n observer.observe(ref.current);\n\n return () => {\n observer.disconnect();\n };\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (ref: VideoRef, enabled: boolean) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (ref.current) {\n ref.current.paused ? ref.current.play() : ref.current.pause();\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!ref.current.paused);\n\n if (ref.current) {\n ref.current.addEventListener(\"play\", handlePlay);\n ref.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n ref.current?.removeEventListener(\"play\", handlePlay);\n ref.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [ref.current, enabled]);\n\n return { togglePlay, isPlaying };\n};\n","import { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport const PlayPauseOnVideo = () => {\n const { ref } = useVideo();\n\n const { togglePlay } = usePlayPause(ref, true);\n\n return (\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n onClick={togglePlay}\n ></div>\n );\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (ref: VideoRef, enabled: boolean) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (ref?.current) {\n ref.current.muted = !ref.current.muted;\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n // Set the initial state\n setIsMuted(ref.current.muted);\n\n const handleVolumeChange = () => {\n if (ref.current) {\n setIsMuted(ref.current.muted);\n }\n };\n\n ref.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n ref.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [ref.current, enabled]);\n\n return { toggleMute, isMuted };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useFullscreen = () => {\n const { ref, isFullscreen, setIsFullscreen } = useVideo();\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, []);\n\n const toggleFullscreen = () => {\n const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n const video = ref.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 = ref.current?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const usePictureInPicture = () => {\n const { ref, isPictureInPicture, setIsPictureInPicture } = useVideo();\n\n React.useEffect(() => {\n const handlePictureInPictureChange = () => {\n setIsPictureInPicture?.(!!document.pictureInPictureElement);\n };\n\n document.addEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n return () =>\n document.removeEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n }, []);\n\n const togglePictureInPicture = async () => {\n const video = ref.current;\n if (!video) return;\n\n try {\n if (document.pictureInPictureElement) {\n await document.exitPictureInPicture();\n } else {\n await video.requestPictureInPicture();\n }\n } catch (error) {\n // Fallback for browsers that don't support PiP\n const isSafari = /^((?!chrome|android).)*safari/i.test(\n navigator.userAgent\n );\n\n if (isSafari) {\n if ((video as any).webkitEnterFullscreen) {\n (video as any).webkitEnterFullscreen();\n } else if (video.requestFullscreen) {\n video.requestFullscreen();\n }\n } else {\n const videoContainer = video.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n if (videoContainer) {\n if (!document.fullscreenElement) {\n await videoContainer.requestFullscreen();\n } else {\n await document.exitFullscreen();\n }\n }\n }\n }\n };\n\n return {\n isPictureInPicture: isPictureInPicture ?? false,\n togglePictureInPicture,\n };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSpeed = (ref: VideoRef, enabled: boolean) => {\n const [speed, setSpeed] = React.useState(1);\n\n const onChangeSpeed = (speed: number) => {\n setSpeed(speed);\n };\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n ref.current.playbackRate = speed;\n }, [speed, enabled, ref.current]);\n\n return { speed, onChangeSpeed };\n};\n","import React from \"react\";\n\nimport type { VideoChildren } from \"./types\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useVideo } from \"./context\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\nimport { useSpeed } from \"./hooks/use-speed\";\n\nexport const FunctionChildren = ({\n ref,\n children,\n}: {\n ref: React.RefObject<HTMLVideoElement>;\n children: VideoChildren;\n}) => {\n const { duration, showHidingElement } = useVideo();\n\n /**\n * Only use these hooks if the children is a function\n */\n const { togglePlay, isPlaying } = usePlayPause(\n ref,\n typeof children === \"function\"\n );\n const { speed, onChangeSpeed } = useSpeed(\n ref,\n typeof children === \"function\"\n );\n const { toggleMute, isMuted } = useMuteUnmute(\n ref,\n typeof children === \"function\"\n );\n const { isFullscreen, toggleFullscreen } = useFullscreen();\n const { isPictureInPicture, togglePictureInPicture } = usePictureInPicture();\n\n if (typeof children !== \"function\") return null;\n\n return children({\n isPlaying,\n togglePlay,\n isMuted,\n toggleMute,\n speed,\n onChangeSpeed,\n isFullscreen,\n toggleFullscreen,\n isPictureInPicture,\n togglePictureInPicture,\n duration,\n showHidingElement: showHidingElement ?? false,\n });\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport interface HidingElementProps\n extends React.ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const HidingElement = React.forwardRef<\n HTMLDivElement,\n HidingElementProps\n>(({ children, className, ...props }: HidingElementProps) => {\n const { ref } = useVideo();\n const { isPlaying } = usePlayPause(ref, true);\n const { showHidingElement, setShowHidingElement } = useVideo();\n\n return (\n <div\n data-zuude-hiding-element\n data-show={!isPlaying || showHidingElement}\n className={className}\n onMouseEnter={() => {\n setShowHidingElement?.(true);\n }}\n onMouseLeave={() => {\n setShowHidingElement?.(false);\n }}\n {...props}\n >\n {children}\n </div>\n );\n});\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useVolume = () => {\n const [volume, setVolume] = React.useState(100);\n const { ref } = useVideo();\n\n const onChangeVolume = (volume: number) => {\n setVolume(volume);\n };\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.volume = volume / 100;\n }, [volume]);\n\n return { volume, onChangeVolume };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useTimeline = () => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n const [currentTime, setCurrentTime] = React.useState(0);\n const [buffered, setBuffered] = React.useState(0);\n\n const { ref, duration } = useVideo();\n\n React.useEffect(() => {\n if (ref.current && isPlaying) {\n const intervalId = setInterval(() => {\n setCurrentTime(ref.current?.currentTime || 0);\n\n if (ref.current?.buffered.length) {\n setBuffered(\n ref.current.buffered.end(ref.current.buffered.length - 1)\n );\n }\n }, 10);\n\n return () => clearInterval(intervalId);\n }\n }, [ref.current, isPlaying]);\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.addEventListener(\"play\", () => setIsPlaying(true));\n ref.current.addEventListener(\"pause\", () => setIsPlaying(false));\n\n return () => {\n ref.current?.removeEventListener(\"play\", () => setIsPlaying(true));\n ref.current?.removeEventListener(\"pause\", () => setIsPlaying(false));\n };\n }, []);\n\n return {\n currentTime,\n duration,\n buffered,\n setCurrentTime,\n };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useGetDuration = (url: string) => {\n const [isLoading, setIsLoading] = React.useState(false);\n const [duration, setDuration] = React.useState<number | null>(null);\n\n const { ref } = useVideo();\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n setIsLoading(true);\n\n const video = document.createElement(\"video\");\n\n video.src = url;\n video.muted = true;\n\n video.addEventListener(\"loadedmetadata\", () => {\n setDuration(video.duration);\n setIsLoading(false);\n });\n\n video.addEventListener(\"error\", () => {\n setIsLoading(false);\n });\n\n return () => {\n video.remove();\n };\n }, [url]);\n\n return { duration, isLoading };\n};\n","function formatTime(time: number, type: \"h:mm:ss\" | \"mm:ss\" = \"mm:ss\"): string {\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time % 60);\n if (type === \"h:mm:ss\") {\n const hours = Math.floor(minutes / 60);\n return `${hours}:${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n }\n return `${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n}\n\nexport { formatTime };\n"],"mappings":"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","names":["index_exports","__export","Video","formatTime","useFullscreen","useGetDuration","useMuteUnmute","usePlayPause","useStartAt","useTimeline","useVideo","useVolume","__toCommonJS","styleInject","css","insertAt","head","style","styleInject","import_react","import_react","import_jsx_runtime","VideoContext","React","useVideo","context","VideoProvider","children","ref","duration","showHidingElement","setShowHidingElement","fullscreen","setFullscreen","import_react","useAutoplayByForce","ref","enabled","React","_a","error","retryError","import_react","useStartAt","ref","startAt","React","video","import_react","useAutoplayOnVisible","ref","threshold","enabled","React","observer","entries","entry","_a","error","import_react","usePlayPause","ref","enabled","isPlaying","setIsPlaying","React","togglePlay","handlePlay","handlePause","_a","_b","import_jsx_runtime","PlayPauseOnVideo","ref","useVideo","togglePlay","usePlayPause","import_react","useMuteUnmute","ref","enabled","isMuted","setIsMuted","React","toggleMute","handleVolumeChange","_a","import_react","useFullscreen","ref","isFullscreen","setIsFullscreen","useVideo","React","handleFullscreenChange","toggleFullscreen","_a","isSafari","video","videoContainer","import_react","usePictureInPicture","ref","isPictureInPicture","setIsPictureInPicture","useVideo","React","handlePictureInPictureChange","togglePictureInPicture","video","error","videoContainer","import_react","useSpeed","ref","enabled","speed","setSpeed","React","onChangeSpeed","FunctionChildren","ref","children","duration","showHidingElement","useVideo","togglePlay","isPlaying","usePlayPause","speed","onChangeSpeed","useSpeed","toggleMute","isMuted","useMuteUnmute","isFullscreen","toggleFullscreen","useFullscreen","isPictureInPicture","togglePictureInPicture","usePictureInPicture","import_react","import_jsx_runtime","HidingElement","React","children","className","props","ref","useVideo","isPlaying","usePlayPause","showHidingElement","setShowHidingElement","import_jsx_runtime","VideoComponent","React","children","autoPlay","className","ratio","config","controls","pause","props","ref","duration","setDuration","videoRef","showHidingElement","setShowHidingElement","timeoutRef","handleMouseEnter","_a","handleMouseLeave","handleMouseMove","_b","useAutoplayByForce","useStartAt","useAutoplayOnVisible","VideoProvider","e","start","end","FunctionChildren","Video","PlayPauseOnVideo","HidingElement","import_react","useVolume","volume","setVolume","React","ref","useVideo","onChangeVolume","import_react","useTimeline","isPlaying","setIsPlaying","React","currentTime","setCurrentTime","buffered","setBuffered","ref","duration","useVideo","intervalId","_a","_b","import_react","useGetDuration","url","isLoading","setIsLoading","React","duration","setDuration","ref","useVideo","video","formatTime","time","type","minutes","seconds"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","#style-inject:#style-inject","../src/styles.css","../src/video.tsx","../src/context.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-start-at.tsx","../src/hooks/use-autoplay-on-visible.tsx","../src/hooks/use-play-pause.tsx","../src/components/play-pause-on-video.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/hooks/use-speed.tsx","../src/function-children.tsx","../src/components/hiding-element.tsx","../src/hooks/use-volume.tsx","../src/hooks/use-timeline.tsx","../src/hooks/use-get-duration.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport \"./styles.css\";\n\nexport { Video } from \"./video\";\n\n// Context\nexport { useVideo } from \"./context\";\n\n// Hooks\nexport { useVolume } from \"./hooks/use-volume\";\nexport { useTimeline } from \"./hooks/use-timeline\";\nexport { useGetDuration } from \"./hooks/use-get-duration\";\nexport { usePlayPause } from \"./hooks/use-play-pause\";\nexport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nexport { useStartAt } from \"./hooks/use-start-at\";\nexport { useFullscreen } from \"./hooks/use-fullscreen\";\n\n// Utils\nexport { formatTime } from \"./utils\";\n","\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}\\n\")","import React from \"react\";\n\n// 📦 Types\nimport type { VideoProps } from \"./types\";\n\n// 🔍 Context\nimport { VideoProvider } from \"./context\";\n\n// 🔗 Hooks\nimport { useAutoplayByForce } from \"./hooks/use-autoplay-by-force\";\nimport { useStartAt } from \"./hooks/use-start-at\";\nimport { useAutoplayOnVisible } from \"./hooks/use-autoplay-on-visible\";\n\n// 🔧 Components\nimport { PlayPauseOnVideo } from \"./components/play-pause-on-video\";\nimport { FunctionChildren } from \"./function-children\";\nimport { HidingElement, HidingElementProps } from \"./components/hiding-element\";\n\n/**\n * Main Video component structure\n * @param {VideoProps} props - Video component props\n */\n\nconst VideoComponent = React.forwardRef<\n HTMLVideoElement,\n VideoProps & { pause?: boolean }\n>(\n (\n { children, autoPlay, className, ratio, config, controls, pause, ...props },\n ref\n ) => {\n const [duration, setDuration] = React.useState<number | null>(null);\n const [error, setError] = React.useState<string | null>(null);\n\n const videoRef =\n (ref as React.RefObject<HTMLVideoElement>) ||\n React.useRef<HTMLVideoElement>(null);\n\n const [showHidingElement, setShowHidingElement] = React.useState(false);\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n const handleMouseEnter = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseLeave = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(false);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseMove = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setShowHidingElement(false);\n }, 3000);\n };\n\n React.useEffect(() => {\n if (pause !== undefined) {\n if (pause) {\n videoRef.current?.pause();\n } else {\n videoRef.current?.play();\n }\n }\n }, [pause, videoRef.current]);\n\n useAutoplayByForce(\n videoRef,\n autoPlay === \"force\" &&\n props.muted === undefined &&\n !config?.autoplayOnVisible,\n setError\n );\n useStartAt(videoRef, config?.startAt);\n useAutoplayOnVisible(\n videoRef,\n typeof config?.autoplayOnVisible === \"number\"\n ? config.autoplayOnVisible\n : undefined,\n config?.autoplayOnVisible\n );\n\n return (\n <VideoProvider\n ref={videoRef}\n duration={duration}\n showHidingElement={showHidingElement}\n setShowHidingElement={setShowHidingElement}\n >\n <div\n data-zuude-video-wrapper\n style={{\n aspectRatio: ratio,\n }}\n className={className}\n >\n <video\n data-zuude-video\n ref={videoRef}\n autoPlay={\n config?.autoplayOnVisible\n ? false\n : autoPlay === \"force\"\n ? true\n : autoPlay\n }\n playsInline\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseMove={handleMouseMove}\n onLoadedMetadata={(e) => {\n console.log(\"loaded metadata\");\n setDuration((e.target as HTMLVideoElement).duration);\n }}\n onTimeUpdate={(e) => {\n /**\n * If the current time is less than the start time, set the current time to the start time\n * If the current time is greater than the end time, set the current time to the start time\n */\n if (config?.range) {\n const [start, end] = config.range;\n\n if (videoRef.current.currentTime < start) {\n videoRef.current.currentTime = start;\n }\n\n if (videoRef.current.currentTime > end) {\n videoRef.current.currentTime = start;\n }\n }\n }}\n {...props}\n />\n {typeof children === \"function\" ? (\n <FunctionChildren ref={videoRef} children={children} />\n ) : (\n children\n )}\n {error === \"NotAllowedError\" &&\n typeof config?.muteFallback === \"function\" &&\n config.muteFallback(() => {\n if (videoRef.current) {\n videoRef.current.muted = !videoRef.current.muted;\n }\n setError(null);\n })}\n </div>\n </VideoProvider>\n );\n }\n);\n\nVideoComponent.displayName = \"Video\";\n\n/**\n * Using compound components pattern\n */\nexport const Video = Object.assign(VideoComponent, {\n PlayPauseOnVideo,\n HidingElement: HidingElement as React.ComponentType<HidingElementProps>,\n});\n","import React from \"react\";\nimport type { VideoContextType } from \"./types.js\";\n\nconst VideoContext = React.createContext<VideoContextType | undefined>(\n undefined\n);\n\nconst useVideo = () => {\n const context = React.useContext(VideoContext);\n if (!context) {\n throw new Error(\"useVideo must be used within a VideoProvider\");\n }\n return context;\n};\n\ninterface VideoProviderProps extends VideoContextType {\n children: React.ReactNode;\n}\n\nconst VideoProvider = ({\n children,\n ref,\n duration,\n showHidingElement,\n setShowHidingElement,\n}: VideoProviderProps) => {\n const [fullscreen, setFullscreen] = React.useState(false);\n\n return (\n <VideoContext.Provider\n value={{\n ref,\n duration,\n isFullscreen: fullscreen,\n setIsFullscreen: setFullscreen,\n showHidingElement,\n setShowHidingElement,\n }}\n >\n {children}\n </VideoContext.Provider>\n );\n};\n\nexport { useVideo, VideoProvider };\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (\n ref: VideoRef,\n enabled: boolean,\n setError?: (error: string | null) => void\n) => {\n React.useEffect(() => {\n if (!ref.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await ref.current?.play();\n } catch (error) {\n // If autoplay fails, try muting and playing again\n if (error instanceof Error && error.name === \"NotAllowedError\") {\n setError?.(\"NotAllowedError\");\n console.error(\"NotAllowedError\");\n if (ref.current) {\n ref.current.muted = true;\n try {\n await ref.current.play();\n } catch (retryError) {\n console.error(retryError);\n }\n }\n } else {\n console.error(error);\n }\n }\n };\n\n playVideo();\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoConfig, VideoRef } from \"../types\";\n\nexport const useStartAt = (ref: VideoRef, startAt?: VideoConfig[\"startAt\"]) => {\n React.useEffect(() => {\n if (!ref.current || !startAt) return;\n\n const video = ref.current;\n if (video && startAt) {\n video.currentTime = startAt;\n }\n }, [startAt]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useAutoplayOnVisible = (\n ref: VideoRef,\n threshold: number | undefined,\n enabled: boolean | number | null | undefined\n) => {\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (!ref.current) return;\n\n if (entry.isIntersecting) {\n ref.current.play().catch((error) => {\n if (!ref.current) return;\n\n ref.current.pause();\n ref.current.muted = true;\n ref.current.play();\n console.error(error);\n });\n } else {\n ref.current?.pause();\n }\n });\n },\n { threshold: threshold ?? 0.5 }\n );\n\n observer.observe(ref.current);\n\n return () => {\n observer.disconnect();\n };\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (ref: VideoRef, enabled: boolean) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (ref.current) {\n ref.current.paused ? ref.current.play() : ref.current.pause();\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!ref.current.paused);\n\n if (ref.current) {\n ref.current.addEventListener(\"play\", handlePlay);\n ref.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n ref.current?.removeEventListener(\"play\", handlePlay);\n ref.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [ref.current, enabled]);\n\n return { togglePlay, isPlaying };\n};\n","import { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport const PlayPauseOnVideo = () => {\n const { ref } = useVideo();\n\n const { togglePlay } = usePlayPause(ref, true);\n\n return (\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n onClick={togglePlay}\n ></div>\n );\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (ref: VideoRef, enabled: boolean) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (ref?.current) {\n ref.current.muted = !ref.current.muted;\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n // Set the initial state\n setIsMuted(ref.current.muted);\n\n const handleVolumeChange = () => {\n if (ref.current) {\n setIsMuted(ref.current.muted);\n }\n };\n\n ref.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n ref.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [ref.current, enabled]);\n\n return { toggleMute, isMuted };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useFullscreen = () => {\n const { ref, isFullscreen, setIsFullscreen } = useVideo();\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, []);\n\n const toggleFullscreen = () => {\n const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n const video = ref.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 = ref.current?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const usePictureInPicture = () => {\n const { ref, isPictureInPicture, setIsPictureInPicture } = useVideo();\n\n React.useEffect(() => {\n const handlePictureInPictureChange = () => {\n setIsPictureInPicture?.(!!document.pictureInPictureElement);\n };\n\n document.addEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n return () =>\n document.removeEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n }, []);\n\n const togglePictureInPicture = async () => {\n const video = ref.current;\n if (!video) return;\n\n try {\n if (document.pictureInPictureElement) {\n await document.exitPictureInPicture();\n } else {\n await video.requestPictureInPicture();\n }\n } catch (error) {\n // Fallback for browsers that don't support PiP\n const isSafari = /^((?!chrome|android).)*safari/i.test(\n navigator.userAgent\n );\n\n if (isSafari) {\n if ((video as any).webkitEnterFullscreen) {\n (video as any).webkitEnterFullscreen();\n } else if (video.requestFullscreen) {\n video.requestFullscreen();\n }\n } else {\n const videoContainer = video.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n if (videoContainer) {\n if (!document.fullscreenElement) {\n await videoContainer.requestFullscreen();\n } else {\n await document.exitFullscreen();\n }\n }\n }\n }\n };\n\n return {\n isPictureInPicture: isPictureInPicture ?? false,\n togglePictureInPicture,\n };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSpeed = (ref: VideoRef, enabled: boolean) => {\n const [speed, setSpeed] = React.useState(1);\n\n const onChangeSpeed = (speed: number) => {\n setSpeed(speed);\n };\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n ref.current.playbackRate = speed;\n }, [speed, enabled, ref.current]);\n\n return { speed, onChangeSpeed };\n};\n","import React from \"react\";\n\nimport type { VideoChildren } from \"./types\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useVideo } from \"./context\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\nimport { useSpeed } from \"./hooks/use-speed\";\n\nexport const FunctionChildren = ({\n ref,\n children,\n}: {\n ref: React.RefObject<HTMLVideoElement>;\n children: VideoChildren;\n}) => {\n const { duration, showHidingElement } = useVideo();\n\n /**\n * Only use these hooks if the children is a function\n */\n const { togglePlay, isPlaying } = usePlayPause(\n ref,\n typeof children === \"function\"\n );\n const { speed, onChangeSpeed } = useSpeed(\n ref,\n typeof children === \"function\"\n );\n const { toggleMute, isMuted } = useMuteUnmute(\n ref,\n typeof children === \"function\"\n );\n const { isFullscreen, toggleFullscreen } = useFullscreen();\n const { isPictureInPicture, togglePictureInPicture } = usePictureInPicture();\n\n if (typeof children !== \"function\") return null;\n\n return children({\n isPlaying,\n togglePlay,\n isMuted,\n toggleMute,\n speed,\n onChangeSpeed,\n isFullscreen,\n toggleFullscreen,\n isPictureInPicture,\n togglePictureInPicture,\n duration,\n showHidingElement: showHidingElement ?? false,\n });\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport interface HidingElementProps\n extends React.ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const HidingElement = React.forwardRef<\n HTMLDivElement,\n HidingElementProps\n>(({ children, className, ...props }: HidingElementProps) => {\n const { ref } = useVideo();\n const { isPlaying } = usePlayPause(ref, true);\n const { showHidingElement, setShowHidingElement } = useVideo();\n\n return (\n <div\n data-zuude-hiding-element\n data-show={!isPlaying || showHidingElement}\n className={className}\n onMouseEnter={() => {\n setShowHidingElement?.(true);\n }}\n onMouseLeave={() => {\n setShowHidingElement?.(false);\n }}\n {...props}\n >\n {children}\n </div>\n );\n});\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useVolume = () => {\n const [volume, setVolume] = React.useState(100);\n const { ref } = useVideo();\n\n const onChangeVolume = (volume: number) => {\n setVolume(volume);\n };\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.volume = volume / 100;\n }, [volume]);\n\n return { volume, onChangeVolume };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useTimeline = () => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n const [currentTime, setCurrentTime] = React.useState(0);\n const [buffered, setBuffered] = React.useState(0);\n\n const { ref, duration } = useVideo();\n\n React.useEffect(() => {\n if (ref.current && isPlaying) {\n const intervalId = setInterval(() => {\n setCurrentTime(ref.current?.currentTime || 0);\n\n if (ref.current?.buffered.length) {\n setBuffered(\n ref.current.buffered.end(ref.current.buffered.length - 1)\n );\n }\n }, 10);\n\n return () => clearInterval(intervalId);\n }\n }, [ref.current, isPlaying]);\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.addEventListener(\"play\", () => setIsPlaying(true));\n ref.current.addEventListener(\"pause\", () => setIsPlaying(false));\n\n return () => {\n ref.current?.removeEventListener(\"play\", () => setIsPlaying(true));\n ref.current?.removeEventListener(\"pause\", () => setIsPlaying(false));\n };\n }, []);\n\n return {\n currentTime,\n duration,\n buffered,\n setCurrentTime,\n };\n};\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useGetDuration = (ref: VideoRef) => {\n const [isLoading, setIsLoading] = React.useState(false);\n const [duration, setDuration] = React.useState<number | null>(null);\n\n React.useEffect(() => {\n if (!ref.current) return;\n setIsLoading(true);\n\n ref.current.addEventListener(\"loadedmetadata\", () => {\n setDuration(ref.current?.duration ?? null);\n setIsLoading(false);\n });\n\n ref.current.addEventListener(\"error\", () => {\n setIsLoading(false);\n });\n\n return () => {\n ref.current?.removeEventListener(\"loadedmetadata\", () => {});\n ref.current?.removeEventListener(\"error\", () => {});\n };\n }, [ref.current]);\n\n return { duration, isLoading };\n};\n","function formatTime(time: number, type: \"h:mm:ss\" | \"mm:ss\" = \"mm:ss\"): string {\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time % 60);\n if (type === \"h:mm:ss\") {\n const hours = Math.floor(minutes / 60);\n return `${hours}:${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n }\n return `${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n}\n\nexport { formatTime };\n"],"mappings":"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","names":["index_exports","__export","Video","formatTime","useFullscreen","useGetDuration","useMuteUnmute","usePlayPause","useStartAt","useTimeline","useVideo","useVolume","__toCommonJS","styleInject","css","insertAt","head","style","styleInject","import_react","import_react","import_jsx_runtime","VideoContext","React","useVideo","context","VideoProvider","children","ref","duration","showHidingElement","setShowHidingElement","fullscreen","setFullscreen","import_react","useAutoplayByForce","ref","enabled","setError","React","_a","error","retryError","import_react","useStartAt","ref","startAt","React","video","import_react","useAutoplayOnVisible","ref","threshold","enabled","React","observer","entries","entry","_a","error","import_react","usePlayPause","ref","enabled","isPlaying","setIsPlaying","React","togglePlay","handlePlay","handlePause","_a","_b","import_jsx_runtime","PlayPauseOnVideo","ref","useVideo","togglePlay","usePlayPause","import_react","useMuteUnmute","ref","enabled","isMuted","setIsMuted","React","toggleMute","handleVolumeChange","_a","import_react","useFullscreen","ref","isFullscreen","setIsFullscreen","useVideo","React","handleFullscreenChange","toggleFullscreen","_a","isSafari","video","videoContainer","import_react","usePictureInPicture","ref","isPictureInPicture","setIsPictureInPicture","useVideo","React","handlePictureInPictureChange","togglePictureInPicture","video","error","videoContainer","import_react","useSpeed","ref","enabled","speed","setSpeed","React","onChangeSpeed","FunctionChildren","ref","children","duration","showHidingElement","useVideo","togglePlay","isPlaying","usePlayPause","speed","onChangeSpeed","useSpeed","toggleMute","isMuted","useMuteUnmute","isFullscreen","toggleFullscreen","useFullscreen","isPictureInPicture","togglePictureInPicture","usePictureInPicture","import_react","import_jsx_runtime","HidingElement","React","children","className","props","ref","useVideo","isPlaying","usePlayPause","showHidingElement","setShowHidingElement","import_jsx_runtime","VideoComponent","React","children","autoPlay","className","ratio","config","controls","pause","props","ref","duration","setDuration","error","setError","videoRef","showHidingElement","setShowHidingElement","timeoutRef","handleMouseEnter","_a","handleMouseLeave","handleMouseMove","_b","useAutoplayByForce","useStartAt","useAutoplayOnVisible","VideoProvider","e","start","end","FunctionChildren","Video","PlayPauseOnVideo","HidingElement","import_react","useVolume","volume","setVolume","React","ref","useVideo","onChangeVolume","import_react","useTimeline","isPlaying","setIsPlaying","React","currentTime","setCurrentTime","buffered","setBuffered","ref","duration","useVideo","intervalId","_a","_b","import_react","useGetDuration","ref","isLoading","setIsLoading","React","duration","setDuration","_a","_b","formatTime","time","type","minutes","seconds"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -23,6 +23,7 @@ type VideoConfig = {
|
|
|
23
23
|
startAt?: number;
|
|
24
24
|
range?: [number, number];
|
|
25
25
|
autoplayOnVisible?: boolean | number;
|
|
26
|
+
muteFallback?: (toggleMute: () => void) => ReactNode;
|
|
26
27
|
};
|
|
27
28
|
interface VideoProps extends Omit<ComponentPropsWithoutRef<"video">, "children" | "autoPlay" | "controls"> {
|
|
28
29
|
children?: VideoChildren;
|
|
@@ -71,7 +72,7 @@ declare const useTimeline: () => {
|
|
|
71
72
|
setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
|
|
72
73
|
};
|
|
73
74
|
|
|
74
|
-
declare const useGetDuration: (
|
|
75
|
+
declare const useGetDuration: (ref: VideoRef) => {
|
|
75
76
|
duration: number | null;
|
|
76
77
|
isLoading: boolean;
|
|
77
78
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ type VideoConfig = {
|
|
|
23
23
|
startAt?: number;
|
|
24
24
|
range?: [number, number];
|
|
25
25
|
autoplayOnVisible?: boolean | number;
|
|
26
|
+
muteFallback?: (toggleMute: () => void) => ReactNode;
|
|
26
27
|
};
|
|
27
28
|
interface VideoProps extends Omit<ComponentPropsWithoutRef<"video">, "children" | "autoPlay" | "controls"> {
|
|
28
29
|
children?: VideoChildren;
|
|
@@ -71,7 +72,7 @@ declare const useTimeline: () => {
|
|
|
71
72
|
setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
|
|
72
73
|
};
|
|
73
74
|
|
|
74
|
-
declare const useGetDuration: (
|
|
75
|
+
declare const useGetDuration: (ref: VideoRef) => {
|
|
75
76
|
duration: number | null;
|
|
76
77
|
isLoading: boolean;
|
|
77
78
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use client";function
|
|
2
|
-
`);import
|
|
1
|
+
"use client";function x(e,{insertAt:r}={}){if(!e||typeof document=="undefined")return;let n=document.head||document.getElementsByTagName("head")[0],u=document.createElement("style");u.type="text/css",r==="top"&&n.firstChild?n.insertBefore(u,n.firstChild):n.appendChild(u),u.styleSheet?u.styleSheet.cssText=e:u.appendChild(document.createTextNode(e))}x(`.reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}
|
|
2
|
+
`);import y from"react";import b from"react";import{jsx as K}from"react/jsx-runtime";var S=b.createContext(void 0),c=()=>{let e=b.useContext(S);if(!e)throw new Error("useVideo must be used within a VideoProvider");return e},I=({children:e,ref:r,duration:n,showHidingElement:u,setShowHidingElement:t})=>{let[s,o]=b.useState(!1);return K(S.Provider,{value:{ref:r,duration:n,isFullscreen:s,setIsFullscreen:o,showHidingElement:u,setShowHidingElement:t},children:e})};import Q from"react";var H=(e,r,n)=>{Q.useEffect(()=>{if(!e.current||!r)return;(async()=>{var t;try{await((t=e.current)==null?void 0:t.play())}catch(s){if(s instanceof Error&&s.name==="NotAllowedError"){if(n==null||n("NotAllowedError"),console.error("NotAllowedError"),e.current){e.current.muted=!0;try{await e.current.play()}catch(o){console.error(o)}}}else console.error(s)}})()},[r,e.current])};import X from"react";var g=(e,r)=>{X.useEffect(()=>{if(!e.current||!r)return;let n=e.current;n&&r&&(n.currentTime=r)},[r])};import Y from"react";var O=(e,r,n)=>{Y.useEffect(()=>{if(!n||!e.current)return;let u=new IntersectionObserver(t=>{t.forEach(s=>{var o;e.current&&(s.isIntersecting?e.current.play().catch(a=>{e.current&&(e.current.pause(),e.current.muted=!0,e.current.play(),console.error(a))}):(o=e.current)==null||o.pause())})},{threshold:r!=null?r:.5});return u.observe(e.current),()=>{u.disconnect()}},[n,e.current])};import C from"react";var f=(e,r)=>{let[n,u]=C.useState(!1),t=C.useCallback(()=>{e.current&&(e.current.paused?e.current.play():e.current.pause())},[e.current]);return C.useEffect(()=>{if(!r||!e.current)return;let s=()=>{u(!0)},o=()=>{u(!1)};if(u(!e.current.paused),e.current)return e.current.addEventListener("play",s),e.current.addEventListener("pause",o),()=>{var a,d;(a=e.current)==null||a.removeEventListener("play",s),(d=e.current)==null||d.removeEventListener("pause",o)}},[e.current,r]),{togglePlay:t,isPlaying:n}};import{jsx as Z}from"react/jsx-runtime";var A=()=>{let{ref:e}=c(),{togglePlay:r}=f(e,!0);return Z("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},onClick:r})};import T from"react";var L=(e,r)=>{let[n,u]=T.useState(!1),t=T.useCallback(()=>{e!=null&&e.current&&(e.current.muted=!e.current.muted)},[e.current]);return T.useEffect(()=>{if(!r||!e.current)return;u(e.current.muted);let s=()=>{e.current&&u(e.current.muted)};return e.current.addEventListener("volumechange",s),()=>{var o;(o=e.current)==null||o.removeEventListener("volumechange",s)}},[e.current,r]),{toggleMute:t,isMuted:n}};import _ from"react";var w=()=>{let{ref:e,isFullscreen:r,setIsFullscreen:n}=c();_.useEffect(()=>{let t=()=>{n==null||n(!!document.fullscreenElement)};return document.addEventListener("fullscreenchange",t),()=>document.removeEventListener("fullscreenchange",t)},[]);let u=()=>{var a;let t=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),s=e.current;if(s&&t){if(s.webkitEnterFullscreen){s.webkitEnterFullscreen();return}else if(s.requestFullscreen){s.requestFullscreen();return}}let o=(a=e.current)==null?void 0:a.closest("[data-zuude-video-wrapper]");o&&(r?document.exitFullscreen():o.requestFullscreen())};return{isFullscreen:r!=null?r:!1,toggleFullscreen:u}};import ee from"react";var N=()=>{let{ref:e,isPictureInPicture:r,setIsPictureInPicture:n}=c();ee.useEffect(()=>{let t=()=>{n==null||n(!!document.pictureInPictureElement)};return document.addEventListener("pictureinpicturechange",t),()=>document.removeEventListener("pictureinpicturechange",t)},[]);let u=async()=>{let t=e.current;if(t)try{document.pictureInPictureElement?await document.exitPictureInPicture():await t.requestPictureInPicture()}catch(s){if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))t.webkitEnterFullscreen?t.webkitEnterFullscreen():t.requestFullscreen&&t.requestFullscreen();else{let a=t.closest("[data-zuude-video-wrapper]");a&&(document.fullscreenElement?await document.exitFullscreen():await a.requestFullscreen())}}};return{isPictureInPicture:r!=null?r:!1,togglePictureInPicture:u}};import k from"react";var z=(e,r)=>{let[n,u]=k.useState(1),t=s=>{u(s)};return k.useEffect(()=>{!r||!e.current||(e.current.playbackRate=n)},[n,r,e.current]),{speed:n,onChangeSpeed:t}};var q=({ref:e,children:r})=>{let{duration:n,showHidingElement:u}=c(),{togglePlay:t,isPlaying:s}=f(e,typeof r=="function"),{speed:o,onChangeSpeed:a}=z(e,typeof r=="function"),{toggleMute:d,isMuted:m}=L(e,typeof r=="function"),{isFullscreen:v,toggleFullscreen:R}=w(),{isPictureInPicture:h,togglePictureInPicture:i}=N();return typeof r!="function"?null:r({isPlaying:s,togglePlay:t,isMuted:m,toggleMute:d,speed:o,onChangeSpeed:a,isFullscreen:v,toggleFullscreen:R,isPictureInPicture:h,togglePictureInPicture:i,duration:n,showHidingElement:u!=null?u:!1})};import te from"react";import{jsx as re}from"react/jsx-runtime";var $=te.forwardRef(({children:e,className:r,...n})=>{let{ref:u}=c(),{isPlaying:t}=f(u,!0),{showHidingElement:s,setShowHidingElement:o}=c();return re("div",{"data-zuude-hiding-element":!0,"data-show":!t||s,className:r,onMouseEnter:()=>{o==null||o(!0)},onMouseLeave:()=>{o==null||o(!1)},...n,children:e})});import{jsx as M,jsxs as oe}from"react/jsx-runtime";var B=y.forwardRef(({children:e,autoPlay:r,className:n,ratio:u,config:t,controls:s,pause:o,...a},d)=>{let[m,v]=y.useState(null),[R,h]=y.useState(null),i=d||y.useRef(null),[j,V]=y.useState(!1),p=y.useRef(null),U=()=>{var l;(l=i.current)!=null&&l.paused||(V(!0),p.current&&clearTimeout(p.current))},G=()=>{var l;(l=i.current)!=null&&l.paused||(V(!1),p.current&&clearTimeout(p.current))},W=()=>{var l;(l=i.current)!=null&&l.paused||(V(!0),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{V(!1)},3e3))};return y.useEffect(()=>{var l,E;o!==void 0&&(o?(l=i.current)==null||l.pause():(E=i.current)==null||E.play())},[o,i.current]),H(i,r==="force"&&a.muted===void 0&&!(t!=null&&t.autoplayOnVisible),h),g(i,t==null?void 0:t.startAt),O(i,typeof(t==null?void 0:t.autoplayOnVisible)=="number"?t.autoplayOnVisible:void 0,t==null?void 0:t.autoplayOnVisible),M(I,{ref:i,duration:m,showHidingElement:j,setShowHidingElement:V,children:oe("div",{"data-zuude-video-wrapper":!0,style:{aspectRatio:u},className:n,children:[M("video",{"data-zuude-video":!0,ref:i,autoPlay:t!=null&&t.autoplayOnVisible?!1:r==="force"?!0:r,playsInline:!0,onMouseEnter:U,onMouseLeave:G,onMouseMove:W,onLoadedMetadata:l=>{console.log("loaded metadata"),v(l.target.duration)},onTimeUpdate:l=>{if(t!=null&&t.range){let[E,J]=t.range;i.current.currentTime<E&&(i.current.currentTime=E),i.current.currentTime>J&&(i.current.currentTime=E)}},...a}),typeof e=="function"?M(q,{ref:i,children:e}):e,R==="NotAllowedError"&&typeof(t==null?void 0:t.muteFallback)=="function"&&t.muteFallback(()=>{i.current&&(i.current.muted=!i.current.muted),h(null)})]})})});B.displayName="Video";var ne=Object.assign(B,{PlayPauseOnVideo:A,HidingElement:$});import D from"react";var ue=()=>{let[e,r]=D.useState(100),{ref:n}=c(),u=t=>{r(t)};return D.useEffect(()=>{n.current&&(n.current.volume=e/100)},[e]),{volume:e,onChangeVolume:u}};import P from"react";var se=()=>{let[e,r]=P.useState(!1),[n,u]=P.useState(0),[t,s]=P.useState(0),{ref:o,duration:a}=c();return P.useEffect(()=>{if(o.current&&e){let d=setInterval(()=>{var m,v;u(((m=o.current)==null?void 0:m.currentTime)||0),(v=o.current)!=null&&v.buffered.length&&s(o.current.buffered.end(o.current.buffered.length-1))},10);return()=>clearInterval(d)}},[o.current,e]),P.useEffect(()=>{if(o.current)return o.current.addEventListener("play",()=>r(!0)),o.current.addEventListener("pause",()=>r(!1)),()=>{var d,m;(d=o.current)==null||d.removeEventListener("play",()=>r(!0)),(m=o.current)==null||m.removeEventListener("pause",()=>r(!1))}},[]),{currentTime:n,duration:a,buffered:t,setCurrentTime:u}};import F from"react";var ie=e=>{let[r,n]=F.useState(!1),[u,t]=F.useState(null);return F.useEffect(()=>{if(e.current)return n(!0),e.current.addEventListener("loadedmetadata",()=>{var s,o;t((o=(s=e.current)==null?void 0:s.duration)!=null?o:null),n(!1)}),e.current.addEventListener("error",()=>{n(!1)}),()=>{var s,o;(s=e.current)==null||s.removeEventListener("loadedmetadata",()=>{}),(o=e.current)==null||o.removeEventListener("error",()=>{})}},[e.current]),{duration:u,isLoading:r}};function ae(e,r="mm:ss"){let n=Math.floor(e/60),u=Math.floor(e%60);return r==="h:mm:ss"?`${Math.floor(n/60)}:${n}:${u<10?"0":""}${u}`:`${n}:${u<10?"0":""}${u}`}export{ne as Video,ae as formatTime,w as useFullscreen,ie as useGetDuration,L as useMuteUnmute,f as usePlayPause,g as useStartAt,se as useTimeline,c as useVideo,ue as useVolume};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/video.tsx","../src/context.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-start-at.tsx","../src/hooks/use-autoplay-on-visible.tsx","../src/hooks/use-play-pause.tsx","../src/components/play-pause-on-video.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/hooks/use-speed.tsx","../src/function-children.tsx","../src/components/hiding-element.tsx","../src/hooks/use-volume.tsx","../src/hooks/use-timeline.tsx","../src/hooks/get-duration.tsx","../src/utils.ts"],"sourcesContent":["\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}\\n\")","import React from \"react\";\n\n// 📦 Types\nimport type { VideoProps } from \"./types\";\n\n// 🔍 Context\nimport { VideoProvider } from \"./context\";\n\n// 🔗 Hooks\nimport { useAutoplayByForce } from \"./hooks/use-autoplay-by-force\";\nimport { useStartAt } from \"./hooks/use-start-at\";\nimport { useAutoplayOnVisible } from \"./hooks/use-autoplay-on-visible\";\n\n// 🔧 Components\nimport { PlayPauseOnVideo } from \"./components/play-pause-on-video\";\nimport { FunctionChildren } from \"./function-children\";\nimport { HidingElement, HidingElementProps } from \"./components/hiding-element\";\n\n/**\n * Main Video component structure\n * @param {VideoProps} props - Video component props\n */\n\nconst VideoComponent = React.forwardRef<\n HTMLVideoElement,\n VideoProps & { pause?: boolean }\n>(\n (\n { children, autoPlay, className, ratio, config, controls, pause, ...props },\n ref\n ) => {\n const [duration, setDuration] = React.useState<number | null>(null);\n\n const videoRef =\n (ref as React.RefObject<HTMLVideoElement>) ||\n React.useRef<HTMLVideoElement>(null);\n\n const [showHidingElement, setShowHidingElement] = React.useState(false);\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n const handleMouseEnter = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseLeave = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(false);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseMove = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setShowHidingElement(false);\n }, 3000);\n };\n\n React.useEffect(() => {\n if (pause !== undefined) {\n if (pause) {\n videoRef.current?.pause();\n } else {\n videoRef.current?.play();\n }\n }\n }, [pause, videoRef.current]);\n\n useAutoplayByForce(\n videoRef,\n autoPlay === \"force\" &&\n props.muted === undefined &&\n !config?.autoplayOnVisible\n );\n useStartAt(videoRef, config?.startAt);\n useAutoplayOnVisible(\n videoRef,\n typeof config?.autoplayOnVisible === \"number\"\n ? config.autoplayOnVisible\n : undefined,\n config?.autoplayOnVisible\n );\n\n return (\n <VideoProvider\n ref={videoRef}\n duration={duration}\n showHidingElement={showHidingElement}\n setShowHidingElement={setShowHidingElement}\n >\n <div\n data-zuude-video-wrapper\n style={{\n aspectRatio: ratio,\n }}\n className={className}\n >\n <video\n data-zuude-video\n ref={videoRef}\n autoPlay={\n config?.autoplayOnVisible\n ? false\n : autoPlay === \"force\"\n ? true\n : autoPlay\n }\n playsInline\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseMove={handleMouseMove}\n onLoadedMetadata={(e) => {\n setDuration((e.target as HTMLVideoElement).duration);\n }}\n onTimeUpdate={(e) => {\n /**\n * If the current time is less than the start time, set the current time to the start time\n * If the current time is greater than the end time, set the current time to the start time\n */\n if (config?.range) {\n const [start, end] = config.range;\n\n if (videoRef.current.currentTime < start) {\n videoRef.current.currentTime = start;\n }\n\n if (videoRef.current.currentTime > end) {\n videoRef.current.currentTime = start;\n }\n }\n }}\n {...props}\n />\n {typeof children === \"function\" ? (\n <FunctionChildren ref={videoRef} children={children} />\n ) : (\n children\n )}\n </div>\n </VideoProvider>\n );\n }\n);\n\nVideoComponent.displayName = \"Video\";\n\n/**\n * Using compound components pattern\n */\nexport const Video = Object.assign(VideoComponent, {\n PlayPauseOnVideo,\n HidingElement: HidingElement as React.ComponentType<HidingElementProps>,\n});\n","import React from \"react\";\nimport type { VideoContextType } from \"./types.js\";\n\nconst VideoContext = React.createContext<VideoContextType | undefined>(\n undefined\n);\n\nconst useVideo = () => {\n const context = React.useContext(VideoContext);\n if (!context) {\n throw new Error(\"useVideo must be used within a VideoProvider\");\n }\n return context;\n};\n\ninterface VideoProviderProps extends VideoContextType {\n children: React.ReactNode;\n}\n\nconst VideoProvider = ({\n children,\n ref,\n duration,\n showHidingElement,\n setShowHidingElement,\n}: VideoProviderProps) => {\n const [fullscreen, setFullscreen] = React.useState(false);\n\n return (\n <VideoContext.Provider\n value={{\n ref,\n duration,\n isFullscreen: fullscreen,\n setIsFullscreen: setFullscreen,\n showHidingElement,\n setShowHidingElement,\n }}\n >\n {children}\n </VideoContext.Provider>\n );\n};\n\nexport { useVideo, VideoProvider };\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (ref: VideoRef, enabled: boolean) => {\n React.useEffect(() => {\n if (!ref.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await ref.current?.play();\n } catch (error) {\n // If autoplay fails, try muting and playing again\n if (error instanceof Error && error.name === \"NotAllowedError\") {\n console.error(\"NotAllowedError\");\n if (ref.current) {\n ref.current.muted = true;\n try {\n await ref.current.play();\n } catch (retryError) {\n console.error(retryError);\n }\n }\n } else {\n console.error(error);\n }\n }\n };\n\n playVideo();\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoConfig, VideoRef } from \"../types\";\n\nexport const useStartAt = (ref: VideoRef, startAt?: VideoConfig[\"startAt\"]) => {\n React.useEffect(() => {\n if (!ref.current || !startAt) return;\n\n const video = ref.current;\n if (video && startAt) {\n video.currentTime = startAt;\n }\n }, [startAt]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useAutoplayOnVisible = (\n ref: VideoRef,\n threshold: number | undefined,\n enabled: boolean | number | null | undefined\n) => {\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (!ref.current) return;\n\n if (entry.isIntersecting) {\n ref.current.play().catch((error) => {\n if (!ref.current) return;\n\n ref.current.pause();\n ref.current.muted = true;\n ref.current.play();\n console.error(error);\n });\n } else {\n ref.current?.pause();\n }\n });\n },\n { threshold: threshold ?? 0.5 }\n );\n\n observer.observe(ref.current);\n\n return () => {\n observer.disconnect();\n };\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (ref: VideoRef, enabled: boolean) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (ref.current) {\n ref.current.paused ? ref.current.play() : ref.current.pause();\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!ref.current.paused);\n\n if (ref.current) {\n ref.current.addEventListener(\"play\", handlePlay);\n ref.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n ref.current?.removeEventListener(\"play\", handlePlay);\n ref.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [ref.current, enabled]);\n\n return { togglePlay, isPlaying };\n};\n","import { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport const PlayPauseOnVideo = () => {\n const { ref } = useVideo();\n\n const { togglePlay } = usePlayPause(ref, true);\n\n return (\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n onClick={togglePlay}\n ></div>\n );\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (ref: VideoRef, enabled: boolean) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (ref?.current) {\n ref.current.muted = !ref.current.muted;\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n // Set the initial state\n setIsMuted(ref.current.muted);\n\n const handleVolumeChange = () => {\n if (ref.current) {\n setIsMuted(ref.current.muted);\n }\n };\n\n ref.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n ref.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [ref.current, enabled]);\n\n return { toggleMute, isMuted };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useFullscreen = () => {\n const { ref, isFullscreen, setIsFullscreen } = useVideo();\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, []);\n\n const toggleFullscreen = () => {\n const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n const video = ref.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 = ref.current?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const usePictureInPicture = () => {\n const { ref, isPictureInPicture, setIsPictureInPicture } = useVideo();\n\n React.useEffect(() => {\n const handlePictureInPictureChange = () => {\n setIsPictureInPicture?.(!!document.pictureInPictureElement);\n };\n\n document.addEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n return () =>\n document.removeEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n }, []);\n\n const togglePictureInPicture = async () => {\n const video = ref.current;\n if (!video) return;\n\n try {\n if (document.pictureInPictureElement) {\n await document.exitPictureInPicture();\n } else {\n await video.requestPictureInPicture();\n }\n } catch (error) {\n // Fallback for browsers that don't support PiP\n const isSafari = /^((?!chrome|android).)*safari/i.test(\n navigator.userAgent\n );\n\n if (isSafari) {\n if ((video as any).webkitEnterFullscreen) {\n (video as any).webkitEnterFullscreen();\n } else if (video.requestFullscreen) {\n video.requestFullscreen();\n }\n } else {\n const videoContainer = video.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n if (videoContainer) {\n if (!document.fullscreenElement) {\n await videoContainer.requestFullscreen();\n } else {\n await document.exitFullscreen();\n }\n }\n }\n }\n };\n\n return {\n isPictureInPicture: isPictureInPicture ?? false,\n togglePictureInPicture,\n };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSpeed = (ref: VideoRef, enabled: boolean) => {\n const [speed, setSpeed] = React.useState(1);\n\n const onChangeSpeed = (speed: number) => {\n setSpeed(speed);\n };\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n ref.current.playbackRate = speed;\n }, [speed, enabled, ref.current]);\n\n return { speed, onChangeSpeed };\n};\n","import React from \"react\";\n\nimport type { VideoChildren } from \"./types\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useVideo } from \"./context\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\nimport { useSpeed } from \"./hooks/use-speed\";\n\nexport const FunctionChildren = ({\n ref,\n children,\n}: {\n ref: React.RefObject<HTMLVideoElement>;\n children: VideoChildren;\n}) => {\n const { duration, showHidingElement } = useVideo();\n\n /**\n * Only use these hooks if the children is a function\n */\n const { togglePlay, isPlaying } = usePlayPause(\n ref,\n typeof children === \"function\"\n );\n const { speed, onChangeSpeed } = useSpeed(\n ref,\n typeof children === \"function\"\n );\n const { toggleMute, isMuted } = useMuteUnmute(\n ref,\n typeof children === \"function\"\n );\n const { isFullscreen, toggleFullscreen } = useFullscreen();\n const { isPictureInPicture, togglePictureInPicture } = usePictureInPicture();\n\n if (typeof children !== \"function\") return null;\n\n return children({\n isPlaying,\n togglePlay,\n isMuted,\n toggleMute,\n speed,\n onChangeSpeed,\n isFullscreen,\n toggleFullscreen,\n isPictureInPicture,\n togglePictureInPicture,\n duration,\n showHidingElement: showHidingElement ?? false,\n });\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport interface HidingElementProps\n extends React.ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const HidingElement = React.forwardRef<\n HTMLDivElement,\n HidingElementProps\n>(({ children, className, ...props }: HidingElementProps) => {\n const { ref } = useVideo();\n const { isPlaying } = usePlayPause(ref, true);\n const { showHidingElement, setShowHidingElement } = useVideo();\n\n return (\n <div\n data-zuude-hiding-element\n data-show={!isPlaying || showHidingElement}\n className={className}\n onMouseEnter={() => {\n setShowHidingElement?.(true);\n }}\n onMouseLeave={() => {\n setShowHidingElement?.(false);\n }}\n {...props}\n >\n {children}\n </div>\n );\n});\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useVolume = () => {\n const [volume, setVolume] = React.useState(100);\n const { ref } = useVideo();\n\n const onChangeVolume = (volume: number) => {\n setVolume(volume);\n };\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.volume = volume / 100;\n }, [volume]);\n\n return { volume, onChangeVolume };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useTimeline = () => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n const [currentTime, setCurrentTime] = React.useState(0);\n const [buffered, setBuffered] = React.useState(0);\n\n const { ref, duration } = useVideo();\n\n React.useEffect(() => {\n if (ref.current && isPlaying) {\n const intervalId = setInterval(() => {\n setCurrentTime(ref.current?.currentTime || 0);\n\n if (ref.current?.buffered.length) {\n setBuffered(\n ref.current.buffered.end(ref.current.buffered.length - 1)\n );\n }\n }, 10);\n\n return () => clearInterval(intervalId);\n }\n }, [ref.current, isPlaying]);\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.addEventListener(\"play\", () => setIsPlaying(true));\n ref.current.addEventListener(\"pause\", () => setIsPlaying(false));\n\n return () => {\n ref.current?.removeEventListener(\"play\", () => setIsPlaying(true));\n ref.current?.removeEventListener(\"pause\", () => setIsPlaying(false));\n };\n }, []);\n\n return {\n currentTime,\n duration,\n buffered,\n setCurrentTime,\n };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useGetDuration = (url: string) => {\n const [isLoading, setIsLoading] = React.useState(false);\n const [duration, setDuration] = React.useState<number | null>(null);\n\n const { ref } = useVideo();\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n setIsLoading(true);\n\n const video = document.createElement(\"video\");\n\n video.src = url;\n video.muted = true;\n\n video.addEventListener(\"loadedmetadata\", () => {\n setDuration(video.duration);\n setIsLoading(false);\n });\n\n video.addEventListener(\"error\", () => {\n setIsLoading(false);\n });\n\n return () => {\n video.remove();\n };\n }, [url]);\n\n return { duration, isLoading };\n};\n","function formatTime(time: number, type: \"h:mm:ss\" | \"mm:ss\" = \"mm:ss\"): string {\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time % 60);\n if (type === \"h:mm:ss\") {\n const hours = Math.floor(minutes / 60);\n return `${hours}:${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n }\n return `${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n}\n\nexport { formatTime };\n"],"mappings":"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","names":["styleInject","css","insertAt","head","style","styleInject","React","React","jsx","VideoContext","useVideo","context","VideoProvider","children","ref","duration","showHidingElement","setShowHidingElement","fullscreen","setFullscreen","React","useAutoplayByForce","ref","enabled","_a","error","retryError","React","useStartAt","ref","startAt","video","React","useAutoplayOnVisible","ref","threshold","enabled","observer","entries","entry","_a","error","React","usePlayPause","ref","enabled","isPlaying","setIsPlaying","togglePlay","handlePlay","handlePause","_a","_b","jsx","PlayPauseOnVideo","ref","useVideo","togglePlay","usePlayPause","React","useMuteUnmute","ref","enabled","isMuted","setIsMuted","toggleMute","handleVolumeChange","_a","React","useFullscreen","ref","isFullscreen","setIsFullscreen","useVideo","React","handleFullscreenChange","toggleFullscreen","_a","isSafari","video","videoContainer","React","usePictureInPicture","ref","isPictureInPicture","setIsPictureInPicture","useVideo","React","handlePictureInPictureChange","togglePictureInPicture","video","error","videoContainer","React","useSpeed","ref","enabled","speed","setSpeed","onChangeSpeed","FunctionChildren","ref","children","duration","showHidingElement","useVideo","togglePlay","isPlaying","usePlayPause","speed","onChangeSpeed","useSpeed","toggleMute","isMuted","useMuteUnmute","isFullscreen","toggleFullscreen","useFullscreen","isPictureInPicture","togglePictureInPicture","usePictureInPicture","React","jsx","HidingElement","React","children","className","props","ref","useVideo","isPlaying","usePlayPause","showHidingElement","setShowHidingElement","jsx","jsxs","VideoComponent","React","children","autoPlay","className","ratio","config","controls","pause","props","ref","duration","setDuration","videoRef","showHidingElement","setShowHidingElement","timeoutRef","handleMouseEnter","_a","handleMouseLeave","handleMouseMove","_b","useAutoplayByForce","useStartAt","useAutoplayOnVisible","VideoProvider","e","start","end","FunctionChildren","Video","PlayPauseOnVideo","HidingElement","React","useVolume","volume","setVolume","React","ref","useVideo","onChangeVolume","React","useTimeline","isPlaying","setIsPlaying","React","currentTime","setCurrentTime","buffered","setBuffered","ref","duration","useVideo","intervalId","_a","_b","React","useGetDuration","url","isLoading","setIsLoading","React","duration","setDuration","ref","useVideo","video","formatTime","time","type","minutes","seconds"]}
|
|
1
|
+
{"version":3,"sources":["#style-inject:#style-inject","../src/styles.css","../src/video.tsx","../src/context.tsx","../src/hooks/use-autoplay-by-force.tsx","../src/hooks/use-start-at.tsx","../src/hooks/use-autoplay-on-visible.tsx","../src/hooks/use-play-pause.tsx","../src/components/play-pause-on-video.tsx","../src/hooks/use-mute-unmute.tsx","../src/hooks/use-fullscreen.tsx","../src/hooks/use-picture-in-picture.tsx","../src/hooks/use-speed.tsx","../src/function-children.tsx","../src/components/hiding-element.tsx","../src/hooks/use-volume.tsx","../src/hooks/use-timeline.tsx","../src/hooks/use-get-duration.tsx","../src/utils.ts"],"sourcesContent":["\n export default function styleInject(css, { insertAt } = {}) {\n if (!css || typeof document === 'undefined') return\n \n const head = document.head || document.getElementsByTagName('head')[0]\n const style = document.createElement('style')\n style.type = 'text/css'\n \n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild)\n } else {\n head.appendChild(style)\n }\n } else {\n head.appendChild(style)\n }\n \n if (style.styleSheet) {\n style.styleSheet.cssText = css\n } else {\n style.appendChild(document.createTextNode(css))\n }\n }\n ","import styleInject from '#style-inject';styleInject(\".reset-styles{box-sizing:border-box;padding:0;margin:0}[data-zuude-video-wrapper]{position:relative}[data-zuude-video-wrapper] [data-zuude-video]{width:100%;height:100%;object-fit:cover}\\n\")","import React from \"react\";\n\n// 📦 Types\nimport type { VideoProps } from \"./types\";\n\n// 🔍 Context\nimport { VideoProvider } from \"./context\";\n\n// 🔗 Hooks\nimport { useAutoplayByForce } from \"./hooks/use-autoplay-by-force\";\nimport { useStartAt } from \"./hooks/use-start-at\";\nimport { useAutoplayOnVisible } from \"./hooks/use-autoplay-on-visible\";\n\n// 🔧 Components\nimport { PlayPauseOnVideo } from \"./components/play-pause-on-video\";\nimport { FunctionChildren } from \"./function-children\";\nimport { HidingElement, HidingElementProps } from \"./components/hiding-element\";\n\n/**\n * Main Video component structure\n * @param {VideoProps} props - Video component props\n */\n\nconst VideoComponent = React.forwardRef<\n HTMLVideoElement,\n VideoProps & { pause?: boolean }\n>(\n (\n { children, autoPlay, className, ratio, config, controls, pause, ...props },\n ref\n ) => {\n const [duration, setDuration] = React.useState<number | null>(null);\n const [error, setError] = React.useState<string | null>(null);\n\n const videoRef =\n (ref as React.RefObject<HTMLVideoElement>) ||\n React.useRef<HTMLVideoElement>(null);\n\n const [showHidingElement, setShowHidingElement] = React.useState(false);\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n const handleMouseEnter = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseLeave = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(false);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n const handleMouseMove = () => {\n if (videoRef.current?.paused) return;\n\n setShowHidingElement(true);\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => {\n setShowHidingElement(false);\n }, 3000);\n };\n\n React.useEffect(() => {\n if (pause !== undefined) {\n if (pause) {\n videoRef.current?.pause();\n } else {\n videoRef.current?.play();\n }\n }\n }, [pause, videoRef.current]);\n\n useAutoplayByForce(\n videoRef,\n autoPlay === \"force\" &&\n props.muted === undefined &&\n !config?.autoplayOnVisible,\n setError\n );\n useStartAt(videoRef, config?.startAt);\n useAutoplayOnVisible(\n videoRef,\n typeof config?.autoplayOnVisible === \"number\"\n ? config.autoplayOnVisible\n : undefined,\n config?.autoplayOnVisible\n );\n\n return (\n <VideoProvider\n ref={videoRef}\n duration={duration}\n showHidingElement={showHidingElement}\n setShowHidingElement={setShowHidingElement}\n >\n <div\n data-zuude-video-wrapper\n style={{\n aspectRatio: ratio,\n }}\n className={className}\n >\n <video\n data-zuude-video\n ref={videoRef}\n autoPlay={\n config?.autoplayOnVisible\n ? false\n : autoPlay === \"force\"\n ? true\n : autoPlay\n }\n playsInline\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onMouseMove={handleMouseMove}\n onLoadedMetadata={(e) => {\n console.log(\"loaded metadata\");\n setDuration((e.target as HTMLVideoElement).duration);\n }}\n onTimeUpdate={(e) => {\n /**\n * If the current time is less than the start time, set the current time to the start time\n * If the current time is greater than the end time, set the current time to the start time\n */\n if (config?.range) {\n const [start, end] = config.range;\n\n if (videoRef.current.currentTime < start) {\n videoRef.current.currentTime = start;\n }\n\n if (videoRef.current.currentTime > end) {\n videoRef.current.currentTime = start;\n }\n }\n }}\n {...props}\n />\n {typeof children === \"function\" ? (\n <FunctionChildren ref={videoRef} children={children} />\n ) : (\n children\n )}\n {error === \"NotAllowedError\" &&\n typeof config?.muteFallback === \"function\" &&\n config.muteFallback(() => {\n if (videoRef.current) {\n videoRef.current.muted = !videoRef.current.muted;\n }\n setError(null);\n })}\n </div>\n </VideoProvider>\n );\n }\n);\n\nVideoComponent.displayName = \"Video\";\n\n/**\n * Using compound components pattern\n */\nexport const Video = Object.assign(VideoComponent, {\n PlayPauseOnVideo,\n HidingElement: HidingElement as React.ComponentType<HidingElementProps>,\n});\n","import React from \"react\";\nimport type { VideoContextType } from \"./types.js\";\n\nconst VideoContext = React.createContext<VideoContextType | undefined>(\n undefined\n);\n\nconst useVideo = () => {\n const context = React.useContext(VideoContext);\n if (!context) {\n throw new Error(\"useVideo must be used within a VideoProvider\");\n }\n return context;\n};\n\ninterface VideoProviderProps extends VideoContextType {\n children: React.ReactNode;\n}\n\nconst VideoProvider = ({\n children,\n ref,\n duration,\n showHidingElement,\n setShowHidingElement,\n}: VideoProviderProps) => {\n const [fullscreen, setFullscreen] = React.useState(false);\n\n return (\n <VideoContext.Provider\n value={{\n ref,\n duration,\n isFullscreen: fullscreen,\n setIsFullscreen: setFullscreen,\n showHidingElement,\n setShowHidingElement,\n }}\n >\n {children}\n </VideoContext.Provider>\n );\n};\n\nexport { useVideo, VideoProvider };\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useAutoplayByForce = (\n ref: VideoRef,\n enabled: boolean,\n setError?: (error: string | null) => void\n) => {\n React.useEffect(() => {\n if (!ref.current || !enabled) return;\n\n const playVideo = async () => {\n try {\n await ref.current?.play();\n } catch (error) {\n // If autoplay fails, try muting and playing again\n if (error instanceof Error && error.name === \"NotAllowedError\") {\n setError?.(\"NotAllowedError\");\n console.error(\"NotAllowedError\");\n if (ref.current) {\n ref.current.muted = true;\n try {\n await ref.current.play();\n } catch (retryError) {\n console.error(retryError);\n }\n }\n } else {\n console.error(error);\n }\n }\n };\n\n playVideo();\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoConfig, VideoRef } from \"../types\";\n\nexport const useStartAt = (ref: VideoRef, startAt?: VideoConfig[\"startAt\"]) => {\n React.useEffect(() => {\n if (!ref.current || !startAt) return;\n\n const video = ref.current;\n if (video && startAt) {\n video.currentTime = startAt;\n }\n }, [startAt]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useAutoplayOnVisible = (\n ref: VideoRef,\n threshold: number | undefined,\n enabled: boolean | number | null | undefined\n) => {\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const observer = new IntersectionObserver(\n (entries) => {\n entries.forEach((entry) => {\n if (!ref.current) return;\n\n if (entry.isIntersecting) {\n ref.current.play().catch((error) => {\n if (!ref.current) return;\n\n ref.current.pause();\n ref.current.muted = true;\n ref.current.play();\n console.error(error);\n });\n } else {\n ref.current?.pause();\n }\n });\n },\n { threshold: threshold ?? 0.5 }\n );\n\n observer.observe(ref.current);\n\n return () => {\n observer.disconnect();\n };\n }, [enabled, ref.current]);\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const usePlayPause = (ref: VideoRef, enabled: boolean) => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n\n const togglePlay = React.useCallback(() => {\n if (ref.current) {\n ref.current.paused ? ref.current.play() : ref.current.pause();\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n const handlePlay = () => {\n setIsPlaying(true);\n };\n const handlePause = () => {\n setIsPlaying(false);\n };\n\n setIsPlaying(!ref.current.paused);\n\n if (ref.current) {\n ref.current.addEventListener(\"play\", handlePlay);\n ref.current.addEventListener(\"pause\", handlePause);\n\n return () => {\n ref.current?.removeEventListener(\"play\", handlePlay);\n ref.current?.removeEventListener(\"pause\", handlePause);\n };\n }\n }, [ref.current, enabled]);\n\n return { togglePlay, isPlaying };\n};\n","import { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport const PlayPauseOnVideo = () => {\n const { ref } = useVideo();\n\n const { togglePlay } = usePlayPause(ref, true);\n\n return (\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n onClick={togglePlay}\n ></div>\n );\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useMuteUnmute = (ref: VideoRef, enabled: boolean) => {\n const [isMuted, setIsMuted] = React.useState(false);\n\n const toggleMute = React.useCallback(() => {\n if (ref?.current) {\n ref.current.muted = !ref.current.muted;\n }\n }, [ref.current]);\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n // Set the initial state\n setIsMuted(ref.current.muted);\n\n const handleVolumeChange = () => {\n if (ref.current) {\n setIsMuted(ref.current.muted);\n }\n };\n\n ref.current.addEventListener(\"volumechange\", handleVolumeChange);\n\n return () => {\n ref.current?.removeEventListener(\"volumechange\", handleVolumeChange);\n };\n }, [ref.current, enabled]);\n\n return { toggleMute, isMuted };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useFullscreen = () => {\n const { ref, isFullscreen, setIsFullscreen } = useVideo();\n\n React.useEffect(() => {\n const handleFullscreenChange = () => {\n setIsFullscreen?.(!!document.fullscreenElement);\n };\n\n document.addEventListener(\"fullscreenchange\", handleFullscreenChange);\n return () =>\n document.removeEventListener(\"fullscreenchange\", handleFullscreenChange);\n }, []);\n\n const toggleFullscreen = () => {\n const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n const video = ref.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 = ref.current?.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n\n if (videoContainer) {\n if (!isFullscreen) {\n videoContainer.requestFullscreen();\n } else {\n document.exitFullscreen();\n }\n }\n };\n\n return { isFullscreen: isFullscreen ?? false, toggleFullscreen };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const usePictureInPicture = () => {\n const { ref, isPictureInPicture, setIsPictureInPicture } = useVideo();\n\n React.useEffect(() => {\n const handlePictureInPictureChange = () => {\n setIsPictureInPicture?.(!!document.pictureInPictureElement);\n };\n\n document.addEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n return () =>\n document.removeEventListener(\n \"pictureinpicturechange\",\n handlePictureInPictureChange\n );\n }, []);\n\n const togglePictureInPicture = async () => {\n const video = ref.current;\n if (!video) return;\n\n try {\n if (document.pictureInPictureElement) {\n await document.exitPictureInPicture();\n } else {\n await video.requestPictureInPicture();\n }\n } catch (error) {\n // Fallback for browsers that don't support PiP\n const isSafari = /^((?!chrome|android).)*safari/i.test(\n navigator.userAgent\n );\n\n if (isSafari) {\n if ((video as any).webkitEnterFullscreen) {\n (video as any).webkitEnterFullscreen();\n } else if (video.requestFullscreen) {\n video.requestFullscreen();\n }\n } else {\n const videoContainer = video.closest(\n \"[data-zuude-video-wrapper]\"\n ) as HTMLElement;\n if (videoContainer) {\n if (!document.fullscreenElement) {\n await videoContainer.requestFullscreen();\n } else {\n await document.exitFullscreen();\n }\n }\n }\n }\n };\n\n return {\n isPictureInPicture: isPictureInPicture ?? false,\n togglePictureInPicture,\n };\n};\n","import React from \"react\";\nimport type { VideoRef } from \"../types\";\n\nexport const useSpeed = (ref: VideoRef, enabled: boolean) => {\n const [speed, setSpeed] = React.useState(1);\n\n const onChangeSpeed = (speed: number) => {\n setSpeed(speed);\n };\n\n React.useEffect(() => {\n if (!enabled || !ref.current) return;\n\n ref.current.playbackRate = speed;\n }, [speed, enabled, ref.current]);\n\n return { speed, onChangeSpeed };\n};\n","import React from \"react\";\n\nimport type { VideoChildren } from \"./types\";\nimport { usePlayPause } from \"./hooks/use-play-pause\";\nimport { useMuteUnmute } from \"./hooks/use-mute-unmute\";\nimport { useVideo } from \"./context\";\nimport { useFullscreen } from \"./hooks/use-fullscreen\";\nimport { usePictureInPicture } from \"./hooks/use-picture-in-picture\";\nimport { useSpeed } from \"./hooks/use-speed\";\n\nexport const FunctionChildren = ({\n ref,\n children,\n}: {\n ref: React.RefObject<HTMLVideoElement>;\n children: VideoChildren;\n}) => {\n const { duration, showHidingElement } = useVideo();\n\n /**\n * Only use these hooks if the children is a function\n */\n const { togglePlay, isPlaying } = usePlayPause(\n ref,\n typeof children === \"function\"\n );\n const { speed, onChangeSpeed } = useSpeed(\n ref,\n typeof children === \"function\"\n );\n const { toggleMute, isMuted } = useMuteUnmute(\n ref,\n typeof children === \"function\"\n );\n const { isFullscreen, toggleFullscreen } = useFullscreen();\n const { isPictureInPicture, togglePictureInPicture } = usePictureInPicture();\n\n if (typeof children !== \"function\") return null;\n\n return children({\n isPlaying,\n togglePlay,\n isMuted,\n toggleMute,\n speed,\n onChangeSpeed,\n isFullscreen,\n toggleFullscreen,\n isPictureInPicture,\n togglePictureInPicture,\n duration,\n showHidingElement: showHidingElement ?? false,\n });\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\nimport { usePlayPause } from \"../hooks/use-play-pause\";\n\nexport interface HidingElementProps\n extends React.ComponentPropsWithoutRef<\"div\"> {\n children: React.ReactNode;\n className?: string;\n}\n\nexport const HidingElement = React.forwardRef<\n HTMLDivElement,\n HidingElementProps\n>(({ children, className, ...props }: HidingElementProps) => {\n const { ref } = useVideo();\n const { isPlaying } = usePlayPause(ref, true);\n const { showHidingElement, setShowHidingElement } = useVideo();\n\n return (\n <div\n data-zuude-hiding-element\n data-show={!isPlaying || showHidingElement}\n className={className}\n onMouseEnter={() => {\n setShowHidingElement?.(true);\n }}\n onMouseLeave={() => {\n setShowHidingElement?.(false);\n }}\n {...props}\n >\n {children}\n </div>\n );\n});\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useVolume = () => {\n const [volume, setVolume] = React.useState(100);\n const { ref } = useVideo();\n\n const onChangeVolume = (volume: number) => {\n setVolume(volume);\n };\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.volume = volume / 100;\n }, [volume]);\n\n return { volume, onChangeVolume };\n};\n","import React from \"react\";\nimport { useVideo } from \"../context\";\n\nexport const useTimeline = () => {\n const [isPlaying, setIsPlaying] = React.useState(false);\n const [currentTime, setCurrentTime] = React.useState(0);\n const [buffered, setBuffered] = React.useState(0);\n\n const { ref, duration } = useVideo();\n\n React.useEffect(() => {\n if (ref.current && isPlaying) {\n const intervalId = setInterval(() => {\n setCurrentTime(ref.current?.currentTime || 0);\n\n if (ref.current?.buffered.length) {\n setBuffered(\n ref.current.buffered.end(ref.current.buffered.length - 1)\n );\n }\n }, 10);\n\n return () => clearInterval(intervalId);\n }\n }, [ref.current, isPlaying]);\n\n React.useEffect(() => {\n if (!ref.current) return;\n\n ref.current.addEventListener(\"play\", () => setIsPlaying(true));\n ref.current.addEventListener(\"pause\", () => setIsPlaying(false));\n\n return () => {\n ref.current?.removeEventListener(\"play\", () => setIsPlaying(true));\n ref.current?.removeEventListener(\"pause\", () => setIsPlaying(false));\n };\n }, []);\n\n return {\n currentTime,\n duration,\n buffered,\n setCurrentTime,\n };\n};\n","import React from \"react\";\nimport { VideoRef } from \"../types.js\";\n\nexport const useGetDuration = (ref: VideoRef) => {\n const [isLoading, setIsLoading] = React.useState(false);\n const [duration, setDuration] = React.useState<number | null>(null);\n\n React.useEffect(() => {\n if (!ref.current) return;\n setIsLoading(true);\n\n ref.current.addEventListener(\"loadedmetadata\", () => {\n setDuration(ref.current?.duration ?? null);\n setIsLoading(false);\n });\n\n ref.current.addEventListener(\"error\", () => {\n setIsLoading(false);\n });\n\n return () => {\n ref.current?.removeEventListener(\"loadedmetadata\", () => {});\n ref.current?.removeEventListener(\"error\", () => {});\n };\n }, [ref.current]);\n\n return { duration, isLoading };\n};\n","function formatTime(time: number, type: \"h:mm:ss\" | \"mm:ss\" = \"mm:ss\"): string {\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time % 60);\n if (type === \"h:mm:ss\") {\n const hours = Math.floor(minutes / 60);\n return `${hours}:${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n }\n return `${minutes}:${seconds < 10 ? \"0\" : \"\"}${seconds}`;\n}\n\nexport { formatTime };\n"],"mappings":"aACyB,SAARA,EAA6BC,EAAK,CAAE,SAAAC,CAAS,EAAI,CAAC,EAAG,CAC1D,GAAI,CAACD,GAAO,OAAO,UAAa,YAAa,OAE7C,IAAME,EAAO,SAAS,MAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC,EAC/DC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,KAAO,WAETF,IAAa,OACXC,EAAK,WACPA,EAAK,aAAaC,EAAOD,EAAK,UAAU,EAK1CA,EAAK,YAAYC,CAAK,EAGpBA,EAAM,WACRA,EAAM,WAAW,QAAUH,EAE3BG,EAAM,YAAY,SAAS,eAAeH,CAAG,CAAC,CAElD,CCvB8BI,EAAY;AAAA,CAA8L,ECAlP,OAAOC,MAAW,QCAlB,OAAOC,MAAW,QA6Bd,cAAAC,MAAA,oBA1BJ,IAAMC,EAAeF,EAAM,cACzB,MACF,EAEMG,EAAW,IAAM,CACrB,IAAMC,EAAUJ,EAAM,WAAWE,CAAY,EAC7C,GAAI,CAACE,EACH,MAAM,IAAI,MAAM,8CAA8C,EAEhE,OAAOA,CACT,EAMMC,EAAgB,CAAC,CACrB,SAAAC,EACA,IAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,qBAAAC,CACF,IAA0B,CACxB,GAAM,CAACC,EAAYC,CAAa,EAAIZ,EAAM,SAAS,EAAK,EAExD,OACEC,EAACC,EAAa,SAAb,CACC,MAAO,CACL,IAAAK,EACA,SAAAC,EACA,aAAcG,EACd,gBAAiBC,EACjB,kBAAAH,EACA,qBAAAC,CACF,EAEC,SAAAJ,EACH,CAEJ,EC1CA,OAAOO,MAAW,QAGX,IAAMC,EAAqB,CAChCC,EACAC,EACAC,IACG,CACHJ,EAAM,UAAU,IAAM,CACpB,GAAI,CAACE,EAAI,SAAW,CAACC,EAAS,QAEZ,SAAY,CAXlC,IAAAE,EAYM,GAAI,CACF,OAAMA,EAAAH,EAAI,UAAJ,YAAAG,EAAa,OACrB,OAASC,EAAO,CAEd,GAAIA,aAAiB,OAASA,EAAM,OAAS,mBAG3C,GAFAF,GAAA,MAAAA,EAAW,mBACX,QAAQ,MAAM,iBAAiB,EAC3BF,EAAI,QAAS,CACfA,EAAI,QAAQ,MAAQ,GACpB,GAAI,CACF,MAAMA,EAAI,QAAQ,KAAK,CACzB,OAASK,EAAY,CACnB,QAAQ,MAAMA,CAAU,CAC1B,CACF,OAEA,QAAQ,MAAMD,CAAK,CAEvB,CACF,GAEU,CACZ,EAAG,CAACH,EAASD,EAAI,OAAO,CAAC,CAC3B,ECnCA,OAAOM,MAAW,QAGX,IAAMC,EAAa,CAACC,EAAeC,IAAqC,CAC7EH,EAAM,UAAU,IAAM,CACpB,GAAI,CAACE,EAAI,SAAW,CAACC,EAAS,OAE9B,IAAMC,EAAQF,EAAI,QACdE,GAASD,IACXC,EAAM,YAAcD,EAExB,EAAG,CAACA,CAAO,CAAC,CACd,ECZA,OAAOE,MAAW,QAGX,IAAMC,EAAuB,CAClCC,EACAC,EACAC,IACG,CACHJ,EAAM,UAAU,IAAM,CACpB,GAAI,CAACI,GAAW,CAACF,EAAI,QAAS,OAE9B,IAAMG,EAAW,IAAI,qBAClBC,GAAY,CACXA,EAAQ,QAASC,GAAU,CAbnC,IAAAC,EAceN,EAAI,UAELK,EAAM,eACRL,EAAI,QAAQ,KAAK,EAAE,MAAOO,GAAU,CAC7BP,EAAI,UAETA,EAAI,QAAQ,MAAM,EAClBA,EAAI,QAAQ,MAAQ,GACpBA,EAAI,QAAQ,KAAK,EACjB,QAAQ,MAAMO,CAAK,EACrB,CAAC,GAEDD,EAAAN,EAAI,UAAJ,MAAAM,EAAa,QAEjB,CAAC,CACH,EACA,CAAE,UAAWL,GAAA,KAAAA,EAAa,EAAI,CAChC,EAEA,OAAAE,EAAS,QAAQH,EAAI,OAAO,EAErB,IAAM,CACXG,EAAS,WAAW,CACtB,CACF,EAAG,CAACD,EAASF,EAAI,OAAO,CAAC,CAC3B,ECvCA,OAAOQ,MAAW,QAGX,IAAMC,EAAe,CAACC,EAAeC,IAAqB,CAC/D,GAAM,CAACC,EAAWC,CAAY,EAAIL,EAAM,SAAS,EAAK,EAEhDM,EAAaN,EAAM,YAAY,IAAM,CACrCE,EAAI,UACNA,EAAI,QAAQ,OAASA,EAAI,QAAQ,KAAK,EAAIA,EAAI,QAAQ,MAAM,EAEhE,EAAG,CAACA,EAAI,OAAO,CAAC,EAEhB,OAAAF,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAW,CAACD,EAAI,QAAS,OAE9B,IAAMK,EAAa,IAAM,CACvBF,EAAa,EAAI,CACnB,EACMG,EAAc,IAAM,CACxBH,EAAa,EAAK,CACpB,EAIA,GAFAA,EAAa,CAACH,EAAI,QAAQ,MAAM,EAE5BA,EAAI,QACN,OAAAA,EAAI,QAAQ,iBAAiB,OAAQK,CAAU,EAC/CL,EAAI,QAAQ,iBAAiB,QAASM,CAAW,EAE1C,IAAM,CA5BnB,IAAAC,EAAAC,GA6BQD,EAAAP,EAAI,UAAJ,MAAAO,EAAa,oBAAoB,OAAQF,IACzCG,EAAAR,EAAI,UAAJ,MAAAQ,EAAa,oBAAoB,QAASF,EAC5C,CAEJ,EAAG,CAACN,EAAI,QAASC,CAAO,CAAC,EAElB,CAAE,WAAAG,EAAY,UAAAF,CAAU,CACjC,EC3BI,cAAAO,MAAA,oBANG,IAAMC,EAAmB,IAAM,CACpC,GAAM,CAAE,IAAAC,CAAI,EAAIC,EAAS,EAEnB,CAAE,WAAAC,CAAW,EAAIC,EAAaH,EAAK,EAAI,EAE7C,OACEF,EAAC,OACC,MAAO,CACL,SAAU,WACV,IAAK,EACL,KAAM,EACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QACd,EACA,QAASI,EACV,CAEL,ECvBA,OAAOE,MAAW,QAGX,IAAMC,EAAgB,CAACC,EAAeC,IAAqB,CAChE,GAAM,CAACC,EAASC,CAAU,EAAIL,EAAM,SAAS,EAAK,EAE5CM,EAAaN,EAAM,YAAY,IAAM,CACrCE,GAAA,MAAAA,EAAK,UACPA,EAAI,QAAQ,MAAQ,CAACA,EAAI,QAAQ,MAErC,EAAG,CAACA,EAAI,OAAO,CAAC,EAEhB,OAAAF,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,GAAW,CAACD,EAAI,QAAS,OAG9BG,EAAWH,EAAI,QAAQ,KAAK,EAE5B,IAAMK,EAAqB,IAAM,CAC3BL,EAAI,SACNG,EAAWH,EAAI,QAAQ,KAAK,CAEhC,EAEA,OAAAA,EAAI,QAAQ,iBAAiB,eAAgBK,CAAkB,EAExD,IAAM,CA1BjB,IAAAC,GA2BMA,EAAAN,EAAI,UAAJ,MAAAM,EAAa,oBAAoB,eAAgBD,EACnD,CACF,EAAG,CAACL,EAAI,QAASC,CAAO,CAAC,EAElB,CAAE,WAAAG,EAAY,QAAAF,CAAQ,CAC/B,EChCA,OAAOK,MAAW,QAGX,IAAMC,EAAgB,IAAM,CACjC,GAAM,CAAE,IAAAC,EAAK,aAAAC,EAAc,gBAAAC,CAAgB,EAAIC,EAAS,EAExDC,EAAM,UAAU,IAAM,CACpB,IAAMC,EAAyB,IAAM,CACnCH,GAAA,MAAAA,EAAkB,CAAC,CAAC,SAAS,kBAC/B,EAEA,gBAAS,iBAAiB,mBAAoBG,CAAsB,EAC7D,IACL,SAAS,oBAAoB,mBAAoBA,CAAsB,CAC3E,EAAG,CAAC,CAAC,EAEL,IAAMC,EAAmB,IAAM,CAhBjC,IAAAC,EAiBI,IAAMC,EAAW,iCAAiC,KAAK,UAAU,SAAS,EACpEC,EAAQT,EAAI,QAElB,GAAIS,GAASD,GACX,GAAKC,EAAc,sBAAuB,CACvCA,EAAc,sBAAsB,EACrC,MACF,SAAWA,EAAM,kBAAmB,CAClCA,EAAM,kBAAkB,EACxB,MACF,EAGF,IAAMC,GAAiBH,EAAAP,EAAI,UAAJ,YAAAO,EAAa,QAClC,8BAGEG,IACGT,EAGH,SAAS,eAAe,EAFxBS,EAAe,kBAAkB,EAKvC,EAEA,MAAO,CAAE,aAAcT,GAAA,KAAAA,EAAgB,GAAO,iBAAAK,CAAiB,CACjE,EC5CA,OAAOK,OAAW,QAGX,IAAMC,EAAsB,IAAM,CACvC,GAAM,CAAE,IAAAC,EAAK,mBAAAC,EAAoB,sBAAAC,CAAsB,EAAIC,EAAS,EAEpEC,GAAM,UAAU,IAAM,CACpB,IAAMC,EAA+B,IAAM,CACzCH,GAAA,MAAAA,EAAwB,CAAC,CAAC,SAAS,wBACrC,EAEA,gBAAS,iBACP,yBACAG,CACF,EACO,IACL,SAAS,oBACP,yBACAA,CACF,CACJ,EAAG,CAAC,CAAC,EAEL,IAAMC,EAAyB,SAAY,CACzC,IAAMC,EAAQP,EAAI,QAClB,GAAKO,EAEL,GAAI,CACE,SAAS,wBACX,MAAM,SAAS,qBAAqB,EAEpC,MAAMA,EAAM,wBAAwB,CAExC,OAASC,EAAO,CAMd,GAJiB,iCAAiC,KAChD,UAAU,SACZ,EAGOD,EAAc,sBAChBA,EAAc,sBAAsB,EAC5BA,EAAM,mBACfA,EAAM,kBAAkB,MAErB,CACL,IAAME,EAAiBF,EAAM,QAC3B,4BACF,EACIE,IACG,SAAS,kBAGZ,MAAM,SAAS,eAAe,EAF9B,MAAMA,EAAe,kBAAkB,EAK7C,CACF,CACF,EAEA,MAAO,CACL,mBAAoBR,GAAA,KAAAA,EAAsB,GAC1C,uBAAAK,CACF,CACF,EC/DA,OAAOI,MAAW,QAGX,IAAMC,EAAW,CAACC,EAAeC,IAAqB,CAC3D,GAAM,CAACC,EAAOC,CAAQ,EAAIL,EAAM,SAAS,CAAC,EAEpCM,EAAiBF,GAAkB,CACvCC,EAASD,CAAK,CAChB,EAEA,OAAAJ,EAAM,UAAU,IAAM,CAChB,CAACG,GAAW,CAACD,EAAI,UAErBA,EAAI,QAAQ,aAAeE,EAC7B,EAAG,CAACA,EAAOD,EAASD,EAAI,OAAO,CAAC,EAEzB,CAAE,MAAAE,EAAO,cAAAE,CAAc,CAChC,ECPO,IAAMC,EAAmB,CAAC,CAC/B,IAAAC,EACA,SAAAC,CACF,IAGM,CACJ,GAAM,CAAE,SAAAC,EAAU,kBAAAC,CAAkB,EAAIC,EAAS,EAK3C,CAAE,WAAAC,EAAY,UAAAC,CAAU,EAAIC,EAChCP,EACA,OAAOC,GAAa,UACtB,EACM,CAAE,MAAAO,EAAO,cAAAC,CAAc,EAAIC,EAC/BV,EACA,OAAOC,GAAa,UACtB,EACM,CAAE,WAAAU,EAAY,QAAAC,CAAQ,EAAIC,EAC9Bb,EACA,OAAOC,GAAa,UACtB,EACM,CAAE,aAAAa,EAAc,iBAAAC,CAAiB,EAAIC,EAAc,EACnD,CAAE,mBAAAC,EAAoB,uBAAAC,CAAuB,EAAIC,EAAoB,EAE3E,OAAI,OAAOlB,GAAa,WAAmB,KAEpCA,EAAS,CACd,UAAAK,EACA,WAAAD,EACA,QAAAO,EACA,WAAAD,EACA,MAAAH,EACA,cAAAC,EACA,aAAAK,EACA,iBAAAC,EACA,mBAAAE,EACA,uBAAAC,EACA,SAAAhB,EACA,kBAAmBC,GAAA,KAAAA,EAAqB,EAC1C,CAAC,CACH,ECrDA,OAAOiB,OAAW,QAmBd,cAAAC,OAAA,oBATG,IAAMC,EAAgBC,GAAM,WAGjC,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,IAA0B,CAC3D,GAAM,CAAE,IAAAC,CAAI,EAAIC,EAAS,EACnB,CAAE,UAAAC,CAAU,EAAIC,EAAaH,EAAK,EAAI,EACtC,CAAE,kBAAAI,EAAmB,qBAAAC,CAAqB,EAAIJ,EAAS,EAE7D,OACEP,GAAC,OACC,4BAAyB,GACzB,YAAW,CAACQ,GAAaE,EACzB,UAAWN,EACX,aAAc,IAAM,CAClBO,GAAA,MAAAA,EAAuB,GACzB,EACA,aAAc,IAAM,CAClBA,GAAA,MAAAA,EAAuB,GACzB,EACC,GAAGN,EAEH,SAAAF,EACH,CAEJ,CAAC,EZmEO,OAOE,OAAAS,EAPF,QAAAC,OAAA,oBA9ER,IAAMC,EAAiBC,EAAM,WAI3B,CACE,CAAE,SAAAC,EAAU,SAAAC,EAAU,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAM,EAC1EC,IACG,CACH,GAAM,CAACC,EAAUC,CAAW,EAAIX,EAAM,SAAwB,IAAI,EAC5D,CAACY,EAAOC,CAAQ,EAAIb,EAAM,SAAwB,IAAI,EAEtDc,EACHL,GACDT,EAAM,OAAyB,IAAI,EAE/B,CAACe,EAAmBC,CAAoB,EAAIhB,EAAM,SAAS,EAAK,EAChEiB,EAAajB,EAAM,OAAsC,IAAI,EAC7DkB,EAAmB,IAAM,CAxCnC,IAAAC,GAyCUA,EAAAL,EAAS,UAAT,MAAAK,EAAkB,SAEtBH,EAAqB,EAAI,EACrBC,EAAW,SACb,aAAaA,EAAW,OAAO,EAEnC,EACMG,EAAmB,IAAM,CAhDnC,IAAAD,GAiDUA,EAAAL,EAAS,UAAT,MAAAK,EAAkB,SAEtBH,EAAqB,EAAK,EACtBC,EAAW,SACb,aAAaA,EAAW,OAAO,EAEnC,EACMI,EAAkB,IAAM,CAxDlC,IAAAF,GAyDUA,EAAAL,EAAS,UAAT,MAAAK,EAAkB,SAEtBH,EAAqB,EAAI,EACrBC,EAAW,SACb,aAAaA,EAAW,OAAO,EAEjCA,EAAW,QAAU,WAAW,IAAM,CACpCD,EAAqB,EAAK,CAC5B,EAAG,GAAI,EACT,EAEA,OAAAhB,EAAM,UAAU,IAAM,CApE1B,IAAAmB,EAAAG,EAqEUf,IAAU,SACRA,GACFY,EAAAL,EAAS,UAAT,MAAAK,EAAkB,SAElBG,EAAAR,EAAS,UAAT,MAAAQ,EAAkB,OAGxB,EAAG,CAACf,EAAOO,EAAS,OAAO,CAAC,EAE5BS,EACET,EACAZ,IAAa,SACXM,EAAM,QAAU,QAChB,EAACH,GAAA,MAAAA,EAAQ,mBACXQ,CACF,EACAW,EAAWV,EAAUT,GAAA,YAAAA,EAAQ,OAAO,EACpCoB,EACEX,EACA,OAAOT,GAAA,YAAAA,EAAQ,oBAAsB,SACjCA,EAAO,kBACP,OACJA,GAAA,YAAAA,EAAQ,iBACV,EAGER,EAAC6B,EAAA,CACC,IAAKZ,EACL,SAAUJ,EACV,kBAAmBK,EACnB,qBAAsBC,EAEtB,SAAAlB,GAAC,OACC,2BAAwB,GACxB,MAAO,CACL,YAAaM,CACf,EACA,UAAWD,EAEX,UAAAN,EAAC,SACC,mBAAgB,GAChB,IAAKiB,EACL,SACET,GAAA,MAAAA,EAAQ,kBACJ,GACAH,IAAa,QACX,GACAA,EAER,YAAW,GACX,aAAcgB,EACd,aAAcE,EACd,YAAaC,EACb,iBAAmBM,GAAM,CACvB,QAAQ,IAAI,iBAAiB,EAC7BhB,EAAagB,EAAE,OAA4B,QAAQ,CACrD,EACA,aAAeA,GAAM,CAKnB,GAAItB,GAAA,MAAAA,EAAQ,MAAO,CACjB,GAAM,CAACuB,EAAOC,CAAG,EAAIxB,EAAO,MAExBS,EAAS,QAAQ,YAAcc,IACjCd,EAAS,QAAQ,YAAcc,GAG7Bd,EAAS,QAAQ,YAAce,IACjCf,EAAS,QAAQ,YAAcc,EAEnC,CACF,EACC,GAAGpB,EACN,EACC,OAAOP,GAAa,WACnBJ,EAACiC,EAAA,CAAiB,IAAKhB,EAAU,SAAUb,EAAU,EAErDA,EAEDW,IAAU,mBACT,OAAOP,GAAA,YAAAA,EAAQ,eAAiB,YAChCA,EAAO,aAAa,IAAM,CACpBS,EAAS,UACXA,EAAS,QAAQ,MAAQ,CAACA,EAAS,QAAQ,OAE7CD,EAAS,IAAI,CACf,CAAC,GACL,EACF,CAEJ,CACF,EAEAd,EAAe,YAAc,QAKtB,IAAMgC,GAAQ,OAAO,OAAOhC,EAAgB,CACjD,iBAAAiC,EACA,cAAeC,CACjB,CAAC,Ea5KD,OAAOC,MAAW,QAGX,IAAMC,GAAY,IAAM,CAC7B,GAAM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAS,GAAG,EACxC,CAAE,IAAAC,CAAI,EAAIC,EAAS,EAEnBC,EAAkBL,GAAmB,CACzCC,EAAUD,CAAM,CAClB,EAEA,OAAAE,EAAM,UAAU,IAAM,CACfC,EAAI,UAETA,EAAI,QAAQ,OAASH,EAAS,IAChC,EAAG,CAACA,CAAM,CAAC,EAEJ,CAAE,OAAAA,EAAQ,eAAAK,CAAe,CAClC,EClBA,OAAOC,MAAW,QAGX,IAAMC,GAAc,IAAM,CAC/B,GAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAS,EAAK,EAChD,CAACC,EAAaC,CAAc,EAAIF,EAAM,SAAS,CAAC,EAChD,CAACG,EAAUC,CAAW,EAAIJ,EAAM,SAAS,CAAC,EAE1C,CAAE,IAAAK,EAAK,SAAAC,CAAS,EAAIC,EAAS,EAEnC,OAAAP,EAAM,UAAU,IAAM,CACpB,GAAIK,EAAI,SAAWP,EAAW,CAC5B,IAAMU,EAAa,YAAY,IAAM,CAZ3C,IAAAC,EAAAC,EAaQR,IAAeO,EAAAJ,EAAI,UAAJ,YAAAI,EAAa,cAAe,CAAC,GAExCC,EAAAL,EAAI,UAAJ,MAAAK,EAAa,SAAS,QACxBN,EACEC,EAAI,QAAQ,SAAS,IAAIA,EAAI,QAAQ,SAAS,OAAS,CAAC,CAC1D,CAEJ,EAAG,EAAE,EAEL,MAAO,IAAM,cAAcG,CAAU,CACvC,CACF,EAAG,CAACH,EAAI,QAASP,CAAS,CAAC,EAE3BE,EAAM,UAAU,IAAM,CACpB,GAAKK,EAAI,QAET,OAAAA,EAAI,QAAQ,iBAAiB,OAAQ,IAAMN,EAAa,EAAI,CAAC,EAC7DM,EAAI,QAAQ,iBAAiB,QAAS,IAAMN,EAAa,EAAK,CAAC,EAExD,IAAM,CAhCjB,IAAAU,EAAAC,GAiCMD,EAAAJ,EAAI,UAAJ,MAAAI,EAAa,oBAAoB,OAAQ,IAAMV,EAAa,EAAI,IAChEW,EAAAL,EAAI,UAAJ,MAAAK,EAAa,oBAAoB,QAAS,IAAMX,EAAa,EAAK,EACpE,CACF,EAAG,CAAC,CAAC,EAEE,CACL,YAAAE,EACA,SAAAK,EACA,SAAAH,EACA,eAAAD,CACF,CACF,EC5CA,OAAOS,MAAW,QAGX,IAAMC,GAAkBC,GAAkB,CAC/C,GAAM,CAACC,EAAWC,CAAY,EAAIJ,EAAM,SAAS,EAAK,EAChD,CAACK,EAAUC,CAAW,EAAIN,EAAM,SAAwB,IAAI,EAElE,OAAAA,EAAM,UAAU,IAAM,CACpB,GAAKE,EAAI,QACT,OAAAE,EAAa,EAAI,EAEjBF,EAAI,QAAQ,iBAAiB,iBAAkB,IAAM,CAXzD,IAAAK,EAAAC,EAYMF,GAAYE,GAAAD,EAAAL,EAAI,UAAJ,YAAAK,EAAa,WAAb,KAAAC,EAAyB,IAAI,EACzCJ,EAAa,EAAK,CACpB,CAAC,EAEDF,EAAI,QAAQ,iBAAiB,QAAS,IAAM,CAC1CE,EAAa,EAAK,CACpB,CAAC,EAEM,IAAM,CApBjB,IAAAG,EAAAC,GAqBMD,EAAAL,EAAI,UAAJ,MAAAK,EAAa,oBAAoB,iBAAkB,IAAM,CAAC,IAC1DC,EAAAN,EAAI,UAAJ,MAAAM,EAAa,oBAAoB,QAAS,IAAM,CAAC,EACnD,CACF,EAAG,CAACN,EAAI,OAAO,CAAC,EAET,CAAE,SAAAG,EAAU,UAAAF,CAAU,CAC/B,EC3BA,SAASM,GAAWC,EAAcC,EAA4B,QAAiB,CAC7E,IAAMC,EAAU,KAAK,MAAMF,EAAO,EAAE,EAC9BG,EAAU,KAAK,MAAMH,EAAO,EAAE,EACpC,OAAIC,IAAS,UAEJ,GADO,KAAK,MAAMC,EAAU,EAAE,CACtB,IAAIA,CAAO,IAAIC,EAAU,GAAK,IAAM,EAAE,GAAGA,CAAO,GAE1D,GAAGD,CAAO,IAAIC,EAAU,GAAK,IAAM,EAAE,GAAGA,CAAO,EACxD","names":["styleInject","css","insertAt","head","style","styleInject","React","React","jsx","VideoContext","useVideo","context","VideoProvider","children","ref","duration","showHidingElement","setShowHidingElement","fullscreen","setFullscreen","React","useAutoplayByForce","ref","enabled","setError","_a","error","retryError","React","useStartAt","ref","startAt","video","React","useAutoplayOnVisible","ref","threshold","enabled","observer","entries","entry","_a","error","React","usePlayPause","ref","enabled","isPlaying","setIsPlaying","togglePlay","handlePlay","handlePause","_a","_b","jsx","PlayPauseOnVideo","ref","useVideo","togglePlay","usePlayPause","React","useMuteUnmute","ref","enabled","isMuted","setIsMuted","toggleMute","handleVolumeChange","_a","React","useFullscreen","ref","isFullscreen","setIsFullscreen","useVideo","React","handleFullscreenChange","toggleFullscreen","_a","isSafari","video","videoContainer","React","usePictureInPicture","ref","isPictureInPicture","setIsPictureInPicture","useVideo","React","handlePictureInPictureChange","togglePictureInPicture","video","error","videoContainer","React","useSpeed","ref","enabled","speed","setSpeed","onChangeSpeed","FunctionChildren","ref","children","duration","showHidingElement","useVideo","togglePlay","isPlaying","usePlayPause","speed","onChangeSpeed","useSpeed","toggleMute","isMuted","useMuteUnmute","isFullscreen","toggleFullscreen","useFullscreen","isPictureInPicture","togglePictureInPicture","usePictureInPicture","React","jsx","HidingElement","React","children","className","props","ref","useVideo","isPlaying","usePlayPause","showHidingElement","setShowHidingElement","jsx","jsxs","VideoComponent","React","children","autoPlay","className","ratio","config","controls","pause","props","ref","duration","setDuration","error","setError","videoRef","showHidingElement","setShowHidingElement","timeoutRef","handleMouseEnter","_a","handleMouseLeave","handleMouseMove","_b","useAutoplayByForce","useStartAt","useAutoplayOnVisible","VideoProvider","e","start","end","FunctionChildren","Video","PlayPauseOnVideo","HidingElement","React","useVolume","volume","setVolume","React","ref","useVideo","onChangeVolume","React","useTimeline","isPlaying","setIsPlaying","React","currentTime","setCurrentTime","buffered","setBuffered","ref","duration","useVideo","intervalId","_a","_b","React","useGetDuration","ref","isLoading","setIsLoading","duration","setDuration","_a","_b","formatTime","time","type","minutes","seconds"]}
|