tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

CurrentTimeLabel.js (2414B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const {
      8  createRef,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 
     14 class CurrentTimeLabel extends PureComponent {
     15  static get propTypes() {
     16    return {
     17      addAnimationsCurrentTimeListener: PropTypes.func.isRequired,
     18      removeAnimationsCurrentTimeListener: PropTypes.func.isRequired,
     19      timeScale: PropTypes.object.isRequired,
     20    };
     21  }
     22 
     23  constructor(props) {
     24    super(props);
     25 
     26    this._ref = createRef();
     27 
     28    const { addAnimationsCurrentTimeListener } = props;
     29    this.onCurrentTimeUpdated = this.onCurrentTimeUpdated.bind(this);
     30 
     31    addAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
     32  }
     33 
     34  componentWillUnmount() {
     35    const { removeAnimationsCurrentTimeListener } = this.props;
     36    removeAnimationsCurrentTimeListener(this.onCurrentTimeUpdated);
     37  }
     38 
     39  onCurrentTimeUpdated(currentTime) {
     40    const { timeScale } = this.props;
     41    const text = formatStopwatchTime(currentTime - timeScale.zeroPositionTime);
     42    // onCurrentTimeUpdated is bound to requestAnimationFrame.
     43    // As to update the component too frequently has performance issue if React controlled,
     44    // update raw component directly. See Bug 1699039.
     45    this._ref.current.textContent = text;
     46  }
     47 
     48  render() {
     49    return dom.label({ className: "current-time-label", ref: this._ref });
     50  }
     51 }
     52 
     53 /**
     54 * Format a timestamp (in ms) as a mm:ss.mmm string.
     55 *
     56 * @param {number} time
     57 * @return {string}
     58 */
     59 function formatStopwatchTime(time) {
     60  // Format falsy values as 0
     61  if (!time) {
     62    return "00:00.000";
     63  }
     64 
     65  const sign = time < 0 ? "-" : "";
     66  let milliseconds = parseInt(Math.abs(time % 1000), 10);
     67  let seconds = parseInt(Math.abs(time / 1000) % 60, 10);
     68  let minutes = parseInt(Math.abs(time / (1000 * 60)), 10);
     69 
     70  minutes = minutes.toString().padStart(2, "0");
     71  seconds = seconds.toString().padStart(2, "0");
     72  milliseconds = milliseconds.toString().padStart(3, "0");
     73  return `${sign}${minutes}:${seconds}.${milliseconds}`;
     74 }
     75 
     76 module.exports = CurrentTimeLabel;