From 11cfad52129f3bed67893e7e9a16a688a811fbcf Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Thu, 11 Aug 2022 20:17:29 +0400 Subject: [PATCH] fix(#1701): merge with new controls --- src/features/MatchPage/index.tsx | 1 - .../components/ProgressBar/styled.tsx | 2 +- .../MultiSourcePlayer/hooks/index.tsx | 1 + src/features/MultiSourcePlayer/index.tsx | 1 - .../components/Controls/index.tsx | 1 - .../components/ProgressBar/index.tsx | 1 - .../components/ProgressBar/styled.tsx | 40 ++----- src/features/StreamPlayer/styled.tsx | 113 +++++++----------- 8 files changed, 55 insertions(+), 105 deletions(-) diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index 75f45adc..6b1c1d42 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -65,7 +65,6 @@ const MatchPageComponent = () => { const playFromScout = profile?.has_video && !profile?.live const playFromOTT = !profile?.has_video && (profile?.live || profile?.storage) - // TODO Добавить попап 'Данный матч ещё не начался' if (!isStarted && profile?.live === false) { const sportName = history.location.pathname.split('/')[1] diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx index cc84193a..8a0a9c0e 100644 --- a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx +++ b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx @@ -1,5 +1,5 @@ import styled, { css } from 'styled-components/macro' -import { isMobileDevice } from '../../../../config/userAgent' +import { isMobileDevice } from 'config/userAgent' export const ProgressBarList = styled.div` flex-grow: 1; diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx index 16c115ba..cc3a015c 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/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx index 2ebce53d..1ad21b9b 100644 --- a/src/features/MultiSourcePlayer/index.tsx +++ b/src/features/MultiSourcePlayer/index.tsx @@ -22,7 +22,6 @@ import { REWIND_SECONDS } from './config' export const MultiSourcePlayer = (props: Props) => { const { profile } = props - const { activeChapterIndex, activePlayer, diff --git a/src/features/StreamPlayer/components/Controls/index.tsx b/src/features/StreamPlayer/components/Controls/index.tsx index 264eddad..9542d828 100644 --- a/src/features/StreamPlayer/components/Controls/index.tsx +++ b/src/features/StreamPlayer/components/Controls/index.tsx @@ -84,7 +84,6 @@ export const Controls = (props: ControlsProps) => { isLive, isStorage, ]) - const progressBarElement = useMemo(() => { if (isLive || isStorage) { // return ( diff --git a/src/features/StreamPlayer/components/ProgressBar/index.tsx b/src/features/StreamPlayer/components/ProgressBar/index.tsx index 741f09ea..0475d15d 100644 --- a/src/features/StreamPlayer/components/ProgressBar/index.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/index.tsx @@ -15,7 +15,6 @@ export const ProgressBar = (props: Props) => { playedProgressInPercent, time, } = useProgressBar(props) - return ( diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx index 7eacc35e..bce8da4c 100644 --- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/styled.tsx @@ -1,40 +1,13 @@ 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` @@ -42,23 +15,24 @@ export const Scrubber = styled.div` outline: none; position: absolute; top: 0; - transform: translate(-50%, -38%); + transform: translate(-50%, -43%); z-index: 3; width: 18px; height: 18px; background-color: #CC0000; border-radius: 50%; cursor: pointer; - + :hover ${Wrapper} { visibility: visible; } ${isMobileDevice ? css` - width: 14px; - height: 14px; - background-color: #FFFFFF; + width: 30px; + height: 30px; + background-clip: padding-box; + border: 10px solid transparent; ` : ''} ` diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 62048397..d99334aa 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -1,4 +1,4 @@ -import styled, { css } from 'styled-components' +import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' @@ -9,14 +9,6 @@ export const ControlsGradient = styled.div<{ isVisible?: boolean }>` 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 = { @@ -108,11 +100,9 @@ export const PlayerWrapper = styled.div` position: relative; background-color: #000; min-height: 100%; - :fullscreen { padding-top: 0; } - ${supportsAspectRatio ? css`aspect-ratio: 16 / 9;` : css` @@ -139,12 +129,7 @@ export const LoaderWrapper = styled.div` transform: translate(-50%, -50%); z-index: 1; transition: opacity 0.3s ease-in-out; - - opacity: ${({ buffering }) => ( - buffering - ? 1 - : 0 - )}; + opacity: ${({ buffering }) => (buffering ? 1 : 0)}; ` export const ButtonBase = styled.button` @@ -161,7 +146,7 @@ export const ButtonBase = styled.button` const sizes = { lg: 92, - sm: 29, + sm: 24, } type PlayStopProps = { @@ -179,18 +164,17 @@ export const PlayStop = styled(ButtonBase)` )}; ${({ size = 'sm' }) => ( css` - width: ${sizes[size]}px; - height: ${sizes[size]}px; - ` + width: ${sizes[size]}px; + height: ${sizes[size]}px; + ` )}; - ${isMobileDevice ? css` - width: ${sizes.sm}px; - height: ${sizes.sm}px; - margin-right: 0; - padding: 0; - ` + width: 20%; + height: 60%; + margin-right: 0; + padding: 0; + ` : ''}; ` @@ -214,13 +198,12 @@ export const Fullscreen = styled(ButtonBase)` ? 'url(/images/player-fullscreen-off.svg)' : 'url(/images/player-fullscreen-on.svg)' )}; - ${isMobileDevice ? css` - width: 20px; - height: 18px; - margin-left: 15px; - ` + width: 20px; + height: 18px; + margin-left: 15px; + ` : ''}; ` @@ -249,26 +232,23 @@ export const Backward = styled(ButtonBase)` font-weight: normal; ${({ size = 'sm' }) => ( css` - width: ${rewindButtonSizes.sides[size]}px; - height: ${rewindButtonSizes.sides[size]}px; - font-size: ${rewindButtonSizes.fontSizes[size]}px; - ` + width: ${rewindButtonSizes.sides[size]}px; + height: ${rewindButtonSizes.sides[size]}px; + font-size: ${rewindButtonSizes.fontSizes[size]}px; + ` )} display: ${({ isHidden }) => (isHidden ? 'none' : 'block')}; - ${isMobileDevice ? css` - width: ${rewindButtonSizes.sides.sm}px; - height: ${rewindButtonSizes.sides.sm}px; - font-size: ${rewindButtonSizes.fontSizes.sm}px; - ` + width: 15%; + font-size: 14px; + margin-right: 6px; + ` : ''}; ` export const Forward = styled(Backward)` background-image: url(/images/player-forward.svg); - margin-left: 10px; - margin-right: 0; ` type PlaybackTimeProps = { @@ -280,14 +260,13 @@ export const PlaybackTime = styled.span` font-weight: 600; font-size: 16px; color: #fff; - ${isMobileDevice ? css` - margin-left: 5px; - font-size: 10px; - width: 100px; - white-space: nowrap; - ` + margin-left: 5px; + font-size: 10px; + width: 100px; + white-space: nowrap; + ` : ''}; ` @@ -306,13 +285,12 @@ export const CenterControls = styled.div` justify-content: space-between; align-items: center; transition: opacity 0.3s ease-in-out; - opacity: ${({ playing }) => (playing ? 0 : 1)}; pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')}; ${isMobileDevice ? css` - width: 135px; - ` + width: 70%; + ` : ''}; ` @@ -326,15 +304,10 @@ export const LiveBtn = styled(ButtonBase)` padding: 4.5px 8px; background-color: #CC0000; border-radius: 1.3px; -` - -export const TeamsDetailsWrapper = styled.div` - position: absolute; - top: 20px; - left: 15px; - font-size: 16px; - color: #FFFFFF; - z-index: 50; + ${isMobileDevice + ? css` + ` + : ''}; ` export const ChaptersText = styled.span` @@ -343,7 +316,6 @@ export const ChaptersText = styled.span` font-size: 16px; color: #fff; text-align: center; - ${isMobileDevice ? css` margin: 0 5px; @@ -361,18 +333,16 @@ export const Prev = styled(ButtonBase)` width: 29px; height: 28px; background-image: url(/images/player-prev.svg); - ${({ disabled }) => ( disabled ? 'opacity: 0.5;' : '' )} - ${isMobileDevice ? css` - width: 20px; - height: 20px; - ` + width: 20px; + height: 20px; + ` : ''}; ` @@ -380,3 +350,12 @@ export const Next = styled(Prev)` margin-right: 10px; transform: rotate(180deg); ` + +export const TeamsDetailsWrapper = styled.div` + position: absolute; + top: 20px; + left: 15px; + font-size: 16px; + color: #FFFFFF; + z-index: 50; +`