diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index 732d7697..3f101e56 100644 --- a/src/config/clients/facr.tsx +++ b/src/config/clients/facr.tsx @@ -46,6 +46,11 @@ export const facr: ClientConfig = { matchLogoHeight: 2.6, matchLogoTopMargin: 0.9, matchLogoWidth: 3.4, + matchPageMobileHeaderLogo: css` + width: 35px; + height: 25px; + top: 2px; + `, mobileHeaderLogo: css` width: 48px; height: 37px; diff --git a/src/config/clients/instat.tsx b/src/config/clients/instat.tsx index 2f6ee2c1..394a2df0 100644 --- a/src/config/clients/instat.tsx +++ b/src/config/clients/instat.tsx @@ -24,6 +24,10 @@ export const instat: ClientConfig = { logoWidth: 6.37, matchLogoHeight: 1.465, matchLogoWidth: 6.37, + matchPageMobileHeaderLogo: css` + width: 65px; + height: 15px; + `, mobileHeaderLogo: css` width: 84px; height: 20px; diff --git a/src/config/clients/lff.tsx b/src/config/clients/lff.tsx index 07abbd2d..78d2288d 100644 --- a/src/config/clients/lff.tsx +++ b/src/config/clients/lff.tsx @@ -27,6 +27,11 @@ export const lff: ClientConfig = { logoWidth: 6, matchLogoHeight: 2.5, matchLogoWidth: 2.5, + matchPageMobileHeaderLogo: css` + width: 24px; + height: 24px; + top: 0; + `, mobileHeaderLogo: css` width: 42px; height: 42px; diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index 71cff422..6b9d46f6 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -39,6 +39,7 @@ export type ClientConfig = { matchLogoHeight?: number, matchLogoTopMargin?: number, matchLogoWidth?: number, + matchPageMobileHeaderLogo?: StyledCss, mobileHeaderLogo?: StyledCss, userAccountLogo?: StyledCss, }, diff --git a/src/features/Common/Tabs/index.tsx b/src/features/Common/Tabs/index.tsx index b9969ffd..ee7bb69f 100644 --- a/src/features/Common/Tabs/index.tsx +++ b/src/features/Common/Tabs/index.tsx @@ -68,10 +68,7 @@ export const Tab = styled.button.attrs(({ selected }: TabProps) => ({ } ${isMobileDevice ? css` - font-size: 10px; - @media (orientation: landscape){ - font-size: 9px; - } + font-size: 14px; ` : ''}; @@ -98,7 +95,7 @@ export const TabsGroup = styled.div.attrs({ ${isMobileDevice ? css` - height: 28px; + height: 32px; ` : ''}; ` diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 31dacafb..302e01e9 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -6,12 +6,12 @@ import getUnixTime from 'date-fns/getUnixTime' import { ProfileTypes, PAGES } from 'config' import type { Match } from 'features/Matches' -import { SportIcon } from 'components/SportIcon/SportIcon' import { useMatchSwitchesStore } from 'features/MatchSwitches' import { useName } from 'features/Name' import { T9n } from 'features/T9n' import { MatchAccess } from 'features/Matches/helpers/getMatchClickAction' import { useUserFavoritesStore } from 'features/UserFavorites/store' +import { TournamentSubtitle } from 'features/TournamentSubtitle' import { NoAccessMessage } from '../NoAccessMessage' import { @@ -28,12 +28,9 @@ import { TeamName, Teams, Time, - TournamentName, TeamLogos, TeamLogo, BuyMatchBadge, - CountryFlag, - SecondaryInfo, FavoriteSign, NameSignWrapper, HoverFrame, @@ -57,6 +54,7 @@ export const CardFrontside = ({ const location = useLocation() const { access, + countryId, date, formattedDate, live, @@ -78,7 +76,6 @@ export const CardFrontside = ({ isInFuture || isScoreHidden ) || (live && !isScoreHidden) - const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id) const team1InFavorites = isInFavorites(ProfileTypes.TEAMS, team1.id) const team2InFavorites = isInFavorites(ProfileTypes.TEAMS, team2.id) @@ -157,18 +154,11 @@ export const CardFrontside = ({ {showScore && {team2.score}} - - - - {tournament && ( - - - {tournamentName} - - {tournamentInFavorites && } - - )} - + diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index d57fd222..3a00b256 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -153,26 +153,6 @@ export const Info = styled.div` : ''}; ` -export const SecondaryInfo = styled.div` - display: flex; - align-items: center; -` - -export const CountryFlag = styled.img` - width: 0.71rem; - height: 0.75rem; - margin-left: 0.567rem; - object-fit: contain; - object-position: bottom; - ${isMobileDevice - ? css` - width: 12px; - height: 8px; - margin-left: 3.5px; - ` - : ''}; -` - type FavoriteSignProps = { marginLeft?: number, } @@ -198,23 +178,6 @@ const nameStyles = css` overflow: hidden; ` -export const TournamentName = styled.span` - max-width: 95%; - color: rgba(255, 255, 255, 0.7); - font-size: 0.567rem; - line-height: 0.95rem; - margin-left: 0.567rem; - ${isMobileDevice - ? css` - font-size: 10px; - line-height: 100%; - max-width: 100%; - ` - : ''}; - - ${nameStyles} -` - export const Teams = styled.div` margin-bottom: 0.567rem; ${isMobileDevice diff --git a/src/features/MatchPage/components/FinishedMatch/index.tsx b/src/features/MatchPage/components/FinishedMatch/index.tsx index e30c535c..d53b10a8 100644 --- a/src/features/MatchPage/components/FinishedMatch/index.tsx +++ b/src/features/MatchPage/components/FinishedMatch/index.tsx @@ -8,6 +8,8 @@ import type { MatchInfo } from 'requests/getMatchInfo' import { MatchSidePlaylists } from 'features/MatchSidePlaylists' import { MultiSourcePlayer } from 'features/MultiSourcePlayer' +import { isMobileDevice } from 'config/userAgent' + import { SettingsPopup } from '../SettingsPopup' import { useFinishedMatch } from './hooks' @@ -15,6 +17,7 @@ import { Container } from '../../styled' import { Modal } from './styled' import { TournamentData } from '../../types' import { MatchDescription } from '../MatchDescription' +import { MatchProfileCardMobile } from '../MatchProfileCardMobile' type Props = { events: Events, @@ -59,12 +62,14 @@ export const FinishedMatch = ({ )} + {isMobileDevice ? : null} + {isMobileDevice ? : null} { + const { + date, + } = { ...profile! } + + const month = useMemo(() => ( + format(parseISO(date), 'MMM MM,') + ), [date]) + + const hour = useMemo(() => ( + format(parseISO(date), ' HH:mm') + ), [date]) + + return ( + + + {month} + + {hour} + + ) +} diff --git a/src/features/MatchPage/components/MatchProfileCardMobile/components/MatchDate/styled.tsx b/src/features/MatchPage/components/MatchProfileCardMobile/components/MatchDate/styled.tsx new file mode 100644 index 00000000..694bb0da --- /dev/null +++ b/src/features/MatchPage/components/MatchProfileCardMobile/components/MatchDate/styled.tsx @@ -0,0 +1,10 @@ +import styled from 'styled-components' + +export const ScDate = styled.div` + font-size: 10px; + color: rgba(255, 255, 255, 0.7); +` + +export const ScDateMonth = styled.span` + font-weight: 600; +` diff --git a/src/features/MatchPage/components/MatchProfileCardMobile/components/TeamsDetails/index.tsx b/src/features/MatchPage/components/MatchProfileCardMobile/components/TeamsDetails/index.tsx new file mode 100644 index 00000000..c99e3507 --- /dev/null +++ b/src/features/MatchPage/components/MatchProfileCardMobile/components/TeamsDetails/index.tsx @@ -0,0 +1,73 @@ +import { useCallback } from 'react' + +import { ProfileTypes } from 'config' + +import { getName } from 'features/Name' +import { useMatchSwitchesStore } from 'features/MatchSwitches' +import { useLexicsStore } from 'features/LexicsStore' + +import { usePageParams } from 'hooks/usePageParams' + +import { MatchInfo, Team } from 'requests' + +import { + Score, + ScoreWrapper, + StyledLink, + ScTeam, + Wrapper, +} from './styled' + +type Props = { + profile: MatchInfo, + teamNameLimit?: number, +} + +export const TeamsDetails = ({ profile, teamNameLimit }: Props) => { + const { sportType } = usePageParams() + const { isScoreHidden } = useMatchSwitchesStore() + const { suffix } = useLexicsStore() + + const { + team1, + team2, + } = { ...profile! } + + const getTeamName = useCallback((team: Team) => { + let name = getName({ nameObj: team, suffix }) + if (!!teamNameLimit && name.length > teamNameLimit) name = name.substring(0, teamNameLimit).concat('...') + return name + }, [suffix, teamNameLimit]) + + return ( + + + + {getTeamName(team1)} + + + + + { + isScoreHidden + ? '-' + : `${team1.score} - ${team2.score}` + } + + + + + {getTeamName(team2)} + + + + ) +} diff --git a/src/features/MatchPage/components/MatchProfileCardMobile/components/TeamsDetails/styled.tsx b/src/features/MatchPage/components/MatchProfileCardMobile/components/TeamsDetails/styled.tsx new file mode 100644 index 00000000..90b95f01 --- /dev/null +++ b/src/features/MatchPage/components/MatchProfileCardMobile/components/TeamsDetails/styled.tsx @@ -0,0 +1,70 @@ +import styled, { css } from 'styled-components' + +import { isMobileDevice } from 'config/userAgent' + +import { ProfileLink } from 'features/ProfileLink' +import { ProfileLogo } from 'features/ProfileLogo' + +export const Wrapper = styled.div` + display: flex; + font-weight: 600; + margin-bottom: 5px; +` + +export const ScTeam = styled.div` + font-size: 21px; + + ${isMobileDevice + ? css` + font-size: 16px; + ` + : ''}; +` + +export const StyledLink = styled(ProfileLink)` + display: flex; + align-items: center; + color: white; + font-size: 14px; + + &:hover { + text-decoration: underline; + } +` + +export const ScoreWrapper = styled.div` + margin: 0 10px; + display: flex; + flex-direction: column; + align-items: center; +` + +export const Score = styled.span` + font-size: 14px; + white-space: nowrap; +` + +export const MatchStatus = styled.span` + text-align: center; + background-color: #CC0000; + border-radius: 1.3px; + font-weight: 600; + font-size: 13px; + line-height: 16px; + letter-spacing: 0.05em; + text-transform: uppercase; + padding: 2.5px 14px; + margin-top: 6px; +` + +export const Logo = styled(ProfileLogo)` + width: 41px; + height: 41px; + margin: 0 9px; + ${isMobileDevice + ? css` + width: 30px; + height: 30px; + ` + : ''}; +` diff --git a/src/features/MatchPage/components/MatchProfileCardMobile/index.tsx b/src/features/MatchPage/components/MatchProfileCardMobile/index.tsx new file mode 100644 index 00000000..824f7696 --- /dev/null +++ b/src/features/MatchPage/components/MatchProfileCardMobile/index.tsx @@ -0,0 +1,28 @@ +import { MatchInfo } from 'requests' +import { TournamentSubtitle } from 'features/TournamentSubtitle' + +import { Wrapper, WrapperTop } from './styled' + +import { TeamsDetails } from './components/TeamsDetails' +import { MatchDate } from './components/MatchDate' +import { useMatchPageStore } from '../../store' + +type Props = { + profile: MatchInfo, +} + +export const MatchProfileCardMobile = ({ profile }: Props) => { + const { profileCardShown } = useMatchPageStore() + + if (!profile) return null + + return ( + + + + + + + + ) +} diff --git a/src/features/MatchPage/components/MatchProfileCardMobile/styled.tsx b/src/features/MatchPage/components/MatchProfileCardMobile/styled.tsx new file mode 100644 index 00000000..a6c0e552 --- /dev/null +++ b/src/features/MatchPage/components/MatchProfileCardMobile/styled.tsx @@ -0,0 +1,19 @@ +import styled, { css } from 'styled-components/macro' + +export const Wrapper = styled.div<{isHidden?: boolean}>` + transition: 0.3s linear; + padding: 0 5px; + color: white; + margin-bottom: 15px; + + ${({ isHidden }) => (isHidden ? css` + height: 0; + opacity: 0; + margin-bottom: 0; + ` : '')} +` + +export const WrapperTop = styled.div` + display: flex; + justify-content: space-between; +` diff --git a/src/features/MatchPage/hooks/index.tsx b/src/features/MatchPage/hooks/index.tsx new file mode 100644 index 00000000..64d0936b --- /dev/null +++ b/src/features/MatchPage/hooks/index.tsx @@ -0,0 +1,15 @@ +import { useToggle } from 'hooks' + +export const useMatchPage = () => { + const { + close: hideProfileCard, + isOpen: profileCardShown, + open: showProfileCard, + } = useToggle(true) + + return { + hideProfileCard, + profileCardShown, + showProfileCard, + } +} diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx index 17be22dd..c9343b75 100644 --- a/src/features/MatchPage/index.tsx +++ b/src/features/MatchPage/index.tsx @@ -11,6 +11,7 @@ import { import { FavoritesActions } from 'requests' import { ProfileTypes } from 'config' +import { isMobileDevice } from 'config/userAgent' import { usePageLogger } from 'hooks/usePageLogger' import { usePageParams } from 'hooks/usePageParams' @@ -21,6 +22,7 @@ import { FinishedMatch } from './components/FinishedMatch' import { LiveMatch } from './components/LiveMatch' import { useMatchProfile } from './hooks/useMatchProfile' import { Wrapper } from './styled' +import { MatchPageStore } from './store' const MatchPage = () => { usePageLogger() @@ -70,32 +72,36 @@ const MatchPage = () => { } return ( - - - - -
- - - - {playFromOTT && ( - - )} - {playFromScout && ( - - )} - - -
- + + + + {isMobileDevice ? null : } + +
+ + + + {playFromOTT && ( + + )} + {playFromScout && ( + + )} + + +
+ + ) } diff --git a/src/features/MatchPage/store/index.tsx b/src/features/MatchPage/store/index.tsx new file mode 100644 index 00000000..674efdc2 --- /dev/null +++ b/src/features/MatchPage/store/index.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from 'react' +import { createContext, useContext } from 'react' + +import { useMatchPage } from '../hooks' + +type Context = ReturnType +type Props = { children: ReactNode } + +const MatchPageContext = createContext({} as Context) + +export const MatchPageStore = ({ children }: Props) => { + const value = useMatchPage() + return ( + + {children} + + ) +} + +export const useMatchPageStore = () => useContext(MatchPageContext) diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx index 58be9c72..6661053d 100644 --- a/src/features/MatchPage/styled.tsx +++ b/src/features/MatchPage/styled.tsx @@ -17,11 +17,8 @@ export const Wrapper = styled.div` ${isMobileDevice ? css` - @media (max-width: 750px) { - /* padding-top: 50px; */ - } @media screen and (orientation: landscape) { - padding-top: 55px; + padding-top: 20px; flex-direction: row; justify-content: space-between; margin-left: 10px; diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx index 39917470..963d2249 100644 --- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx @@ -147,6 +147,16 @@ export const Tab = styled(TabBase)` :first-child { margin-right: 15px; } + + ${isMobileDevice + ? css` + font-size: 14px; + + @media (orientation: portrait) { + width: 120px; + } + ` + : ''} ` export const LikeToggle = styled.img` @@ -156,6 +166,12 @@ export const LikeToggle = styled.img` width: 15px; height: 15px; cursor: pointer; + + ${isMobileDevice + ? css` + right: 20px; + ` + : ''}; ` export const BlockTitle = styled(BlockTitleBase)` diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index 865b0699..f16e49bc 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -1,3 +1,5 @@ +import { useRef } from 'react' + import type { Events, MatchInfo } from 'requests' import type { @@ -8,12 +10,19 @@ import type { import { Tab, TabsGroup } from 'features/Common' import { T9n } from 'features/T9n' +import { useEventListener } from 'hooks' + +import { useMatchPageStore } from 'features/MatchPage/store' + +import { isIOS } from 'config/userAgent' + import { Tabs } from './config' import { TabEvents } from './components/TabEvents' import { TabWatch } from './components/TabWatch' import { TabVideo } from './components/TabVideo' import { useMatchSidePlaylists } from './hooks' import { + BackToTopBtn, Wrapper, TabsWrapper, Container, @@ -54,8 +63,33 @@ export const MatchSidePlaylists = ({ tournamentData, }) + const { + hideProfileCard, + profileCardShown, + showProfileCard, + } = useMatchPageStore() + const TabPane = tabPanes[selectedTab] + const containerRef = useRef(null) + + useEventListener({ + callback: () => { + const screenLandscape = isIOS ? window.orientation : window.screen.orientation.type + const yOffset = isIOS + ? containerRef.current?.offsetTop + : containerRef.current?.scrollTop + const isScreenLandscape = isIOS + ? (screenLandscape === 90 || screenLandscape === -90) + : (screenLandscape === 'landscape-primary' || screenLandscape === 'landscape-secondary') + + if (yOffset && yOffset > 10 && !isScreenLandscape) hideProfileCard() + if (yOffset && yOffset < 10) showProfileCard() + }, + event: isIOS ? 'touchmove' : 'scroll', + target: containerRef, + }) + return ( @@ -85,8 +119,15 @@ export const MatchSidePlaylists = ({ ) : null} + - + ` ${isMobileDevice ? css` + padding: 0 5px; + overflow-y: auto; + @media (max-width: 750px){ width: 100%; } @@ -118,11 +128,6 @@ export const Title = styled.span` overflow: hidden; white-space: nowrap; text-overflow:ellipsis; - - @media ${devices.mobile} { - font-size: 16px; - padding-right: 5px; - } ` export const BlockTitle = styled.span` @@ -133,3 +138,28 @@ export const BlockTitle = styled.span` color: rgba(255, 255, 255, 0.5); text-transform: uppercase; ` + +export const BackToTopBtn = styled.div` + position: absolute; + left: 50%; + bottom: -100%; + background: rgba(0, 0, 0, 0.5); + border-radius: 0px 0 20px 20px; + width: 37px; + height: 34px; + z-index: 1; + cursor: pointer; + transform: translate(-50%, 6%); + + :after { + content: ''; + width: 10px; + height: 10px; + position: absolute; + border-left: 2px solid rgb(255, 255, 255); + border-top: 2px solid rgb(255, 255, 255); + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + } +` diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx index 9546c829..a3dfbf98 100644 --- a/src/features/Menu/styled.tsx +++ b/src/features/Menu/styled.tsx @@ -50,17 +50,12 @@ export const Icon = styled.div` opacity: 0.8; ${isMobileDevice ? css` - height: 13px; + height: 14px; + width: 14px; background-size: contain; - /* margin: 0 4px; */ :only-child { margin: 0 4px; } - - @media screen and (orientation: landscape){ - width: 21px; - height: 21px; - } ` : ''}; diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx index ddf48cd7..a1132956 100644 --- a/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx +++ b/src/features/MultiSourcePlayer/components/ProgressBar/index.tsx @@ -7,8 +7,13 @@ import type { Props } from './hooks' import { useProgressBar } from './hooks' import { ProgressBarList } from './styled' -export const ProgressBar = (props: Props) => { +export interface ProgressBarProps extends Props { + isScrubberVisible?: boolean, +} + +export const ProgressBar = (props: ProgressBarProps) => { const { + isScrubberVisible, onPlayedProgressChange, onTouchEnd, onTouchStart, @@ -29,9 +34,11 @@ export const ProgressBar = (props: Props) => { return ( - - - + {isScrubberVisible === false ? null : ( + + + + )} ) } diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx index 8c959a19..cc84193a 100644 --- a/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx +++ b/src/features/MultiSourcePlayer/components/ProgressBar/styled.tsx @@ -1,7 +1,14 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' +import { isMobileDevice } from '../../../../config/userAgent' export const ProgressBarList = styled.div` flex-grow: 1; height: 4px; position: relative; + + ${isMobileDevice + ? css` + height: 1px; + ` + : ''} ` diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx index fbad2d56..fb9cfa2d 100644 --- a/src/features/MultiSourcePlayer/hooks/index.tsx +++ b/src/features/MultiSourcePlayer/hooks/index.tsx @@ -14,6 +14,8 @@ import { useNoNetworkPopupStore } from 'features/NoNetworkPopup' import { useEventListener, useObjectState } from 'hooks' +import { MatchInfo } from 'requests' + import { useProgressChangeHandler } from './useProgressChangeHandler' import { usePlayingHandlers } from './usePlayingHandlers' import { useVideoQuality } from './useVideoQuality' @@ -43,6 +45,7 @@ export type Props = { chapters: Chapters, onError?: () => void, onPlayingChange: (playing: boolean) => void, + profile: MatchInfo, } export const useMultiSourcePlayer = ({ diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx index d5bf6006..2ebce53d 100644 --- a/src/features/MultiSourcePlayer/index.tsx +++ b/src/features/MultiSourcePlayer/index.tsx @@ -1,39 +1,28 @@ import { Loader } from 'features/Loader' -import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar' import { PlayerWrapper, - Controls, - ControlsRow, - ControlsGroup, CenterControls, PlayStop, - Fullscreen, LoaderWrapper, Backward, Forward, - PlaybackTime, ControlsGradient, + TeamsDetailsWrapper, } from 'features/StreamPlayer/styled' import { VideoPlayer } from 'features/VideoPlayer' - -import { secondsToHms } from 'helpers' +import { Controls } from 'features/StreamPlayer/components/Controls' +import { Name } from 'features/Name' import { isMobileDevice } from 'config/userAgent' -import { HOUR_IN_MILLISECONDS, REWIND_SECONDS } from './config' - -import { ProgressBar } from './components/ProgressBar' -import { Settings } from './components/Settings' import type { Props } from './hooks' import { useMultiSourcePlayer } from './hooks' import { Players } from './types' -import { - ChaptersText, - Next, - Prev, -} from './styled' +import { REWIND_SECONDS } from './config' export const MultiSourcePlayer = (props: Props) => { + const { profile } = props + const { activeChapterIndex, activePlayer, @@ -83,7 +72,6 @@ export const MultiSourcePlayer = (props: Props) => { volumeInPercent, wrapperRef, } = useMultiSourcePlayer(props) - const firstPlayerActive = activePlayer === Players.PLAYER1 return ( @@ -136,6 +124,15 @@ export const MultiSourcePlayer = (props: Props) => { onError={onError} onReady={onReady} /> + + {isMobileDevice && isFullscreen && controlsVisible && profile && ( + + + {` ${profile.team1.score}-${profile.team2.score} `} + + + )} + {ready && ( {REWIND_SECONDS} @@ -148,79 +145,38 @@ export const MultiSourcePlayer = (props: Props) => { {REWIND_SECONDS} )} - - - - - - - - - playPrevChapter()} - /> - - {activeChapterIndex + 1} / {numberOfChapters} - - playNextChapter()} - /> - { - !isMobileDevice && ( - - ) - } - HOUR_IN_MILLISECONDS ? 150 : 130}> - {secondsToHms(allPlayedProgress / 1000)} - {' / '} - {secondsToHms(duration / 1000)} - - {REWIND_SECONDS} - - {REWIND_SECONDS} - - - - - - - - - - + + ) } diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index da5b8e14..d248dd83 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -76,14 +76,13 @@ export const ProfileHeader = ({ {children} - + {!isMobileDevice ? : null} - {isMobileDevice ? : null} ) } diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index 0e841dce..123a97b9 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -64,7 +64,7 @@ export const HeaderStyled = styled.header` ${isMobileDevice ? css` - height: 124px; + height: 40px; padding: 8px; ` : ''} @@ -93,18 +93,29 @@ export const HeaderLogo = styled(Logo)` ${({ isMatchPage }) => (isMatchPage ? css` width: ${client.styles.matchLogoWidth}rem; height: ${client.styles.matchLogoHeight}rem; - ` : '')} - - ${isMobileDevice ? css` - ${client.styles.mobileHeaderLogo} - @media (max-width: 450px){ + ${isMobileDevice ? css` left: 48vw; top: 5px; transform: translateX(-50%); position: absolute; - } - ` : ''} + + ${client.styles.matchPageMobileHeaderLogo} + ` : ''} + ` : css` + ${isMobileDevice ? css` + ${client.styles.mobileHeaderLogo} + + @media (max-width: 450px){ + left: 48vw; + top: 5px; + transform: translateX(-50%); + position: absolute; + } + ` : ''} + `)} + + ` type PositionProps = { diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx index 7ef8827e..2bfbbf4c 100644 --- a/src/features/Search/styled.tsx +++ b/src/features/Search/styled.tsx @@ -92,7 +92,7 @@ export const Form = styled.form` box-shadow: none; ${isMobileDevice ? css` - height: 32px; + height: 28px; padding-right: 5px; ` : ''}; diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx new file mode 100644 index 00000000..8a60bebd --- /dev/null +++ b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/index.tsx @@ -0,0 +1,61 @@ +import { T9n } from 'features/T9n' +import { Settings } from 'features/MultiSourcePlayer/components/Settings' + +import { ControlsPropsExtended } from '../..' +import { LiveBtn } from '../../../../styled' +import { + Controls, + ControlsGroup, + ControlsRow, + Fullscreen, + PlaybackTime, +} from './styled' + +export const ControlsMobile = (controlsProps: {props: ControlsPropsExtended}) => { + const { props } = controlsProps + + const { + backToLive, + controlsVisible, + isFullscreen, + isLive, + onFullscreenClick, + onQualitySelect, + playBackTime, + progressBarElement, + selectedQuality, + videoQualities, + } = props + + return ( + + + + + {playBackTime} + + + + + {isLive && ( + + + + )} + + + + + + {progressBarElement} + + + ) +} diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx new file mode 100644 index 00000000..2b98d9b1 --- /dev/null +++ b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx @@ -0,0 +1,74 @@ +import styled from 'styled-components' + +import { ButtonBase, hoverStyles } from '../../../../styled' + +type FullscreenProps = { + isFullscreen: boolean, +} + +export const Controls = styled.div` + z-index: 50; + position: absolute; + width: 100%; + bottom: 22px; + display: flex; + flex-direction: column; + align-items: center; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); + bottom: 0; + + @media (orientation: landscape){ + bottom: ${({ isFullscreen }) => (isFullscreen ? '20px' : 0)}; + width: 100%; + left: 50%; + transform: translateX(-50%); + } +` + +export const ControlsRow = styled.div` + width: 100%; + display: flex; + justify-content: space-between; + + ${hoverStyles} + + justify-content: flex-start; + + :first-child { + margin-bottom: 15px; + padding: 0 15px; + } + + :last-child { + padding-left: 0; + padding-right: 0; + } +` + +export const ControlsGroup = styled.div` + display: flex; + align-items: center; + + :last-child { + margin-left: auto; + } +` + +export const Fullscreen = styled(ButtonBase)` + width: 20px; + height: 18px; + margin-left: 15px; + background-image: ${({ isFullscreen }) => ( + isFullscreen + ? 'url(/images/player-fullscreen-off.svg)' + : 'url(/images/player-fullscreen-on.svg)' + )}; +` + +export const PlaybackTime = styled.span` + font-weight: 700; + color: #fff; + font-size: 12px; + width: 100px; + white-space: nowrap; +` diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx new file mode 100644 index 00000000..352b1ebe --- /dev/null +++ b/src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx @@ -0,0 +1,114 @@ +import { Fragment } from 'react' + +import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config' +import { + ChaptersText, + Next, + Prev, +} from 'features/MultiSourcePlayer/styled' +import { Settings } from 'features/MultiSourcePlayer/components/Settings' +import { T9n } from 'features/T9n' + +import { ControlsPropsExtended } from '../..' +import { VolumeBar } from '../../../VolumeBar' +import { + Backward, + Controls, + ControlsGroup, + ControlsRow, + Forward, + Fullscreen, + LiveBtn, + PlaybackTime, + PlayStop, +} from '../../../../styled' + +export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) => { + const { props } = controlsProps + const { + activeChapterIndex = 0, + backToLive, + controlsVisible, + isFirstChapterPlaying, + isFullscreen, + isLastChapterPlaying, + isLive, + isStorage, + muted, + numberOfChapters = 0, + onFullscreenClick, + onQualitySelect, + onVolumeChange, + onVolumeClick, + playBackTime, + playing, + playNextChapter, + playPrevChapter, + progressBarElement, + rewindBackward, + rewindForward, + selectedQuality, + togglePlaying, + videoQualities, + volumeInPercent, + } = props + + return ( + + + {progressBarElement} + + + + + {!isLive && !isStorage && ( + + playPrevChapter?.()} + /> + + {activeChapterIndex + 1} / {numberOfChapters} + + playNextChapter?.()} + /> + + )} + + + {playBackTime} + + {REWIND_SECONDS} + {REWIND_SECONDS} + + + + {isLive && ( + + + + )} + + + + + + ) +} diff --git a/src/features/StreamPlayer/components/Controls/index.tsx b/src/features/StreamPlayer/components/Controls/index.tsx new file mode 100644 index 00000000..feb525a6 --- /dev/null +++ b/src/features/StreamPlayer/components/Controls/index.tsx @@ -0,0 +1,143 @@ +import { Fragment, useMemo } from 'react' + +import { DebouncedFunc } from 'lodash' + +import { isMobileDevice } from 'config/userAgent' + +import { secondsToHms } from 'helpers/secondsToHms' + +import { ProgressBar as ProgressBarMultiSource } from 'features/MultiSourcePlayer/components/ProgressBar' +import { Chapters } from 'features/MultiSourcePlayer/types' + +import { ControlsMobile } from './Components/ControlsMobile' +import { ControlsWeb } from './Components/ControlsWeb' +import { ProgressBar } from '../ProgressBar' + +export type ControlsProps = { + activeChapterIndex?: number, + allPlayedProgress?: number, + backToLive?: () => void, + chapters?: Chapters, + controlsVisible: boolean, + duration: number, + isFirstChapterPlaying?: boolean, + isFullscreen: boolean, + isLastChapterPlaying?: boolean, + isLive?: boolean, + isStorage?: boolean, + loadedProgress: number, + muted: boolean, + numberOfChapters?: number, + onFullscreenClick: () => void, + onProgressChange?: (progress: number, seeking: boolean) => void, + onProgressChangeLive?: (progress: number) => void, + onQualitySelect: (quality: string) => void, + onTouchEnd: DebouncedFunc<() => void>, + onTouchStart: () => void, + onVolumeChange: (value: number) => void, + onVolumeClick: () => void, + playNextChapter?: (fromMs?: number | undefined, startOffsetMs?: number | undefined) => void, + playPrevChapter?: (fromMs?: number | undefined, startOffsetMs?: number | undefined) => void, + playedProgress: number, + playing: boolean, + rewindBackward: () => void, + rewindForward: () => void, + selectedQuality: string, + togglePlaying: () => void, + videoQualities: Array, + volume: number, + volumeInPercent: number, +} + +export type ControlsPropsExtended = ControlsProps & { + playBackTime: string, + progressBarElement: JSX.Element, +} + +export const Controls = (props: ControlsProps) => { + const { + activeChapterIndex = 0, + allPlayedProgress = 0, + chapters, + controlsVisible, + duration, + isLive, + isStorage, + loadedProgress, + onProgressChange, + onProgressChangeLive, + onTouchEnd, + onTouchStart, + playedProgress, + } = { ...props } + + const playBackTime = useMemo(() => { + if (isLive || isStorage) { + return secondsToHms(allPlayedProgress / 1000) + } + return `${secondsToHms(allPlayedProgress / 1000)} + ${' / '} + ${secondsToHms(duration / 1000)}` + }, [ + allPlayedProgress, + duration, + isLive, + isStorage, + ]) + + const progressBarElement = useMemo(() => { + if (isLive || isStorage) { + return ( + + ) + } + return ( + + ) + }, [ + activeChapterIndex, + allPlayedProgress, + chapters, + controlsVisible, + duration, + isLive, + isStorage, + loadedProgress, + onProgressChange, + onProgressChangeLive, + onTouchEnd, + onTouchStart, + playedProgress, + ]) + + const controlsPropsExtended: ControlsPropsExtended = { + ...props, + playBackTime, + progressBarElement, + } + + return ( + + {isMobileDevice + ? + : } + + ) +} diff --git a/src/features/StreamPlayer/components/ProgressBar/index.tsx b/src/features/StreamPlayer/components/ProgressBar/index.tsx index 49ccdfc7..2fc3f39c 100644 --- a/src/features/StreamPlayer/components/ProgressBar/index.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/index.tsx @@ -12,6 +12,7 @@ import { type Props = { duration: number, + isScrubberVisible?: boolean, loadedProgress: number, onPlayedProgressChange: (progress: number) => void, playedProgress: number, @@ -19,6 +20,7 @@ type Props = { export const ProgressBar = ({ duration, + isScrubberVisible, loadedProgress, onPlayedProgressChange, playedProgress, @@ -31,9 +33,11 @@ export const ProgressBar = ({ - - - + {isScrubberVisible === false ? null : ( + + + + )} ) } diff --git a/src/features/StreamPlayer/components/ProgressBar/styled.tsx b/src/features/StreamPlayer/components/ProgressBar/styled.tsx index a1757b57..7eacc35e 100644 --- a/src/features/StreamPlayer/components/ProgressBar/styled.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/styled.tsx @@ -1,7 +1,6 @@ -import styled from 'styled-components/macro' - -import { devices } from 'config/devices' +import styled, { css } from 'styled-components/macro' +import { isMobileDevice } from 'config/userAgent' import { Wrapper } from '../TimeTooltip/styled' export const ProgressBarList = styled.div` @@ -10,6 +9,12 @@ export const ProgressBarList = styled.div` position: relative; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; + + ${isMobileDevice + ? css` + height: 1px; + ` + : ''} ` export const LoadedProgress = styled.div` @@ -24,6 +29,12 @@ export const PlayedProgress = styled.div` z-index: 2; background-color: #CC0000; height: 100%; + + ${isMobileDevice + ? css` + background-color: #FFFFFF; + ` + : ''} ` export const Scrubber = styled.div` @@ -43,8 +54,11 @@ export const Scrubber = styled.div` visibility: visible; } - @media ${devices.mobile} { - width: 14px; - height: 14px; - } + ${isMobileDevice + ? css` + width: 14px; + height: 14px; + background-color: #FFFFFF; + ` + : ''} ` diff --git a/src/features/StreamPlayer/components/TimeTooltip/styled.tsx b/src/features/StreamPlayer/components/TimeTooltip/styled.tsx index 17493535..64b7c609 100644 --- a/src/features/StreamPlayer/components/TimeTooltip/styled.tsx +++ b/src/features/StreamPlayer/components/TimeTooltip/styled.tsx @@ -1,4 +1,6 @@ -import styled from 'styled-components/macro' +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' export const Wrapper = styled.div` visibility: hidden; @@ -31,4 +33,10 @@ export const Time = styled.span` font-weight: bold; font-size: 16px; line-height: 20px; + + ${isMobileDevice + ? css` + color: #FFFFFF; + ` + : ''} ` diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index 2ab31f3a..d6f9bd8b 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/src/features/StreamPlayer/index.tsx @@ -1,31 +1,23 @@ -import { T9n } from 'features/T9n' import { Loader } from 'features/Loader' import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config' -import { Settings } from 'features/MultiSourcePlayer/components/Settings' import { VideoPlayer } from 'features/VideoPlayer' +import { Name } from 'features/Name' -import { secondsToHms } from 'helpers' - -import { VolumeBar } from './components/VolumeBar' -import { ProgressBar } from './components/ProgressBar' +import { isMobileDevice } from 'config/userAgent' import { PlayerWrapper, - Controls, - ControlsRow, - ControlsGroup, - CenterControls, - PlayStop, - Fullscreen, LoaderWrapper, + ControlsGradient, + CenterControls, Backward, + PlayStop, Forward, - PlaybackTime, - ControlsGradient, - LiveBtn, + TeamsDetailsWrapper, } from './styled' import type { Props } from './hooks' import { useVideoPlayer } from './hooks' +import { Controls } from './components/Controls' export const StreamPlayer = (props: Props) => { const { profile, url } = props @@ -102,6 +94,15 @@ export const StreamPlayer = (props: Props) => { onError={onError} crossOrigin='use-credentials' /> + + {isMobileDevice && isFullscreen && controlsVisible && profile && ( + + + {` ${profile.team1.score}-${profile.team2.score} `} + + + )} + {ready && ( @@ -119,49 +120,34 @@ export const StreamPlayer = (props: Props) => { )} - - - - - - - - - {secondsToHms(playedProgress / 1000)} - {REWIND_SECONDS} - {REWIND_SECONDS} - - - { - profile?.live && ( - - - - ) - } - - - - - - + + ) } diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 9d2b6fce..df036592 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -1,21 +1,29 @@ -import styled, { css } from 'styled-components/macro' +import styled, { css } from 'styled-components' import { isMobileDevice } from 'config/userAgent' -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;` @@ -115,6 +123,7 @@ export const PlayerWrapper = styled.div` ${isMobileDevice ? css` min-height: auto; + margin-bottom: 15px; ` : ''}; ` @@ -144,7 +153,7 @@ export const ButtonBase = styled.button` const sizes = { lg: 92, - sm: 24, + sm: 29, } type PlayStopProps = { @@ -169,8 +178,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; ` @@ -241,26 +250,24 @@ 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 = { - width?: number, -} - -export const PlaybackTime = styled.span` - width: ${({ width = 130 }) => `${width}px`}; +export const PlaybackTime = styled.span` font-weight: 600; font-size: 16px; color: #fff; + margin-right: 10px; ${isMobileDevice ? css` @@ -292,7 +299,7 @@ export const CenterControls = styled.div` pointer-events: ${({ playing }) => (playing ? 'none' : 'auto')}; ${isMobileDevice ? css` - width: 70%; + width: 135px; ` : ''}; ` @@ -307,12 +314,13 @@ export const LiveBtn = styled(ButtonBase)` padding: 4.5px 8px; background-color: #CC0000; border-radius: 1.3px; +` - ${isMobileDevice - ? css` - @media (max-width: 650px) { - margin-right: 7px; - } - ` - : ''}; +export const TeamsDetailsWrapper = styled.div` + position: absolute; + top: 20px; + left: 15px; + font-size: 16px; + color: #FFFFFF; + z-index: 50; ` diff --git a/src/features/TournamentSubtitle/index.tsx b/src/features/TournamentSubtitle/index.tsx new file mode 100644 index 00000000..e6cf18ec --- /dev/null +++ b/src/features/TournamentSubtitle/index.tsx @@ -0,0 +1,50 @@ +import { SportIcon } from 'components/SportIcon/SportIcon' + +import { useName } from 'features/Name' +import { useUserFavoritesStore } from 'features/UserFavorites/store' + +import { ProfileTypes, SportTypes } from 'config' + +import { usePageParams } from 'hooks/usePageParams' + +import { TournamentType } from 'requests' + +import { + CountryFlag, + FavoriteSign, + NameSignWrapper, + Wrapper, + TournamentName, +} from './styled' + +type Props = { + countryId: number, + sportType?: SportTypes, + tournament: TournamentType, +} + +export const TournamentSubtitle = ({ + countryId, + sportType, + tournament, +}: Props) => { + const { isInFavorites } = useUserFavoritesStore() + const { sportType: sportTypeFromUrl } = usePageParams() + const tournamentName = useName(tournament) + const tournamentInFavorites = isInFavorites(ProfileTypes.TOURNAMENTS, tournament.id) + + return ( + + + + {tournament && ( + + + {tournamentName} + + {tournamentInFavorites && } + + )} + + ) +} diff --git a/src/features/TournamentSubtitle/styled.tsx b/src/features/TournamentSubtitle/styled.tsx new file mode 100644 index 00000000..a687b393 --- /dev/null +++ b/src/features/TournamentSubtitle/styled.tsx @@ -0,0 +1,70 @@ +import styled, { css } from 'styled-components' + +import { isMobileDevice } from 'config/userAgent' + +export const Wrapper = styled.div` + display: flex; + align-items: center; +` + +export const CountryFlag = styled.img` + width: 0.71rem; + height: 0.75rem; + margin-left: 0.567rem; + object-fit: contain; + object-position: bottom; + ${isMobileDevice + ? css` + width: 12px; + height: 8px; + margin-left: 3.5px; + ` + : ''}; +` + +export const NameSignWrapper = styled.div` + display: flex; + max-width: 90%; + align-items: center; +` + +const nameStyles = css` + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +` + +export const TournamentName = styled.span` + max-width: 95%; + color: rgba(255, 255, 255, 0.7); + font-size: 0.567rem; + line-height: 0.95rem; + margin-left: 0.567rem; + ${isMobileDevice + ? css` + font-size: 10px; + line-height: 100%; + max-width: 100%; + ` + : ''}; + + ${nameStyles} +` + +type FavoriteSignProps = { + marginLeft?: number, +} + +export const FavoriteSign = styled.span` + display: inline-block; + width: 0.472rem; + height: 0.472rem; + margin-left: ${({ marginLeft = 9 }) => marginLeft}px; + background: url('/images/sportFavStar.png') no-repeat center / 100% 100%; + ${isMobileDevice + ? css` + width: 10px; + height: 10px; + ` + : ''}; +`