From 6a204b21c36453d77577264fdc22a00c388682fc Mon Sep 17 00:00:00 2001
From: ikprk <i.koprek6@gmail.com>
Date: Sun, 26 May 2024 07:31:29 +0200
Subject: [PATCH 1/5] Initial shorts page

---
 .../BackgroundVideoPlayer.tsx                 |  26 +-
 .../BackgroundVideoPlayer/VideoProgress.tsx   |  15 +-
 packages/atlas/src/config/routes.ts           |   1 +
 packages/atlas/src/views/viewer/HomeView.tsx  |   2 +-
 .../views/viewer/ShortsView/ShortsView.tsx    | 237 ++++++++++++++++++
 .../src/views/viewer/ShortsView/index.ts      |   1 +
 .../atlas/src/views/viewer/ViewerLayout.tsx   |   2 +
 7 files changed, 275 insertions(+), 9 deletions(-)
 create mode 100644 packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
 create mode 100644 packages/atlas/src/views/viewer/ShortsView/index.ts

diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
index 2da75b69b7..c83a62e604 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
@@ -18,6 +18,8 @@ type BackgroundVideoPlayerProps = {
   withFade?: boolean
   src: string[]
   poster: string[]
+  onMuted?: (newState: boolean) => void
+  loop?: boolean
   customLink?: string
 } & Omit<VideoHTMLAttributes<HTMLVideoElement>, 'src' | 'poster'>
 
@@ -32,14 +34,16 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
   handleActions,
   videoPlaytime,
   videoId,
+  onMuted,
   withFade,
   customLink,
+  loop,
   ...props
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const [isPosterVisible, setIsPosterVisible] = useState(true)
   const [isPlaying, setIsPlaying] = useState(autoPlay)
-  const [isMuted, setIsMuted] = useState(true)
+  const [isMuted, setIsMuted] = useState(props.muted)
   const [canPlay, setCanPlay] = useState(false)
 
   const initialRender = useRef(true)
@@ -76,9 +80,12 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
     }
   }, [canPlay])
 
+  console.log('adf', playing, props.muted)
+
   useEffect(() => {
     // show poster again when src changes
     setIsPosterVisible(true)
+    console.log('effect')
     if (!videoRef.current || playing === undefined || !canPlay) {
       return
     }
@@ -97,9 +104,15 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
   }
 
   const handleEnded = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+    onEnded?.(e)
+
+    if (loop && videoRef.current) {
+      console.log('xd')
+      videoRef.current.currentTime = 0
+      return
+    }
     setIsPosterVisible(true)
     setIsPlaying(false)
-    onEnded?.(e)
   }
 
   return (
@@ -112,13 +125,18 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
             variant="tertiary"
           />
           <Button
-            onClick={() => setIsMuted((prev) => !prev)}
+            onClick={() => {
+              onMuted?.(!isMuted)
+              setIsMuted((prev) => !prev)
+            }}
             icon={isMuted ? <SvgActionSoundOff /> : <SvgActionSoundOn />}
             variant="tertiary"
           />
         </ButtonBox>
       )}
-      {playing && <VideoProgress video={videoRef.current} isPlaying={isPlaying} tick={10} limit={videoPlaytime} />}
+      {playing && (
+        <VideoProgress loop={loop} video={videoRef.current} isPlaying={isPlaying} tick={10} limit={videoPlaytime} />
+      )}
       <StyledFade withFade={withFade}>
         <StyledVideo
           resolvedVideoUrls={src}
diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx b/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx
index 76baec2b67..c959d1a4dd 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/VideoProgress.tsx
@@ -9,16 +9,23 @@ export type VideoProgressProps = {
   isPlaying?: boolean
   // limit in seconds for video play time
   limit?: number
+  loop?: boolean
 }
 
