Release v4.13.2

Joystream · Nov 14, 2023 · 30a6fac · 30a6fac
2 parents 7b6caec + 92f8766
commit 30a6fac
Show file tree

Hide file tree

Showing 18 changed files with 178 additions and 177 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.13.2] - 2023-11-14
+
+### Changed
+
+- YPP payout date is moved to Tuesday
+- Account seed is now downloaded by default
+- Changed referrals list on referrals page
+
+### Fixed
+
+- Fixed performance issues on mobile devices
+- Fixed player styling on mobile devices
+- Fixed incorrect rewards on YPP dashboard tab
+
 ## [4.13.1] - 2023-11-09
 
 ### Fixed

diff --git a/packages/atlas/atlas.config.yml b/packages/atlas/atlas.config.yml
@@ -1,5 +1,5 @@
 general:
-  appName: Atlas # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here
+  appName: Gleev # Application name - used in the copy throughout the app, in index.html, open graph meta tags, etc. Don't use env variables here
   appDescription: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.' # Application description - used in index.html meta tags
   appTagline: 'The streaming platform empowering viewers, creators, and builders. Built on and operated by the Joystream blockchain and DAO.'
   appId: '$VITE_APP_ID' # App ID for Apps as first-class citizens

diff --git a/packages/atlas/package.json b/packages/atlas/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "4.13.1",
+  "version": "4.13.2",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
@@ -96,7 +96,7 @@
     "retry-axios": "^3.0.0",
     "scroll-lock": "^2.1.5",
     "subscriptions-transport-ws": "^0.11.0",
-    "swiper": "^9.1.1",
+    "swiper": "11.0.4",
     "twemoji": "^14.0.2",
     "use-draggable-scroll": "^0.1.0",
     "use-resize-observer": "^9.1.0",

diff --git a/packages/atlas/src/api/hooks/nfts.ts b/packages/atlas/src/api/hooks/nfts.ts
@@ -194,9 +194,6 @@ export const useFeaturedNftsVideos = () => {
     variables: {
       limit: 10,
       orderBy: [OwnedNftOrderByInput.VideoViewsNumDesc],
-      where: {
-        isFeatured_eq: true,
-      },
     },
   })
 

diff --git a/packages/atlas/src/assets/images/referrals-landing/referrals-list.webp b/packages/atlas/src/assets/images/referrals-landing/referrals-list.webp
diff --git a/packages/atlas/src/components/Avatar/Avatar.styles.ts b/packages/atlas/src/components/Avatar/Avatar.styles.ts
@@ -5,6 +5,7 @@ import styled from '@emotion/styled'
 import { SvgActionAddImage, SvgActionEdit, SvgIllustrativeFileFailed } from '@/assets/icons'
 import { SvgAvatarSilhouette } from '@/assets/illustrations'
 import { AssetImage } from '@/components/AssetImage'
+import { smallBadgeStyles } from '@/components/Badge'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { cVar, square, zIndex } from '@/styles'
 
@@ -171,3 +172,15 @@ export const StyledSvgIllustrativeFileFailed = styled(SvgIllustrativeFileFailed)
     fill: ${cVar('colorCoreNeutral100')};
   }
 `
+
+export const BadgeContainer = styled.div<{ 'data-badge': string | number | boolean | undefined }>`
+  display: ${(props) => (props['data-badge'] ? 'block' : 'contents')};
+  position: relative;
+  ${smallBadgeStyles}
+
+  &[data-badge]::after {
+    position: absolute;
+    right: -6px;
+    top: -6px;
+  }
+`
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',

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
@@ -20,8 +20,10 @@ 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'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
 import { getMemberAvatar } from '@/providers/assets/assets.helpers'
@@ -42,6 +44,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 +160,101 @@ export const NftCarouselDetails = ({
   }
 
   return (
-    <Container isActive={active}>
+    <Container>
       <VideoContainer>
-        <BackgroundVideoPlayer
-          videoId={nft.video.id}
-          withFade={active}
-          playing={active}
-          muted={true}
-          onPause={() => setIsPaused(true)}
-          onPlay={() => setIsPaused(false)}
-          preload="auto"
-          src={mediaUrls ?? undefined}
-          poster={thumbnailUrls ?? undefined}
-          handleActions={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>
-      {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>
   )
 }
diff --git a/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx b/packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
@@ -38,7 +38,7 @@ const SIGNUP_FORM_DATA_INITIAL_STATE: AccountFormData & MemberFormData = {
   avatar: undefined,
   captchaToken: undefined,
   confirmedTerms: false,
-  confirmedCopy: false,
+  allowDownload: true,
   memberId: '',
   referrerChannelId: undefined,
 }
@@ -248,7 +248,7 @@ export const SignUpModal = () => {
   )
 
   const handleCreateMemberOnSeedStepSubmit = useCallback(
-    async (mnemonic: string, confirmedCopy: boolean) => {
+    async (mnemonic: string, allowDownload: boolean) => {
       let handle = signUpFormData.current.handle
       let blob = signUpFormData.current.avatar?.blob
 
@@ -266,8 +266,8 @@ export const SignUpModal = () => {
 
       const memberData = {
         mnemonic,
+        allowDownload,
         handle,
-        confirmedCopy,
         avatar: blob ? { blob } : undefined,
       }
 
@@ -383,7 +383,7 @@ export const SignUpModal = () => {
           {...commonProps}
           onSeedSubmit={handleCreateMemberOnSeedStepSubmit}
           mnemonic={signUpFormData.current.mnemonic}
-          confirmedCopy={signUpFormData.current.confirmedCopy}
+          allowDownload={signUpFormData.current.allowDownload}
         />
       )}
       {currentStep === SignUpSteps.SignUpPassword && (