Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #597 from Stremio/feature-mark-library-item-as-watched

Browse source 
feature: mark libItem as watched / unwatched
This commit is contained in:
Tim 2024-03-14 20:37:40 +01:00 committed by GitHub
commit 1c57dd3a65
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 48 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/common/LibItem/LibItem.js
View file

@ -6,38 +6,41 @@ const PropTypes = require('prop-types');
const MetaItem = require('stremio/common/MetaItem');
const { t } = require('i18next');
const OPTIONS = [
{ label: 'LIBRARY_PLAY', value: 'play' },
{ label: 'LIBRARY_DETAILS', value: 'details' },
{ label: 'LIBRARY_RESUME_DISMISS', value: 'dismiss' },
{ label: 'LIBRARY_REMOVE', value: 'remove' },
];
const LibItem = ({ _id, removable, notifications, watched, ...props }) => {
const LibItem = ({ _id, removable, notifications, ...props }) => {
const { core } = useServices();
const newVideos = React.useMemo(() => {
const count = notifications.items?.[_id]?.length ?? 0;
return Math.min(Math.max(count, 0), 99);
}, [_id, notifications]);
const options = React.useMemo(() => {
return OPTIONS
.filter(({ value }) => {
switch (value) {
case 'play':
return props.deepLinks && typeof props.deepLinks.player === 'string';
case 'details':
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
case 'dismiss':
return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress);
case 'remove':
return typeof _id === 'string' && removable;
}
})
.map((option) => ({
...option,
label: t(option.label)
}));
}, [_id, removable, props.progress, props.deepLinks]);
return [
{ label: 'LIBRARY_PLAY', value: 'play' },
{ label: 'LIBRARY_DETAILS', value: 'details' },
{ label: 'LIBRARY_RESUME_DISMISS', value: 'dismiss' },
{ label: watched ? 'CTX_MARK_UNWATCHED' : 'CTX_MARK_WATCHED', value: 'watched' },
{ label: 'LIBRARY_REMOVE', value: 'remove' },
].filter(({ value }) => {
switch (value) {
case 'play':
return props.deepLinks && typeof props.deepLinks.player === 'string';
case 'details':
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
case 'watched':
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
case 'dismiss':
return typeof _id === 'string' && props.progress !== null && !isNaN(props.progress);
case 'remove':
return typeof _id === 'string' && removable;
}
}).map((option) => ({
...option,
label: t(option.label)
}));
}, [_id, removable, props.progress, props.deepLinks, watched]);
const optionOnSelect = React.useCallback((event) => {
if (typeof props.optionOnSelect === 'function') {
props.optionOnSelect(event);
@ -63,6 +66,22 @@ const LibItem = ({ _id, removable, notifications, ...props }) => {
break;
}
case 'watched': {
if (typeof _id === 'string') {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'LibraryItemMarkAsWatched',
args: {
id: _id,
is_watched: !watched
}
}
});
}
break;
}
case 'dismiss': {
if (typeof _id === 'string') {
core.transport.dispatch({
@ -99,9 +118,11 @@ const LibItem = ({ _id, removable, notifications, ...props }) => {
}
}
}, [_id, props.deepLinks, props.optionOnSelect]);
return (
<MetaItem
{...props}
watched={watched}
newVideos={newVideos}
options={options}
optionOnSelect={optionOnSelect}
@ -114,6 +135,7 @@ LibItem.propTypes = {
removable: PropTypes.bool,
progress: PropTypes.number,
notifications: PropTypes.object,
watched: PropTypes.bool,
deepLinks: PropTypes.shape({
metaDetailsVideos: PropTypes.string,
metaDetailsStreams: PropTypes.string,

2
src/common/MetaItem/styles.less
View file

@ -354,7 +354,7 @@
width: auto;
.multiselect-menu-container {
min-width: 8rem;
min-width: 9rem;
max-width: 14rem;
.multiselect-option-container {