Skip to content

Commit

Permalink
add react-player
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerader
jerader committed Nov 21, 2024
1 parent f70073a commit 5396da8
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 31 deletions.
1 change: 1 addition & 0 deletions protocol-designer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"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",
Expand Down
59 changes: 33 additions & 26 deletions protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useTranslation } from 'react-i18next'
import { css } from 'styled-components'
import { useLayoutEffect, useState } from 'react'
import ReactPlayer from 'react-player/lazy'
import { useState } from 'react'
import {
ALIGN_CENTER,
ALIGN_END,
Expand Down Expand Up @@ -61,16 +62,19 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
const [targetProps, tooltipProps] = useHoverTooltip({
placement: 'top',
})
const [asset, setAsset] = useState<string | null>(null)
const [loaded, setLoaded] = useState(false)
const [isBuffering, setIsBuffering] = useState(false)

useLayoutEffect(() => {
const videoAsset = ONBOARDING_ANIMATIONS[stepNumber]
setLoaded(false)
setAsset(videoAsset)
const timeout = setTimeout(() => setLoaded(true), 100)
return () => clearTimeout(timeout)
}, [stepNumber])
const handleBuffer = () => {

Check failure on line 67 in protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

View workflow job for this annotation

GitHub Actions / js checks 

Missing return type on function

Check failure on line 67 in protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

View workflow job for this annotation

GitHub Actions / js checks 

Missing return type on function
setIsBuffering(true)
console.log('Buffering...')
}

const handlePlay = () => {

Check failure on line 72 in protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

View workflow job for this annotation

GitHub Actions / js checks 

Missing return type on function

Check failure on line 72 in protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

View workflow job for this annotation

GitHub Actions / js checks 

Missing return type on function
if (isBuffering) {
setIsBuffering(false)
console.log('Buffering ended.')
}
}

return (
<Flex
Expand Down Expand Up @@ -142,29 +146,32 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
) : null}
</Flex>
</Flex>

<Flex
width="40%"
css={css`
opacity: ${loaded ? 1 : 0};
transition: opacity 0.5s ease-in-out;
`}
>
<video
preload="auto"
<Flex width="40%">
<Flex
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}`}
>
<source src={asset ?? ''} type="video/mp4" />
</video>
<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>
</Flex>
</Flex>
)
Expand Down
56 changes: 51 additions & 5 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.2.2:
deepmerge@^4.0.0, 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==
Expand Down Expand Up @@ -14752,6 +14752,11 @@ 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"
Expand Down Expand Up @@ -15385,7 +15390,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.0.0, memoize-one@^5.1.1:
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==
Expand Down Expand Up @@ -18549,6 +18554,11 @@ 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"
Expand Down Expand Up @@ -18608,6 +18618,17 @@ [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"
Expand Down Expand Up @@ -20526,7 +20547,16 @@ strict-uri-encode@^2.0.0:
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==

"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -20656,7 +20686,7 @@ stringify-object@^3.2.1:
is-obj "^1.0.1"
is-regexp "^1.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand All @@ -20677,6 +20707,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1:
version "7.1.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
Expand Down Expand Up @@ -22905,7 +22942,7 @@ worker-plugin@^5.0.0:
dependencies:
loader-utils "^1.1.0"

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -22932,6 +22969,15 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down

0 comments on commit 5396da8

Please sign in to comment.