@desynova-digital/player 3.9.7 → 4.0.1

package/media/Video.jsx

@@ -0,0 +1,714 @@
+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';