Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 19:02:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(Calendar): add play icons on items

Browse source
This commit is contained in:
Tim 2024-07-04 06:44:41 +02:00
parent e7ddbcf383
commit a561ee0e3e
4 changed files with 58 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/routes/Calendar/List/Item/Item.less
View file

@ -49,10 +49,30 @@
.info {
flex: none;
display: block;
}
.icon {
flex: none;
display: none;
width: 2rem;
height: 2rem;
padding: 0.5rem;
border-radius: 50%;
color: var(--primary-foreground-color);
background-color: var(--secondary-accent-color);
}
&:hover {
background-color: var(--overlay-color);
.info {
display: none;
}
.icon {
display: block;
}
}
}
}

2
src/routes/Calendar/List/Item/Item.tsx
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useEffect, useMemo, useRef } from 'react';
import Icon from '@stremio/stremio-icons/react';
import classNames from 'classnames';
import { Button } from 'stremio/common';
import useCalendarDate from '../../useCalendarDate';
@ -58,6 +59,7 @@ const Item = ({ selected, monthInfo, date, items, profile, onClick }: Props) =>
<div className={styles['info']}>
S{season}E{episode}
</div>
<Icon className={styles['icon']} name={'play'} />
</Button>
))
}

34
src/routes/Calendar/Table/Cell/Cell.less
View file

@ -48,14 +48,48 @@
.item {
flex: none;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
aspect-ratio: 2 / 3;
border-radius: var(--border-radius);
.icon {
flex: none;
z-index: 1;
position: absolute;
width: 2rem;
height: 2rem;
padding: 0.5rem;
border-radius: 50%;
color: var(--primary-foreground-color);
background-color: var(--secondary-accent-color);
opacity: 0;
}
.poster {
flex: auto;
z-index: 0;
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 1;
}
.icon, .poster {
transition: opacity 0.1s ease-out;
}
&:hover {
.icon {
opacity: 1;
}
.poster {
opacity: 0.5;
}
}
}
}

2
src/routes/Calendar/Table/Cell/Cell.tsx
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useMemo } from 'react';
import Icon from '@stremio/stremio-icons/react';
import classNames from 'classnames';
import { Button, Image, HorizontalScroll } from 'stremio/common';
import styles from './Cell.less';
@ -41,6 +42,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
{
items.map(({ id, name, poster, deepLinks }) => (
<Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>
<Icon className={styles['icon']} name={'play'} />
<Image
className={styles['poster']}
src={poster}