Merge branch 'dev' into feat/shorts-and-homeview

# Conflicts: # packages/atlas/src/views/viewer/HomeView.tsx
WRadoslaw · Feb 27, 2024 · 4b9e90d · 4b9e90d
2 parents b3bac02 + 1c203d1
commit 4b9e90d
Show file tree

Hide file tree

Showing 10 changed files with 387 additions and 286 deletions.
diff --git a/packages/atlas/src/MainLayout.tsx b/packages/atlas/src/MainLayout.tsx
@@ -45,6 +45,21 @@ const LoadablePlaygroundLayout = loadable(
 )
 
 export const MainLayout: FC = () => {
+  return (
+    <>
+      <CookiePopover />
+      <MiscUtils />
+      <Routes>
+        <Route path={BASE_PATHS.viewer + '/*'} element={<ViewerLayout />} />
+        <Route path={BASE_PATHS.legal + '/*'} element={<LegalLayout />} />
+        <Route path={BASE_PATHS.studio + '/*'} element={<LoadableStudioLayout />} />
+        <Route path={BASE_PATHS.playground + '/*'} element={<LoadablePlaygroundLayout />} />
+      </Routes>
+    </>
+  )
+}
+
+const MiscUtils = () => {
   useTimeMismatchWarning()
   const scrollPosition = useRef<number>(0)
   const location = useLocation()
@@ -111,15 +126,5 @@ export const MainLayout: FC = () => {
     }, parseInt(transitions.timings.routing) + ROUTING_ANIMATION_OFFSET)
   }, [location, cachedLocation, locationState, navigationType, clearOverlays])
 
-  return (
-    <>
-      <CookiePopover />
-      <Routes>
-        <Route path={BASE_PATHS.viewer + '/*'} element={<ViewerLayout />} />
-        <Route path={BASE_PATHS.legal + '/*'} element={<LegalLayout />} />
-        <Route path={BASE_PATHS.studio + '/*'} element={<LoadableStudioLayout />} />
-        <Route path={BASE_PATHS.playground + '/*'} element={<LoadablePlaygroundLayout />} />
-      </Routes>
-    </>
-  )
+  return null
 }
diff --git a/packages/atlas/src/components/MinimizedPlayer/MinimizedPlayer.tsx b/packages/atlas/src/components/MinimizedPlayer/MinimizedPlayer.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
 
 import { VideoPlayer, VideoPlayerProps } from '@/components/_video/VideoPlayer'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
