fix(app): add animations for stacker intervention modals (#19059)

# Overview
This replace the placeholders in stacker intervention modals with actual
stacker animations.

Author: ahiuchingau

app/src/organisms/InterventionModal/StackerEmptyInterventionContent.tsx

@@ -1,12 +1,10 @@
 import { css } from 'styled-components'
 
 import {
+  AnimationVideo,
   BORDERS,
-  Box,
-  COLORS,
   DIRECTION_COLUMN,
   Flex,
-  LegacyStyledText,
   SPACING,
 } from '@opentrons/components'
 import { useRunCurrentState } from '@opentrons/react-api-client'
@@ -15,6 +13,7 @@ import {
   getStackerLocationFromSlotName,
 } from '@opentrons/shared-data'
 
+import EmptyHopper from '/app/assets/videos/error-recovery/FlexStacker_EmptyHopper.webm'
 import { InterventionInfo } from '/app/molecules/InterventionModal/InterventionContent'
 
 import { InterventionCommandMessage } from './InterventionCommandMessage'
@@ -28,10 +27,7 @@ import type {
 
 const STACKER_IMAGE_STYLE = css`
   flex-direction: ${DIRECTION_COLUMN};
-  grid-gap: ${SPACING.spacing8};
-  padding: ${SPACING.spacing16};
-  background-color: ${COLORS.grey35};
-  border-radius: ${BORDERS.lineBorder};
+  border-radius: ${BORDERS.borderRadius16};
 `
 
 export interface StackerEmptyInterventionProps {
@@ -95,12 +91,9 @@ export function StackerEmptyInterventionContent({
           />
         </Flex>
         <Flex width="50%" css={STACKER_IMAGE_STYLE}>
-          <Box margin="0 auto" width="100%">
-            {/* TODO (chb, 04-30-2025): Replace this with proper empty content */}
-            <LegacyStyledText as="p">
-              {'Replace me with a Stacker Empty image/animation'}
-            </LegacyStyledText>
-          </Box>
+          <AnimationVideo role="presentation" width="100%">
+            <source src={EmptyHopper} data-testid="empty-animation" />
+          </AnimationVideo>
         </Flex>
       </Flex>
     </Flex>

app/src/organisms/InterventionModal/StackerFillInterventionContent.tsx

@@ -2,12 +2,10 @@ import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
 import {
+  AnimationVideo,
   BORDERS,
-  Box,
-  COLORS,
   DIRECTION_COLUMN,
   Flex,
-  LegacyStyledText,
   SPACING,
 } from '@opentrons/components'
 import { useRunCurrentState } from '@opentrons/react-api-client'
@@ -16,6 +14,7 @@ import {
   getStackerLocationFromSlotName,
 } from '@opentrons/shared-data'
 
+import FillHopper from '/app/assets/videos/error-recovery/FlexStacker_FillHopper.webm'
 import { InterventionInfo } from '/app/molecules/InterventionModal/InterventionContent'
 
 import { InterventionCommandMessage } from './InterventionCommandMessage'
@@ -28,11 +27,7 @@ import type {
 } from '@opentrons/shared-data'
 
 const STACKER_IMAGE_STYLE = css`
-  flex-direction: ${DIRECTION_COLUMN};
-  grid-gap: ${SPACING.spacing8};
-  padding: ${SPACING.spacing16};
-  background-color: ${COLORS.grey35};
-  border-radius: ${BORDERS.lineBorder};
+  border-radius: ${BORDERS.borderRadius16};
 `
 
 export interface StackerFillInterventionProps {
@@ -103,12 +98,9 @@ export function StackerFillInterventionContent({
           />
         </Flex>
         <Flex width="50%" css={STACKER_IMAGE_STYLE}>
-          <Box margin="0 auto" width="100%">
-            {/* TODO (chb, 04-30-2025): Replace this with proper fill content */}
-            <LegacyStyledText as="p">
-              {'Replace me with a Stacker Fill image/animation'}
-            </LegacyStyledText>
-          </Box>
+          <AnimationVideo role="presentation" width="100%">
+            <source src={FillHopper} data-testid="fill-animation" />
+          </AnimationVideo>
         </Flex>
       </Flex>
     </Flex>