{"version":3,"file":"VideoButton.C6i6N6YA.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/qocbKKZPr1xgBC57i5yM/DDsWSpPOnm6MmVug0XWt/VideoButton.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState,useRef}from\"react\";import{Icon,useVideoStore,getVideoId,normalizeFramerImage}from\"https://framerusercontent.com/modules/6ffgsaDzsjdxRp9dCkQD/HYvcOjY2ixHI33I7ZJQi/VideoFrameShared.js\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 40\n * @framerIntrinsicHeight 40\n * @framerDisableUnlink\n */export default function VideoButton(props){const{type,skipTime=10}=props;const[videoState]=useVideoStore();const[videoId,setVideoId]=useState(null);const state=videoId?videoState[videoId]:undefined;const ref=useRef(null);useEffect(()=>{setVideoId(getVideoId(ref.current));},[]);let icon;let defaultIcon;let onClick;switch(type){case\"play\":icon=state?.playing?props.pauseIcon:props.playIcon;defaultIcon=state?.playing?`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-player-pause'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z' /%3E%3Cpath d='M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z' /%3E%3C/svg%3E\")`:`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-player-play'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z' /%3E%3C/svg%3E\")`;onClick=()=>{console.log(\"[VideoButton][Play]\",\"toggle click\",{videoId,beforePlaying:state?.playing,afterWillBe:typeof state?.playing===\"boolean\"?!state.playing:undefined,hasSetPlaying:Boolean(state?.setPlaying)});if(state?.setPlaying){state.setPlaying(!state.playing);}};break;case\"fullscreen\":icon=props.fullscreenIcon;defaultIcon=`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-arrows-maximize'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16 4l4 0l0 4' /%3E%3Cpath d='M14 10l6 -6' /%3E%3Cpath d='M8 20l-4 0l0 -4' /%3E%3Cpath d='M4 20l6 -6' /%3E%3Cpath d='M16 20l4 0l0 -4' /%3E%3Cpath d='M14 14l6 6' /%3E%3Cpath d='M8 4l-4 0l0 4' /%3E%3Cpath d='M4 4l6 6' /%3E%3C/svg%3E\")`;onClick=()=>{if(state?.setFullscreen){state.setFullscreen(!state.fullscreen);}};break;case\"skipForward\":icon=props.skipIcon;defaultIcon=`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-reload'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747' /%3E%3Cpath d='M20 4v5h-5' /%3E%3C/svg%3E\")`;onClick=()=>{if(state?.setTime){state.setTime(state.getTime()+skipTime);}};break;case\"skipBackward\":icon=props.skipIcon;defaultIcon=`url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.06694 13.041C4.25577 14.4809 4.83302 15.8423 5.73677 16.9792C6.64053 18.116 7.83669 18.9853 9.19698 19.494C10.5573 20.0027 12.0304 20.1315 13.4583 19.8666C14.8862 19.6017 16.2151 18.953 17.3024 17.9903C18.3897 17.0275 19.1944 15.787 19.6303 14.4016C20.0661 13.0163 20.1166 11.5384 19.7764 10.1266C19.4361 8.7147 18.718 7.42208 17.699 6.38734C16.6799 5.3526 15.3984 4.61477 13.9919 4.25298C10.0929 3.25298 6.05694 5.25998 4.56694 8.99998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4V9H9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A\")`;onClick=()=>{if(state?.setTime){state.setTime(state.getTime()-skipTime);}};break;case\"mute\":const muteIcons=[props.muteIcon,props.unmuteIcon];const muteDefaultIcons=[`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-volume-off'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8a5 5 0 0 1 1.912 4.934m-1.377 2.602a5 5 0 0 1 -.535 .464' /%3E%3Cpath d='M17.7 5a9 9 0 0 1 2.362 11.086m-1.676 2.299a9 9 0 0 1 -.686 .615' /%3E%3Cpath d='M9.069 5.054l.431 -.554a.8 .8 0 0 1 1.5 .5v2m0 4v8a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l1.294 -1.664' /%3E%3Cpath d='M3 3l18 18' /%3E%3C/svg%3E\")`,`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-volume'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M15 8a5 5 0 0 1 0 8' /%3E%3Cpath d='M17.7 5a9 9 0 0 1 0 14' /%3E%3Cpath d='M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5' /%3E%3C/svg%3E\")`];const muteIconIndex=state?.muted||state?.volume===0?0:1;icon=muteIcons[muteIconIndex];defaultIcon=muteDefaultIcons[muteIconIndex];onClick=()=>{if(state?.setMuted){state.setMuted(!state.muted);}};break;case\"pictureInPicture\":icon=props.pictureInPictureIcon;defaultIcon=`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-picture-in-picture'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4' /%3E%3Cpath d='M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z' /%3E%3C/svg%3E\")`;onClick=()=>{if(state?.setPiP){state.setPiP(!state.pip);}};break;case\"restart\":icon=props.restartIcon;defaultIcon=`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-player-track-prev'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M20.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z' /%3E%3Cpath d='M9.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z' /%3E%3C/svg%3E\")`;onClick=()=>{if(state?.setTime){state.setTime(0);}};break;case\"toggleLoop\":icon=state?.loop?props.loopOnIcon:props.loopOffIcon;defaultIcon=state?.loop?`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-repeat'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3' /%3E%3Cpath d='M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3' /%3E%3C/svg%3E\")`:`url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-repeat-off'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3' /%3E%3Cpath d='M20 12v3a3 3 0 0 1 -.133 .886m-1.99 1.984a3 3 0 0 1 -.877 .13h-13m3 3l-3 -3l3 -3' /%3E%3Cpath d='M3 3l18 18' /%3E%3C/svg%3E\")`;onClick=()=>{if(state?.setLoop){state.setLoop(!state.loop);}};break;}const normalizedIcon=normalizeFramerImage(icon);const iconColor=normalizedIcon?.src?undefined:props.iconColor;return /*#__PURE__*/_jsx(\"div\",{\"data-videoframe\":true,ref:ref,onMouseEnter:props.hoverEvent,onClick:()=>{onClick?.();props.clickEvent?.();},style:{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",cursor:\"pointer\",...props.style},children:/*#__PURE__*/_jsx(Icon,{image:normalizedIcon,color:iconColor,size:props.iconSize,defaultImage:defaultIcon??\"\"})});}addPropertyControls(VideoButton,{type:{type:ControlType.Enum,defaultValue:\"play\",options:[\"play\",\"fullscreen\",\"skipForward\",\"skipBackward\",\"mute\",\"pictureInPicture\",\"restart\",\"toggleLoop\"],optionTitles:[\"Play/Pause\",\"Fullscreen\",\"Skip Forward\",\"Skip Backward\",\"Mute\",\"Picture-in-Picture\",\"Restart\",\"Toggle Loop\"],title:\"Action\"},skipTime:{type:ControlType.Number,defaultValue:10,min:1,step:1,displayStepper:true,unit:\"s\",title:\"Time\",hidden:p=>p[\"type\"]!==\"skipForward\"&&p[\"type\"]!==\"skipBackward\"},playIcon:{type:ControlType.ResponsiveImage,hidden:p=>p[\"type\"]!==\"play\"},pauseIcon:{type:ControlType.ResponsiveImage,hidden:p=>p[\"type\"]!==\"play\"},fullscreenIcon:{type:ControlType.ResponsiveImage,title:\"Fullscreen\",hidden:p=>p[\"type\"]!==\"fullscreen\"},minimizeIcon:{type:ControlType.ResponsiveImage,title:\"Minimize\",hidden:p=>p[\"type\"]!==\"fullscreen\"},skipIcon:{type:ControlType.ResponsiveImage,title:\"Icon\",hidden:p=>p[\"type\"]!==\"skipForward\"&&p[\"type\"]!==\"skipBackward\"},muteIcon:{type:ControlType.ResponsiveImage,title:\"Mute\",hidden:p=>p[\"type\"]!==\"mute\"},unmuteIcon:{type:ControlType.ResponsiveImage,title:\"Unmute\",hidden:p=>p[\"type\"]!==\"mute\"},pictureInPictureIcon:{type:ControlType.ResponsiveImage,title:\"Icon\",hidden:p=>p[\"type\"]!==\"pictureInPicture\"},restartIcon:{type:ControlType.ResponsiveImage,title:\"Icon\",hidden:p=>p[\"type\"]!==\"restart\"},loopOnIcon:{type:ControlType.ResponsiveImage,title:\"Loop On\",hidden:p=>p[\"type\"]!==\"toggleLoop\"},loopOffIcon:{type:ControlType.ResponsiveImage,title:\"Loop Off\",hidden:p=>p[\"type\"]!==\"toggleLoop\"},iconColor:{type:ControlType.Color,defaultValue:\"#FFF\",optional:true},iconSize:{type:ControlType.Number,defaultValue:20,min:1,step:1,displayStepper:true},hoverEvent:{type:ControlType.EventHandler,title:\"Hover\"},clickEvent:{type:ControlType.EventHandler,title:\"Click\"}});VideoButton.displayName=\"Video Button\";\nexport const __FramerMetadata__ = {\"exports\":{\"VideoButtonAction\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"VideoButtonProps\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"VideoButton\",\"slots\":[],\"annotations\":{\"framerIntrinsicWidth\":\"40\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"40\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],"mappings":"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"}