{"version":3,"file":"AppleStyleVideoPlayer.C5FDHTEW.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/uHrOeWs9kypCyWAoXtyB/qR8SKohYMlfNL2ilwVQN/AppleStyleVideoPlayer.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useState,useEffect}from\"react\";import{motion,useScroll,useTransform,useSpring,useMotionValue}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";export default function AppleStyleVideoPlayer(props){const{videoUrl,scaleStart,scaleEnd,borderRadiusEnd,playing,loop,muted,poster,startTime,videoHeight,objectFit,buttonStyle,ringColor,progressColor,style}=props;const containerRef=useRef(null);const videoRef=useRef(null);const[isPlaying,setIsPlaying]=useState(playing);const progress=useMotionValue(283);const isMobile=typeof window!==\"undefined\"&&window.innerWidth<=768;const buttonSize=isMobile?36:40;const iconSize=isMobile?20:20;const paddingSize=isMobile?20:40;const{scrollYProgress}=useScroll({target:containerRef,offset:[\"start end\",\"end start\"]});const scale=useTransform(scrollYProgress,[.35,1],[scaleStart,scaleEnd],{clamp:true});const borderRadius=useTransform(scrollYProgress,[.35,1],[0,borderRadiusEnd],{clamp:true});const smoothScale=useSpring(scale,{stiffness:200,damping:30});const smoothRadius=useSpring(borderRadius,{stiffness:200,damping:30});const togglePlay=()=>{const video=videoRef.current;if(!video)return;if(video.paused){video.play().catch(()=>setIsPlaying(false));setIsPlaying(true);}else{video.pause();setIsPlaying(false);}};useEffect(()=>{const video=videoRef.current;if(!video)return;if(playing){const handlePlay=()=>{if(startTime>0&&startTime<=100&&video.duration){video.currentTime=video.duration*startTime/100;}};video.addEventListener(\"loadedmetadata\",handlePlay);video.play().catch(()=>setIsPlaying(false));setIsPlaying(true);return()=>video.removeEventListener(\"loadedmetadata\",handlePlay);}else{video.pause();setIsPlaying(false);}},[playing,startTime]);useEffect(()=>{const video=videoRef.current;if(!video)return;let rafId;const update=()=>{if(video.duration){const offset=(1-video.currentTime/video.duration)*283;progress.set(offset);}rafId=requestAnimationFrame(update);};rafId=requestAnimationFrame(update);return()=>cancelAnimationFrame(rafId);},[progress]);const renderButtonIcon=()=>{if(buttonStyle===\"default\"){return isPlaying?/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",viewBox:\"0 0 20 20\",width:iconSize,height:iconSize,fill:\"#00000089\",children:/*#__PURE__*/_jsxs(\"g\",{children:[/*#__PURE__*/_jsx(\"rect\",{width:\"4.5\",height:\"14\",x:\"3.75\",y:\"3\",rx:\"1.5\"}),/*#__PURE__*/_jsx(\"rect\",{width:\"4.5\",height:\"14\",x:\"11.75\",y:\"3\",rx:\"1.5\"})]})}):/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",viewBox:\"0 0 20 20\",width:iconSize,height:iconSize,fill:\"#00000089\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M5 15.25V4.77a1.44 1.44 0 0 1 1.44-1.62 1.86 1.86 0 0 1 1.11.31l8.53 5c.76.44 1.17.8 1.17 1.51s-.41 1.07-1.17 1.51l-8.53 5a1.86 1.86 0 0 1-1.11.31A1.42 1.42 0 0 1 5 15.25Z\"})});}else{return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:buttonSize,height:buttonSize},children:[/*#__PURE__*/_jsxs(\"svg\",{viewBox:\"0 0 100 100\",width:buttonSize,height:buttonSize,style:{willChange:\"transform\",transform:\"rotate(-90deg)\",position:\"absolute\",top:0,left:0},children:[/*#__PURE__*/_jsx(\"circle\",{cx:\"50\",cy:\"50\",r:\"45\",stroke:ringColor,strokeWidth:\"6\",fill:\"transparent\"}),/*#__PURE__*/_jsx(motion.circle,{cx:\"50\",cy:\"50\",r:\"45\",stroke:progressColor,strokeWidth:\"6\",fill:\"transparent\",strokeDasharray:283,style:{strokeDashoffset:progress},strokeLinecap:\"round\"})]}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:buttonSize,height:buttonSize,display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:isPlaying?/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",viewBox:\"0 0 20 20\",width:iconSize,height:iconSize,fill:\"#FFFFFF\",children:/*#__PURE__*/_jsxs(\"g\",{children:[/*#__PURE__*/_jsx(\"rect\",{width:\"4.5\",height:\"14\",x:\"3.75\",y:\"3\",rx:\"1.5\"}),/*#__PURE__*/_jsx(\"rect\",{width:\"4.5\",height:\"14\",x:\"11.75\",y:\"3\",rx:\"1.5\"})]})}):/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",viewBox:\"0 0 20 20\",width:iconSize,height:iconSize,fill:\"#FFFFFF\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M5 15.25V4.77a1.44 1.44 0 0 1 1.44-1.62 1.86 1.86 0 0 1 1.11.31l8.53 5c.76.44 1.17.8 1.17 1.51s-.41 1.07-1.17 1.51l-8.53 5a1.86 1.86 0 0 1-1.11.31A1.42 1.42 0 0 1 5 15.25Z\"})})})]});}};return /*#__PURE__*/_jsxs(motion.div,{ref:containerRef,style:{...style,position:\"relative\",display:\"flex\",flexDirection:\"column\",justifyContent:\"flex-end\",width:\"100%\",height:videoHeight,overflow:\"visible\",scale:smoothScale,borderRadius:smoothRadius},children:[/*#__PURE__*/_jsx(motion.video,{ref:videoRef,src:videoUrl,muted:muted,playsInline:true,autoPlay:playing,loop:loop,poster:poster||undefined,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",objectFit,zIndex:0,borderRadius:smoothRadius}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",bottom:0,display:\"flex\",flexDirection:\"row\",justifyContent:\"flex-end\",padding:paddingSize,zIndex:2},children:/*#__PURE__*/_jsx(\"button\",{onClick:togglePlay,style:{width:buttonSize,height:buttonSize,borderRadius:\"50%\",background:buttonStyle===\"default\"?\"#E8E8ED\":\"transparent\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",border:\"none\",padding:0,cursor:\"pointer\"},children:renderButtonIcon()})})]});}AppleStyleVideoPlayer.defaultProps={videoUrl:\"https://static.framer.com/videos/framer-intro.mp4\",scaleStart:1,scaleEnd:.88,borderRadiusEnd:40,playing:true,loop:false,muted:true,startTime:0,videoHeight:680,objectFit:\"cover\",buttonStyle:\"default\",ringColor:\"#86868b\",progressColor:\"#ffffff\"};addPropertyControls(AppleStyleVideoPlayer,{videoUrl:{type:ControlType.String,title:\"Video URL\"},scaleStart:{type:ControlType.Number,title:\"Scale Start\",min:.5,max:1.5,step:.01},scaleEnd:{type:ControlType.Number,title:\"Scale End\",min:.5,max:1.5,step:.01},borderRadiusEnd:{type:ControlType.Number,title:\"Final Border Radius\",min:0,max:100,step:1},playing:{type:ControlType.Boolean,title:\"Autoplay\"},loop:{type:ControlType.Boolean,title:\"Loop\"},muted:{type:ControlType.Boolean,title:\"Muted\"},poster:{type:ControlType.Image,title:\"Poster\"},startTime:{type:ControlType.Number,title:\"Start Time (%)\",min:0,max:100,step:1},videoHeight:{type:ControlType.Number,title:\"Video Height\",min:100,max:2e3,step:10},objectFit:{type:ControlType.Enum,title:\"Fit\",options:[\"cover\",\"fill\",\"contain\",\"scale-down\",\"none\"],optionTitles:[\"Cover\",\"Fill\",\"Contain\",\"Scale Down\",\"None\"]},buttonStyle:{type:ControlType.Enum,title:\"Button Style\",options:[\"default\",\"progress\"],optionTitles:[\"Default\",\"Progress Ring\"]},ringColor:{type:ControlType.Color,title:\"Ring Color\"},progressColor:{type:ControlType.Color,title:\"Progress Color\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AppleStyleVideoPlayer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AppleStyleVideoPlayer.map"],"mappings":"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"}