{"version":3,"sources":["webpack:///./src/components/IconButton/IconButton.js","webpack:///./src/icons/FullScreenIcon.js","webpack:///./src/icons/PauseIcon.js","webpack:///./src/components/Vimeo/Playback.js","webpack:///./src/icons/VolumeIcon.js","webpack:///./src/components/Vimeo/Vimeo.js","webpack:///./src/utils/videoPlayerUtil.js"],"names":["ButtonStyle","styled","div","withConfig","displayName","componentId","Inner","span","durations","fast","IconButton","_ref","children","rest","_objectWithoutProperties","_excluded","React","Object","assign","role","aria-label","defaultProps","FullScreenIcon","style","viewBox","width","height","_objectSpread","cursor","fill","d","PauseIcon","id","cx","cy","r","PlaybackContainer","Timer","p","color","white","getFontSize","rem","StyledSlider","Slider","Playback","_React$PureComponent","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","state","progress","handleSliderChange","value","setState","props","onProgressChange","buildPlaybackTimeString","timeInSeconds","time","Date","setSeconds","toISOString","substr","key","prevProps","percent","this","_this$props","seconds","duration","onChange","Math","ceil","Number","VolumeIcon","_ref$muted","muted","Wrapper","Foreground","StyledVideo","FullScreenPlaceholder","PlaybackWrapper","mediaQuery","sm","_templateObject","_taggedTemplateLiteral","slow","lg","_templateObject2","PlaybackControlsContainer","md","_templateObject3","ClickableOverlay","StyledIconButton","StyledPlayButton","button","_templateObject4","PosterImage","Image","Vimeo","player","undefined","fullscreenPlayer","container","videoRef","videoFullsizeRef","getInternalPlayer","playVideo","play","pauseVideo","pause","mute","setVolume","unMute","setCurrentTime","isMuted","Promise","resolve","reject","getVolume","then","volume","triggerFullscreen","handleFullscreenClick","handlePlay","started","autoPlay","onPlay","paused","handlePause","onPause","handleTimeUpdate","playbackState","handlePlayClick","getPaused","fullscreenPlayerId","iframe","element","requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen","bind","showInFullscreen","console","log","handleMuteClick","playerInstance","handleInViewStateChange","inView","windowHeight","window","innerHeight","playerHeight","current","getBoundingClientRect","handleProgressChange","newTime","title","playerId","src","_this2","onMountVideo","onReady","_this$state","embedVideo","on","getDuration","setDuration","withControls","callback","_this$props2","loop","options","url","background","playsinline","Player","require","ready","catch","err","_this$state2","_this$props3","controls","poster","useControlsRibbon","caption","InView","tag","threshold","ref","onClick","PlayIcon","fillContainer","Ribbon","marginBottom","padding","fontSize"],"mappings":"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","file":"static/scripts/9-94638c805e62083f6aa1.js","sourcesContent":["// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { durations } from '../../styles/animations'\n\ntype Props = {\n  children?: React.Node,\n}\n\nconst ButtonStyle = styled.div`\n  background: none;\n  padding: 10px;\n  outline-offset: 0;\n  cursor: pointer;\n`\n\nconst Inner = styled.span`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  transition: color ${durations.fast} ease-out;\n`\n\n/**\n * Wrapper that creates a button that centers an icon (or similar item)\n **/\nfunction IconButton({ children, ...rest }: Props) {\n  return (\n    <ButtonStyle role=\"button\" aria-label={'icon button'} {...rest}>\n      <Inner>{children}</Inner>\n    </ButtonStyle>\n  )\n}\n\nIconButton.displayName = 'IconButton'\nIconButton.defaultProps = {}\n\nexport default IconButton\n","// @flow\nimport * as React from 'react'\n\nconst FullScreenIcon = ({ style, ...rest }: Object) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    {...rest}\n    width=\"1em\"\n    height=\"1em\"\n    style={{ cursor: 'pointer', fill: 'white', ...style }}\n  >\n    <g>\n      <path d=\"M23,2H1A1,1,0,0,0,0,3V21a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V3A1,1,0,0,0,23,2ZM10,18H4V12H6v4h4Zm10-6H18V8H14V6h6Z\" />\n    </g>\n  </svg>\n)\n\nexport default FullScreenIcon\n","// @flow\nimport * as React from 'react'\n\nconst PauseIcon = ({ style, ...rest }: Object) => (\n  <svg\n    viewBox=\"0 0 40 40\"\n    {...rest}\n    width=\"1em\"\n    height=\"1em\"\n    style={{ cursor: 'pointer', fill: 'white', ...style }}\n  >\n    <g>\n      <circle id=\"Combined-Shape\" fill=\"#FFFFFF\" cx=\"20\" cy=\"20\" r=\"20\" />\n      <path\n        d=\"M17,13 L14,13 C13.4,13 13,13.4 13,14 L13,26 C13,26.6 13.4,27 14,27 L17,27 C17.6,27 18,26.6 18,26 L18,14 C18,13.4 17.6,13 17,13 Z\"\n        id=\"Path\"\n        fill=\"#003851\"\n      />\n      <path\n        d=\"M26,13 L23,13 C22.4,13 22,13.4 22,14 L22,26 C22,26.6 22.4,27 23,27 L26,27 C26.6,27 27,26.6 27,26 L27,14 C27,13.4 26.6,13 26,13 Z\"\n        id=\"Path\"\n        fill=\"#003851\"\n      />\n    </g>\n  </svg>\n)\n\nexport default PauseIcon\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\nimport { color } from '../../styles/theme'\nimport { getFontSize } from '../../styles/style-helpers'\n\nimport Slider from 'rc-slider'\n\ntype Props = {\n  duration?: number,\n  seconds?: number,\n  percent?: number,\n  onProgressChange?: Function,\n}\n\ntype State = {\n  progress: number,\n}\n\nconst PlaybackContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n`\n\nconst Timer = styled.p`\n  flex: 1 1 10%;\n  color: ${color.white};\n  font-size: ${getFontSize('tiny')};\n  text-align: center;\n  font-weight: bold;\n  margin: 0 ${rem(10)};\n  height: 1em;\n`\n\nconst StyledSlider = styled(Slider)`\n  position: relative;\n  transition: all 0.1s ease;\n  flex: 1 1 80%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n`\n\nclass Playback extends React.PureComponent<Props, State> {\n  state = {\n    progress: 0,\n  }\n\n  componentDidUpdate(prevProps: Props) {\n    if (prevProps.percent !== this.props.percent) {\n      this.setState({ progress: this.props.percent }) // eslint-disable-line\n    }\n  }\n\n  handleSliderChange = (value: number) => {\n    this.setState({\n      progress: value,\n    })\n\n    if (this.props.onProgressChange) {\n      this.props.onProgressChange(value)\n    }\n  }\n\n  buildPlaybackTimeString = (timeInSeconds?: number) => {\n    if (!timeInSeconds) return '00:00'\n\n    // solution from https://stackoverflow.com/a/25279340\n    const time = new Date(0)\n    time.setSeconds(timeInSeconds)\n    return time.toISOString().substr(14, 5)\n  }\n\n  render() {\n    const { seconds, duration } = this.props\n\n    return (\n      <PlaybackContainer>\n        <Timer>{this.buildPlaybackTimeString(seconds)}</Timer>\n        <StyledSlider\n          value={this.state.progress}\n          onChange={this.handleSliderChange}\n        />\n        <Timer>\n          {this.buildPlaybackTimeString(Math.ceil(Number(duration)))}\n        </Timer>\n      </PlaybackContainer>\n    )\n  }\n}\n\nexport default Playback\n","// @flow\nimport * as React from 'react'\n\nconst VolumeIcon = ({ style, muted = false, ...rest }: Object) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    {...rest}\n    width=\"1em\"\n    height=\"1em\"\n    style={{ cursor: 'pointer', fill: 'white', ...style }}\n  >\n    {muted ? (\n      <g>\n        <path d=\"M10.567,17.675L17.4,22.8c0.176,0.133,0.388,0.2,0.6,0.2c0.152,0,0.306-0.035,0.447-0.105 C18.786,22.725,19,22.379,19,22V9.242L10.567,17.675z\" />\n        <path d=\"M2,17h5L19,5V2c0-0.379-0.214-0.725-0.553-0.895C18.109,0.938,17.703,0.973,17.4,1.2L9.667,7H2 C1.447,7,1,7.447,1,8v8C1,16.553,1.447,17,2,17z\" />\n        <path d=\"M1,24c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l22-22 c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-22,22C1.512,23.902,1.256,24,1,24z\" />\n      </g>\n    ) : (\n      <g>\n        <path d=\"M14.447,1.105C14.109,0.938,13.703,0.973,13.4,1.2L5.667,7H1C0.447,7,0,7.447,0,8v8c0,0.553,0.447,1,1,1 h4.667l7.733,5.8c0.176,0.133,0.388,0.2,0.6,0.2c0.152,0,0.306-0.035,0.447-0.105C14.786,22.725,15,22.379,15,22V2 C15,1.621,14.786,1.275,14.447,1.105z\" />\n        <path d=\"M18.243,7.758l-0.707-0.707l-1.414,1.414l0.707,0.707c1.56,1.56,1.56,4.097,0,5.656 l-0.707,0.707l1.414,1.414l0.707-0.707C20.582,13.903,20.582,10.097,18.243,7.758z\" />\n        <path d=\"M20.364,4.222L18.95,5.636l0.707,0.707c3.119,3.119,3.119,8.195,0,11.314l-0.707,0.707 l1.414,1.414l0.707-0.707c3.899-3.899,3.899-10.243,0-14.143L20.364,4.222z\" />\n      </g>\n    )}\n  </svg>\n)\n\nexport default VolumeIcon\n","// @flow\nimport * as React from 'react'\nimport styled from 'styled-components'\nimport { rem } from 'polished'\n\nimport { mediaQuery } from '../../styles/media'\nimport { durations } from '../../styles/animations'\nimport { showInFullscreen } from '../../utils/videoPlayerUtil'\nimport { InView } from 'react-intersection-observer'\n\nimport type { ImageViewModel } from '../../types/ImageViewModel'\n\nimport Image from '../../components/Image/Image'\nimport IconButton from '../../components/IconButton/IconButton'\nimport PlayIcon from '../../icons/PlayIcon'\nimport FullScreenIcon from '../../icons/FullScreenIcon'\nimport PauseIcon from '../../icons/PauseIcon'\nimport Playback from './Playback'\nimport VolumeIcon from '../../icons/VolumeIcon'\nimport Ribbon from '../Ribbon/Ribbon'\n\ntype Props = {\n  src: string,\n  poster?: ImageViewModel,\n  autoPlay?: boolean,\n  controls?: boolean,\n  muted?: boolean,\n  onReady?: Function,\n  onPlay?: Function,\n  onPause?: Function,\n  onEnd?: Function,\n  onMountVideo?: Function,\n  loop?: boolean,\n  caption?: string,\n  // decides if Playback Controls should be placed in Ribbon\n  useControlsRibbon?: boolean,\n}\n\ntype State = {\n  started: boolean,\n  paused: boolean,\n  title: string,\n  isMuted: boolean,\n  playerId: string,\n  fullscreenPlayerId: string,\n  seconds: number,\n  percent: number,\n  duration: number,\n}\n\ntype PlaybackState = {\n  seconds: number,\n  percent: number,\n  duration: number,\n}\n\nconst Wrapper = styled.div`\n  height: 0;\n  width: 100%;\n  position: relative;\n  padding-bottom: 56.25%;\n  overflow-y: hidden;\n`\n\nconst Foreground = styled.div`\n  position: absolute;\n  top: -100%;\n  left: 0;\n  width: 100%;\n  height: 300%;\n`\n\nconst StyledVideo = styled.div`\n  iframe {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    border: none;\n  }\n`\n\nconst FullScreenPlaceholder = styled.div`\n  position: absolute;\n\n  /* should be rendered out of the viewport */\n  top: -10000px;\n`\n\nconst PlaybackWrapper = styled.div`\n  position: absolute;\n  bottom: ${rem(15)};\n  width: 100%;\n\n  transform: translateY(${rem(80)});\n\n  ${mediaQuery.sm`\n    transition: transform ${durations.slow} ease-out;\n    \n    ${Wrapper}:hover & {\n      transform: translateY(0%);\n    }\n  `};\n\n  ${mediaQuery.lg`\n    bottom: ${rem(30)};\n  `}\n`\n\nconst PlaybackControlsContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  padding: 0 ${rem(48)};\n\n  ${mediaQuery.md`\n    padding: 0 ${rem(92)};\n  `}\n`\n\nconst ClickableOverlay = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n`\n\nconst StyledIconButton = styled(IconButton)`\n  opacity: 0.6;\n\n  &:hover {\n    opacity: 1;\n  }\n`\n\nconst StyledPlayButton = styled.button`\n  opacity: 1;\n  z-index: 2;\n  border: none;\n  width: auto;\n  height: auto;\n  padding: 10px;\n  line-height: 0;\n  cursor: pointer;\n\n  /* sets svg size */\n  font-size: 64px;\n\n  &:focus-visible {\n    border: 1px dashed #fff;\n    outline: none;\n  }\n\n  ${mediaQuery.sm`\n    opacity: 0.6;\n  `}\n\n  ${ClickableOverlay}:hover & {\n    opacity: 1;\n  }\n`\n\nconst PosterImage = styled(Image)`\n  z-index: 1;\n`\n\nclass Vimeo extends React.PureComponent<Props, State> {\n  static displayName = 'Vimeo'\n  static defaultProps = {\n    autoPlay: false,\n    loop: false,\n    controls: false,\n    muted: false,\n    useControlsRibbon: false,\n  }\n\n  player = undefined\n  fullscreenPlayer = undefined\n\n  container: { current: null | HTMLDivElement } = React.createRef()\n  videoRef: { current: null | HTMLDivElement } = React.createRef()\n  videoFullsizeRef: { current: null | HTMLDivElement } = React.createRef()\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      started: !!props.autoPlay,\n      paused: !props.autoPlay,\n      title: '',\n      isMuted: !!props.muted,\n      playerId: `vimeo-${props.src}`,\n      fullscreenPlayerId: `fullscreen-vimeo-${props.src}`,\n      seconds: 0,\n      percent: 0,\n      duration: 0,\n    }\n  }\n\n  componentDidMount() {\n    const { onMountVideo, onReady } = this.props\n    const { playerId, fullscreenPlayerId } = this.state\n\n    const setDuration = duration => {\n      this.setState({ duration })\n    }\n\n    this.embedVideo(playerId, false, player => {\n      if (!!player) {\n        // setup initial mounted video\n        this.player = player\n        // $FlowFixMe\n        this.player.on('play', this.handlePlay)\n        // $FlowFixMe\n        this.player.on('pause', this.handlePause)\n        // $FlowFixMe\n        this.player.on('timeupdate', this.handleTimeUpdate)\n\n        // $FlowFixMe\n        this.player.getDuration().then(function(duration) {\n          setDuration(duration)\n        })\n\n        if (typeof onReady === 'function') {\n          onReady()\n        }\n\n        if (typeof onMountVideo === 'function') {\n          // send the internal player back to the caller\n          onMountVideo(this.getInternalPlayer())\n        }\n      }\n    })\n\n    // we need to embed a new video, because the 'original' video\n    // may not have controls active, and we have no way to change that\n    // config once the video is embedded\n    this.embedVideo(fullscreenPlayerId, true, player => {\n      if (!!player) {\n        this.fullscreenPlayer = player\n      }\n    })\n  }\n\n  embedVideo(\n    playerId: string,\n    withControls: boolean = false,\n    callback: Function,\n  ) {\n    const { src, loop, muted } = this.props\n\n    if (!playerId || !src) {\n      return\n    }\n\n    // vimeo options\n    // docs: https://github.com/vimeo/player.js#embed-options\n    const options = {\n      url: src,\n      background: !withControls,\n      loop,\n      muted,\n      playsinline: false,\n    }\n\n    // mount the vimeo player\n    const Player = require('@vimeo/player/dist/player') // prevent failling tests on SSR https://github.com/vimeo/player.js/issues/32#issuecomment-255742059\n    const player = new Player(playerId, options)\n\n    // return the player to the callback\n    player\n      .ready()\n      .then(() => {\n        if (typeof callback === 'function') {\n          callback(player)\n        }\n      })\n      .catch(err => {})\n  }\n\n  // simple api for the player\n  // mocks the methods for the same names as youtube\n  getInternalPlayer = () => {\n    if (this.player) {\n      return {\n        playVideo: () => this.player && this.player.play(),\n        pauseVideo: () => this.player && this.player.pause(),\n        mute: () => this.player && this.player.setVolume(0),\n        unMute: () => this.player && this.player.setVolume(0.5), // maybe it should remember the mute setting?\n        setCurrentTime: (value: number) =>\n          this.player && this.player.setCurrentTime(value),\n        isMuted: () =>\n          new Promise<boolean>((resolve, reject) => {\n            if (!this.player) {\n              return resolve(true)\n            }\n\n            this.player.getVolume().then(function(volume) {\n              resolve(volume === 0)\n            })\n          }),\n        triggerFullscreen: this.handleFullscreenClick,\n      }\n    }\n\n    return undefined\n  }\n\n  handlePlay = () => {\n    if (!this.state.started && !this.props.autoPlay && this.player) {\n      this.player.pause() // pause first render right away\n      this.setState({ started: true, paused: true })\n    } else {\n      if (!this.state.isMuted && this.player && this.player.setVolume) {\n        this.player.setVolume(0.5)\n      }\n      if (this.props.onPlay) this.props.onPlay()\n      this.setState({ started: true, paused: false })\n    }\n  }\n\n  handlePause = () => {\n    if (this.props.onPause) this.props.onPause()\n    this.setState({ paused: true })\n  }\n\n  handleTimeUpdate = (playbackState: PlaybackState) => {\n    this.setState({\n      seconds: playbackState.seconds,\n      percent: playbackState.percent,\n      duration: playbackState.duration,\n    })\n  }\n\n  handlePlayClick = () => {\n    if (this.player) {\n      this.player.getPaused().then(paused =>\n        paused\n          ? // $FlowFixMe\n            this.player.play()\n          : // $FlowFixMe\n            this.player.pause(),\n      )\n    }\n  }\n\n  handleFullscreenClick = () => {\n    const { fullscreenPlayerId } = this.state\n    if (this.fullscreenPlayer && this.player) {\n      this.player.pause()\n\n      // $FlowFixMe\n      const iframe = this.fullscreenPlayer.element\n      // $FlowFixMe\n      this.fullscreenPlayer.setVolume(0.8)\n      if (iframe) {\n        showInFullscreen(iframe)\n        return\n      }\n\n      // didn't find any iframe\n      // lets log it for debugging\n      console.log(`unable to find iframe for ${fullscreenPlayerId}`) // eslint-disable-line no-console\n    }\n  }\n\n  handleMuteClick = () => {\n    const playerInstance = this.getInternalPlayer()\n    if (playerInstance) {\n      // todo: check if promise\n      const isMutedPromise = playerInstance.isMuted()\n      isMutedPromise.then(muted => {\n        this.setState({ isMuted: !muted })\n        return muted ? playerInstance.unMute() : playerInstance.mute()\n      })\n    }\n  }\n\n  handleInViewStateChange = (inView: boolean) => {\n    const windowHeight = window.innerHeight\n    const playerHeight = this.container.current\n      ? this.container.current.getBoundingClientRect().height\n      : windowHeight\n    const playerInstance = this.getInternalPlayer()\n\n    if (playerInstance && this.props.autoPlay) {\n      // prevent not playing video in a short window\n      if (playerHeight >= windowHeight) {\n        return playerInstance.playVideo()\n      }\n\n      inView ? playerInstance.playVideo() : playerInstance.pauseVideo()\n    }\n  }\n\n  handleProgressChange = (value: number) => {\n    const playerInstance = this.getInternalPlayer()\n    if (playerInstance) {\n      // convert percentage to seconds\n      const newTime = this.state.duration * (value / 100)\n      playerInstance.setCurrentTime(newTime)\n    }\n  }\n\n  render() {\n    const {\n      started,\n      playerId,\n      fullscreenPlayerId,\n      paused,\n      duration,\n      percent,\n      seconds,\n      isMuted,\n    } = this.state\n\n    const {\n      src,\n      controls,\n      poster,\n      useControlsRibbon,\n      caption,\n      ...rest\n    } = this.props\n    if (!src) return null\n\n    return (\n      <InView\n        tag={'div'}\n        onChange={this.handleInViewStateChange}\n        threshold={0.7}\n      >\n        <Wrapper ref={this.container} {...rest}>\n          <Foreground>\n            <StyledVideo id={playerId} ref={this.videoRef} />\n          </Foreground>\n          <FullScreenPlaceholder\n            id={fullscreenPlayerId}\n            ref={this.videoFullsizeRef}\n          />\n          <ClickableOverlay onClick={this.handlePlayClick}>\n            {(!started || paused) && this.player && (\n              <StyledPlayButton title={caption}>\n                <PlayIcon />\n              </StyledPlayButton>\n            )}\n            {(!started || paused) && poster && (\n              <PosterImage {...poster} fillContainer />\n            )}\n          </ClickableOverlay>\n\n          {controls && (\n            <PlaybackWrapper>\n              {useControlsRibbon ? (\n                <Ribbon marginBottom={false}>\n                  <PlaybackControlsContainer style={{ padding: 0 }}>\n                    <StyledIconButton onClick={this.handlePlayClick}>\n                      {started && !paused ? (\n                        <PauseIcon style={{ fontSize: '40px' }} />\n                      ) : (\n                        <PlayIcon style={{ fontSize: '40px' }} />\n                      )}\n                    </StyledIconButton>\n\n                    <Playback\n                      percent={percent * 100}\n                      seconds={seconds}\n                      duration={duration}\n                      onProgressChange={this.handleProgressChange}\n                    />\n\n                    <StyledIconButton onClick={this.handleMuteClick}>\n                      <VolumeIcon muted={isMuted} />\n                    </StyledIconButton>\n                    <StyledIconButton onClick={this.handleFullscreenClick}>\n                      <FullScreenIcon />\n                    </StyledIconButton>\n                  </PlaybackControlsContainer>\n                </Ribbon>\n              ) : (\n                <PlaybackControlsContainer>\n                  <StyledIconButton onClick={this.handlePlayClick}>\n                    {started && !paused ? (\n                      <PauseIcon style={{ fontSize: '40px' }} />\n                    ) : (\n                      <PlayIcon style={{ fontSize: '40px' }} />\n                    )}\n                  </StyledIconButton>\n\n                  <Playback\n                    percent={percent * 100}\n                    seconds={seconds}\n                    duration={duration}\n                    onProgressChange={this.handleProgressChange}\n                  />\n\n                  <StyledIconButton onClick={this.handleMuteClick}>\n                    <VolumeIcon muted={isMuted} />\n                  </StyledIconButton>\n                  <StyledIconButton onClick={this.handleFullscreenClick}>\n                    <FullScreenIcon />\n                  </StyledIconButton>\n                </PlaybackControlsContainer>\n              )}\n            </PlaybackWrapper>\n          )}\n        </Wrapper>\n      </InView>\n    )\n  }\n}\n\nexport default Vimeo\n","// @flow\n\nexport function showInFullscreen(iframe: HTMLElement) {\n  const requestFullScreen =\n    // $FlowFixMe\n    iframe.requestFullScreen ||\n    // $FlowFixMe\n    iframe.mozRequestFullScreen ||\n    // $FlowFixMe\n    iframe.webkitRequestFullScreen\n\n  if (requestFullScreen) {\n    // todo: test on diff browsers\n    // $FlowFixMe\n    requestFullScreen.bind(iframe)()\n  }\n}\n"],"sourceRoot":""}