Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #576 from Stremio/fix/new-videos-counter-library-item

Browse source 
fix: show new videos counter on library items
This commit is contained in:
Tim 2024-02-01 14:09:05 +01:00 committed by GitHub
commit 388d11fece
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/common/ContinueWatchingItem/ContinueWatchingItem.js
View file

@ -3,17 +3,10 @@
const React = require('react');
const PropTypes = require('prop-types');
const { useServices } = require('stremio/services');
const useNotifications = require('stremio/common/useNotifications');
const LibItem = require('stremio/common/LibItem');
const ContinueWatchingItem = ({ _id, deepLinks, ...props }) => {
const ContinueWatchingItem = ({ _id, notifications, deepLinks, ...props }) => {
const { core } = useServices();
const notifications = useNotifications();
const newVideos = React.useMemo(() => {
const count = notifications.items?.[_id]?.length ?? 0;
return Math.min(Math.max(count, 0), 99);
}, [_id, notifications.items]);
const onClick = React.useCallback(() => {
if (deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams) {
@ -51,8 +44,9 @@ const ContinueWatchingItem = ({ _id, deepLinks, ...props }) => {
return (
<LibItem
{...props}
_id={_id}
posterChangeCursor={true}
newVideos={newVideos}
notifications={notifications}
onClick={onClick}
onPlayClick={onPlayClick}
onDismissClick={onDismissClick}
@ -62,6 +56,7 @@ const ContinueWatchingItem = ({ _id, deepLinks, ...props }) => {
ContinueWatchingItem.propTypes = {
_id: PropTypes.string,
notifications: PropTypes.object,
deepLinks: PropTypes.shape({
metaDetailsVideos: PropTypes.string,
metaDetailsStreams: PropTypes.string,

8
src/common/LibItem/LibItem.js
View file

@ -13,8 +13,12 @@ const OPTIONS = [
{ label: 'LIBRARY_REMOVE', value: 'remove' },
];
const LibItem = ({ _id, removable, ...props }) => {
const LibItem = ({ _id, removable, notifications, ...props }) => {
const { core } = useServices();
const newVideos = React.useMemo(() => {
const count = notifications.items?.[_id]?.length ?? 0;
return Math.min(Math.max(count, 0), 99);
}, [_id, notifications]);
const options = React.useMemo(() => {
return OPTIONS
.filter(({ value }) => {
@ -98,6 +102,7 @@ const LibItem = ({ _id, removable, ...props }) => {
return (
<MetaItem
{...props}
newVideos={newVideos}
options={options}
optionOnSelect={optionOnSelect}
/>
@ -108,6 +113,7 @@ LibItem.propTypes = {
_id: PropTypes.string,
removable: PropTypes.bool,
progress: PropTypes.number,
notifications: PropTypes.object,
deepLinks: PropTypes.shape({
metaDetailsVideos: PropTypes.string,
metaDetailsStreams: PropTypes.string,

2
src/common/MetaItem/MetaItem.js
View file

@ -76,7 +76,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
null
}
{
watched ?
!newVideos && watched ?
<div className={styles['watched-icon-layer']}>
<Icon className={styles['watched-icon']} name={'checkmark'} />
</div>

6
src/common/MetaRow/MetaRow.js
View file

@ -11,7 +11,7 @@ const useTranslate = require('stremio/common/useTranslate');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const styles = require('./styles');
const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
const MetaRow = ({ className, title, catalog, message, itemComponent, notifications }) => {
const t = useTranslate();
const catalogTitle = React.useMemo(() => {
@ -56,7 +56,8 @@ const MetaRow = ({ className, title, catalog, message, itemComponent }) => {
return React.createElement(itemComponent, {
...item,
key: index,
className: classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`])
className: classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`]),
notifications,
});
})
:
@ -104,6 +105,7 @@ MetaRow.propTypes = {
}),
}),
itemComponent: PropTypes.elementType,
notifications: PropTypes.object,
};
module.exports = MetaRow;

4
src/routes/Board/Board.js
View file

@ -4,7 +4,7 @@ const React = require('react');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, useNotifications, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
@ -16,6 +16,7 @@ const Board = () => {
const streamingServer = useStreamingServer();
const continueWatchingPreview = useContinueWatchingPreview();
const [board, loadBoardRows] = useBoard();
const notifications = useNotifications();
const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
const scrollContainerRef = React.useRef();
const onVisibleRangeChange = React.useCallback(() => {
@ -48,6 +49,7 @@ const Board = () => {
title={t('BOARD_CONTINUE_WATCHING')}
catalog={continueWatchingPreview}
itemComponent={ContinueWatchingItem}
notifications={notifications}
/>
:
null

5
src/routes/Library/Library.js
View file

@ -5,7 +5,7 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const NotFound = require('stremio/routes/NotFound');
const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
const { Button, DelayedRenderer, Multiselect, MainNavBars, LibItem, Image, ModalDialog, PaginationInput, useProfile, useNotifications, routesRegexp, useBinaryState, withCoreSuspender } = require('stremio/common');
const useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@ -45,6 +45,7 @@ function withModel(Library) {
const Library = ({ model, urlParams, queryParams }) => {
const profile = useProfile();
const notifications = useNotifications();
const library = useLibrary(model, urlParams, queryParams);
const [typeSelect, sortSelect, paginationInput] = useSelectableInputs(library);
const [inputsModalOpen, openInputsModal, closeInputsModal] = useBinaryState(false);
@ -108,7 +109,7 @@ const Library = ({ model, urlParams, queryParams }) => {
:
<div className={classnames(styles['meta-items-container'], 'animation-fade-in')}>
{library.catalog.map((libItem, index) => (
<LibItem {...libItem} removable={model === 'library'} key={index} />
<LibItem {...libItem} notifications={notifications} removable={model === 'library'} key={index} />
))}
</div>
}