feat(#787): added views peaks

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/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}`,
+  })
+}