diff --git a/.drone.yml b/.drone.yml index a39ea09d..5d11346e 100644 --- a/.drone.yml +++ b/.drone.yml @@ -203,6 +203,35 @@ steps: depends_on: - make-diwansport + - name: make-fqtv + image: node:16-alpine + environment: + REACT_APP_STRIPE_PK: + from_secret: REACT_APP_STRIPE_PK + commands: + - apk add --no-cache make + - make fqtv-prod + depends_on: + - npm-install + + - name: deploy-fqtv + image: amazon/aws-cli:latest + environment: + AWS_ACCESS_KEY_ID: + from_secret: AWS_ACCESS_KEY_ID + AWS_SECRET_ACCESS_KEY: + from_secret: AWS_SECRET_ACCESS_KEY + AWS_DEFAULT_REGION: + from_secret: AWS_DEFAULT_REGION + AWS_MAX_ATTEMPTS: 10 + commands: + - aws s3 sync build_fqtv s3://insports-fqtv-com-au --delete + - aws cloudfront create-invalidation --distribution-id E2MFJBSBIUQSDH --paths "/*" # # fqtv.insports.tv + - aws cloudfront create-invalidation --distribution-id E22TED4Z46Q01V --paths "/*" # fqtv.com.au + + depends_on: + - make-fqtv + --- kind: pipeline type: docker diff --git a/.gitignore b/.gitignore index a511bb85..fd907523 100644 --- a/.gitignore +++ b/.gitignore @@ -11,11 +11,7 @@ /cypress/screenshots # production -/build -/build_auth -/build_india -/build_facr -/build_lff +/build* # misc .DS_Store diff --git a/Makefile b/Makefile index 135052ed..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 \ 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..d7b21fac 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', @@ -15,13 +16,14 @@ export enum ClientIds { } export enum ClientNames { - Brasil = 'brasil', - Facr = 'facr', - India = 'india', - Insports = 'insports', - Instat = 'instat', - Lff = 'lff', - Tunisia = 'tunisia' + Brasil = 'brasil', // Бразилия + Facr = 'facr', // Чехия + Fqtv = 'fqtv', // Австралия + India = 'india', // Индия + Insports = 'insports', // Глобал + Instat = 'instat', // Глобал + Lff = 'lff', // Латвия + Tunisia = 'tunisia' // Тунис } export type ClientConfig = { diff --git a/src/config/payments.tsx b/src/config/payments.tsx index 29aba071..56b5a5a0 100644 --- a/src/config/payments.tsx +++ b/src/config/payments.tsx @@ -7,16 +7,23 @@ export enum PaymentSystem { Stripe = 'stripe' } +export enum CountryCode { + BR = 'BR', // Бразилия + IN = 'IN', // Индия + TN = 'TN' // Тунис +} + type PaymentsType = { [key in ClientNames]: PaymentSystem } export const payments: PaymentsType = { [ClientNames.Tunisia]: PaymentSystem.Paymee, - brasil: PaymentSystem.PagBrazil, + [ClientNames.Brasil]: PaymentSystem.PagBrazil, [ClientNames.India]: PaymentSystem.Paytm, [ClientNames.Insports]: PaymentSystem.Stripe, [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..d8d08216 100644 --- a/src/features/AuthStore/helpers.tsx +++ b/src/features/AuthStore/helpers.tsx @@ -27,6 +27,8 @@ export const getClientNameByRedirectUri = () => { return 'india.insports' case ClientNames.Tunisia: return 'diwan.insports' + case ClientNames.Fqtv: + return 'fqtv.insports' case ClientNames.Facr: return ClientNames.Facr case ClientNames.Instat: @@ -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..2fcec4fc 100644 --- a/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx +++ b/src/features/BuyMatchPopup/components/PackageSelectionStep/index.tsx @@ -9,7 +9,7 @@ import { import isNull from 'lodash/isNull' import { MDASH } from 'config' -import { payments } from 'config/payments' +import { payments, CountryCode } from 'config/payments' import { client } from 'config/clients' import { CountryCodeType, getCountryCode } from 'requests/getCountryCode' @@ -74,9 +74,9 @@ export const PackageSelectionStep = () => { const paymentSystem = useMemo(() => { switch (countryCode?.country_code) { - case 'BR': + case CountryCode.BR: return payments.brasil - case 'TN': + case CountryCode.TN: return payments.tunisia default: return payments[client.name] @@ -85,8 +85,8 @@ export const PackageSelectionStep = () => { const isIframePayment = useMemo(() => { switch (countryCode?.country_code) { - case 'BR': - case 'TN': + case CountryCode.BR: + case CountryCode.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',