Merge pull request #540 from Stremio/feat/translate-catalog-names

Translate catalog names

package-lock.json

@@ -36,7 +36,7 @@
                 "react-i18next": "^12.1.1",
                 "react-is": "18.2.0",
                 "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-                "stremio-translations": "github:Stremio/stremio-translations#13c8241ca262541813ce0e2df4ff3e289fbd391b",
+                "stremio-translations": "github:Stremio/stremio-translations#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
                 "url": "0.11.0",
                 "use-long-press": "^3.1.5"
             },
@@ -13600,8 +13600,9 @@
             }
         },
         "node_modules/stremio-translations": {
-            "version": "1.44.4",
+            "version": "1.44.5",
-            "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#13c8241ca262541813ce0e2df4ff3e289fbd391b",
+            "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
+            "integrity": "sha512-vE23dpAIJLBHwGarwNh7uXFU7JxMkGWbP5Oi8LJbsiQHgrsSHD/v7mcXLDxVgCpPTM4D/SbfcJnJkAKXwllezw==",
             "license": "MIT"
         },
         "node_modules/string_decoder": {
@@ -26006,8 +26007,9 @@
             "dev": true
         },
         "stremio-translations": {
-            "version": "git+ssh://git@github.com/Stremio/stremio-translations.git#13c8241ca262541813ce0e2df4ff3e289fbd391b",
+            "version": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
-            "from": "stremio-translations@github:Stremio/stremio-translations#13c8241ca262541813ce0e2df4ff3e289fbd391b"
+            "integrity": "sha512-vE23dpAIJLBHwGarwNh7uXFU7JxMkGWbP5Oi8LJbsiQHgrsSHD/v7mcXLDxVgCpPTM4D/SbfcJnJkAKXwllezw==",
+            "from": "stremio-translations@github:Stremio/stremio-translations#f5587521902320be9b97ecf5e1c5c38d1aa847ff"
         },
         "string_decoder": {
             "version": "1.1.1",

package.json

@@ -39,7 +39,7 @@
         "react-i18next": "^12.1.1",
         "react-is": "18.2.0",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "github:Stremio/stremio-translations#13c8241ca262541813ce0e2df4ff3e289fbd391b",
+        "stremio-translations": "github:Stremio/stremio-translations#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
         "url": "0.11.0",
         "use-long-press": "^3.1.5"
     },

src/common/MetaRow/MetaRow.js

@@ -4,39 +4,47 @@ const React = require('react');
 const ReactIs = require('react-is');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useTranslation } = require('react-i18next');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const Button = require('stremio/common/Button');
 const CONSTANTS = require('stremio/common/CONSTANTS');
+const useTranslate = require('stremio/common/useTranslate');
 const MetaRowPlaceholder = require('./MetaRowPlaceholder');
 const styles = require('./styles');
 
-const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => {
+const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
-    const { t } = useTranslation();
+    const t = useTranslate();
+
+    const catalogTitle = React.useMemo(() => {
+        return title ?? t.catalogTitle(catalog);
+    }, [title, catalog, t.catalogTitle]);
+
+    const items = React.useMemo(() => {
+        return catalog?.items ?? catalog?.content?.content;
+    }, [catalog]);
+
+    const href = React.useMemo(() => {
+        return catalog?.deepLinks?.discover ?? catalog?.deepLinks?.library;
+    }, [catalog]);
+
     return (
         <div className={classnames(className, styles['meta-row-container'])}>
-            {
+            <div className={styles['header-container']}>
-                (typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
+                {
-                    <div className={styles['header-container']}>
+                    typeof catalogTitle === 'string' && catalogTitle.length > 0 ?
-                        {
+                        <div className={styles['title-container']} title={catalogTitle}>{catalogTitle}</div>
-                            typeof title === 'string' && title.length > 0 ?
+                        :
-                                <div className={styles['title-container']} title={title}>{title}</div>
+                        null
-                                :
+                }
-                                null
+                {
-                        }
+                    href ?
-                        {
+                        <Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
-                            deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
+                            <div className={styles['label']}>{ t.string('BUTTON_SEE_ALL') }</div>
-                                <Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
+                            <Icon className={styles['icon']} name={'chevron-forward'} />
-                                    <div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
+                        </Button>
-                                    <Icon className={styles['icon']} name={'chevron-forward'} />
+                        :
-                                </Button>
+                        null
-                                :
+                }
-                                null
+            </div>
-                        }
-                    </div>
-                    :
-                    null
-            }
             {
                 typeof message === 'string' && message.length > 0 ?
                     <div className={styles['message-container']} title={message}>{message}</div>
@@ -69,14 +77,33 @@ MetaRow.propTypes = {
     className: PropTypes.string,
     title: PropTypes.string,
     message: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
+    catalog: PropTypes.shape({
-        posterShape: PropTypes.string
+        id: PropTypes.string,
-    })),
+        name: PropTypes.string,
+        type: PropTypes.string,
+        addon: PropTypes.shape({
+            manifest: PropTypes.shape({
+                id: PropTypes.string,
+                name: PropTypes.string,
+            }),
+        }),
+        content: PropTypes.shape({
+            content: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.arrayOf(PropTypes.shape({
+                    posterShape: PropTypes.string,
+                })),
+            ]),
+        }),
+        items: PropTypes.arrayOf(PropTypes.shape({
+            posterShape: PropTypes.string,
+        })),
+        deepLinks: PropTypes.shape({
+            discover: PropTypes.string,
+            library: PropTypes.string,
+        }),
+    }),
     itemComponent: PropTypes.elementType,
