fix: show new videos counter on library items

src/common/ContinueWatchingItem/ContinueWatchingItem.js

@@ -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,

src/common/LibItem/LibItem.js

@@ -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,

src/common/MetaItem/MetaItem.js

@@ -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>

src/common/MetaRow/MetaRow.js

@@ -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;

src/routes/Board/Board.js

@@ -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

src/routes/Library/Library.js

@@ -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>
                 }