matrix-react-sdk/lib/components/views/audio_messages/SeekBar.js

SDK for matrix.org using React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _MarkedExecution = require("../../../utils/MarkedExecution");
var _numbers = require("../../../utils/numbers");
var _languageHandler = require("../../../languageHandler");
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

const ARROW_SKIP_SECONDS = 5; // arbitrary

class SeekBar extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    // We use an animation frame request to avoid overly spamming prop updates, even if we aren't
    // really using anything demanding on the CSS front.
    (0, _defineProperty2.default)(this, "animationFrameFn", new _MarkedExecution.MarkedExecution(() => this.doUpdate(), () => requestAnimationFrame(() => this.animationFrameFn.trigger())));
    (0, _defineProperty2.default)(this, "onChange", ev => {
      // Thankfully, onChange is only called when the user changes the value, not when we
      // change the value on the component. We can use this as a reliable "skip to X" function.
      //
      // noinspection JSIgnoredPromiseFromCall
      this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.durationSeconds);
    });
    (0, _defineProperty2.default)(this, "onMouseDown", event => {
      // do not propagate mouse down events, because these should be handled by the seekbar
      event.stopPropagation();
    });
    this.state = {
      percentage: (0, _numbers.percentageOf)(this.props.playback.timeSeconds, 0, this.props.playback.durationSeconds)
    };

    // We don't need to de-register: the class handles this for us internally
    this.props.playback.liveData.onUpdate(() => this.animationFrameFn.mark());
  }
  doUpdate() {
    this.setState({
      percentage: (0, _numbers.percentageOf)(this.props.playback.timeSeconds, 0, this.props.playback.durationSeconds)
    });
  }
  left() {
    // noinspection JSIgnoredPromiseFromCall
    this.props.playback.skipTo(this.props.playback.timeSeconds - ARROW_SKIP_SECONDS);
  }
  right() {
    // noinspection JSIgnoredPromiseFromCall
    this.props.playback.skipTo(this.props.playback.timeSeconds + ARROW_SKIP_SECONDS);
  }
  render() {
    // We use a range input to avoid having to re-invent accessibility handling on
    // a custom set of divs.
    return /*#__PURE__*/_react.default.createElement("input", {
      type: "range",
      className: "mx_SeekBar",
      tabIndex: this.props.tabIndex,
      onChange: this.onChange,
      onMouseDown: this.onMouseDown,
      min: 0,
      max: 1,
      value: this.state.percentage,
      step: 0.001,
      style: {
        "--fillTo": this.state.percentage
      },
      disabled: this.props.disabled,
      "aria-label": (0, _languageHandler._t)("a11y|seek_bar_label")
    });
  }
}
exports.default = SeekBar;
(0, _defineProperty2.default)(SeekBar, "defaultProps", {
  tabIndex: 0,
  disabled: false
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9NYXJrZWRFeGVjdXRpb24iLCJfbnVtYmVycyIsIl9sYW5ndWFnZUhhbmRsZXIiLCJBUlJPV19TS0lQX1NFQ09ORFMiLCJTZWVrQmFyIiwiUmVhY3QiLCJQdXJlQ29tcG9uZW50IiwiY29uc3RydWN0b3IiLCJwcm9wcyIsIl9kZWZpbmVQcm9wZXJ0eTIiLCJkZWZhdWx0IiwiTWFya2VkRXhlY3V0aW9uIiwiZG9VcGRhdGUiLCJyZXF1ZXN0QW5pbWF0aW9uRnJhbWUiLCJhbmltYXRpb25GcmFtZUZuIiwidHJpZ2dlciIsImV2IiwicGxheWJhY2siLCJza2lwVG8iLCJOdW1iZXIiLCJ0YXJnZXQiLCJ2YWx1ZSIsImR1cmF0aW9uU2Vjb25kcyIsImV2ZW50Iiwic3RvcFByb3BhZ2F0aW9uIiwic3RhdGUiLCJwZXJjZW50YWdlIiwicGVyY2VudGFnZU9mIiwidGltZVNlY29uZHMiLCJsaXZlRGF0YSIsIm9uVXBkYXRlIiwibWFyayIsInNldFN0YXRlIiwibGVmdCIsInJpZ2h0IiwicmVuZGVyIiwiY3JlYXRlRWxlbWVudCIsInR5cGUiLCJjbGFzc05hbWUiLCJ0YWJJbmRleCIsIm9uQ2hhbmdlIiwib25Nb3VzZURvd24iLCJtaW4iLCJtYXgiLCJzdGVwIiwic3R5bGUiLCJkaXNhYmxlZCIsIl90IiwiZXhwb3J0cyJdLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ZpZXdzL2F1ZGlvX21lc3NhZ2VzL1NlZWtCYXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbIi8qXG5Db3B5cmlnaHQgMjAyNCBOZXcgVmVjdG9yIEx0ZC5cbkNvcHlyaWdodCAyMDIxIFRoZSBNYXRyaXgub3JnIEZvdW5kYXRpb24gQy5JLkMuXG5cblNQRFgtTGljZW5zZS1JZGVudGlmaWVyOiBBR1BMLTMuMC1vbmx5IE9SIEdQTC0zLjAtb25seVxuUGxlYXNlIHNlZSBMSUNFTlNFIGZpbGVzIGluIHRoZSByZXBvc2l0b3J5IHJvb3QgZm9yIGZ1bGwgZGV0YWlscy5cbiovXG5cbmltcG9ydCBSZWFjdCwgeyBDaGFuZ2VFdmVudCwgQ1NTUHJvcGVydGllcywgUmVhY3ROb2RlIH0gZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCB7IFBsYXliYWNrSW50ZXJmYWNlIH0gZnJvbSBcIi4uLy4uLy4uL2F1ZGlvL1BsYXliYWNrXCI7XG5pbXBvcnQgeyBNYXJrZWRFeGVjdXRpb24gfSBmcm9tIFwiLi4vLi4vLi4vdXRpbHMvTWFya2VkRXhlY3V0aW9uXCI7XG5pbXBvcnQgeyBwZXJjZW50YWdlT2YgfSBmcm9tIFwiLi4vLi4vLi4vdXRpbHMvbnVtYmVyc1wiO1xuaW1wb3J0IHsgX3QgfSBmcm9tIFwiLi4vLi4vLi4vbGFuZ3VhZ2VIYW5kbGVyXCI7XG5cbmludGVyZmFjZSBJUHJvcHMge1xuICAgIC8vIFBsYXliYWNrIGluc3RhbmNlIHRvIHJlbmRlci4gQ2Fubm90IGNoYW5nZSBkdXJpbmcgY29tcG9uZW50IGxpZmVjeWNsZTogY3JlYXRlXG4gICAgLy8gYW4gYWxsLW5ldyBjb21wb25lbnQgaW5zdGVhZC5cbiAgICBwbGF5YmFjazogUGxheWJhY2tJbnRlcmZhY2U7XG5cbiAgICAvLyBUYWIgaW5kZXggZm9yIHRoZSB1bmRlcmx5aW5nIGNvbXBvbmVudC4gVXNlZnVsIGlmIHRoZSBzZWVrIGJhciBpcyBpbiBhIG1hbmFnZWQgc3RhdGUuXG4gICAgLy8gRGVmYXVsdHMgdG8gemVyby5cbiAgICB0YWJJbmRleD86IG51bWJlcjtcblxuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIElTdGF0ZSB7XG4gICAgcGVyY2VudGFnZTogbnVtYmVyO1xufVxuXG5pbnRlcmZhY2UgSVNlZWtDU1MgZXh0ZW5kcyBDU1NQcm9wZXJ0aWVzIHtcbiAgICBcIi0tZmlsbFRvXCI6IG51bWJlcjtcbn1cblxuY29uc3QgQVJST1dfU0tJUF9TRUNPTkRTID0gNTsgLy8gYXJiaXRyYXJ5XG5cbmV4cG9ydCBkZWZhdWx0IGNsYXNzIFNlZWtCYXIgZXh0ZW5kcyBSZWFjdC5QdXJlQ29tcG9uZW50PElQcm9wcywgSVN0YXRlPiB7XG4gICAgLy8gV2UgdXNlIGFuIGFuaW1hdGlvbiBmcmFtZSByZXF1ZXN0IHRvIGF2b2lkIG92ZXJseSBzcGFtbWluZyBwcm9wIHVwZGF0ZXMsIGV2ZW4gaWYgd2UgYXJlbid0XG4gICAgLy8gcmVhbGx5IHVzaW5nIGFueXRoaW5nIGRlbWFuZGluZyBvbiB0aGUgQ1NTIGZyb250LlxuXG4gICAgcHJpdmF0ZSBhbmltYXRpb25GcmFtZUZuOiBNYXJrZWRFeGVjdXRpb24gPSBuZXcgTWFya2VkRXhlY3V0aW9uKFxuICAgICAgICAoKSA9PiB0aGlzLmRvVXBkYXRlKCksXG4gICAgICAgICgpID0+IHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLmFuaW1hdGlvbkZyYW1lRm4udHJpZ2dlcigpKSxcbiAgICApO1xuXG4gICAgcHVibGljIHN0YXRpYyBkZWZhdWx0UHJvcHMgPSB7XG4gICAgICAgIHRhYkluZGV4OiAwLFxuICAgICAgICBkaXNhYmxlZDogZmFsc2UsXG4gICAgfTtcblxuICAgIHB1YmxpYyBjb25zdHJ1Y3Rvcihwcm9wczogSVByb3BzKSB7XG4gICAgICAgIHN1cGVyKHByb3BzKTtcblxuICAgICAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgICAgICAgcGVyY2VudGFnZTogcGVyY2VudGFnZU9mKHRoaXMucHJvcHMucGxheWJhY2sudGltZVNlY29uZHMsIDAsIHRoaXMucHJvcHMucGxheWJhY2suZHVyYXRpb25TZWNvbmRzKSxcbiAgICAgICAgfTtcblxuICAgICAgICAvLyBXZSBkb24ndCBuZWVkIHRvIGRlLXJlZ2lzdGVyOiB0aGUgY2xhc3MgaGFuZGxlcyB0aGlzIGZvciB1cyBpbnRlcm5hbGx5XG4gICAgICAgIHRoaXMucHJvcHMucGxheWJhY2subGl2ZURhdGEub25VcGRhdGUoKCkgPT4gdGhpcy5hbmltYXRpb25GcmFtZUZuLm1hcmsoKSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBkb1VwZGF0ZSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgICAgICBwZXJjZW50YWdlOiBwZXJjZW50YWdlT2YodGhpcy5wcm9wcy5wbGF5YmFjay50aW1lU2Vjb25kcywgMCwgdGhpcy5wcm9wcy5wbGF5YmFjay5kdXJhdGlvblNlY29uZHMpLFxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBwdWJsaWMgbGVmdCgpOiB2b2lkIHtcbiAgICAgICAgLy8gbm9pbnNwZWN0aW9uIEpTSWdub3JlZFByb21pc2VGcm9tQ2FsbFxuICAgICAgICB0aGlzLnByb3BzLnBsYXliYWNrLnNraXBUbyh0aGlzLnByb3BzLnBsYXliYWNrLnRpbWVTZWNvbmRzIC0gQVJST1dfU0tJUF9TRUNPTkRTKTtcbiAgICB9XG5cbiAgICBwdWJsaWMgcmlnaHQoKTogdm9pZCB7XG4gICAgICAgIC8vIG5vaW5zcGVjdGlvbiBKU0lnbm9yZWRQcm9taXNlRnJvbUNhbGxcbiAgICAgICAgdGhpcy5wcm9wcy5wbGF5YmFjay5za2lwVG8odGhpcy5wcm9wcy5wbGF5YmFjay50aW1lU2Vjb25kcyArIEFSUk9XX1NLSVBfU0VDT05EUyk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBvbkNoYW5nZSA9IChldjogQ2hhbmdlRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pOiB2b2lkID0+IHtcbiAgICAgICAgLy8gVGhhbmtmdWxseSwgb25DaGFuZ2UgaXMgb25seSBjYWxsZWQgd2hlbiB0aGUgdXNlciBjaGFuZ2VzIHRoZSB2YWx1ZSwgbm90IHdoZW4gd2VcbiAgICAgICAgLy8gY2hhbmdlIHRoZSB2YWx1ZSBvbiB0aGUgY29tcG9uZW50LiBXZSBjYW4gdXNlIHRoaXMgYXMgYSByZWxpYWJsZSBcInNraXAgdG8gWFwiIGZ1bmN0aW9uLlxuICAgICAgICAvL1xuICAgICAgICAvLyBub2luc3BlY3Rpb24gSlNJZ25vcmVkUHJvbWlzZUZyb21DYWxsXG4gICAgICAgIHRoaXMucHJvcHMucGxheWJhY2suc2tpcFRvKE51bWJlcihldi50YXJnZXQudmFsdWUpICogdGhpcy5wcm9wcy5wbGF5YmFjay5kdXJhdGlvblNlY29uZHMpO1xuICAgIH07XG5cbiAgICBwcml2YXRlIG9uTW91c2VEb3duID0gKGV2ZW50OiBSZWFjdC5Nb3VzZUV2ZW50PEVsZW1lbnQsIE1vdXNlRXZlbnQ+KTogdm9pZCA9PiB7XG4gICAgICAgIC8vIGRvIG5vdCBwcm9wYWdhdGUgbW91c2UgZG93biBldmVudHMsIGJlY2F1c2UgdGhlc2Ugc2hvdWxkIGJlIGhhbmRsZWQgYnkgdGhlIHNlZWtiYXJcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgfTtcblxuICAgIHB1YmxpYyByZW5kZXIoKTogUmVhY3ROb2RlIHtcbiAgICAgICAgLy8gV2UgdXNlIGEgcmFuZ2UgaW5wdXQgdG8gYXZvaWQgaGF2aW5nIHRvIHJlLWludmVudCBhY2Nlc3NpYmlsaXR5IGhhbmRsaW5nIG9uXG4gICAgICAgIC8vIGEgY3VzdG9tIHNldCBvZiBkaXZzLlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgdHlwZT1cInJhbmdlXCJcbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJteF9TZWVrQmFyXCJcbiAgICAgICAgICAgICAgICB0YWJJbmRleD17dGhpcy5wcm9wcy50YWJJbmRleH1cbiAgICAgICAgICAgICAgICBvbkNoYW5nZT17dGhpcy5vbkNoYW5nZX1cbiAgICAgICAgICAgICAgICBvbk1vdXNlRG93bj17dGhpcy5vbk1vdXNlRG93bn1cbiAgICAgICAgICAgICAgICBtaW49ezB9XG4gICAgICAgICAgICAgICAgbWF4PXsxfVxuICAgICAgICAgICAgICAgIHZhbHVlPXt0aGlzLnN0YXRlLnBlcmNlbnRhZ2V9XG4gICAgICAgICAgICAgICAgc3RlcD17MC4wMDF9XG4gICAgICAgICAgICAgICAgc3R5bGU9e3sgXCItLWZpbGxUb1wiOiB0aGlzLnN0YXRlLnBlcmNlbnRhZ2UgfSBhcyBJU2Vla0NTU31cbiAgICAgICAgICAgICAgICBkaXNhYmxlZD17dGhpcy5wcm9wcy5kaXNhYmxlZH1cbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPXtfdChcImExMXl8c2Vla19iYXJfbGFiZWxcIil9XG4gICAgICAgICAgICAvPlxuICAgICAgICApO1xuICAgIH1cbn1cbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFRQSxJQUFBQSxNQUFBLEdBQUFDLHNCQUFBLENBQUFDLE9BQUE7QUFHQSxJQUFBQyxnQkFBQSxHQUFBRCxPQUFBO0FBQ0EsSUFBQUUsUUFBQSxHQUFBRixPQUFBO0FBQ0EsSUFBQUcsZ0JBQUEsR0FBQUgsT0FBQTtBQWJBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQTZCQSxNQUFNSSxrQkFBa0IsR0FBRyxDQUFDLENBQUMsQ0FBQzs7QUFFZixNQUFNQyxPQUFPLFNBQVNDLGNBQUssQ0FBQ0MsYUFBYSxDQUFpQjtFQWM5REMsV0FBV0EsQ0FBQ0MsS0FBYSxFQUFFO0lBQzlCLEtBQUssQ0FBQ0EsS0FBSyxDQUFDO0lBZGhCO0lBQ0E7SUFBQSxJQUFBQyxnQkFBQSxDQUFBQyxPQUFBLDRCQUU0QyxJQUFJQyxnQ0FBZSxDQUMzRCxNQUFNLElBQUksQ0FBQ0MsUUFBUSxDQUFDLENBQUMsRUFDckIsTUFBTUMscUJBQXFCLENBQUMsTUFBTSxJQUFJLENBQUNDLGdCQUFnQixDQUFDQyxPQUFPLENBQUMsQ0FBQyxDQUNyRSxDQUFDO0lBQUEsSUFBQU4sZ0JBQUEsQ0FBQUMsT0FBQSxvQkFrQ21CTSxFQUFpQyxJQUFXO01BQzVEO01BQ0E7TUFDQTtNQUNBO01BQ0EsSUFBSSxDQUFDUixLQUFLLENBQUNTLFFBQVEsQ0FBQ0MsTUFBTSxDQUFDQyxNQUFNLENBQUNILEVBQUUsQ0FBQ0ksTUFBTSxDQUFDQyxLQUFLLENBQUMsR0FBRyxJQUFJLENBQUNiLEtBQUssQ0FBQ1MsUUFBUSxDQUFDSyxlQUFlLENBQUM7SUFDN0YsQ0FBQztJQUFBLElBQUFiLGdCQUFBLENBQUFDLE9BQUEsdUJBRXNCYSxLQUE0QyxJQUFXO01BQzFFO01BQ0FBLEtBQUssQ0FBQ0MsZUFBZSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQW5DRyxJQUFJLENBQUNDLEtBQUssR0FBRztNQUNUQyxVQUFVLEVBQUUsSUFBQUMscUJBQVksRUFBQyxJQUFJLENBQUNuQixLQUFLLENBQUNTLFFBQVEsQ0FBQ1csV0FBVyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUNwQixLQUFLLENBQUNTLFFBQVEsQ0FBQ0ssZUFBZTtJQUNwRyxDQUFDOztJQUVEO0lBQ0EsSUFBSSxDQUFDZCxLQUFLLENBQUNTLFFBQVEsQ0FBQ1ksUUFBUSxDQUFDQyxRQUFRLENBQUMsTUFBTSxJQUFJLENBQUNoQixnQkFBZ0IsQ0FBQ2lCLElBQUksQ0FBQyxDQUFDLENBQUM7RUFDN0U7RUFFUW5CLFFBQVFBLENBQUEsRUFBUztJQUNyQixJQUFJLENBQUNvQixRQUFRLENBQUM7TUFDVk4sVUFBVSxFQUFFLElBQUFDLHFCQUFZLEVBQUMsSUFBSSxDQUFDbkIsS0FBSyxDQUFDUyxRQUFRLENBQUNXLFdBQVcsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDcEIsS0FBSyxDQUFDUyxRQUFRLENBQUNLLGVBQWU7SUFDcEcsQ0FBQyxDQUFDO0VBQ047RUFFT1csSUFBSUEsQ0FBQSxFQUFTO0lBQ2hCO0lBQ0EsSUFBSSxDQUFDekIsS0FBSyxDQUFDUyxRQUFRLENBQUNDLE1BQU0sQ0FBQyxJQUFJLENBQUNWLEtBQUssQ0FBQ1MsUUFBUSxDQUFDVyxXQUFXLEdBQUd6QixrQkFBa0IsQ0FBQztFQUNwRjtFQUVPK0IsS0FBS0EsQ0FBQSxFQUFTO0lBQ2pCO0lBQ0EsSUFBSSxDQUFDMUIsS0FBSyxDQUFDUyxRQUFRLENBQUNDLE1BQU0sQ0FBQyxJQUFJLENBQUNWLEtBQUssQ0FBQ1MsUUFBUSxDQUFDVyxXQUFXLEdBQUd6QixrQkFBa0IsQ0FBQztFQUNwRjtFQWVPZ0MsTUFBTUEsQ0FBQSxFQUFjO0lBQ3ZCO0lBQ0E7SUFDQSxvQkFDSXRDLE1BQUEsQ0FBQWEsT0FBQSxDQUFBMEIsYUFBQTtNQUNJQyxJQUFJLEVBQUMsT0FBTztNQUNaQyxTQUFTLEVBQUMsWUFBWTtNQUN0QkMsUUFBUSxFQUFFLElBQUksQ0FBQy9CLEtBQUssQ0FBQytCLFFBQVM7TUFDOUJDLFFBQVEsRUFBRSxJQUFJLENBQUNBLFFBQVM7TUFDeEJDLFdBQVcsRUFBRSxJQUFJLENBQUNBLFdBQVk7TUFDOUJDLEdBQUcsRUFBRSxDQUFFO01BQ1BDLEdBQUcsRUFBRSxDQUFFO01BQ1B0QixLQUFLLEVBQUUsSUFBSSxDQUFDSSxLQUFLLENBQUNDLFVBQVc7TUFDN0JrQixJQUFJLEVBQUUsS0FBTTtNQUNaQyxLQUFLLEVBQUU7UUFBRSxVQUFVLEVBQUUsSUFBSSxDQUFDcEIsS0FBSyxDQUFDQztNQUFXLENBQWM7TUFDekRvQixRQUFRLEVBQUUsSUFBSSxDQUFDdEMsS0FBSyxDQUFDc0MsUUFBUztNQUM5QixjQUFZLElBQUFDLG1CQUFFLEVBQUMscUJBQXFCO0lBQUUsQ0FDekMsQ0FBQztFQUVWO0FBQ0o7QUFBQ0MsT0FBQSxDQUFBdEMsT0FBQSxHQUFBTixPQUFBO0FBQUEsSUFBQUssZ0JBQUEsQ0FBQUMsT0FBQSxFQTFFb0JOLE9BQU8sa0JBU0s7RUFDekJtQyxRQUFRLEVBQUUsQ0FBQztFQUNYTyxRQUFRLEVBQUU7QUFDZCxDQUFDIiwiaWdub3JlTGlzdCI6W119