fc9ed65762
Summary:
Quick notes:
- This looks worse than it is. It adds mandatory parentheses to single argument lambdas. Lots of outrage on Twitter about it, personally I'm {emoji:1f937_200d_2642} about it.
- Space before function, e.g. `a = function ()` is now enforced. I like this because both were fine before.
- I added `eslint-config-prettier` to the config because otherwise a ton of rules conflict with eslint itself.
Close https://github.com/facebook/flipper/pull/915
Reviewed By: jknoxville
Differential Revision: D20594929
fbshipit-source-id: ca1c65376b90e009550dd6d1f4e0831d32cbff03
102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
/**
|
|
* 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, Glyph, colors} from '../ui';
|
|
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);
|
|
this.setState({
|
|
recording: true,
|
|
});
|
|
selectedDevice.startScreenCapture(videoPath).catch((e) => {
|
|
console.error('Screen recording failed:', e);
|
|
this.setState({
|
|
recording: false,
|
|
});
|
|
});
|
|
};
|
|
|
|
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={this.state.recording ? 'danger' : 'primary'}>
|
|
<Glyph
|
|
name={this.state.recording ? 'stop-playback' : 'camcorder'}
|
|
color={this.state.recording ? colors.red : colors.white}
|
|
variant="filled"
|
|
style={{marginRight: 8}}
|
|
/>
|
|
{this.state.recording ? 'Recording...' : 'Start Recording'}
|
|
</Button>
|
|
);
|
|
}
|
|
}
|