Record and display videos

Summary:
This diff adds one more section in the Support Screen V2. This section records and displays the emulator screen. Right now the videos are stored at the very same location where our currently recorded videos are stored. For displaying them on UI I have used `react-player` dependency.

For the upload bit:

I will see how the exisiting e2e tests upload videos and if we can use their approach. Or else we can just upload videos on everstore and export its handle as part of flipper trace. The last resort can be to base64 encode it along with the trace.

Reviewed By: mweststrate

Differential Revision: D18460779

fbshipit-source-id: 8ddd51f59e5237a1a80f05bf90dfc3bead651143

src/chrome/VideoRecordingButton.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {Component} from 'react';
+import BaseDevice from '../devices/BaseDevice';
+import {Button} from 'flipper';
+import path from 'path';
+import os from 'os';
+
+type OwnProps = {
+  recordingFinished: (path: string | null) => void;
+};
+
+type StateFromProps = {
+  selectedDevice: BaseDevice | null | undefined;
+};
+
+type DispatchFromProps = {};
+
+type State = {
+  recording: boolean;
+  recordingEnabled: boolean;
+};
+type Props = OwnProps & StateFromProps & DispatchFromProps;
+
+export default class VideoRecordingButton extends Component<Props, State> {
+  state: State = {
+    recording: false,
+    recordingEnabled: true,
+  };
+
+  startRecording = async () => {
+    const {selectedDevice} = this.props;
+    if (!selectedDevice) {
+      return;
+    }
+
+    const flipperDirectory = path.join(os.homedir(), '.flipper');
+    const fileName = `screencap-${new Date()
+      .toISOString()
+      .replace(/:/g, '')}.mp4`;
+    const videoPath = path.join(flipperDirectory, fileName);
+    await selectedDevice.startScreenCapture(videoPath);
+    this.setState({
+      recording: true,
+    });
+  };
+
+  stopRecording = async () => {
+    const {selectedDevice} = this.props;
+    if (!selectedDevice) {
+      return;
+    }
+    const path = await selectedDevice.stopScreenCapture();
+    this.setState({
+      recording: false,
+    });
+    this.props.recordingFinished(path);
+  };
+
+  onRecordingClicked = () => {
+    if (this.state.recording) {
+      this.stopRecording();
+    } else {
+      this.startRecording();
+    }
+  };
+  render() {
+    const {recordingEnabled} = this.state;
+    const {selectedDevice} = this.props;
+    return (
+      <Button
+        compact={true}
+        onClick={this.onRecordingClicked}
+        pulse={this.state.recording}
+        selected={this.state.recording}
+        title="Make Screen Recording"
+        disabled={!selectedDevice || !recordingEnabled}
+        type="primary">
+        {this.state.recording ? 'Recording...' : 'Start Recording'}
+      </Button>
+    );
+  }
+}