diff --git a/src/features/GlobalStyles/index.tsx b/src/features/GlobalStyles/index.tsx index 95f399ef..50e67728 100644 --- a/src/features/GlobalStyles/index.tsx +++ b/src/features/GlobalStyles/index.tsx @@ -9,7 +9,7 @@ export const GlobalStyles = createGlobalStyle` font-size: calc(2px + 1vw); overflow-y: hidden; } - + body { min-height: 100vh; margin: 0; diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx index e88b90f0..fea25fb9 100644 --- a/src/features/MatchPage/components/FinishedMatch/index.tsx +++ b/src/features/MatchPage/components/FinishedMatch/index.tsx @@ -14,6 +14,7 @@ import { useFinishedMatch } from './hooks' import { Container } from '../../styled' import { Modal } from './styled' import { TournamentData } from '../../types' +import { MatchDescription } from '../MatchDescription' type Props = { events: Events, @@ -54,10 +55,13 @@ export const FinishedMatch = ({ {!isEmpty(chapters) && ( - + + + + )} diff --git a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx index eae67980..9b75ab2b 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/components/VideoDate/styled.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from 'styled-components/macro' export const Wrapper = styled.div` color: #FFFFFF; diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx index 7cb19d4c..e8b7c6b3 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx @@ -1,7 +1,13 @@ -import styled from 'styled-components' +import styled from 'styled-components/macro' +import { customScrollbar } from 'features/Common' export const MatchesWrapper = styled.div` + overflow-y: scroll; + max-height: calc(100vh - 170px); + > :not(:last-child) { margin-bottom: 15px; } + + ${customScrollbar} ` diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index 2565949f..865b0699 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -86,7 +86,7 @@ export const MatchSidePlaylists = ({ ) : null} - + ` width: 320px; margin-top: 14px; padding: 0 10px 0 14px; max-height: calc(100vh - 170px); - overflow-y: scroll; + overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'none' : 'scroll')}; ${customScrollbar} diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx index 2dee548c..bb5aeb86 100644 --- a/src/features/MultiSourcePlayer/hooks/index.tsx +++ b/src/features/MultiSourcePlayer/hooks/index.tsx @@ -225,6 +225,15 @@ export const useMultiSourcePlayer = ({ stopPlaying, ]) + useEffect(() => { + if (ready && videoRef) { + videoRef.current?.scrollIntoView({ + behavior: 'smooth', + block: 'end', + }) + } + }, [ready, videoRef]) + return { activeChapterIndex, activePlayer, diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 102bcdf8..eafb9594 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -1,6 +1,7 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' +import { devices } from 'config' export const ControlsGradient = styled.div` background-image: url(/images/player-controls-gradient.png); @@ -100,6 +101,7 @@ export const PlayerWrapper = styled.div` position: relative; background-color: #000; margin-bottom: 5px; + min-height: 100%; :fullscreen { padding-top: 0; @@ -111,6 +113,10 @@ export const PlayerWrapper = styled.div` height: 0px; padding-top: 56.25%; `} + + ${devices.laptop} { + min-height: auto; + } ` export const LoaderWrapper = styled.div`