From 863f0c75b3907758ae5b7e11cf61a12c214ca52e Mon Sep 17 00:00:00 2001 From: Tim Date: Thu, 19 Oct 2023 15:51:16 +0200 Subject: [PATCH 1/4] refactor: update continue watching ui/ux --- .../ContinueWatchingItem.js | 72 ++++++++++ src/common/ContinueWatchingItem/index.js | 5 + src/common/LibItem/LibItem.js | 7 - src/common/MetaItem/MetaItem.js | 34 +++-- src/common/MetaItem/styles.less | 127 ++++++++++++++---- src/common/index.js | 2 + src/routes/Board/Board.js | 4 +- 7 files changed, 209 insertions(+), 42 deletions(-) create mode 100644 src/common/ContinueWatchingItem/ContinueWatchingItem.js create mode 100644 src/common/ContinueWatchingItem/index.js diff --git a/src/common/ContinueWatchingItem/ContinueWatchingItem.js b/src/common/ContinueWatchingItem/ContinueWatchingItem.js new file mode 100644 index 000000000..92e75b908 --- /dev/null +++ b/src/common/ContinueWatchingItem/ContinueWatchingItem.js @@ -0,0 +1,72 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +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 { 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 onPosterClick = React.useCallback((event) => { + event.preventDefault(); + if (deepLinks?.metaDetailsVideos) { + window.location = deepLinks?.metaDetailsVideos; + } + }, [deepLinks]); + + const onPlayClick = React.useCallback((event) => { + event.preventDefault(); + if (deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos) { + window.location = deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos; + } + }, [deepLinks]); + + const onDismissClick = React.useCallback((event) => { + event.preventDefault(); + if (typeof _id === 'string') { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'RewindLibraryItem', + args: _id + } + }); + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'DismissNotificationItem', + args: _id + } + }); + } + }, [_id]); + + return ( + + ); +}; + +ContinueWatchingItem.propTypes = { + _id: PropTypes.string, + deepLinks: PropTypes.shape({ + metaDetailsVideos: PropTypes.string, + metaDetailsStreams: PropTypes.string, + player: PropTypes.string + }), +}; + +module.exports = ContinueWatchingItem; diff --git a/src/common/ContinueWatchingItem/index.js b/src/common/ContinueWatchingItem/index.js new file mode 100644 index 000000000..5d3b2dd76 --- /dev/null +++ b/src/common/ContinueWatchingItem/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const ContineWatchingItem = require('./ContinueWatchingItem'); + +module.exports = ContineWatchingItem; diff --git a/src/common/LibItem/LibItem.js b/src/common/LibItem/LibItem.js index 431359071..a1c59200a 100644 --- a/src/common/LibItem/LibItem.js +++ b/src/common/LibItem/LibItem.js @@ -4,7 +4,6 @@ const React = require('react'); const { useServices } = require('stremio/services'); const PropTypes = require('prop-types'); const MetaItem = require('stremio/common/MetaItem'); -const useNotifications = require('stremio/common/useNotifications'); const { t } = require('i18next'); const OPTIONS = [ @@ -16,11 +15,6 @@ const OPTIONS = [ const LibItem = ({ _id, removable, ...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 options = React.useMemo(() => { return OPTIONS .filter(({ value }) => { @@ -104,7 +98,6 @@ const LibItem = ({ _id, removable, ...props }) => { return ( diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js index 4904afa6a..4c1322252 100644 --- a/src/common/MetaItem/MetaItem.js +++ b/src/common/MetaItem/MetaItem.js @@ -3,17 +3,18 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); +const { useTranslation } = require('react-i18next'); const filterInvalidDOMProps = require('filter-invalid-dom-props').default; const { default: Icon } = require('@stremio/stremio-icons/react'); const Button = require('stremio/common/Button'); const Image = require('stremio/common/Image'); const Multiselect = require('stremio/common/Multiselect'); -const PlayIconCircleCentered = require('stremio/common/PlayIconCircleCentered'); const useBinaryState = require('stremio/common/useBinaryState'); const { ICON_FOR_TYPE } = require('stremio/common/CONSTANTS'); const styles = require('./styles'); -const MetaItem = React.memo(({ className, type, name, poster, posterShape, playIcon, progress, newVideos, options, deepLinks, dataset, optionOnSelect, ...props }) => { +const MetaItem = React.memo(({ className, type, name, poster, posterShape, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPosterClick, onPlayClick, ...props }) => { + const { t } = useTranslation(); const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false); const href = React.useMemo(() => { return deepLinks ? @@ -65,7 +66,16 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI return (