{"version":3,"file":"fe7c8efb-0573728a3b752a2c0fc1.js","mappings":"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","sources":["webpack://inflearn-static/./src/components/infcon-2023/main/sections/InteractionSections/VideoSection.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport { desktopFirstMediaQuery } from '@inflearn/ds-react';\nimport { motion, useMotionValueEvent, useScroll } from 'framer-motion';\nimport { useEffect, useRef, useState } from 'react';\nimport { GATSBY_CDN_URL } from '../../../../../utils/env';\nimport useClientHeight from '../../../commons/hooks/useClientHeight';\nimport {\n  INTRO_END,\n  INTRO_START,\n  INTRODUCE_DESCRIPTION_WIDTH_MB,\n  INTRODUCE_DESCRIPTION_WIDTH_PC,\n  INTRODUCE_DESCRIPTION_WIDTH_TB,\n  INTRODUCE_TITLE_WIDTH_MB,\n  INTRODUCE_TITLE_WIDTH_PC,\n  INTRODUCE_TITLE_WIDTH_TB,\n  VIDEO_START,\n  VIDEO_TRANSITION_KEYFRAMES\n} from './constants';\nimport LineTransition from './LineTransition';\nimport {\n  commonSectionItemVariants,\n  commonSectionItemVariantsWithoutY,\n  commonSectionVariants\n} from './variants';\nimport VideoTransition from './VideoTransition';\nimport { throttle } from 'lodash-es';\n\nconst VideoSection = () => {\n  const scrollContainerRef = useRef(null);\n  const scrollIntroTargetRef = useRef(null);\n\n  const descriptionRef = useRef(null);\n  const { clientHeight, sectionVideoTop, updateClientHeight } = useClientHeight();\n  const [scrollY, setScrollY] = useState<number>(0);\n  const { scrollY: scrollYInView } = useScroll({ target: scrollContainerRef });\n\n  useMotionValueEvent(scrollYInView, 'change', (top) => {\n    setScrollY(top);\n\n    if (scrollContainerRef?.current === undefined) {\n      return;\n    }\n\n    const introOpacityProgress = getProgress({\n      start: INTRO_START(clientHeight, sectionVideoTop),\n      end: INTRO_END(clientHeight, sectionVideoTop),\n      current: top\n    });\n\n    if (top < VIDEO_START(clientHeight, sectionVideoTop)) {\n      scrollIntroTargetRef.current.style.opacity = introOpacityProgress;\n      updateClientHeight();\n      return;\n    }\n\n    scrollIntroTargetRef.current.style.opacity = 0;\n  });\n\n  return (\n    <motion.section\n      id={'section-video'}\n      layoutScroll\n      ref={scrollContainerRef}\n      initial=\"offscreen\"\n      whileInView=\"onscreen\"\n      variants={commonSectionVariants}\n      css={styleVideoInteractionSection}>\n      <div ref={scrollIntroTargetRef} css={styleIntroWrapper}>\n        <motion.div\n          animate={scrollY > INTRO_START(clientHeight, sectionVideoTop) ? 'onscreen' : 'offscreen'}\n          css={styleIntroTitle}\n          variants={commonSectionItemVariants()}>\n          <img\n            loading=\"lazy\"\n            alt=\"Learn Share Grow\"\n            src={`${GATSBY_CDN_URL}/infcon/infcon-2023/main-introduce-title-pc.svg`}\n            css={{\n              display: 'block',\n              [desktopFirstMediaQuery.mobile]: {\n                display: 'none'\n              }\n            }}\n          />\n          <img\n            loading=\"lazy\"\n            alt=\"Learn Share Grow\"\n            src={`${GATSBY_CDN_URL}/infcon/infcon-2023/main-introduce-title-mb.svg`}\n            css={{\n              display: 'none',\n              [desktopFirstMediaQuery.mobile]: {\n                display: 'block'\n              }\n            }}\n          />\n        </motion.div>\n        <motion.div\n          animate={scrollY > INTRO_START(clientHeight, sectionVideoTop) ? 'onscreen' : 'offscreen'}\n          css={styleIntroDescription}\n          variants={commonSectionItemVariantsWithoutY({ delay: 0.2 })}\n          ref={descriptionRef}>\n          <motion.div\n            css={{\n              display: 'flex',\n              flexFlow: 'row nowrap',\n              columnGap: '16px',\n              width: '100%',\n              [desktopFirstMediaQuery.mobile]: {\n                columnGap: '12px'\n              }\n            }}>\n            <motion.div\n              style={{\n                flexGrow: 1,\n                width: '100%',\n                height: '100%'\n              }}>\n              <LineTransition scrollY={scrollY} descriptionRef={descriptionRef} />\n            </motion.div>\n            <motion.img\n              alt=\"인프콘 2023으로 여러분을 초대합니다.\"\n              src={`${GATSBY_CDN_URL}/infcon/infcon-2023/main-introduce-description-pc.svg`}\n            />\n            <motion.div\n              css={{\n                width: '100%'\n              }}\n            />\n          </motion.div>\n        </motion.div>\n      </div>\n      <VideoTransition scrollY={scrollY} />\n    </motion.section>\n  );\n};\n\nconst styleVideoInteractionSection = css({\n  position: 'relative',\n  height: `${VIDEO_TRANSITION_KEYFRAMES.LENGTH * 100}vh`,\n  background: 'linear-gradient(180deg, #f6fafe 0%, #ffffff 100%)'\n});\n\nconst styleIntroWrapper = css({\n  position: 'fixed',\n  top: '64px',\n  display: 'flex',\n  flexFlow: 'column wrap',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  width: '100%',\n  height: 'calc(100vh - 64px)',\n  opacity: 0,\n\n  pointerEvents: 'none'\n});\n\nconst styleIntroTitle = css({\n  width: INTRODUCE_TITLE_WIDTH_PC,\n  maxWidth: '1200px',\n  marginBottom: '60px',\n  [desktopFirstMediaQuery.tablet]: {\n    width: INTRODUCE_TITLE_WIDTH_TB\n  },\n  [desktopFirstMediaQuery.mobile]: {\n    width: INTRODUCE_TITLE_WIDTH_MB\n  },\n  img: {\n    width: '100%'\n  }\n});\n\nconst styleIntroDescription = css({\n  overflow: 'hidden',\n  display: 'flex',\n  flexFlow: 'column wrap',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  width: INTRODUCE_TITLE_WIDTH_PC,\n  maxWidth: '1200px',\n\n  [desktopFirstMediaQuery.tablet]: {\n    width: INTRODUCE_TITLE_WIDTH_TB\n  },\n  [desktopFirstMediaQuery.mobile]: {\n    width: INTRODUCE_TITLE_WIDTH_MB\n  },\n  img: {\n    width: INTRODUCE_DESCRIPTION_WIDTH_PC,\n    [desktopFirstMediaQuery.tablet]: {\n      width: INTRODUCE_DESCRIPTION_WIDTH_TB\n    },\n    [desktopFirstMediaQuery.mobile]: {\n      width: INTRODUCE_DESCRIPTION_WIDTH_MB\n    }\n  }\n});\n\nfunction getProgress ({ start, end, current }: { start: number; end: number; current: number }) {\n  if (current <= start) {\n    return 0;\n  }\n\n  if (current >= end) {\n    return 1;\n  }\n\n  const range = end - start;\n  const position = current - start;\n  const ratio = position / range;\n\n  return ratio;\n}\n\nexport default VideoSection;\n"],"names":["styleVideoInteractionSection","css","position","height","VIDEO_TRANSITION_KEYFRAMES","background","styleIntroWrapper","styleIntroTitle","width","INTRODUCE_TITLE_WIDTH_PC","maxWidth","marginBottom","desktopFirstMediaQuery","INTRODUCE_TITLE_WIDTH_TB","INTRODUCE_TITLE_WIDTH_MB","img","styleIntroDescription","overflow","display","flexFlow","alignItems","justifyContent","INTRODUCE_DESCRIPTION_WIDTH_PC","INTRODUCE_DESCRIPTION_WIDTH_TB","INTRODUCE_DESCRIPTION_WIDTH_MB","scrollContainerRef","useRef","scrollIntroTargetRef","descriptionRef","clientHeight","sectionVideoTop","updateClientHeight","useClientHeight","scrollY","setScrollY","useState","scrollYInView","useScroll","target","useMotionValueEvent","top","undefined","current","introOpacityProgress","start","end","getProgress","INTRO_START","INTRO_END","VIDEO_START","style","opacity","___EmotionJSX","motion","id","layoutScroll","ref","initial","whileInView","variants","commonSectionVariants","animate","commonSectionItemVariants","loading","alt","src","GATSBY_CDN_URL","commonSectionItemVariantsWithoutY","delay","columnGap","flexGrow","LineTransition","VideoTransition"],"sourceRoot":""}