{"version":3,"sources":["webpack://gatsby-starter-default/./src/landing/index.tsx"],"names":["Wrapper","styled","LogoContainer","Logo","LottieContainer","LinksContainer","lottieRef","useRef","lottieContainerRef","wrapperRef","useEffect","timeout","current","style","opacity","lottie","container","loop","autoplay","animationData","SplashLottieData","rendererSettings","preserveAspectRatio","setSpeed","window","setTimeout","play","clearTimeout","destroy","handleLinkClick","useCallback","setDirection","ref","src","alt","DelayLink","to","getTranslatedUrl","onClick"],"mappings":"4jqEASMA,EAAUC,oBAAH,4DAAGA,CAAH,gLAaPC,EAAgBD,oBAAH,kEAAGA,CAAH,0JAUbE,EAAOF,oBAAH,yDAAGA,CAAH,uDAMJG,EAAkBH,oBAAH,oEAAGA,CAAH,mCAKfI,EAAiBJ,oBAAH,mEAAGA,CAAH,4IAmGpB,EAtFa,WACX,IAAMK,GAAYC,YAA6B,MACzCC,GAAqBD,YAA8B,MACnDE,GAAaF,YAA8B,OAEjDG,gBAAU,WACR,IAAIC,EAAU,EAkCd,OA/BMF,EAAWG,UACbH,EAAWG,QAAQC,MAAMC,QAAU,KAGjCN,EAAmBI,UACrBN,EAAUM,QAAUG,kBAAqB,CACvCC,UAAWR,EAAmBI,QAC9BK,MAAM,EACNC,UAAU,EACVC,cAAeC,EACfC,iBAAkB,CAChBC,oBAAqB,cAIzBhB,EAAUM,QAAQW,SAAS,GAE3BZ,EAAUa,OAAOC,YAAW,WACtBnB,EAAUM,SACZN,EAAUM,QAAQc,SAEnB,MAUA,WANS,IAAY,EAO1BF,OAAOG,aAAahB,GANpB,UAAAL,EAAUM,eAAV,SAAmBgB,aASpB,IAEH,IAAMC,GAAkBC,kBAAY,WAC9BxB,EAAUM,UACZN,EAAUM,QAAQmB,cAAc,GAChCzB,EAAUM,QAAQW,SAAS,IAC3BjB,EAAUM,QAAQc,QAGpBF,OAAOC,YAAW,WACZhB,EAAWG,UACbH,EAAWG,QAAQC,MAAMC,QAAU,OAEpC,OACF,IAEH,OACE,gBAACd,EAAD,CAASgC,IAAKvB,GACZ,gBAACP,EAAD,KACE,gBAACC,EAAD,CAAM8B,IAAI,mBAAmBC,IAAI,sBACjC,gBAAC9B,EAAD,CAAiB4B,IAAKxB,KAGxB,gBAACH,EAAD,KACE,gBAAC8B,EAAA,EAAD,CACEC,IAAIC,OAAiB,aAAc,MACnCC,QAAST,GAFX,MAMA,iCACA,gBAACM,EAAA,EAAD,CACEC,IAAIC,OAAiB,aAAc,MACnCC,QAAST,GAFX","file":"a3336d3c033a5ec9d59a088cb032c68b95c64a61-a31857b0f16d15e1151e.js","sourcesContent":["import React, { useRef, useEffect, useCallback } from \"react\"\nimport styled from \"styled-components\"\nimport lottie, { AnimationItem } from \"lottie-web\"\n\nimport DelayLink from \"../components//DelayLink\"\nimport { getTranslatedUrl } from \"../utils/urls\"\n\nimport SplashLottieData from \"../../static/lotties/landing-lottie.json\"\n\nconst Wrapper = styled.div`\n  overflow: hidden;\n  padding: 30px;\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  transition: all ease 300ms;\n  opacity: 0;\n`\n\nconst LogoContainer = styled.div`\n  transform: translateX(25px);\n  display: grid;\n  grid-template-rows: auto;\n  grid-template-columns: 20px 1fr 50px;\n  align-items: flex-end;\n  width: 500px;\n  max-width: 100%;\n`\n\nconst Logo = styled.img`\n  grid-row: 1;\n  grid-column: 1 / 3;\n  padding-bottom: 20px;\n`\n\nconst LottieContainer = styled.div`\n  grid-row: 1;\n  grid-column: 1 / 4;\n`\n\nconst LinksContainer = styled.div`\n  margin-top: 100px;\n  display: flex;\n  align-items: center;\n  font-family: \"Avenir LT Std\";\n  font-size: 10pt;\n  letter-spacing: 0.48em;\n\n  span {\n    margin: 0 15px;\n  }\n`\n\nconst Home = (): JSX.Element => {\n  const lottieRef = useRef<AnimationItem | null>(null)\n  const lottieContainerRef = useRef<HTMLDivElement | null>(null)\n  const wrapperRef = useRef<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    let timeout = 0\n\n    const init = (): void => {\n      if (wrapperRef.current) {\n        wrapperRef.current.style.opacity = \"1\"\n      }\n\n      if (lottieContainerRef.current) {\n        lottieRef.current = lottie.loadAnimation({\n          container: lottieContainerRef.current,\n          loop: false,\n          autoplay: false,\n          animationData: SplashLottieData,\n          rendererSettings: {\n            preserveAspectRatio: \"xMaxYMax\",\n          },\n        })\n\n        lottieRef.current.setSpeed(2)\n\n        timeout = window.setTimeout(() => {\n          if (lottieRef.current) {\n            lottieRef.current.play()\n          }\n        }, 500)\n      }\n    }\n\n    const destroy = (): void => {\n      lottieRef.current?.destroy()\n    }\n\n    init()\n\n    return (): void => {\n      window.clearTimeout(timeout)\n      destroy()\n    }\n  }, [])\n\n  const handleLinkClick = useCallback(() => {\n    if (lottieRef.current) {\n      lottieRef.current.setDirection(-1)\n      lottieRef.current.setSpeed(10)\n      lottieRef.current.play()\n    }\n\n    window.setTimeout(() => {\n      if (wrapperRef.current) {\n        wrapperRef.current.style.opacity = \"0\"\n      }\n    }, 500)\n  }, [])\n\n  return (\n    <Wrapper ref={wrapperRef}>\n      <LogoContainer>\n        <Logo src=\"/images/logo.svg\" alt=\"Film Talents Logo\" />\n        <LottieContainer ref={lottieContainerRef} />\n      </LogoContainer>\n\n      <LinksContainer>\n        <DelayLink\n          to={getTranslatedUrl(\"/featured/\", \"fr\")}\n          onClick={handleLinkClick}\n        >\n          FR\n        </DelayLink>\n        <span>/</span>\n        <DelayLink\n          to={getTranslatedUrl(\"/featured/\", \"en\")}\n          onClick={handleLinkClick}\n        >\n          EN\n        </DelayLink>\n      </LinksContainer>\n    </Wrapper>\n  )\n}\n\nexport default Home\n"],"sourceRoot":""}