👨‍🚀 POC Video shorts

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>

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;

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)
@@ -97,9 +101,14 @@ export const BackgroundVideoPlayer: FC<BackgroundVideoPlayerProps> = ({
   }
 
   const handleEnded = (e: SyntheticEvent<HTMLVideoElement, Event>) => {
+    onEnded?.(e)
+
+    if (loop && videoRef.current) {
+      videoRef.current.currentTime = 0
+      return
+    }
     setIsPosterVisible(true)
     setIsPlaying(false)
-    onEnded?.(e)
   }
 
   return (
@@ -112,13 +121,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}

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 (

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: () => '',

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,