feat(app): add gripper release animation to gripper error recovery

Opentrons · Oct 23, 2024 · 39cbd14 · 39cbd14
1 parent 8fa129b
commit 39cbd14
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
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
@@ -48,4 +48,18 @@ describe('GripperReleaseLabware', () => {
 
     expect(mockHandleMotionRouting).toHaveBeenCalled()
   })
+
+  it('renders gripper animation', () => {
+    vi.mock('/app/assets/videos/error-recovery/Gripper_Release.webm', () => ({
+      default: 'mocked-animation-path.webm',
+    }))
+
+    render(props)
+
+    screen.getByRole('presentation', { hidden: true })
+    expect(screen.getByTestId('gripper-animation')).toHaveAttribute(
+      'src',
+      'mocked-animation-path.webm'
+    )
+  })
 })