From 24dc9cbf57dff41d3734ae08fc44efb3501fb7fb Mon Sep 17 00:00:00 2001
From: Rakov <roman.rakov@insports.tv>
Date: Wed, 14 Feb 2024 16:00:04 +0300
Subject: [PATCH] feat(#787): added views peaks

---
 src/features/MatchPage/store/hooks/index.tsx  |  3 ++
 .../MatchPage/store/hooks/useViewsPeaks.tsx   | 22 +++++++++++++
 .../StreamPlayer/components/Peaks/index.tsx   | 32 +++++++++++++++++++
 .../StreamPlayer/components/Peaks/styled.tsx  | 15 +++++++++
 .../components/ProgressBar/index.tsx          |  8 ++++-
 src/requests/getViewPeaks.tsx                 | 23 +++++++++++++
 6 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 src/features/MatchPage/store/hooks/useViewsPeaks.tsx
 create mode 100644 src/features/StreamPlayer/components/Peaks/index.tsx
 create mode 100644 src/features/StreamPlayer/components/Peaks/styled.tsx
 create mode 100644 src/requests/getViewPeaks.tsx

diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index 96ccef89..c9a5415a 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/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,
diff --git a/src/features/MatchPage/store/hooks/useViewsPeaks.tsx b/src/features/MatchPage/store/hooks/useViewsPeaks.tsx
new file mode 100644
index 00000000..de8410c6
--- /dev/null
+++ b/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 }
+  )
+}
diff --git a/src/features/StreamPlayer/components/Peaks/index.tsx b/src/features/StreamPlayer/components/Peaks/index.tsx
new file mode 100644
index 00000000..aee7f430
--- /dev/null
+++ b/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>
+  )
+})
diff --git a/src/features/StreamPlayer/components/Peaks/styled.tsx b/src/features/StreamPlayer/components/Peaks/styled.tsx
new file mode 100644
index 00000000..3cd1b492
--- /dev/null
+++ b/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;
+`
diff --git a/src/features/StreamPlayer/components/ProgressBar/index.tsx b/src/features/StreamPlayer/components/ProgressBar/index.tsx
index 21bb14ca..0b767657 100644
--- a/src/features/StreamPlayer/components/ProgressBar/index.tsx
+++ b/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>
diff --git a/src/requests/getViewPeaks.tsx b/src/requests/getViewPeaks.tsx
new file mode 100644
index 00000000..27d6d0eb
--- /dev/null
+++ b/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}`,
+  })
+}