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

SberDevices CanvasApp Templates.

"use strict";

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

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

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

var _plasmaTokens = /*#__PURE__*/require("@sberdevices/plasma-tokens");

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

var formatNumber = function formatNumber(value) {
  return value.toString().padStart(2, '0');
};

var formatTime = function formatTime(time) {
  var hours = Math.floor(time / 3600);
  var minutes = Math.floor(time % 3600 / 60);
  var seconds = Math.round(time % 60);
  var minutesAndSeconds = [formatNumber(minutes), formatNumber(seconds)].join(':');
  return hours > 0 ? "".concat(formatNumber(hours), ":").concat(minutesAndSeconds) : minutesAndSeconds;
};

exports.formatTime = formatTime;

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

var StyledTime = /*#__PURE__*/_styledComponents["default"].span.withConfig({
  componentId: "plasma-temple__sc-1mksizn-1"
})(["font-size:1rem;line-height:1.25;letter-spacing:-0.019em;"]);

var StyledProgress = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-1mksizn-2"
})(["position:absolute;top:0;left:0;height:4px;border-radius:2px;background-color:", ";"], _plasmaTokens.primary);

var StyledTimelineTick = /*#__PURE__*/_styledComponents["default"].span.withConfig({
  componentId: "plasma-temple__sc-1mksizn-3"
})(["position:absolute;top:1px;left:0;display:inline-block;width:20px;height:20px;border-radius:50%;outline:none;background-color:", ";transform:translate(-50%,-50%);&:focus{box-shadow:0 0 4px 0 ", ";}"], _plasmaTokens.primary, _plasmaTokens.buttonFocused);

var StyledTimeLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  componentId: "plasma-temple__sc-1mksizn-4"
})(["position:relative;flex:1;max-width:100%;height:4px;margin:0 1rem;border-radius:2px;background-color:", ";"], _plasmaTokens.secondary);

var MediaPlayerTimeline = function MediaPlayerTimeline(_ref) {
  var className = _ref.className,
      playerRef = _ref.playerRef,
      onTimeUpdate = _ref.onTimeUpdate,
      currentTime = _ref.currentTime,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 0 : _ref$duration,
      _ref$showTick = _ref.showTick,
      showTick = _ref$showTick === void 0 ? true : _ref$showTick;

  var _React$useState = _react["default"].useState({
    duration: duration,
    currentTime: 0
  }),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      mediaData = _React$useState2[0],
      setMediaData = _React$useState2[1];

  var currentTimeValue = currentTime !== null && currentTime !== void 0 ? currentTime : mediaData.currentTime;
  var durationValue = duration || mediaData.duration;

  var updateTime = _react["default"].useCallback(function () {
    if (!playerRef.current) {
      return;
    }

    var node = playerRef.current;
    var currentTimeSafe = currentTime !== null && currentTime !== void 0 ? currentTime : 0;
    onTimeUpdate === null || onTimeUpdate === void 0 ? void 0 : onTimeUpdate(node.currentTime + currentTimeSafe);
    setMediaData(function (prevData) {
      return _objectSpread(_objectSpread({}, prevData), {}, {
        currentTime: node.currentTime + currentTimeSafe
      });
    });
  }, [onTimeUpdate, playerRef, currentTime]);

  var timelinePosition = currentTimeValue / durationValue * 100;

  _react["default"].useLayoutEffect(function () {
    if (!playerRef.current) {
      return;
    }

    var node = playerRef.current;
    node.addEventListener('canplaythrough', function () {
      if (duration === 0 && !currentTime) {
        setMediaData({
          duration: node.duration,
          currentTime: node.currentTime
        });
      }
    }, {
      once: true
    });
    node.addEventListener('timeupdate', updateTime);
    return function () {
      node.removeEventListener('timeupdate', updateTime);
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playerRef.current, updateTime, currentTime, duration]);

  _react["default"].useEffect(function () {
    if (duration && duration !== mediaData.duration) {
      setMediaData(_objectSpread(_objectSpread({}, mediaData), {}, {
        duration: duration
      }));
    }
  }, [duration, mediaData]);

  return /*#__PURE__*/_react["default"].createElement(StyledWrapper, {
    className: className
  }, /*#__PURE__*/_react["default"].createElement(StyledTime, null, formatTime(currentTimeValue)), /*#__PURE__*/_react["default"].createElement(StyledTimeLine, null, /*#__PURE__*/_react["default"].createElement(StyledProgress, {
    style: {
      width: "".concat(timelinePosition, "%")
    }
  }), showTick && /*#__PURE__*/_react["default"].createElement(StyledTimelineTick, {
    style: {
      left: "".concat(timelinePosition, "%")
    }
  })), /*#__PURE__*/_react["default"].createElement(StyledTime, null, formatTime(durationValue)));
};

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