[OWA-79] feat(i18n): add translations

packages/common/src/controllers/FavoritesController.ts

@@ -1,5 +1,6 @@
 import i18next from 'i18next';
 import { injectable } from 'inversify';
+import { getI18n } from 'react-i18next';
 
 import FavoriteService from '../services/FavoriteService';
 import type { PlaylistItem } from '../../types/playlist';
@@ -16,18 +17,19 @@ export default class FavoritesController {
   }
 
   initialize = async () => {
-    await this.restoreFavorites();
+    const i18n = getI18n();
+    await this.restoreFavorites(i18n.language);
   };
 
-  restoreFavorites = async () => {
+  restoreFavorites = async (language?: string) => {
     const { user } = useAccountStore.getState();
     const favoritesList = useConfigStore.getState().config.features?.favoritesList;
 
     if (!favoritesList) {
       return;
     }
 
-    const favorites = await this.favoritesService.getFavorites(user, favoritesList);
+    const favorites = await this.favoritesService.getFavorites(user, favoritesList, language);
 
     useFavoritesStore.setState({ favorites, favoritesPlaylistId: favoritesList });
   };

packages/common/src/controllers/WatchHistoryController.ts

@@ -1,4 +1,5 @@
 import { injectable } from 'inversify';
+import { getI18n } from 'react-i18next';
 
 import WatchHistoryService from '../services/WatchHistoryService';
 import type { PlaylistItem } from '../../types/playlist';
@@ -16,18 +17,19 @@ export default class WatchHistoryController {
   }
 
   initialize = async () => {
-    await this.restoreWatchHistory();
+    const i18n = getI18n();
+    await this.restoreWatchHistory(i18n.language);
   };
 
-  restoreWatchHistory = async () => {
+  restoreWatchHistory = async (language?: string) => {
     const { user } = useAccountStore.getState();
     const continueWatchingList = useConfigStore.getState().config.features?.continueWatchingList;
 
     if (!continueWatchingList) {
       return;
     }
 
-    const watchHistory = await this.watchHistoryService.getWatchHistory(user, continueWatchingList);
+    const watchHistory = await this.watchHistoryService.getWatchHistory(user, continueWatchingList, language);
 
     useWatchHistoryStore.setState({
       watchHistory: watchHistory.filter((item): item is WatchHistoryItem => !!item?.mediaid),

packages/common/src/services/ApiService.ts

@@ -46,10 +46,29 @@ export default class ApiService {
     return date ? parseISO(date) : undefined;
   };
 
+  protected getTranslatedFields = (item: PlaylistItem, language?: string) => {
+    if (!language) {
+      return item;
+    }
+
+    const defaultLanguage = env.APP_DEFAULT_LANGUAGE;
+    const transformedItem = { ...item };
+
+    if (language !== defaultLanguage) {
+      for (const [key, _] of Object.entries(transformedItem)) {
+        if (item[`${key}-${language}`]) {
+          transformedItem[key] = item[`${key}-${language}`] as string;
+        }
+      }
+    }
+
+    return transformedItem;
+  };
+
   /**
    * Transform incoming content lists
    */
-  protected transformContentList = (contentList: ContentList): Playlist => {
+  protected transformContentList = (contentList: ContentList, language: string): Playlist => {
     const { list, ...rest } = contentList;
 
     const playlist: Playlist = { ...rest, playlist: [] };
@@ -71,7 +90,7 @@ export default class ApiService {
         ...custom_params,
       };
 
-      return this.transformMediaItem(playlistItem, playlist);
+      return this.transformMediaItem({ item: playlistItem, playlist, language });
     });
 
     return playlist;
@@ -80,8 +99,8 @@ export default class ApiService {
   /**
    * Transform incoming playlists
    */
-  protected transformPlaylist = (playlist: Playlist, relatedMediaId?: string) => {
-    playlist.playlist = playlist.playlist.map((item) => this.transformMediaItem(item, playlist));
+  protected transformPlaylist = (playlist: Playlist, relatedMediaId?: string, language?: string) => {
+    playlist.playlist = playlist.playlist.map((item) => this.transformMediaItem({ item, playlist, language }));
 
     // remove the related media item (when this is a recommendations playlist)
     if (relatedMediaId) {
@@ -95,14 +114,16 @@ export default class ApiService {
    * Transform incoming media items
    * - Parses productId into MediaOffer[] for all cleeng offers
    */
-  transformMediaItem = (item: PlaylistItem, playlist?: Playlist) => {
+  transformMediaItem = ({ item, playlist, language }: { item: PlaylistItem; playlist?: Playlist; language?: string }) => {
     const config = ConfigStore.getState().config;
     const offerKeys = Object.keys(config?.integrations)[0];
     const playlistLabel = playlist?.imageLabel;
     const mediaId = item.mediaid;
+    const translatedFields = this.getTranslatedFields(item, language);
 
     const transformedMediaItem = {
       ...item,
+      ...translatedFields,
       cardImage: this.generateAlternateImageURL({ mediaId, label: ImageProperty.CARD, playlistLabel }),
       channelLogoImage: this.generateAlternateImageURL({ mediaId, label: ImageProperty.CHANNEL_LOGO, playlistLabel }),
       backgroundImage: this.generateAlternateImageURL({ mediaId, label: ImageProperty.BACKGROUND }),
@@ -117,15 +138,15 @@ export default class ApiService {
     return transformedMediaItem;
   };
 
-  private transformEpisodes = (episodesRes: EpisodesRes, seasonNumber?: number) => {
+  private transformEpisodes = (episodesRes: EpisodesRes, language: string, seasonNumber?: number) => {
     const { episodes, page, page_limit, total } = episodesRes;
 
     // Adding images and keys for media items
     return {
       episodes: episodes
         .filter((el) => el.media_item)
         .map((el) => ({
-          ...this.transformMediaItem(el.media_item as PlaylistItem),
+          ...this.transformMediaItem({ item: el.media_item as PlaylistItem, language }),
           seasonNumber: seasonNumber?.toString() || el.season_number?.toString() || '',
           episodeNumber: String(el.episode_number),
         })),
@@ -136,7 +157,17 @@ export default class ApiService {
   /**
    * Get watchlist by playlistId
    */
-  getMediaByWatchlist = async (playlistId: string, mediaIds: string[], token?: string): Promise<PlaylistItem[] | undefined> => {
+  getMediaByWatchlist = async ({
+    playlistId,
+    mediaIds,
+    token,
+    language,
+  }: {
+    playlistId: string;
+    mediaIds: string[];
+    token?: string;
+    language?: string;
+  }): Promise<PlaylistItem[] | undefined> => {
     if (!mediaIds?.length) {
       return [];
     }
@@ -148,16 +179,23 @@ export default class ApiService {
 
     if (!data) throw new Error(`The data was not found using the watchlist ${playlistId}`);
 
-    return (data.playlist || []).map((item) => this.transformMediaItem(item));
+    return (data.playlist || []).map((item) => this.transformMediaItem({ item, language }));
   };
 
   /**
    * Get media by id
-   * @param {string} id
-   * @param {string} [token]
-   * @param {string} [drmPolicyId]
    */
-  getMediaById = async (id: string, token?: string, drmPolicyId?: string): Promise<PlaylistItem | undefined> => {
+  getMediaById = async ({
+    id,
+    token,
+    drmPolicyId,
+    language,
+  }: {
+    id: string;
+    token?: string;
+    drmPolicyId?: string;
+    language?: string;
+  }): Promise<PlaylistItem | undefined> => {
     const pathname = drmPolicyId ? `/v2/media/${id}/drm/${drmPolicyId}` : `/v2/media/${id}`;
     const url = createURL(`${env.APP_API_BASE_URL}${pathname}`, { token });
     const response = await fetch(url);
@@ -166,7 +204,7 @@ export default class ApiService {
 
     if (!mediaItem) throw new Error('MediaItem not found');
 
-    return this.transformMediaItem(mediaItem);
+    return this.transformMediaItem({ item: mediaItem, language });
   };
 
   /**
@@ -205,11 +243,13 @@ export default class ApiService {
     pageOffset,
     pageLimit = PAGE_LIMIT,
     afterId,
+    language,
   }: {
     seriesId: string | undefined;
     pageOffset?: number;
     pageLimit?: number;
     afterId?: string;
+    language: string;
   }): Promise<EpisodesWithPagination> => {
     if (!seriesId) {
       throw new Error('Series ID is required');
@@ -225,7 +265,7 @@ export default class ApiService {
     const response = await fetch(url);
     const episodesResponse = (await getDataOrThrow(response)) as EpisodesRes;
 
-    return this.transformEpisodes(episodesResponse);
+    return this.transformEpisodes(episodesResponse, language);
   };
 
   /**
@@ -236,8 +276,10 @@ export default class ApiService {
     seasonNumber,
     pageOffset,
     pageLimit = PAGE_LIMIT,
+    language,
   }: {
     seriesId: string | undefined;
+    language: string;
     seasonNumber: number;
     pageOffset?: number;
     pageLimit?: number;
@@ -252,7 +294,7 @@ export default class ApiService {
     const response = await fetch(url);
     const episodesRes = (await getDataOrThrow(response)) as EpisodesRes;
 
-    return this.transformEpisodes(episodesRes, seasonNumber);
+    return this.transformEpisodes(episodesRes, language, seasonNumber);
   };
 
   getAdSchedule = async (id: string | undefined | null): Promise<AdSchedule | undefined> => {
@@ -269,7 +311,7 @@ export default class ApiService {
   /**
    * Get playlist by id
    */
-  getPlaylistById = async (id?: string, params: GetPlaylistParams = {}): Promise<Playlist | undefined> => {
+  getPlaylistById = async (id?: string, params: GetPlaylistParams = {}, language: string = env.APP_DEFAULT_LANGUAGE): Promise<Playlist | undefined> => {
     if (!id) {
       return undefined;
     }
@@ -279,10 +321,10 @@ export default class ApiService {
     const response = await fetch(url);
     const data = (await getDataOrThrow(response)) as Playlist;
 
-    return this.transformPlaylist(data, params.related_media_id);
+    return this.transformPlaylist(data, params.related_media_id, language);
   };
 
-  getContentList = async ({ id, siteId }: { id: string | undefined; siteId: string }): Promise<Playlist | undefined> => {
+  getContentList = async ({ id, siteId, language }: { id: string | undefined; siteId: string; language: string }): Promise<Playlist | undefined> => {
     if (!id || !siteId) {
       throw new Error('List ID and Site ID are required');
     }
@@ -292,7 +334,7 @@ export default class ApiService {
     const response = await fetch(url);
     const data = (await getDataOrThrow(response)) as ContentList;
 
-    return this.transformContentList(data);
+    return this.transformContentList(data, language);
   };
 
   getContentSearch = async ({ siteId, params }: { siteId: string; params: GetContentSearchParams }) => {

packages/common/src/services/FavoriteService.ts

@@ -57,7 +57,7 @@ export default class FavoriteService {
     return this.validateFavorites(favorites);
   }
 
-  getFavorites = async (user: Customer | null, favoritesList: string) => {
+  getFavorites = async (user: Customer | null, favoritesList: string, language?: string) => {
     const savedItems = user ? await this.getFavoritesFromAccount(user) : await this.getFavoritesFromStorage();
     const mediaIds = savedItems.map(({ mediaid }) => mediaid);
 
@@ -66,7 +66,7 @@ export default class FavoriteService {
     }
 
     try {
-      const playlistItems = await this.apiService.getMediaByWatchlist(favoritesList, mediaIds);
+      const playlistItems = await this.apiService.getMediaByWatchlist({ playlistId: favoritesList, mediaIds, language });
 
       return (playlistItems || []).map((item) => this.createFavorite(item));
     } catch (error: unknown) {

packages/common/src/services/WatchHistoryService.ts

@@ -39,22 +39,25 @@ export default class WatchHistoryService {
   }
 
   // Retrieve watch history media items info using a provided watch list
-  protected getWatchHistoryItems = async (continueWatchingList: string, ids: string[]): Promise<Record<string, PlaylistItem>> => {
-    const watchHistoryItems = await this.apiService.getMediaByWatchlist(continueWatchingList, ids);
+  protected getWatchHistoryItems = async (continueWatchingList: string, ids: string[], language?: string): Promise<Record<string, PlaylistItem>> => {
+    const watchHistoryItems = await this.apiService.getMediaByWatchlist({ playlistId: continueWatchingList, mediaIds: ids, language });
     const watchHistoryItemsDict = Object.fromEntries((watchHistoryItems || []).map((item) => [item.mediaid, item]));
 
     return watchHistoryItemsDict;
   };
 
   // We store separate episodes in the watch history and to show series card in the Continue Watching shelf we need to get their parent media items
-  protected getWatchHistorySeriesItems = async (continueWatchingList: string, ids: string[]): Promise<Record<string, PlaylistItem | undefined>> => {
+  protected getWatchHistorySeriesItems = async (
+    continueWatchingList: string,
+    ids: string[],
+    language?: string,
+  ): Promise<Record<string, PlaylistItem | undefined>> => {
     const mediaWithSeries = await this.apiService.getSeriesByMediaIds(ids);
     const seriesIds = Object.keys(mediaWithSeries || {})
       .map((key) => mediaWithSeries?.[key]?.[0]?.series_id)
       .filter(Boolean) as string[];
     const uniqueSerieIds = [...new Set(seriesIds)];
-
-    const seriesItems = await this.apiService.getMediaByWatchlist(continueWatchingList, uniqueSerieIds);
+    const seriesItems = await this.apiService.getMediaByWatchlist({ playlistId: continueWatchingList, mediaIds: uniqueSerieIds, language });
     const seriesItemsDict = Object.keys(mediaWithSeries || {}).reduce((acc, key) => {
       const seriesItemId = mediaWithSeries?.[key]?.[0]?.series_id;
       if (seriesItemId) {
@@ -86,7 +89,7 @@ export default class WatchHistoryService {
     return this.validateWatchHistory(history);
   }
 
-  getWatchHistory = async (user: Customer | null, continueWatchingList: string) => {
+  getWatchHistory = async (user: Customer | null, continueWatchingList: string, language?: string) => {
     const savedItems = user ? await this.getWatchHistoryFromAccount(user) : await this.getWatchHistoryFromStorage();
 
     // When item is an episode of the new flow -> show the card as a series one, but keep episode to redirect in a right way
@@ -97,8 +100,8 @@ export default class WatchHistoryService {
     }
 
     try {
-      const watchHistoryItems = await this.getWatchHistoryItems(continueWatchingList, ids);
-      const seriesItems = await this.getWatchHistorySeriesItems(continueWatchingList, ids);
+      const watchHistoryItems = await this.getWatchHistoryItems(continueWatchingList, ids, language);
+      const seriesItems = await this.getWatchHistorySeriesItems(continueWatchingList, ids, language);
 
       return savedItems
         .map((item) => {

packages/hooks-react/src/series/useEpisodes.ts

@@ -4,6 +4,7 @@ import type { Pagination } from '@jwp/ott-common/types/pagination';
 import ApiService from '@jwp/ott-common/src/services/ApiService';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { CACHE_TIME, STALE_TIME } from '@jwp/ott-common/src/constants';
+import { getI18n } from 'react-i18next';
 
 const getNextPageParam = (pagination: Pagination) => {
   const { page, page_limit, total } = pagination;
@@ -28,22 +29,26 @@ export const useEpisodes = (
 } => {
   const apiService = getModule(ApiService);
 
+  // Determine currently selected language
+  const i18n = getI18n();
+  const language = i18n.language;
+
   const {
     data,
     fetchNextPage,
     isLoading,
     hasNextPage = false,
   } = useInfiniteQuery(
-    [seriesId, seasonNumber],
+    [seriesId, seasonNumber, language],
     async ({ pageParam = 0 }) => {
       if (Number(seasonNumber)) {
         // Get episodes from a selected season using pagination
-        const season = await apiService.getSeasonWithEpisodes({ seriesId, seasonNumber: Number(seasonNumber), pageOffset: pageParam });
+        const season = await apiService.getSeasonWithEpisodes({ seriesId, seasonNumber: Number(seasonNumber), pageOffset: pageParam, language });
 
         return { pagination: season.pagination, episodes: season.episodes };
       } else {
         // Get episodes from a selected series using pagination
-        const data = await apiService.getEpisodes({ seriesId, pageOffset: pageParam });
+        const data = await apiService.getEpisodes({ seriesId, pageOffset: pageParam, language });
         return data;
       }
     },