{"version":3,"file":"fe7c8efb-f68bcf38c5291a73fe34.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 { useRef, useState } from 'react';\nimport { GATSBY_CDN_URL } from '../../../../../utils/env';\nimport useClientHeight from '../../../commons/hooks/useClientHeight';\nimport LineTransition from './LineTransition';\nimport VideoTransition from './VideoTransition';\nimport {\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  INTRO_END,\n  INTRO_START,\n  VIDEO_START,\n  VIDEO_TRANSITION_KEYFRAMES\n} from './constants';\nimport {\n  commonSectionItemVariants,\n  commonSectionItemVariantsWithoutY,\n  commonSectionVariants\n} from './variants';\n\nconst VideoSection = () => {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n  const scrollIntroTargetRef = useRef<HTMLDivElement>(null);\n\n  const descriptionRef = useRef<HTMLDivElement>(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 == null) {\n      return;\n    }\n    if (scrollIntroTargetRef?.current == null) {\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 = String(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":["_ref","name","styles","styleVideoInteractionSection","css","position","height","VIDEO_TRANSITION_KEYFRAMES","LENGTH","background","styleIntroWrapper","styleIntroTitle","width","INTRODUCE_TITLE_WIDTH_PC","maxWidth","marginBottom","desktopFirstMediaQuery","tablet","INTRODUCE_TITLE_WIDTH_TB","mobile","INTRODUCE_TITLE_WIDTH_MB","img","styleIntroDescription","overflow","display","flexFlow","alignItems","justifyContent","INTRODUCE_DESCRIPTION_WIDTH_PC","INTRODUCE_DESCRIPTION_WIDTH_TB","INTRODUCE_DESCRIPTION_WIDTH_MB","VideoSection","scrollContainerRef","useRef","scrollIntroTargetRef","descriptionRef","clientHeight","sectionVideoTop","updateClientHeight","useClientHeight","scrollY","setScrollY","useState","scrollYInView","useScroll","target","useMotionValueEvent","top","current","introOpacityProgress","_ref2","start","end","getProgress","INTRO_START","INTRO_END","VIDEO_START","style","opacity","String","___EmotionJSX","motion","section","id","layoutScroll","ref","initial","whileInView","variants","commonSectionVariants","div","animate","commonSectionItemVariants","loading","alt","src","GATSBY_CDN_URL","_css","commonSectionItemVariantsWithoutY","delay","columnGap","flexGrow","LineTransition","VideoTransition"],"sourceRoot":""}