@uppy/screen-capture: migrate to TS

[Murderlon]

No description provided.

[github-actions]

Diff output files

diff --git a/packages/@uppy/screen-capture/lib/RecorderScreen.js b/packages/@uppy/screen-capture/lib/RecorderScreen.js
index bb32f65..0141077 100644
--- a/packages/@uppy/screen-capture/lib/RecorderScreen.js
+++ b/packages/@uppy/screen-capture/lib/RecorderScreen.js
@@ -39,7 +39,7 @@ class RecorderScreen extends Component {
       videoProps.controls = true;
       videoProps.src = recordedVideo;
       if (this.videoElement) {
-        this.videoElement.srcObject = undefined;
+        this.videoElement.srcObject = null;
       }
     }
     return h(
diff --git a/packages/@uppy/screen-capture/lib/ScreenCapture.js b/packages/@uppy/screen-capture/lib/ScreenCapture.js
index 4aa86a4..508b68a 100644
--- a/packages/@uppy/screen-capture/lib/ScreenCapture.js
+++ b/packages/@uppy/screen-capture/lib/ScreenCapture.js
@@ -25,9 +25,30 @@ function isScreenRecordingSupported() {
 function getMediaDevices() {
   return window.MediaRecorder && navigator.mediaDevices;
 }
+const defaultOptions = {
+  displayMediaConstraints: {
+    video: {
+      width: 1280,
+      height: 720,
+      frameRate: {
+        ideal: 3,
+        max: 5,
+      },
+      cursor: "motion",
+      displaySurface: "monitor",
+    },
+  },
+  userMediaConstraints: {
+    audio: true,
+  },
+  preferredVideoMimeType: "video/webm",
+};
 export default class ScreenCapture extends UIPlugin {
   constructor(uppy, opts) {
-    super(uppy, opts);
+    super(uppy, {
+      ...defaultOptions,
+      ...opts,
+    });
     this.mediaDevices = getMediaDevices();
     this.protocol = location.protocol === "https:" ? "https" : "http";
     this.id = this.opts.id || "ScreenCapture";
@@ -35,28 +56,6 @@ export default class ScreenCapture extends UIPlugin {
     this.type = "acquirer";
     this.icon = ScreenRecIcon;
     this.defaultLocale = locale;
-    const defaultOptions = {
-      displayMediaConstraints: {
-        video: {
-          width: 1280,
-          height: 720,
-          frameRate: {
-            ideal: 3,
-            max: 5,
-          },
-          cursor: "motion",
-          displaySurface: "monitor",
-        },
-      },
-      userMediaConstraints: {
-        audio: true,
-      },
-      preferredVideoMimeType: "video/webm",
-    };
-    this.opts = {
-      ...defaultOptions,
-      ...opts,
-    };
     this.i18nInit();
     this.install = this.install.bind(this);
     this.setPluginState = this.setPluginState.bind(this);
@@ -158,6 +157,9 @@ export default class ScreenCapture extends UIPlugin {
       preferredVideoMimeType,
     } = this.opts;
     this.selectVideoStreamSource().then(videoStream => {
+      if (videoStream === false) {
+        throw new Error("No video stream available");
+      }
       if (
         preferredVideoMimeType && MediaRecorder.isTypeSupported(preferredVideoMimeType)
         && getFileTypeExtension(preferredVideoMimeType)
diff --git a/packages/@uppy/screen-capture/lib/ScreenRecIcon.js b/packages/@uppy/screen-capture/lib/ScreenRecIcon.js
index 98067f8..1c10952 100644
--- a/packages/@uppy/screen-capture/lib/ScreenRecIcon.js
+++ b/packages/@uppy/screen-capture/lib/ScreenRecIcon.js
@@ -1,5 +1,5 @@
 import { h } from "preact";
-export default (() => {
+export default function ScreenRecIcon() {
   return h(
     "svg",
     {
@@ -26,4 +26,4 @@ export default (() => {
       }),
     ),
   );
-});
+}
diff --git a/packages/@uppy/screen-capture/lib/StopWatch.js b/packages/@uppy/screen-capture/lib/StopWatch.js
index 9cc4932..bf7415e 100644
--- a/packages/@uppy/screen-capture/lib/StopWatch.js
+++ b/packages/@uppy/screen-capture/lib/StopWatch.js
@@ -1,10 +1,10 @@
 import { Component, h } from "preact";
+function fmtMSS(s) {
+  return (s - (s %= 60)) / 60 + (s > 9 ? ":" : ":0") + s;
+}
 class StopWatch extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      elapsedTime: 0,
-    };
     this.wrapperStyle = {
       width: "100%",
       height: "100%",
@@ -39,6 +39,9 @@ class StopWatch extends Component {
       fontSize: "3rem",
       fontFamily: "Courier New",
     };
+    this.state = {
+      elapsedTime: 0,
+    };
   }
   startTimer() {
     this.timerTick();
@@ -59,9 +62,6 @@ class StopWatch extends Component {
       this.timerTick();
     }, 1000);
   }
-  fmtMSS(s) {
-    return (s - (s %= 60)) / 60 + (s > 9 ? ":" : ":0") + s;
-  }
   render() {
     const {
       recording,
@@ -72,7 +72,7 @@ class StopWatch extends Component {
     const {
       elapsedTime,
     } = this.state;
-    const minAndSec = this.fmtMSS(elapsedTime);
+    const minAndSec = fmtMSS(elapsedTime);
     if (recording && !this.timerRunning) {
       this.startTimer();
     }
diff --git a/packages/@uppy/screen-capture/lib/StreamStatus.js b/packages/@uppy/screen-capture/lib/StreamStatus.js
index a0f6d43..b26a6f0 100644
--- a/packages/@uppy/screen-capture/lib/StreamStatus.js
+++ b/packages/@uppy/screen-capture/lib/StreamStatus.js
@@ -1,5 +1,5 @@
 import { h } from "preact";
-export default (_ref => {
+export default function StreamStatus(_ref) {
   let {
     streamActive,
     i18n,
@@ -66,4 +66,4 @@ export default (_ref => {
       }),
     ),
   );
-});
+}

[aduh95]

Given that we don't add any type, shouldn't we keep this file as .jsx?

[Murderlon]

I thought it would be nicer for the diff next time and easier for the next person to get started.

[aduh95]

The following seems to work just fine as long as you type the props as any:

Suggested change

	// TODO: remove this and type properly
	/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-nocheck
	/* eslint-disable @typescript-eslint/explicit-module-boundary-types */

Maybe it's better so we at least get type safety for HTML/Preact attributes?

[Murderlon]

I wouldn't for now as it still requires significant work for bigger UI plugins. We're down one person and everyone is part-time, I think we can justify this speed up, while not sacrificing user facing types.

[aduh95]

Output diff LGTM