{"version":3,"sources":["webpack:///./src/components/panels/Hero.js","webpack:///./src/pages/explainer-videos.module.scss","webpack:///./src/components/non-panels/react-modal-video/normal-video.js","webpack:///./src/utils/controls/LinkButton.js","webpack:///./src/pages/explainer-videos.js","webpack:///./src/components/panels/Hero.module.scss"],"names":["Hero","rootClassName","rootStyle","rowClassName","rowStyle","overlay","overlayStyle","overlayColor","rootGatsbyBackgroundImageFluid","heading","icon","iconComponent","videoImage","isGatsbyLink","videoLink","useState","isVideoModelOpen","setIsVideoModelOpen","queryData","headerBackgroundImage","allStrapiHomePage","edges","node","main_cover_image","childImageSharp","fluid","s","heroMain","noLaptop","hero","className","content","fixed","heroRight","computerWrapper","onClick","src","computerOverlay","style","borderImageSource","laptopBackground","playButton","channel","ratio","autoplay","allowFullScreen","url","isOpen","onClose","module","exports","ModalVideo","props","state","closeModal","bind","updateFocus","openModal","this","setState","keydownHandler","e","keyCode","getDerivedStateFromProps","componentDidUpdate","modal","focus","preventDefault","stopPropagation","document","activeElement","modalbtn","getQueryString","obj","key","hasOwnProperty","substr","length","getYoutubeUrl","youtube","videoId","getVimeoUrl","vimeo","getYoukuUrl","youku","getVideoUrl","opt","getPadding","arr","split","width","Number","render","paddingBottom","classNames","modalVideoIframeWrap","height","frameBorder","tabIndex","React","Component","defaultProps","cc_load_policy","color","controls","disablekb","enablejsapi","end","fs","h1","iv_load_policy","list","listType","loop","modestbranding","origin","playlist","playsinline","rel","showinfo","start","wmode","theme","api","autopause","byline","callback","maxheight","maxwidth","player_id","portrait","title","xhtml","show_related","animationSpeed","modalVideoEffect","modalVideo","modalVideoClose","modalVideoBody","modalVideoInner","modalVideoMovieWrap","modalVideoCloseBtn","aria","openMessage","dismissBtnMessage","LinkButton","to","backgroundColorCondition","buttonStyles","innerText","textColor","backgroundColor","Videos","location","data","strapiPnExplainerVideos","allStrapiPostExplainerVideos","seo","SEO","main_heading","description","about_hero_image","display","marginBottom","sectionButton","nodes","filter","item","explainerVideos","publishVideo","map","index","lg","md","videoDescription","videoTitle"],"mappings":"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","file":"component---src-pages-explainer-videos-js-d48436b01dcb09639592.js","sourcesContent":["import React, { useState } from \"react\";\nimport { useStaticQuery, graphql } from \"gatsby\";\nimport Img from \"gatsby-image\";\nimport BackgroundImage from \"gatsby-background-image\";\n// import scrollTo from \"gatsby-plugin-smoothscroll\";\n\n//components\nimport ModalVideo from \"../non-panels/react-modal-video/modal-video\";\nimport PanelFoundation from \"./PanelFoundation\";\n\n//images\nimport laptopBackground from \"../../images/hero-laptop-3.png\";\nimport playButton from \"../../images/play-button-2138735_640.png\";\n\n//styles\nimport s from \"./Hero.module.scss\";\n\nconst Hero = ({\n  //from PanelFoundation\n  rootClassName = \"bg-white\",\n  rootStyle,\n  rowClassName,\n  rowStyle,\n  overlay = true,\n  overlayStyle,\n  overlayColor,\n  rootGatsbyBackgroundImageFluid,\n  //component specific\n\n  heading,\n  icon,\n  iconComponent,\n  videoImage,\n  isGatsbyLink,\n  videoLink\n}) => {\n  const [isVideoModelOpen, setIsVideoModelOpen] = useState(false);\n  const queryData = useStaticQuery(graphql`\n    query getHeroHeaderImage {\n      allStrapiHomePage(sort: { fields: [created_at], order: DESC }, limit: 1) {\n        edges {\n          node {\n            main_cover_image {\n              childImageSharp {\n                fluid(maxWidth: 1140) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  `);\n  const headerBackgroundImage =\n    queryData &&\n    queryData.allStrapiHomePage &&\n    queryData.allStrapiHomePage.edges &&\n    queryData.allStrapiHomePage.edges[0] &&\n    queryData.allStrapiHomePage.edges[0].node &&\n    queryData.allStrapiHomePage.edges[0].node.main_cover_image &&\n    queryData.allStrapiHomePage.edges[0].node.main_cover_image\n      .childImageSharp &&\n    queryData.allStrapiHomePage.edges[0].node.main_cover_image.childImageSharp\n      .fluid;\n\n  return (\n    <>\n      <PanelFoundation\n        rootClassName={`${s.heroMain} ${\n          videoLink ? \"\" : ` ${s.noLaptop}`\n        } ${rootClassName || \"\"}`}\n        rootStyle={rootStyle}\n        rowClassName={`${s.hero} ${rowClassName}`}\n        rowStyle={rowStyle}\n        overlay={overlay}\n        overlayStyle={overlayStyle}\n        overlayColor={overlayColor}\n        rootGatsbyBackgroundImageFluid={\n          rootGatsbyBackgroundImageFluid || headerBackgroundImage\n        }\n      >\n        <div className={`${s.content}`}>\n          <span className={`${s.icon}`}>{!iconComponent && icon && <Img fixed={icon} />}{iconComponent && !icon ? iconComponent : \"\" }</span>\n          {heading && <h1>{heading}</h1>}\n        </div>\n        {videoLink && (\n          <div className={`${s.heroRight}  pt-5`}>\n            <div\n              className={`${s.computerWrapper} m-auto`}\n              onClick={() => setIsVideoModelOpen(true)}\n            >\n              {!isGatsbyLink && (\n                <img\n                  src={videoImage}\n                  className={s.computerOverlay}\n                  style={{ borderImageSource: `url(${laptopBackground})` }}\n                />\n              )}\n              <img src={playButton} className={s.playButton} />\n            </div>\n          </div>\n        )}\n      </PanelFoundation>\n      {videoLink && (\n        <ModalVideo\n          channel={\"custom\"}\n          ratio=\"16:9\"\n          autoplay={1}\n          allowFullScreen={true}\n          url={videoLink}\n          isOpen={isVideoModelOpen}\n          onClose={() => setIsVideoModelOpen(false)}\n        />\n      )}\n    </>\n    // <div\n    //   className={`${s.heroMain}n${\n    //     videoLink ? \"\" : ` ${s.noLaptop}`\n    //   }`}\n    // >\n    //   <BackgroundImage\n    //     Tag=\"section\"\n    //     className={`container-fluid ${s.hero} ${rootClassName}`}\n    //     fluid={headerBackgroundImage}\n    //   >\n    //     <div className={`container`} style={{ height: \"100%\" }}>\n    //       <div className={`row`} style={{ height: \"100%\" }}>\n    //         <div className={`${s.content}`}>\n    //           <span className={`${s.icon}`}>\n    //             {icon && <Img fixed={icon} />}\n    //           </span>\n    //           {heading && <h1>{heading}</h1>}\n    //         </div>\n    //         {videoLink && (\n    //           <div\n    //             className={`${s.heroRight}  pt-5`}\n    //           >\n    //             <div\n    //               className={`${s.computerWrapper} m-auto`}\n    //               onClick={() => setIsVideoModelOpen(true)}\n    //             >\n    //               {!isGatsbyLink && (\n    //                 <img\n    //                   src={videoImage}\n    //                   className={s.computerOverlay}\n    //                   style={{ borderImageSource: `url(${laptopBackground})` }}\n    //                 />\n    //               )}\n    //               <img\n    //                 src={playButton}\n    //                 className={s.playButton}\n    //               />\n    //             </div>\n    //           </div>\n    //         )}\n    //       </div>\n    //     </div>\n    // {videoLink && (\n    //   <ModalVideo\n    //     channel={\"custom\"}\n    //     ratio=\"16:9\"\n    //     autoplay={1}\n    //     allowFullScreen={true}\n    //     url={videoLink}\n    //     isOpen={isVideoModelOpen}\n    //     onClose={() => setIsVideoModelOpen(false)}\n    //   />\n    // )}\n    //   </BackgroundImage>\n    // </div>\n  );\n};\n\nexport default Hero;\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sectionButton\":\"explainer-videos-module--sectionButton--3v4ZZ\",\"videoDescription\":\"explainer-videos-module--videoDescription--1tHGR\"};","import React from \"react\";\nimport CSSTransition from \"react-transition-group/CSSTransition\";\n\n//styles\nimport s from \"./modal-video.module.scss\";\n\nexport default class ModalVideo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      isOpen: false\n    };\n    this.closeModal = this.closeModal.bind(this);\n    this.updateFocus = this.updateFocus.bind(this);\n  }\n\n  openModal() {\n    this.setState({ isOpen: true });\n  }\n\n  closeModal() {\n    this.setState({ isOpen: false });\n    if (typeof this.props.onClose === \"function\") {\n      this.props.onClose();\n    }\n  }\n\n  keydownHandler(e) {\n    if (e.keyCode === 27) {\n      this.closeModal();\n    }\n  }\n\n  //   componentDidMount() {\n  //     document.addEventListener(\"keydown\", this.keydownHandler.bind(this));\n  //   }\n\n  //   componentWillUnmount() {\n  //     document.removeEventListener(\"keydown\", this.keydownHandler.bind(this));\n  //   }\n\n  static getDerivedStateFromProps(props) {\n    return { isOpen: props.isOpen };\n  }\n\n  componentDidUpdate() {\n    if (this.state.isOpen && this.modal) {\n      this.modal.focus();\n    }\n  }\n\n  updateFocus(e) {\n    if (e.keyCode === 9) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (this.modal === document.activeElement) {\n        this.modalbtn.focus();\n      } else {\n        this.modal.focus();\n      }\n    }\n  }\n\n  getQueryString(obj) {\n    let url = \"\";\n    for (var key in obj) {\n      if (obj.hasOwnProperty(key)) {\n        if (obj[key] !== null) {\n          url += key + \"=\" + obj[key] + \"&\";\n        }\n      }\n    }\n    return url.substr(0, url.length - 1);\n  }\n\n  getYoutubeUrl(youtube, videoId) {\n    const query = this.getQueryString(youtube);\n    return \"//www.youtube.com/embed/\" + videoId + \"?\" + query;\n  }\n\n  getVimeoUrl(vimeo, videoId) {\n    const query = this.getQueryString(vimeo);\n    return \"//player.vimeo.com/video/\" + videoId + \"?\" + query;\n  }\n\n  getYoukuUrl(youku, videoId) {\n    const query = this.getQueryString(youku);\n    return \"//player.youku.com/embed/\" + videoId + \"?\" + query;\n  }\n\n  getVideoUrl(opt, videoId) {\n    if (opt.channel === \"youtube\") {\n      return this.getYoutubeUrl(opt.youtube, videoId);\n    } else if (opt.channel === \"vimeo\") {\n      return this.getVimeoUrl(opt.vimeo, videoId);\n    } else if (opt.channel === \"youku\") {\n      return this.getYoukuUrl(opt.youku, videoId);\n    } else if (opt.channel === \"custom\") {\n      return opt.url;\n    }\n  }\n\n  getPadding(ratio) {\n    const arr = ratio.split(\":\");\n    const width = Number(arr[0]);\n    const height = Number(arr[1]);\n    const padding = (height * 100) / width;\n    return padding + \"%\";\n  }\n\n  render() {\n    const style = {\n      paddingBottom: this.getPadding(this.props.ratio)\n    };\n\n    return (\n      // <div className={this.props.classNames.modalVideo} tabIndex='-1' role='dialog'\n      //     aria-label={this.props.aria.openMessage} onClick={this.closeModal} ref={node => { this.modal = node; }} onKeyDown={this.updateFocus}>\n      //     <div className={this.props.classNames.modalVideoBody}>\n      //         <div className={this.props.classNames.modalVideoInner}>\n      <div className={this.props.classNames.modalVideoIframeWrap} style={style}>\n        <iframe\n          width=\"460\"\n          height=\"230\"\n          src={this.getVideoUrl(this.props, this.props.videoId)}\n          frameBorder=\"0\"\n          allowFullScreen={this.props.allowFullScreen}\n          tabIndex=\"-1\"\n        />\n      </div>\n      //         </div>\n      //     </div>\n      // </div>\n    );\n  }\n}\n\nModalVideo.defaultProps = {\n  channel: \"youtube\",\n  isOpen: false,\n  youtube: {\n    autoplay: 1,\n    cc_load_policy: 1,\n    color: null,\n    controls: 1,\n    disablekb: 0,\n    enablejsapi: 0,\n    end: null,\n    fs: 1,\n    h1: null,\n    iv_load_policy: 1,\n    list: null,\n    listType: null,\n    loop: 0,\n    modestbranding: null,\n    origin: null,\n    playlist: null,\n    playsinline: null,\n    rel: 0,\n    showinfo: 1,\n    start: 0,\n    wmode: \"transparent\",\n    theme: \"dark\"\n  },\n  ratio: \"16:9\",\n  vimeo: {\n    api: false,\n    autopause: true,\n    autoplay: false,\n    byline: true,\n    callback: null,\n    color: null,\n    height: null,\n    loop: false,\n    maxheight: null,\n    maxwidth: null,\n    player_id: null,\n    portrait: true,\n    title: true,\n    width: null,\n    xhtml: false\n  },\n  youku: {\n    autoplay: 1,\n    show_related: 0\n  },\n  allowFullScreen: true,\n  animationSpeed: 300,\n  classNames: {\n    modalVideoEffect: s.modalVideoEffect, //'modal-video-effect',\n    modalVideo: s.modalVideo, //'modal-video',\n    modalVideoClose: s.modalVideoClose, //'modal-video-close',\n    modalVideoBody: s.modalVideoBody, //'modal-video-body',\n    modalVideoInner: s.modalVideoInner, //'modal-video-inner',\n    modalVideoIframeWrap: s.modalVideoMovieWrap, //'modal-video-movie-wrap',\n    modalVideoCloseBtn: s.modalVideoCloseBtn //'modal-video-close-btn'\n  },\n  aria: {\n    openMessage: \"You just openned the modal video\",\n    dismissBtnMessage: \"Close the modal by clicking here\"\n  }\n};\n","import React from \"react\";\nimport { Link } from \"gatsby\";\n\nconst LinkButton = ({\n  to,\n  backgroundColorCondition,\n  buttonStyles,\n  innerText,\n  textColor = \"white\",\n  backgroundColor = \"#2a2070\"\n}) => {\n  return (\n    <Link to={to}>\n      <button\n        style={\n          backgroundColorCondition\n            ? { backgroundColor: backgroundColor, color: textColor }\n            : null\n        }\n        className={buttonStyles}\n      >\n        {innerText}\n      </button>\n    </Link>\n  );\n};\n\nexport default LinkButton;\n","import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport SEO from \"../components/seo\";\nimport Hero from \"../components/panels/Hero\";\nimport Video from \"../components/non-panels/react-modal-video/normal-video\";\nimport { Col } from \"react-bootstrap\";\nimport PanelFoundation from \"../components/panels/PanelFoundation\";\n\n// styled\nimport s from \"./explainer-videos.module.scss\";\n\n// utils\nimport LinkButton from \"../utils/controls/LinkButton\";\n\nexport default function Videos({\n  location,\n  data: { strapiPnExplainerVideos, allStrapiPostExplainerVideos }\n}) {\n  const { SEO: seo, hero } = strapiPnExplainerVideos;\n\n  const renderVideos = () => {\n    const publishedVideos = allStrapiPostExplainerVideos.nodes.filter(\n      item => item.explainerVideos.publishVideo === true\n    );\n\n    return publishedVideos.map((item, index) => {\n      if (index % 2 === 0) {\n        return (\n          <PanelFoundation rowStyle={{ marginBottom: \"4rem\" }}>\n            <Col lg={7} md={12}>\n              <Video\n                channel={\"vimeo\"}\n                ratio=\"16:9\"\n                autoplay={1}\n                allowFullScreen={true}\n                videoId={item.explainerVideos.videoId}\n              />\n            </Col>\n            <Col lg={5} md={12}>\n              <div className={s.videoDescription}>\n                <h1 className={`text-primary mb-5`}>\n                  {item.explainerVideos.videoTitle}\n                </h1>\n                <p className={`text-justify text-muted mb-5`}>\n                  {item.explainerVideos.videoDescription}\n                </p>\n              </div>\n            </Col>\n          </PanelFoundation>\n        );\n      } else {\n        return (\n          <PanelFoundation rowStyle={{ marginBottom: \"4rem\" }}>\n            <Col lg={5} md={12}>\n              <div className={s.videoDescription}>\n                <h1 className={`text-primary mb-5`}>\n                  {item.explainerVideos.videoTitle}\n                </h1>\n                <p className={`text-justify text-muted mb-5`}>\n                  {item.explainerVideos.videoDescription}\n                </p>\n              </div>\n            </Col>\n            <Col lg={7} md={12}>\n              <Video\n                channel={\"vimeo\"}\n                ratio=\"16:9\"\n                autoplay={1}\n                allowFullScreen={true}\n                videoId={item.explainerVideos.videoId}\n              />\n            </Col>\n          </PanelFoundation>\n        );\n      }\n    });\n  };\n\n  return (\n    <>\n      <SEO\n        {...{\n          title: `${hero[0].main_heading} | Insights`,\n          description: seo.description\n        }}\n      />\n      <Hero\n        heading={hero[0].main_heading}\n        icon={hero[0].about_hero_image.childImageSharp.fixed}\n      />\n      <div className={`container-fluid mt-4`}>\n        <div className={`container`}>\n          <div style={{ display: \"flex\", marginBottom: \"1.5rem\" }}>\n            <LinkButton\n              to={`/explainer-videos`}\n              backgroundColorCondition={\n                hero[0].main_heading === \"Explainer Videos\"\n              }\n              buttonStyles={s.sectionButton}\n              innerText=\"Explainer Videos\"\n            />\n            <LinkButton\n              to={`/webinar`}\n              backgroundColorCondition={hero[0].main_heading === \"Webinars\"}\n              buttonStyles={s.sectionButton}\n              innerText=\"Webinars\"\n            />\n            {/* <LinkButton\n              to={`/media`}\n              backgroundColorCondition={hero[0].main_heading === \"Media\"}\n              buttonStyles={s.sectionButton}\n              innerText=\"Media\"\n            /> */}\n          </div>\n        </div>\n      </div>\n      {renderVideos()}\n    </>\n  );\n}\n\nexport const explainerVideos = graphql`\n  query explainerVideos {\n    strapiPnExplainerVideos {\n      SEO {\n        description\n        tab_title\n      }\n      hero {\n        main_heading\n        main_subheading\n        about_hero_image: insight_image {\n          childImageSharp {\n            fixed(width: 100, height: 100) {\n              ...GatsbyImageSharpFixed\n            }\n          }\n        }\n      }\n    }\n    allStrapiPostExplainerVideos {\n      nodes {\n        explainerVideos {\n          id\n          publishVideo\n          videoDescription\n          videoId\n          videoTitle\n        }\n      }\n    }\n  }\n`;\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"heroMain\":\"Hero-module--hero-main--3sio_\",\"hero\":\"Hero-module--hero--3IOyd\",\"overlay\":\"Hero-module--overlay--2vZkJ\",\"playButton\":\"Hero-module--play-button--1v_qT\",\"computerWrapper\":\"Hero-module--computer-wrapper--3RFCi\",\"computerOverlay\":\"Hero-module--computer-overlay--lnnx3\",\"content\":\"Hero-module--content--223Hl\",\"icon\":\"Hero-module--icon--3VLc8\",\"rowConstraint\":\"Hero-module--row-constraint--3Cxmi\",\"noLaptop\":\"Hero-module--no-laptop--1a_Sa\",\"heroRight\":\"Hero-module--hero-right--AsJ8U\"};"],"sourceRoot":""}