feat(app): Add gripper release animation to Error Recovery (#16575)

Closes EXEC-790
Opentrons · Oct 23, 2024 · 2b7201d · 2b7201d
1 parent 57de055
commit 2b7201d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 1 deletion.
diff --git a/app/src/assets/videos/error-recovery/Gripper_Release.webm b/app/src/assets/videos/error-recovery/Gripper_Release.webm
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/GripperReleaseLabware.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/GripperReleaseLabware.tsx
@@ -7,6 +7,7 @@ import {
   RESPONSIVENESS,
   Flex,
   StyledText,
+  JUSTIFY_CENTER,
 } from '@opentrons/components'
 
 import { TwoColumn } from '/app/molecules/InterventionModal'
@@ -15,6 +16,8 @@ import { RECOVERY_MAP } from '/app/organisms/ErrorRecoveryFlows/constants'
 import { RecoveryFooterButtons } from './RecoveryFooterButtons'
 import { RecoverySingleColumnContentWrapper } from './RecoveryContentWrapper'
 
+import gripperReleaseAnimation from '/app/assets/videos/error-recovery/Gripper_Release.webm'
+
 import type { JSX } from 'react'
 import type { RecoveryContentProps } from '../types'
 
@@ -51,7 +54,20 @@ export function GripperReleaseLabware({
             heading={t('labware_released_from_current_height')}
           />
         </Flex>
-        <div>ANIMATION GOES HERE</div>
+        <Flex css={ANIMATION_CONTAINER_STYLE}>
+          <video
+            autoPlay={true}
+            loop={true}
+            controls={false}
+            role="presentation"
+            css={ANIMATION_STYLE}
+          >
+            <source
+              src={gripperReleaseAnimation}
+              data-testid="gripper-animation"
+            />
+          </video>
+        </Flex>
       </TwoColumn>
       <RecoveryFooterButtons
         primaryBtnOnClick={buildPrimaryOnClick}
@@ -70,3 +86,15 @@ const LEFT_COL_COPY_STYLE = css`
     gap: ${SPACING.spacing24};
   }
 `
+
+const ANIMATION_CONTAINER_STYLE = css`
+  justify-content: ${JUSTIFY_CENTER};
+  max-height: 13.25rem;
+`
+
+const ANIMATION_STYLE = css`
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: 27rem;
+    height: 18.75rem;
+  }
+`
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/__tests__/GripperReleaseLabware.test.tsx
@@ -9,6 +9,10 @@ import { clickButtonLabeled } from '/app/organisms/ErrorRecoveryFlows/__tests__/
 
 import type { Mock } from 'vitest'
 
+vi.mock('/app/assets/videos/error-recovery/Gripper_Release.webm', () => ({
+  default: 'mocked-animation-path.webm',
+}))
+
 const render = (props: React.ComponentProps<typeof GripperReleaseLabware>) => {
   return renderWithProviders(<GripperReleaseLabware {...props} />, {
     i18nInstance: i18n,
@@ -48,4 +52,14 @@ describe('GripperReleaseLabware', () => {
 
     expect(mockHandleMotionRouting).toHaveBeenCalled()
   })
+
+  it('renders gripper animation', () => {
+    render(props)
+
+    screen.getByRole('presentation', { hidden: true })
+    expect(screen.getByTestId('gripper-animation')).toHaveAttribute(
+      'src',
+      'mocked-animation-path.webm'
+    )
+  })
 })