From b853e18499a4711bd3261321572952188f632099 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 8 Dec 2023 20:21:52 +0100 Subject: [PATCH 1/6] feat: translate catalog names --- src/common/MetaRow/MetaRow.js | 58 +++++++++++++--------- src/common/index.js | 2 + src/common/translateCatalog.js | 18 +++++++ src/routes/Board/Board.js | 8 ++- src/routes/Discover/useSelectableInputs.js | 8 +-- src/types/types.d.ts | 4 +- 6 files changed, 65 insertions(+), 33 deletions(-) create mode 100644 src/common/translateCatalog.js diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 5d06d9615..298f7919b 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -8,35 +8,36 @@ 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 translateCatalog = require('stremio/common/translateCatalog'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); -const MetaRow = ({ className, title, message, items, itemComponent, deepLinks }) => { +const MetaRow = ({ className, title, catalog, message, items, itemComponent, deepLinks }) => { const { t } = useTranslation(); + + const catalogTitle = React.useMemo(() => { + return title ?? translateCatalog(catalog); + }, [title, catalog]); + return (
- { - (typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ? -
- { - typeof title === 'string' && title.length > 0 ? -
{title}
- : - null - } - { - deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ? - - : - null - } -
- : - null - } +
+ { + typeof catalogTitle === 'string' && catalogTitle.length > 0 ? +
{catalogTitle}
+ : + null + } + { + deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ? + + : + null + } +
{ typeof message === 'string' && message.length > 0 ?
{message}
@@ -69,6 +70,17 @@ MetaRow.propTypes = { className: PropTypes.string, title: PropTypes.string, message: PropTypes.string, + catalog: PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + type: PropTypes.string, + addon: PropTypes.shape({ + manifest: PropTypes.shape({ + id: PropTypes.string, + name: PropTypes.string, + }), + }), + }), items: PropTypes.arrayOf(PropTypes.shape({ posterShape: PropTypes.string })), diff --git a/src/common/index.js b/src/common/index.js index 8d399d9a0..0e8cf8c35 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -33,6 +33,7 @@ const interfaceLanguages = require('./interfaceLanguages.json'); const languageNames = require('./languageNames.json'); const routesRegexp = require('./routesRegexp'); const translateOption = require('./translateOption'); +const translateCatalog = require('./translateCatalog'); const useAnimationFrame = require('./useAnimationFrame'); const useBinaryState = require('./useBinaryState'); const useFullscreen = require('./useFullscreen'); @@ -84,6 +85,7 @@ module.exports = { languageNames, routesRegexp, translateOption, + translateCatalog, useAnimationFrame, useBinaryState, useFullscreen, diff --git a/src/common/translateCatalog.js b/src/common/translateCatalog.js new file mode 100644 index 000000000..86a4c70ad --- /dev/null +++ b/src/common/translateCatalog.js @@ -0,0 +1,18 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const { t } = require('i18next'); + +const translateCatalog = ({ addon, id, name, type } = {}, withType = true) => { + if (addon && id && name) { + const label = `${addon.manifest.id}/${id}`; + const translatedName = t(`CATALOG_${label}`, { defaultValue: name }); + if (type && withType) { + const translatedType = t(`TYPE_${type}`, { defaultValue: type }); + return `${translatedName} - ${translatedType}`; + } + return translatedName; + } + return null; +}; + +module.exports = translateCatalog; diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 6e92beea5..f240a1051 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -59,10 +59,9 @@ const Board = () => { ); } @@ -71,9 +70,8 @@ const Board = () => { ); } @@ -82,7 +80,7 @@ const Board = () => { ); diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js index 6bba2c8ef..a9f393537 100644 --- a/src/routes/Discover/useSelectableInputs.js +++ b/src/routes/Discover/useSelectableInputs.js @@ -2,7 +2,7 @@ const React = require('react'); const { useTranslation } = require('react-i18next'); -const { translateOption } = require('stremio/common'); +const { translateOption, translateCatalog } = require('stremio/common'); const mapSelectableInputs = (discover, t) => { const typeSelect = { @@ -26,9 +26,9 @@ const mapSelectableInputs = (discover, t) => { const catalogSelect = { title: t('SELECT_CATALOG'), options: discover.selectable.catalogs - .map(({ name, addon, deepLinks }) => ({ + .map(({ id, name, addon, deepLinks }) => ({ value: deepLinks.discover, - label: name, + label: translateCatalog({ addon, id, name }), title: `${name} (${addon.manifest.name})` })), selected: discover.selectable.catalogs @@ -38,7 +38,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 ? translateCatalog(selectableCatalog, false) : discover.selected.request.path.id; } : null, diff --git a/src/types/types.d.ts b/src/types/types.d.ts index 258e48098..18c769a07 100644 --- a/src/types/types.d.ts +++ b/src/types/types.d.ts @@ -54,7 +54,9 @@ type BehaviorHints = { type PosterShape = 'square' | 'landscape' | 'poster' | null; type Catalog = { - title?: string, + label?: string, + name?: string, + type?: string, content: T, installed?: boolean, deepLinks?: D, From 774a1f6c6ed0e05599c09250fa0f16da7100592e Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 19 Dec 2023 03:30:10 +0100 Subject: [PATCH 2/6] refactor: create useTranslate hook --- src/common/MetaRow/MetaRow.js | 11 +++--- src/common/index.js | 6 ++-- src/common/translateCatalog.js | 18 ---------- src/common/translateOption.js | 15 -------- src/common/useTranslate.js | 40 ++++++++++++++++++++++ src/routes/Addons/useSelectableInputs.js | 28 +++++++-------- src/routes/Discover/useSelectableInputs.js | 23 ++++++------- src/routes/Library/useSelectableInputs.js | 13 ++++--- 8 files changed, 78 insertions(+), 76 deletions(-) delete mode 100644 src/common/translateCatalog.js delete mode 100644 src/common/translateOption.js create mode 100644 src/common/useTranslate.js diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 298f7919b..48b5092fc 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -4,19 +4,18 @@ 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 translateCatalog = require('stremio/common/translateCatalog'); +const useTranslate = require('stremio/common/useTranslate'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); const MetaRow = ({ className, title, catalog, message, items, itemComponent, deepLinks }) => { - const { t } = useTranslation(); + const t = useTranslate(); const catalogTitle = React.useMemo(() => { - return title ?? translateCatalog(catalog); + return title ?? t.catalogTitle(catalog); }, [title, catalog]); return ( @@ -30,8 +29,8 @@ const MetaRow = ({ className, title, catalog, message, items, itemComponent, dee } { deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ? - : diff --git a/src/common/index.js b/src/common/index.js index 0e8cf8c35..f2942bfb4 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -32,8 +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 translateCatalog = require('./translateCatalog'); const useAnimationFrame = require('./useAnimationFrame'); const useBinaryState = require('./useBinaryState'); const useFullscreen = require('./useFullscreen'); @@ -44,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 externalPlayerOptions = require('./externalPlayerOptions'); @@ -84,8 +83,6 @@ module.exports = { interfaceLanguages, languageNames, routesRegexp, - translateOption, - translateCatalog, useAnimationFrame, useBinaryState, useFullscreen, @@ -96,6 +93,7 @@ module.exports = { useProfile, useStreamingServer, useTorrent, + useTranslate, platform, externalPlayerOptions, }; diff --git a/src/common/translateCatalog.js b/src/common/translateCatalog.js deleted file mode 100644 index 86a4c70ad..000000000 --- a/src/common/translateCatalog.js +++ /dev/null @@ -1,18 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const { t } = require('i18next'); - -const translateCatalog = ({ addon, id, name, type } = {}, withType = true) => { - if (addon && id && name) { - const label = `${addon.manifest.id}/${id}`; - const translatedName = t(`CATALOG_${label}`, { defaultValue: name }); - if (type && withType) { - const translatedType = t(`TYPE_${type}`, { defaultValue: type }); - return `${translatedName} - ${translatedType}`; - } - return translatedName; - } - return null; -}; - -module.exports = translateCatalog; diff --git a/src/common/translateOption.js b/src/common/translateOption.js deleted file mode 100644 index bbe0a9ebc..000000000 --- a/src/common/translateOption.js +++ /dev/null @@ -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; diff --git a/src/common/useTranslate.js b/src/common/useTranslate.js new file mode 100644 index 000000000..22f0443ea --- /dev/null +++ b/src/common/useTranslate.js @@ -0,0 +1,40 @@ +const { useTranslation } = require('react-i18next'); + +const useTranslate = () => { + const { t } = useTranslation(); + + const string = (key) => t(key); + + const stringWithPrefix = (value, prefix, fallback = null) => { + const key = `${prefix}${value}`; + const defaultValue = fallback ?? value.charAt(0).toUpperCase() + value.slice(1); + + return t(key, { + defaultValue, + }); + }; + + const catalogTitle = ({ 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; + }; + + return { + string, + stringWithPrefix, + catalogTitle, + }; +}; + +module.exports = useTranslate; diff --git a/src/routes/Addons/useSelectableInputs.js b/src/routes/Addons/useSelectableInputs.js index a48cd2ac9..af0bb35fc 100644 --- a/src/routes/Addons/useSelectableInputs.js +++ b/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 { translateOption } = require('stremio/common'); +const { useTranslate } = 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_'), - title: translateOption(name, 'ADDON_'), + label: t.stringWithPrefix(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; }; diff --git a/src/routes/Discover/useSelectableInputs.js b/src/routes/Discover/useSelectableInputs.js index a9f393537..18d317507 100644 --- a/src/routes/Discover/useSelectableInputs.js +++ b/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 { translateOption, translateCatalog } = require('stremio/common'); +const { useTranslate } = 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(({ id, name, addon, deepLinks }) => ({ value: deepLinks.discover, - label: translateCatalog({ addon, id, 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 ? translateCatalog(selectableCatalog, false) : 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]); diff --git a/src/routes/Library/useSelectableInputs.js b/src/routes/Library/useSelectableInputs.js index 49eb94a1f..ef956814b 100644 --- a/src/routes/Library/useSelectableInputs.js +++ b/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 { translateOption } = require('stremio/common'); +const { useTranslate } = 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]); From 1006ef3a472263c1a4b5eed5bb70480504ab6e33 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 3 Jan 2024 11:48:41 +0100 Subject: [PATCH 3/6] chore: update stremio-core-web --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0780a8c51..a6a9de7da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "5.0.1", - "@stremio/stremio-core-web": "0.44.30", + "@stremio/stremio-core-web": "0.46.0", "@stremio/stremio-icons": "5.0.0-beta.3", "@stremio/stremio-video": "0.0.26", "a-color-picker": "1.2.1", @@ -2704,9 +2704,9 @@ "integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA==" }, "node_modules/@stremio/stremio-core-web": { - "version": "0.44.30", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.30.tgz", - "integrity": "sha512-iwasxT7Urf/1iCuPVMkEgfdTt1aQnL5eIeZfp7R0+ThBZGNuM9YNhq2r9BbOZNYmC1PIPTfsa8QmWtXC5J9oIQ==", + "version": "0.46.0", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.46.0.tgz", + "integrity": "sha512-eGc0PfeJB5dYbk1jJz/BJNU+an0/LA8LWAxEDkOq6YtqjvQrsH+djuXL8u0ZDrwxt7YlHhHk6B7W+MBx/gX4pQ==", "dependencies": { "@babel/runtime": "7.16.0" } @@ -16834,9 +16834,9 @@ "integrity": "sha512-Dt3PYmy1DZ473QNs99KYXVWQPHtpIl37VUY0+gCEvvuCqE1fRrZIJtZ9KbysUKonvO7WwdQDztgcW0iGoc1dEA==" }, "@stremio/stremio-core-web": { - "version": "0.44.30", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.44.30.tgz", - "integrity": "sha512-iwasxT7Urf/1iCuPVMkEgfdTt1aQnL5eIeZfp7R0+ThBZGNuM9YNhq2r9BbOZNYmC1PIPTfsa8QmWtXC5J9oIQ==", + "version": "0.46.0", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.46.0.tgz", + "integrity": "sha512-eGc0PfeJB5dYbk1jJz/BJNU+an0/LA8LWAxEDkOq6YtqjvQrsH+djuXL8u0ZDrwxt7YlHhHk6B7W+MBx/gX4pQ==", "requires": { "@babel/runtime": "7.16.0" } diff --git a/package.json b/package.json index f04290e69..e9674fce2 100755 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@babel/runtime": "7.16.0", "@sentry/browser": "6.13.3", "@stremio/stremio-colors": "5.0.1", - "@stremio/stremio-core-web": "0.44.30", + "@stremio/stremio-core-web": "0.46.0", "@stremio/stremio-icons": "5.0.0-beta.3", "@stremio/stremio-video": "0.0.26", "a-color-picker": "1.2.1", From c0b0338525c9c6dc16ba290e605b8a62830e71d8 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 3 Jan 2024 11:56:12 +0100 Subject: [PATCH 4/6] chore: update stremio-translations --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6a9de7da..7df55aa97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,7 @@ "react-i18next": "^12.1.1", "react-is": "18.2.0", "spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#9c91862cdf8f1f0fb54df870807cd6af18679a89", + "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff", "url": "0.11.0", "use-long-press": "^3.1.5" }, @@ -12878,9 +12878,9 @@ } }, "node_modules/stremio-translations": { - "version": "1.44.1", - "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#9c91862cdf8f1f0fb54df870807cd6af18679a89", - "integrity": "sha512-sOYmxXAVT5DwkIxFnateCQ+4rfe9xqWVTdnwc7Jdo7UCdnbtTUuHXIjyKFK2Vv11nWV5mBrizxAscdcxUpEImw==", + "version": "1.44.5", + "resolved": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff", + "integrity": "sha512-vE23dpAIJLBHwGarwNh7uXFU7JxMkGWbP5Oi8LJbsiQHgrsSHD/v7mcXLDxVgCpPTM4D/SbfcJnJkAKXwllezw==", "license": "MIT" }, "node_modules/string_decoder": { @@ -24576,9 +24576,9 @@ "dev": true }, "stremio-translations": { - "version": "git+ssh://git@github.com/Stremio/stremio-translations.git#9c91862cdf8f1f0fb54df870807cd6af18679a89", - "integrity": "sha512-sOYmxXAVT5DwkIxFnateCQ+4rfe9xqWVTdnwc7Jdo7UCdnbtTUuHXIjyKFK2Vv11nWV5mBrizxAscdcxUpEImw==", - "from": "stremio-translations@git+ssh://git@github.com/Stremio/stremio-translations.git#9c91862cdf8f1f0fb54df870807cd6af18679a89" + "version": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff", + "integrity": "sha512-vE23dpAIJLBHwGarwNh7uXFU7JxMkGWbP5Oi8LJbsiQHgrsSHD/v7mcXLDxVgCpPTM4D/SbfcJnJkAKXwllezw==", + "from": "stremio-translations@git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff" }, "string_decoder": { "version": "1.1.1", diff --git a/package.json b/package.json index e9674fce2..6f1c4f557 100755 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "react-i18next": "^12.1.1", "react-is": "18.2.0", "spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#64871b1422466f5f45d24ebc8bbd315b2ebab6a6", - "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#9c91862cdf8f1f0fb54df870807cd6af18679a89", + "stremio-translations": "git+ssh://git@github.com/Stremio/stremio-translations.git#f5587521902320be9b97ecf5e1c5c38d1aa847ff", "url": "0.11.0", "use-long-press": "^3.1.5" }, From a37579f70e10e37ec708d3c24ee63af3912bfef5 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 3 Jan 2024 12:15:35 +0100 Subject: [PATCH 5/6] fix: see all button was missing on MetaRow --- src/common/MetaRow/MetaRow.js | 36 +++++++++++++++++++++++++---------- src/routes/Board/Board.js | 5 +---- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index 48b5092fc..de56dcdca 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -11,13 +11,21 @@ const useTranslate = require('stremio/common/useTranslate'); const MetaRowPlaceholder = require('./MetaRowPlaceholder'); const styles = require('./styles'); -const MetaRow = ({ className, title, catalog, message, items, itemComponent, deepLinks }) => { +const MetaRow = ({ className, title, catalog, message, itemComponent }) => { const t = useTranslate(); const catalogTitle = React.useMemo(() => { return title ?? t.catalogTitle(catalog); }, [title, catalog]); + const items = React.useMemo(() => { + return catalog?.items ?? catalog?.content?.content; + }, [catalog]); + + const href = React.useMemo(() => { + return catalog?.deepLinks?.discover ?? catalog?.deepLinks?.library; + }, [catalog]); + return (
@@ -28,8 +36,8 @@ const MetaRow = ({ className, title, catalog, message, items, itemComponent, dee null } { - deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ? - @@ -79,15 +87,23 @@ MetaRow.propTypes = { 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, + }), }), - items: PropTypes.arrayOf(PropTypes.shape({ - posterShape: PropTypes.string - })), itemComponent: PropTypes.elementType, - deepLinks: PropTypes.shape({ - discover: PropTypes.string, - library: PropTypes.string - }) }; module.exports = MetaRow; diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index f240a1051..2ce84ecaa 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -45,9 +45,8 @@ const Board = () => { : null @@ -60,7 +59,6 @@ const Board = () => { key={index} className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`], 'animation-fade-in')} catalog={catalog} - items={catalog.content.content} itemComponent={MetaItem} /> ); @@ -81,7 +79,6 @@ const Board = () => { key={index} className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')} catalog={catalog} - deepLinks={catalog.deepLinks} /> ); } From 1c2a7f9f90350fa794f84f59aa9e7aa56348f2b7 Mon Sep 17 00:00:00 2001 From: Tim Date: Wed, 3 Jan 2024 12:16:18 +0100 Subject: [PATCH 6/6] fix: update translations on lang change on MetaRow --- src/common/MetaRow/MetaRow.js | 2 +- src/common/useTranslate.js | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/common/MetaRow/MetaRow.js b/src/common/MetaRow/MetaRow.js index de56dcdca..5a99c585a 100644 --- a/src/common/MetaRow/MetaRow.js +++ b/src/common/MetaRow/MetaRow.js @@ -16,7 +16,7 @@ const MetaRow = ({ className, title, catalog, message, itemComponent }) => { const catalogTitle = React.useMemo(() => { return title ?? t.catalogTitle(catalog); - }, [title, catalog]); + }, [title, catalog, t.catalogTitle]); const items = React.useMemo(() => { return catalog?.items ?? catalog?.content?.content; diff --git a/src/common/useTranslate.js b/src/common/useTranslate.js index 22f0443ea..f253e5129 100644 --- a/src/common/useTranslate.js +++ b/src/common/useTranslate.js @@ -1,20 +1,21 @@ +const { useCallback } = require('react'); const { useTranslation } = require('react-i18next'); const useTranslate = () => { const { t } = useTranslation(); - const string = (key) => t(key); + const string = useCallback((key) => t(key), [t]); - const stringWithPrefix = (value, prefix, fallback = null) => { + 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 = ({ addon, id, name, type } = {}, withType = true) => { + 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); @@ -28,7 +29,7 @@ const useTranslate = () => { } return null; - }; + }, [stringWithPrefix]); return { string,