feat(app): livestream image capture button

app/src/assets/localization/en/run_details.json

@@ -21,6 +21,7 @@
   "cancel_run_module_info": "Additionally, any hardware modules used within the protocol will remain active and maintain their current states until deactivated.",
   "canceling_run": "Canceling Run",
   "canceling_run_dot": "canceling run...",
+  "capture_image": "Capture image",
   "clear_protocol": "Clear protocol",
   "clear_protocol_to_make_available": "Clear protocol from robot to make it available.",
   "close_door": "Close robot door",

app/src/pages/Desktop/LivestreamViewer/index.tsx

@@ -1,14 +1,22 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Chip } from '@opentrons/components'
+import {
+  Btn,
+  Chip,
+  COLORS,
+  Flex,
+  Icon,
+  StyledText,
+} from '@opentrons/components'
 
 import { useHlsVideo } from '/app/pages/Desktop/LivestreamViewer/hooks/useHlsVideo'
 import { useReportWindowDurationEvent } from '/app/pages/Desktop/LivestreamViewer/hooks/useReportWindowDurationEvent'
 import {
   LivestreamInfoScreen,
   useLivestreamInfoScreen,
 } from '/app/pages/Desktop/LivestreamViewer/LivestreamInfoScreen'
+import { useFeatureFlag } from '/app/redux/config'
 import { useCurrentRunId, useNotifyRunQuery } from '/app/resources/runs'
 
 import styles from './livestream.module.css'
@@ -19,6 +27,8 @@ export function LivestreamViewer(): JSX.Element {
   // We make UI affordances when a run has ended, even if it is un-currented.
   // The livestream viewer makes the assumption that it will not *initially* render
   // for a run that is already historical.
+  const { t } = useTranslation('run_details')
+
   const [retainedRunId, setRetainedRunId] = useState<string | null>(null)
   const currentRunId = useCurrentRunId({
     refetchInterval: RUN_POLLING_INTERVAL_MS,
@@ -44,6 +54,7 @@ export function LivestreamViewer(): JSX.Element {
     isCurrentRunLoading,
     videoError
   )
+  const liveStreamImageCaptureEnabled = useFeatureFlag('camera')
 
   useReportWindowDurationEvent(
     retainedRunId,
@@ -72,6 +83,19 @@ export function LivestreamViewer(): JSX.Element {
           </div>
         )}
       </div>
+      {infoScreenType == null && liveStreamImageCaptureEnabled && (
+        <Btn
+          className={styles.capture_image_button}
+          backgroundColor={COLORS.blue50}
+        >
+          <Flex className={styles.capture_image_button_text}>
+            <Icon name="camera" size="1rem" color={COLORS.white} />
+            <StyledText color={COLORS.white} desktopStyle="bodyDefaultSemiBold">
+              {t('capture_image')}
+            </StyledText>
+          </Flex>
+        </Btn>
+      )}
     </div>
   )
 }

app/src/pages/Desktop/LivestreamViewer/livestream.module.css

@@ -36,3 +36,16 @@
 .video_inactive {
   display: none;
 }
+
+.capture_image_button {
+  width: 100%;
+  height: 36px;
+  border-radius: var(--border-radius-8);
+}
+
+.capture_image_button_text {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+}