From 0339b68d140a9e298e23bf956d3232f3b8d46cc3 Mon Sep 17 00:00:00 2001
From: Sergiu <46888793+Serj10GR@users.noreply.github.com>
Date: Wed, 16 Dec 2020 11:36:11 +0200
Subject: [PATCH] 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>
---
 .../MatchPage/MatchProfileCard/styled.tsx     | 10 +++++++++-
 src/features/MatchPage/index.tsx              | 19 +++++++++++++++++--
 src/features/MatchPage/styled.tsx             | 14 +++++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/features/MatchPage/MatchProfileCard/styled.tsx b/src/features/MatchPage/MatchProfileCard/styled.tsx
index dc9f9155..eae1dd08 100644
--- a/src/features/MatchPage/MatchProfileCard/styled.tsx
+++ b/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;
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index e2561ed7..a5089cd6 100644
--- a/src/features/MatchPage/index.tsx
+++ b/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>
   )
 }
diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index 8c843c62..2fe60c6f 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/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;
+  }
 `