{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/NEd4VmDdsxM3StIUbddO/vYIHSp44qmOgHgaaijWz/YouTube.js"],
  "sourcesContent": ["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useReducer, useState } from \"react\";\nimport { ControlType, addPropertyControls } from \"framer\";\nimport { useIsOnCanvas, emptyStateStyle, containerStyles, defaultEvents } from \"https://framer.com/m/framer/default-utils.js\";\nvar PlayOptions;\n(function (PlayOptions) {\n  PlayOptions[\"Normal\"] = \"Off\";\n  PlayOptions[\"Auto\"] = \"On\";\n  PlayOptions[\"Loop\"] = \"Loop\";\n})(PlayOptions || (PlayOptions = {}));\nvar ThumbnailOptions;\n(function (ThumbnailOptions) {\n  ThumbnailOptions[\"High\"] = \"High Quality\";\n  ThumbnailOptions[\"Medium\"] = \"Medium Quality\";\n  ThumbnailOptions[\"Low\"] = \"Low Quality\";\n  ThumbnailOptions[\"Off\"] = \"Off\";\n})(ThumbnailOptions || (ThumbnailOptions = {})); /**\n                                                 * @framerIntrinsicWidth 560\n                                                 * @framerIntrinsicHeight 315\n                                                 *\n                                                 * @framerSupportedLayoutWidth fixed\n                                                 * @framerSupportedLayoutHeight fixed\n                                                 */\nexport function Youtube({\n  url,\n  play,\n  shouldMute,\n  thumbnail,\n  isRed,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  onMouseDown,\n  onMouseUp,\n  ...props\n}) {\n  const onCanvas = useIsOnCanvas();\n  const isAutoplay = play !== PlayOptions.Normal;\n  const showThumbnail = onCanvas || thumbnail !== ThumbnailOptions.Off && !isAutoplay;\n  const [isPreloading, preloadVideo] = useReducer(() => true, false);\n  const [showVideo, startVideo] = useReducer(() => true, !showThumbnail);\n  const [isHovered, setHovered] = useState(false);\n  if (url === \"\") {\n    return /*#__PURE__*/_jsx(Instructions, {});\n  }\n  const parsedURL = parseVideoURL(url);\n  if (parsedURL === undefined) {\n    return /*#__PURE__*/_jsx(ErrorMessage, {\n      message: \"Invalid Youtube URL.\"\n    });\n  }\n  const [videoId, embedURL] = parsedURL; // https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api\n  const thumbnailURL = getThumbnailURL(videoId, thumbnail); // https://developers.google.com/youtube/player_parameters\n  const searchParams = embedURL.searchParams;\n  searchParams.set(\"iv_load_policy\", \"3\");\n  searchParams.set(\"rel\", \"0\");\n  searchParams.set(\"modestbranding\", \"1\");\n  searchParams.set(\"playsinline\", \"1\");\n  if (isAutoplay || showThumbnail) {\n    searchParams.set(\"autoplay\", \"1\");\n  }\n  if (isAutoplay && shouldMute) {\n    searchParams.set(\"mute\", \"1\");\n  }\n  if (play === PlayOptions.Loop) {\n    searchParams.set(\"loop\", \"1\");\n    searchParams.set(\"playlist\", videoId);\n  }\n  if (!isRed) {\n    searchParams.set(\"color\", \"white\");\n  }\n  return /*#__PURE__*/_jsxs(\"article\", {\n    onPointerEnter: () => setHovered(true),\n    onPointerLeave: () => setHovered(false),\n    onPointerOver: preloadVideo,\n    onClick: startVideo,\n    style: {\n      ...centerStyle,\n      background: showThumbnail ? `center / cover url(${thumbnailURL}) no-repeat` : undefined,\n      cursor: \"pointer\",\n      overflow: \"hidden\"\n    },\n    children: [isPreloading && /*#__PURE__*/_jsx(\"link\", {\n      rel: \"preconnect\",\n      href: \"https://www.youtube.com\"\n    }), isPreloading && /*#__PURE__*/_jsx(\"link\", {\n      rel: \"preconnect\",\n      href: \"https://www.google.com\"\n    }), showVideo ? /*#__PURE__*/_jsx(\"iframe\", {\n      src: embedURL.href,\n      width: \"100%\",\n      height: \"100%\",\n      frameBorder: \"0\",\n      allow: \"presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n      onClick: onClick,\n      onMouseEnter: onMouseEnter,\n      onMouseLeave: onMouseLeave,\n      onMouseDown: onMouseDown,\n      onMouseUp: onMouseUp\n    }) : /*#__PURE__*/_jsx(PlayButton, {\n      onClick: startVideo,\n      isHovered: isHovered,\n      isRed: isRed\n    })]\n  });\n}\nYoutube.displayName = \"YouTube\";\naddPropertyControls(Youtube, {\n  url: {\n    type: ControlType.String,\n    title: \"Video\"\n  },\n  play: {\n    type: ControlType.Enum,\n    title: \"Autoplay\",\n    options: Object.values(PlayOptions)\n  },\n  shouldMute: {\n    title: \"Mute\",\n    type: ControlType.Boolean,\n    enabledTitle: \"Yes\",\n    disabledTitle: \"No\",\n    hidden(props) {\n      return props.play === PlayOptions.Normal;\n    }\n  },\n  thumbnail: {\n    title: \"Thumbnail\",\n    description: \"Showing a thumbnail improves performance.\",\n    type: ControlType.Enum,\n    options: Object.values(ThumbnailOptions),\n    hidden(props) {\n      return props.play !== PlayOptions.Normal;\n    }\n  },\n  isRed: {\n    title: \"Color\",\n    type: ControlType.Boolean,\n    enabledTitle: \"Red\",\n    disabledTitle: \"White\"\n  },\n  ...defaultEvents\n});\nconst defaultProps = {\n  url: \"https://youtu.be/smPos0mJvh8\",\n  play: PlayOptions.Normal,\n  shouldMute: true,\n  thumbnail: ThumbnailOptions.Medium,\n  isRed: true\n};\nYoutube.defaultProps = defaultProps;\nfunction parseVideoURL(urlString) {\n  let url;\n  try {\n    url = new URL(urlString);\n  } catch {\n    const embedURL = getEmbedURL(urlString);\n    return [urlString, embedURL];\n  }\n  if (url.hostname === \"youtube.com\" || url.hostname === \"www.youtube.com\" || url.hostname === \"youtube-nocookie.com\" || url.hostname === \"www.youtube-nocookie.com\") {\n    const pathSegments = url.pathname.slice(1).split(\"/\"); // https://www.youtube.com/watch?v=Fop2oskTug8\n    if (pathSegments[0] === \"watch\") {\n      const videoId = url.searchParams.get(\"v\");\n      const embedURL = getEmbedURL(videoId);\n      return [videoId, embedURL];\n    } // https://www.youtube.com/embed/Fop2oskTug8\n    if (pathSegments[0] === \"embed\") {\n      const videoId = pathSegments[1];\n      return [videoId, url];\n    }\n  } // https://youtu.be/Fop2oskTug8\n  if (url.hostname === \"youtu.be\") {\n    const videoId = url.pathname.slice(1);\n    const embedURL = getEmbedURL(videoId);\n    return [videoId, embedURL];\n  }\n}\nfunction getEmbedURL(videoId) {\n  return new URL(`https://www.youtube.com/embed/${videoId}`);\n}\nfunction getThumbnailURL(videoId, res) {\n  switch (res) {\n    case ThumbnailOptions.Low:\n      return `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;\n    case ThumbnailOptions.Medium:\n      return `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`;\n    case ThumbnailOptions.High:\n      return `https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg`;\n    default:\n      return `https://i.ytimg.com/vi/${videoId}/0.jpg`;\n  }\n} // Helper components\nfunction Instructions() {\n  return /*#__PURE__*/_jsx(\"div\", {\n    style: {\n      ...emptyStateStyle,\n      overflow: \"hidden\"\n    },\n    children: /*#__PURE__*/_jsx(\"div\", {\n      style: centerTextStyle,\n      children: \"To embed a Youtube video, add the URL to the properties\\xa0panel.\"\n    })\n  });\n}\nfunction ErrorMessage({\n  message\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: \"framerInternalUI-errorPlaceholder\",\n    style: {\n      ...containerStyles,\n      overflow: \"hidden\"\n    },\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      style: centerTextStyle,\n      children: [\"Error: \", message]\n    })\n  });\n}\nfunction PlayButton({\n  onClick,\n  isHovered,\n  isRed\n}) {\n  return /*#__PURE__*/_jsx(\"button\", {\n    onClick: onClick,\n    \"aria-label\": \"Play\",\n    style: buttonStyle,\n    children: /*#__PURE__*/_jsxs(\"svg\", {\n      height: \"100%\",\n      version: \"1.1\",\n      viewBox: \"0 0 68 48\",\n      width: \"100%\",\n      children: [/*#__PURE__*/_jsx(\"path\", {\n        d: \"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\",\n        fill: isHovered ? isRed ? \"#f00\" : \"#000\" : \"#212121\",\n        fillOpacity: isHovered ? isRed ? 1 : 0.8 : 0.8,\n        style: {\n          transition: \"fill .1s cubic-bezier(0.4, 0, 1, 1), fill-opacity .1s cubic-bezier(0.4, 0, 1, 1)\"\n        }\n      }), /*#__PURE__*/_jsx(\"path\", {\n        d: \"M 45,24 27,14 27,34\",\n        fill: \"#fff\"\n      })]\n    })\n  });\n}\nconst buttonStyle = {\n  width: 68,\n  height: 48,\n  padding: 0,\n  border: \"none\",\n  background: \"transparent\",\n  cursor: \"pointer\"\n};\nconst centerStyle = {\n  display: \"flex\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100%\",\n  height: \"100%\"\n};\nconst centerTextStyle = {\n  textAlign: \"center\",\n  minWidth: 140\n};\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"Youtube\": {\n      \"type\": \"reactComponent\",\n      \"name\": \"Youtube\",\n      \"slots\": [],\n      \"annotations\": {\n        \"framerSupportedLayoutWidth\": \"fixed\",\n        \"framerSupportedLayoutHeight\": \"fixed\",\n        \"framerIntrinsicHeight\": \"315\",\n        \"framerContractVersion\": \"1\",\n        \"framerIntrinsicWidth\": \"560\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};\n//# sourceMappingURL=./YouTube.map"],
  "mappings": "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",
  "names": ["PlayOptions", "ThumbnailOptions", "Youtube", "url", "play", "shouldMute", "thumbnail", "isRed", "onClick", "onMouseEnter", "onMouseLeave", "onMouseDown", "onMouseUp", "props", "onCanvas", "useIsOnCanvas", "isAutoplay", "showThumbnail", "isPreloading", "preloadVideo", "le", "showVideo", "startVideo", "isHovered", "setHovered", "ye", "p", "Instructions", "parsedURL", "parseVideoURL", "ErrorMessage", "videoId", "embedURL", "thumbnailURL", "getThumbnailURL", "searchParams", "u", "centerStyle", "PlayButton", "addPropertyControls", "ControlType", "defaultEvents", "defaultProps", "urlString", "getEmbedURL", "pathSegments", "res", "emptyStateStyle", "centerTextStyle", "message", "containerStyles", "buttonStyle"]
}