{"version":3,"file":"Video_single.Bi3DR40F.mjs","names":["useState","useRef","Player","_Fragment"],"sources":["https:/framerusercontent.com/modules/gTOIsenKf5UQHEc6gthe/Nqxgfa7vQfVVETKCnBW3/Video_single.js"],"sourcesContent":["// \"use client\"\n// import { addPropertyControls, ControlType } from \"framer\"\n// import { useEffect, useState, useRef } from \"react\"\n// import Player from \"@vimeo/player\"\n// type SizingMode = \"width-based\" | \"height-based\" | \"fill\" | \"max-height\"\n// export default function VimeoViewer({\n//     videoUrl,\n//     sizingMode = \"width-based\",\n//     fixedHeight = 400,\n//     size = \"large\",\n//     autoplay = false,\n//     loop = true,\n//     mute = false,\n//     controls = true,\n// }) {\n//     // ALWAYS force mute to be true if autoplay is enabled (critical for autoplay to work)\n//     const effectiveMute = autoplay ? true : mute\n//     const [aspectRatio, setAspectRatio] = useState(56.25) // Default 16:9\n//     const [isLoading, setIsLoading] = useState(true)\n//     const [containerWidth, setContainerWidth] = useState(0)\n//     const containerRef = useRef<HTMLDivElement>(null)\n//     const iframeRef = useRef(null)\n//     const playerRef = useRef(null)\n//     const mountedRef = useRef(true)\n//     const resizeObserverRef = useRef<ResizeObserver | null>(null)\n//     const autoplayAttemptsRef = useRef(0)\n//     // Track if we've created the iframe yet\n//     const iframeCreatedRef = useRef(false)\n//     const maxHeightPercent = size === \"large\" ? 0.9 : 0.4\n//     const extractVimeoId = (url) => {\n//         if (!url) return \"\"\n//         const match = url.match(/vimeo\\.com\\/(\\d+)(?:\\/([\\w\\d]+))?/)\n//         if (match) {\n//             const videoId = match[1]\n//             const hash = match[2] ? `?h=${match[2]}` : \"\"\n//             return `${videoId}${hash}`\n//         }\n//         return \"\"\n//     }\n//     const formattedId = extractVimeoId(videoUrl)\n//     // This function is critical for autoplay to work\n//     const getVideoUrl = (id) => {\n//         if (!id) return \"\"\n//         const [videoId, hash] = id.split(\"?\")\n//         // These parameters are critical for autoplay\n//         const params = [\n//             // Autoplay parameter must be 1 for autoplay to work\n//             `autoplay=${autoplay ? 1 : 0}`,\n//             // Must be muted for autoplay to work in browsers\n//             `muted=1`, // Alltid start muted\n//             // Background parameter helps with autoplay\n//             `background=${autoplay ? 1 : 0}`,\n//             // Other parameters\n//             `controls=${controls ? 1 : 0}`,\n//             `loop=${loop ? 1 : 0}`,\n//             `playsinline=1`,\n//             `transparent=1`,\n//             `dnt=1`,\n//         ].join(\"&\")\n//         return `https://player.vimeo.com/video/${videoId}${hash ? `?${hash}&${params}` : `?${params}`}`\n//     }\n//     // Enhanced calculate dimensions function with improved height-based mode\n//     const calculateDimensions = () => {\n//         if (!containerRef.current) return { width: \"100%\", height: \"auto\" }\n//         if (sizingMode === \"height-based\" || sizingMode === \"fill\") {\n//             // Calculate width based on fixed height and aspect ratio\n//             const calculatedWidth = fixedHeight / (aspectRatio / 100)\n//             if (sizingMode === \"fill\") {\n//                 // Fill mode: container takes the calculated width\n//                 return {\n//                     height: `${fixedHeight}px`,\n//                     width: `${calculatedWidth}px`,\n//                 }\n//             } else {\n//                 // Standard height-based: iframe takes the calculated width\n//                 return {\n//                     height: `${fixedHeight}px`,\n//                     width: `${calculatedWidth}px`,\n//                 }\n//             }\n//         } else if (sizingMode === \"max-height\") {\n//             // Get the maximum available height (viewport height or container parent height)\n//             const viewportHeight = window.innerHeight\n//             const parentHeight =\n//                 containerRef.current.parentElement?.offsetHeight ||\n//                 viewportHeight\n//             // Use the smaller of viewport height or parent container height\n//             // Subtract a small amount to account for margins/padding\n//             const maxAvailableHeight =\n//                 Math.min(viewportHeight, parentHeight) - 40\n//             // Calculate width based on the maximum height and aspect ratio\n//             const calculatedWidth = maxAvailableHeight / (aspectRatio / 100)\n//             return {\n//                 height: `${maxAvailableHeight}px`,\n//                 width: `${calculatedWidth}px`,\n//             }\n//         } else {\n//             // Original width-based logic\n//             const viewportHeight = window.innerHeight\n//             const maxHeight = viewportHeight * maxHeightPercent\n//             const containerWidth = containerRef.current.offsetWidth\n//             // Calculate height based on aspect ratio\n//             const heightBasedOnWidth = containerWidth * (aspectRatio / 100)\n//             // If height would exceed maxHeight, calculate width based on maxHeight\n//             if (heightBasedOnWidth > maxHeight) {\n//                 const width = maxHeight / (aspectRatio / 100)\n//                 return {\n//                     width: `${width}px`,\n//                     height: `${maxHeight}px`,\n//                 }\n//             }\n//             // Otherwise use full container width\n//             return {\n//                 width: \"100%\",\n//                 height: `${heightBasedOnWidth}px`,\n//             }\n//         }\n//     }\n//     // Dedicated function to force autoplay\n//     const forceAutoplay = async () => {\n//         if (!playerRef.current || !autoplay || autoplayAttemptsRef.current > 3)\n//             return\n//         autoplayAttemptsRef.current++\n//         console.log(\n//             `Attempting autoplay (attempt ${autoplayAttemptsRef.current})`\n//         )\n//         try {\n//             // Make sure player is ready\n//             await playerRef.current.ready()\n//             // Force mute (required for autoplay)\n//             await playerRef.current.setVolume(0)\n//             // Try to play\n//             await playerRef.current.play()\n//             console.log(\"Autoplay successful\")\n//             // Show content\n//             setIsLoading(false)\n//         } catch (error) {\n//             console.warn(\"Autoplay failed:\", error)\n//             // Show content anyway after failed autoplay\n//             setIsLoading(false)\n//             // Try again with a delay\n//             if (autoplayAttemptsRef.current < 3) {\n//                 setTimeout(() => {\n//                     if (mountedRef.current) forceAutoplay()\n//                 }, 1000)\n//             }\n//         }\n//     }\n//     // This effect handles iframe creation and initial setup\n//     useEffect(() => {\n//         // Reset state for new video\n//         mountedRef.current = true\n//         autoplayAttemptsRef.current = 0\n//         setIsLoading(true)\n//         iframeCreatedRef.current = true\n//         // Safety timeout - show content after 3 seconds regardless\n//         const safetyTimeout = setTimeout(() => {\n//             if (mountedRef.current) {\n//                 setIsLoading(false)\n//             }\n//         }, 3000)\n//         // Set up resize observer\n//         if (containerRef.current) {\n//             if (resizeObserverRef.current) {\n//                 resizeObserverRef.current.disconnect()\n//             }\n//             resizeObserverRef.current = new ResizeObserver((entries) => {\n//                 if (!entries[0] || !mountedRef.current) return\n//                 setContainerWidth(entries[0].contentRect.width)\n//             })\n//             resizeObserverRef.current.observe(containerRef.current)\n//         }\n//         // Clean up function\n//         return () => {\n//             mountedRef.current = false\n//             clearTimeout(safetyTimeout)\n//             if (resizeObserverRef.current) {\n//                 resizeObserverRef.current.disconnect()\n//             }\n//         }\n//     }, [formattedId])\n//     // This effect handles player initialization and autoplay\n//     useEffect(() => {\n//         if (!formattedId || !iframeRef.current || !iframeCreatedRef.current)\n//             return\n//         // Clean up previous player\n//         if (playerRef.current) {\n//             try {\n//                 playerRef.current.off(\"loaded\")\n//                 playerRef.current.off(\"play\")\n//                 playerRef.current.off(\"error\")\n//                 playerRef.current.destroy()\n//             } catch (e) {\n//                 // Ignore cleanup errors\n//             }\n//             playerRef.current = null\n//         }\n//         const initializePlayer = async () => {\n//             try {\n//                 console.log(\"Creating Vimeo player instance\")\n//                 // Create player instance\n//                 playerRef.current = new Player(iframeRef.current, {\n//                     // Don't specify ID here, let the iframe URL handle it\n//                     autoplay: autoplay, // Set autoplay in constructor\n//                     muted: true, // Always mute initially for autoplay\n//                     loop: loop,\n//                     controls: controls,\n//                     background: autoplay, // Background mode helps with autoplay\n//                 })\n//                 // Set up event listeners\n//                 playerRef.current.on(\"loaded\", () => {\n//                     if (!mountedRef.current) return\n//                     console.log(\"Vimeo player loaded event\")\n//                     // Get video dimensions\n//                     Promise.all([\n//                         playerRef.current.getVideoWidth(),\n//                         playerRef.current.getVideoHeight(),\n//                     ])\n//                         .then(([width, height]) => {\n//                             if (!mountedRef.current) return\n//                             if (width && height) {\n//                                 const ratio = ((height / width) * 100).toFixed(\n//                                     2\n//                                 )\n//                                 setAspectRatio(Number(ratio))\n//                                 setContainerWidth((prev) => prev + 1)\n//                             }\n//                         })\n//                         .catch((e) =>\n//                             console.error(\"Error getting video dimensions:\", e)\n//                         )\n//                     // Force autoplay after loaded event\n//                     if (autoplay) {\n//                         forceAutoplay()\n//                     } else {\n//                         setIsLoading(false)\n//                     }\n//                 })\n//                 playerRef.current.on(\"play\", () => {\n//                     if (!mountedRef.current) return\n//                     console.log(\"Vimeo player play event\")\n//                     setIsLoading(false)\n//                     // If user didn't want it muted originally, unmute after autoplay starts\n//                     if (!mute && autoplay) {\n//                         setTimeout(() => {\n//                             if (playerRef.current && mountedRef.current) {\n//                                 playerRef.current\n//                                     .setVolume(1)\n//                                     .catch((e) =>\n//                                         console.warn(\n//                                             \"Could not unmute after autoplay:\",\n//                                             e\n//                                         )\n//                                     )\n//                             }\n//                         }, 1000)\n//                     }\n//                 })\n//                 playerRef.current.on(\"error\", (error) => {\n//                     console.error(\"Vimeo player error:\", error)\n//                     if (mountedRef.current) {\n//                         setIsLoading(false)\n//                     }\n//                 })\n//                 // Wait for player to be ready\n//                 await playerRef.current.ready()\n//                 console.log(\"Vimeo player ready\")\n//                 // Force autoplay immediately after ready\n//                 if (autoplay) {\n//                     forceAutoplay()\n//                 } else {\n//                     setIsLoading(false)\n//                 }\n//             } catch (error) {\n//                 console.error(\"Error initializing Vimeo player:\", error)\n//                 if (mountedRef.current) {\n//                     setIsLoading(false)\n//                 }\n//             }\n//         }\n//         // Initialize player\n//         initializePlayer()\n//         // Set up user interaction listeners for autoplay\n//         if (autoplay) {\n//             const handleUserInteraction = () => {\n//                 if (playerRef.current && mountedRef.current) {\n//                     forceAutoplay()\n//                     // Remove listeners after first interaction\n//                     ;[\"click\", \"touchstart\", \"keydown\"].forEach((event) => {\n//                         document.removeEventListener(\n//                             event,\n//                             handleUserInteraction\n//                         )\n//                     })\n//                 }\n//             }\n//             // Add listeners for user interaction\n//             ;[\"click\", \"touchstart\", \"keydown\"].forEach((event) => {\n//                 document.addEventListener(event, handleUserInteraction, {\n//                     once: true,\n//                 })\n//             })\n//         }\n//         // Clean up function\n//         return () => {\n//             if (playerRef.current) {\n//                 try {\n//                     playerRef.current.off(\"loaded\")\n//                     playerRef.current.off(\"play\")\n//                     playerRef.current.off(\"error\")\n//                     playerRef.current.destroy()\n//                 } catch (error) {\n//                     // Ignore cleanup errors\n//                 }\n//                 playerRef.current = null\n//             }\n//         }\n//     }, [formattedId, autoplay, loop, controls])\n//     // Handle mute/unmute without reinitializing\n//     useEffect(() => {\n//         if (!playerRef.current) return\n//         playerRef.current\n//             .getVolume()\n//             .then((currentVolume) => {\n//                 // Only update if needed and not during autoplay\n//                 if (\n//                     (effectiveMute && currentVolume > 0) ||\n//                     (!effectiveMute && currentVolume === 0 && !autoplay)\n//                 ) {\n//                     playerRef.current\n//                         .setVolume(effectiveMute ? 0 : 1)\n//                         .catch((e) => console.warn(\"Error setting volume:\", e))\n//                 }\n//             })\n//             .catch((e) => console.warn(\"Error getting volume:\", e))\n//     }, [effectiveMute, autoplay])\n//     // Recalculate dimensions when relevant props change\n//     useEffect(() => {\n//         setContainerWidth((prev) => prev + 1)\n//     }, [sizingMode, fixedHeight, size, aspectRatio])\n//     const dimensions = calculateDimensions()\n//     // Determine container alignment based on sizing mode\n//     const containerAlignment = sizingMode === \"fill\" ? \"flex-start\" : \"center\"\n//     return (\n//         <div\n//             ref={containerRef}\n//             style={{\n//                 width: \"100%\",\n//                 display: \"flex\",\n//                 justifyContent: containerAlignment,\n//                 alignItems: \"center\",\n//             }}\n//         >\n//             {/* Preconnect hints for faster loading */}\n//             <link rel=\"preconnect\" href=\"https://player.vimeo.com\" />\n//             <link rel=\"preconnect\" href=\"https://i.vimeocdn.com\" />\n//             <link rel=\"preconnect\" href=\"https://f.vimeocdn.com\" />\n//             <div\n//                 style={{\n//                     position: \"relative\",\n//                     width: dimensions.width,\n//                     height: dimensions.height,\n//                     backgroundColor: isLoading ? \"#000\" : \"#f5f5f5\",\n//                     borderRadius: \"12px\",\n//                     overflow: \"hidden\",\n//                     transition: \"width 0.3s ease, height 0.3s ease\",\n//                     transform: \"translateZ(0)\",\n//                 }}\n//             >\n//                 {formattedId ? (\n//                     <>\n//                         <iframe\n//                             ref={iframeRef}\n//                             src={getVideoUrl(formattedId)}\n//                             frameBorder=\"0\"\n//                             allow=\"autoplay; fullscreen; picture-in-picture\"\n//                             style={{\n//                                 position: \"absolute\",\n//                                 top: 0,\n//                                 left: 0,\n//                                 width: \"100%\",\n//                                 height: \"100%\",\n//                                 opacity: isLoading ? 0.5 : 1,\n//                                 transition: \"opacity 0.5s ease\",\n//                                 borderRadius: \"inherit\",\n//                                 transform: \"scale(1.01)\",\n//                             }}\n//                             title=\"Vimeo Video\"\n//                         />\n//                         {isLoading && (\n//                             <div\n//                                 style={{\n//                                     position: \"absolute\",\n//                                     top: \"50%\",\n//                                     left: \"50%\",\n//                                     transform: \"translate(-50%, -50%)\",\n//                                     color: \"#fff\",\n//                                     display: \"flex\",\n//                                     flexDirection: \"column\",\n//                                     alignItems: \"center\",\n//                                     gap: \"8px\",\n//                                 }}\n//                             >\n//                                 <div\n//                                     style={{\n//                                         width: \"24px\",\n//                                         height: \"24px\",\n//                                         border: \"2px solid rgba(255,255,255,0.3)\",\n//                                         borderTop: \"2px solid #fff\",\n//                                         borderRadius: \"50%\",\n//                                         animation: \"spin 1s linear infinite\",\n//                                     }}\n//                                 />\n//                                 <style>\n//                                     {`\n//                                     @keyframes spin {\n//                                         0% { transform: rotate(0deg); }\n//                                         100% { transform: rotate(360deg); }\n//                                     }\n//                                     `}\n//                                 </style>\n//                             </div>\n//                         )}\n//                     </>\n//                 ) : (\n//                     <div\n//                         style={{\n//                             position: \"absolute\",\n//                             top: \"50%\",\n//                             left: \"50%\",\n//                             transform: \"translate(-50%, -50%)\",\n//                             color: \"#fff\",\n//                         }}\n//                     >\n//                         Invalid Vimeo URL\n//                     </div>\n//                 )}\n//             </div>\n//         </div>\n//     )\n// }\n// // Add Framer controls\n// addPropertyControls(VimeoViewer, {\n//     videoUrl: {\n//         type: ControlType.String,\n//         title: \"Vimeo URL\",\n//         defaultValue: \"https://vimeo.com/1023893382/2c3803037a\",\n//     },\n//     sizingMode: {\n//         type: ControlType.Enum,\n//         title: \"Sizing Mode\",\n//         options: [\"width-based\", \"height-based\", \"fill\", \"max-height\"],\n//         defaultValue: \"width-based\",\n//     },\n//     size: {\n//         type: ControlType.Enum,\n//         title: \"Size\",\n//         options: [\"large\", \"medium\"],\n//         defaultValue: \"large\",\n//         hidden: (props) => props.sizingMode !== \"width-based\",\n//     },\n//     fixedHeight: {\n//         type: ControlType.Number,\n//         title: \"Fixed Height (px)\",\n//         defaultValue: 400,\n//         min: 100,\n//         max: 1000,\n//         step: 10,\n//         hidden: (props) =>\n//             props.sizingMode === \"width-based\" ||\n//             props.sizingMode === \"max-height\",\n//     },\n//     autoplay: {\n//         type: ControlType.Boolean,\n//         title: \"Autoplay\",\n//         defaultValue: false,\n//     },\n//     loop: {\n//         type: ControlType.Boolean,\n//         title: \"Loop\",\n//         defaultValue: true,\n//     },\n//     mute: {\n//         type: ControlType.Boolean,\n//         title: \"Mute\",\n//         defaultValue: false,\n//     },\n//     controls: {\n//         type: ControlType.Boolean,\n//         title: \"Controls\",\n//         defaultValue: true,\n//     },\n// })\n\"use client\";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState,useRef}from\"react\";import Player from\"@vimeo/player\";export default function VimeoViewer({videoUrl,sizingMode=\"width-based\",fixedHeight=400,size=\"large\",autoplay=false,loop=true,mute=false,controls=true}){// ALWAYS force mute to be true if autoplay is enabled (critical for autoplay to work)\nconst effectiveMute=autoplay?true:mute;const[aspectRatio,setAspectRatio]=useState(56.25)// Default 16:9\n;const[isLoading,setIsLoading]=useState(true);const[containerWidth,setContainerWidth]=useState(0);const containerRef=useRef(null);const iframeRef=useRef(null);const playerRef=useRef(null);const mountedRef=useRef(true);const resizeObserverRef=useRef(null);const autoplayAttemptsRef=useRef(0);// Track if we've created the iframe yet\nconst iframeCreatedRef=useRef(false);const maxHeightPercent=size===\"large\"?.9:.4;const extractVimeoId=url=>{if(!url)return\"\";const match=url.match(/vimeo\\.com\\/(\\d+)(?:\\/([\\w\\d]+))?/);if(match){const videoId=match[1];const hash=match[2]?`?h=${match[2]}`:\"\";return`${videoId}${hash}`;}return\"\";};const formattedId=extractVimeoId(videoUrl);// This function is critical for autoplay to work\nconst getVideoUrl=id=>{if(!id)return\"\";const[videoId,hash]=id.split(\"?\");// These parameters are critical for autoplay\nconst params=[// Autoplay parameter must be 1 for autoplay to work\n`autoplay=${autoplay?1:0}`,// Alltid start muted (forhindrer avbrudd av bakgrunnsmusikk)\n`muted=1`,// Background parameter helps with autoplay\n`background=${autoplay?1:0}`,// Other parameters\n`controls=${controls?1:0}`,`loop=${loop?1:0}`,`playsinline=1`,`transparent=1`,`dnt=1`].join(\"&\");return`https://player.vimeo.com/video/${videoId}${hash?`?${hash}&${params}`:`?${params}`}`;};// Enhanced calculate dimensions function with improved height-based mode\nconst calculateDimensions=()=>{if(!containerRef.current)return{width:\"100%\",height:\"auto\"};if(sizingMode===\"height-based\"||sizingMode===\"fill\"){// Calculate width based on fixed height and aspect ratio\nconst calculatedWidth=fixedHeight/(aspectRatio/100);if(sizingMode===\"fill\"){// Fill mode: container takes the calculated width\nreturn{height:`${fixedHeight}px`,width:`${calculatedWidth}px`};}else{// Standard height-based: iframe takes the calculated width\nreturn{height:`${fixedHeight}px`,width:`${calculatedWidth}px`};}}else if(sizingMode===\"max-height\"){// Get the maximum available height (viewport height or container parent height)\nconst viewportHeight=window.innerHeight;const parentHeight=containerRef.current.parentElement?.offsetHeight||viewportHeight;// Use the smaller of viewport height or parent container height\n// Subtract a small amount to account for margins/padding\nconst maxAvailableHeight=Math.min(viewportHeight,parentHeight)-40;// Calculate width based on the maximum height and aspect ratio\nconst calculatedWidth=maxAvailableHeight/(aspectRatio/100);return{height:`${maxAvailableHeight}px`,width:`${calculatedWidth}px`};}else{// Original width-based logic\nconst viewportHeight=window.innerHeight;const maxHeight=viewportHeight*maxHeightPercent;const containerWidth=containerRef.current.offsetWidth;// Calculate height based on aspect ratio\nconst heightBasedOnWidth=containerWidth*(aspectRatio/100);// If height would exceed maxHeight, calculate width based on maxHeight\nif(heightBasedOnWidth>maxHeight){const width=maxHeight/(aspectRatio/100);return{width:`${width}px`,height:`${maxHeight}px`};}// Otherwise use full container width\nreturn{width:\"100%\",height:`${heightBasedOnWidth}px`};}};// Dedicated function to force autoplay\nconst forceAutoplay=async()=>{if(!playerRef.current||!autoplay||autoplayAttemptsRef.current>3)return;autoplayAttemptsRef.current++;console.log(`Attempting autoplay (attempt ${autoplayAttemptsRef.current})`);try{// Make sure player is ready\nawait playerRef.current.ready();// Force mute (required for autoplay)\nawait playerRef.current.setVolume(0);// Try to play\nawait playerRef.current.play();console.log(\"Autoplay successful\");// Show content\nsetIsLoading(false);}catch(error){console.warn(\"Autoplay failed:\",error);// Show content anyway after failed autoplay\nsetIsLoading(false);// Try again with a delay\nif(autoplayAttemptsRef.current<3){setTimeout(()=>{if(mountedRef.current)forceAutoplay();},1e3);}}};// This effect handles iframe creation and initial setup\nuseEffect(()=>{// Reset state for new video\nmountedRef.current=true;autoplayAttemptsRef.current=0;setIsLoading(true);iframeCreatedRef.current=true;// Safety timeout - show content after 3 seconds regardless\nconst safetyTimeout=setTimeout(()=>{if(mountedRef.current){setIsLoading(false);}},3e3);// Set up resize observer\nif(containerRef.current){if(resizeObserverRef.current){resizeObserverRef.current.disconnect();}resizeObserverRef.current=new ResizeObserver(entries=>{if(!entries[0]||!mountedRef.current)return;setContainerWidth(entries[0].contentRect.width);});resizeObserverRef.current.observe(containerRef.current);}// Clean up function\nreturn()=>{mountedRef.current=false;clearTimeout(safetyTimeout);if(resizeObserverRef.current){resizeObserverRef.current.disconnect();}};},[formattedId]);// This effect handles player initialization and autoplay\nuseEffect(()=>{if(!formattedId||!iframeRef.current||!iframeCreatedRef.current)return;// Clean up previous player\nif(playerRef.current){try{playerRef.current.off(\"loaded\");playerRef.current.off(\"play\");playerRef.current.off(\"error\");playerRef.current.destroy();}catch(e){// Ignore cleanup errors\n}playerRef.current=null;}const initializePlayer=async()=>{try{console.log(\"Creating Vimeo player instance\");// Create player instance\nplayerRef.current=new Player(iframeRef.current,{// Don't specify ID here, let the iframe URL handle it\nautoplay:autoplay,muted:true,loop:loop,controls:controls,background:autoplay});// Set up event listeners\nplayerRef.current.on(\"loaded\",()=>{if(!mountedRef.current)return;console.log(\"Vimeo player loaded event\");// Get video dimensions\nPromise.all([playerRef.current.getVideoWidth(),playerRef.current.getVideoHeight()]).then(([width,height])=>{if(!mountedRef.current)return;if(width&&height){const ratio=(height/width*100).toFixed(2);setAspectRatio(Number(ratio));setContainerWidth(prev=>prev+1);}}).catch(e=>console.error(\"Error getting video dimensions:\",e));// Force autoplay after loaded event\nif(autoplay){forceAutoplay();}else{setIsLoading(false);}});// OPPDATERT: Unmute kun når brukeren starter videoen\nplayerRef.current.on(\"play\",()=>{if(!mountedRef.current)return;console.log(\"Vimeo player play event\");setIsLoading(false);// Unmute when user actually starts playing (if they want sound)\nif(!mute&&playerRef.current){playerRef.current.setVolume(1).catch(e=>console.warn(\"Could not unmute on play:\",e));}});playerRef.current.on(\"error\",error=>{console.error(\"Vimeo player error:\",error);if(mountedRef.current){setIsLoading(false);}});// Wait for player to be ready\nawait playerRef.current.ready();console.log(\"Vimeo player ready\");// Force autoplay immediately after ready\nif(autoplay){forceAutoplay();}else{setIsLoading(false);}}catch(error){console.error(\"Error initializing Vimeo player:\",error);if(mountedRef.current){setIsLoading(false);}}};// Initialize player\ninitializePlayer();// Set up user interaction listeners for autoplay\nif(autoplay){const handleUserInteraction=()=>{if(playerRef.current&&mountedRef.current){forceAutoplay();[\"click\",\"touchstart\",\"keydown\"].forEach(event=>{document.removeEventListener(event,handleUserInteraction);});}};[\"click\",\"touchstart\",\"keydown\"].forEach(event=>{document.addEventListener(event,handleUserInteraction,{once:true});});}// Clean up function\nreturn()=>{if(playerRef.current){try{playerRef.current.off(\"loaded\");playerRef.current.off(\"play\");playerRef.current.off(\"error\");playerRef.current.destroy();}catch(error){// Ignore cleanup errors\n}playerRef.current=null;}};},[formattedId,autoplay,loop,controls]);// OPPDATERT: Forenklet volume-håndtering - kun for muting\nuseEffect(()=>{if(!playerRef.current)return;// Only handle mute changes (unmute happens on play)\nif(mute){playerRef.current.setVolume(0).catch(e=>console.warn(\"Error muting:\",e));}},[mute]);// Recalculate dimensions when relevant props change\nuseEffect(()=>{setContainerWidth(prev=>prev+1);},[sizingMode,fixedHeight,size,aspectRatio]);const dimensions=calculateDimensions();// Determine container alignment based on sizing mode\nconst containerAlignment=sizingMode===\"fill\"?\"flex-start\":\"center\";return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",display:\"flex\",justifyContent:containerAlignment,alignItems:\"center\"},children:[/*#__PURE__*/_jsx(\"link\",{rel:\"preconnect\",href:\"https://player.vimeo.com\"}),/*#__PURE__*/_jsx(\"link\",{rel:\"preconnect\",href:\"https://i.vimeocdn.com\"}),/*#__PURE__*/_jsx(\"link\",{rel:\"preconnect\",href:\"https://f.vimeocdn.com\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"relative\",width:dimensions.width,height:dimensions.height,backgroundColor:isLoading?\"#000\":\"#f5f5f5\",borderRadius:\"12px\",overflow:\"hidden\",transition:\"width 0.3s ease, height 0.3s ease\",transform:\"translateZ(0)\"},children:formattedId?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"iframe\",{ref:iframeRef,src:getVideoUrl(formattedId),frameBorder:\"0\",allow:\"autoplay; fullscreen; picture-in-picture\",style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",opacity:isLoading?.5:1,transition:\"opacity 0.5s ease\",borderRadius:\"inherit\",transform:\"scale(1.01)\"},title:\"Vimeo Video\"}),isLoading&&/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\",color:\"#fff\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",gap:\"8px\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"24px\",height:\"24px\",border:\"2px solid rgba(255,255,255,0.3)\",borderTop:\"2px solid #fff\",borderRadius:\"50%\",animation:\"spin 1s linear infinite\"}}),/*#__PURE__*/_jsx(\"style\",{children:`\n                                    @keyframes spin {\n                                        0% { transform: rotate(0deg); }\n                                        100% { transform: rotate(360deg); }\n                                    }\n                                    `})]})]}):/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:\"50%\",transform:\"translate(-50%, -50%)\",color:\"#fff\"},children:\"Invalid Vimeo URL\"})})]});}// Add Framer controls\naddPropertyControls(VimeoViewer,{videoUrl:{type:ControlType.String,title:\"Vimeo URL\",defaultValue:\"https://vimeo.com/1023893382/2c3803037a\"},sizingMode:{type:ControlType.Enum,title:\"Sizing Mode\",options:[\"width-based\",\"height-based\",\"fill\",\"max-height\"],defaultValue:\"width-based\"},size:{type:ControlType.Enum,title:\"Size\",options:[\"large\",\"medium\"],defaultValue:\"large\",hidden:props=>props.sizingMode!==\"width-based\"},fixedHeight:{type:ControlType.Number,title:\"Fixed Height (px)\",defaultValue:400,min:100,max:1e3,step:10,hidden:props=>props.sizingMode===\"width-based\"||props.sizingMode===\"max-height\"},autoplay:{type:ControlType.Boolean,title:\"Autoplay\",defaultValue:false},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true},mute:{type:ControlType.Boolean,title:\"Mute\",defaultValue:false},controls:{type:ControlType.Boolean,title:\"Controls\",defaultValue:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VimeoViewer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Video_single.map"],"mappings":"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"}