feat(ott-2362): create lff client

keep-around/002e6884c97b0368f2ec2a32a563fe4abb2b4d29
nevainero 4 years ago committed by Rakov Roman
parent 75b4854071
commit d529844b5d
  1. 3
      package.json
  2. 9
      public/images/lff_auth_logo.svg
  3. 22
      public/images/score-switch-lff-mobile-off.svg
  4. 22
      public/images/score-switch-lff-mobile-on.svg
  5. 22
      public/images/score-switch-lff-off.svg
  6. 22
      public/images/score-switch-lff-on.svg
  7. 2
      src/config/clients/index.tsx
  8. 28
      src/config/clients/lff.tsx
  9. 2
      src/config/clients/types.tsx
  10. 1
      src/features/App/AuthenticatedApp.tsx
  11. 4
      src/features/AuthServiceApp/config/clients/index.tsx
  12. 42
      src/features/AuthServiceApp/config/clients/lff.tsx
  13. 8
      src/features/Common/Button/styled.tsx
  14. 14
      src/features/HeaderFilters/components/DateFilter/styled.tsx
  15. 18
      src/features/HeaderMenu/styled.tsx
  16. 23
      src/features/HeaderMobile/styled.tsx
  17. 4
      src/features/Logo/index.tsx
  18. 2
      src/features/MatchPage/index.tsx
  19. 22
      src/features/MatchSidePlaylists/styled.tsx
  20. 3
      src/features/MatchSwitches/components/ScoreSwitch/index.tsx
  21. 5
      src/features/ProfileHeader/index.tsx
  22. 48
      src/features/ProfileHeader/styled.tsx
  23. 6
      src/features/Theme/config.tsx
  24. 11
      src/features/TournamentList/components/TournamentMobile/index.tsx
  25. 7
      src/features/TournamentList/components/TournamentMobile/styled.tsx
  26. 7
      src/features/TournamentPage/hooks.tsx
  27. 51
      src/features/UserAccount/components/Header/index.tsx
  28. 4
      src/features/UserAccount/components/ScoreSwitch/index.tsx
  29. 3
      src/features/UserAccount/styled.tsx
  30. 17
      src/helpers/getSwitchScoreIconName/index.tsx
  31. 15
      src/helpers/isPermittedTournament/index.tsx