@@ -30,23 +30,26 @@ export const MinimizedPlayer = forwardRef<HTMLVideoElement, MiniVideoProps>(
 
     const inView = isAllowed && mdMatch && !wasPausedOnTop ? isInView || forceExit || hasError : true
 
+    const actions = useMemo(
+      () => ({
+        onPause: () => {
+          setIsPaused(true)
+          videoPlayerProps.onPause?.()
+        },
+        onPlay: () => {
+          setIsPaused(false)
+          videoPlayerProps.onPlay?.()
+        },
+        onError: () => setHasError(true),
+        onMinimizedExit: () => setForceExit(true),
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [videoPlayerProps.onPlay, videoPlayerProps.onPause]
+    )
+
     return (
       <Wrapper isInView={inView}>
-        <VideoPlayer
-          ref={ref}
-          isMinimized={!inView}
-          onPause={() => {
-            setIsPaused(true)
-            videoPlayerProps.onPause?.()
-          }}
-          onPlay={() => {
-            setIsPaused(false)
-            videoPlayerProps.onPlay?.()
-          }}
-          onError={() => setHasError(true)}
-          onMinimizedExit={() => setForceExit(true)}
-          {...videoPlayerProps}
-        />
+        <VideoPlayer ref={ref} isMinimized={!inView} {...actions} {...videoPlayerProps} />
       </Wrapper>
     )
   }

diff --git a/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx b/packages/atlas/src/components/_auth/LogInModal/LogInModal.tsx
@@ -73,8 +73,8 @@ export const LogInModal = () => {
     } catch (error) {
       if (error.message === LogInErrors.ArtifactsNotFound) {
         displaySnackbar({
-          title: `We can't find ${atlasConfig.general.appName} membership associated with this email`,
-          description: `Make sure that you are using the same email that you used to create your membership on ${atlasConfig.general.appName}.`,
+          title: `We can't find ${atlasConfig.general.appName} membership associated with these credentials`,
+          description: `Make sure that you are using the same email and password that you used to create your membership on ${atlasConfig.general.appName}.`,
           iconType: 'error',
         })
         setError('email', { type: 'custom', message: 'Incorrect email or password.' })

diff --git a/packages/atlas/src/components/_video/VideoTile/VideoTile.tsx b/packages/atlas/src/components/_video/VideoTile/VideoTile.tsx
@@ -1,6 +1,11 @@
+import styled from '@emotion/styled'
 import { FC, memo, useState } from 'react'
 import useResizeObserver from 'use-resize-observer'
 
+import { FlexBox } from '@/components/FlexBox'
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
+import { square } from '@/styles'
+
 import { VideoTileContainer } from './VideoTile.styles'
 
 import { VideoThumbnail, VideoThumbnailProps } from '../VideoThumbnail'
@@ -62,6 +67,21 @@ export const VideoTile: FC<VideoTileProps> = memo(
       },
     })
 
+    if (loadingDetails) {
+      return (
+        <VideoTileContainer direction={direction} className={className}>
+          <StyledThumbnailSkeleton />
+          <FlexBox width="100%" gap={3}>
+            <AvatarSkeleton rounded width={32} height={32} />
+            <FlexBox gap={2} flow="column">
+              <SkeletonLoader width="90%" height={32} />
+              <SkeletonLoader width="40%" height={24} />
+            </FlexBox>
+          </FlexBox>
+        </VideoTileContainer>
+      )
+    }
+
     return (
       <VideoTileContainer direction={direction} className={className}>
         <VideoThumbnail
@@ -103,4 +123,15 @@ export const VideoTile: FC<VideoTileProps> = memo(
   }
 )
 
+const StyledThumbnailSkeleton = styled(SkeletonLoader)`
+  min-width: unset;
+  min-height: unset;
+  width: 100%;
+  aspect-ratio: 16/9;
+`
+
+const AvatarSkeleton = styled(SkeletonLoader)`
+  ${square(32)}
+`
+
 VideoTile.displayName = 'VideoTile'
diff --git a/packages/atlas/src/components/_video/VideoTileViewer/VideoTileViewer.tsx b/packages/atlas/src/components/_video/VideoTileViewer/VideoTileViewer.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react'
+import { FC, useCallback, useMemo } from 'react'
 import { useNavigate } from 'react-router'
 
 import { useBasicVideo } from '@/api/hooks/video'
@@ -44,17 +44,39 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({
 
   const channelHref = absoluteRoutes.viewer.channel(video?.channel.id)
 
-  const handleCopyVideoURLClick = useCallback(() => {
-    copyToClipboard(videoHref ? location.origin + videoHref : '', 'Video URL copied to clipboard')
-  }, [videoHref, copyToClipboard])
+  const contextMenuItems = useMemo(
+    () => [
+      {
+        nodeStart: <SvgActionLinkUrl />,
+        onClick: () => copyToClipboard(videoHref ? location.origin + videoHref : '', 'Video URL copied to clipboard'),
+        label: 'Copy video URL',
+      },
+    ],
+    [copyToClipboard, videoHref]
+  )
+
+  const isNft = !!video?.nft
+  const slots = useMemo(
+    () => ({
+      bottomRight: {
+        element: video?.duration ? (
+          <Pill variant="overlay" label={formatDurationShort(video?.duration)} title="Video duration" />
+        ) : null,
+      },
+      bottomLeft: isNft
+        ? {
+            element: <Pill label="NFT" variant="overlay" title="NFT" />,
+          }
+        : undefined,
+      center: {
+        element: <SvgIllustrativePlay />,
+        type: 'hover',
+      } as const,
+    }),
+    [isNft, video?.duration]
+  )
 
-  const contextMenuItems = [
-    {
-      nodeStart: <SvgActionLinkUrl />,
-      onClick: handleCopyVideoURLClick,
-      label: 'Copy video URL',
-    },
-  ]
+  const onAvatarClick = useCallback(() => navigate(channelHref), [channelHref, navigate])
 
   return (
     <VideoTile
@@ -63,29 +85,13 @@ export const VideoTileViewer: FC<VideoTileViewerProps> = ({
       detailsVariant={detailsVariant}
       videoHref={videoHref}
       channelHref={channelHref}
-      onChannelAvatarClick={() => navigate(channelHref)}
+      onChannelAvatarClick={onAvatarClick}
       loadingDetails={loading || !video}
       loadingThumbnail={isLoadingThumbnail}
       thumbnailUrls={thumbnailPhotoUrls}
       views={video?.viewsNum}
       createdAt={video?.createdAt}
-      slots={{
-        bottomRight: {
-          element: video?.duration ? (
-            <Pill variant="overlay" label={formatDurationShort(video?.duration)} title="Video duration" />
-          ) : null,
-        },
-        bottomLeft:
-          video && video?.nft
-            ? {
-                element: <Pill label="NFT" variant="overlay" title="NFT" />,
-              }
-            : undefined,
-        center: {
-          element: <SvgIllustrativePlay />,
-          type: 'hover',
-        },
-      }}
+      slots={slots}
       channelAvatarUrls={avatarPhotoUrls}
       loadingAvatar={isLoadingAvatar}
       channelTitle={video?.channel?.title}

diff --git a/packages/atlas/src/hooks/useGetAssetUrl.ts b/packages/atlas/src/hooks/useGetAssetUrl.ts
@@ -10,6 +10,7 @@ import { ConsoleLogger, DistributorEventEntry, SentryLogger, UserEventsLogger }
 import { withTimeout } from '@/utils/misc'
 
 const workingUrlMap = new Map<string, string>()
+const assetsWithNoDistributions: string[] = []
 
 export const getSingleAssetUrl = async (
   urls: string[] | null | undefined,
@@ -18,7 +19,7 @@ export const getSingleAssetUrl = async (
   timeout?: number,
   opts?: AssetTestOptions
 ): Promise<string | undefined> => {
-  if (!urls || !urls.length) {
+  if (!urls || !urls.length || (id && assetsWithNoDistributions.includes(id))) {
     return
   }
 
@@ -90,6 +91,7 @@ export const getSingleAssetUrl = async (
           urls,
           error,
         })
+        return undefined
       })
   })
 }
@@ -108,9 +110,12 @@ export const useGetAssetUrl = (urls: string[] | undefined | null, type: AssetTyp
       setUrl(undefined)
       setIsLoading(true)
       const resolvedUrl = await getSingleAssetUrl(urls, id, type, userBenchmarkTime.current ?? undefined, opts)
+
       setIsLoading(false)
       if (resolvedUrl) {
         setUrl(resolvedUrl)
+      } else if (id) {
+        assetsWithNoDistributions.push(id)
       }
     }
 

diff --git a/packages/atlas/src/utils/getVideoCodec.ts b/packages/atlas/src/utils/getVideoCodec.ts
@@ -22,7 +22,7 @@ async function fetchPartialContent(url: string, range: { start: number; end: num
 
 export const getVideoCodec = async (url: string): string => {
   const fetchRange = { start: 0, end: 8192 }
-  const arrayBuffer = await fetchPartialContent(url, fetchRange)
+  const arrayBuffer = await fetchPartialContent(url, fetchRange).catch(() => undefined)
   if (arrayBuffer) {
     try {
       arrayBuffer.fileStart = 0

diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled'
-import { FC, useEffect, useState } from 'react'
-import { useLocation } from 'react-router-dom'
+import { FC, useState } from 'react'
 
 import { useGetCuratedHompageVideosQuery } from '@/api/queries/__generated__/videos.generated'
 import { Section } from '@/components/Section/Section'
@@ -11,29 +10,15 @@ import { publicCryptoVideoFilter } from '@/config/contentFilter'
 import { useBreakpointKey } from '@/hooks/useBreakpointKey'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { useVideoGridRows } from '@/hooks/useVideoGridRows'
-import { getCorrectLoginModal } from '@/providers/auth/auth.helpers'
-import { useAuthStore } from '@/providers/auth/auth.store'
 import { DEFAULT_VIDEO_GRID, sizes } from '@/styles'
 import { createPlaceholderData } from '@/utils/data'
 import { InfiniteLoadingOffsets } from '@/utils/loading.contants'
 
 export const HomeView: FC = () => {
   const [hasMoreVideos, setHasMoreVideos] = useState(true)
-  const location = useLocation()
-  const {
-    actions: { setAuthModalOpenName },
-  } = useAuthStore()
-
   const headTags = useHeadTags()
   const { columns, fetchMore, tiles, loading, skipVideoIds } = useHomeVideos()
 
-  useEffect(() => {
-    if (location.state?.['redirectTo']) {
-      setAuthModalOpenName(getCorrectLoginModal())
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   return (
     <VideoContentTemplate>
       <ReferralsBanner />