feat: car play data refresh & live channel posters

lrtlt · Jun 14, 2024 · 8b3eed0 · 8b3eed0
1 parent 7e306c3
commit 8b3eed0
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 73 deletions.
diff --git a/app/car/BaseListTemplate.ts b/app/car/BaseListTemplate.ts
@@ -3,7 +3,7 @@ import {PlayListItem} from './types';
 import TrackPlayer, {PitchAlgorithm} from 'react-native-track-player';
 import {carPlayNowPlayingTemplate} from './nowPlaying/createNowPlayingTemplate';
 
-export type PlaylistProvider = Promise<PlayListItem[]>;
+export type PlaylistProvider = () => Promise<PlayListItem[]>;
 
 export type BaseListTemplateOptions = {
   title: string;
@@ -42,7 +42,7 @@ export class BaseListTemplate {
   }
 
   async build() {
-    const items = await this.playlistProvider;
+    const items = await this.playlistProvider();
 
     if (this.template) {
       this.template.config.onItemSelect = undefined;
@@ -63,6 +63,7 @@ export class BaseListTemplate {
             items?.map((item) => ({
               text: item.text,
               detailText: item.detailText,
+              image: item.image,
               imgUrl: item.imgUrl as any,
             })) ?? [],
         },

diff --git a/app/car/CarPlay.ts b/app/car/CarPlay.ts
@@ -1,4 +1,4 @@
-import {CarPlay} from 'react-native-carplay';
+import {AlertTemplate, CarPlay} from 'react-native-carplay';
 import Gemius from 'react-native-gemius-plugin';
 import analytics from '@react-native-firebase/analytics';
 import TrackPlayer from 'react-native-track-player';
@@ -11,7 +11,16 @@ CarPlay.emitter.addListener('didConnect', async () => {
   Gemius.sendPageViewedEvent('carplay_connected');
   analytics().logEvent('carplay_connected');
   setupTrackPlayer();
-  CarPlay.setRootTemplate(await RootTemplate.build());
+
+  CarPlay.presentTemplate(
+    new AlertTemplate({
+      id: 'loading-alert',
+      titleVariants: ['Prašome palaukti...'],
+    }),
+  );
+  const rootTemplate = await RootTemplate.build();
+  CarPlay.dismissTemplate();
+  CarPlay.setRootTemplate(rootTemplate);
   CarPlay.enableNowPlaying(true);
 });
 

diff --git a/app/car/live/LiveTemplate.ts b/app/car/live/LiveTemplate.ts
@@ -1,9 +1,7 @@
 import {fetchCarLivePlaylist} from '../../api';
 import {PlayListItem} from '../types';
 import {BaseListTemplate} from '../BaseListTemplate';
-import {VIDEO_DEFAULT_BACKGROUND_IMAGE} from '../../constants';
 import {fetchStreamData} from '../../components/videoComponent/fetchStreamData';
-import {BASE_IMG_URL} from '../../util/ImageUtil';
 
 export const TEMPLATE_ID_LIVE = 'lrt-list-template-live';
 
@@ -16,36 +14,60 @@ class LiveTemplate extends BaseListTemplate {
         tabSystemImageName: 'play.square.fill',
         id: TEMPLATE_ID_LIVE,
       },
-      fetchCarLivePlaylist()
-        .then((response) =>
-          Promise.all(
-            response.tvprog?.items?.map((channel) =>
-              fetchStreamData({
-                url: channel.stream_url,
-                title: channel.channel_title,
-                poster: channel.cover_url.startsWith('http')
-                  ? channel.cover_url
-                  : BASE_IMG_URL + channel.cover_url,
-              }),
-            ) || [],
-          ),
-        )
-        .then((data) => {
-          if (data?.length) {
-            const items: PlayListItem[] = data.map((stream) => ({
-              id: stream.mediaId,
-              text: stream.channelTitle ?? stream.title,
-              // detailText: stream.title,
-              imgUrl: stream.poster || VIDEO_DEFAULT_BACKGROUND_IMAGE,
-              streamUrl: stream.streamUri,
-            }));
-            return items;
-          }
-          return [];
-        }),
+      () =>
+        fetchCarLivePlaylist()
+          .then((response) =>
+            Promise.all(
+              response.tvprog?.items?.map((channel) =>
+                fetchStreamData({
+                  url: channel.stream_url,
+                  title: channel.channel_title,
+                  //Return channel id as poster so we can map it to the actual image later
+                  poster: channel.channel_id.toString(),
+                }),
+              ) || [],
+            ),
+          )
+          .then((data) => {
+            if (data?.length) {
+              const items: PlayListItem[] = data.map((stream) => ({
+                id: stream.mediaId,
+                text: stream.channelTitle ?? stream.title,
+                // detailText: stream.title,
+                image: getImageByChannelId(stream.poster),
+                imgUrl: undefined,
+                streamUrl: stream.streamUri,
+              }));
+              return items;
+            }
+            return [];
+          }),
     );
   }
 }
 