@ -14,7 +14,8 @@
"build-storybook": "build-storybook -s public",
"start:auth": "REACT_APP_TYPE=auth-service react-scripts start",
"test:auth": "REACT_APP_TYPE=auth-service react-scripts test",
"facr": "REACT_APP_CLIENT=facr react-scripts start"
"facr": "REACT_APP_CLIENT=facr react-scripts start",
"lff": "REACT_APP_CLIENT=lff react-scripts start"
},
"dependencies": {
"@stripe/react-stripe-js": "^1.4.0",

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 21 KiB

@ -0,0 +1,22 @@
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="37" y="17.5" width="36" height="14" rx="7" transform="rotate(-180 37 17.5)" fill="#3F3F3F"/>
<g filter="url(#filter0_dd_24561_217032)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.5C5.02944 1.5 1 5.52944 1 10.5C1 15.4706 5.02944 19.5 10 19.5C14.9706 19.5 19 15.4706 19 10.5C19 5.52944 14.9706 1.5 10 1.5Z" fill="#9F9F9F"/>
</g>
<defs>
<filter id="filter0_dd_24561_217032" x="0" y="0.5" width="20" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24561_217032"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_24561_217032" result="effect2_dropShadow_24561_217032"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_24561_217032" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,22 @@
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="3.5" width="36" height="14" rx="7" fill="#A30C2F"/>
<g filter="url(#filter0_dd_24503_218575)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 19.5C31.9706 19.5 36 15.4706 36 10.5C36 5.52944 31.9706 1.5 27 1.5C22.0294 1.5 18 5.52944 18 10.5C18 15.4706 22.0294 19.5 27 19.5Z" fill="#9F9F9F"/>
</g>
<defs>
<filter id="filter0_dd_24503_218575" x="17" y="0.5" width="20" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_24503_218575"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_24503_218575" result="effect2_dropShadow_24503_218575"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_24503_218575" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,22 @@
<svg width="100%" height="100%" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31 18H11C7.1 18 4 14.9 4 11C4 7.1 7.1 4 11 4H31C34.9 4 38 7.1 38 11C38 14.9 34.9 18 31 18Z" fill="#B8C1CC" fill-opacity="0.3"/>
<g filter="url(#filter0_dd)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" fill="#B8C1CC"/>
</g>
<defs>
<filter id="filter0_dd" x="0" y="0" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -0,0 +1,22 @@
<svg width="100%" height="100%" viewBox="0 0 38 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="1" d="M27 18H7C3.1 18 0 14.9 0 11C0 7.1 3.1 4 7 4H27C30.9 4 34 7.1 34 11C34 14.9 30.9 18 27 18Z" fill="#1D1D1D"/>
<g filter="url(#filter0_dd)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27 21C32.5228 21 37 16.5228 37 11C37 5.47715 32.5228 1 27 1C21.4772 1 17 5.47715 17 11C17 16.5228 21.4772 21 27 21Z" fill="#B8C1CC"/>
</g>
<defs>
<filter id="filter0_dd" x="16" y="0" width="22" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.237602 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="0.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -2,12 +2,14 @@ import type { ClientConfig } from './types'
import { facr } from './facr'
import { instat } from './instat'
import { lff } from './lff'
export const currentClient = process.env.REACT_APP_CLIENT || 'instat'
const clients = {
facr,
instat,
lff,
}
export const client: ClientConfig = clients[currentClient]

@ -0,0 +1,28 @@
import {
ClientConfig,
ClientIds,
ClientNames,
} from './types'
export const lff: ClientConfig = {
auth: {
clientId: ClientIds.Lff,
},
defaultLanguage: 'en',
description: 'Live sports streaming platform. Football, basketball, ice hockey and more. Access to various player playlists and game highlights. Multiple subscription options. Available across all devices.',
disabledPreferences: true,
name: ClientNames.Lff,
privacyLink: '/clients/instat/terms-and-conditions.html',
showSearch: true,
styles: {
background: 'background-image: url(/images/Checker.png);',
logo: 'lff_auth_logo.svg',
logoHeight: 6,
logoLeft: 1.2,
logoTop: 1.2,
logoWidth: 6,
matchLogoHeight: 2.5,
matchLogoWidth: 2.5,
},
title: 'InStat TV - The Home of Sports Streaming',
}

@ -9,11 +9,13 @@ type StyledCss = ReturnType<typeof css>
export enum ClientIds {
Facr = 'facr-ott-web',
Instat = 'ott-web',
Lff = 'lff-ott-web',
}
export enum ClientNames {
Facr = 'facr',
Instat = 'instat',
Lff = 'lff',
}
export type ClientConfig = {

@ -36,7 +36,6 @@ const SystemSettings = lazy(() => import('features/SystemSettings'))
export const AuthenticatedApp = () => {
useLexicsConfig(indexLexics)
return (
<StripeElements>
<CardsStore>

@ -2,12 +2,14 @@ import { ClientIds } from 'config/clients/types'
import { facr } from './facr'
import { instat } from './instat'
import { lff } from './lff'
const clients = {
[ClientIds.Facr]: facr,
[ClientIds.Instat]: instat,
[ClientIds.Lff]: lff,
}
const params = new URLSearchParams(window.location.search)
const clientId = params.get('client_id') as ClientIds
export const client = clients[clientId] || instat
export const client = clients[clientId] || lff

@ -0,0 +1,42 @@
import styled, { css } from 'styled-components/macro'
import { lff as platformLff } from 'config/clients/lff'
import type { ClientConfig } from './types'
const Background = styled.div`
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
background: linear-gradient(18.42deg, #242321 8.36%, #242321 42.61%, #DB1C49 86.2%);
`
export const lff: ClientConfig = {
...platformLff,
background: Background,
styles: {
input: css`
background-color: transparent;
:not(:last-child) {
border-color: ${({ theme }) => theme.colors.text100};
}
`,
inputGroup: css`
border: 1px solid ${({ theme }) => theme.colors.text100};
`,
loader: css`
color: #00257A;
`,
logo: css`
background-image: url(/images/lff_auth_logo.svg);
height: 220px;
width: 220px;
`,
submitButton: css`
background-color: #DF1C4A;
color: white;
`,
},
}

@ -1,6 +1,7 @@
import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import { client } from 'config/clients'
const baseButtonStyles = css`
width: 272px;
@ -44,13 +45,18 @@ export const solidButtonStyles = css`
font-weight: bold;
border-color: transparent;
background-color: #294FC3;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
${isMobileDevice
? css`
height: 30px;
min-height: 30px;
`
: ''};
${client.name === 'lff' ? css`
background: #DF1C4A;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
` : ''}
`
export const ButtonSolid = styled.button`

@ -1,6 +1,7 @@
import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import { client } from 'config/clients'
import { devices } from 'config'
export const BaseButton = styled.button`
@ -23,6 +24,10 @@ export const Wrapper = styled.div`
width: 100%;
}
${client.name === 'lff' ? css`
color: rgba(255, 255, 255, 0.5);
` : ''}
${isMobileDevice
? css`
/* padding-top: 4px; */
@ -80,6 +85,11 @@ export const DateButton = styled(BaseButton)<DateButtonProps>`
opacity: 0.5;
margin-left: 10px;
${client.name === 'lff' ? css`
color: rgba(255, 255, 255, 0.5);
opacity: 1;
` : ''}
${isMobileDevice
? css`
position: static;
@ -149,6 +159,10 @@ export const WeekDay = styled(BaseButton)<WeekDayProps>`
color: #FFFFFF;
}
${client.name === 'lff' ? css`
color: rgba(255, 255, 255, 0.5);
` : ''}
${({ selected }) => (
selected
? 'color: #FFFFFF;'

@ -36,11 +36,15 @@ export const HeaderLogo = styled(Logo)`
height: ${client.styles.matchLogoHeight}rem;
` : '')}
${isMobileDevice
? css`
width: 65px;
height: 15px;
margin: 5px 22px;
`
: ''}
${isMobileDevice && client.name !== 'lff' ? css`
width: 65px;
height: 15px;
margin: 5px 22px;
` : ''}
${isMobileDevice && client.name === 'lff' ? css`
width: 42px;
height: 42px;
margin: 5px 22px;
` : ''}
`

@ -5,7 +5,6 @@ import isUndefined from 'lodash/isUndefined'
import { client } from 'config/clients'
import { isMobileDevice } from 'config/userAgent'
import { Logo } from 'features/Logo'
import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { customScrollbar } from 'features/Common'
@ -15,7 +14,13 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
export const defaultHeaderStyles = (
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
) => {
if (headerImage && client.name !== 'facr') {
if (client.name === 'lff') {
return css`
background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
`
}
if (headerImage && client.name === 'instat') {
return css`background: url(${headerImage}.png);
background-size: 100% 100%;
@media (max-width: 450px){
@ -93,20 +98,6 @@ export const HeaderGroup = styled.div<Props>`
: ''};
`
export const HeaderLogo = styled(Logo)`
${({ isMatchPage }) => (isMatchPage ? css`
width: ${client.styles.matchLogoWidth}rem;
height: ${client.styles.matchLogoHeight}rem;
` : '')}
${isMobileDevice
? css`
width: 65px;
height: 15px;
`
: ''}
`
type PositionProps = {
isMatchPage?: boolean,
left?: number,

@ -21,8 +21,8 @@ export const Logo = styled.div<Props>`
${isMobileDevice
? css`
width: 144px;
height: 33px;
width: 46px;
height: 46px;
@media screen and (orientation: landscape){
width: 92px;

@ -70,7 +70,7 @@ const MatchPage = () => {
return (
<PageWrapper>
<ProfileHeader color='rgb(0,0,0)' height={4.5}>
<ProfileHeader color='#2B2A28' height={4.5}>
<MatchProfileCard profile={profile} />
</ProfileHeader>
<Main>

@ -4,6 +4,7 @@ import { devices } from 'config/devices'
import { isMobileDevice } from 'config/userAgent'
import { customScrollbar } from 'features/Common'
import { client } from '../../config/clients'
export const Wrapper = styled.div`
${isMobileDevice
@ -92,16 +93,17 @@ export const Button = styled.button<ButtonProps>`
border-radius: 1.8px;
}
${({ active, theme }) => (
active
? css`
background-color: ${theme.colors.button};
&:hover {
background-color: #0c3ccc;
}
`
: ''
)}
${({ active, theme }) => {
const bgColor = client.name === 'lff' ? '#A30C2F' : theme.colors.button
const bgHoverColor = client.name === 'lff' ? '#A30C2F' : '#0c3ccc'
return active ? css`
background-color: ${bgColor};
&:hover {
background-color: ${bgHoverColor};
}
` : ''
}}
`
export const Title = styled.span`

@ -1,5 +1,6 @@
import { isMobileDevice } from 'config/userAgent'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'
import {
Switch,
@ -20,7 +21,7 @@ export const ScoreSwitch = () => {
>
<Title t={isMobileDevice ? 'scores' : 'hide_score'} />
<Icon
iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'}
iconName={getSwitchScoreIconName()}
isOn={!isScoreHidden}
/>
</Switch>

@ -50,8 +50,9 @@ export const ProfileHeader = ({
const url = '/images/5704'
const color = useProfileColor(profileId)
const imageHeader = profileId === 5704
&& sportType === SportTypes.FOOTBALL
&& profileType === ProfileTypes.TOURNAMENTS ? url : headerImage
&& sportType === SportTypes.FOOTBALL
&& profileType === ProfileTypes.TOURNAMENTS ? url : headerImage
return (
<Fragment>
<HeaderStyled

@ -13,7 +13,13 @@ export const DEFAULT_HEADER_COLOR = 'rgba(53, 96, 225, 0.56)'
export const defaultHeaderStyles = (
color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null,
) => {
if (headerImage && client.name !== 'facr') {
if (client.name === 'lff') {
return css`
background: linear-gradient(38.47deg, #242321 26.08%, #DB1C49 95.99%), #000000;
`
}
if (headerImage && client.name === 'instat') {
return css`background: url(${headerImage}.png);
background-size: 100% 100%;
@media (max-width: 450px){
@ -56,6 +62,12 @@ export const HeaderStyled = styled.header<HeaderProps>`
${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)}
${({ color }) => (
client.name === 'lff' ? css`
background: ${color};
` : ''
)}
${isMobileDevice
? css`
padding: 8px;
@ -88,19 +100,27 @@ export const HeaderLogo = styled(Logo)`
height: ${client.styles.matchLogoHeight}rem;
` : '')}
${isMobileDevice
? css`
width: 85px;
height: 20px;
@media (max-width: 450px){
left: 48vw;
top: 5px;
transform: translateX(-50%);
position: absolute;
}
`
: ''}
${client.name === 'lff' ? css`
top: 5px;
left: 20px;
` : ''}
${isMobileDevice ? css`
width: 85px;
height: 20px;
@media (max-width: 450px){
left: 48vw;
top: 5px;
transform: translateX(-50%);
position: absolute;
}
` : ''}
${client.name === 'lff' && isMobileDevice ? css`
width: 44px;
height: 44px;
` : ''}
`
type PositionProps = {

@ -1,3 +1,5 @@
import { client } from 'config/clients'
export const lightTheme = {
colors: {
background: '',
@ -21,14 +23,14 @@ export const lightTheme = {
export const darkTheme = {
colors: {
background: `
background: client.name !== 'lff' ? `
radial-gradient(
49.07% 49.07% at 50% 29.54%,
rgba(255, 255, 255, 0.14) 0%,
rgba(255, 255, 255, 0) 100%
),
rgba(0, 0, 0, 0.9)
`,
` : '#1D1D1D',
black: '#000000',
black40: 'rgba(0, 0, 0, 0.4)',
black70: 'rgba(0, 0, 0, 0.7)',

@ -25,6 +25,7 @@ import {
ScMatchesWrapper,
ScSecondInfo,
} from './styled'
import { client } from '../../../../config/clients'
export type TournamentProps = {
tournament: TournamentType & {
@ -53,9 +54,17 @@ export const TournamentMobile = ({
ProfileTypes.TOURNAMENTS,
tournament.id,
)
const activeWrapperColor = client.name === 'lff' ? '#A30C2F' : '#294FC3'
const wrapperColor = open ? activeWrapperColor : '#3f3f3f'
return (
<CardWrapperOuter>
<CardWrapper open={open} onClick={() => setOpen(!open)}>
<CardWrapper
onClick={() => setOpen(!open)}
color={wrapperColor}
open={open}
>
<ScFirstInfo>
<SportIcon fill={open ? '#ffffff' : ''} sport={sportType} />
<CountryFlag

@ -22,11 +22,14 @@ export const CardWrapperOuter = styled.li.attrs({
: ''};
`
export const CardWrapper = styled.div<{ open: boolean }>`
export const CardWrapper = styled.div<{
color: string,
open: boolean,
}>`
display: flex;
align-items: center;
background-color: ${({ open }) => (open ? '#294FC3' : '#3f3f3f')};
background-color: ${({ color }) => color};
cursor: pointer;
${isMobileDevice
? css`

@ -3,6 +3,7 @@ import {
useState,
useCallback,
} from 'react'
import { useHistory } from 'react-router'
import type { TournamentInfo } from 'requests'
import { getTournamentInfo, getTournamentMatches } from 'requests'
@ -10,17 +11,23 @@ import { getTournamentInfo, getTournamentMatches } from 'requests'
import { usePageParams } from 'hooks/usePageParams'
import { useName } from 'features/Name'
import { isPermittedTournament } from '../../helpers/isPermittedTournament'
export const useTournamentPage = () => {
const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null)
const { profileId: tournamentId, sportType } = usePageParams()
const country = useName(tournamentProfile?.country || {})
const history = useHistory()
useEffect(() => {
if (!isPermittedTournament(tournamentId, sportType)) {
history.push('/')
}
getTournamentInfo(sportType, tournamentId)
.then(setTournamentProfile)
},
[
history,
sportType,
tournamentId,
])

@ -20,16 +20,14 @@ const HeaderStyled = styled.header`
margin-bottom: 0;
}
${isMobileDevice
? css`
@media (max-width: 650px){
margin-bottom: 20px;
}
@media (orientation: landscape){
margin-bottom: 20px;
}
`
: ''};
${isMobileDevice ? css`
@media (max-width: 650px) {
margin-bottom: 20px;
}
@media (orientation: landscape) {
margin-bottom: 20px;
}
` : ''};
`
const HomeIcon = styled.div`
@ -46,18 +44,37 @@ export const HeaderLogo = styled(Logo)`
top: ${client.styles.logoTop}rem;
left: ${client.styles.logoLeft}rem;
${isMobileDevice
? css`
left: 50%;
transform: translateX(-50%);
`
: ''}
${isMobileDevice ? css`
left: 50%;
transform: translateX(-50%);
` : ''}
`
export const HeaderLffLogo = styled(Logo)`
position: absolute;
width: 80px;
height: 80px;
top: 36px;
left: 32px;
${isMobileDevice ? css`
width: 46px;
height: 46px;
left: 15px;
top: 15px;
` : ''}
`
export const Header = () => (
<HeaderStyled>
<Link to={PAGES.home}>
<HeaderLogo />
{
client.name === 'lff' ? (
<HeaderLffLogo />
) : (
<HeaderLogo />
)
}
</Link>
<Link to={PAGES.home}>
<HomeIcon />

@ -2,13 +2,13 @@ import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'
import { devices } from 'config'
import { useMatchSwitchesStore } from 'features/MatchSwitches'
import {
Switch,
Icon,
Title as TitleBase,
} from 'features/MatchSwitches/styled'
import { getSwitchScoreIconName } from 'helpers/getSwitchScoreIconName'
type TWrapper = {
isHidden?: boolean,
@ -61,7 +61,7 @@ export const ScoreSwitch = ({ className }: Props) => {
<Icon
width={1.8}
height={1.4}
iconName={isMobileDevice ? 'score-switch-mobile' : 'score-switch'}
iconName={getSwitchScoreIconName()}
isOn={isScoreHidden}
/>
</Switch>

@ -6,6 +6,7 @@ import { devices } from 'config/devices'
import { isMobileDevice } from 'config/userAgent'
import { ButtonSolid, ButtonOutline } from 'features/Common/Button'
import { client } from '../../config/clients'
export const SolidButton = styled(ButtonSolid)`
width: auto;
@ -13,7 +14,7 @@ export const SolidButton = styled(ButtonSolid)`
padding: 0 0.94rem;
color: white;
font-weight: bold;
background-color: #294fc4;
background-color: ${client.name === 'lff' ? '#A30C2F' : '#294fc4'};
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
border-color: transparent;
border-radius: 5px;

@ -0,0 +1,17 @@
import { isMobileDevice } from 'config/userAgent'
import { client } from 'config/clients'
export const getSwitchScoreIconName = () => {
switch (true) {
case client.name === 'lff' && !isMobileDevice:
return 'score-switch-lff'
case client.name === 'lff' && isMobileDevice:
return 'score-switch-lff-mobile'
case client.name !== 'lff' && !isMobileDevice:
return 'score-switch'
case client.name !== 'lff' && isMobileDevice:
return 'score-switch-mobile'
default:
return 'score-switch'
}
}

@ -0,0 +1,15 @@
import includes from 'lodash/includes'
import { client } from 'config/clients'
import { SportTypes } from 'config/sportTypes'
export const isPermittedTournament = (
tournamentId: number,
sportType: SportTypes,
) => {
if (client.name !== 'lff') {
return true
}
return includes([928, 1620], tournamentId) && sportType === 1
}
Loading…
Cancel
Save