screenshot / screen recording buttons

Reviewed By: lblasa

Differential Revision: D47443316

fbshipit-source-id: 01a7d0d54cda8f8425bcbeb95047aa3aa5857cc8

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

@@ -14,15 +14,15 @@ import {CameraOutlined, VideoCameraOutlined} from '@ant-design/icons';
 import {useStore} from '../utils/useStore';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import {path} from 'flipper-plugin';
+import {NavbarButton} from '../sandy-chrome/Navbar';
 
 async function openFile(path: string) {
   getRenderHostInstance().flipperServer.exec('open-file', path);
 }
 
-export default function ScreenCaptureButtons() {
+export function NavbarScreenshotButton() {
   const selectedDevice = useStore((state) => state.connections.selectedDevice);
   const [isTakingScreenshot, setIsTakingScreenshot] = useState(false);
-  const [isRecording, setIsRecording] = useState(false);
 
   const handleScreenshot = useCallback(() => {
     setIsTakingScreenshot(true);
@@ -37,6 +37,24 @@ export default function ScreenCaptureButtons() {
       });
   }, [selectedDevice]);
 
+  return (
+    <NavbarButton
+      icon={CameraOutlined}
+      label="Screenshot"
+      onClick={handleScreenshot}
+      disabled={
+        !selectedDevice ||
+        !selectedDevice.description.features.screenshotAvailable
+      }
+      toggled={isTakingScreenshot}
+    />
+  );
+}
+
+export function NavbarScreenRecordButton() {
+  const selectedDevice = useStore((state) => state.connections.selectedDevice);
+  const [isRecording, setIsRecording] = useState(false);
+
   const handleRecording = useCallback(() => {
     if (!selectedDevice) {
       return;
@@ -68,29 +86,15 @@ export default function ScreenCaptureButtons() {
   }, [selectedDevice, isRecording]);
 
   return (
-    <>
-      <AntButton
-        icon={<CameraOutlined />}
-        title="Take Screenshot"
-        type="ghost"
-        onClick={handleScreenshot}
-        disabled={
-          !selectedDevice ||
-          !selectedDevice.description.features.screenshotAvailable
-        }
-        loading={isTakingScreenshot}
-      />
-      <AntButton
-        icon={<VideoCameraOutlined />}
-        title="Make Screen Recording"
-        type={isRecording ? 'primary' : 'ghost'}
-        onClick={handleRecording}
-        disabled={
-          !selectedDevice ||
-          !selectedDevice.description.features.screenCaptureAvailable
-        }
-        danger={isRecording}
-      />
-    </>
+    <NavbarButton
+      icon={VideoCameraOutlined}
+      label="Record"
+      onClick={handleRecording}
+      disabled={
+        !selectedDevice ||
+        !selectedDevice.description.features.screenCaptureAvailable
+      }
+      toggled={isRecording}
+    />
   );
 }