Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update continue watching ui/ux #489

Merged
merged 4 commits into from
Oct 30, 2023
Merged

Update continue watching ui/ux #489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
863f0c7
refactor: update continue watching ui/ux
tymmesyde Oct 19, 2023
293bd7d
refactor(MetaItem): update style
tymmesyde Oct 24, 2023
22a95b6
refactor(MetaItem): increase transform scale for play icon
tymmesyde Oct 24, 2023
9768b8c
refactor: improve ContinueWatchingItem logic
tymmesyde Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions src/common/ContinueWatchingItem/ContinueWatchingItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 onClick = React.useCallback(() => {
if (deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams) {
window.location = deepLinks?.metaDetailsVideos ?? deepLinks?.metaDetailsStreams;
}
}, [deepLinks]);

const onPlayClick = React.useCallback((event) => {
event.stopPropagation();
if (deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos) {
window.location = deepLinks?.player ?? deepLinks?.metaDetailsStreams ?? deepLinks?.metaDetailsVideos;
}
}, [deepLinks]);

const onDismissClick = React.useCallback((event) => {
event.stopPropagation();
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 (
<LibItem
{...props}
posterChangeCursor={true}
newVideos={newVideos}
onClick={onClick}
onPlayClick={onPlayClick}
onDismissClick={onDismissClick}
/>
);
};

ContinueWatchingItem.propTypes = {
_id: PropTypes.string,
deepLinks: PropTypes.shape({
metaDetailsVideos: PropTypes.string,
metaDetailsStreams: PropTypes.string,
player: PropTypes.string
}),
};

module.exports = ContinueWatchingItem;
5 changes: 5 additions & 0 deletions src/common/ContinueWatchingItem/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
// Copyright (C) 2017-2023 Smart code 203358507

const ContineWatchingItem = require('./ContinueWatchingItem');

module.exports = ContineWatchingItem;
7 changes: 0 additions & 7 deletions src/common/LibItem/LibItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand All @@ -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 }) => {
Expand Down Expand Up @@ -104,7 +98,6 @@ const LibItem = ({ _id, removable, ...props }) => {
return (
<MetaItem
{...props}
newVideos={newVideos}
options={options}
optionOnSelect={optionOnSelect}
/>
Expand Down
35 changes: 26 additions & 9 deletions src/common/MetaItem/MetaItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, posterChangeCursor, progress, newVideos, options, deepLinks, dataset, optionOnSelect, onDismissClick, onPlayClick, ...props }) => {
const { t } = useTranslation();
const [menuOpen, onMenuOpen, onMenuClose] = useBinaryState(false);
const href = React.useMemo(() => {
return deepLinks ?
Expand Down Expand Up @@ -64,7 +65,16 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
), []);
return (
<Button title={name} href={href} {...filterInvalidDOMProps(props)} className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} onClick={metaItemOnClick}>
<div className={styles['poster-container']}>
<div className={classnames(styles['poster-container'], { 'poster-change-cursor': posterChangeCursor })}>
{
onDismissClick ?
<div title={t('LIBRARY_RESUME_DISMISS')} className={styles['dismiss-icon-layer']} onClick={onDismissClick}>
<Icon className={styles['dismiss-icon']} name={'close'} />
<div className={styles['dismiss-icon-backdrop']} />
</div>
:
null
}
<div className={styles['poster-image-layer']}>
<Image
className={styles['poster-image']}
Expand All @@ -74,9 +84,11 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
/>
</div>
{
playIcon ?
<div className={styles['play-icon-layer']}>
<PlayIconCircleCentered className={styles['play-icon']} />
onPlayClick ?
<div title={t('CONTINUE_WATCHING')} className={styles['play-icon-layer']} onClick={onPlayClick}>
<Icon className={styles['play-icon']} name={'play'} />
<div className={styles['play-icon-outer']} />
<div className={styles['play-icon-background']} />
</div>
:
null
Expand All @@ -96,7 +108,10 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
<div className={styles['layer']} />
<div className={styles['layer']} />
<div className={styles['layer']}>
+{newVideos}
<Icon className={styles['icon']} name={'add'} />
<div className={styles['label']}>
{newVideos}
</div>
</div>
</div>
:
Expand Down Expand Up @@ -140,7 +155,7 @@ MetaItem.propTypes = {
name: PropTypes.string,
poster: PropTypes.string,
posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']),
playIcon: PropTypes.bool,
posterChangeCursor: PropTypes.bool,
progress: PropTypes.number,
newVideos: PropTypes.number,
options: PropTypes.array,
Expand All @@ -151,7 +166,9 @@ MetaItem.propTypes = {
}),
dataset: PropTypes.object,
optionOnSelect: PropTypes.func,
onClick: PropTypes.func
onDismissClick: PropTypes.func,
onPlayClick: PropTypes.func,
onClick: PropTypes.func,
};

module.exports = MetaItem;
146 changes: 123 additions & 23 deletions src/common/MetaItem/styles.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
play-icon-circle-centered-icon: icon;
}

@play-icon-size: 4rem;

.meta-item-container {
padding: 1rem;
overflow: visible;
Expand All @@ -28,7 +30,25 @@

.poster-container {
box-shadow: 0 0 0 0.2rem var(--primary-foreground-color);
transform: scale(1.05);

.dismiss-icon-layer {
opacity: 1;
}

.poster-image-layer {
transform: scale(1.05);
}

.play-icon-layer {
.play-icon-outer {
color: transparent;
}

.play-icon-background {
background-color: var(--secondary-accent-color);
opacity: 1;
}
}
}

.title-bar-container {
Expand Down Expand Up @@ -61,7 +81,49 @@
z-index: 0;
background-color: var(--overlay-color);
border-radius: var(--border-radius);
transition: all 0.1s ease-out;

&:global(.poster-change-cursor) {
.poster-image-layer {
&:hover {
cursor: zoom-in;
}
}
}

.dismiss-icon-layer {
z-index: -2;
position: absolute;
top: 0.5rem;
left: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
border-radius: 100%;
opacity: 0;
transition: opacity 0.1s ease-in;

.dismiss-icon {
z-index: 1;
position: relative;
height: 1.25rem;
width: 1.25rem;
color: var(--primary-foreground-color);
opacity: 0.8;
}

.dismiss-icon-backdrop {
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-background-color);
opacity: 0.6;
}
}

.poster-image-layer {
position: absolute;
Expand All @@ -74,6 +136,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
transition: transform 0.1s ease-out;

.poster-image {
flex: none;
Expand All @@ -94,27 +157,55 @@
}

.play-icon-layer {
position: absolute;
top: 30%;
right: 0;
bottom: 30%;
left: 0;
z-index: -2;
overflow: visible;
position: absolute;
top: 50%;
left: 50%;
margin-top: calc(@play-icon-size / -2);
margin-left: calc(@play-icon-size / -2);
display: flex;
align-items: center;
justify-content: center;
height: @play-icon-size;
width: @play-icon-size;
transition: transform 0.1s ease-out;

.play-icon {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(0 0 0.5rem @color-background);
z-index: 2;
position: relative;
height: 2.25rem;
width: 2.25rem;
color: var(--primary-foreground-color);
}

.play-icon-circle-centered-background {
color: @color-accent4-90;
}
.play-icon-outer {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: var(--primary-foreground-color);
box-shadow: 0 0 0 0.15rem currentColor inset;
border-radius: 100%;
transition: color 0.1s ease-in;
}

.play-icon-circle-centered-icon {
color: @color-surface-light5-90;
}
.play-icon-background {
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--primary-background-color);
border-radius: 100%;
opacity: 0.4;
transition: all 0.1s ease-in;
}

&:hover {
transform: scale(1.1);
}
}

Expand Down Expand Up @@ -157,12 +248,9 @@
display: flex;
align-items: center;
justify-content: center;
height: 1.6rem;
width: 2.75rem;
height: 1.25rem;
width: 2.25rem;
border-radius: 0.25rem;
font-size: 1rem;
font-weight: 600;
color: var(--secondary-foreground-color);

&:nth-child(1) {
top: 0.5rem;
Expand All @@ -183,6 +271,18 @@
right: 1rem;
background-color: var(--primary-foreground-color);
}

.icon {
height: 0.8rem;
width: 0.8rem;
color: var(--primary-accent-color);
}

.label {
font-size: 0.8rem;
font-weight: 600;
color: var(--primary-accent-color);
}
}
}
}
Expand Down
Loading
Loading