Set device features on device initialization

Summary:
1. Identify if device supports screenshots/screen recording when it is created.
2. Disable screen recording/screenshot buttons when they are not supported

Reviewed By: passy

Differential Revision: D34611133

fbshipit-source-id: 82ad2d67e4af482d9becf7995187667b5d99bc36

desktop/flipper-ui-core/src/chrome/ScreenCaptureButtons.tsx

@@ -8,7 +8,7 @@
  */
 
 import {Button as AntButton, message} from 'antd';
-import React, {useState, useEffect, useCallback} from 'react';
+import React, {useState, useCallback} from 'react';
 import {capture, getCaptureLocation, getFileName} from '../utils/screenshot';
 import {CameraOutlined, VideoCameraOutlined} from '@ant-design/icons';
 import {useStore} from '../utils/useStore';
@@ -22,21 +22,8 @@ async function openFile(path: string) {
 export default function ScreenCaptureButtons() {
   const selectedDevice = useStore((state) => state.connections.selectedDevice);
   const [isTakingScreenshot, setIsTakingScreenshot] = useState(false);
-  const [isRecordingAvailable, setIsRecordingAvailable] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
 
-  useEffect(() => {
-    let canceled = false;
-    selectedDevice?.screenCaptureAvailable().then((result) => {
-      if (!canceled) {
-        setIsRecordingAvailable(result);
-      }
-    });
-    return () => {
-      canceled = true;
-    };
-  }, [selectedDevice]);
-
   const handleScreenshot = useCallback(() => {
     setIsTakingScreenshot(true);
     return capture(selectedDevice!)
@@ -87,7 +74,10 @@ export default function ScreenCaptureButtons() {
         title="Take Screenshot"
         type="ghost"
         onClick={handleScreenshot}
-        disabled={!selectedDevice}
+        disabled={
+          !selectedDevice ||
+          !selectedDevice.description.features.screenshotAvailable
+        }
         loading={isTakingScreenshot}
       />
       <AntButton
@@ -95,7 +85,10 @@ export default function ScreenCaptureButtons() {
         title="Make Screen Recording"
         type={isRecording ? 'primary' : 'ghost'}
         onClick={handleRecording}
-        disabled={!selectedDevice || !isRecordingAvailable}
+        disabled={
+          !selectedDevice ||
+          !selectedDevice.description.features.screenCaptureAvailable
+        }
         danger={isRecording}
       />
     </>

desktop/flipper-ui-core/src/chrome/VideoRecordingButton.tsx

@@ -25,14 +25,12 @@ 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 () => {
@@ -80,7 +78,6 @@ export default class VideoRecordingButton extends Component<Props, State> {
     }
   };
   render() {
-    const {recordingEnabled} = this.state;
     const {selectedDevice} = this.props;
     return (
       <Button
@@ -89,7 +86,10 @@ export default class VideoRecordingButton extends Component<Props, State> {
         pulse={this.state.recording}
         selected={this.state.recording}
         title="Make Screen Recording"
-        disabled={!selectedDevice || !recordingEnabled}
+        disabled={
+          !selectedDevice ||
+          !selectedDevice.description.features.screenCaptureAvailable
+        }
         type={this.state.recording ? 'danger' : 'primary'}>
         <Glyph
           name={this.state.recording ? 'stop-playback' : 'camcorder'}