Skip to content

Commit

Permalink
Merge pull request #540 from Stremio/feat/translate-catalog-names
Browse files Browse the repository at this point in the history 
Translate catalog names
  • Loading branch information
@tymmesyde
tymmesyde authored Jan 3, 2024
2 parents 0344999 + b9cb10e commit e8bc811
Show file tree
Hide file tree
Showing 11 changed files with 149 additions and 99 deletions.
12 changes: 7 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
91 changes: 59 additions & 32 deletions src/common/MetaRow/MetaRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { t } = useTranslation();
const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
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'])}>
{
(typeof title === 'string' && title.length > 0) || (deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string')) ?
<div className={styles['header-container']}>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
{
deepLinks && (typeof deepLinks.discover === 'string' || typeof deepLinks.library === 'string') ?
<Button className={styles['see-all-container']} title={t('BUTTON_SEE_ALL')} href={deepLinks.discover || deepLinks.library} tabIndex={-1}>
<div className={styles['label']}>{ t('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
}
</div>
:
null
}
<div className={styles['header-container']}>
{
typeof catalogTitle === 'string' && catalogTitle.length > 0 ?
<div className={styles['title-container']} title={catalogTitle}>{catalogTitle}</div>
:
null
}
{
href ?
<Button className={styles['see-all-container']} title={t.string('BUTTON_SEE_ALL')} href={href} tabIndex={-1}>
<div className={styles['label']}>{ t.string('BUTTON_SEE_ALL') }</div>
<Icon className={styles['icon']} name={'chevron-forward'} />
</Button>
:
null
}
</div>
{
typeof message === 'string' && message.length > 0 ?
<div className={styles['message-container']} title={message}>{message}</div>
Expand Down Expand Up @@ -69,14 +77,33 @@ MetaRow.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
message: PropTypes.string,
items: PropTypes.arrayOf(PropTypes.shape({
posterShape: 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,
}),
}),
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;
4 changes: 2 additions & 2 deletions src/common/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');

Expand Down Expand Up @@ -83,7 +83,6 @@ module.exports = {
interfaceLanguages,
languageNames,
routesRegexp,
translateOption,
useAnimationFrame,
useBinaryState,
useFullscreen,
Expand All @@ -94,6 +93,7 @@ module.exports = {
useProfile,
useStreamingServer,
useTorrent,
useTranslate,
platform,
EventModal,
};
15 changes: 0 additions & 15 deletions src/common/translateOption.js
View file

This file was deleted.

41 changes: 41 additions & 0 deletions src/common/useTranslate.js
View file
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 14 additions & 14 deletions src/routes/Addons/useSelectableInputs.js
View file
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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,
Expand All @@ -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
Expand All @@ -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;
},
Expand All @@ -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;
};
Expand Down
13 changes: 4 additions & 9 deletions src/routes/Board/Board.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
items={catalog.content.content}
catalog={catalog}
itemComponent={MetaItem}
deepLinks={catalog.deepLinks}
/>
);
}
Expand All @@ -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}
/>
);
}
Expand All @@ -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}
deepLinks={catalog.deepLinks}
catalog={catalog}
/>
);
}
Expand Down
Loading

0 comments on commit e8bc811

Please sign in to comment.