@sberdevices/plasma-temple/dist/components/MediaPlayer/MediaPlayerControls.js

SberDevices CanvasApp Templates.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.isControlVisible = exports.MediaPlayerControls = void 0;

var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));

var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));

var _plasmaIcons = /*#__PURE__*/require("@sberdevices/plasma-icons");

var _useFocusOnMount = /*#__PURE__*/require("../../hooks/useFocusOnMount");

var _MediaPlayerButton = /*#__PURE__*/require("./MediaPlayerButton");

var _types = /*#__PURE__*/require("./types");

var _ForwardIcon = /*#__PURE__*/require("./assets/ForwardIcon");

var _ReplayIcon = /*#__PURE__*/require("./assets/ReplayIcon");

var _excluded = ["forward"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var isControlVisible = function isControlVisible(control, controlList) {
  if (!controlList) {
    return true;
  }

  return controlList.includes(control);
};

exports.isControlVisible = isControlVisible;

var StyledWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-1ft274f-0"
})(["display:inline-flex;justify-content:center;align-items:center;"]);

var StyledTimeTravelButtonText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
  componentId: "plasma-temple__sc-1ft274f-1"
})(["position:absolute;top:50%;left:50%;font-size:14px;line-height:1.2;transform:translate(-50%,-50%);"]);

var TimeTravelButton = function TimeTravelButton(_ref) {
  var forward = _ref.forward,
      restProps = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/_react["default"].createElement(_MediaPlayerButton.MediaPlayerButton, restProps, /*#__PURE__*/_react["default"].createElement(_plasmaIcons.IconRoot, {
    icon: forward ? _ForwardIcon.ForwardIcon : _ReplayIcon.ReplayIcon,
    size: "xs"
  }), /*#__PURE__*/_react["default"].createElement(StyledTimeTravelButtonText, null, "10"));
};

var MediaPlayerControls = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
  var playback = _ref2.playback,
      goBack = _ref2.goBack,
      goNext = _ref2.goNext,
      jumpTo = _ref2.jumpTo,
      paused = _ref2.paused,
      finished = _ref2.finished,
      canPlay = _ref2.canPlay,
      backDisabled = _ref2.backDisabled,
      nextDisabled = _ref2.nextDisabled,
      visibleControlList = _ref2.visibleControlList,
      className = _ref2.className;
  var IconPlayComponent = finished ? _plasmaIcons.IconRepeat : _plasmaIcons.IconPlay;

  var mountRef = _react["default"].useRef(null);

  (0, _useFocusOnMount.useFocusOnMount)(mountRef, {
    delay: 150,
    prevent: !canPlay,
    callOnce: true
  });
  return /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
    className: className,
    ref: ref
  }, /*#__PURE__*/_react["default"].createElement(_MediaPlayerButton.MediaPlayerButton, {
    disabled: backDisabled,
    onClick: goBack,
    visible: isControlVisible(_types.ControlType.BACK, visibleControlList)
  }, /*#__PURE__*/_react["default"].createElement(_plasmaIcons.IconPrevious, {
    size: "xs"
  })), /*#__PURE__*/_react["default"].createElement(TimeTravelButton, {
    onClick: function onClick() {
      return jumpTo(-1);
    },
    visible: isControlVisible(_types.ControlType.JUMP_BACK, visibleControlList)
  }), /*#__PURE__*/_react["default"].createElement(_MediaPlayerButton.MediaPlayerButton, {
    onClick: playback,
    visible: isControlVisible(_types.ControlType.PLAYBACK, visibleControlList),
    disabled: !canPlay,
    ref: mountRef
  }, paused ? /*#__PURE__*/_react["default"].createElement(IconPlayComponent, {
    size: "xs"
  }) : /*#__PURE__*/_react["default"].createElement(_plasmaIcons.IconPause, {
    size: "xs"
  })), /*#__PURE__*/_react["default"].createElement(TimeTravelButton, {
    onClick: function onClick() {
      return jumpTo(1);
    },
    visible: isControlVisible(_types.ControlType.JUMP_FORWARD, visibleControlList),
    forward: true
  }), /*#__PURE__*/_react["default"].createElement(_MediaPlayerButton.MediaPlayerButton, {
    disabled: nextDisabled,
    onClick: goNext,
    visible: isControlVisible(_types.ControlType.NEXT, visibleControlList)
  }, /*#__PURE__*/_react["default"].createElement(_plasmaIcons.IconNext, {
    size: "xs"
  })));
});

exports.MediaPlayerControls = MediaPlayerControls;
//# sourceMappingURL=MediaPlayerControls.js.map