@uppy/screen-capture: migrate to TS

packages/@uppy/screen-capture/.npmignore

@@ -0,0 +1,2 @@
+
+tsconfig.*

packages/@uppy/screen-capture/src/RecordButton.jsx → packages/@uppy/screen-capture/src/RecordButton.tsx

@@ -1,9 +1,18 @@
+// 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
 import { h } from 'preact'
 
 /**
  * Control screen capture recording. Will show record or stop button.
  */
-export default function RecordButton ({ recording, onStartRecording, onStopRecording, i18n }) {
+export default function RecordButton({
+  recording,
+  onStartRecording,
+  onStopRecording,
+  i18n,
+}) {
   if (recording) {
     return (
       <button
@@ -14,7 +23,14 @@ export default function RecordButton ({ recording, onStartRecording, onStopRecor
         onClick={onStopRecording}
         data-uppy-super-focusable
       >
-        <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          className="uppy-c-icon"
+          width="100"
+          height="100"
+          viewBox="0 0 100 100"
+        >
           <rect x="15" y="15" width="70" height="70" />
         </svg>
       </button>
@@ -30,7 +46,14 @@ export default function RecordButton ({ recording, onStartRecording, onStopRecor
       onClick={onStartRecording}
       data-uppy-super-focusable
     >
-      <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100">
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        className="uppy-c-icon"
+        width="100"
+        height="100"
+        viewBox="0 0 100 100"
+      >
         <circle cx="50" cy="50" r="40" />
       </svg>
     </button>

packages/@uppy/screen-capture/src/RecorderScreen.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { h, Component, type ComponentChild } from 'preact'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
+import RecordButton from './RecordButton.tsx'
+import SubmitButton from './SubmitButton.tsx'
+import StopWatch from './StopWatch.tsx'
+import StreamStatus from './StreamStatus.tsx'
+
+import ScreenCapture, { type ScreenCaptureState } from './ScreenCapture.tsx'
+
+type RecorderScreenProps<M extends Meta, B extends Body> = {
+  onStartRecording: ScreenCapture<M, B>['startRecording']
+  onStopRecording: ScreenCapture<M, B>['stopRecording']
+  onStop: ScreenCapture<M, B>['stop']
+  onSubmit: ScreenCapture<M, B>['submit']
+  i18n: ScreenCapture<M, B>['i18n']
+  stream: ScreenCapture<M, B>['videoStream']
+} & ScreenCaptureState
+
+class RecorderScreen<M extends Meta, B extends Body> extends Component<
+  RecorderScreenProps<M, B>
+> {
+  videoElement: HTMLVideoElement | null
+
+  componentWillUnmount(): void {
+    const { onStop } = this.props
+    onStop()
+  }
+
+  render(): ComponentChild {
+    const { recording, stream: videoStream, recordedVideo } = this.props
+
+    const videoProps: {
+      muted?: boolean
+      autoplay?: boolean
+      playsinline?: boolean
+      controls?: boolean
+      src?: string
+      srcObject?: MediaStream | null
+    } = {
+      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 (
+      <div className="uppy uppy-ScreenCapture-container">
+        <div className="uppy-ScreenCapture-videoContainer">
+          <StreamStatus {...this.props} />
+          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          <video
+            ref={(videoElement) => {
+              this.videoElement = videoElement
+            }}
+            className="uppy-ScreenCapture-video"
+            {...videoProps}
+          />
+          <StopWatch {...this.props} />
+        </div>
+
+        <div className="uppy-ScreenCapture-buttonContainer">
+          <RecordButton {...this.props} />
+          <SubmitButton {...this.props} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default RecorderScreen