feat(#787): added views peaks

.drone.yml

@@ -1059,4 +1059,57 @@ steps:
       - aws s3 sync build_insport_live s3://insports-live --delete
       - aws cloudfront create-invalidation --distribution-id E1LBC88VYP6XVB --paths "/*"
     depends_on:
-      - make-insport-live
+      - make-insport-live
+
+---
+kind: pipeline
+type: docker
+name: deploy demo.insports.tv
+
+concurrency:
+  limit: 1
+
+platform:
+  os: linux
+  arch: amd64
+
+trigger:
+  ref:
+  - refs/heads/demo.insports.tv
+
+steps:
+  - name: npm-install
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - npm install --legacy-peer-deps
+
+  - name: make-demo-rustat
+    image: node:16-alpine
+    environment:
+      REACT_APP_STRIPE_PK:
+        from_secret: REACT_APP_STRIPE_PK
+    commands:
+      - apk add --no-cache make
+      - make rustat-prod
+    depends_on:
+      - npm-install
+
+  - name: deploy-demo-rustat
+    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_rustat s3://insports-tv-demo --delete
+      - aws cloudfront create-invalidation --distribution-id ERAVP3O9V0PWR --paths "/*"
+    depends_on:
+      - make-demo-rustat

src/config/clients/index.tsx

@@ -7,6 +7,7 @@ import { insports } from './insports'
 import { india } from './india'
 import { tunisia } from './tunisia'
 import { fqtv } from './fqtv'
+import { rustat } from './rustat'
 
 export const currentClient = process.env.REACT_APP_CLIENT || 'insports'
 
@@ -17,6 +18,7 @@ export const isFacrClient = currentClient === 'facr'
 export const isIndiaClient = currentClient === 'india'
 export const isTunisClient = currentClient === 'tunisia'
 export const isFqtvClient = currentClient === 'fqtv'
+export const isRustatClient = currentClient === 'rustat'
 
 const clients = {
   facr,
@@ -25,6 +27,7 @@ const clients = {
   insports,
   instat,
   lff,
+  rustat,
   tunisia,
 }
 

src/config/clients/rustat.tsx

@@ -0,0 +1,51 @@
+import { css } from 'styled-components/macro'
+
+import {
+  ClientConfig,
+  ClientIds,
+  ClientNames,
+} from './types'
+
+export const rustat: ClientConfig = {
+  auth: {
+    clientId: ClientIds.Rustat,
+  },
+  currencyBadge: {
+    color: '#333333',
+    secondColor: 'rgba(255, 255, 255, 0.7)',
+    sign: 'Dollar',
+  },
+  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,
+  host: 'demo.insports.tv',
+  name: ClientNames.Rustat,
+  privacyLink: '/privacy-policy-and-statement?client_id=insports-ott-web',
+  showSearch: true,
+  showSmartBanner: true,
+  styles: {
+    background: 'background-image: url(/images/Checker.png);',
+    logo: 'insports-logo.svg',
+    logoHeight: 2.465,
+    logoLeft: 1.7,
+    logoTop: 1.5,
+    logoWidth: 6.37,
+    matchLogoHeight: 2.465,
+    matchLogoWidth: 6.37,
+    matchPageMobileHeaderLogo: css`
+      width: 90px;
+      height: 27px;
+      top: 0;
+    `,
+    mobileHeaderLogo: css`
+      width: 77px;
+      height: 24px;
+    `,
+    userAccountLogo: css`
+      width: 6.37rem;
+      height: 2.465rem;
+    `,
+  },
+  termsLink: '/terms-and-conditions?client_id=insports-ott-web',
+  title: 'InSports TV - The Home of Sports Streaming',
+}

src/config/clients/types.tsx

@@ -12,7 +12,8 @@ export enum ClientIds {
   Insports = 'insports-ott-web',
   Instat = 'ott-web',
   Lff = 'lff-ott-web',
-  Tunisia = 'tunisia-ott-web',
+  Rustat = 'rustat-ott-web',
+  Tunisia = 'tunisia-ott-web'
 }
 
 export enum ClientNames {
@@ -22,8 +23,9 @@ export enum ClientNames {
   India = 'india', // Индия
   Insports = 'insports', // Глобал
   Instat = 'instat', // Глобал
-  Lff = 'lff', // Латвия
-  Tunisia = 'tunisia' // Тунис
+  Lff = 'lff', // Тунис
+  Rustat = 'rustat', // Латвия
+  Tunisia = 'tunisia' // Россия
 }
 
 export type ClientConfig = {

src/config/payments.tsx

@@ -26,4 +26,5 @@ export const payments: PaymentsType = {
   [ClientNames.Facr]: PaymentSystem.Stripe,
   [ClientNames.Lff]: PaymentSystem.Stripe,
   [ClientNames.Fqtv]: PaymentSystem.Stripe,
+  [ClientNames.Rustat]: PaymentSystem.Stripe,
 }

src/features/AuthServiceApp/config/clients/index.tsx

@@ -7,6 +7,7 @@ import { lff } from './lff'
 import { india } from './india'
 import { tunisia } from './tunisia'
 import { fqtv } from './fqtv'
+import { rustat } from './rustat'
 
 export const clients = {
   [ClientIds.Facr]: facr,
@@ -16,6 +17,7 @@ export const clients = {
   [ClientIds.Insports]: insports,
   [ClientIds.India]: india,
   [ClientIds.Tunisia]: tunisia,
+  [ClientIds.Rustat]: rustat,
 }
 
 const params = new URLSearchParams(window.location.search)

src/features/AuthServiceApp/config/clients/rustat.tsx

@@ -0,0 +1,42 @@
+import { css } from 'styled-components'
+
+import { rustat as platformRustat } from 'config/clients/rustat'
+import { isMobileDevice } from 'config/userAgent'
+
+import { Background } from 'features/Background'
+
+import type { ClientConfig } from './types'
+
+export const rustat: ClientConfig = {
+  ...platformRustat,
+  background: Background,
+  styles: {
+    centerBlock: css`
+      margin-top: 9.15rem;
+      ${isMobileDevice ? css`
+        margin-top: 107px;
+        @media screen and (orientation: landscape) {
+          width: 290px;
+          margin: auto;
+        }
+      ` : ''};
+    `,
+    logo: css`
+      background-image: url(/images/insports-logo.svg);
+      background-position: center;
+      height: 85px;
+      width: 275px;
+      margin-bottom: 1.82rem;
+
+      ${isMobileDevice ? css`
+          margin-bottom: 15px;
+          width: 165px;
+          height: 50px;
+          @media screen and (orientation: landscape){
+            width: 92px;
+            height: 22px;
+          }
+        ` : ''}
+    `,
+  },
+}

src/features/AuthStore/helpers.tsx

@@ -29,6 +29,8 @@ export const getClientNameByRedirectUri = () => {
       return 'diwan.insports'
     case ClientNames.Fqtv:
       return 'fqtv.insports'
+    case ClientNames.Rustat:
+      return 'demo.insports'
     case ClientNames.Facr:
       return ClientNames.Facr
     case ClientNames.Instat:
@@ -43,6 +45,7 @@ const clientsForRedirect = {
   fqtv: ClientNames.Fqtv,
   india: ClientNames.India,
   lff: ClientNames.Lff,
+  rustat: ClientNames.Rustat,
   tunisia: ClientNames.Tunisia,
 }
 

src/features/MatchPage/store/hooks/index.tsx

@@ -39,6 +39,7 @@ import { useTeamsStats } from './useTeamsStats'
 import { useStatsTab } from './useStatsTab'
 import { usePlayersStats } from './usePlayersStats'
 import { useLexicsStore } from '../../../LexicsStore'
+import { useViewsPeaks } from './useViewsPeaks'
 
 type PlayingData = {
   player: {
@@ -89,6 +90,7 @@ export const useMatchPage = () => {
   const { suffix } = useLexicsStore()
 
   const { profileId: matchId, sportType } = usePageParams()
+  const { peaks } = useViewsPeaks()
 
   const { ads } = useAds({
     matchId,
@@ -443,6 +445,7 @@ export const useMatchPage = () => {
     likeImage,
     likeToggle,
     matchPlaylists,
+    peaks,
     playEpisodes,
     playNextEpisode: isStatsPlaylist ? playStatsNextEpisode : playNextEpisode,
     playStatsEpisodes,

src/features/MatchPage/store/hooks/useViewsPeaks.tsx

@@ -0,0 +1,22 @@
+import { usePageParams } from 'hooks'
+import { useEffect, useState } from 'react'
+import { Peak, getViewPeaks } from 'requests/getViewPeaks'
+
+export const useViewsPeaks = () => {
+  const { profileId, sportType } = usePageParams()
+
+  const [peaks, setPeaks] = useState<Array<Peak>>([])
+
+  useEffect(() => {
+    (async () => {
+      const res = await getViewPeaks({ match_id: profileId, sport_id: sportType })
+      if (res) {
+        setPeaks(res)
+      }
+    })()
+  }, [profileId, sportType])
+
+  return (
+    { peaks }
+  )
+}

src/features/StreamPlayer/components/Peaks/index.tsx

@@ -0,0 +1,32 @@
+import { useMatchPageStore } from 'features/MatchPage/store'
+import { memo, useMemo } from 'react'
+
+import {
+  PeakContainer,
+  PeaksList,
+} from './styled'
+
+interface Props {
+  duration: number,
+}
+
+export const Peaks: React.FC<Props> = memo(({ duration }) => {
+  const { peaks } = useMatchPageStore()
+
+  const peaksPrepared = useMemo(() => peaks.map((p) => (
+    {
+      ...p,
+      left: p.s / (duration / 1000) * 100,
+      width: (p.e - p.s) / (duration / 1000) * 100,
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  )), [peaks.length, duration])
+
+  return (
+    <PeaksList>
+      {peaksPrepared.map((p) => (
+        <PeakContainer style={{ left: `${p.left}%`, width: `${p.width}%` }} />
+      ))}
+    </PeaksList>
+  )
+})

src/features/StreamPlayer/components/Peaks/styled.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components/macro'
+
+export const PeaksList = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: absolute;
+  z-index: 3;
+`
+
+export const PeakContainer = styled.div`
+  position: relative;
+  height: 100%;
+  background-color: #5CDD86;
+`

src/features/StreamPlayer/components/ProgressBar/index.tsx

@@ -2,13 +2,18 @@ import { useSlider } from 'features/StreamPlayer/hooks/useSlider'
 import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip'
 import { Scrubber, ScrubberContainer } from 'features/StreamPlayer/components/ProgressBar/styled'
 
+import { Peaks } from 'features/StreamPlayer/components/Peaks'
 import { Chapters } from '../Chapters'
 import type { Props } from './hooks'
 import { useProgressBar } from './hooks'
 import { ProgressBarList } from './styled'
 
 export const ProgressBar = (props: Props) => {
-  const { isScrubberVisible, onPlayedProgressChange } = props
+  const {
+    duration,
+    isScrubberVisible,
+    onPlayedProgressChange,
+  } = props
   const progressBarRef = useSlider({ onChange: onPlayedProgressChange })
   const {
     calculatedChapters,
@@ -19,6 +24,7 @@ export const ProgressBar = (props: Props) => {
     <ProgressBarList
       ref={progressBarRef}
     >
+      <Peaks duration={duration} />
       <Chapters chapters={calculatedChapters} />
       {isScrubberVisible && (
         <ScrubberContainer>

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' | 'fqtv',
+    REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunisia' | 'fqtv' | 'rustat',
     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',

src/requests/getViewPeaks.tsx

@@ -0,0 +1,23 @@
+import { API_ROOT } from 'config'
+import { callApi } from 'helpers'
+
+export interface Peak {
+  e: number,
+  s: number,
+}
+
+export type Props = {
+  match_id: number,
+  sport_id: number,
+}
+
+export const getViewPeaks = async ({ match_id, sport_id }: Props): Promise<Array<Peak>> => {
+  const config = {
+    method: 'GET',
+  }
+
+  return callApi({
+    config,
+    url: `${API_ROOT}/v1/views/peaks/${sport_id}/${match_id}`,
+  })
+}