Merge pull request #438 from Stremio/feat/details-notifications-toggle

feat: add notifications toggle on details

src/routes/MetaDetails/MetaDetails.js

@@ -61,6 +61,17 @@ const MetaDetails = ({ urlParams, queryParams }) => {
             }
         });
     }, [metaDetails]);
+    const toggleNotifications = React.useCallback(() => {
+        if (metaDetails.libraryItem) {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'ToggleLibraryItemNotifications',
+                    args: [metaDetails.libraryItem._id, !metaDetails.libraryItem.state.noNotif],
+                }
+            });
+        }
+    }, [metaDetails.libraryItem]);
     const seasonOnSelect = React.useCallback((event) => {
         setSeason(event.value);
     }, [setSeason]);
@@ -156,8 +167,10 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                             <VideosList
                                 className={styles['videos-list']}
                                 metaItem={metaDetails.metaItem}
+                                libraryItem={metaDetails.libraryItem}
                                 season={season}
                                 seasonOnSelect={seasonOnSelect}
+                                toggleNotifications={toggleNotifications}
                             />
                             :
                             null

src/routes/MetaDetails/VideosList/SeasonsBar/styles.less

@@ -13,7 +13,6 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 1rem;
     overflow: visible;
 
     .prev-season-button, .next-season-button {

src/routes/MetaDetails/VideosList/VideosList.js

@@ -4,13 +4,15 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { t } = require('i18next');
-const Image = require('stremio/common/Image');
-const SearchBar = require('stremio/common/SearchBar');
+const { Image, SearchBar, Checkbox } = require('stremio/common');
 const SeasonsBar = require('./SeasonsBar');
 const Video = require('./Video');
 const styles = require('./styles');
 
-const VideosList = ({ className, metaItem, season, seasonOnSelect }) => {
+const VideosList = ({ className, metaItem, libraryItem, season, seasonOnSelect, toggleNotifications }) => {
+    const showNotificationsToggle = React.useMemo(() => {
+        return metaItem?.content?.content?.inLibrary && metaItem?.content?.content?.videos?.length;
+    }, [metaItem]);
     const videos = React.useMemo(() => {
         return metaItem && metaItem.content.type === 'Ready' ?
             metaItem.content.content.videos
@@ -80,6 +82,14 @@ const VideosList = ({ className, metaItem, season, seasonOnSelect }) => {
                         </div>
                         :
                         <React.Fragment>
+                            {
+                                showNotificationsToggle && libraryItem ?
+                                    <Checkbox className={styles['notifications-checkbox']} checked={!libraryItem.state.noNotif} onClick={toggleNotifications}>
+                                        {t('DETAIL_RECEIVE_NOTIF_SERIES')}
+                                    </Checkbox>
+                                    :
+                                    null
+                            }
                             {
                                 seasons.length > 0 ?
                                     <SeasonsBar
@@ -133,8 +143,10 @@ const VideosList = ({ className, metaItem, season, seasonOnSelect }) => {
 VideosList.propTypes = {
     className: PropTypes.string,
     metaItem: PropTypes.object,
+    libraryItem: PropTypes.object,
     season: PropTypes.number,
-    seasonOnSelect: PropTypes.func
+    seasonOnSelect: PropTypes.func,
+    toggleNotifications: PropTypes.func,
 };
 
 module.exports = VideosList;

src/routes/MetaDetails/VideosList/styles.less

@@ -6,6 +6,7 @@
 .videos-list-container {
     display: flex;
     flex-direction: column;
+    padding-top: 0.5rem;
 
     .message-container {
         flex: 1;
@@ -35,9 +36,22 @@
         }
     }
 
+    .notifications-checkbox {
+        flex: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 1rem;
+        height: 3rem;
+        padding: 0 1.5rem;
+        color: @color-surface-light5-90;
+    }
+
     .seasons-bar {
         flex: none;
         align-self: stretch;
+        margin: 0.5rem 1rem 1rem 1rem;
     }
 
     .search-bar {

src/types/models/Ctx.d.ts

@@ -45,9 +45,15 @@ type Profile = {
 type Notifications = {
     uid: string,
     created: string,
-    items: Record<string, Video[]>,
+    items: Record<string, NotificationItem[]>,
 };
 
+type NotificationItem = {
+    metaId: string,
+    videoId: string,
+    videoReleased: string,
+}
+
 type Ctx = {
     profile: Profile,
     notifications: Notifications,

src/types/models/MetaDetails.d.ts

@@ -14,6 +14,7 @@ type MetaDetails = {
         addon: Addon,
         content: Loadable<MetaItemMetaDetails>,
     } | null,
+    libraryItem: LibraryItem | null,
     selected: {
         metaPath: ResourceRequestPath,
         streamPath: ResourceRequestPath,