From ab83a15d1510d4ba1d9a3706a819b277fde58ce0 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Thu, 3 Oct 2019 14:31:34 +0300 Subject: [PATCH 01/32] user notifications WIP --- src/common/MainNavBar/MainNavBar.js | 1 + src/common/NavBar/NavBar.js | 10 +++++- .../NotificationsMenu/NotificationsMenu.js | 36 +++++++++++++++++++ src/common/NavBar/NotificationsMenu/index.js | 3 ++ .../NavBar/NotificationsMenu/styles.less | 21 +++++++++++ src/common/NavBar/styles.less | 2 +- src/routes/Settings/Settings.js | 1 + 7 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsMenu.js create mode 100644 src/common/NavBar/NotificationsMenu/index.js create mode 100644 src/common/NavBar/NotificationsMenu/styles.less diff --git a/src/common/MainNavBar/MainNavBar.js b/src/common/MainNavBar/MainNavBar.js index 88672b44c..9f2db6a02 100644 --- a/src/common/MainNavBar/MainNavBar.js +++ b/src/common/MainNavBar/MainNavBar.js @@ -17,6 +17,7 @@ const MainNavBar = ({ className }) => { searchBar={true} addonsButton={true} fullscreenButton={true} + notificationsMenu={true} navMenu={true} /> ); diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js index 1a75f843e..92663af21 100644 --- a/src/common/NavBar/NavBar.js +++ b/src/common/NavBar/NavBar.js @@ -5,10 +5,11 @@ const NavTabButton = require('./NavTabButton'); const SearchBar = require('./SearchBar'); const AddonsButton = require('./AddonsButton'); const FullscreenButton = require('./FullscreenButton'); +const NotificationsMenu = require('./NotificationsMenu'); const NavMenu = require('./NavMenu'); const styles = require('./styles'); -const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, navMenu }) => { +const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, notificationsMenu, navMenu }) => { const backButtonOnClick = React.useCallback(() => { window.history.back(); }, []); @@ -62,6 +63,12 @@ const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addo : null } + { + notificationsMenu ? + + : + null + } { navMenu ? @@ -87,6 +94,7 @@ NavBar.propTypes = { searchBar: PropTypes.bool, addonsButton: PropTypes.bool, fullscreenButton: PropTypes.bool, + notificationsMenu: PropTypes.bool, navMenu: PropTypes.bool }; diff --git a/src/common/NavBar/NotificationsMenu/NotificationsMenu.js b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js new file mode 100644 index 000000000..db0a52b45 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js @@ -0,0 +1,36 @@ +const React = require('react'); +const PropTypes = require('prop-types'); +const classnames = require('classnames'); +const Icon = require('stremio-icons/dom'); +const Button = require('stremio/common/Button'); +const Popup = require('stremio/common/Popup'); +const useBinaryState = require('stremio/common/useBinaryState'); +const styles = require('./styles'); + +const NotificationsMenu = ({ className, metaItems }) => { + const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false); + return ( + ( + + )} + renderMenu={() => ( +
+ )} + /> + ); +}; + +NotificationsMenu.propTypes = { + className: PropTypes.string, + metaItems: PropTypes.arrayOf(PropTypes.object).isRequired +}; +NotificationsMenu.defaultProps = { + metaItems: [] +}; + +module.exports = NotificationsMenu; diff --git a/src/common/NavBar/NotificationsMenu/index.js b/src/common/NavBar/NotificationsMenu/index.js new file mode 100644 index 000000000..a18e804c8 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/index.js @@ -0,0 +1,3 @@ +const NotificationsMenu = require('./NotificationsMenu'); + +module.exports = NotificationsMenu; diff --git a/src/common/NavBar/NotificationsMenu/styles.less b/src/common/NavBar/NotificationsMenu/styles.less new file mode 100644 index 000000000..de1c1ece9 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/styles.less @@ -0,0 +1,21 @@ +.notifications-menu-label-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + &:hover { + background-color: var(--color-secondary); + } + + &:global(.active) { + background-color: var(--color-background); + } + + .icon { + flex: none; + width: 50%; + height: 50%; + fill: var(--color-surfacelighter); + } +} diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less index 43a8d3d89..458b37a21 100644 --- a/src/common/NavBar/styles.less +++ b/src/common/NavBar/styles.less @@ -43,7 +43,7 @@ } } - .addons-button, .fullscreen-button, .nav-menu { + .addons-button, .fullscreen-button, .notifications-menu, .nav-menu { flex: none; width: var(--nav-bar-size); height: var(--nav-bar-size); diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 4884722dd..d7018c9d3 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -56,6 +56,7 @@ const Settings = () => { backButton={true} addonsButton={true} fullscreenButton={true} + notificationsMenu={true} navMenu={true} />
From 4f9f9fd928fbc96d96d333fcccd410bf8dfec33d Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Tue, 8 Oct 2019 17:35:05 +0300 Subject: [PATCH 02/32] Notification component implemented --- .../Notification/Notification.js | 96 ++++++++++++ .../NotificationsList/Notification/index.js | 3 + .../Notification/styles.less | 138 ++++++++++++++++++ 3 files changed, 237 insertions(+) create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/Notification/index.js create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js new file mode 100644 index 000000000..cd3f1cb1e --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js @@ -0,0 +1,96 @@ +const React = require('react'); +const PropTypes = require('prop-types'); +const classnames = require('classnames'); +const Icon = require('stremio-icons/dom'); +const Button = require('stremio/common/Button'); +const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered'); +const styles = require('./styles'); + +const ICON_FOR_TYPE = Object.assign(Object.create(null), { + 'movie': 'ic_movies', + 'series': 'ic_series', + 'channel': 'ic_channels', + 'tv': 'ic_tv', + 'other': 'ic_movies' +}); + +const Notification = ({ className, id, type, name, logo, poster, season, episode, released, posterThumbnail, onClick }) => { + const [aLogo, setALogo] = React.useState(logo); + + return ( + + ); +} + +Notification.propTypes = { + className: PropTypes.string, + id: PropTypes.string, + type: PropTypes.string, + name: PropTypes.string, + logo: PropTypes.string, + poster: PropTypes.string, + season: PropTypes.number, + episode: PropTypes.number, + released: PropTypes.instanceOf(Date), + posterThumbnail: PropTypes.bool, + onClick: PropTypes.func +}; + +module.exports = Notification; diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/index.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/index.js new file mode 100644 index 000000000..bf7c2ebf9 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/index.js @@ -0,0 +1,3 @@ +const Notification = require('./Notification'); + +module.exports = Notification; diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less new file mode 100644 index 000000000..7aea06890 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less @@ -0,0 +1,138 @@ +:import('~stremio/common/PlayIconCircleCentered/styles.less') { + play-icon-circle-centered-background: background; + play-icon-circle-centered-icon: icon; +} + +.notification-container { + display: flex; + flex-direction: row; + padding: 1rem; + border-bottom: thin solid var(--color-surfacelight); + background-color: var(--color-surfacelighter); + + &:hover, &:focus { + background-color: var(--color-surfacelight); + + .poster-image-container { + .play-icon-layer { + display: block; + } + } + } + + .logo-image-container, .poster-image-container { + position: relative; + z-index: 0; + height: 3.5rem; + background-color: var(--color-backgroundlight); + + .placeholder-icon-layer { + position: absolute; + top: 25%; + right: 10%; + bottom: 25%; + left: 10%; + z-index: 0; + + .placeholder-icon { + display: block; + width: 100%; + height: 100%; + fill: var(--color-surfacelight20); + } + } + + .logo-image-layer, .poster-image-layer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + + .logo-image, .poster-image { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + } + + } + + .logo-image-container { + width: 3.5rem; + border-radius: 50%; + } + + .info-container { + flex: 1; + align-self: stretch; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + padding: 0 1rem; + + &:first-child { + align-content: center; + } + + .episode-container { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 100%; + white-space: nowrap; + text-overflow: ellipsis; + } + + .name-container { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 100%; + max-height: 4.7em; + } + + .released-container { + flex-grow: 0; + flex-shrink: 0; + flex-basis: 100%; + margin-top: 0.5rem; + font-size: 0.9rem; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--color-surfacedark); + } + } + + .poster-image-container { + width: 6rem; + + .play-icon-layer { + position: absolute; + top: 20%; + right: 0; + bottom: 20%; + left: 0; + z-index: 2; + display: none; + overflow: visible; + + .play-icon { + display: block; + width: 100%; + height: 100%; + filter: drop-shadow(0 0 0.5rem var(--color-backgroundlight)); + + .play-icon-circle-centered-background { + fill: var(--color-surfacelighter); + } + + .play-icon-circle-centered-icon { + fill: var(--color-primary); + } + } + } + } +} \ No newline at end of file From 481264cb876bfa803e772de20fcba752e3d1a728 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 9 Oct 2019 16:21:26 +0300 Subject: [PATCH 03/32] NotificationsList implemented --- .../NotificationsList/NotificationsList.js | 52 +++++++++++++++++++ .../NotificationsList/index.js | 3 ++ .../NotificationsList/styles.less | 10 ++++ 3 files changed, 65 insertions(+) create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/index.js create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/styles.less diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js new file mode 100644 index 000000000..7b2c933f0 --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js @@ -0,0 +1,52 @@ +const React = require('react'); +const PropTypes = require('prop-types'); +const classnames = require('classnames'); +const Notification = require('./Notification'); +const useMetaItems = require('./useMetaItems'); +const styles = require('./styles'); + +const NotificationsList = ({ className, metaItems }) => { + const notifications = useMetaItems(metaItems); + return ( +
+ { + notifications.length > 0 ? + notifications.map((notification) => ( + notification.videos.length === 1 ? + + : + + )) + : + +
+ No new notifications. +
+ + } +
+ ); +} + +NotificationsList.propTypes = { + className: PropTypes.string, + metaItems: PropTypes.object +}; + +module.exports = NotificationsList; diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/index.js b/src/common/NavBar/NotificationsMenu/NotificationsList/index.js new file mode 100644 index 000000000..730a78fdc --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/index.js @@ -0,0 +1,3 @@ +const NotificationsList = require('./NotificationsList'); + +module.exports = NotificationsList; diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less new file mode 100644 index 000000000..60446b07a --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less @@ -0,0 +1,10 @@ +.notifications-list-scroll-container { + flex: 1; + align-self: stretch; + height: 30rem; + overflow-y: auto; + + .notification { + width: var(--item-size); + } +} \ No newline at end of file From e42f438b739bbc0364b236d6ff899fc897b56708 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 9 Oct 2019 16:29:07 +0300 Subject: [PATCH 04/32] demo items for notifications implemented --- .../NotificationsList/useMetaItems.js | 174 ++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 src/common/NavBar/NotificationsMenu/NotificationsList/useMetaItems.js diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/useMetaItems.js b/src/common/NavBar/NotificationsMenu/NotificationsList/useMetaItems.js new file mode 100644 index 000000000..c39df363e --- /dev/null +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/useMetaItems.js @@ -0,0 +1,174 @@ +const React = require('react'); + +const useMetaItems = (metaItems) => { + const metaItemsNotifications = React.useMemo(() => { + return metaItems !== null ? + [ + { + id: '1', + type: 'channel', + name: 'Linus Tech Tips', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Linus Tech Tips', + released: new Date(2019, 9, 1), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 1, + episode: 1 + }, + { + id: '2', + name: 'Linus Tech Tips', + released: new Date(2019, 9, 2), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 1, + episode: 2 + }, + { + id: '3', + name: 'Linus Tech Tips', + released: new Date(2019, 9, 3), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 1, + episode: 3 + } + ] + }, + { + id: '2', + type: 'series', + name: 'Family Guy', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Island Adventure', + released: new Date(2019, 9, 2), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 17, + episode: 17 + } + ] + }, + { + id: '3', + type: 'series', + name: 'The Walking Dead', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Evolution', + released: new Date(2019, 8, 12), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 9, + episode: 8 + } + ] + }, + { + id: '4', + type: 'series', + name: 'Family Guy', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Island Adventure', + released: new Date(2019, 9, 2), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 17, + episode: 17 + } + ] + }, + { + id: '5', + type: 'series', + name: 'The Walking Dead', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Evolution', + released: new Date(2019, 8, 12), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 9, + episode: 8 + } + ] + }, + { + id: '6', + type: 'series', + name: 'Family Guy', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Island Adventure', + released: new Date(2019, 9, 2), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 17, + episode: 17 + } + ] + }, + { + id: '7', + type: 'series', + name: 'The Walking Dead', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Evolution', + released: new Date(2019, 8, 12), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 9, + episode: 8 + } + ] + }, + { + id: '8', + type: 'series', + name: 'Family Guy', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Island Adventure', + released: new Date(2019, 9, 2), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 17, + episode: 17 + } + ] + }, + { + id: '9', + type: 'series', + name: 'The Walking Dead', + logo: 'https://www.stremio.com/website/home-stremio.png', + videos: [ + { + id: '1', + name: 'Evolution', + released: new Date(2019, 8, 12), + poster: 'https://www.stremio.com/website/home-testimonials.jpg', + season: 9, + episode: 8 + } + ] + }, + ] + : + []; + }, [metaItems]); + return metaItemsNotifications; +}; + +module.exports = useMetaItems; From aa31884294addc1c0eb0651e39b35f49be71df76 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 9 Oct 2019 17:46:11 +0300 Subject: [PATCH 05/32] notifications list height removed --- .../NavBar/NotificationsMenu/NotificationsList/styles.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less index 60446b07a..8a176666f 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/styles.less @@ -1,7 +1,6 @@ .notifications-list-scroll-container { flex: 1; align-self: stretch; - height: 30rem; overflow-y: auto; .notification { From 306a7534e56487eb5ef66836e8b23ac5450cfbc4 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Thu, 10 Oct 2019 19:10:47 +0300 Subject: [PATCH 06/32] NotificationsMenu uses NotificationList --- .../NotificationsMenu/NotificationsMenu.js | 24 ++++++-- .../NavBar/NotificationsMenu/styles.less | 56 +++++++++++++++++++ 2 files changed, 74 insertions(+), 6 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsMenu.js b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js index db0a52b45..db2ccb093 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsMenu.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js @@ -4,10 +4,11 @@ const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); const Button = require('stremio/common/Button'); const Popup = require('stremio/common/Popup'); +const NotificationsList = require('./NotificationsList'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const NotificationsMenu = ({ className, metaItems }) => { +const NotificationsMenu = ({ className, onClearButtonClicked, onSettingsButtonClicked }) => { const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false); return ( { )} renderMenu={() => ( -
+
+
+
Notifications
+
+ + +
+
+ +
)} /> ); @@ -27,10 +41,8 @@ const NotificationsMenu = ({ className, metaItems }) => { NotificationsMenu.propTypes = { className: PropTypes.string, - metaItems: PropTypes.arrayOf(PropTypes.object).isRequired -}; -NotificationsMenu.defaultProps = { - metaItems: [] + onClearButtonClicked: PropTypes.func, + onSettingsButtonClicked: PropTypes.func }; module.exports = NotificationsMenu; diff --git a/src/common/NavBar/NotificationsMenu/styles.less b/src/common/NavBar/NotificationsMenu/styles.less index de1c1ece9..6b26d6f14 100644 --- a/src/common/NavBar/NotificationsMenu/styles.less +++ b/src/common/NavBar/NotificationsMenu/styles.less @@ -19,3 +19,59 @@ fill: var(--color-surfacelighter); } } + +.notifications-menu-container { + display: flex; + flex-direction: column; + + .notifications-bar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 0.5rem; + border-bottom: thin solid var(--color-surfacelight); + + background-color: var(--color-surfacelighter); + + .notifications-label { + padding-left: 0.5rem; + color: var(--color-surfacedark); + } + + .buttons-container { + display: flex; + flex-direction: row; + + .button-container { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + + &:hover, &:focus { + background-color: var(--color-surfacelight); + } + + .icon { + width: 1.2rem; + fill: var(--color-surfacedark); + } + + &:not(:last-child) { + margin-right: 0.5rem; + } + } + } + } + + .notifications-list { + --item-size: 28rem; + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; + height: 30rem; + align-self: stretch; + } +} From 24424ad7e004c18caa6cf371bfe64000a268890f Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Fri, 11 Oct 2019 17:46:08 +0300 Subject: [PATCH 07/32] Notification added to storybook --- .../MultipleVideosNotification.js | 18 ++++++++++++++++ .../Notification/SingleVideoNotification.js | 21 +++++++++++++++++++ storybook/stories/Notification/index.js | 2 ++ storybook/stories/Notification/styles.less | 3 +++ storybook/stories/index.js | 1 + 5 files changed, 45 insertions(+) create mode 100644 storybook/stories/Notification/MultipleVideosNotification.js create mode 100644 storybook/stories/Notification/SingleVideoNotification.js create mode 100644 storybook/stories/Notification/index.js create mode 100644 storybook/stories/Notification/styles.less diff --git a/storybook/stories/Notification/MultipleVideosNotification.js b/storybook/stories/Notification/MultipleVideosNotification.js new file mode 100644 index 000000000..315200ced --- /dev/null +++ b/storybook/stories/Notification/MultipleVideosNotification.js @@ -0,0 +1,18 @@ +const React = require('react'); +const { storiesOf } = require('@storybook/react'); +const { action } = require('@storybook/addon-actions'); +const Notification = require('stremio/common/NavBar/NotificationsMenu/NotificationsList/Notification'); +const styles = require('./styles'); + +storiesOf('Notification', module).add('MultipleVideos', () => ( + +)); diff --git a/storybook/stories/Notification/SingleVideoNotification.js b/storybook/stories/Notification/SingleVideoNotification.js new file mode 100644 index 000000000..8badd7bc6 --- /dev/null +++ b/storybook/stories/Notification/SingleVideoNotification.js @@ -0,0 +1,21 @@ +const React = require('react'); +const { storiesOf } = require('@storybook/react'); +const { action } = require('@storybook/addon-actions'); +const Notification = require('stremio/common/NavBar/NotificationsMenu/NotificationsList/Notification'); +const styles = require('./styles'); + +storiesOf('Notification', module).add('SingleVideo', () => ( + +)); diff --git a/storybook/stories/Notification/index.js b/storybook/stories/Notification/index.js new file mode 100644 index 000000000..179433820 --- /dev/null +++ b/storybook/stories/Notification/index.js @@ -0,0 +1,2 @@ +require('./SingleVideoNotification'); +require('./MultipleVideosNotification'); diff --git a/storybook/stories/Notification/styles.less b/storybook/stories/Notification/styles.less new file mode 100644 index 000000000..b2af526a0 --- /dev/null +++ b/storybook/stories/Notification/styles.less @@ -0,0 +1,3 @@ +.single-video-notification-container, .multiple-videos-notification-container { + width: 28rem; +} \ No newline at end of file diff --git a/storybook/stories/index.js b/storybook/stories/index.js index 47a0282dd..97f1030cf 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -2,3 +2,4 @@ require('./Addon'); require('./MetaItem'); require('./ColorPicker'); require('./SharePrompt'); +require('./Notification'); From 3973271d95019b4341bf1d7bdd333fd2275d11e4 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Fri, 11 Oct 2019 18:11:48 +0300 Subject: [PATCH 08/32] handle the case for today notification --- .../NotificationsList/Notification/Notification.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js index cd3f1cb1e..2f442f088 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js @@ -16,6 +16,7 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), { const Notification = ({ className, id, type, name, logo, poster, season, episode, released, posterThumbnail, onClick }) => { const [aLogo, setALogo] = React.useState(logo); + const daysAgo = Math.floor(Math.abs((Date.now() - released) / (24 * 60 * 60 * 1000))); return ( )} renderMenu={() => ( From d0c3e6a0b8dfa42399369779ec9156d100bad1a0 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 13:28:39 +0300 Subject: [PATCH 21/32] notification name height changed --- .../NotificationsList/Notification/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less index 5917669cb..30f3f6232 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/styles.less @@ -89,7 +89,7 @@ flex-grow: 0; flex-shrink: 0; flex-basis: 100%; - max-height: 4.7em; + max-height: 3.6em; } .released-container { From ca5cfc3d6f934eed800520fb5d6e8ced763f27ce Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 14:34:15 +0300 Subject: [PATCH 22/32] Image component used in Notification --- .../Notification/Notification.js | 47 +++++++++---------- .../Notification/styles.less | 43 ++++++++--------- 2 files changed, 42 insertions(+), 48 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js index 8077d986b..eb269ea7e 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js @@ -3,6 +3,7 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); const Button = require('stremio/common/Button'); +const Image = require('stremio/common/Image'); const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered'); const styles = require('./styles'); @@ -15,25 +16,24 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), { }); const Notification = ({ className, id, type, name, poster, thumbnail, season, episode, released, posterThumbnail, onClick }) => { - const [aLogo, setALogo] = React.useState(poster); const daysAgo = Math.floor(Math.abs((Date.now() - released) / (24 * 60 * 60 * 1000))); return ( - -
+
diff --git a/src/common/NavBar/NotificationsMenu/styles.less b/src/common/NavBar/NotificationsMenu/styles.less index 6b26d6f14..f2f1ec7ba 100644 --- a/src/common/NavBar/NotificationsMenu/styles.less +++ b/src/common/NavBar/NotificationsMenu/styles.less @@ -39,29 +39,20 @@ color: var(--color-surfacedark); } - .buttons-container { + .button-container { + width: 2rem; + height: 2rem; display: flex; - flex-direction: row; + align-items: center; + justify-content: center; - .button-container { - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; + &:hover, &:focus { + background-color: var(--color-surfacelight); + } - &:hover, &:focus { - background-color: var(--color-surfacelight); - } - - .icon { - width: 1.2rem; - fill: var(--color-surfacedark); - } - - &:not(:last-child) { - margin-right: 0.5rem; - } + .icon { + width: 1.2rem; + fill: var(--color-surfacedark); } } } From 5b40ef9d94ff671161e76144f1d651ccd1cb5941 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 16:16:59 +0300 Subject: [PATCH 26/32] videoThumbnail prop removed --- .../NotificationsList/Notification/Notification.js | 5 ++--- .../NotificationsMenu/NotificationsList/NotificationsList.js | 3 +-- storybook/stories/Notification/MultipleVideosNotification.js | 2 +- storybook/stories/Notification/SingleVideoNotification.js | 1 - 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js index da457f2e9..cf0754440 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js @@ -15,7 +15,7 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), { 'other': 'ic_movies' }); -const Notification = ({ className, id, type, name, poster, thumbnail, season, episode, released, videoThumbnail, onClick }) => { +const Notification = ({ className, id, type, name, poster, thumbnail, season, episode, released, onClick }) => { const daysAgo = React.useMemo(() => { return Math.floor(Math.abs((Date.now() - released) / (24 * 60 * 60 * 1000))); }, [released]); @@ -54,7 +54,7 @@ const Notification = ({ className, id, type, name, poster, thumbnail, season, ep } { - videoThumbnail ? + thumbnail !== null ?
{ {...notification} key={`${index}${req.base}${content.type}${notification.id}`} className={styles['notification']} - videoThumbnail={true} thumbnail={notification.videos[0].thumbnail} season={notification.videos[0].season} episode={notification.videos[0].episode} @@ -41,8 +40,8 @@ const NotificationsList = ({ className, metaItems }) => { {...notification} key={`${index}${req.base}${content.type}${notification.id}`} className={styles['notification']} - videoThumbnail={false} name={notification.videos.length + ' new videos for ' + notification.name} + thumbnail={null} released={notification.videos[notification.videos.length - 1].released} /> ); diff --git a/storybook/stories/Notification/MultipleVideosNotification.js b/storybook/stories/Notification/MultipleVideosNotification.js index 87d84d1e3..4521f0070 100644 --- a/storybook/stories/Notification/MultipleVideosNotification.js +++ b/storybook/stories/Notification/MultipleVideosNotification.js @@ -11,8 +11,8 @@ storiesOf('Notification', module).add('MultipleVideos', () => ( type={'series'} name={'Demo name'} poster={'/images/intro_background.jpg'} + thumbnail={null} released={new Date()} - videoThumbnail={false} onClick={action('Demo item clicked')} /> )); diff --git a/storybook/stories/Notification/SingleVideoNotification.js b/storybook/stories/Notification/SingleVideoNotification.js index 71c2671ef..0258ec5d0 100644 --- a/storybook/stories/Notification/SingleVideoNotification.js +++ b/storybook/stories/Notification/SingleVideoNotification.js @@ -15,7 +15,6 @@ storiesOf('Notification', module).add('SingleVideo', () => ( season={1} episode={1} released={new Date()} - videoThumbnail={true} onClick={action('Demo item clicked')} /> )); From 04828f007af9fd5af322f727f03136119e00eb2a Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 16:25:12 +0300 Subject: [PATCH 27/32] check daysAgo value --- .../NotificationsList/Notification/Notification.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js index cf0754440..f2b4aa123 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js @@ -17,7 +17,9 @@ const ICON_FOR_TYPE = Object.assign(Object.create(null), { const Notification = ({ className, id, type, name, poster, thumbnail, season, episode, released, onClick }) => { const daysAgo = React.useMemo(() => { - return Math.floor(Math.abs((Date.now() - released) / (24 * 60 * 60 * 1000))); + if (released instanceof Date) { + return Math.floor(Math.abs((Date.now() - released) / (24 * 60 * 60 * 1000))); + } }, [released]); return (
{ - released instanceof Date && !isNaN(released.getTime()) ? + daysAgo !== null && !isNaN(daysAgo) ?
{daysAgo === 0 ? 'today' : daysAgo + ' days ago'}
From afab43bf45a67765b46ae2412111651ca7d35c03 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 16:52:34 +0300 Subject: [PATCH 28/32] NotificationsList refactored --- .../NotificationsList/NotificationsList.js | 31 +++++++------------ 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js index 1f70672ca..f9c722b0b 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js @@ -18,6 +18,7 @@ const NotificationsList = ({ className, metaItems }) => { content.content.map((notification) => { //notifications videos are not available in useCatalogs, but in useNotifications hook notification.videos = notification.videos || [{ + title: 'Demo title', thumbnail: 'https://www.stremio.com/website/home-testimonials.jpg', season: 1, episode: 1, @@ -25,25 +26,17 @@ const NotificationsList = ({ className, metaItems }) => { }]; return ( - notification.videos.length === 1 ? - - : - + ); }) : From f48cabbbc282ef37262900a700f8c499aff5a249 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 16:58:10 +0300 Subject: [PATCH 29/32] check thumbnail value --- .../NotificationsList/Notification/Notification.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js index f2b4aa123..53c7b0e81 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/Notification/Notification.js @@ -56,7 +56,7 @@ const Notification = ({ className, id, type, name, poster, thumbnail, season, ep }
{ - thumbnail !== null ? + typeof thumbnail === 'string' && thumbnail.length > 0 ?
Date: Wed, 16 Oct 2019 16:59:18 +0300 Subject: [PATCH 30/32] unnecessary React.Fragment removed --- .../NotificationsList/NotificationsList.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js index f9c722b0b..e54bacb68 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsList/NotificationsList.js @@ -40,12 +40,10 @@ const NotificationsList = ({ className, metaItems }) => { ); }) : - -
- -
No new notifications
-
- +
+ +
No new notifications
+
); case 'Loading': return ( From 2cc1cb1e562213eba06ebea02ada066cf71e6b88 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Wed, 16 Oct 2019 17:08:21 +0300 Subject: [PATCH 31/32] notifications menu container styles moved --- .../NavBar/NotificationsMenu/styles.less | 80 +++++++++---------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/styles.less b/src/common/NavBar/NotificationsMenu/styles.less index f2f1ec7ba..e1179e5a7 100644 --- a/src/common/NavBar/NotificationsMenu/styles.less +++ b/src/common/NavBar/NotificationsMenu/styles.less @@ -18,51 +18,51 @@ height: 50%; fill: var(--color-surfacelighter); } -} -.notifications-menu-container { - display: flex; - flex-direction: column; - - .notifications-bar { + .notifications-menu-container { display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 0.5rem; - border-bottom: thin solid var(--color-surfacelight); - - background-color: var(--color-surfacelighter); - - .notifications-label { - padding-left: 0.5rem; - color: var(--color-surfacedark); - } - - .button-container { - width: 2rem; - height: 2rem; + flex-direction: column; + + .notifications-bar { display: flex; + flex-direction: row; align-items: center; - justify-content: center; - - &:hover, &:focus { - background-color: var(--color-surfacelight); + justify-content: space-between; + padding: 0.5rem; + border-bottom: thin solid var(--color-surfacelight); + + background-color: var(--color-surfacelighter); + + .notifications-label { + padding-left: 0.5rem; + color: var(--color-surfacedark); } - - .icon { - width: 1.2rem; - fill: var(--color-surfacedark); + + .button-container { + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + + &:hover, &:focus { + background-color: var(--color-surfacelight); + } + + .icon { + width: 1.2rem; + fill: var(--color-surfacedark); + } } } + + .notifications-list { + --item-size: 28rem; + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; + height: 30rem; + align-self: stretch; + } } - - .notifications-list { - --item-size: 28rem; - flex-grow: 0; - flex-shrink: 0; - flex-basis: auto; - height: 30rem; - align-self: stretch; - } -} +} \ No newline at end of file From 1a2afc49b2731f9cdd95bdbbfa71b04cc2022239 Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Thu, 17 Oct 2019 09:30:25 +0300 Subject: [PATCH 32/32] settings function prop removed --- src/common/NavBar/NotificationsMenu/NotificationsMenu.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/common/NavBar/NotificationsMenu/NotificationsMenu.js b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js index 1fd6cde34..14ea95b43 100644 --- a/src/common/NavBar/NotificationsMenu/NotificationsMenu.js +++ b/src/common/NavBar/NotificationsMenu/NotificationsMenu.js @@ -10,7 +10,7 @@ const useCatalogs = require('stremio/routes/Board/useCatalogs'); const useBinaryState = require('stremio/common/useBinaryState'); const styles = require('./styles'); -const NotificationsMenu = ({ className, onClearButtonClicked, onSettingsButtonClicked }) => { +const NotificationsMenu = ({ className, onClearButtonClicked }) => { const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false); //TODO use useNotifications hook instead of useCatalogs const metaItems = useCatalogs(); @@ -42,8 +42,7 @@ const NotificationsMenu = ({ className, onClearButtonClicked, onSettingsButtonCl NotificationsMenu.propTypes = { className: PropTypes.string, - onClearButtonClicked: PropTypes.func, - onSettingsButtonClicked: PropTypes.func + onClearButtonClicked: PropTypes.func }; module.exports = NotificationsMenu;