Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #551 from Stremio/feature-watched-indicator

Browse source 
feature: watched indicator
This commit is contained in:
Tim 2024-01-02 09:10:59 +01:00 committed by GitHub
commit 1945b70ebd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/common/MetaItem/MetaItem.js
View file

@ -13,7 +13,7 @@ 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, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, ...props }) => {
const MetaItem = React.memo(({ className, type, name, poster, posterShape, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, watched, ...props }) => {
const { t } = useTranslation();
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
@ -75,6 +75,14 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, poste
:
null
}
{
watched ?
<div className={styles['watched-icon-layer']}>
<Icon className={styles['watched-icon']} name={'checkmark'} />
</div>
:
null
}
<div className={styles['poster-image-layer']}>
<Image
className={styles['poster-image']}
@ -169,6 +177,7 @@ MetaItem.propTypes = {
onDismissClick: PropTypes.func,
onPlayClick: PropTypes.func,
onClick: PropTypes.func,
watched: PropTypes.bool
};
module.exports = MetaItem;

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

@ -125,6 +125,26 @@
}
}
.watched-icon-layer {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
background-color: var(--primary-accent-color);
border-radius: 50%;
margin: 0.5rem;
.watched-icon {
width: 0.75rem;
height: 0.75rem;
color: var(--primary-foreground-color);
}
}
.poster-image-layer {
position: absolute;
top: 0;