@desynova-digital/player 4.0.1 → 4.0.2

package/media/Video.jsx

@@ -1,714 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import Hls from 'hls.js';
-import colors from '../utils/colors';
-import { Button } from '@desynova-digital/components';
-// import Manager from '../Manager';
-// import { mergeAndSortChildren, isVideoChild, mediaProperties, throttle } from '../utils';
-// import BigPlayButton from './BigPlayButton';
-// import PosterImage from './PosterImage';
-// import SDOutline from './SDOutline';
-import { Loader } from '@desynova-digital/components/components';
-import SDOutline from './SDOutline';
-import AudioMeter from './AudioMeter';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object),
-  startTime: PropTypes.number,
-  loop: PropTypes.bool,
-  muted: PropTypes.bool,
-  autoPlay: PropTypes.bool,
-  playsInline: PropTypes.bool,
-  src: PropTypes.string,
-  poster: PropTypes.string,
-  className: PropTypes.string,
-  fileType: PropTypes.oneOf(['video', 'image', 'audio']),
-  preload: PropTypes.oneOf(['auto', 'metadata', 'none']),
-  crossOrigin: PropTypes.string,
-  fluid: PropTypes.bool,
-  children: PropTypes.arrayOf(PropTypes.element),
-  store: PropTypes.instanceOf(Object),
-  width: PropTypes.number,
-  activeTrackIndex: PropTypes.number,
-  height: PropTypes.number,
-  videoId: PropTypes.string,
-  onLoadStart: PropTypes.func,
-  onWaiting: PropTypes.func,
-  onCanPlay: PropTypes.func,
-  onCanPlayThrough: PropTypes.func,
-  onPlaying: PropTypes.func,
-  onEnded: PropTypes.func,
-  onSeeking: PropTypes.func,
-  onSeeked: PropTypes.func,
-  onPlay: PropTypes.func,
-  onPause: PropTypes.func,
-  onProgress: PropTypes.func,
-  onDurationChange: PropTypes.func,
-  onError: PropTypes.func,
-  onSuspend: PropTypes.func,
-  onAbort: PropTypes.func,
-  onEmptied: PropTypes.func,
-  onStalled: PropTypes.func,
-  onLoadedMetadata: PropTypes.func,
-  onLoadedData: PropTypes.func,
-  onTimeUpdate: PropTypes.func,
-  onRateChange: PropTypes.func,
-  onVolumeChange: PropTypes.func,
-  onResize: PropTypes.func,
-  aspectRatio: PropTypes.string,
-  onPlayerClose: PropTypes.func,
-  userEmail: PropTypes.string,
-  playerSelectedMarker: PropTypes.instanceOf(Object)
-};
-
-const defaultProps = {
-  startTime: 0,
-  loop: false,
-  muted: false,
-  autoPlay: false,
-  playsInline: false,
-  preload: 'auto',
-  aspectRatio: 'auto',
-  crossOrigin: 'anonymous'
-};
-
-const SubTitleSection = styled.div`
-  position: absolute;
-  font-family: SFUIText-Regular;
-  font-size: 16px;
-  bottom: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  color: #ffffff;
-  height: 90%;
-  align-items: center;
-
-  .subtitleContainer {
-    border-radius: 4px;
-    width: fit-content;
-    background: #000000;
-    opacity: 0.9;
-    padding: 8px 10px;
-    line-height: 20px;
-    position: absolute;
-  }
-`;
-
-const VideoBlock = styled.div`
-  position: relative;
-  &.video-react-player-block {
-    position: relative;
-    transition: all 0.1s ease-in-out;
-    -moz-transition: all 0.1s ease-in-out;
-    -webkit-transition: all 0.1s ease-in-out;
-    -ms-transition: all 0.1s ease-in-out;
-    -o-transition: all 0.1s ease-in-out;
-    video {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      right: 0;
-      bottom: 0;
-    }
-    .audio-tracks {
-      position: relative;
-      display: flex;
-      background: rgba(0, 0, 0, 0.5);
-      color: #fff;
-      z-index: 10;
-      position: absolute;
-      width: 100%;
-      bottom: 0;
-      p {
-        cursor: pointer;
-        padding: 10px;
-      }
-    }
-    .loader-container {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      z-index: 10;
-      background: rgba(0, 0, 0, 0.5);
-    }
-  }
-  &.ratio-border {
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    &:after {
-      content: '16:9 Safe Area';
-      position: absolute;
-      color: #fff;
-      font-family: SFUIText-Regular;
-      font-size: 12px;
-      transform: rotate(-90deg);
-      top: 20%;
-      left: -50px;
-    }
-  }
-`;
-const PlayButton = styled(Button)`
-  background: ${(props) => colors.common.video[props.assetType].buttonGradient};
-  width: 100px;
-  height: 100px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border: none;
-  z-index: 1;
-  &:hover,
-  &:focus {
-    background: ${(props) => colors.common.video[props.assetType].buttonGradient};
-  }
-`;
-
-const AudioMeterBlock = styled('div')`
-  width: ${(props) => (!props.active ? '50px' : '55px')};
-  height: ${(props) => (!props.active ? '50px !important' : 'calc(100% - 80px)')};
-  position: absolute;
-  bottom: ${(props) => (!props.active ? '5px' : '0px')};
-  right: 15px;
-  padding: ${(props) => (!props.active ? '5px' : '0px')};
-  box-sizing: border-box;
-  background: ${(props) => (!props.active ? 'rgba(243, 243, 243, 0.5)' : 'rgba(0, 0, 0, 1)')};
-  border-radius: ${(props) => (!props.active ? '5px' : '0px')};
-  display: ${(props) => (!props.active ? 'block' : 'inline-block')};
-  margin: ${(props) => (!props.active ? '0' : '20px 0')};
-  transition: all 0.1s ease-in-out;
-  -moz-transition: all 0.1s ease-in-out;
-  -webkit-transition: all 0.1s ease-in-out;
-  -ms-transition: all 0.1s ease-in-out;
-  -o-transition: all 0.1s ease-in-out;
-`;
-
-export default class Video extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      audioTracks: [],
-      isM3U8: false,
-      watermark: {
-        color: 'rgb(255, 255, 255)',
-        position: 'absolute',
-        'font-family': 'SFUIText-Regular',
-        'text-shadow': '0 0 4px rgb(0 0 0 / 50%)',
-        'font-size': '12px',
-        opacity: '0.6',
-        display: 'block',
-        top: '0px',
-        left: '0px'
-      },
-      watermarkInterval: -1,
-      isBuffering: false,
-      currentSubtitleObj: {}
-    };
-    this.video = null; // the html5 video
-    // this.manager = new Manager(props.store);
-    this.play = this.play.bind(this);
-    this.pause = this.pause.bind(this);
-    this.seek = this.seek.bind(this);
-    this.forward = this.forward.bind(this);
-    this.replay = this.replay.bind(this);
-    this.toggleFullscreen = this.toggleFullscreen.bind(this);
-    this.handleEnded = this.handleEnded.bind(this);
-    this.handleLoadedMetaData = this.handleLoadedMetaData.bind(this);
-    this.handleTimeUpdate = this.handleTimeUpdate.bind(this);
-    this.checkWatermark = this.checkWatermark.bind(this);
-  }
-
-  componentDidMount() {
-    const { src } = this.props;
-    const isM3U8 = src.split('.').pop() === 'm3u8' ? true : false;
-    this.setState({
-      isM3U8: isM3U8
-    });
-    if (Hls.isSupported() && isM3U8) {
-      const { HLSConfig } = this.props;
-      this.hls = new Hls(HLSConfig);
-      this.setupHLS(src);
-    } else {
-      this.video.src = src;
-    }
-    // this.forceUpdate(); // make sure the children can get the video property
-    const watermarkInterval = setInterval(this.checkWatermark, 20000);
-    this.setState({
-      watermarkInterval: watermarkInterval
-    });
-  }
-
-  componentWillUnmount() {
-    const { isM3U8, watermarkInterval } = this.state;
-    if (Hls.isSupported() && isM3U8) {
-      this.hls.detachMedia();
-    } else {
-      this.video.src = '';
-    }
-    clearInterval(watermarkInterval);
-  }
-
-  /**
-   * This function is triggered on interval to shuffle the position of watermark on Player area
-   */
-  checkWatermark() {
-    const { watermark } = this.state;
-    const { onPlayerClose, userEmail } = this.props;
-    const watermark_text = document.querySelector('#watermark-text');
-    let video_player = null;
-    let watermark_dimension = null;
-    let text_css = null;
-    let bool_text = false;
-
-    if (!watermark_text) {
-      onPlayerClose();
-    } else {
-      video_player = document.querySelector('.video-react-player-block').getBoundingClientRect();
-      watermark_dimension = watermark_text.getBoundingClientRect();
-      text_css = watermark_text.style;
-      bool_text =
-        text_css.position !== 'absolute' ||
-        text_css.opacity !== '0.6' ||
-        (text_css['font-family'] !== 'SFUIText-Regular' && text_css['font-family'] !== '"SFUIText-Regular"');
-      bool_text = bool_text || text_css.display !== 'block';
-      bool_text = bool_text || text_css.top !== watermark.top;
-      bool_text = bool_text || text_css.left !== watermark.left;
-      bool_text = bool_text || text_css.length !== 9 || text_css['font-size'] !== '12px';
-      bool_text = bool_text || text_css.color !== 'rgb(255, 255, 255)';
-      bool_text = bool_text || userEmail !== watermark_text.innerText;
-      if (bool_text) {
-        onPlayerClose();
-      }
-    }
-    watermark.left = (Math.random() * (video_player.width - watermark_dimension.width)).toFixed(0) + 'px';
-    watermark.top = (Math.random() * (video_player.height - watermark_dimension.height)).toFixed(0) + 'px';
-    this.setState({
-      watermark: watermark
-    });
-  }
-
-  setupHLS(src) {
-    const { actions, activeTrackIndex, actionClick } = this.props;
-    const self = this;
-    // bind them together
-    this.hls.attachMedia(this.video);
-    this.hls.on(Hls.Events.MEDIA_ATTACHED, function() {
-      self.hls.loadSource(src);
-    });
-    this.hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
-      let trackIndex = activeTrackIndex || 0;
-      //todo handle below actions and merge it into same setstate.
-      actionClick({
-        action: 'handle_audio_tracks',
-        value: data.audioTracks
-      });
-      actionClick({
-        action: 'handle_audio_track_change',
-        value: data.audioTracks[trackIndex]
-      });
-    });
-    this.hls.on(Hls.Events.ERROR, (event, data) => {
-      // eslint-disable-next-line no-console
-      console.log('HLS.Events.ERROR: ', event, data);
-      if (data.fatal) {
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            // try to recover network error
-            this.hls.startLoad();
-            break;
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            this.hls.recoverMediaError();
-            break;
-          default:
-            // cannot recover
-            this.hls.destroy();
-            break;
-        }
-      } else if (data.details === 'internalException' && data.type === 'otherError') {
-        this.hls.startLoad();
-      }
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    const {
-      src,
-      //   player: { activeAudio },
-      currentSubtitleObj,
-      markers
-    } = this.props;
-    if (newProps.src !== src) {
-      const { isM3U8 } = this.state;
-      if (Hls.isSupported() && isM3U8 && this.hls.media) {
-        this.hls.detachMedia();
-      } else {
-        this.video.src = '';
-      }
-      setTimeout(() => {
-        const m3u8 = newProps.src.split('.').pop() === 'm3u8' ? true : false;
-        this.setState({
-          isM3U8: m3u8
-        });
-        if (Hls.isSupported() && m3u8) {
-          const { HLSConfig } = this.props;
-          this.hls = new Hls(HLSConfig);
-          this.setupHLS(newProps.src);
-        } else {
-          this.video.src = newProps.src;
-        }
-        this.forceUpdate();
-      }, 0); // make sure the children can get the video property
-    }
-    // if (newProps.player.activeAudio && activeAudio && activeAudio.id !== newProps.player.activeAudio.id) {
-    //   this.hls.audioTrack = newProps.player.activeAudio.id;
-    // }
-    if (
-      newProps.subtitleObj &&
-      newProps.subtitleObj.field &&
-      JSON.stringify(newProps.subtitleObj) !== JSON.stringify(currentSubtitleObj)
-    ) {
-      if (newProps.subtitleObj && newProps.subtitleObj.field && !newProps.subtitleObj.field.line1) {
-        this.setState({
-          currentSubtitleObj: {}
-        });
-      } else if (newProps.subtitleObj && newProps.subtitleObj.field && newProps.subtitleObj.field.line1) {
-        const style = this.getSubtitleStyle(newProps.subtitleObj.field);
-        this.setState({
-          currentSubtitleObj: {
-            line1: newProps.subtitleObj.field.line1,
-            line2: newProps.subtitleObj.field.line2,
-            start_time: newProps.subtitleObj.field.in_time,
-            end_time: newProps.subtitleObj.field.out_time,
-            style
-          }
-        });
-      }
-    }
-    if (newProps.markers.length && markers.length && newProps.markers[0].values.length !== markers[0].values.length) {
-      this.displaySubtitle(newProps.markers);
-    }
-    if (newProps.subtitleReadOnly && newProps.subtitleDataList) {
-      this.displaySubtitle(newProps.subtitleDataList);
-    }
-  }
-
-  // play the video
-  play() {
-    const promise = this.video.play();
-    if (promise !== undefined) {
-      promise.catch(() => {}).then(() => {});
-    }
-  }
-
-  // pause the video
-  pause() {
-    const promise = this.video.pause();
-    if (promise !== undefined) {
-      promise.catch(() => {}).then(() => {});
-    }
-  }
-
-  // Change the video source and re-load the video:
-  load() {
-    this.video.load();
-  }
-
-  // Add a new text track to the video
-  addTextTrack(...args) {
-    this.video.addTextTrack(...args);
-  }
-
-  // Check if your browser can play different types of video:
-  canPlayType(...args) {
-    this.video.canPlayType(...args);
-  }
-
-  // toggle play
-  togglePlay() {
-    if (this.video.paused) {
-      this.play();
-    } else {
-      this.pause();
-    }
-  }
-
-  // seek video by time
-  seek(time) {
-    try {
-      this.video.currentTime = time;
-    } catch (e) {
-      // console.log(e, 'Video is not ready.')
-    }
-  }
-
-  // jump forward x seconds
-  forward(seconds) {
-    this.seek(this.video.currentTime + seconds);
-  }
-
-  // jump back x seconds
-  replay(seconds) {
-    this.forward(-seconds);
-  }
-
-  // enter or exist full screen
-  toggleFullscreen() {
-    const { player, actions } = this.props;
-    actions.toggleFullscreen(player);
-  }
-
-  getSubtitleStyle(data) {
-    const style = {};
-    style.top = data && data.text_position === 'text_position_top' ? '0px' : '';
-    style.bottom = data && data.text_position === 'text_position_bottom' ? '0px' : '';
-    style.left = data && data.text_alignment === 'text_aligned_left' ? '0px' : '';
-    style.right = data && data.text_alignment === 'text_aligned_right' ? '0px' : '';
-    return style;
-  }
-
-  displaySubtitle(marker) {
-    const { markers, resetSubtitleData, subtitleReadOnly, subtitleDataList } = this.props;
-    const { currentSubtitleObj } = this.state;
-    if (resetSubtitleData) {
-      resetSubtitleData();
-    }
-    const currentTime = this.video.currentTime;
-    let currentMarker = marker || markers;
-    if (subtitleReadOnly) {
-      currentMarker = marker || subtitleDataList;
-    }
-    if (currentMarker && currentMarker[0] && currentMarker[0].name === 'Subtitle') {
-      const values = currentMarker[0].values;
-      const currentValue = values.filter((ele) => ele.start_time <= currentTime && ele.end_time >= currentTime);
-      const style = this.getSubtitleStyle(currentValue[0]);
-      const currentLine1 = (currentSubtitleObj && currentSubtitleObj.line1) || '';
-      const propsLine1 = (currentValue[0] && currentValue[0].line1) || '';
-      if (
-        (currentValue &&
-          currentValue.length &&
-          (currentSubtitleObj.start_time === currentValue[0].start_time ||
-            currentSubtitleObj.end_time === currentValue[0].end_time) &&
-          currentLine1 === propsLine1) ||
-        (Object.keys(currentSubtitleObj).length &&
-          currentValue.length &&
-          currentValue.length === currentSubtitleObj.start_time.length &&
-          currentValue.length === currentSubtitleObj.end_time.length &&
-          currentLine1 === propsLine1)
-      ) {
-        return;
-      } else {
-        this.setState({
-          currentSubtitleObj: {
-            line1: (currentValue[0] && currentValue[0].line1) || '',
-            line2: (currentValue[0] && currentValue[0].line2) || '',
-            start_time: (currentValue[0] && currentValue[0].start_time) || 0,
-            end_time: (currentValue[0] && currentValue[0].end_time) || 0,
-            style
-          }
-        });
-      }
-    }
-  }
-
-  /*
-   * Fired when the end of the media resource
-   * is reached (currentTime == duration)
-   */
-  handleEnded(...args) {
-    const { loop, player, actions, onEnded } = this.props;
-    if (loop) {
-      this.seek(0);
-      this.play();
-    } else if (!player.paused) {
-      this.pause();
-    }
-    actions.handleEnd(this.getProperties());
-
-    if (onEnded) {
-      onEnded(...args);
-    }
-  }
-
-  /*
-   * Fires when the browser has loaded
-   * meta data for the audio/video
-   */
-  handleLoadedMetaData = () => {
-    const { actionClick } = this.props;
-    actionClick({
-      action: 'handle_loaded_meta_data',
-      value: this.video.duration
-    });
-  };
-
-  handleSubtitleContainerClick() {
-    const { actionClick, paused } = this.props;
-    if (paused) {
-      actionClick({
-        action: 'play'
-      });
-    } else {
-      actionClick({
-        action: 'pause'
-      });
-    }
-  }
-
-  handleSubtitleClick(e) {
-    const { actionClick, paused, onScreenSubtitleClick, controlType } = this.props;
-    const { currentSubtitleObj } = this.state;
-    if (controlType === 'advanced') {
-      if (onScreenSubtitleClick) {
-        onScreenSubtitleClick(currentSubtitleObj);
-      }
-      actionClick({
-        action: 'pause'
-      });
-    } else {
-      if (paused) {
-        actionClick({
-          action: 'play'
-        });
-      } else {
-        actionClick({
-          action: 'pause'
-        });
-      }
-    }
-    // actions.handleVideoRewind(false);
-    e.stopPropagation();
-  }
-
-  /*
-   * Fires when the current
-   * playback position has changed
-   */
-  handleTimeUpdate = () => {
-    const {
-      actionClick,
-      previewActive,
-      playerSelectedMarker: { rightMarker }
-    } = this.props;
-    if (previewActive && this.video.currentTime >= rightMarker) {
-      actionClick({
-        action: 'pause'
-      });
-      actionClick({
-        action: 'seek',
-        value: rightMarker
-      });
-      actionClick({
-        action: 'handle_video_preview',
-        value: false
-      });
-    }
-    actionClick({
-      action: 'handle_time_update',
-      value: this.video.currentTime
-    });
-    this.displaySubtitle();
-  };
-
-  render() {
-    const { crossOrigin, videoId, userEmail, SDBorderActive, actionClick, paused } = this.props;
-
-    const { isBuffering, watermark, currentSubtitleObj } = this.state;
-
-    // const children = this.getChildren(this.props);
-    return (
-      <>
-        <VideoBlock
-          className="video-react-player-block"
-          id="media-container"
-          ref={(c) => {
-            this.playerBlock = c;
-          }}
-          // style={this.getStyle()}
-        >
-          {/* {(isBuffering && (
-          <div className="loader-container" onClick={() => this.togglePlay()}>
-            <Loader loaderName="SpinningLoader" />
-          </div>
-        )) ||
-          null} */}
-          <video
-            id={videoId}
-            // crossOrigin={crossOrigin}
-            src={this.props.src}
-            ref={(c) => {
-              this.video = c;
-            }}
-            onPlay={() => {
-              actionClick({
-                action: 'play'
-              });
-            }}
-            onPause={() => {
-              actionClick({
-                action: 'pause'
-              });
-            }}
-            onLoadedMetadata={this.handleLoadedMetaData}
-            onTimeUpdate={this.handleTimeUpdate}>
-            <track kind="captions" />
-          </video>
-          {paused && (
-            <PlayButton
-              display="rounded"
-              appearance="cta"
-              icon="play"
-              iconWidth={20}
-              iconHeight={26}
-              width={100}
-              height={100}
-              tabIndex="0"
-              onClick={() => {
-                actionClick({
-                  action: 'play'
-                });
-              }}
-              {...this.props}
-            />
-          )}
-          <SDOutline SDBorderActive={SDBorderActive} actionClick={actionClick} paused={paused} />
-          {/* {children} */}
-          <p className="user-name-wrapper" id="watermark-text" style={{ ...watermark }}>
-            {userEmail}
-          </p>
-          {currentSubtitleObj && currentSubtitleObj.line1 && currentSubtitleObj.line1.length && (
-            <SubTitleSection id="outer" onClick={() => this.handleSubtitleContainerClick()}>
-              <span
-                onClick={(e) => this.handleSubtitleClick(e)}
-                className="subtitleContainer"
-                style={{ ...currentSubtitleObj.style }}>
-                {(currentSubtitleObj.line1 && <pre> {currentSubtitleObj.line1} </pre>) || null}
-                {(currentSubtitleObj.line2 && <pre> {currentSubtitleObj.line2} </pre>) || null}
-              </span>
-            </SubTitleSection>
-          )}
-        </VideoBlock>
-      </>
-    );
-    // <AudioMeterBlock
-    // id="audio-meter-block"
-    //   onClick={() => {
-    //     this.meterBlockClick();
-    //   }}
-    //   role="presentation"
-    //   active>
-    //   {/* <AudioMeter player={props.player} height={this.meterHeight} /> */}
-    //   <AudioMeter height="40" {...this.props} />
-    // </AudioMeterBlock>
-  }
-}
-
-Video.propTypes = propTypes;
-Video.defaultProps = defaultProps;
-Video.displayName = 'Video';