add back fade-in and useLayoutEffect

protocol-designer/package.json

@@ -52,7 +52,6 @@
     "react-error-boundary": "^4.0.10",
     "react-hook-form": "7.49.3",
     "react-i18next": "14.0.0",
-    "react-player": "^2.16.0",
     "react-redux": "8.1.2",
     "redux": "4.0.5",
     "redux-actions": "2.2.1",

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

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
-import ReactPlayer from 'react-player/lazy'
-import { useState } from 'react'
+import { useState, useLayoutEffect } from 'react'
 import {
   ALIGN_CENTER,
   ALIGN_END,
@@ -62,17 +61,16 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
   const [targetProps, tooltipProps] = useHoverTooltip({
     placement: 'top',
   })
-  const [isBuffering, setIsBuffering] = useState(false)
+  const [asset, setAsset] = useState<string | null>(null)
+  const [loaded, setLoaded] = useState(false)
 
-  const handleBuffer = (): void => {
-    setIsBuffering(true)
-  }
-
-  const handlePlay = (): void => {
-    if (isBuffering) {
-      setIsBuffering(false)
-    }
-  }
+  useLayoutEffect(() => {
+    const videoAsset = ONBOARDING_ANIMATIONS[stepNumber]
+    setLoaded(false)
+    setAsset(videoAsset)
+    const timeout = setTimeout(() => setLoaded(true), 100)
+    return () => clearTimeout(timeout)
+  }, [stepNumber])
 
   return (
     <Flex
@@ -144,32 +142,28 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
           ) : null}
         </Flex>
       </Flex>
-      <Flex width="40%">
-        <Flex
+      <Flex
+        width="40%"
+        css={css`
+          opacity: ${loaded ? 1 : 0};
+          transition: opacity 0.5s ease-in-out;
+        `}
+      >
+        <video
+          preload="auto"
           css={css`
             width: 100%;
             height: 100%;
-            overflow: hidden;
-            position: relative;
             object-fit: cover;
             border-radius: ${BORDERS.borderRadius16};
           `}
+          autoPlay={true}
+          loop={false}
+          controls={false}
+          aria-label={`onboarding animation for page ${stepNumber}`}
         >
-          <ReactPlayer
-            width="100%"
-            height="100%"
-            url={ONBOARDING_ANIMATIONS[stepNumber]}
-            playing={true}
-            controls={false}
-            onBuffer={handleBuffer}
-            onPlay={handlePlay}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-            }}
-          />
-        </Flex>
+          <source src={asset ?? ''} type="video/mp4" />
+        </video>
       </Flex>
     </Flex>
   )

protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx

@@ -1,3 +1,4 @@
+import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
@@ -36,5 +37,6 @@ describe('WizardBody', () => {
     expect(props.proceed).toHaveBeenCalled()
     fireEvent.click(screen.getByRole('button', { name: 'Go back' }))
     expect(props.goBack).toHaveBeenCalled()
+    screen.getByLabelText('onboarding animation for page 1')
   })
 })

yarn.lock

@@ -9600,7 +9600,7 @@ deepmerge@^2.1.1:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
-deepmerge@^4.0.0, deepmerge@^4.2.2:
+deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -14752,11 +14752,6 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-load-script@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
-  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
-
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -15390,7 +15385,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-memoize-one@^5.0.0, memoize-one@^5.1.1:
+memoize-one@^5.0.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
@@ -18554,11 +18549,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-fast-compare@^3.0.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
-  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
-
 [email protected]:
   version "7.49.3"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.49.3.tgz#576a4567f8a774830812f4855e89f5da5830435c"
@@ -18618,17 +18608,6 @@ [email protected]:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
-react-player@^2.16.0:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"
-  integrity sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==
-  dependencies:
-    deepmerge "^4.0.0"
-    load-script "^1.0.0"
-    memoize-one "^5.1.1"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.0.1"
-
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.0.0.tgz#b99452144e8fe4acc77fa3d959a8c79e07a65084"