🦀 CRT Marketplace minor fixes (Joystream#6159)

* Small fixes for landscape mobile * CRT marketplace related fixes
WRadoslaw · Apr 12, 2024 · 21df7a5 · 21df7a5
1 parent 039e984
commit 21df7a5
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 71 deletions.
diff --git a/...mponents/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts b/...mponents/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts
@@ -13,6 +13,7 @@ export const InformationContainer = styled.div<{ isPaused: boolean }>`
 
   ${media.sm} {
     width: fit-content;
+    max-width: 90%;
     position: absolute;
     margin: 0;
     opacity: ${({ isPaused }) => (isPaused ? 1 : 0.25)};

diff --git a/packages/atlas/src/components/_crt/CrtCard/CrtCard.tsx b/packages/atlas/src/components/_crt/CrtCard/CrtCard.tsx
@@ -31,9 +31,18 @@ export type CrtCardProps = {
   size?: 'medium' | 'small'
   status?: CrtSaleTypes
   isLoading?: boolean
+  className?: string
 } & CrtMainInfoProps
 
-export const CrtCard = ({ channelRevenue, marketCap, size, status, isLoading, ...mainInfoProps }: CrtCardProps) => {
+export const CrtCard = ({
+  channelRevenue,
+  marketCap,
+  size,
+  status,
+  isLoading,
+  className,
+  ...mainInfoProps
+}: CrtCardProps) => {
   const isSmall = size === 'small'
   const details = useMemo(() => {
     const baseDetails: {
@@ -55,7 +64,7 @@ export const CrtCard = ({ channelRevenue, marketCap, size, status, isLoading, ..
           <FlexBox alignItems="center" width="fit-content">
             <SvgActionNotForSale />
             <Text variant="h300" as="h3" color="colorText">
-              No active sale
+              No sale
             </Text>
           </FlexBox>
         ),
@@ -156,7 +165,7 @@ export const CrtCard = ({ channelRevenue, marketCap, size, status, isLoading, ..
   }
 
   return (
-    <FlexBox flow="column" gap={0}>
+    <FlexBox className={className} flow="column" gap={0}>
       <CrtMainInfo size={size} {...mainInfoProps}>
         <AvatarBox width="100%" justifyContent="space-between">
           <Avatar

diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
@@ -110,6 +110,12 @@ const SelectVideoDialog = ({ channelId, onVideoSelection, show, onClose }: Selec
         channel: {
           id_eq: channelId,
         },
+        media: {
+          isAccepted_eq: true,
+        },
+        thumbnailPhoto: {
+          isAccepted_eq: true,
+        },
       },
       limit: 5,
     },

diff --git a/packages/atlas/src/components/_navigation/SidenavBase/SidenavBase.tsx b/packages/atlas/src/components/_navigation/SidenavBase/SidenavBase.tsx
@@ -6,7 +6,9 @@ import { Text } from '@/components/Text'
 import { NavItem, NavItemType } from '@/components/_navigation/NavItem'
 import { atlasConfig } from '@/config'
 import { absoluteRoutes } from '@/config/routes'
+import { useIsLandscape } from '@/hooks/useIsLandscape'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
+import { useBottomNavStore } from '@/providers/bottomNav'
 import { useMiscStore } from '@/providers/misc/store'
 import { useOverlayManager } from '@/providers/overlayManager'
 import { transitions } from '@/styles'
@@ -50,8 +52,10 @@ const SidenavBase: FC<SidenavProps> = ({
   toggleSideNav,
   className,
 }) => {
+  const isLandscape = useIsLandscape()
   const scrollContainer = createRef<HTMLDivElement>()
   const setAdminModalOpen = useMiscStore((store) => store.actions.setAdminModalOpen)
+  const { setOpen } = useBottomNavStore((state) => ({ open: state.open, setOpen: state.actions.setOpen }))
   const { pathname } = useLocation()
   const mdMatch = useMediaMatch('md')
 
@@ -68,6 +72,12 @@ const SidenavBase: FC<SidenavProps> = ({
     }
   }, [decrementOverlaysOpenCount, expanded, incrementOverlaysOpenCount])
 
+  useEffect(() => {
+    if (expanded) {
+      setOpen(false)
+    }
+  }, [expanded, setOpen])
+
   return (
     <>
       <CSSTransition
@@ -103,59 +113,61 @@ const SidenavBase: FC<SidenavProps> = ({
           </SidebarNavList>
           <div>{additionalContent}</div>
         </ScrollContainer>
-        <CSSTransition
-          in={expanded}
-          unmountOnExit
-          timeout={parseInt(transitions.timings.loading)}
-          classNames={transitions.names.fade}
-        >
-          <SidebarNavFooter>
-            <ButtonGroup>{buttonsContent}</ButtonGroup>
-            <LinksWrapper>
-              <LinksRow>
-                <LegalLink to={absoluteRoutes.legal.termsOfService()} target="_blank">
-                  <Text as="span" variant="t100" color="inherit">
-                    Terms of Service
-                  </Text>
-                </LegalLink>
-                <Text as="span" variant="t100" color="inherit">
-                  •
-                </Text>
-                <LegalLink to={absoluteRoutes.legal.copyright()} target="_blank">
+        {!isLandscape ? (
+          <CSSTransition
+            in={expanded}
+            unmountOnExit
+            timeout={parseInt(transitions.timings.loading)}
+            classNames={transitions.names.fade}
+          >
+            <SidebarNavFooter>
+              <ButtonGroup>{buttonsContent}</ButtonGroup>
+              <LinksWrapper>
+                <LinksRow>
+                  <LegalLink to={absoluteRoutes.legal.termsOfService()} target="_blank">
+                    <Text as="span" variant="t100" color="inherit">
+                      Terms of Service
+                    </Text>
+                  </LegalLink>
                   <Text as="span" variant="t100" color="inherit">
-                    Copyright Policy
+                    •
                   </Text>
-                </LegalLink>
-              </LinksRow>
-              <LinksRow>
-                <LegalLink to={absoluteRoutes.legal.privacyPolicy()} target="_blank">
+                  <LegalLink to={absoluteRoutes.legal.copyright()} target="_blank">
+                    <Text as="span" variant="t100" color="inherit">
+                      Copyright Policy
+                    </Text>
+                  </LegalLink>
+                </LinksRow>
+                <LinksRow>
+                  <LegalLink to={absoluteRoutes.legal.privacyPolicy()} target="_blank">
+                    <Text as="span" variant="t100" color="inherit">
+                      Privacy Policy
+                    </Text>
+                  </LegalLink>
+                </LinksRow>
+                <LinksRow>
+                  <StyledAnchor href={atlasConfig.general.joystreamLandingPageUrl} target="_blank">
+                    <Text as="span" variant="t100" color="inherit">
+                      Powered by
+                    </Text>
+                    <StyledSvgJoystreamLogoFull />
+                  </StyledAnchor>
                   <Text as="span" variant="t100" color="inherit">
-                    Privacy Policy
+                    •
                   </Text>
-                </LegalLink>
-              </LinksRow>
-              <LinksRow>
-                <StyledAnchor href={atlasConfig.general.joystreamLandingPageUrl} target="_blank">
+                  <StyledAnchor href={atlasConfig.general.appGithubUrl} target="_blank">
+                    <StyledGhLogo />
+                  </StyledAnchor>
                   <Text as="span" variant="t100" color="inherit">
-                    Powered by
+                    •
                   </Text>
-                  <StyledSvgJoystreamLogoFull />
-                </StyledAnchor>
-                <Text as="span" variant="t100" color="inherit">
-                  •
-                </Text>
-                <StyledAnchor href={atlasConfig.general.appGithubUrl} target="_blank">
-                  <StyledGhLogo />
-                </StyledAnchor>
-                <Text as="span" variant="t100" color="inherit">
-                  •
-                </Text>
-                <StyledTextButton onClick={() => setAdminModalOpen(true)}>Admin Panel</StyledTextButton>
-                <StyledAnchor />
-              </LinksRow>
-            </LinksWrapper>
-          </SidebarNavFooter>
-        </CSSTransition>
+                  <StyledTextButton onClick={() => setAdminModalOpen(true)}>Admin Panel</StyledTextButton>
+                  <StyledAnchor />
+                </LinksRow>
+              </LinksWrapper>
+            </SidebarNavFooter>
+          </CSSTransition>
+        ) : null}
       </SidebarNav>
       {pathname !== absoluteRoutes.viewer.ypp() || mdMatch ? (
         <StyledHamburgerButton active={expanded} onClick={() => scrollAndToggle(!expanded)} />

diff --git a/packages/atlas/src/hooks/useCrtSectionFilters.tsx b/packages/atlas/src/hooks/useCrtSectionFilters.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 
 import { CreatorTokenOrderByInput, CreatorTokenWhereInput } from '@/api/queries/__generated__/baseTypes.generated'
-import { SvgActionSettings, SvgActionShoppingCart } from '@/assets/icons'
+import { SvgActionShoppingCart } from '@/assets/icons'
 import { FilterButtonOption, SectionFilter } from '@/components/FilterButton'
 
 export const CRT_STATUSES: FilterButtonOption[] = [
@@ -11,12 +11,12 @@ export const CRT_STATUSES: FilterButtonOption[] = [
     applied: false,
     label: 'On market',
   },
-  {
-    value: 'sale',
-    selected: false,
-    applied: false,
-    label: 'On sale',
-  },
+  // {
+  //   value: 'sale',
+  //   selected: false,
+  //   applied: false,
+  //   label: 'On sale',
+  // },
   {
     value: 'inactive',
     selected: false,
@@ -37,7 +37,7 @@ export const FILTERS: SectionFilter[] = [
     type: 'checkbox',
     options: CRT_STATUSES,
   },
-  { name: 'other', type: 'checkbox', options: OTHER_FILTERS, label: 'Other', icon: <SvgActionSettings /> },
+  // { name: 'other', type: 'checkbox', options: OTHER_FILTERS, label: 'Other', icon: <SvgActionSettings /> },
 ]
 
 export const SORTING_FILTERS = [

diff --git a/packages/atlas/src/hooks/useIsLandscape.ts b/packages/atlas/src/hooks/useIsLandscape.ts
@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { media } from '@/styles'
+
+export const useIsLandscape = () => {
+  const mediaQuery = window.matchMedia(media.landscape)
+  const [match, setMatch] = useState(mediaQuery.matches)
+
+  const handleChange = useCallback((event: MediaQueryListEvent) => {
+    setMatch(event.matches)
+  }, [])
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(media.landscape)
+    mediaQuery.addEventListener('change', handleChange)
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+    }
+  }, [handleChange])
+
+  return match
+}
diff --git a/packages/atlas/src/styles/media.ts b/packages/atlas/src/styles/media.ts
@@ -12,4 +12,5 @@ export const media = {
   lg: buildQuery(breakpoints.lg),
   xl: buildQuery(breakpoints.xl),
   xxl: buildQuery(breakpoints.xxl),
+  landscape: '(orientation: landscape) and (hover: none) and (pointer: coarse)',
 }
diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx
@@ -181,11 +181,18 @@ const DashboardTokenProgress = ({ token }: Pick<CrtDashboardMainTabProps, 'token
     : ''
 
   const currentMemberStep = useMemo((): number => {
-    if (!token.description) return 1
+    if (!(token.description || token.benefits.length || token.trailerVideo.length)) return 1
     if (!token.ammCurves.length && !token.sales.length) return 2
     if (!token.revenueShares.length) return 3
     return 4
-  }, [token.description, token.ammCurves.length, token.sales.length, token.revenueShares.length])
+  }, [
+    token.description,
+    token.benefits.length,
+    token.trailerVideo.length,
+    token.ammCurves.length,
+    token.sales.length,
+    token.revenueShares.length,
+  ])
 
   const getButtonForStep = useCallback(
     (stepNo: number) => {

diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx b/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled'
 import { FC, useState } from 'react'
 
 import { useNfts } from '@/api/hooks/nfts'
@@ -149,7 +150,11 @@ export const FeaturedNftsSection: FC = () => {
             }}
             contentProps={{
               type: 'carousel',
-              children: items.map((nft, idx) => <NftTileViewer isInCarousel nftId={nft.id} key={idx} />),
+              children: items.map((nft, idx) => (
+                <NftTileWrapper key={idx}>
+                  <NftTileViewer isInCarousel nftId={nft.id} />
+                </NftTileWrapper>
+              )),
               spaceBetween: mdMatch ? 24 : 16,
               breakpoints: responsive,
             }}
@@ -176,3 +181,8 @@ export const FeaturedNftsSection: FC = () => {
     </LimitedWidthContainer>
   )
 }
+
+const NftTileWrapper = styled.div`
+  min-height: 100%;
+  display: flex;
+`
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx b/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled'
 import BN from 'bn.js'
 
 import { CreatorTokenOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
@@ -20,19 +21,16 @@ export const MarketplaceCrtTab = () => {
     variables: {
       where: {
         isFeatured_eq: true,
-        trailerVideo_every: {
-          id_isNull: false,
-        },
       },
-      limit: 10,
       orderBy: CreatorTokenOrderByInput.CurrentAmmSaleMintedByAmmDesc,
     },
   })
 
+  const filteredTokens = data?.creatorTokens.filter((token) => !!token.trailerVideo.length).slice(0, 10) ?? []
+
   const featuredCrts =
-    data?.creatorTokens
-      .slice(5)
-      .map(({ id, symbol, channel, totalSupply, accountsNum, lastPrice, currentAmmSale, description, currentSale }) => {
+    filteredTokens.map(
+      ({ id, symbol, channel, totalSupply, accountsNum, lastPrice, currentAmmSale, description, currentSale }) => {
         const status: CrtSaleTypes = currentSale
           ? {
               type: 'sale' as const,
@@ -48,7 +46,7 @@ export const MarketplaceCrtTab = () => {
             }
 
         return (
-          <CrtCard
+          <StyledCrtCard
             key={id}
             status={status}
             symbol={symbol ?? 'N/A'}
@@ -63,11 +61,12 @@ export const MarketplaceCrtTab = () => {
             accountsNum={accountsNum}
           />
         )
-      }) ?? []
+      }
+    ) ?? []
 
   return (
     <>
-      <MarketplaceCarousel type="crt" crts={data?.creatorTokens.slice(6) ?? []} isLoading={loading} />
+      <MarketplaceCarousel type="crt" crts={filteredTokens ?? []} isLoading={loading} />
 
       {featuredCrts.length > 4 && (
         <Section
@@ -94,3 +93,7 @@ export const MarketplaceCrtTab = () => {
     </>
   )
 }
+
+const StyledCrtCard = styled(CrtCard)`
+  min-height: 100%;
+`