{"version":3,"sources":["webpack:///./src/constants.ts","webpack:///./src/components/VideoObject/index.tsx"],"names":["VIDEO_PROVIDERS","name","config","playerVars","autoplay","component","autostart","mute","id","thumbnailImageUrl","provider","title","description","autoPlay","containerTheme","container","eventHub","isLive","setVideoPlaying","triggeredVideo","closeVideo","setCloseVideo","player","setPlayer","active","setActive","match","find","item","then","module","default","root","classes","push","undefined","handlePlayTrigger","handleCloseVideoWidget","className","join","url","alt","aspectRatio","widthSizes","onClick","type","icon","reference","handleClick","videoId","options","onReady","event","target","h","focus"],"mappings":"8HAAaA,EAAkB,CAC7B,CACEC,KAAM,UACNC,OAAQ,CACNC,WAAY,CACVC,SAAU,IAIdC,UAAW,WAAM,+DAEnB,CACEJ,KAAM,WACNC,OAAQ,CACNI,WAAW,EACXC,MAAM,GAGRF,UAAW,WAAM,yC,mSC2HN,UAvIK,SAAC,G,IACnBG,EAAE,KACFC,EAAiB,oBACjBC,EAAQ,WACRC,EAAK,QACLC,EAAW,cACXC,EAAQ,WACR,IAAAC,sBAAc,IAAG,UAAO,EACxBC,EAAS,YACTC,EAAQ,WACRC,EAAM,SACNC,EAAe,kBACfC,EAAc,iBACdC,EAAU,aACVC,EAAa,gBAEP,IAAsB,mBAAc,MAAK,GAAxCC,EAAM,KAAEC,EAAS,KAClB,IAAsB,oBAAS,GAAM,GAApCC,EAAM,KAAEC,EAAS,KAExB,qBAAU,WACR,IAAMC,EAAQ1B,EAAgB2B,MAAK,SAACC,GAAS,OAAAA,EAAK3B,OAAL,KAEzCyB,GACFA,EAAMrB,YAAYwB,MAAK,SAACC,GAEtBP,EAAU,CAERrB,OAAQwB,EAAMxB,OACdG,UAAWyB,EAAOC,eAIvB,IAEH,IAIMC,EAAO,eACPC,EAAU,CACdD,EACAjB,EAAY,0BAA4B,GACxCC,EAAW,0BAA4B,IAErCF,GACFmB,EAAQC,KAAQF,EAAI,WAAWlB,QAEVqB,IAAnBhB,GACFc,EAAQC,KAAQF,EAAI,qBAGtB,IAAMI,EAAoB,WACxBX,GAAU,QAEcU,IAApBjB,GACFA,GAAgB,IAIdmB,EAAyB,WAC7BZ,GAAU,GAENP,GACFA,GAAgB,IAoBpB,OAhBA,qBAAU,WACJC,GACFiB,MAED,CAACjB,IAEJ,qBAAU,WACJC,IACFiB,IAEIhB,GACFA,GAAc,MAGjB,CAACD,IAGF,yBAAKkB,UAAWL,EAAQM,KAAK,OACzBf,IAAWX,GACX,yBAAKyB,UAAU,wBACXrB,QAA6BkB,IAAnBhB,GACV,yBAAKmB,UAAU,sBAAqB,QAEtC,kBAAC,IAAD,CAAOE,IAAK/B,EAAmBgC,IAAI,kBAAkBC,YAAY,OAAOC,WAAY,CAAC,MAAO,MAAO,UAEnG,4BAAQL,UAAU,wBAAwBM,QAASR,GACjD,0BAAME,UAAU,8BACd,UAMPhB,IAAWE,GAAUX,IACpB,yBAAKyB,UAAU,+BACOH,IAAnBhB,GACC,yBAAKmB,UAAU,uBACb,kBAAC,IAAD,CACEO,KAAK,SACLC,KAAM,CACJC,UAAW,cACXpC,MAAO,cAETqC,YAAaX,KAKlB3B,GACC,kBAACY,EAAOjB,UAAR,CAAkB4C,QAASzC,EAAI0C,QAAS5B,EAAOpB,OAAQiD,QAlF7C,SAACC,GACnBA,EAAMC,OAAOC,EAAEC,aAsFX5C,GAASC,IACT,yBAAK0B,UAAU,yBACb,yBAAKA,UAAW,4CAA4CxB,GAC1D,kBAAC,IAAD,CAAUH,MAAM,aAAaoC,UAAW/B,EAAW,mBAAqB,gBACvEL,GAGH,yBAAK2B,UAAU,6BAA6B1B,O","file":"habitat.64.component.js","sourcesContent":["export const VIDEO_PROVIDERS = [\r\n  {\r\n    name: 'youtube',\r\n    config: {\r\n      playerVars: {\r\n        autoplay: 1,\r\n      },\r\n    },\r\n    // @ts-ignore\r\n    component: () => import('./components/YouTubeVideo/index'),\r\n  },\r\n  {\r\n    name: 'jwplayer',\r\n    config: {\r\n      autostart: true,\r\n      mute: true,\r\n    },\r\n    // @ts-ignore\r\n    component: () => import('./components/JwPlayer/index'),\r\n  },\r\n];\r\n\r\nexport const SHARE_PLATFORMS = [\r\n  {\r\n    id: 'facebook',\r\n    name: 'Share on Facebook',\r\n  },\r\n  {\r\n    id: 'twitter',\r\n    name: 'Share on Twitter',\r\n  },\r\n  {\r\n    id: 'whatsapp',\r\n    name: 'Share on WhatsApp',\r\n    mobileOnly: true,\r\n  },\r\n  {\r\n    id: 'copylink',\r\n    name: 'Copy Link',\r\n  },\r\n];\r\n","import React, { useState, useEffect } from 'react';\r\nimport { SvgImage, Image, Button } from '../common';\r\nimport VideoObjectProps from './type';\r\nimport { VIDEO_PROVIDERS } from '../../constants';\r\nimport './styles.scss';\r\n\r\nconst VideoObject = ({\r\n  id,\r\n  thumbnailImageUrl,\r\n  provider,\r\n  title,\r\n  description,\r\n  autoPlay,\r\n  containerTheme = 'white',\r\n  container,\r\n  eventHub,\r\n  isLive,\r\n  setVideoPlaying,\r\n  triggeredVideo,\r\n  closeVideo,\r\n  setCloseVideo,\r\n}: VideoObjectProps) => {\r\n  const [player, setPlayer] = useState<any>(null);\r\n  const [active, setActive] = useState(false);\r\n\r\n  useEffect(() => {\r\n    const match = VIDEO_PROVIDERS.find((item) => item.name === provider);\r\n\r\n    if (match) {\r\n      match.component().then((module) => {\r\n        // @ts-ignore\r\n        setPlayer({\r\n          // @ts-ignore\r\n          config: match.config,\r\n          component: module.default,\r\n        });\r\n      });\r\n    }\r\n  }, []);\r\n\r\n  const focusPlayer = (event: any) => {\r\n    event.target.h.focus();\r\n  };\r\n\r\n  const root = 'video-object';\r\n  const classes = [\r\n    root,\r\n    container ? 'video-object--container' : '',\r\n    eventHub ? 'video-object--event-hub' : '',\r\n  ];\r\n  if (containerTheme) {\r\n    classes.push(`${root}--theme-${containerTheme}`);\r\n  }\r\n  if (triggeredVideo !== undefined) {\r\n    classes.push(`${root}--homepage-header`);\r\n  }\r\n\r\n  const handlePlayTrigger = () => {\r\n    setActive(true);\r\n\r\n    if (setVideoPlaying !== undefined) {\r\n      setVideoPlaying(true);\r\n    }\r\n  };\r\n\r\n  const handleCloseVideoWidget = () => {\r\n    setActive(false);\r\n\r\n    if (setVideoPlaying) {\r\n      setVideoPlaying(false);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (triggeredVideo) {\r\n      handlePlayTrigger();\r\n    }\r\n  }, [triggeredVideo]);\r\n\r\n  useEffect(() => {\r\n    if (closeVideo) {\r\n      handleCloseVideoWidget();\r\n\r\n      if (setCloseVideo) {\r\n        setCloseVideo(false);\r\n      }\r\n    }\r\n  }, [closeVideo]);\r\n\r\n  return (\r\n    <div className={classes.join(' ')}>\r\n      {!active && !autoPlay && (\r\n        <div className=\"video-object__visual\">\r\n          {(isLive && triggeredVideo === undefined) && (\r\n            <div className=\"video-object__live\">Live</div>\r\n          )}\r\n          <Image url={thumbnailImageUrl} alt=\"video thumbnail\" aspectRatio=\"16x9\" widthSizes={['400', '800', '1600']} />\r\n\r\n          <button className=\"video-object__trigger\" onClick={handlePlayTrigger}>\r\n            <span className=\"video-object__trigger-icon\">\r\n              Play\r\n            </span>\r\n          </button>\r\n        </div>\r\n      )}\r\n\r\n      {player && (active || autoPlay) && (\r\n        <div className=\"video-object__provider\">\r\n          {triggeredVideo !== undefined && (\r\n            <div className=\"video-object__close\">\r\n              <Button\r\n                type=\"button\"\r\n                icon={{\r\n                  reference: '#icon-close',\r\n                  title: 'icon-close',\r\n                }}\r\n                handleClick={handleCloseVideoWidget}\r\n              />\r\n            </div>\r\n          )}\r\n\r\n          {provider && (\r\n            <player.component videoId={id} options={player.config} onReady={focusPlayer} />\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      {(title || description) && (\r\n        <div className=\"video-object__details\">\r\n          <div className={`video-object__title video-object__title--${containerTheme}`}>\r\n            <SvgImage title=\"Play video\" reference={eventHub ? '#icon-play-large' : '#icon-video'} />\r\n            {title}\r\n          </div>\r\n\r\n          <div className=\"video-object__description\">{description}</div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default VideoObject;\r\n"],"sourceRoot":""}