Adjust logic to the new version

WRadoslaw · Nov 13, 2023 · dec6118 · dec6118
1 parent 4bd5457
commit dec6118
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 81 deletions.
diff --git a/packages/atlas/src/components/Carousel/Carousel.styles.ts b/packages/atlas/src/components/Carousel/Carousel.styles.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
-import { SwiperOptions } from 'swiper'
 import { Swiper } from 'swiper/react'
+import { SwiperOptions } from 'swiper/types'
 
 import { Button } from '@/components/_buttons/Button'
 import { cVar, media, sizes, transitions, zIndex } from '@/styles'

diff --git a/packages/atlas/src/components/Carousel/Carousel.tsx b/packages/atlas/src/components/Carousel/Carousel.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
-import { Pagination } from 'swiper'
 import 'swiper/css'
+import { Navigation, Pagination } from 'swiper/modules'
 import { SwiperProps, SwiperSlide } from 'swiper/react'
 import { Swiper as SwiperType } from 'swiper/types'
 
@@ -15,7 +15,7 @@ export type CarouselProps = {
 } & SwiperProps
 
 const dotsProps = {
-  modules: [Pagination],
+  modules: [Pagination, Navigation],
   pagination: {
     clickable: true,
     bulletClass: 'bullet',
@@ -33,7 +33,6 @@ export const Carousel = ({
   return (
     <StyledSwiper
       navigation
-      cssMode
       minSlideWidth={minSlideWidth}
       {...(dotsVisible ? dotsProps : {})}
       {...swiperOptions}

diff --git a/...mponents/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts b/...mponents/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts
@@ -20,7 +20,7 @@ export const InformationContainer = styled.div<{ isPaused: boolean }>`
   }
 `
 
-export const Container = styled.div<{ isActive: boolean }>`
+export const Container = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;

diff --git a/...tlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx b/...tlas/src/components/NftCarousel/components/MarketplaceCarouselCard/NftCarouselDetails.tsx
@@ -22,6 +22,7 @@ import { DetailsContent } from '@/components/_nft/NftTile'
 import { BackgroundVideoPlayer } from '@/components/_video/BackgroundVideoPlayer'
 import { absoluteRoutes } from '@/config/routes'
 import { useBlockTimeEstimation } from '@/hooks/useBlockTimeEstimation'
+import { useDebounceValue } from '@/hooks/useDebounceValue'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
 import { getMemberAvatar } from '@/providers/assets/assets.helpers'
@@ -42,6 +43,7 @@ export const NftCarouselDetails = ({
   const [isPaused, setIsPaused] = useState(!active)
   const { convertBlockToMsTimestamp } = useBlockTimeEstimation()
   const nftStatus = getNftStatus(nft, nft?.video)
+  const debouncedActive = useDebounceValue(active, 500)
 
   const ownerAvatarUrls =
     nft.owner.__typename === 'NftOwnerChannel'
@@ -157,97 +159,95 @@ export const NftCarouselDetails = ({
   }
 
   return (
-    <Container isActive={active}>
+    <Container>
       <VideoContainer>
         <BackgroundVideoPlayer
           videoId={nft.video.id}
-          withFade={active}
-          playing={active}
+          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}
+          handleActions={active ? debouncedActive : active}
           videoPlaytime={30}
           onEnded={slideNext}
         />
       </VideoContainer>
-      {active && (
-        <CSSTransition in={active} timeout={100} classNames={transitions.names.fade} unmountOnExit>
-          <InformationContainer isPaused={isPaused}>
-            <DetailsContainer>
-              <AvatarGroup spreadAvatars avatarStrokeColor="transparent" avatars={avatars} />
-              <Text variant={smMatch ? 'h500' : 'h400'} as={smMatch ? 'h5' : 'h4'}>
-                <StyledLink to={absoluteRoutes.viewer.video(nft.video.id)}>{nftDetails.title}</StyledLink>
-              </Text>
-              <StatsContainer>
-                {nftDetails.buyNow && (
-                  <DetailsContent
-                    avoidIconStyling
-                    tileSize={smMatch ? 'big' : 'bigSmall'}
-                    caption="BUY NOW"
-                    content={nftDetails.buyNow}
-                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
-                    withDenomination
-                  />
-                )}
-                {nftDetails.topBid && (
-                  <DetailsContent
-                    avoidIconStyling
-                    tileSize={smMatch ? 'big' : 'bigSmall'}
-                    caption="TOP BID"
-                    content={nftDetails.topBid}
-                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
-                    withDenomination
-                  />
-                )}
-                {nftDetails.minBid && (
-                  <DetailsContent
-                    avoidIconStyling
-                    tileSize={smMatch ? 'big' : 'bigSmall'}
-                    caption="MIN BID"
-                    content={nftDetails.minBid}
-                    icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
-                    withDenomination
-                  />
-                )}
-                {nftStatus?.status === 'idle' && (
-                  <DetailsContent
-                    tileSize={smMatch ? 'big' : 'bigSmall'}
-                    caption="STATUS"
-                    content="Not for sale"
-                    secondary
-                    icon={<SvgActionNotForSale width={smMatch ? 24 : 16} height={smMatch ? 24 : 16} />}
-                  />
-                )}
+      <CSSTransition in={active} timeout={100} classNames={transitions.names.fade} unmountOnExit>
+        <InformationContainer isPaused={isPaused}>
+          <DetailsContainer>
+            <AvatarGroup spreadAvatars avatarStrokeColor="transparent" avatars={avatars} />
+            <Text variant={smMatch ? 'h500' : 'h400'} as={smMatch ? 'h5' : 'h4'}>
+              <StyledLink to={absoluteRoutes.viewer.video(nft.video.id)}>{nftDetails.title}</StyledLink>
+            </Text>
+            <StatsContainer>
+              {nftDetails.buyNow && (
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="BUY NOW"
+                  content={nftDetails.buyNow}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+              )}
+              {nftDetails.topBid && (
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="TOP BID"
+                  content={nftDetails.topBid}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+              )}
+              {nftDetails.minBid && (
+                <DetailsContent
+                  avoidIconStyling
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="MIN BID"
+                  content={nftDetails.minBid}
+                  icon={<JoyTokenIcon size={smMatch ? 24 : 16} variant="silver" />}
+                  withDenomination
+                />
+              )}
+              {nftStatus?.status === 'idle' && (
+                <DetailsContent
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="STATUS"
+                  content="Not for sale"
+                  secondary
+                  icon={<SvgActionNotForSale width={smMatch ? 24 : 16} height={smMatch ? 24 : 16} />}
+                />
+              )}
 
-                {timeLeft && (
-                  <DetailsContent
-                    tileSize={smMatch ? 'big' : 'bigSmall'}
-                    caption="AUCTION ENDS IN"
-                    content={timeLeft.split(':').map((tick, i) => {
-                      return (
-                        <>
-                          {i !== 0 ? (
-                            <Text as="span" color="colorText" variant={smMatch ? 'h500' : 'h400'}>
-                              :
-                            </Text>
-                          ) : null}
-                          <Text as="span" variant={smMatch ? 'h500' : 'h400'}>
-                            {tick}
+              {timeLeft && (
+                <DetailsContent
+                  tileSize={smMatch ? 'big' : 'bigSmall'}
+                  caption="AUCTION ENDS IN"
+                  content={timeLeft.split(':').map((tick, i) => {
+                    return (
+                      <>
+                        {i !== 0 ? (
+                          <Text as="span" color="colorText" variant={smMatch ? 'h500' : 'h400'}>
+                            :
                           </Text>
-                        </>
-                      )
-                    })}
-                  />
-                )}
-              </StatsContainer>
-            </DetailsContainer>
-          </InformationContainer>
-        </CSSTransition>
-      )}
+                        ) : null}
+                        <Text as="span" variant={smMatch ? 'h500' : 'h400'}>
+                          {tick}
+                        </Text>
+                      </>
+                    )
+                  })}
+                />
+              )}
+            </StatsContainer>
+          </DetailsContainer>
+        </InformationContainer>
+      </CSSTransition>
     </Container>
   )
 }