+const getImageByChannelId = (channelId?: string) => {
+  switch (channelId) {
+    case '1': {
+      return require('./assets/ic_tv.png');
+    }
+    case '2': {
+      return require('./assets/ic_plius.png');
+    }
+    case '3': {
+      return require('./assets/ic_lituanica.png');
+    }
+    case '5': {
+      return require('./assets/ic_klasika.png');
+    }
+    case '6': {
+      return require('./assets/ic_opus.png');
+    }
+    default: {
+      return require('./assets/ic_radijas.png');
+    }
+  }
+};
+
 const instance = new LiveTemplate();
 export default instance;
diff --git a/app/car/live/assets/ic_klasika.png b/app/car/live/assets/ic_klasika.png
diff --git a/app/car/live/assets/ic_lituanica.png b/app/car/live/assets/ic_lituanica.png
diff --git a/app/car/live/assets/ic_opus.png b/app/car/live/assets/ic_opus.png
diff --git a/app/car/live/assets/ic_plius.png b/app/car/live/assets/ic_plius.png
diff --git a/app/car/live/assets/ic_radijas.png b/app/car/live/assets/ic_radijas.png
diff --git a/app/car/live/assets/ic_tv.png b/app/car/live/assets/ic_tv.png
diff --git a/app/car/newest/NewestTemplate.ts b/app/car/newest/NewestTemplate.ts
@@ -13,19 +13,20 @@ class NewestTemplate extends BaseListTemplate {
         tabSystemImageName: 'newspaper.fill',
         id: TEMPLATE_ID_NEWEST,
       },
-      fetchCarNewestPlaylist().then((data) => {
-        if (data?.length) {
-          const channels: PlayListItem[] = data.map((item) => ({
-            id: item.title,
-            text: item.title,
-            detailText: item.content,
-            imgUrl: item.cover,
-            streamUrl: item.streamUrl,
-          }));
-          return channels;
-        }
-        return [];
-      }),
+      () =>
+        fetchCarNewestPlaylist().then((data) => {
+          if (data?.length) {
+            const channels: PlayListItem[] = data.map((item) => ({
+              id: item.title,
+              text: item.title,
+              detailText: item.content,
+              imgUrl: item.cover,
+              streamUrl: item.streamUrl,
+            }));
+            return channels;
+          }
+          return [];
+        }),
     );
   }
 }

diff --git a/app/car/popular/PopularTemplate.ts b/app/car/popular/PopularTemplate.ts
@@ -13,19 +13,20 @@ class PopularTemplate extends BaseListTemplate {
         tabSystemImageName: 'star.fill',
         id: TEMPLATE_ID_POPULAR,
       },
-      fetchCarPopularPlaylist().then((data) => {
-        if (data?.length) {
-          const channels: PlayListItem[] = data.map((item) => ({
-            id: item.title,
-            text: item.title,
-            detailText: item.content,
-            imgUrl: item.cover,
-            streamUrl: item.streamUrl,
-          }));
-          return channels;
-        }
-        return [];
-      }),
+      () =>
+        fetchCarPopularPlaylist().then((data) => {
+          if (data?.length) {
+            const channels: PlayListItem[] = data.map((item) => ({
+              id: item.title,
+              text: item.title,
+              detailText: item.content,
+              imgUrl: item.cover,
+              streamUrl: item.streamUrl,
+            }));
+            return channels;
+          }
+          return [];
+        }),
     );
   }
 }

diff --git a/app/car/recommended/RecommendedTemplate.ts b/app/car/recommended/RecommendedTemplate.ts
@@ -13,19 +13,20 @@ class RecommendedTemplate extends BaseListTemplate {
         tabSystemImageName: 'star.fill',
         id: TEMPLATE_ID_RECOMMENDED,
       },
-      fetchCarRecommendedPlaylist().then((data) => {
-        if (data?.length) {
-          const channels: PlayListItem[] = data.map((item) => ({
-            id: item.title,
-            text: item.title,
-            detailText: item.content,
-            imgUrl: item.cover,
-            streamUrl: item.streamUrl,
-          }));
-          return channels;
-        }
-        return [];
-      }),
+      () =>
+        fetchCarRecommendedPlaylist().then((data) => {
+          if (data?.length) {
+            const channels: PlayListItem[] = data.map((item) => ({
+              id: item.title,
+              text: item.title,
+              detailText: item.content,
+              imgUrl: item.cover,
+              streamUrl: item.streamUrl,
+            }));
+            return channels;
+          }
+          return [];
+        }),
     );
   }
 }

diff --git a/app/car/types.ts b/app/car/types.ts
@@ -1,3 +1,5 @@
+import {ImageSourcePropType} from 'react-native';
+
 export type CarCategory = 'live' | 'newest';
 
 export type CategoryListItem = {
@@ -11,7 +13,8 @@ export type PlayListItem = {
   id: string | number;
   text: string;
   detailText?: string;
-  imgUrl: string;
+  image?: ImageSourcePropType;
+  imgUrl?: string;
   streamUrl: string;
   isLiveStream?: boolean;
 };