feat(i18n): support translations for shelves titles and menu labels

packages/common/src/utils/configSchema.ts

@@ -8,13 +8,15 @@ const contentSchema: SchemaOf<Content> = object({
   featured: boolean().notRequired(),
   backgroundColor: string().nullable().notRequired(),
   type: mixed().oneOf(['playlist', 'continue_watching', 'favorites', 'content_list']),
+  custom: object().notRequired(),
 }).defined();
 
 const menuSchema: SchemaOf<Menu> = object().shape({
   label: string().defined(),
   contentId: string().defined(),
   filterTags: string().notRequired(),
   type: mixed().oneOf(['playlist', 'content_list']).notRequired(),
+  custom: object().notRequired(),
 });
 
 const featuresSchema: SchemaOf<Features> = object({

packages/common/types/config.ts

@@ -53,13 +53,15 @@ export type Content = {
   type: PlaylistType;
   featured?: boolean;
   backgroundColor?: string | null;
+  custom?: Record<string, string>;
 };
 
 export type Menu = {
   label: string;
   contentId: string;
   type?: PlaylistMenuType;
   filterTags?: string;
+  custom?: Record<string, string>;
 };
 
 export type Styling = {

packages/ui-react/src/containers/Layout/Layout.tsx

@@ -26,6 +26,10 @@ import styles from './Layout.module.scss';
 
 const Layout = () => {
   const { t } = useTranslation('common');
+  const { i18n } = useTranslation('menu');
+
+  // Determine currently selected language
+  const language = i18n.language;
 
   const { config } = useConfigStore(
     ({ config, accessModel, supportedLanguages }) => ({
@@ -49,10 +53,12 @@ const Layout = () => {
 
   const navItems = [
     { label: t('home'), to: '/' },
-    ...menu.map(({ label, contentId, type }) => ({
-      label,
-      to: type === PLAYLIST_TYPE.content_list ? contentListURL(contentId) : playlistURL(contentId),
-    })),
+    ...menu.map(({ label, contentId, type, custom }) => {
+      return {
+        label: custom?.[`label-${language}`] || label,
+        to: type === PLAYLIST_TYPE.content_list ? contentListURL(contentId) : playlistURL(contentId),
+      };
+    }),
   ];
 
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react

packages/ui-react/src/containers/ShelfList/ShelfList.tsx

@@ -30,6 +30,10 @@ const ShelfList = ({ rows }: Props) => {
   const { accessModel } = useConfigStore(({ accessModel }) => ({ accessModel }), shallow);
   const [rowsToLoad, setRowsToLoad] = useState(INITIAL_ROWS_TO_LOAD);
   const { t } = useTranslation('error');
+  const { i18n } = useTranslation('menu');
+
+  // Determine currently selected language
+  const language = i18n.language;
 
   const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionaryWithSeries());
 
@@ -61,28 +65,31 @@ const ShelfList = ({ rows }: Props) => {
         loader={<InfiniteScrollLoader key="loader" />}
         useWindow={false}
       >
-        {rows.slice(0, rowsToLoad).map(({ type, featured, title }, index) => {
+        {rows.slice(0, rowsToLoad).map(({ type, featured, title, custom }, index) => {
           const { data: playlist, isPlaceholderData, error } = playlists[index];
 
           if (!playlist?.playlist?.length) return null;
 
           const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio || playlist.shelfImageAspectRatio);
           const visibleTilesDelta = parseTilesDelta(posterAspect);
 
+          const translatedKey = custom?.[`title-${language}`];
+          const translatedTitle = translatedKey || title || playlist?.title;
+
           return (
             <section
               key={`${index}_${playlist.id}`}
               className={classNames(styles.shelfContainer, { [styles.featured]: featured })}
-              data-testid={testId(`shelf-${featured ? 'featured' : type === 'playlist' ? slugify(title || playlist?.title) : type}`)}
-              aria-label={title || playlist?.title}
+              data-testid={testId(`shelf-${featured ? 'featured' : type === 'playlist' ? slugify(translatedTitle) : type}`)}
+              aria-label={translatedTitle}
             >
               <Shelf
                 loading={isPlaceholderData}
                 error={error}
                 type={type}
                 playlist={playlist}
                 watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
-                title={title || playlist?.title}
+                title={translatedTitle}
                 featured={featured}
                 accessModel={accessModel}
                 isLoggedIn={!!user}