text: // @flow
  
  import React, { Component, createRef } from 'react';
  import { View } from 'react-native';
  import YoutubePlayer from 'react-native-youtube-iframe';
  
  import { getLocalParticipant } from '../../../base/participants';
  import { connect } from '../../../base/redux';
  import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
  import { setToolboxVisible } from '../../../toolbox/actions';
  import { setSharedVideoStatus } from '../../actions';
  
  import styles from './styles';
  
  /**
   * Passed to the webviewProps in order to avoid the usage of the ios player on which we cannot hide the controls.
   *
   * @private
   */
  const webviewUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36'; // eslint-disable-line max-len
  
  /**
   * The type of the React {@link Component} props of {@link YoutubeLargeVideo}.
   */
  type Props = {
  
      /**
       * Display the youtube controls on the player.
       *
       * @private
       */
      _enableControls: boolean,
  
      /**
       * Is the video shared by the local user.
       *
       * @private
       */
      _isOwner: boolean,
  
      /**
       * The ID of the participant (to be) depicted by LargeVideo.
       *
       * @private
       */
      _isPlaying: string,
  
      /**
       * Set to true when the status is set to stop and the view should not react to further changes.
       *
       * @private
       */
      _isStopped: boolean,
  
      /**
       * True if in landscape mode.
       *
       * @private
       */
      _isWideScreen: boolean,
  
      /**
       * The id of the participant sharing the video.
       *
       * @private
       */
      _ownerId: string,
  
      /**
       * The height of the player.
       *
       * @private
       */
      _playerHeight: number,
  
      /**
       * The width of the player.
       *
       * @private
       */
      _playerWidth: number,
  
      /**
       * Seek time in seconds.
       *
       * @private
       */
      _seek: number,
  
       /**
       * The status of the player.
       *
       * @private
       */
      _status: string,
  
      /**
       * The Redux dispatch function.
       */
      dispatch: Function,
  
      /**
       * Youtube id of the video to be played.
       *
       * @private
       */
      youtubeId: string
  };
  
  /**
   *
   * Implements a React {@code Component} for showing a youtube video.
   *
   * @extends Component
   */
  class YoutubeLargeVideo extends Component<Props, *> {
      /**
       * Saves a handle to the timer for seek time updates,
       * so that it can be cancelled when the component unmounts.
       */
      intervalId: ?IntervalID;
  
      /**
       * A React ref to the HTML element containing the {@code YoutubePlayer} instance.
       */
      playerRef: Object;
  
      /**
       * Initializes a new {@code YoutubeLargeVideo} instance.
       *
       * @param {Object} props - The read-only properties with which the new
       * instance is to be initialized.
       */
      constructor(props: Props) {
          super(props);
          this.playerRef = createRef();
          this._onReady = this._onReady.bind(this);
          this._onChangeState = this._onChangeState.bind(this);
          this.setWideScreenMode(props._isWideScreen);
      }
  
      /**
       * Seeks to the new time if the difference between the new one and the current is larger than 5 seconds.
       *
       * @inheritdoc
       * @returns {void}
       */
  
      componentWillReceiveProps (newProps) {
  
         //console.log('this must be the place youtubeId' + newProps.youtubeId);
  
         if( newProps.youtubeId !== this.props.youtubeId){
                //this.props.dispatch(setSharedVideoStatus(newProps.youtubeId, 'playing', 0, this.props.ownerId));
           } /* do stuff */
      }
  
      componentDidUpdate(prevProps: Props) {
        console.log('ytl compoent did update');
  
          const playerRef = this.playerRef.current;
          const { _isWideScreen, _seek } = this.props;
  
          if (_seek !== prevProps._seek) {
              playerRef && playerRef.getCurrentTime().then(time => {
                  if (shouldSeekToPosition(_seek, time)) {
                      playerRef && playerRef.seekTo(_seek);
                  }
              });
          }
  
          if (_isWideScreen !== prevProps._isWideScreen) {
              this.setWideScreenMode(_isWideScreen);
          }
      }
  
      /**
       * Sets the interval for saving the seek time to redux every 5 seconds.
       *
       * @inheritdoc
       * @returns {void}
       */
      componentDidMount() {
          this.intervalId = setInterval(() => {
            //  this.saveRefTime();
          }, 5000);
      }
  
      /**
       * Clears the interval.
       *
       * @inheritdoc
       * @returns {void}
       */
      componentWillUnmount() {
          clearInterval(this.intervalId);
          this.intervalId = null;
      }
  
      /**
       * Renders the YoutubeLargeVideo element.
       *
       * @override
       * @returns {ReactElement}
       */
      render() {
        console.log('ytl render');
          const {
              _enableControls,
              _isPlaying,
              _playerHeight,
              _playerWidth,
              youtubeId
          } = this.props;
  
          return (
              <View
                  pointerEvents = { _enableControls ? 'auto' : 'none' }
                  style = { styles.youtubeVideoContainer } >
                  <YoutubePlayer
                      height = { _playerHeight }
                      initialPlayerParams = {{
                          controls: _enableControls,
                          modestbranding: true,
                          preventFullScreen: true,
                      }}
                      /* eslint-disable react/jsx-no-bind */
                      onChangeState = { this._onChangeState }
                      /* eslint-disable react/jsx-no-bind */
                      onReady = { this._onReady }
                      play = { _isPlaying }
                      playbackRate = { 1 }
                      ref = { this.playerRef }
                      videoId = { youtubeId }
                      volume = { 50 }
                      webViewProps = {{
                          bounces: false,
                          mediaPlaybackRequiresUserAction: false,
                          scrollEnabled: false,
                          userAgent: webviewUserAgent
                      }}
                      width = { _playerWidth } />
              </View>);
      }
  
      _onReady: () => void;
  
      /**
       * Callback invoked when the player is ready to play the video.
       *
       * @private
       * @returns {void}
       */
      _onReady() {
  
          if (this.props?._isOwner) {
              this.onVideoReady(
                  this.props.youtubeId,
                  this.playerRef.current && this.playerRef.current.getCurrentTime(),
                  this.props._ownerId);
          }
      }
  
      _onChangeState: (status: string) => void;
  
      /**
       * Callback invoked when the state of the player changes.
       *
       * @param {string} status - The new status of the player.
       * @private
       * @returns {void}
       */
      _onChangeState(status) {
        console.log('YTL player status set to ' + status);
  
  
  
          this.playerRef?.current && this.playerRef.current.getCurrentTime().then(time => {
              const {
                  _isOwner,
                  _isPlaying,
                  _isStopped,
                  _ownerId,
                  _seek,
                  youtubeId
              } = this.props;
  
  
              if (shouldSetNewStatus(_isStopped, _isOwner, status, _isPlaying, time, _seek)) {
                  this.onVideoChangeEvent(youtubeId, status, time, _ownerId);
              }
          });
      }
  
      /**
       * Calls onVideoChangeEvent with the refTime.
       *
       * @private
       * @returns {void}
      */
      saveRefTime() {
          const { youtubeId, _status, _ownerId } = this.props;
  
          this.playerRef.current && this.playerRef.current.getCurrentTime().then(time => {
              this.onVideoChangeEvent(youtubeId, _status, time, _ownerId);
          });
      }
  
      /**
       * Dispatches the video status, time and ownerId if the status is playing or g.
       *
       * @param {string} videoId - The youtube id of the video.
       * @param {string} status - The status of the player.
       * @param {number} time - The seek time.
       * @param {string} ownerId - The id of the participant sharing the video.
       * @private
       * @returns {void}
      */
      onVideoChangeEvent(videoId, status, time, ownerId) {
  
          if (![ 'playing', 'paused' ].includes(status)) {
              return;
          }
  
          this.props.dispatch(setSharedVideoStatus(videoId, translateStatus(status), time, ownerId));
      }
  
      /**
       * Dispatches the 'playing' as video status, time and ownerId.
       *
       * @param {string} videoId - The youtube id of the video.
       * @param {number} time - The seek time.
       * @param {string} ownerId - The id of the participant sharing the video.
       * @private
       * @returns {void}
      */
      onVideoReady(videoId, time, ownerId) {
          time.then(t => this.props.dispatch(setSharedVideoStatus(videoId, 'playing', t, ownerId)));
      }
  
      /**
       * Dispatches action to set the visibility of the toolbox, true if not widescreen, false otherwise.
       *
       * @param {isWideScreen} isWideScreen - Whether the screen is wide.
       * @private
       * @returns {void}
      */
      setWideScreenMode(isWideScreen) {
          this.props.dispatch(setToolboxVisible(!isWideScreen));
      }
  }
  
  /* eslint-disable max-params */
  
  /**
   * Return true if the user is the owner and
   * the status has changed or the seek time difference from the previous set is larger than 5 seconds.
   *
   * @param {boolean} isStopped - Once the status was set to stop, all the other statuses should be ignored.
   * @param {boolean} isOwner - Whether the local user is sharing the video.
   * @param {string} status - The new status.
   * @param {boolean} isPlaying - Whether the component is playing at the moment.
   * @param {number} newTime - The new seek time.
   * @param {number} previousTime - The old seek time.
   * @private
   * @returns {boolean}
  */
  function shouldSetNewStatus(isStopped, isOwner, status, isPlaying, newTime, previousTime) {
      if (isStopped) {
          return false;
      }
  
      if (!isOwner || status === 'buffering') {
          return false;
      }
  
      if ((isPlaying && status === 'paused') || (!isPlaying && status === 'playing')) {
          return true;
      }
  
      return shouldSeekToPosition(newTime, previousTime);
  }
  
  /**
   * Return true if the diffenrece between the two timees is larger than 5.
   *
   * @param {number} newTime - The current time.
   * @param {number} previousTime - The previous time.
   * @private
   * @returns {boolean}
  */
  function shouldSeekToPosition(newTime, previousTime) {
      return Math.abs(newTime - previousTime) > 5;
  }
  
  /**
   * Maps (parts of) the Redux state to the associated YoutubeLargeVideo's props.
   *
   * @param {Object} state - Redux state.
   * @private
   * @returns {Props}
   */
  function _mapStateToProps(state) {
  
      const { ownerId, status, time, videoId } = state['features/youtube-player'];
      const localParticipant = getLocalParticipant(state);
      const responsiveUi = state['features/base/responsive-ui'];
      const { aspectRatio, clientHeight: screenHeight, clientWidth: screenWidth } = responsiveUi;
      const isWideScreen = aspectRatio === ASPECT_RATIO_WIDE;
  
      let playerHeight, playerWidth;
  
      if (isWideScreen) {
          playerHeight = screenHeight;
          playerWidth = playerHeight * 16 / 9;
      } else {
          playerWidth = screenWidth;
          playerHeight = playerWidth * 9 / 16;
      }
  
      playerWidth = 320;
      playerHeight = 180;
  
  
  
      return {
          youtubeId: videoId,
          _enableControls: ownerId === localParticipant.id,
          _isOwner: ownerId === localParticipant.id,
          _isPlaying: status === 'playing',
          _isStopped: status === 'stop',
          _isWideScreen: isWideScreen,
          _ownerId: ownerId,
          _playerHeight: playerHeight,
          _playerWidth: playerWidth,
          _seek: time,
          _status: status
  
      };
  }
  
  /**
   * In case the status is 'paused', it is translated to 'pause' to match the web functionality.
   *
   * @param {string} status - The status of the shared video.
   * @private
   * @returns {string}
   */
  function translateStatus(status) {
      if (status === 'paused') {
          return 'pause';
      }
  
      return status;
  }
  
  export default connect(_mapStateToProps)(YoutubeLargeVideo);
  