@uppy/screen-capture/lib/StopWatch.js

Uppy plugin that captures video from display or application.

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { h, Component } from 'preact';
function fmtMSS(s) {
  // eslint-disable-next-line no-return-assign, no-param-reassign
  return (s - (s %= 60)) / 60 + (s > 9 ? ':' : ':0') + s;
}
class StopWatch extends Component {
  constructor(props) {
    super(props);
    this.wrapperStyle = {
      width: '100%',
      height: '100%',
      display: 'flex'
    };
    this.overlayStyle = {
      position: 'absolute',
      width: '100%',
      height: '100%',
      background: 'black',
      opacity: 0.7
    };
    this.infoContainerStyle = {
      marginLeft: 'auto',
      marginRight: 'auto',
      marginTop: 'auto',
      marginBottom: 'auto',
      zIndex: 1,
      color: 'white'
    };
    this.infotextStyle = {
      marginLeft: 'auto',
      marginRight: 'auto',
      marginBottom: '1rem',
      fontSize: '1.5rem'
    };
    this.timeStyle = {
      display: 'block',
      fontWeight: 'bold',
      marginLeft: 'auto',
      marginRight: 'auto',
      fontSize: '3rem',
      fontFamily: 'Courier New'
    };
    this.timerRunning = false;
    this.state = {
      elapsedTime: 0
    };
  }
  startTimer() {
    this.timerTick();
    this.timerRunning = true;
  }
  resetTimer() {
    clearTimeout(this.timer);
    this.setState({
      elapsedTime: 0
    });
    this.timerRunning = false;
  }
  timerTick() {
    this.timer = setTimeout(() => {
      this.setState(state => ({
        elapsedTime: state.elapsedTime + 1
      }));
      this.timerTick();
    }, 1000);
  }
  render() {
    const {
      recording,
      i18n
    } = {
      ...this.props
    };
    const {
      elapsedTime
    } = this.state;

    // second to minutes and seconds
    const minAndSec = fmtMSS(elapsedTime);
    if (recording && !this.timerRunning) {
      this.startTimer();
    }
    if (!recording && this.timerRunning) {
      this.resetTimer();
    }
    if (recording) {
      return h("div", {
        style: this.wrapperStyle
      }, h("div", {
        style: this.overlayStyle
      }), h("div", {
        style: this.infoContainerStyle
      }, h("div", {
        style: this.infotextStyle
      }, i18n('recording')), h("div", {
        style: this.timeStyle
      }, minAndSec)));
    }
    return null;
  }
}
export default StopWatch;