{"version":3,"file":"VideoFrameBar.CoktrPyK.mjs","names":["videoId"],"sources":["https:/framerusercontent.com/modules/wJ9FVbTgY4yFYJHATsYx/Ezo5DiLuZhAuBUNloTAd/VideoFrameBar.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";import{useEffect,useState}from\"react\";import{useVideoStore}from\"https://framerusercontent.com/modules/fRFpVdPrIhh8XlcDXeAu/dJMkaV2PxzCBMB1NoZOh/VideoFrameShared.js\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function VideoFrameProgressBar(props){const{videoId,backgroundColor=\"#E1E1E1\",progressColor=\"#0099FF\",borderRadius=2,isCircular=false,circleSize=40,strokeWidth=4}=props;const[videoState]=useVideoStore();const[videoDuration,setVideoDuration]=useState(0);const[progress,setProgress]=useState(0);const[isReady,setIsReady]=useState(true);// Separate the localStorage reading from state updates\nconst getStoredProgress=videoId=>{try{const stored=localStorage.getItem(`video_progress_${videoId}`);const duration=videoState[videoId]?.duration||100;return stored?parseFloat(stored)/duration:0;}catch(e){console.error(\"Error reading from localStorage:\",e);return 0;}};// Handle duration updates separately\nuseEffect(()=>{const video=videoState[videoId];const duration=video?.duration||100;setVideoDuration(duration);},[videoId,videoState]);// Handle progress updates\nuseEffect(()=>{let isMounted=true;const video=videoState[videoId];const storedProgress=getStoredProgress(videoId);if(isMounted){setProgress(storedProgress);}if(!video){return;}const onTimeUpdate=([currentTime])=>{if(!isMounted)return;if(video.duration&&currentTime!==undefined){const newProgress=currentTime/video.duration;setProgress(newProgress);}else{setProgress(storedProgress);}};video.addTimeCallback(onTimeUpdate);return()=>{isMounted=false;if(video){video.removeTimeCallback(onTimeUpdate);}};},[videoId,videoState]);// Update progress when videoId changes\nuseEffect(()=>{setProgress(getStoredProgress(videoId));},[videoId]);if(!isReady){return null;}const currentProgress=progress||getStoredProgress(videoId);if(isCircular){const center=circleSize/2;const radius=(circleSize-strokeWidth)/2;return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:/*#__PURE__*/_jsxs(\"svg\",{width:circleSize,height:circleSize,viewBox:`0 0 ${circleSize} ${circleSize}`,style:{transform:\"rotate(-90deg)\"},children:[/*#__PURE__*/_jsx(\"circle\",{cx:center,cy:center,r:radius,fill:\"none\",stroke:backgroundColor,strokeWidth:strokeWidth}),/*#__PURE__*/_jsx(motion.circle,{cx:center,cy:center,r:radius,fill:\"none\",stroke:progressColor,strokeWidth:strokeWidth,initial:{pathLength:currentProgress},animate:{pathLength:currentProgress},transition:{duration:.1,ease:\"linear\"}},videoId)]})});}return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\"},children:/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:\"100%\",backgroundColor,borderRadius,overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(motion.div,{style:{width:\"100%\",height:\"100%\",backgroundColor:progressColor,transformOrigin:\"left\",scaleX:currentProgress,transition:\"transform 0.1s linear\"}})})});}addPropertyControls(VideoFrameProgressBar,{videoId:{type:ControlType.String,title:\"Video ID\",description:\"The ID of the video to track (from VideoFrame's data-video-id attribute)\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#E1E1E1\"},progressColor:{type:ControlType.Color,title:\"Progress Color\",defaultValue:\"#0099FF\"},isCircular:{type:ControlType.Boolean,title:\"Style\",defaultValue:false,enabledTitle:\"Circular\",disabledTitle:\"Linear\"},height:{type:ControlType.Number,title:\"Height\",defaultValue:4,min:1,max:20,unit:\"px\",hidden(props){return props.isCircular===true;}},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:2,min:0,max:20,unit:\"px\",hidden(props){return props.isCircular===true;}},circleSize:{type:ControlType.Number,title:\"Circle Size\",defaultValue:40,min:20,max:200,unit:\"px\",hidden(props){return props.isCircular===false;}},strokeWidth:{type:ControlType.Number,title:\"Stroke Width\",defaultValue:4,min:1,max:20,unit:\"px\",hidden(props){return props.isCircular===false;}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoFrameProgressBar\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],"mappings":"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"}