@shopgate/engage/components/VideoPlayer/index.js

Shopgate's ENGAGE library.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { PureComponent } from 'react';
import ReactPlayer from 'react-player';
import { UIEvents } from '@shopgate/pwa-core';
import { UI_VISIBILITY_CHANGE } from '@shopgate/pwa-common/constants/ui';

/**
 * Video player component
 * @param {Object} props props
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
let VideoPlayer = /*#__PURE__*/function (_PureComponent) {
  /**
   * @param {Object} props The component props
   */
  function VideoPlayer(props) {
    var _this;
    _this = _PureComponent.call(this, props) || this;
    /** @returns {boolean} */
    _this.getPlayingState = () => _this.state.ready && !_this.state.userPaused && _this.state.playing;
    /** @returns {void} */
    _this.handleReady = () => {
      _this.setState({
        ready: true
      });
    };
    /**
     * Not allowed autoplay error (User gesture permission)
     * @param {Object} error error
     */
    _this.handleError = error => {
      if (error && error.name === 'NotAllowedError') {
        _this.setState({
          playing: false
        });
      }
    };
    /** @returns {undefined} */
    _this.handlePause = () => {
      // Check if was not paused programmatically
      if (_this.state.playing) {
        _this.setState({
          userPaused: true,
          playing: false
        });
      }
    };
    /** @returns {undefined} */
    _this.handlePlay = () => {
      if (!_this.state.playing) {
        _this.setState({
          userPaused: false,
          playing: true
        });
      }
    };
    /** @returns {undefined} */
    _this.handleVisibilityChange = () => {
      _this.setState({
        playing: false
      });
    };
    _this.state = {
      ready: false,
      playing: props.playing,
      userPaused: false
    };
    return _this;
  }

  /**
   * @inheritDoc
   */
  _inheritsLoose(VideoPlayer, _PureComponent);
  var _proto = VideoPlayer.prototype;
  _proto.componentDidMount = function componentDidMount() {
    UIEvents.addListener(UI_VISIBILITY_CHANGE, this.handleVisibilityChange);
  }

  /**
   * @inheritDoc
   */;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    const nextState = {
      playing: nextProps.playing
    };
    if (this.props.url !== nextProps.url) {
      nextState.ready = false;
    }
    this.setState(nextState);
  }

  /**
   * @inheritDoc
   */;
  _proto.componentWillUnmount = function componentWillUnmount() {
    UIEvents.removeListener(UI_VISIBILITY_CHANGE, this.handleVisibilityChange);
  };
  /**
   * @returns {JSX}
   */
  _proto.render = function render() {
    return /*#__PURE__*/_jsx(ReactPlayer, {
      playsinline: true,
      ...this.props,
      playing: this.getPlayingState(),
      onReady: this.handleReady,
      onPause: this.handlePause,
      onPlay: this.handlePlay,
      onError: this.handleError
    });
  };
  return VideoPlayer;
}(PureComponent);
VideoPlayer.defaultProps = ReactPlayer.defaultProps;
export default VideoPlayer;