Merge pull request #850 from Stremio/feat/show-catalog-names-while-loading

Board/Search: Show catalog names while loading
This commit is contained in:
Tim 2025-02-27 15:37:21 +01:00 committed by GitHub
commit 21c050f887
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 13 additions and 11 deletions

View file

@ -3,7 +3,7 @@
const React = require('react');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const useTranslate = require('stremio/common/useTranslate');
const { useStreamingServer, useNotifications, withCoreSuspender, getVisibleChildrenRange, useProfile } = require('stremio/common');
const { ContinueWatchingItem, EventModal, MainNavBars, MetaItem, MetaRow } = require('stremio/components');
const useBoard = require('./useBoard');
@ -14,7 +14,7 @@ const { default: StreamingServerWarning } = require('./StreamingServerWarning');
const THRESHOLD = 5;
const Board = () => {
const { t } = useTranslation();
const t = useTranslate();
const streamingServer = useStreamingServer();
const continueWatchingPreview = useContinueWatchingPreview();
const [board, loadBoardRows] = useBoard();
@ -55,7 +55,7 @@ const Board = () => {
continueWatchingPreview.items.length > 0 ?
<MetaRow
className={classnames(styles['board-row'], styles['continue-watching-row'], 'animation-fade-in')}
title={t('BOARD_CONTINUE_WATCHING')}
title={t.string('BOARD_CONTINUE_WATCHING')}
catalog={continueWatchingPreview}
itemComponent={ContinueWatchingItem}
notifications={notifications}
@ -94,6 +94,7 @@ const Board = () => {
key={index}
className={classnames(styles['board-row'], styles['board-row-poster'], 'animation-fade-in')}
catalog={catalog}
title={t.catalogTitle(catalog)}
/>
);
}

View file

@ -4,7 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const useTranslate = require('stremio/common/useTranslate');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
const { Image, MainNavBars, MetaItem, MetaRow } = require('stremio/components');
@ -14,7 +14,7 @@ const styles = require('./styles');
const THRESHOLD = 100;
const Search = ({ queryParams }) => {
const { t } = useTranslation();
const t = useTranslate();
const [search, loadSearchRows] = useSearch(queryParams);
const query = React.useMemo(() => {
return search.selected !== null ?
@ -52,24 +52,24 @@ const Search = ({ queryParams }) => {
query === null ?
<div className={classnames(styles['search-hints-wrapper'])}>
<div className={classnames(styles['search-hints-title-container'], 'animation-fade-in')}>
<div className={styles['search-hints-title']}>{t('SEARCH_ANYTHING')}</div>
<div className={styles['search-hints-title']}>{t.string('SEARCH_ANYTHING')}</div>
</div>
<div className={classnames(styles['search-hints-container'], 'animation-fade-in')}>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'trailer'} />
<div className={styles['label']}>{t('SEARCH_CATEGORIES')}</div>
<div className={styles['label']}>{t.string('SEARCH_CATEGORIES')}</div>
</div>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'actors'} />
<div className={styles['label']}>{t('SEARCH_PERSONS')}</div>
<div className={styles['label']}>{t.string('SEARCH_PERSONS')}</div>
</div>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'link'} />
<div className={styles['label']}>{t('SEARCH_PROTOCOLS')}</div>
<div className={styles['label']}>{t.string('SEARCH_PROTOCOLS')}</div>
</div>
<div className={styles['search-hint-container']}>
<Icon className={styles['icon']} name={'imdb-outline'} />
<div className={styles['label']}>{t('SEARCH_TYPES')}</div>
<div className={styles['label']}>{t.string('SEARCH_TYPES')}</div>
</div>
</div>
</div>
@ -81,7 +81,7 @@ const Search = ({ queryParams }) => {
src={require('/images/empty.png')}
alt={' '}
/>
<div className={styles['message-label']}>{ t('STREMIO_TV_SEARCH_NO_ADDONS') }</div>
<div className={styles['message-label']}>{ t.string('STREMIO_TV_SEARCH_NO_ADDONS') }</div>
</div>
:
search.catalogs.map((catalog, index) => {
@ -115,6 +115,7 @@ const Search = ({ queryParams }) => {
key={index}
className={classnames(styles['search-row'], styles['search-row-poster'], 'animation-fade-in')}
catalog={catalog}
title={t.catalogTitle(catalog)}
/>
);
}