Mount video only on active slide

WRadoslaw · Nov 13, 2023 · 38687b3 · 38687b3
1 parent dec6118
commit 38687b3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/packages/atlas/src/.env b/packages/atlas/src/.env
@@ -31,7 +31,8 @@ VITE_USERSNAP_ID=
 
 # Production env URLs
 VITE_PRODUCTION_ORION_AUTH_URL=https://auth.gleev.xyz/api/v1
-VITE_PRODUCTION_ORION_URL=https://orion.gleev.xyz/graphql
+VITE_PRODUCTION_ORION_URL=https://139.162.218.120.nip.io/orion/graphql
+#VITE_PRODUCTION_ORION_URL=https://orion.gleev.xyz/graphql
 VITE_PRODUCTION_QUERY_NODE_SUBSCRIPTION_URL=wss://orion.joystream.org/graphql
 VITE_PRODUCTION_NODE_URL=wss://rpc.joystream.org:9944
 VITE_PRODUCTION_FAUCET_URL=https://faucet.joystream.org/member-faucet/register

diff --git a/...tlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx b/...tlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx
@@ -20,6 +20,7 @@ import { Text } from '@/components/Text'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { DetailsContent } from '@/components/_nft/NftTile'
 import { BackgroundVideoPlayer } from '@/components/_video/BackgroundVideoPlayer'
+import { VideoPoster, VideoWrapper } from '@/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles'
 import { absoluteRoutes } from '@/config/routes'
 import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
 import { useDebounceValue } from '@/hooks/useDebounceValue'
@@ -161,20 +162,26 @@ export const NftCarouselDetails = ({
   return (
     <Container>
       <VideoContainer>
-        <BackgroundVideoPlayer
-          videoId={nft.video.id}
-          withFade={active ? debouncedActive : active}
-          playing={active ? debouncedActive : active}
-          muted={true}
-          onPause={() => setIsPaused(true)}
-          onPlay={() => setIsPaused(false)}
-          preload="auto"
-          src={mediaUrls ?? undefined}
-          poster={thumbnailUrls ?? undefined}
-          handleActions={active ? debouncedActive : active}
-          videoPlaytime={30}
-          onEnded={slideNext}
-        />
+        {!active ? (
+          <VideoWrapper>
+            <VideoPoster resolvedUrls={thumbnailUrls ?? undefined} type="cover" alt="" />
+          </VideoWrapper>
+        ) : (
+          <BackgroundVideoPlayer
+            videoId={nft.video.id}
+            withFade={active ? debouncedActive : active}
+            playing={active ? debouncedActive : active}
+            muted={true}
+            onPause={() => setIsPaused(true)}
+            onPlay={() => setIsPaused(false)}
+            preload="auto"
+            src={mediaUrls ?? undefined}
+            poster={thumbnailUrls ?? undefined}
+            handleActions={active ? debouncedActive : active}
+            videoPlaytime={30}
+            onEnded={slideNext}
+          />
+        )}
       </VideoContainer>
       <CSSTransition in={active} timeout={100} classNames={transitions.names.fade} unmountOnExit>
         <InformationContainer isPaused={isPaused}>