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

Uppy plugin that captures video from display or application.

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/* eslint-disable react/jsx-props-no-spreading */
import { h, Component, Fragment } from 'preact';
import RecordButton from "./RecordButton.js";
import SubmitButton from "./SubmitButton.js";
import StopWatch from "./StopWatch.js";
import StreamStatus from "./StreamStatus.js";
import DiscardButton from "./DiscardButton.js";
import ScreenshotButton from './ScreenshotButton.js';
class RecorderScreen extends Component {
  constructor() {
    super(...arguments);
    this.videoElement = null;
  }
  componentWillUnmount() {
    const {
      onStop
    } = this.props;
    onStop();
  }
  render() {
    const {
      recording,
      stream: videoStream,
      recordedVideo,
      enableScreenshots,
      capturedScreenshotUrl
    } = this.props;
    const videoProps = {
      playsinline: true
    };

    // show stream
    if (recording || !recordedVideo && !recording) {
      videoProps.muted = true;
      videoProps.autoplay = true;
      videoProps.srcObject = videoStream;
    }

    // show preview
    if (recordedVideo && !recording) {
      videoProps.muted = false;
      videoProps.controls = true;
      videoProps.src = recordedVideo;

      // reset srcObject in dom. If not resetted, stream sticks in element
      if (this.videoElement) {
        this.videoElement.srcObject = null;
      }
    }
    return h("div", {
      className: "uppy uppy-ScreenCapture-container"
    }, h("div", {
      className: "uppy-ScreenCapture-mediaContainer"
    }, h(StreamStatus, this.props), capturedScreenshotUrl && !recording && !recordedVideo ? h("div", {
      className: "uppy-ScreenCapture-imageContainer"
    }, h("img", {
      src: capturedScreenshotUrl,
      className: "uppy-ScreenCapture-media",
      alt: "screenshotPreview"
    }))
    // eslint-disable-next-line jsx-a11y/media-has-caption
    : h("video", _extends({
      ref: videoElement => {
        this.videoElement = videoElement;
      },
      className: "uppy-ScreenCapture-media"
    }, videoProps)), h("div", null, h(StopWatch, this.props))), h("div", {
      className: "uppy-ScreenCapture-buttonContainer"
    }, recordedVideo || capturedScreenshotUrl ? h(Fragment, null, h(SubmitButton, this.props), h(DiscardButton, this.props)) : h(Fragment, null, enableScreenshots && !recording && h(ScreenshotButton, this.props), h(RecordButton, this.props))));
  }
}
export default RecorderScreen;