From 8afc1b67f3403c4cc03fb3e70dee76bf10435839 Mon Sep 17 00:00:00 2001 From: Pritesh Nandgaonkar Date: Thu, 14 Nov 2019 06:26:42 -0800 Subject: [PATCH] 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 --- package.json | 2 + src/chrome/ScreenCaptureButtons.tsx | 2 +- src/chrome/VideoRecordingButton.tsx | 90 +++++++++++++++++++++++++++++ yarn.lock | 19 ++++++ 4 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 src/chrome/VideoRecordingButton.tsx diff --git a/package.json b/package.json index 22d1a074d..93fd7d98a 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "@types/jest": "^24.0.16", "@types/lodash.debounce": "^4.0.6", "@types/lodash.isequal": "^4.5.5", + "@types/node": "^12.12.7", "@types/react": "16.9.11", "@types/react-dom": "^16.9.2", "@types/react-redux": "^7.1.5", @@ -156,6 +157,7 @@ "react-devtools-core": "^4.0.6", "react-dom": "^16.11.0", "react-emotion": "^9.2.6", + "react-player": "^1.14.1", "react-redux": "^7.1.1", "react-test-renderer": "^16.11.0", "react-transition-group": "^4.3.0", diff --git a/src/chrome/ScreenCaptureButtons.tsx b/src/chrome/ScreenCaptureButtons.tsx index fca931ae5..c9ccc07f4 100644 --- a/src/chrome/ScreenCaptureButtons.tsx +++ b/src/chrome/ScreenCaptureButtons.tsx @@ -37,7 +37,7 @@ type State = { capturingScreenshot: boolean; }; -async function openFile(path: string | null) { +export async function openFile(path: string | null) { if (!path) { return; } diff --git a/src/chrome/VideoRecordingButton.tsx b/src/chrome/VideoRecordingButton.tsx new file mode 100644 index 000000000..9537fffd7 --- /dev/null +++ b/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 { + 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 ( + + ); + } +} diff --git a/yarn.lock b/yarn.lock index 4d3a66d34..ea32ebcdf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1262,6 +1262,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.5.tgz#66103d2eddc543d44a04394abb7be52506d7f290" integrity sha512-KEjODidV4XYUlJBF3XdjSH5FWoMCtO0utnhtdLf1AgeuZLOrRbvmU/gaRCVg7ZaQDjVf3l84egiY0mRNe5xE4A== +"@types/node@^12.12.7": + version "12.12.7" + resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.7.tgz#01e4ea724d9e3bd50d90c11fd5980ba317d8fa11" + integrity sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w== + "@types/promise-retry@^1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@types/promise-retry/-/promise-retry-1.1.3.tgz#baab427419da9088a1d2f21bf56249c21b3dd43c" @@ -2974,6 +2979,11 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^4.0.0: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + defer-to-connect@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.0.2.tgz#4bae758a314b034ae33902b5aac25a8dd6a8633e" @@ -7004,6 +7014,15 @@ react-is@^16.9.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa" integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw== +react-player@^1.14.1: + version "1.14.1" + resolved "https://registry.yarnpkg.com/react-player/-/react-player-1.14.1.tgz#7fb57239daa7a539bbc1954cd14a537f0bd1244c" + integrity sha512-8tZ6P2YMRviEAtsD0E5kF03IXAyc7SlRwu6BUuu0NAkPjIqwEdXcRRh3JWp/m5mOsSsMH3KiGsKSieFraSMgtw== + dependencies: + deepmerge "^4.0.0" + load-script "^1.0.0" + prop-types "^15.7.2" + react-redux@^7.1.1: version "7.1.1" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.1.tgz#ce6eee1b734a7a76e0788b3309bf78ff6b34fa0a"