From 6833bb719d3e894e6c511bec96a309cfd2f364c9 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Fri, 31 Oct 2025 19:52:30 -0300 Subject: [PATCH 01/14] feat: watched on discover & details --- src/components/DiscItem/DiscItem.js | 74 +++++++++++++++++++++++ src/components/DiscItem/index.js | 5 ++ src/components/MetaPreview/MetaPreview.js | 17 +++++- src/components/index.ts | 2 + src/routes/Discover/Discover.js | 46 +++++++++----- src/routes/MetaDetails/MetaDetails.js | 28 +++++++++ 6 files changed, 156 insertions(+), 16 deletions(-) create mode 100644 src/components/DiscItem/DiscItem.js create mode 100644 src/components/DiscItem/index.js diff --git a/src/components/DiscItem/DiscItem.js b/src/components/DiscItem/DiscItem.js new file mode 100644 index 0000000000..45f6499a61 --- /dev/null +++ b/src/components/DiscItem/DiscItem.js @@ -0,0 +1,74 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const React = require('react'); +const { useServices } = require('stremio/services'); +const PropTypes = require('prop-types'); +const classnames = require('classnames'); +const MetaItem = require('stremio/components/MetaItem'); +const { t } = require('i18next'); + +const DiscItem = ({ id, watched, selected, toggleWatched, ...props }) => { + + const { core } = useServices(); + + const options = React.useMemo(() => { + return [ + { label: watched ? 'CTX_MARK_UNWATCHED' : 'CTX_MARK_WATCHED', value: 'watched' }, + ].filter(({ value }) => { + switch (value) { + case 'watched': + return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string'); + } + }).map((option) => ({ + ...option, + label: t(option.label) + })); + }, [id, props.deepLinks, watched]); + + const optionOnSelect = React.useCallback((event) => { + if (typeof props.optionOnSelect === 'function') { + props.optionOnSelect(event); + } + + if (!event.nativeEvent.optionSelectPrevented) { + switch (event.value) { + case 'watched': { + if (typeof id === 'string') { + if (typeof toggleWatched === 'function') { + toggleWatched(); + } + } + + break; + } + } + } + }, [id, props.deepLinks, props.optionOnSelect]); + + return ( + + ); +}; + +DiscItem.propTypes = { + id: PropTypes.string, + removable: PropTypes.bool, + watched: PropTypes.bool, + selected: PropTypes.bool, + deepLinks: PropTypes.shape({ + metaDetailsVideos: PropTypes.string, + metaDetailsStreams: PropTypes.string, + player: PropTypes.string + }), + toggleWatched: PropTypes.func, + optionOnSelect: PropTypes.func +}; + +module.exports = DiscItem; diff --git a/src/components/DiscItem/index.js b/src/components/DiscItem/index.js new file mode 100644 index 0000000000..f0fe335c2a --- /dev/null +++ b/src/components/DiscItem/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const DiscItem = require('./DiscItem'); + +module.exports = DiscItem; diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index 13717919a4..e4ec82ded3 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -25,7 +25,7 @@ const ALLOWED_LINK_REDIRECTS = [ routesRegexp.metadetails.regexp ]; -const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, ratingInfo }, ref) => { +const MetaPreview = React.forwardRef(({ className, compact, name, logo, background, runtime, releaseInfo, released, description, deepLinks, links, trailerStreams, inLibrary, toggleInLibrary, watched, toggleWatched, ratingInfo }, ref) => { const { t } = useTranslation(); const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false); const linksGroups = React.useMemo(() => { @@ -221,6 +221,19 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou : null } + { + typeof toggleWatched === 'function' ? + + : + null + } { typeof showHref === 'string' && compact ? { } }); }, [selectedMetaItem]); + const toggleWatched = React.useCallback(() => { + if (selectedMetaItem === null) { + return; + } + + if (!selectedMetaItem.inLibrary) { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'AddToLibrary', + args: selectedMetaItem + } + }); + } + + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'LibraryItemMarkAsWatched', + args: { + id: selectedMetaItem.id, + is_watched: !selectedMetaItem.watched + } + } + }); + }, [selectedMetaItem]); const metaItemsOnFocusCapture = React.useCallback((event) => { if (event.target.dataset.index !== null && !isNaN(event.target.dataset.index)) { setSelectedMetaItemIndex(parseInt(event.target.dataset.index, 10)); @@ -157,20 +183,8 @@ const Discover = ({ urlParams, queryParams }) => { :
- {discover.catalog.content.content.map((metaItem, index) => ( - + {discover.catalog.content.content.map((discItem, index) => ( + ))}
} @@ -193,6 +207,8 @@ const Discover = ({ urlParams, queryParams }) => { trailerStreams={selectedMetaItem.trailerStreams} inLibrary={selectedMetaItem.inLibrary} toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary} + watched={selectedMetaItem.watched} + toggleWatched={toggleWatched} metaId={selectedMetaItem.id} like={selectedMetaItem.like} /> diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index fd27478b5c..478e59beeb 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -64,6 +64,32 @@ const MetaDetails = ({ urlParams, queryParams }) => { } }); }, [metaDetails]); + const toggleWatched = React.useCallback(() => { + if (metaDetails.metaItem.content.content === null || metaDetails.metaItem.content.type !== 'Ready') { + return; + } + + if (!metaDetails.metaItem.content.content.inLibrary) { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'AddToLibrary', + args: metaDetails.metaItem.content.content + } + }); + } + + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'LibraryItemMarkAsWatched', + args: { + id: metaDetails.metaItem.content.content.id, + is_watched: !metaDetails.metaItem.content.content.watched + } + } + }); + }, [metaDetails]); const toggleNotifications = React.useCallback(() => { if (metaDetails.libraryItem) { core.transport.dispatch({ @@ -168,6 +194,8 @@ const MetaDetails = ({ urlParams, queryParams }) => { trailerStreams={metaDetails.metaItem.content.content.trailerStreams} inLibrary={metaDetails.metaItem.content.content.inLibrary} toggleInLibrary={metaDetails.metaItem.content.content.inLibrary ? removeFromLibrary : addToLibrary} + watched={metaDetails.metaItem.content.content.watched} + toggleWatched={toggleWatched} metaId={metaDetails.metaItem.content.content.id} ratingInfo={metaDetails.ratingInfo} /> From 852f478f1ee400436967090b01205fbe8747f850 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Tue, 4 Nov 2025 17:52:09 -0300 Subject: [PATCH 02/14] feat: change trailer order & fix discover mark as watched --- src/components/DiscItem/DiscItem.js | 5 +---- src/components/MetaPreview/MetaPreview.js | 20 ++++++++++---------- src/routes/Discover/Discover.js | 18 +++++++++--------- 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/src/components/DiscItem/DiscItem.js b/src/components/DiscItem/DiscItem.js index 45f6499a61..cc1cf53159 100644 --- a/src/components/DiscItem/DiscItem.js +++ b/src/components/DiscItem/DiscItem.js @@ -1,15 +1,12 @@ // Copyright (C) 2017-2023 Smart code 203358507 const React = require('react'); -const { useServices } = require('stremio/services'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const MetaItem = require('stremio/components/MetaItem'); const { t } = require('i18next'); -const DiscItem = ({ id, watched, selected, toggleWatched, ...props }) => { - - const { core } = useServices(); +const DiscItem = ({ id, watched, selected, toggleWatched, select, ...props }) => { const options = React.useMemo(() => { return [ diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index e4ec82ded3..829903cfa5 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -196,27 +196,27 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
{ - typeof toggleInLibrary === 'function' ? + typeof trailerHref === 'string' ? : null } { - typeof trailerHref === 'string' ? + typeof toggleInLibrary === 'function' ? : null diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index a462a5af97..29dc2cfe1a 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -74,17 +74,17 @@ const Discover = ({ urlParams, queryParams }) => { } }); }, [selectedMetaItem]); - const toggleWatched = React.useCallback(() => { - if (selectedMetaItem === null) { + const toggleWatched = React.useCallback((item) => { + if (item === null) { return; } - if (!selectedMetaItem.inLibrary) { + if (!item.inLibrary) { core.transport.dispatch({ action: 'Ctx', args: { action: 'AddToLibrary', - args: selectedMetaItem + args: item } }); } @@ -94,12 +94,12 @@ const Discover = ({ urlParams, queryParams }) => { args: { action: 'LibraryItemMarkAsWatched', args: { - id: selectedMetaItem.id, - is_watched: !selectedMetaItem.watched + id: item.id, + is_watched: !item.watched } } }); - }, [selectedMetaItem]); + }, []); const metaItemsOnFocusCapture = React.useCallback((event) => { if (event.target.dataset.index !== null && !isNaN(event.target.dataset.index)) { setSelectedMetaItemIndex(parseInt(event.target.dataset.index, 10)); @@ -184,7 +184,7 @@ const Discover = ({ urlParams, queryParams }) => { :
{discover.catalog.content.content.map((discItem, index) => ( - + toggleWatched(discItem)} selected={selectedMetaItemIndex === index} key={index} data-index={index} onClick={metaItemOnClick} /> ))}
} @@ -208,7 +208,7 @@ const Discover = ({ urlParams, queryParams }) => { inLibrary={selectedMetaItem.inLibrary} toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary} watched={selectedMetaItem.watched} - toggleWatched={toggleWatched} + toggleWatched={() => toggleWatched(selectedMetaItem)} metaId={selectedMetaItem.id} like={selectedMetaItem.like} /> From 3b2d1f365c89bb146f6c9c852a4e6750a6cbdf49 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Tue, 4 Nov 2025 19:23:39 -0300 Subject: [PATCH 03/14] feat: icons group component --- src/components/DiscItem/DiscItem.js | 2 +- .../IconsGroup.less} | 6 ++- src/components/IconsGroup/IconsGroup.tsx | 36 ++++++++++++++ src/components/IconsGroup/index.ts | 6 +++ src/components/MetaPreview/MetaPreview.js | 48 +++++++------------ .../MetaPreview/Ratings/Ratings.tsx | 27 ++++++----- src/components/MetaPreview/styles.less | 5 -- 7 files changed, 78 insertions(+), 52 deletions(-) rename src/components/{MetaPreview/Ratings/Ratings.less => IconsGroup/IconsGroup.less} (92%) create mode 100644 src/components/IconsGroup/IconsGroup.tsx create mode 100644 src/components/IconsGroup/index.ts diff --git a/src/components/DiscItem/DiscItem.js b/src/components/DiscItem/DiscItem.js index cc1cf53159..d09e353802 100644 --- a/src/components/DiscItem/DiscItem.js +++ b/src/components/DiscItem/DiscItem.js @@ -6,7 +6,7 @@ const classnames = require('classnames'); const MetaItem = require('stremio/components/MetaItem'); const { t } = require('i18next'); -const DiscItem = ({ id, watched, selected, toggleWatched, select, ...props }) => { +const DiscItem = ({ id, watched, selected, toggleWatched, ...props }) => { const options = React.useMemo(() => { return [ diff --git a/src/components/MetaPreview/Ratings/Ratings.less b/src/components/IconsGroup/IconsGroup.less similarity index 92% rename from src/components/MetaPreview/Ratings/Ratings.less rename to src/components/IconsGroup/IconsGroup.less index afe7b36378..8e09c9f937 100644 --- a/src/components/MetaPreview/Ratings/Ratings.less +++ b/src/components/IconsGroup/IconsGroup.less @@ -8,7 +8,7 @@ @width-mobile: 3rem; -.ratings-container { +.group-container { display: flex; flex-direction: row; align-items: center; @@ -17,6 +17,8 @@ border-radius: 2rem; height: @height; width: fit-content; + margin-bottom: 1rem; + margin-right: 1rem; .icon-container { display: flex; @@ -45,7 +47,7 @@ } @media @phone-landscape { - .ratings-container { + .group-container { height: @height-mobile; .icon-container { diff --git a/src/components/IconsGroup/IconsGroup.tsx b/src/components/IconsGroup/IconsGroup.tsx new file mode 100644 index 0000000000..a667592de7 --- /dev/null +++ b/src/components/IconsGroup/IconsGroup.tsx @@ -0,0 +1,36 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +import classNames from 'classnames'; +import React from 'react'; +import Icon from '@stremio/stremio-icons/react'; +import styles from './IconsGroup.less'; + +type GroupItem = { + icon: string; + filled?: string; + disabled?: boolean; + className?: string; + onClick?: () => void; +}; + +type Props = { + items: GroupItem[]; + className?: string; +}; + +const IconsGroup = ({ items, className }: Props) => { + return ( +
+ {items.map((item, index) => ( +
+ +
+ ))} +
+ ); +}; + +export default IconsGroup; diff --git a/src/components/IconsGroup/index.ts b/src/components/IconsGroup/index.ts new file mode 100644 index 0000000000..4407a8c6fc --- /dev/null +++ b/src/components/IconsGroup/index.ts @@ -0,0 +1,6 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +import IconsGroup from './IconsGroup'; + +export { IconsGroup }; + diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index 829903cfa5..5cedaa55ec 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -8,6 +8,7 @@ const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Button } = require('stremio/components/Button'); const { default: Image } = require('stremio/components/Image'); +const { IconsGroup } = require('stremio/components/IconsGroup'); const ModalDialog = require('stremio/components/ModalDialog'); const SharePrompt = require('stremio/components/SharePrompt'); const CONSTANTS = require('stremio/common/CONSTANTS'); @@ -98,6 +99,16 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou const renderLogoFallback = React.useCallback(() => (
{name}
), [name]); + const libAndWatchedGroup = React.useMemo(() => [ + { + icon: inLibrary ? 'remove-from-library' : 'add-to-library', + onClick: typeof toggleInLibrary === 'function' ? toggleInLibrary : null, + }, + { + icon: watched ? 'eye-off' : 'eye', + onClick: typeof toggleWatched === 'function' ? toggleWatched : undefined, + }, + ], [inLibrary, watched, toggleInLibrary, toggleWatched]); return (
{ @@ -209,30 +220,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou null } { - typeof toggleInLibrary === 'function' ? - - : - null - } - { - typeof toggleWatched === 'function' ? - - : - null + typeof toggleInLibrary === 'function' && typeof toggleWatched === 'function' + ? + : null } { typeof showHref === 'string' && compact ? @@ -247,13 +237,9 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou null } { - !compact && ratingInfo !== null ? - - : - null + !compact && ratingInfo !== null + ? + : null } { linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) && !compact ? diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx index 6bef0cc6d8..49ed77ba15 100644 --- a/src/components/MetaPreview/Ratings/Ratings.tsx +++ b/src/components/MetaPreview/Ratings/Ratings.tsx @@ -2,9 +2,7 @@ import React, { useMemo } from 'react'; import useRating from './useRating'; -import styles from './Ratings.less'; -import Icon from '@stremio/stremio-icons/react'; -import classNames from 'classnames'; +import { IconsGroup } from 'stremio/components/IconsGroup'; type Props = { metaId?: string; @@ -15,17 +13,20 @@ type Props = { const Ratings = ({ ratingInfo, className }: Props) => { const { onLiked, onLoved, liked, loved } = useRating(ratingInfo); const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]); + const items = useMemo(() => [ + { + icon: liked ? 'thumbs-up' : 'thumbs-up-outline', + disabled, + onClick: onLiked, + }, + { + icon: loved ? 'heart' : 'heart-outline', + disabled, + onClick: onLoved, + }, + ], [liked, loved, disabled, onLiked, onLoved]); - return ( -
-
- -
-
- -
-
- ); + return ; }; export default Ratings; diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less index 3fea95a5ff..9347552a05 100644 --- a/src/components/MetaPreview/styles.less +++ b/src/components/MetaPreview/styles.less @@ -208,11 +208,6 @@ } } } - - .ratings { - margin-bottom: 1rem; - margin-right: 1rem; - } } .share-prompt { From ff08e377fc3e60869d8a1509eb04cec45c69e1b8 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Fri, 7 Nov 2025 17:57:06 -0300 Subject: [PATCH 04/14] feat: remove unused component & fix spacing --- src/components/DiscItem/DiscItem.js | 71 ----------------------- src/components/DiscItem/index.js | 5 -- src/components/IconsGroup/IconsGroup.less | 2 - src/components/IconsGroup/IconsGroup.tsx | 3 + src/components/MetaPreview/MetaPreview.js | 6 +- src/components/MetaPreview/styles.less | 18 +++++- src/components/index.ts | 2 - src/routes/Discover/Discover.js | 18 +++++- 8 files changed, 38 insertions(+), 87 deletions(-) delete mode 100644 src/components/DiscItem/DiscItem.js delete mode 100644 src/components/DiscItem/index.js diff --git a/src/components/DiscItem/DiscItem.js b/src/components/DiscItem/DiscItem.js deleted file mode 100644 index d09e353802..0000000000 --- a/src/components/DiscItem/DiscItem.js +++ /dev/null @@ -1,71 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const React = require('react'); -const PropTypes = require('prop-types'); -const classnames = require('classnames'); -const MetaItem = require('stremio/components/MetaItem'); -const { t } = require('i18next'); - -const DiscItem = ({ id, watched, selected, toggleWatched, ...props }) => { - - const options = React.useMemo(() => { - return [ - { label: watched ? 'CTX_MARK_UNWATCHED' : 'CTX_MARK_WATCHED', value: 'watched' }, - ].filter(({ value }) => { - switch (value) { - case 'watched': - return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string'); - } - }).map((option) => ({ - ...option, - label: t(option.label) - })); - }, [id, props.deepLinks, watched]); - - const optionOnSelect = React.useCallback((event) => { - if (typeof props.optionOnSelect === 'function') { - props.optionOnSelect(event); - } - - if (!event.nativeEvent.optionSelectPrevented) { - switch (event.value) { - case 'watched': { - if (typeof id === 'string') { - if (typeof toggleWatched === 'function') { - toggleWatched(); - } - } - - break; - } - } - } - }, [id, props.deepLinks, props.optionOnSelect]); - - return ( - - ); -}; - -DiscItem.propTypes = { - id: PropTypes.string, - removable: PropTypes.bool, - watched: PropTypes.bool, - selected: PropTypes.bool, - deepLinks: PropTypes.shape({ - metaDetailsVideos: PropTypes.string, - metaDetailsStreams: PropTypes.string, - player: PropTypes.string - }), - toggleWatched: PropTypes.func, - optionOnSelect: PropTypes.func -}; - -module.exports = DiscItem; diff --git a/src/components/DiscItem/index.js b/src/components/DiscItem/index.js deleted file mode 100644 index f0fe335c2a..0000000000 --- a/src/components/DiscItem/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -const DiscItem = require('./DiscItem'); - -module.exports = DiscItem; diff --git a/src/components/IconsGroup/IconsGroup.less b/src/components/IconsGroup/IconsGroup.less index 8e09c9f937..25e1b90c02 100644 --- a/src/components/IconsGroup/IconsGroup.less +++ b/src/components/IconsGroup/IconsGroup.less @@ -17,8 +17,6 @@ border-radius: 2rem; height: @height; width: fit-content; - margin-bottom: 1rem; - margin-right: 1rem; .icon-container { display: flex; diff --git a/src/components/IconsGroup/IconsGroup.tsx b/src/components/IconsGroup/IconsGroup.tsx index a667592de7..733560e43c 100644 --- a/src/components/IconsGroup/IconsGroup.tsx +++ b/src/components/IconsGroup/IconsGroup.tsx @@ -4,9 +4,11 @@ import classNames from 'classnames'; import React from 'react'; import Icon from '@stremio/stremio-icons/react'; import styles from './IconsGroup.less'; +import { Tooltip } from 'stremio/common/Tooltips'; type GroupItem = { icon: string; + label?: string; filled?: string; disabled?: boolean; className?: string; @@ -26,6 +28,7 @@ const IconsGroup = ({ items, className }: Props) => { className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })} onClick={item.onClick} > + {item.label && }
))} diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index 5cedaa55ec..e4bc6448ba 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -102,10 +102,12 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou const libAndWatchedGroup = React.useMemo(() => [ { icon: inLibrary ? 'remove-from-library' : 'add-to-library', + label: inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB'), onClick: typeof toggleInLibrary === 'function' ? toggleInLibrary : null, }, { icon: watched ? 'eye-off' : 'eye', + label: watched ? t('CTX_MARK_UNWATCHED') : t('CTX_MARK_WATCHED'), onClick: typeof toggleWatched === 'function' ? toggleWatched : undefined, }, ], [inLibrary, watched, toggleInLibrary, toggleWatched]); @@ -221,7 +223,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou } { typeof toggleInLibrary === 'function' && typeof toggleWatched === 'function' - ? + ? : null } { @@ -238,7 +240,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou } { !compact && ratingInfo !== null - ? + ? : null } { diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less index 9347552a05..81883abbed 100644 --- a/src/components/MetaPreview/styles.less +++ b/src/components/MetaPreview/styles.less @@ -32,7 +32,7 @@ .action-buttons-container { justify-content: space-between; - .action-button:not(:last-child) { + .action-button:not(:last-child), .group-container:not(:last-child) { margin-right: 0; } } @@ -207,6 +207,20 @@ } } } + + .group-container { + margin-bottom: 1rem; + + &:global(.wide) { + width: auto; + padding: 0 2rem; + border-radius: 4rem; + } + + &:not(:last-child) { + margin-right: 1rem; + } + } } } @@ -228,7 +242,7 @@ padding-top: 1.5rem; gap: 0.5rem; - .action-button { + .action-button, .group-container { padding: 0 1.5rem !important; margin-right: 0rem !important; height: 3rem; diff --git a/src/components/index.ts b/src/components/index.ts index 373faf1dea..a47c2c7094 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -11,7 +11,6 @@ import EventModal from './EventModal'; import HorizontalScroll from './HorizontalScroll'; import Image from './Image'; import LibItem from './LibItem'; -import DiscItem from './DiscItem'; import MainNavBars from './MainNavBars'; import MetaItem from './MetaItem'; import MetaPreview from './MetaPreview'; @@ -46,7 +45,6 @@ export { HorizontalScroll, Image, LibItem, - DiscItem, MainNavBars, MetaItem, MetaPreview, diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 29dc2cfe1a..6675d6d309 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -7,7 +7,7 @@ const classnames = require('classnames'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { useServices } = require('stremio/services'); const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common'); -const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, DiscItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components'); +const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components'); const useDiscover = require('./useDiscover'); const useSelectableInputs = require('./useSelectableInputs'); const styles = require('./styles'); @@ -183,8 +183,20 @@ const Discover = ({ urlParams, queryParams }) => {
:
- {discover.catalog.content.content.map((discItem, index) => ( - toggleWatched(discItem)} selected={selectedMetaItemIndex === index} key={index} data-index={index} onClick={metaItemOnClick} /> + {discover.catalog.content.content.map((metaItem, index) => ( + ))}
} From 987201edd32811a650b563be2f3d04604aa6a3a4 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Sat, 8 Nov 2025 13:59:10 -0300 Subject: [PATCH 05/14] feat: review facts --- src/components/MetaPreview/MetaPreview.js | 14 +++++++++----- src/routes/Discover/Discover.js | 16 ++++++++-------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index e4bc6448ba..e50d6c6046 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -99,7 +99,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou const renderLogoFallback = React.useCallback(() => (
{name}
), [name]); - const libAndWatchedGroup = React.useMemo(() => [ + const metaItemActions = React.useMemo(() => [ { icon: inLibrary ? 'remove-from-library' : 'add-to-library', label: inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB'), @@ -223,7 +223,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou } { typeof toggleInLibrary === 'function' && typeof toggleWatched === 'function' - ? + ? : null } { @@ -239,9 +239,13 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou null } { - !compact && ratingInfo !== null - ? - : null + !compact && ratingInfo !== null ? + + : + null } { linksGroups.has(CONSTANTS.SHARE_LINK_CATEGORY) && !compact ? diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 6675d6d309..be28eeafd3 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -74,17 +74,17 @@ const Discover = ({ urlParams, queryParams }) => { } }); }, [selectedMetaItem]); - const toggleWatched = React.useCallback((item) => { - if (item === null) { + const toggleWatched = React.useCallback(() => { + if (selectedMetaItem === null) { return; } - if (!item.inLibrary) { + if (!selectedMetaItem.inLibrary) { core.transport.dispatch({ action: 'Ctx', args: { action: 'AddToLibrary', - args: item + args: selectedMetaItem } }); } @@ -94,12 +94,12 @@ const Discover = ({ urlParams, queryParams }) => { args: { action: 'LibraryItemMarkAsWatched', args: { - id: item.id, - is_watched: !item.watched + id: selectedMetaItem.id, + is_watched: !selectedMetaItem.watched } } }); - }, []); + }, [selectedMetaItem]); const metaItemsOnFocusCapture = React.useCallback((event) => { if (event.target.dataset.index !== null && !isNaN(event.target.dataset.index)) { setSelectedMetaItemIndex(parseInt(event.target.dataset.index, 10)); @@ -220,7 +220,7 @@ const Discover = ({ urlParams, queryParams }) => { inLibrary={selectedMetaItem.inLibrary} toggleInLibrary={selectedMetaItem.inLibrary ? removeFromLibrary : addToLibrary} watched={selectedMetaItem.watched} - toggleWatched={() => toggleWatched(selectedMetaItem)} + toggleWatched={toggleWatched} metaId={selectedMetaItem.id} like={selectedMetaItem.like} /> From 373ccf351ad4835339d66a7bbd8a5afb47f12f2c Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Sat, 8 Nov 2025 14:00:01 -0300 Subject: [PATCH 06/14] feat: review facts --- src/components/IconsGroup/IconsGroup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/IconsGroup/IconsGroup.tsx b/src/components/IconsGroup/IconsGroup.tsx index 733560e43c..041c011392 100644 --- a/src/components/IconsGroup/IconsGroup.tsx +++ b/src/components/IconsGroup/IconsGroup.tsx @@ -6,7 +6,7 @@ import Icon from '@stremio/stremio-icons/react'; import styles from './IconsGroup.less'; import { Tooltip } from 'stremio/common/Tooltips'; -type GroupItem = { +type Item = { icon: string; label?: string; filled?: string; @@ -16,7 +16,7 @@ type GroupItem = { }; type Props = { - items: GroupItem[]; + items: Item[]; className?: string; }; From 97c3b7d004664024a8ac0b788880d5883f655449 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Tue, 11 Nov 2025 17:30:00 -0300 Subject: [PATCH 07/14] feat: rename component & fix style --- .../IconsGroup.less => ActionsGroup/ActionsGroup.less} | 0 .../IconsGroup.tsx => ActionsGroup/ActionsGroup.tsx} | 6 +++--- src/components/ActionsGroup/index.ts | 6 ++++++ src/components/IconsGroup/index.ts | 6 ------ src/components/MetaPreview/MetaPreview.js | 6 +++--- src/components/MetaPreview/Ratings/Ratings.tsx | 4 ++-- src/components/MetaPreview/styles.less | 4 ---- 7 files changed, 14 insertions(+), 18 deletions(-) rename src/components/{IconsGroup/IconsGroup.less => ActionsGroup/ActionsGroup.less} (100%) rename src/components/{IconsGroup/IconsGroup.tsx => ActionsGroup/ActionsGroup.tsx} (88%) create mode 100644 src/components/ActionsGroup/index.ts delete mode 100644 src/components/IconsGroup/index.ts diff --git a/src/components/IconsGroup/IconsGroup.less b/src/components/ActionsGroup/ActionsGroup.less similarity index 100% rename from src/components/IconsGroup/IconsGroup.less rename to src/components/ActionsGroup/ActionsGroup.less diff --git a/src/components/IconsGroup/IconsGroup.tsx b/src/components/ActionsGroup/ActionsGroup.tsx similarity index 88% rename from src/components/IconsGroup/IconsGroup.tsx rename to src/components/ActionsGroup/ActionsGroup.tsx index 041c011392..244786c2f4 100644 --- a/src/components/IconsGroup/IconsGroup.tsx +++ b/src/components/ActionsGroup/ActionsGroup.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import React from 'react'; import Icon from '@stremio/stremio-icons/react'; -import styles from './IconsGroup.less'; +import styles from './ActionsGroup.less'; import { Tooltip } from 'stremio/common/Tooltips'; type Item = { @@ -20,7 +20,7 @@ type Props = { className?: string; }; -const IconsGroup = ({ items, className }: Props) => { +const ActionsGroup = ({ items, className }: Props) => { return (
{items.map((item, index) => ( @@ -36,4 +36,4 @@ const IconsGroup = ({ items, className }: Props) => { ); }; -export default IconsGroup; +export default ActionsGroup; diff --git a/src/components/ActionsGroup/index.ts b/src/components/ActionsGroup/index.ts new file mode 100644 index 0000000000..2e83d4f64f --- /dev/null +++ b/src/components/ActionsGroup/index.ts @@ -0,0 +1,6 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +import ActionsGroup from './ActionsGroup'; + +export { ActionsGroup }; + diff --git a/src/components/IconsGroup/index.ts b/src/components/IconsGroup/index.ts deleted file mode 100644 index 4407a8c6fc..0000000000 --- a/src/components/IconsGroup/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -// Copyright (C) 2017-2023 Smart code 203358507 - -import IconsGroup from './IconsGroup'; - -export { IconsGroup }; - diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index e50d6c6046..60f4e0681b 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -8,7 +8,7 @@ const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Button } = require('stremio/components/Button'); const { default: Image } = require('stremio/components/Image'); -const { IconsGroup } = require('stremio/components/IconsGroup'); +const { ActionsGroup } = require('stremio/components/ActionsGroup'); const ModalDialog = require('stremio/components/ModalDialog'); const SharePrompt = require('stremio/components/SharePrompt'); const CONSTANTS = require('stremio/common/CONSTANTS'); @@ -223,7 +223,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou } { typeof toggleInLibrary === 'function' && typeof toggleWatched === 'function' - ? + ? : null } { @@ -242,7 +242,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou !compact && ratingInfo !== null ? : null diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx index 49ed77ba15..28de12b265 100644 --- a/src/components/MetaPreview/Ratings/Ratings.tsx +++ b/src/components/MetaPreview/Ratings/Ratings.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import useRating from './useRating'; -import { IconsGroup } from 'stremio/components/IconsGroup'; +import { ActionsGroup } from 'stremio/components/ActionsGroup'; type Props = { metaId?: string; @@ -26,7 +26,7 @@ const Ratings = ({ ratingInfo, className }: Props) => { }, ], [liked, loved, disabled, onLiked, onLoved]); - return ; + return ; }; export default Ratings; diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less index 81883abbed..38fb641f79 100644 --- a/src/components/MetaPreview/styles.less +++ b/src/components/MetaPreview/styles.less @@ -249,10 +249,6 @@ border-radius: 2rem; } } - - .ratings { - margin-right: 0; - } } } From 67f4f349bb2158cf203e0969eb068962c45dbb2c Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Tue, 11 Nov 2025 18:48:24 -0300 Subject: [PATCH 08/14] feat: remove add to library --- src/routes/Discover/Discover.js | 10 ---------- src/routes/MetaDetails/MetaDetails.js | 10 ---------- 2 files changed, 20 deletions(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index be28eeafd3..3560dcb2b3 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -79,16 +79,6 @@ const Discover = ({ urlParams, queryParams }) => { return; } - if (!selectedMetaItem.inLibrary) { - core.transport.dispatch({ - action: 'Ctx', - args: { - action: 'AddToLibrary', - args: selectedMetaItem - } - }); - } - core.transport.dispatch({ action: 'Ctx', args: { diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index 478e59beeb..0825f4287a 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -69,16 +69,6 @@ const MetaDetails = ({ urlParams, queryParams }) => { return; } - if (!metaDetails.metaItem.content.content.inLibrary) { - core.transport.dispatch({ - action: 'Ctx', - args: { - action: 'AddToLibrary', - args: metaDetails.metaItem.content.content - } - }); - } - core.transport.dispatch({ action: 'Ctx', args: { From 9ccc6b8271657fbc70d6be98304aabfaf3420392 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Wed, 12 Nov 2025 18:37:41 -0300 Subject: [PATCH 09/14] feat: change metaDetails action --- src/components/MetaPreview/styles.less | 4 ++++ src/routes/Discover/Discover.js | 10 ++++++++++ src/routes/MetaDetails/MetaDetails.js | 11 ++++------- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/MetaPreview/styles.less b/src/components/MetaPreview/styles.less index 38fb641f79..3b21c0ed6d 100644 --- a/src/components/MetaPreview/styles.less +++ b/src/components/MetaPreview/styles.less @@ -277,6 +277,10 @@ &::-webkit-scrollbar { display: none; } + + .action-button { + padding: 0 1rem !important; + } } } diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 3560dcb2b3..be28eeafd3 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -79,6 +79,16 @@ const Discover = ({ urlParams, queryParams }) => { return; } + if (!selectedMetaItem.inLibrary) { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'AddToLibrary', + args: selectedMetaItem + } + }); + } + core.transport.dispatch({ action: 'Ctx', args: { diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index 0825f4287a..5ce9b199b1 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -65,18 +65,15 @@ const MetaDetails = ({ urlParams, queryParams }) => { }); }, [metaDetails]); const toggleWatched = React.useCallback(() => { - if (metaDetails.metaItem.content.content === null || metaDetails.metaItem.content.type !== 'Ready') { + if (metaDetails.metaItem === null || metaDetails.metaItem.content.type !== 'Ready') { return; } core.transport.dispatch({ - action: 'Ctx', + action: 'MetaDetails', args: { - action: 'LibraryItemMarkAsWatched', - args: { - id: metaDetails.metaItem.content.content.id, - is_watched: !metaDetails.metaItem.content.content.watched - } + action: 'MarkAsWatched', + args: !metaDetails.metaItem.watched } }); }, [metaDetails]); From c70211153e8c555b1a3a1df36ae836b1a53f84d6 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Sat, 15 Nov 2025 14:04:14 -0300 Subject: [PATCH 10/14] feat: review facts --- src/routes/Discover/Discover.js | 19 +++---------------- src/routes/MetaDetails/MetaDetails.js | 2 +- 2 files changed, 4 insertions(+), 17 deletions(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index be28eeafd3..bf0544a5da 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -79,24 +79,11 @@ const Discover = ({ urlParams, queryParams }) => { return; } - if (!selectedMetaItem.inLibrary) { - core.transport.dispatch({ - action: 'Ctx', - args: { - action: 'AddToLibrary', - args: selectedMetaItem - } - }); - } - core.transport.dispatch({ - action: 'Ctx', + action: 'MetaDetails', args: { - action: 'LibraryItemMarkAsWatched', - args: { - id: selectedMetaItem.id, - is_watched: !selectedMetaItem.watched - } + action: 'MarkAsWatched', + args: !selectedMetaItem.watched } }); }, [selectedMetaItem]); diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index 5ce9b199b1..f5dcc026d8 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -73,7 +73,7 @@ const MetaDetails = ({ urlParams, queryParams }) => { action: 'MetaDetails', args: { action: 'MarkAsWatched', - args: !metaDetails.metaItem.watched + args: !metaDetails.metaItem.content.content.watched } }); }, [metaDetails]); From a9d9c8d808145a58d444ad88e61ede486c5d22e8 Mon Sep 17 00:00:00 2001 From: higorgoulart Date: Mon, 17 Nov 2025 19:39:03 -0300 Subject: [PATCH 11/14] feat: load model --- src/routes/Discover/Discover.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index bf0544a5da..230d3b7d0a 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -41,12 +41,31 @@ const Discover = ({ urlParams, queryParams }) => { } }, [hasNextPage, loadNextPage]); const selectedMetaItem = React.useMemo(() => { - return discover.catalog !== null && + const item = discover.catalog !== null && discover.catalog.content.type === 'Ready' && discover.catalog.content.content[selectedMetaItemIndex] ? discover.catalog.content.content[selectedMetaItemIndex] : null; + + if (item !== null) { + core.transport.dispatch({ + action: 'Load', + args: { + model: 'MetaDetails', + args: { + metaPath: { + resource: 'meta', + type: item.type, + id: item.id, + extra: [] + } + } + } + }); + } + + return item; }, [discover.catalog, selectedMetaItemIndex]); const addToLibrary = React.useCallback(() => { if (selectedMetaItem === null) { From f73fa5931e126b409d7cd0a82e726cfac0b96570 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 19 Nov 2025 14:31:04 +0200 Subject: [PATCH 12/14] refactor(Discover): simplify --- src/routes/Discover/Discover.js | 40 +++++++++++---------------------- 1 file changed, 13 insertions(+), 27 deletions(-) diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js index 230d3b7d0a..647f55248f 100644 --- a/src/routes/Discover/Discover.js +++ b/src/routes/Discover/Discover.js @@ -10,6 +10,7 @@ const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = re const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components'); const useDiscover = require('./useDiscover'); const useSelectableInputs = require('./useSelectableInputs'); +const useMetaDetails = require('../MetaDetails/useMetaDetails'); const styles = require('./styles'); const SCROLL_TO_BOTTOM_THRESHOLD = 400; @@ -23,6 +24,18 @@ const Discover = ({ urlParams, queryParams }) => { const [addonModalOpen, openAddonModal, closeAddonModal] = useBinaryState(false); const [selectedMetaItemIndex, setSelectedMetaItemIndex] = React.useState(0); + const { selectedMetaItem, metaDetailsParams } = React.useMemo(() => { + const item = discover.catalog?.content.type === 'Ready' && + discover.catalog.content.content[selectedMetaItemIndex] || null; + + return { + selectedMetaItem: item, + metaDetailsParams: item ? { type: item.type, id: item.id } : {} + }; + }, [discover.catalog, selectedMetaItemIndex]); + + useMetaDetails(metaDetailsParams); + const metasContainerRef = React.useRef(); const metaPreviewRef = React.useRef(); @@ -40,33 +53,6 @@ const Discover = ({ urlParams, queryParams }) => { } } }, [hasNextPage, loadNextPage]); - const selectedMetaItem = React.useMemo(() => { - const item = discover.catalog !== null && - discover.catalog.content.type === 'Ready' && - discover.catalog.content.content[selectedMetaItemIndex] ? - discover.catalog.content.content[selectedMetaItemIndex] - : - null; - - if (item !== null) { - core.transport.dispatch({ - action: 'Load', - args: { - model: 'MetaDetails', - args: { - metaPath: { - resource: 'meta', - type: item.type, - id: item.id, - extra: [] - } - } - } - }); - } - - return item; - }, [discover.catalog, selectedMetaItemIndex]); const addToLibrary = React.useCallback(() => { if (selectedMetaItem === null) { return; From 6bf3b8147d5d2fdc1d6ccf32b9e7c06dfde52ba7 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 19 Nov 2025 14:47:17 +0200 Subject: [PATCH 13/14] refactor(ActionsGroup): simplify --- src/components/ActionsGroup/ActionsGroup.tsx | 26 ++++++++++++------- src/components/ActionsGroup/index.ts | 4 +-- src/components/MetaPreview/MetaPreview.js | 2 +- .../MetaPreview/Ratings/Ratings.tsx | 9 ++++--- src/components/index.ts | 2 ++ 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/components/ActionsGroup/ActionsGroup.tsx b/src/components/ActionsGroup/ActionsGroup.tsx index 244786c2f4..8c7393fccc 100644 --- a/src/components/ActionsGroup/ActionsGroup.tsx +++ b/src/components/ActionsGroup/ActionsGroup.tsx @@ -3,8 +3,8 @@ import classNames from 'classnames'; import React from 'react'; import Icon from '@stremio/stremio-icons/react'; -import styles from './ActionsGroup.less'; import { Tooltip } from 'stremio/common/Tooltips'; +import styles from './ActionsGroup.less'; type Item = { icon: string; @@ -23,15 +23,21 @@ type Props = { const ActionsGroup = ({ items, className }: Props) => { return (
- {items.map((item, index) => ( -
- {item.label && } - -
- ))} + { + items.map((item, index) => ( +
+ { + item.label && + + } + +
+ )) + }
); }; diff --git a/src/components/ActionsGroup/index.ts b/src/components/ActionsGroup/index.ts index 2e83d4f64f..4dea1b83ab 100644 --- a/src/components/ActionsGroup/index.ts +++ b/src/components/ActionsGroup/index.ts @@ -1,6 +1,6 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2025 Smart code 203358507 import ActionsGroup from './ActionsGroup'; -export { ActionsGroup }; +export default ActionsGroup; diff --git a/src/components/MetaPreview/MetaPreview.js b/src/components/MetaPreview/MetaPreview.js index 60f4e0681b..5fa7d8ff01 100644 --- a/src/components/MetaPreview/MetaPreview.js +++ b/src/components/MetaPreview/MetaPreview.js @@ -8,7 +8,7 @@ const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { default: Button } = require('stremio/components/Button'); const { default: Image } = require('stremio/components/Image'); -const { ActionsGroup } = require('stremio/components/ActionsGroup'); +const { default: ActionsGroup } = require('stremio/components/ActionsGroup'); const ModalDialog = require('stremio/components/ModalDialog'); const SharePrompt = require('stremio/components/SharePrompt'); const CONSTANTS = require('stremio/common/CONSTANTS'); diff --git a/src/components/MetaPreview/Ratings/Ratings.tsx b/src/components/MetaPreview/Ratings/Ratings.tsx index 28de12b265..329ee49456 100644 --- a/src/components/MetaPreview/Ratings/Ratings.tsx +++ b/src/components/MetaPreview/Ratings/Ratings.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import useRating from './useRating'; -import { ActionsGroup } from 'stremio/components/ActionsGroup'; +import { ActionsGroup } from 'stremio/components'; type Props = { metaId?: string; @@ -13,6 +13,7 @@ type Props = { const Ratings = ({ ratingInfo, className }: Props) => { const { onLiked, onLoved, liked, loved } = useRating(ratingInfo); const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]); + const items = useMemo(() => [ { icon: liked ? 'thumbs-up' : 'thumbs-up-outline', @@ -24,9 +25,11 @@ const Ratings = ({ ratingInfo, className }: Props) => { disabled, onClick: onLoved, }, - ], [liked, loved, disabled, onLiked, onLoved]); + ], [liked, loved, disabled]); - return ; + return ( + + ); }; export default Ratings; diff --git a/src/components/index.ts b/src/components/index.ts index a47c2c7094..75400b0dd5 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -30,6 +30,7 @@ import TextInput from './TextInput'; import Toggle from './Toggle'; import Transition from './Transition'; import Video from './Video'; +import ActionsGroup from './ActionsGroup'; export { AddonDetailsModal, @@ -65,4 +66,5 @@ export { Toggle, Transition, Video, + ActionsGroup }; From 71e0bb44815c9f63e6927ebd33b89e23edf60c6e Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 19 Nov 2025 14:48:11 +0200 Subject: [PATCH 14/14] chore: update copyright --- src/components/ActionsGroup/ActionsGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ActionsGroup/ActionsGroup.tsx b/src/components/ActionsGroup/ActionsGroup.tsx index 8c7393fccc..052f250167 100644 --- a/src/components/ActionsGroup/ActionsGroup.tsx +++ b/src/components/ActionsGroup/ActionsGroup.tsx @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2025 Smart code 203358507 import classNames from 'classnames'; import React from 'react';