diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index a61a82ee0..a30800835 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/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 }) => { : null diff --git a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less b/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less index 4c044ea15..42326acfc 100644 --- a/src/routes/MetaDetails/VideosList/SeasonsBar/styles.less +++ b/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 { diff --git a/src/routes/MetaDetails/VideosList/VideosList.js b/src/routes/MetaDetails/VideosList/VideosList.js index b1928eba8..e344c6480 100644 --- a/src/routes/MetaDetails/VideosList/VideosList.js +++ b/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 }) => { : + { + showNotificationsToggle && libraryItem ? + + {t('DETAIL_RECEIVE_NOTIF_SERIES')} + + : + null + } { seasons.length > 0 ? { 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; diff --git a/src/routes/MetaDetails/VideosList/styles.less b/src/routes/MetaDetails/VideosList/styles.less index 4a1cc37ef..103d8c139 100644 --- a/src/routes/MetaDetails/VideosList/styles.less +++ b/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 { diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts index d8a2828c7..fd3cb2766 100644 --- a/src/types/models/Ctx.d.ts +++ b/src/types/models/Ctx.d.ts @@ -45,9 +45,15 @@ type Profile = { type Notifications = { uid: string, created: string, - items: Record, + items: Record, }; +type NotificationItem = { + metaId: string, + videoId: string, + videoReleased: string, +} + type Ctx = { profile: Profile, notifications: Notifications, diff --git a/src/types/models/MetaDetails.d.ts b/src/types/models/MetaDetails.d.ts index 4b18a3612..efa7efc33 100644 --- a/src/types/models/MetaDetails.d.ts +++ b/src/types/models/MetaDetails.d.ts @@ -14,6 +14,7 @@ type MetaDetails = { addon: Addon, content: Loadable, } | null, + libraryItem: LibraryItem | null, selected: { metaPath: ResourceRequestPath, streamPath: ResourceRequestPath,