diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx index 10b87181..16189585 100644 --- a/src/features/MatchPage/components/FinishedMatch/index.tsx +++ b/src/features/MatchPage/components/FinishedMatch/index.tsx @@ -2,6 +2,8 @@ import { Fragment } from 'react' import isEmpty from 'lodash/isEmpty' +import { isMobileDevice } from 'config/userAgent' + import type { Events } from 'requests/getMatchEvents' import type { MatchInfo } from 'requests/getMatchInfo' diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx index d90442f2..a005f20c 100644 --- a/src/features/MatchPage/components/LiveMatch/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/index.tsx @@ -7,10 +7,13 @@ import { StreamPlayer } from 'features/StreamPlayer' import { YoutubePlayer } from 'features/StreamPlayer/components/YoutubePlayer' import { MatchSidePlaylists } from 'features/MatchSidePlaylists' +import { isMobileDevice } from 'config/userAgent' + import { Container } from '../../styled' import { useLiveMatch } from './hooks' import { TournamentData } from '../../types' +import { MatchProfileCardMobile } from '../MatchProfileCardMobile' type Props = { // events: Events, @@ -64,6 +67,7 @@ export const LiveMatch = ({ /> ) )} + {isMobileDevice ? : null} { return ( - + {isMobileDevice ? null : }
diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx index b0eefa19..5e17b1a0 100644 --- a/src/features/MatchPage/store/hooks/index.tsx +++ b/src/features/MatchPage/store/hooks/index.tsx @@ -3,6 +3,7 @@ import { useState, useMemo, } from 'react' +import { useToggle } from 'hooks' import type { MatchInfo } from 'requests/getMatchInfo' import { getMatchInfo } from 'requests/getMatchInfo' @@ -37,6 +38,11 @@ const addScoresFromPlaylists = ( export const useMatchPage = () => { const [matchProfile, setMatchProfile] = useState(null) const { profileId: matchId, sportType } = usePageParams() + const { + close: hideProfileCard, + isOpen: profileCardShown, + open: showProfileCard, + } = useToggle(true) useEffect(() => { getMatchInfo(sportType, matchId).then(setMatchProfile) @@ -74,10 +80,13 @@ export const useMatchPage = () => { return { events, handlePlaylistClick, + hideProfileCard, isStarted, matchPlaylists, profile, + profileCardShown, selectedPlaylist, setFullMatchPlaylistDuration, + showProfileCard, } } diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx index 18a0733c..d10607e1 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx @@ -9,5 +9,6 @@ export const MatchesWrapper = styled.div` margin-bottom: 15px; } + ${customScrollbar} ` diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx index c6b3a22d..4b90050a 100644 --- a/src/features/MatchSidePlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/styled.tsx @@ -138,7 +138,6 @@ export const BlockTitle = styled.span` color: rgba(255, 255, 255, 0.5); text-transform: uppercase; ` - export const BackToTopBtn = styled.div` position: absolute; left: 50%; diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index a3dfbf98..7a26f647 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -58,7 +58,7 @@ export const Icon = styled.div` } ` : ''}; - + &:hover { opacity: 1; } diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx index 3f2b55bb..2882700b 100644 --- a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx +++ b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx @@ -1,8 +1,8 @@ import { useSlider } from 'features/StreamPlayer/hooks/useSlider' import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip' import { Scrubber } from 'features/StreamPlayer/components/ProgressBar/styled' -import { Chapters } from 'features/StreamPlayer/components/Chapters' +import { Chapters } from 'features/StreamPlayer/components/Chapters' import type { Props } from './hooks' import { useProgressBar } from './hooks' import { ProgressBarList } from './styled' diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx index fb9cfa2d..16c115ba 100644 --- a/src/features/MultiSourcePlayer/hooks/index.tsx +++ b/src/features/MultiSourcePlayer/hooks/index.tsx @@ -13,6 +13,7 @@ import { useVolume } from 'features/VideoPlayer/hooks/useVolume' import { useNoNetworkPopupStore } from 'features/NoNetworkPopup' import { useEventListener, useObjectState } from 'hooks' +import { MatchInfo } from 'requests' import { MatchInfo } from 'requests' diff --git a/src/features/StreamPlayer/components/Controls/index.tsx b/src/features/StreamPlayer/components/Controls/index.tsx index feb525a6..264eddad 100644 --- a/src/features/StreamPlayer/components/Controls/index.tsx +++ b/src/features/StreamPlayer/components/Controls/index.tsx @@ -11,7 +11,7 @@ import { Chapters } from 'features/MultiSourcePlayer/types' import { ControlsMobile } from './Components/ControlsMobile' import { ControlsWeb } from './Components/ControlsWeb' -import { ProgressBar } from '../ProgressBar' +// import { ProgressBar } from '../ProgressBar' export type ControlsProps = { activeChapterIndex?: number, @@ -65,7 +65,7 @@ export const Controls = (props: ControlsProps) => { isStorage, loadedProgress, onProgressChange, - onProgressChangeLive, + // onProgressChangeLive, onTouchEnd, onTouchStart, playedProgress, @@ -87,15 +87,15 @@ export const Controls = (props: ControlsProps) => { const progressBarElement = useMemo(() => { if (isLive || isStorage) { - return ( - - ) + // return ( + // + // ) } return ( { isStorage, loadedProgress, onProgressChange, - onProgressChangeLive, + // onProgressChangeLive, onTouchEnd, onTouchStart, playedProgress, diff --git a/src/features/StreamPlayer/components/ProgressBar/hooks.tsx b/src/features/StreamPlayer/components/ProgressBar/hooks.tsx index 2167084d..33633606 100644 --- a/src/features/StreamPlayer/components/ProgressBar/hooks.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/hooks.tsx @@ -10,6 +10,7 @@ export type Props = { allPlayedProgress: number, chapters: Chapters, duration: number, + isScrubberVisible?: boolean, loadedProgress: number, onPlayedProgressChange: (progress: number, seeking: boolean) => void, onTouchEnd?: () => any, diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx index b68173be..7eacc35e 100644 --- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/styled.tsx @@ -1,13 +1,40 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' - import { Wrapper } from '../TimeTooltip/styled' export const ProgressBarList = styled.div` flex-grow: 1; height: 4px; position: relative; + background-color: rgba(255, 255, 255, 0.3); + cursor: pointer; + + ${isMobileDevice + ? css` + height: 1px; + ` + : ''} +` + +export const LoadedProgress = styled.div` + position: absolute; + z-index: 1; + background-color: rgba(255, 255, 255, 0.6); + height: 100%; +` + +export const PlayedProgress = styled.div` + position: absolute; + z-index: 2; + background-color: #CC0000; + height: 100%; + + ${isMobileDevice + ? css` + background-color: #FFFFFF; + ` + : ''} ` export const Scrubber = styled.div` @@ -15,7 +42,7 @@ export const Scrubber = styled.div` outline: none; position: absolute; top: 0; - transform: translate(-50%, -43%); + transform: translate(-50%, -38%); z-index: 3; width: 18px; height: 18px; @@ -26,13 +53,12 @@ export const Scrubber = styled.div` :hover ${Wrapper} { visibility: visible; } - + ${isMobileDevice ? css` - width: 30px; - height: 30px; - background-clip: padding-box; - border: 10px solid transparent; + width: 14px; + height: 14px; + background-color: #FFFFFF; ` : ''} ` diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 4dba9ee2..62048397 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -1,22 +1,29 @@ -import styled, { css } from 'styled-components/macro' +import styled, { css } from 'styled-components' import { isMobileDevice } from 'config/userAgent' -import { devices } from 'config' -export const ControlsGradient = styled.div` +export const ControlsGradient = styled.div<{ isVisible?: boolean }>` background-image: url(/images/player-controls-gradient.png); bottom: 0; position: absolute; width: 100%; pointer-events: none; height: 145px; + + ${({ isVisible }) => (isMobileDevice + ? css` + height: 100%; + background: ${(isVisible + ? 'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(0,0,0,0.7) 100%)' + : 'initial')} + ` : '')} ` type HoverStylesProps = { visible: boolean, } -const hoverStyles = css` +export const hoverStyles = css` transition: opacity 0.3s ease-in-out; ${({ visible }) => (visible ? css`opacity: 1;` @@ -113,9 +120,12 @@ export const PlayerWrapper = styled.div` padding-top: 56.25%; `} - ${devices.laptop} { - min-height: auto; - } + ${isMobileDevice + ? css` + min-height: auto; + margin-bottom: 15px; + ` + : ''}; ` type LoaderWrapperProps = { @@ -151,7 +161,7 @@ export const ButtonBase = styled.button` const sizes = { lg: 92, - sm: 24, + sm: 29, } type PlayStopProps = { @@ -176,8 +186,8 @@ export const PlayStop = styled(ButtonBase)` ${isMobileDevice ? css` - width: 20%; - height: 60%; + width: ${sizes.sm}px; + height: ${sizes.sm}px; margin-right: 0; padding: 0; ` @@ -248,15 +258,17 @@ export const Backward = styled(ButtonBase)` ${isMobileDevice ? css` - width: 15%; - font-size: 14px; - margin-right: 6px; + width: ${rewindButtonSizes.sides.sm}px; + height: ${rewindButtonSizes.sides.sm}px; + font-size: ${rewindButtonSizes.fontSizes.sm}px; ` : ''}; ` export const Forward = styled(Backward)` background-image: url(/images/player-forward.svg); + margin-left: 10px; + margin-right: 0; ` type PlaybackTimeProps = { @@ -299,7 +311,7 @@ export const CenterControls = styled.div` pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')}; ${isMobileDevice ? css` - width: 70%; + width: 135px; ` : ''}; ` @@ -314,11 +326,15 @@ export const LiveBtn = styled(ButtonBase)` padding: 4.5px 8px; background-color: #CC0000; border-radius: 1.3px; +` - ${isMobileDevice - ? css` - ` - : ''}; +export const TeamsDetailsWrapper = styled.div` + position: absolute; + top: 20px; + left: 15px; + font-size: 16px; + color: #FFFFFF; + z-index: 50; ` export const ChaptersText = styled.span`