feat(protocol-designer): onboarding animations for ot-2 (#16958)

closes RQA-3677

Author: jerader

protocol-designer/src/assets/images/onboarding_animation_ot2_2.gif

@@ -45,6 +45,7 @@ export function AddMetadata(props: AddMetadataProps): JSX.Element | null {
   return (
     <HandleEnter onEnter={handleProceed}>
       <WizardBody
+        robotType={robotType}
         stepNumber={
           robotType === FLEX_ROBOT_TYPE
             ? FLEX_METADATA_WIZARD_STEP

protocol-designer/src/assets/images/onboarding_animation_ot2_3.gif

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -63,6 +64,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
   return (
     <HandleEnter onEnter={handleProceed}>
       <WizardBody
+        robotType={FLEX_ROBOT_TYPE}
         stepNumber={5}
         header={t('add_fixtures')}
         subHeader={t('fixtures_replace')}

protocol-designer/src/assets/images/onboarding_animation_ot2_4.gif

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import without from 'lodash/without'
 import { useLocation } from 'react-router-dom'
-
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
   Flex,
   SPACING,
@@ -43,6 +43,7 @@ export function SelectGripper(props: WizardTileProps): JSX.Element | null {
   return (
     <HandleEnter onEnter={handleProceed}>
       <WizardBody
+        robotType={FLEX_ROBOT_TYPE}
         stepNumber={3}
         header={t('add_gripper')}
         disabled={gripperStatus == null}

protocol-designer/src/pages/CreateNewProtocolWizard/AddMetadata.tsx

@@ -150,6 +150,7 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
   return (
     <HandleEnter onEnter={proceed}>
       <WizardBody
+        robotType={robotType}
         stepNumber={robotType === FLEX_ROBOT_TYPE ? 4 : 3}
         header={t('add_modules')}
         goBack={() => {

protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx

@@ -170,6 +170,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
       ) : null}
       <HandleEnter onEnter={handleProceed}>
         <WizardBody
+          robotType={robotType}
           stepNumber={2}
           header={page === 'add' ? t('add_pipette') : t('robot_pipettes')}
           subHeader={page === 'add' ? t('which_pipette') : undefined}

protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx

@@ -21,6 +21,7 @@ export function SelectRobot(props: WizardTileProps): JSX.Element {
   return (
     <HandleEnter onEnter={proceed}>
       <WizardBody
+        robotType={robotType}
         stepNumber={1}
         header={t('basics')}
         disabled={false}

protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 import { useState, useLayoutEffect } from 'react'
+import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
   ALIGN_END,
@@ -25,8 +26,10 @@ import four from '../../assets/images/onboarding_animation_4.webm'
 import five from '../../assets/images/onboarding_animation_5.webm'
 import six from '../../assets/images/onboarding_animation_6.webm'
 import { BUTTON_LINK_STYLE } from '../../atoms'
+import type { RobotType } from '@opentrons/shared-data'
 
 interface WizardBodyProps {
+  robotType: RobotType
   stepNumber: number
   header: string
   children: React.ReactNode
@@ -37,6 +40,21 @@ interface WizardBodyProps {
   tooltipOnDisabled?: string
 }
 
+const OT2_GIFS: Record<number, string> = {
+  2: new URL(
+    '../../assets/images/onboarding_animation_ot2_2.gif',
+    import.meta.url
+  ).href,
+  3: new URL(
+    '../../assets/images/onboarding_animation_ot2_3.gif',
+    import.meta.url
+  ).href,
+  4: new URL(
+    '../../assets/images/onboarding_animation_ot2_4.gif',
+    import.meta.url
+  ).href,
+}
+
 const ONBOARDING_ANIMATIONS: Record<number, string> = {
   1: one,
   2: two,
@@ -56,6 +74,7 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
     proceed,
     disabled = false,
     tooltipOnDisabled,
+    robotType,
   } = props
   const { t } = useTranslation('shared')
   const [targetProps, tooltipProps] = useHoverTooltip({
@@ -153,21 +172,33 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
           transition: opacity 0.5s ease-in-out;
         `}
       >
-        <video
-          preload="auto"
-          css={css`
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            border-radius: ${BORDERS.borderRadius16};
-          `}
-          autoPlay={true}
-          loop={false}
-          controls={false}
-          aria-label={`onboarding animation for page ${stepNumber}`}
-        >
-          <source src={asset ?? ''} type="video/mp4" />
-        </video>
+        {robotType === FLEX_ROBOT_TYPE || stepNumber === 1 ? (
+          <video
+            preload="auto"
+            css={css`
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: ${BORDERS.borderRadius16};
+            `}
+            autoPlay
+            loop={false}
+            controls={false}
+            aria-label={`onboarding animation for page ${stepNumber}`}
+          >
+            <source src={asset ?? ''} type="video/webm" />
+          </video>
+        ) : (
+          <img
+            src={OT2_GIFS[stepNumber]}
+            width="100%"
+            height="100%"
+            css={css`
+              object-fit: cover;
+              border-radius: ${BORDERS.borderRadius16};
+            `}
+          />
+        )}
       </Flex>
     </Flex>
   )