feat(640): request and display match previews (#241)

src/features/Matches/helpers/prepareMatches.tsx

@@ -10,6 +10,7 @@ const prepareMatch = ({
   date,
   has_video,
   id,
+  preview,
   sport,
   stream_status,
   sub,
@@ -22,7 +23,7 @@ const prepareMatch = ({
   date: format(new Date(date), 'dd.MM.yy'),
   hasVideo: has_video,
   id,
-  preview: '/images/preview.png',
+  preview,
   sportName: getSportLexic(sport),
   sportType: sport,
   streamStatus: stream_status,

src/requests/getMatches/getPreviews.tsx

@@ -0,0 +1,50 @@
+import isEmpty from 'lodash/isEmpty'
+import reduce from 'lodash/reduce'
+import find from 'lodash/find'
+import map from 'lodash/map'
+
+import type { PreviewsData, Previews } from 'requests'
+import { getMatchesPreviewImages } from 'requests'
+
+import { MatchStatuses } from 'features/HeaderFilters'
+
+import type { Matches } from './types'
+
+const combinePreviews = (matches: Matches, previews: Previews) => (
+  map(matches, (match) => {
+    const preview = find(
+      previews,
+      { match_id: match.id, sport_id: match.sport },
+    )?.preview
+    return preview ? { ...match, preview } : match
+  })
+)
+
+/**
+ * Запрашивает превью картинок матчей с видео и статус которых Завершенный
+ */
+export const getPreviews = async (matches: Matches) => {
+  const previewsData = reduce(
+    matches,
+    (acc: PreviewsData, {
+      has_video,
+      id,
+      sport,
+      stream_status,
+    }) => {
+      if (has_video && stream_status === MatchStatuses.Finished) {
+        acc.push({
+          match_id: id,
+          sport_id: sport,
+        })
+      }
+      return acc
+    },
+    [],
+  )
+
+  if (isEmpty(previewsData)) return matches
+
+  const previews = await getMatchesPreviewImages(previewsData)
+  return combinePreviews(matches, previews)
+}

src/requests/getMatches/request.tsx

@@ -2,6 +2,7 @@ import { DATA_URL } from 'config'
 import { callApi } from 'helpers'
 
 import type { MatchesResponse, MatchesBySection } from './types'
+import { getPreviews } from './getPreviews'
 
 type Config = {
   body: {
@@ -19,11 +20,36 @@ export const requestMatches = async (config: Config): Promise<MatchesBySection>
     url: DATA_URL,
   })
 
+  const isVideoSections = Boolean(is_video_sections)
+
+  if (isVideoSections) {
+    const [
+      broadcast,
+      features,
+      highlights,
+    ] = await Promise.all(
+      [
+        getPreviews(data.broadcast),
+        getPreviews(data.features),
+        getPreviews(data.highlights),
+      ],
+    )
+    return {
+      broadcast,
+      features,
+      hasNextPage: Boolean(show),
+      highlights,
+      isVideoSections,
+    }
+  }
+
+  const broadcast = await getPreviews(data.broadcast)
+
   return {
-    broadcast: data.broadcast || [],
-    features: data.features || [],
+    broadcast,
+    features: [],
     hasNextPage: Boolean(show),
-    highlights: data.highlights || [],
-    isVideoSections: Boolean(is_video_sections),
+    highlights: [],
+    isVideoSections,
   }
 }

src/requests/getMatches/types.tsx

@@ -20,6 +20,7 @@ export type Match = {
   date: string,
   has_video: boolean,
   id: number,
+  preview?: string,
   round_id: number | null,
   sport: SportTypes,
   stream_status: MatchStatuses,

src/requests/getMatchesPreviewImages.tsx

@@ -0,0 +1,30 @@
+import { API_ROOT, SportTypes } from 'config'
+import { callApi } from 'helpers'
+
+type Match = {
+  match_id: number,
+  sport_id: SportTypes,
+}
+
+export type PreviewsData = Array<Match>
+
+type Preview = {
+  match_id: number,
+  preview: string,
+  sport_id: SportTypes,
+}
+
+export type Previews = Array<Preview>
+
+export const getMatchesPreviewImages = async (matches: PreviewsData) => {
+  const config = {
+    body: matches,
+  }
+
+  const previews: Previews = await callApi({
+    config,
+    url: `${API_ROOT}/videoapi/preview`,
+  })
+
+  return previews
+}

src/requests/index.tsx

@@ -20,3 +20,4 @@ export * from './saveUserInfo'
 export * from './getPlayerInfo'
 export * from './getLiveVideos'
 export * from './getMatchLastWatchSeconds'
+export * from './getMatchesPreviewImages'