feat(#668): video player page default scroll to bottom (#250)

* feat(#668): video player page default scroll to bottom

* fix(667): fix ref type

Co-authored-by: Mirlan <m.maksitaliev@gmail.com>

src/features/MatchPage/MatchProfileCard/styled.tsx

@@ -10,7 +10,15 @@ export const Wrapper = styled.div`
   line-height: 24px;
   color: white;
   min-height: 28px;
-  max-width: 1504px;
+  max-width: 85%;
+
+  @media ${devices.desktop} {
+    font-size: 22px;
+  }
+  @media ${devices.laptop} {
+    font-size: 18px;
+    max-width: 80%;
+  }
 
   @media ${devices.tablet} {
     order: 2;

src/features/MatchPage/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import isEmpty from 'lodash/isEmpty'
 
 import { StreamPlayer } from 'features/StreamPlayer'
@@ -6,12 +7,17 @@ import { ProfileHeader } from 'features/ProfileHeader'
 import { MainWrapper } from 'features/MainWrapper'
 import { UserFavorites } from 'features/UserFavorites'
 import { MediaQuery } from 'features/MediaQuery'
-
+import { useFullscreen } from 'features/StreamPlayer/hooks/useFullscreen'
 import { MatchProfileCard } from './MatchProfileCard'
 import { usePlayerProgressReporter } from './hooks/usePlayerProgressReporter'
 import { useMatchProfile } from './hooks/useMatchProfile'
 import { useVideoData } from './hooks/useVideoData'
-import { MainWrapper as Wrapper, Container } from './styled'
+
+import {
+  MainWrapper as Wrapper,
+  Container,
+  EmptyScrollTarget,
+} from './styled'
 
 export const MatchPage = () => {
   const profile = useMatchProfile()
@@ -26,6 +32,14 @@ export const MatchPage = () => {
   const isLiveMatch = Boolean(url) && !isLastPlayPositionFetching
   const isFinishedMatch = !isEmpty(videos) && !isLastPlayPositionFetching
 
+  const { onFullscreenClick } = useFullscreen()
+
+  const playerEndRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    playerEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [onFullscreenClick])
+
   return (
     <MainWrapper>
       <MediaQuery minDevice='laptop'>
@@ -57,6 +71,7 @@ export const MatchPage = () => {
           }
         </Container>
       </Wrapper>
+      <EmptyScrollTarget ref={playerEndRef} />
     </MainWrapper>
   )
 }

src/features/MatchPage/styled.tsx

@@ -16,14 +16,26 @@ export const MainWrapper = styled.div`
 `
 
 export const Container = styled.div`
-  max-width: 1504px;
+  max-width: 85%;
   max-height: 896px;
   margin-top: 14px;
   display: flex;
   flex-direction: column;
 
+  @media ${devices.laptop} {
+    max-width: 80%;
+  }
+
   @media ${devices.tablet} {
     order: 1;
     margin-top: 0;
   }
+  @media ${devices.mobile} {
+    max-width: 100%;
+  }
+`
+export const EmptyScrollTarget = styled.div`
+  @media ${devices.tablet} {
+    display: none;
+  }
 `