-export const VideoProgress = ({ tick, video, isPlaying, limit }: VideoProgressProps) => {
+export const VideoProgress = ({ tick, video, isPlaying, limit, loop }: VideoProgressProps) => {
   const [progress, setProgress] = useState(0)
+  const hasVideo = !!video
   useEffect(() => {
-    if ((isPlaying || typeof isPlaying === 'undefined') && video) {
+    if ((isPlaying || typeof isPlaying === 'undefined') && hasVideo) {
       const id = setInterval(() => {
-        const proccessedLimit = limit ? (limit < video.duration ? limit : video.duration) : video.duration
+        const proccessedLimit = limit ? Math.min(limit, video.duration) : video.duration
         if (limit && video.currentTime > proccessedLimit) {
           setProgress(1)
+          if (loop) {
+            video.currentTime = 0
+            video.play()
+            return
+          }
           video.currentTime = video.duration
           clearInterval(id)
           return
@@ -30,7 +37,7 @@ export const VideoProgress = ({ tick, video, isPlaying, limit }: VideoProgressPr
         clearInterval(id)
       }
     }
-  }, [isPlaying, limit, progress, tick, video, video?.duration])
+  }, [hasVideo, isPlaying, limit, loop, progress, tick, video, video?.duration])
 
   const width = useMemo(() => (progress ? `${progress * 100}%` : 1), [progress])
   return (
diff --git a/packages/atlas/src/config/routes.ts b/packages/atlas/src/config/routes.ts
index d5d4de3cc8..681ee408fd 100644
--- a/packages/atlas/src/config/routes.ts
+++ b/packages/atlas/src/config/routes.ts
@@ -29,6 +29,7 @@ export const relativeRoutes = {
     video: (id = ':id') => `video/${id}`,
   },
   viewer: {
+    shorts: () => 'shorts',
     curatorView: () => 'curator-view',
     curatorHomepage: () => 'curator-homepage',
     index: () => '',
diff --git a/packages/atlas/src/views/viewer/HomeView.tsx b/packages/atlas/src/views/viewer/HomeView.tsx
index 7e542dc926..2236b0dcc3 100644
--- a/packages/atlas/src/views/viewer/HomeView.tsx
+++ b/packages/atlas/src/views/viewer/HomeView.tsx
@@ -54,7 +54,7 @@ const StyledSection = styled(Section)`
   padding: ${sizes(8)} 0;
 `
 
-const useHomeVideos = () => {
+export const useHomeVideos = () => {
   const initialRowsToLoad = useVideoGridRows('main')
   const { data, loading } = useGetCuratedHompageVideosQuery({
     notifyOnNetworkStatusChange: true,
diff --git a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
new file mode 100644
index 0000000000..3f82b907f9
--- /dev/null
+++ b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
@@ -0,0 +1,237 @@
+import styled from '@emotion/styled'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useFullVideo } from '@/api/hooks/video'
+import { VideoOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
+import {
+  GetBasicVideosConnectionLightweightDocument,
+  useGetCuratedHompageVideosQuery,
+} from '@/api/queries/__generated__/videos.generated'
+import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
+import { BackgroundVideoPlayer } from '@/components/_video/BackgroundVideoPlayer'
+import { getPublicCryptoVideoFilter } from '@/config/contentFilter'
+import { absoluteRoutes } from '@/config/routes'
+import { useInfiniteVideoGrid } from '@/hooks/useInfiniteVideoGrid'
+import { media } from '@/styles'
+import { createPlaceholderData } from '@/utils/data'
+
+export const ShortsView = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [forceMuted, setForceMuted] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [nextSlide, setNextSlide] = useState<Element | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+  const { fetchMore, tiles, loading, pageInfo } = useHomeVideos()
+
+  useEffect(() => {
+    const options = {
+      root: containerRef.current,
+      rootMargin: '0px',
+      threshold: 0.5, // Adjust as needed to determine what constitutes "on screen"
+    }
+
+    observerRef.current = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const newIndex = Number(entry.target.dataset.index)
+          setActiveIndex(newIndex)
+          setNextSlide(entries[newIndex + 1].target)
+
+          if (tiles.length - newIndex < 2) {
+            console.log('try fetch')
+            if (!loading) {
+              fetchMore({
+                variables: { first: 4 * 4, after: pageInfo?.endCursor },
+              })
+            }
+          }
+        }
+      })
+    }, options)
+
+    const placeholders = containerRef.current?.querySelectorAll('.short-video') ?? []
+    placeholders.forEach((placeholder) => observerRef.current?.observe(placeholder))
+
+    return () => {
+      placeholders.forEach((placeholder) => observerRef.current?.unobserve(placeholder))
+      observerRef.current?.disconnect()
+    }
+  }, [activeIndex, fetchMore, loading, pageInfo?.endCursor, tiles.length])
+  console.log('enext', nextSlide)
+  const goNextSlide = useCallback(() => {
+    console.log(nextSlide, 'scroll')
+    nextSlide?.scrollIntoView({ behavior: 'smooth' })
+  }, [nextSlide])
+
+  return (
+    <Container ref={containerRef}>
+      {tiles.map(({ id }, idx) => (
+        <ShortVideoPlaceholder
+          key={idx}
+          data-index={idx}
+          className={`short-video ${idx === activeIndex ? 'active' : ''} ${
+            activeIndex > idx && idx > activeIndex - 2 ? 'prev' : ''
+          } ${activeIndex < idx && idx < activeIndex + 2 ? 'next' : ''}`}
+        >
+          {!id || activeIndex - 1 > idx || activeIndex + 2 < idx ? (
+            <div style={{ height: '100%', background: 'red', width: 400, aspectRatio: '9/16' }} />
+          ) : (
+            <ShortVideoPlayer
+              forceMuted={forceMuted}
+              setForceMuted={setForceMuted}
+              videoId={id}
+              isActive={idx === activeIndex}
+              playNext={goNextSlide}
+            />
+          )}
+        </ShortVideoPlaceholder>
+      ))}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  gap: 40px;
+  height: 100%;
+  scroll-snap-type: y mandatory;
+  align-items: center;
+  scrollbar-width: none;
+  width: 100%;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const ShortVideoPlaceholder = styled.div`
+  display: grid;
+  place-items: center;
+  aspect-ratio: 9/16;
+
+  /* background-color: green; */
+  max-height: 90%;
+  width: 400px;
+  text-align: center;
+  vertical-align: middle;
+  scroll-snap-stop: always;
+  scroll-snap-align: center;
+
+  ${media.xxl} {
+    width: 40vw;
+    height: 100%;
+  }
+`
+
+const ShortVideoPlayer = ({
+  videoId,
+  isActive,
+  forceMuted,
+  playNext,
+  setForceMuted,
+}: {
+  isActive: boolean
+  videoId: string
+  forceMuted: boolean
+  setForceMuted: (val: boolean) => void
+  playNext: () => void
+}) => {
+  const { video, loading } = useFullVideo(videoId)
+  const thumbnailUrls: string[] = video?.thumbnailPhoto?.resolvedUrls ?? []
+  const mediaUrls: string[] = video?.media?.resolvedUrls ?? []
+  const isLoading = loading
+  console.log(loading)
+  return (
+    <ShortVideoPlayerBox>
+      {!isLoading ? (
+        <StyledBackgroundVideoPlayer
+          videoId={videoId}
+          playing={isActive}
+          muted={forceMuted}
+          onMuted={setForceMuted}
+          preload="metadata"
+          withFade
+          src={mediaUrls ?? undefined}
+          poster={[] ?? undefined}
+          handleActions={isActive}
+          videoPlaytime={10}
+          loop
+          onEnded={playNext}
+          customLink={absoluteRoutes.viewer.video(videoId)}
+        />
+      ) : (
+        <SkeletonLoader height="100%" width={400} />
+        // <VideoWrapper>
+        //   <VideoPoster resolvedUrls={thumbnailUrls ?? undefined} type="cover" alt="" />
+        // </VideoWrapper>
+      )}
+    </ShortVideoPlayerBox>
+  )
+}
+
+const ShortVideoPlayerBox = styled.div`
+  aspect-ratio: 9/16;
+
+  /* background-color: green; */
+  min-height: 90%;
+  max-height: 100%;
+  width: 100%;
+  position: relative;
+  scroll-snap-stop: always;
+  scroll-snap-align: center;
+  border: 1px solid red;
+  overflow: hidden;
+
+  ${media.xxl} {
+    width: 40vw;
+  }
+`
+
+const StyledBackgroundVideoPlayer = styled(BackgroundVideoPlayer)``
+
+export const useHomeVideos = () => {
+  const { data, loading } = useGetCuratedHompageVideosQuery({
+    notifyOnNetworkStatusChange: true,
+    variables: {
+      where: getPublicCryptoVideoFilter({
+        orionLanguage_in: undefined,
+        includeInHomeFeed_eq: true,
+        isShort_not_eq: undefined,
+        isShortDerived_isNull: undefined,
+        isShort_eq: true,
+      }),
+      skipVideoIds: ['-1'],
+    },
+  })
+  const avoidIds = data?.dumbPublicFeedVideos ? data.dumbPublicFeedVideos?.map((video) => video.id) : undefined
+  const { columns, fetchMore, pageInfo, tiles } = useInfiniteVideoGrid({
+    query: GetBasicVideosConnectionLightweightDocument,
+    variables: {
+      where: getPublicCryptoVideoFilter({
+        id_not_in: avoidIds,
+        isShort_not_eq: undefined,
+        isShortDerived_isNull: undefined,
+        isShort_eq: true,
+      }),
+      orderBy: VideoOrderByInput.VideoRelevanceDesc,
+    },
+    options: {
+      skip: !avoidIds,
+    },
+  })
+
+  const firstLoad = !data?.dumbPublicFeedVideos && loading
+  const firstLoadPlaceholders = firstLoad ? createPlaceholderData(columns * 3) : []
+
+  const displayedItems = [...(data?.dumbPublicFeedVideos || []), ...(tiles || [])]
+
+  return {
+    tiles: [...firstLoadPlaceholders, ...displayedItems],
+    fetchMore,
+    columns,
+    loading,
+    pageInfo,
+  }
+}
diff --git a/packages/atlas/src/views/viewer/ShortsView/index.ts b/packages/atlas/src/views/viewer/ShortsView/index.ts
new file mode 100644
index 0000000000..5e0b49f8c6
--- /dev/null
+++ b/packages/atlas/src/views/viewer/ShortsView/index.ts
@@ -0,0 +1 @@
+export * from './ShortsView'
diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx
index 1d2bee806b..0c3ed04591 100644
--- a/packages/atlas/src/views/viewer/ViewerLayout.tsx
+++ b/packages/atlas/src/views/viewer/ViewerLayout.tsx
@@ -46,6 +46,7 @@ const SearchView = lazy(() => import('./SearchView').then((module) => ({ default
 const CuratorView = lazy(() => import('./CuratorView').then((module) => ({ default: module.CuratorView })))
 const CuratorHomepage = lazy(() => import('./CuratorHomepage').then((module) => ({ default: module.CuratorHomepage })))
 const VideoView = lazy(() => import('./VideoView').then((module) => ({ default: module.VideoView })))
+const ShortsView = lazy(() => import('./ShortsView').then((module) => ({ default: module.ShortsView })))
 const PortfolioView = lazy(() => import('./PortfolioView').then((module) => ({ default: module.PortfolioView })))
 const ReferralsView = lazy(() =>
   import('@/views/global/ReferralsView').then((module) => ({ default: module.ReferralsView }))
@@ -62,6 +63,7 @@ const viewerRoutes = [
   { path: relativeRoutes.viewer.category(), element: <CategoryView /> },
   { path: relativeRoutes.viewer.memberById(), element: <MemberView /> },
   { path: relativeRoutes.viewer.member(), element: <MemberView /> },
+  { path: relativeRoutes.viewer.shorts(), element: <ShortsView /> },
   { path: relativeRoutes.viewer.marketplace(), element: <MarketplaceView /> },
   ...(atlasConfig.features.ypp.googleConsoleClientId
     ? [

From 7716931f305b3f8bfef82051ccfacf66be863b53 Mon Sep 17 00:00:00 2001
From: ikprk <i.koprek6@gmail.com>
Date: Sun, 26 May 2024 09:16:58 +0200
Subject: [PATCH 2/5] Add video details

---
 .../_channel/ChannelLink/ChannelLink.tsx      | 12 ++-
 .../BackgroundVideoPlayer.styles.ts           |  1 +
 .../BackgroundVideoPlayer.tsx                 |  4 -
 .../views/viewer/ShortsView/ShortsView.tsx    | 95 +++++++++++++------
 4 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
index f032cdff80..e4a711c3c3 100644
--- a/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
+++ b/packages/atlas/src/components/_channel/ChannelLink/ChannelLink.tsx
@@ -105,7 +105,15 @@ export const ChannelLink: FC<ChannelLinkProps> = ({
   )
 }
 
-const FollowButton = ({ title, channelId }: { title?: string; channelId?: string }) => {
+export const FollowButton = ({
+  title,
+  channelId,
+  isSmall,
+}: {
+  title?: string
+  channelId?: string
+  isSmall?: boolean
+}) => {
   const { toggleFollowing, isFollowing } = useHandleFollowChannel(channelId, title)
   const handleFollowButtonClick = (e: MouseEvent) => {
     e.preventDefault()
@@ -115,7 +123,7 @@ const FollowButton = ({ title, channelId }: { title?: string; channelId?: string
   return (
     <FollowButtonWrapper>
       <ProtectedActionWrapper title="You want to follow this channel?" description={`Sign in to follow ${title}`}>
-        <Button variant="secondary" onClick={handleFollowButtonClick}>
+        <Button variant="secondary" size={isSmall ? 'small' : 'medium'} onClick={handleFollowButtonClick}>
           {isFollowing ? 'Unfollow' : 'Follow'}
         </Button>
       </ProtectedActionWrapper>
diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts
index 42fa1e7b64..f5371d4d0e 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.styles.ts
@@ -47,6 +47,7 @@ export const ButtonBox = styled.div`
   z-index: ${zIndex.modals};
   display: flex;
   gap: ${sizes(2)};
+  flex-direction: column-reverse;
 
   ${media.sm} {
     bottom: 32px;
diff --git a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
index c83a62e604..e271b6e5fe 100644
--- a/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
+++ b/packages/atlas/src/components/_video/BackgroundVideoPlayer/BackgroundVideoPlayer.tsx
@@ -80,12 +80,9 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
     }
   }, [canPlay])
 
-  console.log('adf', playing, props.muted)
-
   useEffect(() => {
     // show poster again when src changes
     setIsPosterVisible(true)
-    console.log('effect')
     if (!videoRef.current || playing === undefined || !canPlay) {
       return
     }
@@ -107,7 +104,6 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
     onEnded?.(e)
 
     if (loop && videoRef.current) {
-      console.log('xd')
       videoRef.current.currentTime = 0
       return
     }
diff --git a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
index 3f82b907f9..776ab4266f 100644
--- a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
+++ b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
@@ -7,6 +7,9 @@ import {
   GetBasicVideosConnectionLightweightDocument,
   useGetCuratedHompageVideosQuery,
 } from '@/api/queries/__generated__/videos.generated'
+import { FlexBox } from '@/components/FlexBox'
+import { Text } from '@/components/Text'
+import { ChannelLink, FollowButton } from '@/components/_channel/ChannelLink'
 import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader'
 import { BackgroundVideoPlayer } from '@/components/_video/BackgroundVideoPlayer'
 import { getPublicCryptoVideoFilter } from '@/config/contentFilter'
@@ -36,8 +39,8 @@ export const ShortsView = () => {
           const newIndex = Number(entry.target.dataset.index)
           setActiveIndex(newIndex)
           setNextSlide(entries[newIndex + 1].target)
-
-          if (tiles.length - newIndex < 2) {
+          console.log(tiles.length, tiles.length - newIndex, 'hh')
+          if (tiles.length - newIndex <= 2) {
             console.log('try fetch')
             if (!loading) {
               fetchMore({
@@ -57,9 +60,8 @@ export const ShortsView = () => {
       observerRef.current?.disconnect()
     }
   }, [activeIndex, fetchMore, loading, pageInfo?.endCursor, tiles.length])
-  console.log('enext', nextSlide)
+
   const goNextSlide = useCallback(() => {
-    console.log(nextSlide, 'scroll')
     nextSlide?.scrollIntoView({ behavior: 'smooth' })
   }, [nextSlide])
 
@@ -99,7 +101,8 @@ const Container = styled.div`
   scroll-snap-type: y mandatory;
   align-items: center;
   scrollbar-width: none;
-  width: 100%;
+  width: calc(100% + 36px);
+  margin-left: -16px;
 
   ::-webkit-scrollbar {
     display: none;
@@ -110,15 +113,21 @@ const ShortVideoPlaceholder = styled.div`
   display: grid;
   place-items: center;
   aspect-ratio: 9/16;
-
-  /* background-color: green; */
-  max-height: 90%;
-  width: 400px;
-  text-align: center;
-  vertical-align: middle;
+  max-height: 100%;
+  min-height: 100%;
+  min-width: 300px;
+  width: 100%;
   scroll-snap-stop: always;
   scroll-snap-align: center;
 
+  ${media.xs} {
+    width: 400px;
+  }
+
+  ${media.sm} {
+    width: 500px;
+  }
+
   ${media.xxl} {
     width: 40vw;
     height: 100%;
@@ -139,13 +148,11 @@ const ShortVideoPlayer = ({
   playNext: () => void
 }) => {
   const { video, loading } = useFullVideo(videoId)
-  const thumbnailUrls: string[] = video?.thumbnailPhoto?.resolvedUrls ?? []
   const mediaUrls: string[] = video?.media?.resolvedUrls ?? []
-  const isLoading = loading
-  console.log(loading)
+
   return (
     <ShortVideoPlayerBox>
-      {!isLoading ? (
+      {!loading ? (
         <StyledBackgroundVideoPlayer
           videoId={videoId}
           playing={isActive}
@@ -163,27 +170,46 @@ const ShortVideoPlayer = ({
         />
       ) : (
         <SkeletonLoader height="100%" width={400} />
-        // <VideoWrapper>
-        //   <VideoPoster resolvedUrls={thumbnailUrls ?? undefined} type="cover" alt="" />
-        // </VideoWrapper>
       )}
+      <DetailsBox flow="column" gap={2}>
+        <FlexBox width="fit-content" gap={4}>
+          <ChannelLink id={video?.channel.id} />
+          <FollowButton isSmall channelId={video?.channel.id} />
+        </FlexBox>
+        <Text variant="t200" as="p">
+          {video?.title}
+        </Text>
+        <Text clampAfterLine={1} variant="t100" as="p" color="colorText">
+          {video?.description}
+        </Text>
+      </DetailsBox>
     </ShortVideoPlayerBox>
   )
 }
 
+const DetailsBox = styled(FlexBox)`
+  position: absolute;
+  bottom: 30px;
+  left: 10px;
+  max-width: 80%;
+  overflow: hidden;
+`
+
 const ShortVideoPlayerBox = styled.div`
   aspect-ratio: 9/16;
-
-  /* background-color: green; */
-  min-height: 90%;
+  min-height: 100%;
   max-height: 100%;
   width: 100%;
   position: relative;
   scroll-snap-stop: always;
   scroll-snap-align: center;
-  border: 1px solid red;
   overflow: hidden;
 
+  ${media.md} {
+    min-height: 95%;
+    max-height: 95%;
+  }
+
   ${media.xxl} {
     width: 40vw;
   }
@@ -201,6 +227,7 @@ export const useHomeVideos = () => {
         isShort_not_eq: undefined,
         isShortDerived_isNull: undefined,
         isShort_eq: true,
+        isShortDerived_eq: true,
       }),
       skipVideoIds: ['-1'],
     },
@@ -209,12 +236,24 @@ export const useHomeVideos = () => {
   const { columns, fetchMore, pageInfo, tiles } = useInfiniteVideoGrid({
     query: GetBasicVideosConnectionLightweightDocument,
     variables: {
-      where: getPublicCryptoVideoFilter({
-        id_not_in: avoidIds,
-        isShort_not_eq: undefined,
-        isShortDerived_isNull: undefined,
-        isShort_eq: true,
-      }),
+      where: {
+        OR: [
+          getPublicCryptoVideoFilter({
+            id_not_in: avoidIds,
+            isShort_not_eq: undefined,
+            isShortDerived_isNull: undefined,
+            isShort_eq: true,
+            orionLanguage_eq: 'en',
+          }),
+          getPublicCryptoVideoFilter({
+            id_not_in: avoidIds,
+            isShort_not_eq: undefined,
+            isShortDerived_isNull: undefined,
+            isShortDerived_eq: true,
+            orionLanguage_eq: 'en',
+          }),
+        ],
+      },
       orderBy: VideoOrderByInput.VideoRelevanceDesc,
     },
     options: {

From 16b20e36b4009d2b13fa3726d38ba04255aa1766 Mon Sep 17 00:00:00 2001
From: ikprk <i.koprek6@gmail.com>
Date: Sun, 26 May 2024 11:32:29 +0200
Subject: [PATCH 3/5] Add small margin to details

---
 packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
index 776ab4266f..0bd982885c 100644
--- a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
+++ b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
@@ -39,9 +39,7 @@ export const ShortsView = () => {
           const newIndex = Number(entry.target.dataset.index)
           setActiveIndex(newIndex)
           setNextSlide(entries[newIndex + 1].target)
-          console.log(tiles.length, tiles.length - newIndex, 'hh')
           if (tiles.length - newIndex <= 2) {
-            console.log('try fetch')
             if (!loading) {
               fetchMore({
                 variables: { first: 4 * 4, after: pageInfo?.endCursor },
@@ -176,7 +174,7 @@ const ShortVideoPlayer = ({
           <ChannelLink id={video?.channel.id} />
           <FollowButton isSmall channelId={video?.channel.id} />
         </FlexBox>
-        <Text variant="t200" as="p">
+        <Text margin={{ top: 4 }} variant="t200" as="p">
           {video?.title}
         </Text>
         <Text clampAfterLine={1} variant="t100" as="p" color="colorText">

From ebd646d95cb823a60a68e0a7f24d88a0b5130b04 Mon Sep 17 00:00:00 2001
From: ikprk <i.koprek6@gmail.com>
Date: Sun, 26 May 2024 11:52:47 +0200
Subject: [PATCH 4/5] Build fix

---
 packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
index 0bd982885c..d5d1c67f8a 100644
--- a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
+++ b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
@@ -35,8 +35,9 @@ export const ShortsView = () => {
 
     observerRef.current = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
+        const target = entry.target as HTMLDivElement
         if (entry.isIntersecting) {
-          const newIndex = Number(entry.target.dataset.index)
+          const newIndex = Number(target.dataset.index)
           setActiveIndex(newIndex)
           setNextSlide(entries[newIndex + 1].target)
           if (tiles.length - newIndex <= 2) {

From 9f5f3ea36f2fad49629d026b8885a89dac159985 Mon Sep 17 00:00:00 2001
From: ikprk <i.koprek6@gmail.com>
Date: Sun, 26 May 2024 12:03:55 +0200
Subject: [PATCH 5/5] Improve loading stage

---
 .../views/viewer/ShortsView/ShortsView.tsx    | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
index d5d1c67f8a..1fb7427c1e 100644
--- a/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
+++ b/packages/atlas/src/views/viewer/ShortsView/ShortsView.tsx
@@ -74,8 +74,8 @@ export const ShortsView = () => {
             activeIndex > idx && idx > activeIndex - 2 ? 'prev' : ''
           } ${activeIndex < idx && idx < activeIndex + 2 ? 'next' : ''}`}
         >
-          {!id || activeIndex - 1 > idx || activeIndex + 2 < idx ? (
-            <div style={{ height: '100%', background: 'red', width: 400, aspectRatio: '9/16' }} />
+          {activeIndex - 1 > idx || activeIndex + 2 < idx ? (
+            <div style={{ height: '100%', width: 400, aspectRatio: '9/16' }} />
           ) : (
             <ShortVideoPlayer
               forceMuted={forceMuted}
@@ -141,17 +141,17 @@ const ShortVideoPlayer = ({
   setForceMuted,
 }: {
   isActive: boolean
-  videoId: string
+  videoId?: string
   forceMuted: boolean
   setForceMuted: (val: boolean) => void
   playNext: () => void
 }) => {
-  const { video, loading } = useFullVideo(videoId)
+  const { video, loading } = useFullVideo(videoId ?? '')
   const mediaUrls: string[] = video?.media?.resolvedUrls ?? []
 
   return (
     <ShortVideoPlayerBox>
-      {!loading ? (
+      {!loading && videoId ? (
         <StyledBackgroundVideoPlayer
           videoId={videoId}
           playing={isActive}
@@ -168,20 +168,22 @@ const ShortVideoPlayer = ({
           customLink={absoluteRoutes.viewer.video(videoId)}
         />
       ) : (
-        <SkeletonLoader height="100%" width={400} />
+        <SkeletonLoader height="100%" width="100%" />
       )}
-      <DetailsBox flow="column" gap={2}>
-        <FlexBox width="fit-content" gap={4}>
-          <ChannelLink id={video?.channel.id} />
-          <FollowButton isSmall channelId={video?.channel.id} />
-        </FlexBox>
-        <Text margin={{ top: 4 }} variant="t200" as="p">
-          {video?.title}
-        </Text>
-        <Text clampAfterLine={1} variant="t100" as="p" color="colorText">
-          {video?.description}
-        </Text>
-      </DetailsBox>
+      {video ? (
+        <DetailsBox flow="column" gap={2}>
+          <FlexBox width="fit-content" gap={4}>
+            <ChannelLink id={video?.channel.id} />
+            <FollowButton isSmall channelId={video?.channel.id} />
+          </FlexBox>
+          <Text margin={{ top: 4 }} variant="t200" as="p">
+            {video?.title}
+          </Text>
+          <Text clampAfterLine={1} variant="t100" as="p" color="colorText">
+            {video?.description}
+          </Text>
+        </DetailsBox>
+      ) : null}
     </ShortVideoPlayerBox>
   )
 }