diff --git a/.drone.yml b/.drone.yml index 26b31dc5..31f3bff8 100644 --- a/.drone.yml +++ b/.drone.yml @@ -174,6 +174,7 @@ steps: depends_on: - make-lff + # временно заливаем fqtv вместо tunisia - name: make-diwansport image: node:16-alpine environment: @@ -181,7 +182,7 @@ steps: from_secret: REACT_APP_STRIPE_PK commands: - apk add --no-cache make - - make diwansport-prod + - make fqtv-prod depends_on: - npm-install @@ -196,7 +197,7 @@ steps: from_secret: AWS_DEFAULT_REGION AWS_MAX_ATTEMPTS: 10 commands: - - aws s3 sync build_tunisia s3://insports-diwansport --delete + - aws s3 sync build_fqtv s3://insports-diwansport --delete - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*" # # diwansport.net - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*" # tunisia.insports.tv @@ -796,7 +797,7 @@ steps: from_secret: REACT_APP_STRIPE_PK commands: - apk add --no-cache make - - make diwansport-prod + - make fqtv-prod depends_on: - npm-install @@ -811,7 +812,7 @@ steps: from_secret: AWS_DEFAULT_REGION AWS_MAX_ATTEMPTS: 10 commands: - - aws s3 sync build_tunisia s3://insports-diwansport --delete + - aws s3 sync build_fqtv s3://insports-diwansport --delete - aws cloudfront create-invalidation --distribution-id E3LKAH6TR4O2JL --paths "/*" # # diwansport.net - aws cloudfront create-invalidation --distribution-id E3NJ2G0QSB6MVI --paths "/*" # tunisia.insports.tv diff --git a/.gitignore b/.gitignore index a511bb85..a46eb8ab 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,8 @@ /build_india /build_facr /build_lff +/build_tunisia +/build_fqtv # misc .DS_Store diff --git a/Makefile b/Makefile index 15d8ae0f..cf453ee8 100644 --- a/Makefile +++ b/Makefile @@ -135,6 +135,12 @@ tunisia-build: clean REACT_APP_ENV=staging \ REACT_APP_CLIENT=tunisia \ npm run build + +fqtv-build: clean + REACT_APP_TYPE=ott \ + REACT_APP_ENV=staging \ + REACT_APP_CLIENT=fqtv \ + npm run build lff-build: clean REACT_APP_TYPE=ott \ @@ -195,7 +201,16 @@ diwansport-prod: BUILD_PATH=build_tunisia \ npm run build && cp -r .well-known build_tunisia -deploy-all: prod preprod facr-prod lff-prod diwansport-prod india-prod +fqtv-prod: + rm -rf build_fqtv && \ + REACT_APP_TYPE=ott \ + REACT_APP_ENV=production \ + REACT_APP_STRIPE_PK=pk_live_51J5TEYEDSxVnTgDW5XxhC6ntKZKddXgKHq5HOCDmJTdfSKluMYCdLHOcUA3Miuy8HesxG1eS4c0dQRQpMsEHRrQL00USpu5xIq \ + REACT_APP_CLIENT=fqtv \ + BUILD_PATH=build_fqtv \ + npm run build && cp -r .well-known build_fqtv + +deploy-all: prod preprod facr-prod lff-prod diwansport-prod india-prod fqtv-prod test: npm test diff --git a/package.json b/package.json index c023ddac..6a0a67bf 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lff": "REACT_APP_CLIENT=lff react-scripts start", "india": "REACT_APP_CLIENT=india react-scripts start", "tunisia": "REACT_APP_CLIENT=tunisia react-scripts start", + "fqtv": "REACT_APP_CLIENT=fqtv react-scripts start", "insports": "REACT_APP_CLIENT=insports react-scripts start" }, "dependencies": { diff --git a/public/images/fqtv-auth-logo.svg b/public/images/fqtv-auth-logo.svg new file mode 100644 index 00000000..6b85dc2b --- /dev/null +++ b/public/images/fqtv-auth-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/fqtv-background.png b/public/images/fqtv-background.png new file mode 100644 index 00000000..fcd36444 Binary files /dev/null and b/public/images/fqtv-background.png differ diff --git a/public/images/fqtv-logo.svg b/public/images/fqtv-logo.svg new file mode 100644 index 00000000..b636a2e7 --- /dev/null +++ b/public/images/fqtv-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/config/clients/fqtv.tsx b/src/config/clients/fqtv.tsx new file mode 100644 index 00000000..538e559e --- /dev/null +++ b/src/config/clients/fqtv.tsx @@ -0,0 +1,56 @@ +import { css } from 'styled-components/macro' +import { + ClientConfig, + ClientIds, + ClientNames, +} from './types' + +export const fqtv: ClientConfig = { + auth: { + clientId: ClientIds.Fqtv, + }, + currencyBadge: { + color: '#333333', + secondColor: 'rgba(255, 255, 255, 0.7)', + sign: 'Dollar', + }, + defaultLanguage: 'en', + description: 'Queensland’s streamed competitions, including NPL Men, NPL Women and McDonald\'s FQPL Leagues.', + disabledPreferences: true, + name: ClientNames.Fqtv, + privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web', + showSearch: true, + showSmartBanner: true, + styles: { + background: '', + homePageHeader: css` + background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), + linear-gradient(0deg, #0061DC, #0061DC), + no-repeat center center url(/images/fqtv-background.png); + background-size: 130% 105%; + background-blend-mode: normal, hard-light, normal; + `, + logo: 'fqtv-logo.svg', + logoHeight: 2.465, + logoLeft: 0.71, + logoTop: 1, + logoWidth: 6.37, + matchLogoHeight: 2.465, + matchLogoWidth: 6.37, + matchPageMobileHeaderLogo: css` + width: 90px; + height: 27px; + top: 0; + `, + mobileHeaderLogo: css` + width: 86px; + height: 33px; + `, + userAccountLogo: css` + width: 6.37rem; + height: 2.465rem; + `, + }, + termsLink: '/terms-and-conditions?client_id=insports-ott-web', + title: 'FQTV is the official home of Football', +} diff --git a/src/config/clients/index.tsx b/src/config/clients/index.tsx index 18647023..8b79c639 100644 --- a/src/config/clients/index.tsx +++ b/src/config/clients/index.tsx @@ -6,6 +6,7 @@ import { lff } from './lff' import { insports } from './insports' import { india } from './india' import { tunisia } from './tunisia' +import { fqtv } from './fqtv' export const currentClient = process.env.REACT_APP_CLIENT || 'insports' @@ -15,9 +16,11 @@ export const isInstatClient = currentClient === 'instat' export const isFacrClient = currentClient === 'facr' export const isIndiaClient = currentClient === 'india' export const isTunisClient = currentClient === 'tunisia' +export const isFqtvClient = currentClient === 'fqtv' const clients = { facr, + fqtv, india, insports, instat, diff --git a/src/config/clients/types.tsx b/src/config/clients/types.tsx index 6848cb30..d39a8054 100644 --- a/src/config/clients/types.tsx +++ b/src/config/clients/types.tsx @@ -7,6 +7,7 @@ type StyledCss = ReturnType export enum ClientIds { Facr = 'facr-ott-web', + Fqtv = 'fqtv-ott-web', India = 'india-ott-web', Insports = 'insports-ott-web', Instat = 'ott-web', @@ -17,6 +18,7 @@ export enum ClientIds { export enum ClientNames { Brasil = 'brasil', Facr = 'facr', + Fqtv = 'fqtv', India = 'india', Insports = 'insports', Instat = 'instat', diff --git a/src/config/payments.tsx b/src/config/payments.tsx index 29aba071..02ec99ef 100644 --- a/src/config/payments.tsx +++ b/src/config/payments.tsx @@ -19,4 +19,5 @@ export const payments: PaymentsType = { [ClientNames.Instat]: PaymentSystem.Stripe, [ClientNames.Facr]: PaymentSystem.Stripe, [ClientNames.Lff]: PaymentSystem.Stripe, + [ClientNames.Fqtv]: PaymentSystem.Stripe, } diff --git a/src/features/AuthServiceApp/config/clients/fqtv.tsx b/src/features/AuthServiceApp/config/clients/fqtv.tsx new file mode 100644 index 00000000..5ae9ee18 --- /dev/null +++ b/src/features/AuthServiceApp/config/clients/fqtv.tsx @@ -0,0 +1,67 @@ +import styled, { css } from 'styled-components/macro' + +import { fqtv as platformFqtv } from 'config/clients/fqtv' +import { isMobileDevice } from 'config/userAgent' + +import type { ClientConfig } from './types' + +const Background = styled.div` + position: relative; + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + background: linear-gradient(0deg, rgba(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)), + linear-gradient(0deg, #0061DC, #0061DC), + no-repeat center center url(/images/fqtv-background.png); + background-size: 130% 105%; + background-blend-mode: normal, hard-light, normal; +` + +export const fqtv: ClientConfig = { + ...platformFqtv, + background: Background, + styles: { + centerBlock: css` + margin-top: 9.15rem; + ${isMobileDevice ? css` + margin-top: 107px; + @media screen and (orientation: landscape) { + width: 290px; + margin: auto; + } + ` : ''}; + `, + forgotPasswordInput: css` + border: none; + `, + input: css` + background-color: transparent; + :not(:last-of-type) { + border-color: ${({ theme }) => theme.colors.white}; + } + `, + inputGroup: css` + border: 1px solid ${({ theme }) => theme.colors.white}; + `, + logo: css` + background-image: url(/images/fqtv-auth-logo.svg); + background-position: center; + height: 142px; + width: 378px; + margin-bottom: 1.82rem; + + ${isMobileDevice ? css` + margin-bottom: 15px; + width: 200px; + height: 74px; + ` : ''} + `, + submitButton: css` + :disabled { + background: #FFFFFF; + color: #00244F; + } + `, + }, +} diff --git a/src/features/AuthServiceApp/config/clients/index.tsx b/src/features/AuthServiceApp/config/clients/index.tsx index f29566c8..79309820 100644 --- a/src/features/AuthServiceApp/config/clients/index.tsx +++ b/src/features/AuthServiceApp/config/clients/index.tsx @@ -6,9 +6,11 @@ import { instat } from './instat' import { lff } from './lff' import { india } from './india' import { tunisia } from './tunisia' +import { fqtv } from './fqtv' const clients = { [ClientIds.Facr]: facr, + [ClientIds.Fqtv]: fqtv, [ClientIds.Instat]: instat, [ClientIds.Lff]: lff, [ClientIds.Insports]: insports, diff --git a/src/features/AuthStore/helpers.tsx b/src/features/AuthStore/helpers.tsx index 55c366b7..d9bf7e2b 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -25,7 +25,9 @@ export const getClientNameByRedirectUri = () => { return 'lff.insports' case ClientNames.India: return 'india.insports' - case ClientNames.Tunisia: + case ClientNames.Fqtv: + // тунис временно заморожен + // case ClientNames.Tunisia: return 'diwan.insports' case ClientNames.Facr: return ClientNames.Facr @@ -38,6 +40,7 @@ export const getClientNameByRedirectUri = () => { const clientsForRedirect = { facr: ClientNames.Facr, + fqtv: ClientNames.Fqtv, india: ClientNames.India, lff: ClientNames.Lff, tunisia: ClientNames.Tunisia, diff --git a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx index 40bb0d67..68610801 100644 --- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx +++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx @@ -76,8 +76,6 @@ export const PackageSelectionStep = () => { switch (countryCode?.country_code) { case 'BR': return payments.brasil - case 'TN': - return payments.tunisia default: return payments[client.name] } @@ -86,7 +84,8 @@ export const PackageSelectionStep = () => { const isIframePayment = useMemo(() => { switch (countryCode?.country_code) { case 'BR': - case 'TN': + // тунис временно заморожен + // case 'TN': return true default: return false diff --git a/src/features/Common/Button/styled.tsx b/src/features/Common/Button/styled.tsx index 422fd04c..8ecb693e 100644 --- a/src/features/Common/Button/styled.tsx +++ b/src/features/Common/Button/styled.tsx @@ -1,7 +1,6 @@ import styled, { css } from 'styled-components/macro' import { isMobileDevice } from 'config/userAgent' -import { client } from 'features/AuthServiceApp/config/clients' const baseButtonStyles = css` width: 272px; @@ -54,7 +53,6 @@ export const solidButtonStyles = css` ` : ''}; - ${client.styles.submitButton} ` export const ButtonSolid = styled.button` diff --git a/src/features/CompanyInfo/index.tsx b/src/features/CompanyInfo/index.tsx index 4819c317..a3e66a45 100644 --- a/src/features/CompanyInfo/index.tsx +++ b/src/features/CompanyInfo/index.tsx @@ -40,6 +40,7 @@ export const CompanyInfo = ({ ) case ClientNames.Tunisia: + case ClientNames.Fqtv: return '' case ClientNames.Lff: return ( diff --git a/src/features/HeaderMobile/styled.tsx b/src/features/HeaderMobile/styled.tsx index 33a401c9..4709bd59 100644 --- a/src/features/HeaderMobile/styled.tsx +++ b/src/features/HeaderMobile/styled.tsx @@ -4,6 +4,7 @@ import isUndefined from 'lodash/isUndefined' import { client } from 'config/clients' import { isMobileDevice } from 'config/userAgent' +import { ClientNames } from 'config/clients/types' import { ModalWindow } from 'features/Modal/styled' import { Modal as BaseModal } from 'features/Modal' @@ -15,7 +16,12 @@ export const defaultHeaderStyles = ( color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, ) => { - if (['lff', 'tunisia'].includes(client.name)) { + if ([ + ClientNames.Lff, + ClientNames.Tunisia, + ClientNames.Facr, + ClientNames.Fqtv, + ].includes(client.name)) { return client.styles.homePageHeader } @@ -32,16 +38,16 @@ export const defaultHeaderStyles = ( return css` background: ${color}; z-index: 10; -` + ` } - return client.name === 'facr' ? client.styles.homePageHeader : css` - background: linear-gradient( - 236deg, - ${color} -4.49%, - #000000 50%), - #000000; - z-index: 10; -` + return css` + background: linear-gradient( + 236deg, + ${color} -4.49%, + #000000 50%), + #000000; + z-index: 10; + ` } type HeaderProps = { diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx index b7950745..03f0d4f6 100644 --- a/src/features/ProfileHeader/styled.tsx +++ b/src/features/ProfileHeader/styled.tsx @@ -17,7 +17,12 @@ export const defaultHeaderStyles = ( color: string = DEFAULT_HEADER_COLOR, headerImage: string | undefined | null, ) => { - if ([ClientNames.Lff, ClientNames.Tunisia, ClientNames.Facr].includes(client.name) + if ([ + ClientNames.Lff, + ClientNames.Tunisia, + ClientNames.Facr, + ClientNames.Fqtv, + ].includes(client.name) && !isMatchPage()) { return client.styles.homePageHeader } @@ -64,7 +69,10 @@ export const HeaderStyled = styled.header` ${({ color, headerImage }) => defaultHeaderStyles(color, headerImage)} ${({ color }) => ( - client.name === ClientNames.Lff || client.name === ClientNames.Facr || client.name === ClientNames.Tunisia ? css` + client.name === ClientNames.Lff + || client.name === ClientNames.Facr + || client.name === ClientNames.Fqtv + || client.name === ClientNames.Tunisia ? css` background: ${color}; ` : '' )} @@ -119,6 +127,8 @@ export const HeaderLogo = styled(Logo)` top: 5px; transform: translateX(-50%); position: absolute; + + ${client.styles.matchPageMobileHeaderLogo} } ` : ''} `)} diff --git a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx index 51d2a481..25966479 100644 --- a/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx +++ b/src/features/StreamPlayer/components/Controls/Components/ControlsMobile/styled.tsx @@ -7,7 +7,7 @@ type FullscreenProps = { } export const Controls = styled.div` - z-index: 14; + z-index: 9; position: absolute; width: 100%; bottom: 22px; diff --git a/src/features/Theme/config.tsx b/src/features/Theme/config.tsx index 94730203..ed2d8015 100644 --- a/src/features/Theme/config.tsx +++ b/src/features/Theme/config.tsx @@ -105,6 +105,33 @@ export const tunisTheme: CustomTheme = { name: 'tunisia', } -type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia' +export const fqtvTheme: CustomTheme = { + ...defaultTheme, + colors: { + ...defaultTheme.colors, + background: '#1B1E27', + button: '#016BD8', + buttonHover: '#016BD8', + collapseTournamentBackground: 'linear-gradient(236.13deg, rgba(1, 48, 121, 0.8) -4.49%, rgba(52, 62, 73, 0.8) 98.29%), #363F49;', + comboboxBackground: '#1A2634', + comboboxItemHover: '#016BD8', + dateFilter: 'rgba(255, 255, 255, 0.5)', + error: '#FF4E77', + inputs: '#363F49', + liveMatchPlaylistBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + liveMatchPlaylistBtnHover: '#016BD8', + loaderAuth: '#00244F', + matchCardBackground: '#363F49', + matchHeaderBackground: '#0C2340', + modalBackground: '#1A2634', + packageBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + playerActionBtnBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + searchBtnHover: '#016BD8', + unsubscribeItemBackground: 'linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #363F49', + }, + name: 'fqtv', +} + +type Name = 'light' | 'dark' | 'lff' | 'facr' | 'tunisia' | 'fqtv' export type CustomTheme = typeof defaultTheme diff --git a/src/features/Theme/index.tsx b/src/features/Theme/index.tsx index 07c86580..88dc2e05 100644 --- a/src/features/Theme/index.tsx +++ b/src/features/Theme/index.tsx @@ -16,6 +16,7 @@ import { CustomTheme, defaultTheme, facrTheme, + fqtvTheme, lffTheme, tunisTheme, } from './config' @@ -57,6 +58,9 @@ export const Theme = ({ children }: Props) => { case ClientNames.Tunisia: setTheme(tunisTheme) break + case ClientNames.Fqtv: + setTheme(fqtvTheme) + break default: setTheme(defaultTheme) break diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 07cb0cb4..3a42828c 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -3,7 +3,7 @@ declare namespace NodeJS { export interface ProcessEnv { - REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunisia', + REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunisia' | 'fqtv', REACT_APP_ENV: 'production' | 'preproduction' | 'staging', REACT_APP_STAGE: 'staging' | 'test-a' | 'test-b' | 'test-c' | 'test-d' | 'test-e' | 'test-f' | 'test-g' | 'test-h' | 'test-i' | 'test-j' | 'test', REACT_APP_TYPE: 'auth-service' | 'ott',