-    deepLinks: PropTypes.shape({
-        discover: PropTypes.string,
-        library: PropTypes.string
-    })
 };
 
 module.exports = MetaRow;

src/common/index.js

@@ -32,7 +32,6 @@ const getVisibleChildrenRange = require('./getVisibleChildrenRange');
 const interfaceLanguages = require('./interfaceLanguages.json');
 const languageNames = require('./languageNames.json');
 const routesRegexp = require('./routesRegexp');
-const translateOption = require('./translateOption');
 const useAnimationFrame = require('./useAnimationFrame');
 const useBinaryState = require('./useBinaryState');
 const useFullscreen = require('./useFullscreen');
@@ -43,6 +42,7 @@ const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
+const useTranslate = require('./useTranslate');
 const platform = require('./platform');
 const EventModal = require('./EventModal');
 
@@ -83,7 +83,6 @@ module.exports = {
     interfaceLanguages,
     languageNames,
     routesRegexp,
-    translateOption,
     useAnimationFrame,
     useBinaryState,
     useFullscreen,
@@ -94,6 +93,7 @@ module.exports = {
     useProfile,
     useStreamingServer,
     useTorrent,
+    useTranslate,
     platform,
     EventModal,
 };

src/common/translateOption.js

@@ -1,15 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const { t } = require('i18next');
-
-const translateOption = (option, translateKeyPrefix = '') => {
-    const translateKey = `${translateKeyPrefix}${option}`;
-    const translateValue = t(translateKey, {
-        defaultValue: t(translateKey.toUpperCase(), {
-            defaultValue: null
-        })
-    });
-    return translateValue ?? option.charAt(0).toUpperCase() + option.slice(1);
-};
-
-module.exports = translateOption;

src/common/useTranslate.js

@@ -0,0 +1,41 @@
+const { useCallback } = require('react');
+const { useTranslation } = require('react-i18next');
+
+const useTranslate = () => {
+    const { t } = useTranslation();
+
+    const string = useCallback((key) => t(key), [t]);
+
+    const stringWithPrefix = useCallback((value, prefix, fallback = null) => {
+        const key = `${prefix}${value}`;
+        const defaultValue = fallback ?? value.charAt(0).toUpperCase() + value.slice(1);
+
+        return t(key, {
+            defaultValue,
+        });
+    }, [t]);
+
+    const catalogTitle = useCallback(({ addon, id, name, type } = {}, withType = true) => {
+        if (addon && id && name) {
+            const partialKey = `${addon.manifest.id}/${id}`;
+            const translatedName = stringWithPrefix(partialKey, 'CATALOG_', name);
+
+            if (type && withType) {
+                const translatedType = stringWithPrefix(type, 'TYPE_');
+                return `${translatedName} - ${translatedType}`;
+            }
+
+            return translatedName;
+        }
+
+        return null;
+    }, [stringWithPrefix]);
+
+    return {
+        string,
+        stringWithPrefix,
+        catalogTitle,
+    };
+};
+
+module.exports = useTranslate;

src/routes/Addons/useSelectableInputs.js

@@ -1,18 +1,17 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { t } = require('i18next');
+const { useTranslate } = require('stremio/common');
-const { translateOption } = require('stremio/common');
 
-const mapSelectableInputs = (installedAddons, remoteAddons) => {
+const mapSelectableInputs = (installedAddons, remoteAddons, t) => {
     const catalogSelect = {
-        title: t('SELECT_CATALOG'),
+        title: t.string('SELECT_CATALOG'),
         options: remoteAddons.selectable.catalogs
             .concat(installedAddons.selectable.catalogs)
             .map(({ name, deepLinks }) => ({
                 value: deepLinks.addons,
-                label: translateOption(name, 'ADDON_'),
+                label: t.stringWithPrefix(name, 'ADDON_'),
-                title: translateOption(name, 'ADDON_'),
+                title: t.stringWithPrefix(name, 'ADDON_'),
             })),
         selected: remoteAddons.selectable.catalogs
             .concat(installedAddons.selectable.catalogs)
@@ -22,7 +21,7 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
             () => {
                 const selectableCatalog = remoteAddons.selectable.catalogs
                     .find(({ id }) => id === remoteAddons.selected.request.path.id);
-                return selectableCatalog ? translateOption(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
+                return selectableCatalog ? t.stringWithPrefix(selectableCatalog.name, 'ADDON_') : remoteAddons.selected.request.path.id;
             }
             :
             null,
@@ -31,16 +30,16 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
         }
     };
     const typeSelect = {
-        title: t('SELECT_TYPE'),
+        title: t.string('SELECT_TYPE'),
         options: installedAddons.selected !== null ?
             installedAddons.selectable.types.map(({ type, deepLinks }) => ({
                 value: deepLinks.addons,
-                label: type !== null ? translateOption(type, 'TYPE_') : t('TYPE_ALL')
+                label: type !== null ? t.stringWithPrefix(type, 'TYPE_') : t.string('TYPE_ALL')
             }))
             :
             remoteAddons.selectable.types.map(({ type, deepLinks }) => ({
                 value: deepLinks.addons,
-                label: translateOption(type, 'TYPE_')
+                label: t.stringWithPrefix(type, 'TYPE_')
             })),
         selected: installedAddons.selected !== null ?
             installedAddons.selectable.types
@@ -53,12 +52,12 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
         renderLabelText: () => {
             return installedAddons.selected !== null ?
                 installedAddons.selected.request.type === null ?
-                    t('TYPE_ALL')
+                    t.string('TYPE_ALL')
                     :
-                    translateOption(installedAddons.selected.request.type, 'TYPE_')
+                    t.stringWithPrefix(installedAddons.selected.request.type, 'TYPE_')
                 :
                 remoteAddons.selected !== null ?
-                    translateOption(remoteAddons.selected.request.path.type, 'TYPE_')
+                    t.stringWithPrefix(remoteAddons.selected.request.path.type, 'TYPE_')
                     :
                     typeSelect.title;
         },
@@ -70,8 +69,9 @@ const mapSelectableInputs = (installedAddons, remoteAddons) => {
 };
 
 const useSelectableInputs = (installedAddons, remoteAddons) => {
+    const t = useTranslate();
     const selectableInputs = React.useMemo(() => {
-        return mapSelectableInputs(installedAddons, remoteAddons);
+        return mapSelectableInputs(installedAddons, remoteAddons, t);
     }, [installedAddons, remoteAddons]);
     return selectableInputs;
 };

src/routes/Board/Board.js

@@ -46,9 +46,8 @@ const Board = () => {
                             <MetaRow
                                 className={classnames(styles['board-row'], styles['continue-watching-row'], 'animation-fade-in')}
                                 title={t('BOARD_CONTINUE_WATCHING')}
-                                items={continueWatchingPreview.items}
+                                catalog={continueWatchingPreview}
                                 itemComponent={ContinueWatchingItem}
-                                deepLinks={continueWatchingPreview.deepLinks}
                             />
                             :
                             null
@@ -60,10 +59,8 @@ const Board = () => {
                                     <MetaRow
                                         key={index}
                                         className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')}
-                                        title={catalog.title}
+                                        catalog={catalog}
-                                        items={catalog.content.content}
                                         itemComponent={MetaItem}
-                                        deepLinks={catalog.deepLinks}
                                     />
                                 );
                             }
@@ -72,9 +69,8 @@ const Board = () => {
                                     <MetaRow
                                         key={index}
                                         className={classnames(styles['board-row'], 'animation-fade-in')}
-                                        title={catalog.title}
+                                        catalog={catalog}
                                         message={catalog.content.content}
-                                        deepLinks={catalog.deepLinks}
                                     />
                                 );
                             }
@@ -83,8 +79,7 @@ const Board = () => {
                                     <MetaRow.Placeholder
                                         key={index}
                                         className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')}
-                                        title={catalog.title}
+                                        catalog={catalog}
-                                        deepLinks={catalog.deepLinks}
                                     />
                                 );
                             }

src/routes/Discover/useSelectableInputs.js

@@ -1,22 +1,21 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { useTranslation } = require('react-i18next');
+const { useTranslate } = require('stremio/common');
-const { translateOption } = require('stremio/common');
 
 const mapSelectableInputs = (discover, t) => {
     const typeSelect = {
-        title: t('SELECT_TYPE'),
+        title: t.string('SELECT_TYPE'),
         options: discover.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.discover,
-                label: translateOption(type, 'TYPE_')
+                label: t.stringWithPrefix(type, 'TYPE_')
             })),
         selected: discover.selectable.types
             .filter(({ selected }) => selected)
             .map(({ deepLinks }) => deepLinks.discover),
         renderLabelText: discover.selected !== null ?
-            () => translateOption(discover.selected.request.path.type, 'TYPE_')
+            () => t.stringWithPrefix(discover.selected.request.path.type, 'TYPE_')
             :
             null,
         onSelect: (event) => {
@@ -24,11 +23,11 @@ const mapSelectableInputs = (discover, t) => {
         }
     };
     const catalogSelect = {
-        title: t('SELECT_CATALOG'),
+        title: t.string('SELECT_CATALOG'),
         options: discover.selectable.catalogs
-            .map(({ name, addon, deepLinks }) => ({
+            .map(({ id, name, addon, deepLinks }) => ({
                 value: deepLinks.discover,
-                label: name,
+                label: t.catalogTitle({ addon, id, name }),
                 title: `${name} (${addon.manifest.name})`
             })),
         selected: discover.selectable.catalogs
@@ -38,7 +37,7 @@ const mapSelectableInputs = (discover, t) => {
             () => {
                 const selectableCatalog = discover.selectable.catalogs
                     .find(({ id }) => id === discover.selected.request.path.id);
-                return selectableCatalog ? selectableCatalog.name : discover.selected.request.path.id;
+                return selectableCatalog ? t.catalogTitle(selectableCatalog, false) : discover.selected.request.path.id;
             }
             :
             null,
@@ -47,10 +46,10 @@ const mapSelectableInputs = (discover, t) => {
         }
     };
     const extraSelects = discover.selectable.extra.map(({ name, isRequired, options }) => ({
-        title: translateOption(name, 'SELECT_'),
+        title: t.stringWithPrefix(name, 'SELECT_'),
         isRequired: isRequired,
         options: options.map(({ value, deepLinks }) => ({
-            label: typeof value === 'string' ? translateOption(value) : t('NONE'),
+            label: typeof value === 'string' ? t.stringWithPrefix(value) : t.string('NONE'),
             value: JSON.stringify({
                 href: deepLinks.discover,
                 value
@@ -63,7 +62,7 @@ const mapSelectableInputs = (discover, t) => {
                 value
             })),
         renderLabelText: options.some(({ selected, value }) => selected && value === null) ?
-            () => translateOption(name, 'SELECT_')
+            () => t.stringWithPrefix(name, 'SELECT_')
             :
             null,
         onSelect: (event) => {
@@ -75,7 +74,7 @@ const mapSelectableInputs = (discover, t) => {
 };
 
 const useSelectableInputs = (discover) => {
-    const { t } = useTranslation();
+    const t = useTranslate();
     const selectableInputs = React.useMemo(() => {
         return mapSelectableInputs(discover, t);
     }, [discover.selected, discover.selectable]);

src/routes/Library/useSelectableInputs.js

@@ -1,16 +1,15 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { useTranslation } = require('react-i18next');
+const { useTranslate } = require('stremio/common');
-const { translateOption } = require('stremio/common');
 
 const mapSelectableInputs = (library, t) => {
     const typeSelect = {
-        title: t('SELECT_TYPE'),
+        title: t.string('SELECT_TYPE'),
         options: library.selectable.types
             .map(({ type, deepLinks }) => ({
                 value: deepLinks.library,
-                label: type === null ? t('TYPE_ALL') : translateOption(type, 'TYPE_')
+                label: type === null ? t.string('TYPE_ALL') : t.stringWithPrefix(type, 'TYPE_')
             })),
         selected: library.selectable.types
             .filter(({ selected }) => selected)
@@ -20,11 +19,11 @@ const mapSelectableInputs = (library, t) => {
         }
     };
     const sortSelect = {
-        title: t('SELECT_SORT'),
+        title: t.string('SELECT_SORT'),
         options: library.selectable.sorts
             .map(({ sort, deepLinks }) => ({
                 value: deepLinks.library,
-                label: translateOption(sort, 'SORT_')
+                label: t.stringWithPrefix(sort, 'SORT_')
             })),
         selected: library.selectable.sorts
             .filter(({ selected }) => selected)
@@ -51,7 +50,7 @@ const mapSelectableInputs = (library, t) => {
 };
 
 const useSelectableInputs = (library) => {
-    const { t } = useTranslation();
+    const t = useTranslate();
     const selectableInputs = React.useMemo(() => {
         return mapSelectableInputs(library, t);
     }, [library]);

src/types/types.d.ts

@@ -54,7 +54,9 @@ type BehaviorHints = {
 type PosterShape = 'square' | 'landscape' | 'poster' | null; 
 
 type Catalog<T, D = any> = {
-    title?: string,
+    label?: string,
+    name?: string,
+    type?: string,
     content: T,
     installed?: boolean,
     deepLinks?: D,