{"version":3,"file":"static/chunks/1750-80661e31fe54aca2.js","mappings":"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","sources":["webpack://_N_E/./src/components/elements/heading/heading.styles.ts","webpack://_N_E/./src/components/elements/phone-window/phone-window.styles.ts","webpack://_N_E/./src/components/elements/phone-window/index.tsx","webpack://_N_E/./src/components/elements/app-window/app-window.styles.ts","webpack://_N_E/./src/components/elements/app-window/index.tsx","webpack://_N_E/./src/content/data/video-dictionary.ts","webpack://_N_E/./src/components/elements/direct-video-player/direct-video-player.styles.ts","webpack://_N_E/./src/components/elements/direct-video-player/index.tsx","webpack://_N_E/./src/lib/hooks/use-video-linking.ts","webpack://_N_E/./src/components/modules/phone-app-video-pair/phone-app-video-pair.styles.ts","webpack://_N_E/./src/components/modules/phone-app-video-pair/index.tsx"],"sourcesContent":["'use client';\n\nimport type { StyledHeadingProps } from './heading.types';\n\nimport { styled } from '@/styles';\n\nconst lineHeightMap = {\n xl: 1.2,\n l: 1.2,\n m: 1.3,\n s: 1.3,\n xs: 1.3,\n};\n\nexport const StyledHeading = styled.h1`\n font-size: ${({ theme, fontSize }) => theme.fontSizes.heading.mobile[fontSize || 'xl']};\n color: ${({ theme, color }) => theme.colors.text[color || 'lightGrey']};\n font-weight: ${({ theme, fontWeight }) => theme.fontWeight[fontWeight || 'normal']};\n line-height: ${({ fontSize }) => lineHeightMap[fontSize || 'xl']};\n text-align: ${({ $textAlign: align }) => align || 'unset'};\n\n ${({ color, theme }) => color === 'textGradient' && theme.colors.text.textGradient}\n\n @media (min-width: ${({ theme }) => theme.screens.xl}) {\n font-size: ${({ theme, fontSize }) => theme.fontSizes.heading.desktop[fontSize || 'xl'].toString()};\n }\n`;\n","'use client';\n\nimport { screens, styled } from '@/styles';\n\nexport const PhoneOutline = styled.div`\n background-color: var(--darkish-grey);\n background: linear-gradient(75deg, var(--dark-grey), var(--darkish-grey));\n\n box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);\n border: 1px solid var(--darkish-grey);\n\n box-sizing: border-box;\n position: relative;\n\n --phone-border-radius: 10px;\n border-radius: var(--phone-border-radius);\n padding: 14px 0 18px;\n\n @media (min-width: ${screens['md']}) {\n --phone-border-radius: 18px;\n padding: 22px 0 28px;\n }\n @media (min-width: ${screens['lg']}) {\n --phone-border-radius: 24px;\n padding: 30px 0 40px;\n }\n\n position: relative;\n &::before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border: 1px solid var(--dark-grey);\n border-radius: var(--phone-border-radius);\n }\n`;\n\nexport const PhoneScreen = styled.div<{\n $aspectRatio: string\n}>`\n border-width: 1px 0px;\n border-style: solid;\n border-color: var(--button-border);\n\n line-height: 0;\n aspect-ratio: ${p => p.$aspectRatio};\n`;\n\nexport const HomeButton = styled.div`\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 20%;\n\n background-color: var(--medium-grey);\n border: 1px solid var(--dark-grey);\n\n bottom: 3px;\n height: 12px;\n border-radius: 4px;\n\n @media (min-width: ${screens['md']}) {\n bottom: 6px;\n height: 16px;\n border-radius: 8px;\n }\n\n @media (min-width: ${screens['lg']}) {\n bottom: 8px;\n height: 26px;\n border-radius: 12px;\n }\n`;","import React from 'react';\n\nimport {\n PhoneOutline,\n PhoneScreen,\n HomeButton\n} from './phone-window.styles';\n\nexport const PhoneWindow = (p: {\n aspectRatio: string;\n children: React.ReactNode;\n className?: string;\n}) => \n \n { p.children }\n \n \n ;","'use client';\n\nimport { screens, styled } from '@/styles';\n\nexport const VideoWindowBorder = styled.div`\n --video-top-bar: 12px;\n --video-light-radius: 6px;\n --video-dark-radius: 4px;\n\n @media (min-width: ${screens['sm']}) {\n --video-top-bar: 16px;\n --video-light-radius: 10px;\n --video-dark-radius: 6px;\n }\n\n @media (min-width: ${screens['lg']}) {\n --video-top-bar: 24px;\n --video-light-radius: 14px;\n --video-dark-radius: 7px;\n }\n\n @container style(--theme: dark) {\n border-radius: 4px 4px var(--video-dark-radius) var(--video-dark-radius);\n border: none;\n }\n\n @container style(--theme: light) {\n border-radius: 4px 4px var(--video-light-radius) var(--video-light-radius);\n border: solid 1px var(--darkish-grey);\n }\n\n --video-top-bar: 12px;\n\n @media (min-width: ${screens['sm']}) {\n --video-top-bar: 16px;\n }\n\n @media (min-width: ${screens['lg']}) {\n --video-top-bar: 24px;\n }\n\n overflow: hidden;\n\n background-color: var(--dark-grey);\n box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);\n\n box-sizing: border-box;\n\n padding: 0;\n\n max-width: 100%;\n width: 1280px;\n\n position: relative;\n\n padding-top: var(--video-top-bar);\n background: linear-gradient(to bottom, var(--darkish-grey), var(--dark-grey) var(--video-top-bar));\n`;\n\nexport const VideoWindowButtons = styled.svg.attrs({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 350 100\"\n})`\n position: absolute;\n top: calc(var(--video-top-bar) / 10);\n left: 0px;\n\n fill: rgba(103, 113, 121, 0.6);\n height: calc(var(--video-top-bar) * 3/4);\n`;\n\nexport const VideoWindowContents = styled.div`\n @container style(--theme: light) {\n border-top: solid 1px var(--darkish-grey);\n }\n\n width: 100%;\n height: 100%;\n line-height: 0;\n`;","import React from 'react';\n\nimport {\n VideoWindowBorder,\n VideoWindowButtons,\n VideoWindowContents\n} from './app-window.styles';\n\nexport const AppWindow = (p: {\n children: React.ReactNode\n}) =>\n \n \n \n \n \n \n \n { p.children }\n \n ;","\nexport interface VideoData {\n lightId: string;\n darkId: string;\n aspectRatio: string;\n phoneVideo?: {\n key: VideoKey;\n startTime: number;\n endTime: number;\n };\n}\n\nexport const lightLibraryId = '293624';\nexport const lightPullZoneId = 'vz-232e9c2f-cfb';\n\nexport const darkLibraryId = '77143';\nexport const darkPullZoneId = 'vz-7ada43d8-9d3';\n\nexport type VideoKey =\n | 'chrome'\n | 'javascript'\n | 'python'\n | 'ruby'\n | 'android'\n | 'android-device';\n\nexport const videoDictionary: Record = {\n 'chrome': {\n darkId: 'b8291fd6-432b-40df-89ca-720609dfb6ca',\n lightId: '878ec768-abb0-40fd-b1d1-8cdce0b80c82',\n aspectRatio: '16/9',\n phoneVideo: {\n key: 'android-device',\n startTime: 58,\n endTime: 146\n }\n },\n 'javascript': {\n darkId: '503b7266-ef56-4010-8056-8b74470d7b48',\n lightId: 'a6b40d19-d24f-4adb-9bd4-3107e220014a',\n aspectRatio: '16/9',\n phoneVideo: {\n key: 'android-device',\n startTime: 120,\n endTime: 211\n }\n },\n 'python': {\n darkId: '8de68b4f-2e6e-4592-91e7-008d73f7dfbc',\n lightId: 'd2a1f9d1-caf4-4050-823a-9b9440b09f92',\n aspectRatio: '16/9',\n phoneVideo: {\n key: 'android-device',\n startTime: 120,\n endTime: 211\n }\n },\n 'ruby': {\n darkId: '73db6190-a95a-4a59-8d18-5c2a52161dcf',\n lightId: '8711a76a-8cf8-40b3-9f56-9d6ea0ee1bd7',\n aspectRatio: '16/9',\n phoneVideo: {\n key: 'android-device',\n startTime: 120,\n endTime: 211\n }\n },\n 'android': {\n darkId: '9b7bdb3b-8458-4387-a3ec-d611b65f7e2b',\n lightId: '82b7b106-4ed8-40e3-885f-61a2887c8af2',\n aspectRatio: '16/9',\n phoneVideo: {\n key: 'android-device',\n startTime: 0,\n endTime: 89\n }\n },\n 'android-device': {\n darkId: 'ac5ab76c-01f0-46d6-904e-7dfa56a00261',\n lightId: 'c4028948-9430-4b47-957e-4e145bbdc468',\n aspectRatio: '9/20'\n }\n} as const;","'use client';\n\nimport { styled } from '@/styles';\n\nexport const StyledVideo = styled.video<{\n $aspectRatio: string,\n $mounted: boolean\n}>`\n width: 100%;\n aspect-ratio: ${props => props.$aspectRatio};\n border: none;\n\n ${p => p.$mounted === false &&\n // During SSR, we render both and use CSS only to show the right default\n `\n @media (prefers-color-scheme: dark) {\n &[data-hide-on-theme=\"dark\"] { display: none; }\n }\n\n @media (prefers-color-scheme: light) {\n &[data-hide-on-theme=\"light\"] { display: none; }\n }\n `}\n`;","'use client';\n\nimport * as React from \"react\";\nimport { useTheme } from \"next-themes\";\n\nimport { useMounted } from '@/lib/hooks/use-mounted';\nimport { VideoCallback } from \"@/lib/video-events\";\n\nimport {\n darkPullZoneId,\n lightPullZoneId,\n videoDictionary,\n VideoKey\n} from \"@/content/data/video-dictionary\";\n\nimport { StyledVideo } from \"./direct-video-player.styles\";\n\nexport const DirectVideoPlayer = (props: {\n videoId: VideoKey,\n eventListener?: VideoCallback,\n\n showControls?: boolean,\n loop?: boolean\n autoPlay?: boolean\n}) => {\n const { isMounted } = useMounted();\n const { resolvedTheme: theme } = useTheme();\n\n const { lightId, darkId, aspectRatio } = videoDictionary[props.videoId];\n\n // Lots of different formats exposed for the same video. We pick the source\n // based on device width & pixel ratio. Video sizes are 720p=1280x720 vs\n // 480p=854x480. Playlist exposes both, but not widely supported.\n\n const darkThumbnail = `https://${darkPullZoneId}.b-cdn.net/${darkId}/thumbnail.jpg`;\n const darkVideoPlaylist = `https://${darkPullZoneId}.b-cdn.net/${darkId}/playlist.m3u8`;\n const dark720Url = `https://${darkPullZoneId}.b-cdn.net/${darkId}/play_720p.mp4`;\n const dark480Url = `https://${darkPullZoneId}.b-cdn.net/${darkId}/play_480p.mp4`;\n\n const lightThumbnail = `https://${lightPullZoneId}.b-cdn.net/${lightId}/thumbnail.jpg`;\n const lightVideoPlaylist = `https://${lightPullZoneId}.b-cdn.net/${lightId}/playlist.m3u8`;\n const light720Url = `https://${lightPullZoneId}.b-cdn.net/${lightId}/play_720p.mp4`;\n const light480Url = `https://${lightPullZoneId}.b-cdn.net/${lightId}/play_480p.mp4`;\n\n const darkVideoRef = React.useRef(null);\n const lightVideoRef = React.useRef(null);\n\n React.useEffect(() => {\n if (!isMounted) return;\n\n // Once we're mounted, there should always be at most one video element rendered:\n const videoElem = darkVideoRef.current || lightVideoRef.current;\n if (!videoElem || !props.eventListener) return;\n\n const abortController = new AbortController();\n\n const videoAPI = {\n getCurrentTime() {\n return videoElem.currentTime;\n },\n setCurrentTime(time: number) {\n videoElem.currentTime = time;\n },\n play() {\n videoElem.play();\n },\n pause() {\n videoElem.pause();\n },\n isPaused() {\n return videoElem.paused;\n }\n };\n\n if (videoElem.readyState === 4) {\n props.eventListener('ready', videoAPI);\n } else {\n videoElem.addEventListener('canplaythrough', () => {\n props.eventListener?.('ready', videoAPI);\n }, { signal: abortController.signal });\n }\n\n videoElem.addEventListener('play', () => {\n props.eventListener?.('play', videoAPI);\n }, { signal: abortController.signal });\n\n videoElem.addEventListener('pause', () => {\n props.eventListener?.('pause', videoAPI);\n }, { signal: abortController.signal });\n\n videoElem.addEventListener('seeked', () => {\n props.eventListener?.('seeked', videoAPI);\n }, { signal: abortController.signal });\n\n videoElem.addEventListener('timeupdate', () => {\n props.eventListener?.('timeupdate', videoAPI);\n }, { signal: abortController.signal });\n\n return () => abortController.abort();\n }, [isMounted, props.eventListener, darkVideoRef.current, lightVideoRef.current]);\n\n return <>\n {(!isMounted || theme === 'dark') &&\n \n \n\n \n \n \n\n \n\n Video not available\n \n }\n {(!isMounted || theme === 'light') &&\n \n \n\n \n \n \n\n \n\n Video not available\n \n }\n ;\n};","import * as React from 'react';\n\nimport { VideoAPI, VideoEvent } from \"../video-events\";\n\ninterface VideoLinkingOptions {\n setTime: (time: number) => void;\n childOffset: number;\n}\n\nexport const useVideoLinking = (options: VideoLinkingOptions) => {\n const { setTime, childOffset } = options;\n\n return React.useMemo(() => {\n let parentVideo: VideoAPI | null = null;\n let childVideo: VideoAPI | null = null;\n\n const SEEK_DEBOUNCE = 500;\n let seeking = false;\n let seekTimeout: NodeJS.Timeout | null = null;\n const startSeeking = () => {\n seeking = true;\n\n if (seekTimeout) clearTimeout(seekTimeout);\n seekTimeout = setTimeout(() => {\n seeking = false;\n seekTimeout = null;\n setTime(parentVideo!.getCurrentTime());\n }, SEEK_DEBOUNCE);\n };\n\n let started = false;\n function startVideos() {\n childVideo!.setCurrentTime(Math.max(parentVideo!.getCurrentTime() - childOffset, 0));\n\n parentVideo!.play();\n childVideo!.play();\n started = true;\n }\n\n return {\n parentListener: (event: VideoEvent, video: VideoAPI) => {\n parentVideo = video;\n\n if (event === 'ready') {\n if (!childVideo) {\n if (!video.isPaused()) video.pause();\n if (video.getCurrentTime() !== 0) video.setCurrentTime(0);\n setTime(0);\n } else if (!started) {\n startVideos();\n }\n\n return;\n }\n\n if (!childVideo) return;\n\n const time = parentVideo.getCurrentTime();\n\n const childTime = Math.max(parentVideo.getCurrentTime() - childOffset, 0);\n const childTimeInSync = Math.abs(childVideo.getCurrentTime() - childTime) < 0.5;\n\n if (event === 'play') {\n if (!childTimeInSync) childVideo.setCurrentTime(childTime);\n childVideo.play();\n } else if (event === 'pause') {\n if (!childTimeInSync) childVideo.setCurrentTime(childTime);\n childVideo.pause();\n } else if (event === 'seeked') {\n startSeeking();\n childVideo.setCurrentTime(childTime);\n } else if (event === 'timeupdate') {\n // We skip time updates while seeking to avoid bouncing the UI around too\n // much. Set time may get out of date\n if (!seeking) setTime(time);\n\n if (!childTimeInSync) childVideo.setCurrentTime(childTime);\n }\n },\n childListener: (event: VideoEvent, video: VideoAPI) => {\n childVideo = video;\n\n if (event === 'ready') {\n if (!parentVideo) {\n childVideo.pause();\n childVideo.setCurrentTime(0);\n } else if (!started) {\n startVideos();\n }\n }\n }\n }\n }, [setTime, childOffset]);\n};","'use client';\n\nimport { screens, styled } from \"@/styles\";\n\nexport const PairContainer = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n\n max-width: 100%;\n width: 100%;\n\n @media (min-width: ${screens['lg']}) {\n width: 1344px;\n height: 744px;\n }\n\n margin: 0 auto;\n padding: 0 10px;\n\n > .phone {\n width: 300px;\n max-width: min(20vw, 300px);\n transition: margin 0.5s, transform 0.5s;\n }\n\n > .hidden-phone {\n margin-right: calc(-1 * min(20vw, 300px));\n transform: scale(70%);\n }\n\n > .visible-phone {\n margin-right: -5px;\n display: block;\n @media (min-width: ${screens['xl']}) {\n margin-right: 30px;\n }\n }\n`;","'use client';\n\nimport * as React from 'react';\n\nimport { PhoneWindow } from '@/components/elements/phone-window';\nimport { AppWindow } from '@/components/elements/app-window';\n\nimport { VideoKey, videoDictionary } from '@/content/data/video-dictionary';\n\nimport { DirectVideoPlayer } from '@/components/elements/direct-video-player';\nimport { useVideoLinking } from '@/lib/hooks/use-video-linking';\n\nimport { PairContainer } from './phone-app-video-pair.styles';\n\nexport const PhoneAppVideoPair = (props: {\n videoId: VideoKey\n}) => {\n const appVideo = videoDictionary[props.videoId];\n\n const { phoneVideo } = appVideo;\n const phoneVideoKey = appVideo.phoneVideo?.key;\n\n const phoneVideoData = phoneVideo?.key\n ? videoDictionary[phoneVideo?.key]\n : undefined;\n\n const [currentTime, setTime] = React.useState(0);\n\n const isPhoneVisible = phoneVideo && (\n phoneVideo.startTime <= currentTime &&\n phoneVideo.endTime >= currentTime\n );\n\n const phoneClassName = isPhoneVisible\n ? 'phone visible-phone'\n : 'phone hidden-phone';\n\n const { parentListener, childListener } =\n phoneVideo\n ? useVideoLinking({\n setTime,\n childOffset: phoneVideo?.startTime\n })\n : {} as { parentListener: undefined, childListener: undefined };\n\n return \n { phoneVideo && <>\n \n \n \n }\n \n \n \n \n};"],"names":["lineHeightMap","xl","l","m","s","xs","StyledHeading","styled","h1","_templateObject","theme","fontSize","param","fontSizes","heading","mobile","color","colors","text","fontWeight","$textAlign","align","textGradient","screens","desktop","toString","PhoneOutline","div","PhoneScreen","_templateObject1","p","$aspectRatio","HomeButton","_templateObject2","PhoneWindow","jsx_runtime","jsxs","className","jsx","aspectRatio","children","VideoWindowBorder","VideoWindowButtons","svg","attrs","xmlns","viewBox","VideoWindowContents","AppWindow","circle","cx","cy","r","lightPullZoneId","darkPullZoneId","videoDictionary","darkId","lightId","phoneVideo","key","startTime","endTime","StyledVideo","video","direct_video_player_styles_templateObject","props","$mounted","DirectVideoPlayer","isMounted","useMounted","resolvedTheme","useTheme","videoId","darkThumbnail","concat","darkVideoPlaylist","dark720Url","dark480Url","lightThumbnail","lightVideoPlaylist","light720Url","light480Url","darkVideoRef","React","lightVideoRef","videoElem","current","eventListener","abortController","AbortController","videoAPI","getCurrentTime","currentTime","setCurrentTime","time","play","pause","isPaused","paused","readyState","addEventListener","signal","abort","Fragment","poster","controls","showControls","autoPlay","loop","muted","playsInline","preload","ref","data-hide-on-theme","source","src","type","media","useVideoLinking","setTime","childOffset","options","parentVideo","childVideo","seeking","seekTimeout","startSeeking","clearTimeout","setTimeout","started","startVideos","Math","max","parentListener","event","childTime","childTimeInSync","abs","childListener","PairContainer","phone_app_video_pair_styles_templateObject","PhoneAppVideoPair","appVideo","phoneVideoKey","phoneVideoData","undefined","isPhoneVisible"],"sourceRoot":""}