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

Revert "Revert "fixes after first senior review""

Browse source 
This reverts commit 379b35cd1c.
This commit is contained in:
kKaskak 2023-10-10 14:45:35 +03:00
parent 379b35cd1c
commit 9ee5fd90d3
11 changed files with 41 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -3,4 +3,5 @@
/yarn.lock
/npm-debug.log
.DS_Store
.prettierignore
.prettierignore
bun.lockb

1
src/App/styles.less
View file

@ -24,6 +24,7 @@
--color-twitter: #1DA1F2;
--color-imdb: #f5c518;
--color-placeholder: #60606080;
--color-released: #707070;
--color-placeholder-text: @color-surface-50;
--color-placeholder-background: @color-surface-dark5-20;
--primary-background-color: rgba(12, 11, 17, 1);

11
src/common/AddonDetailsModal/styles.less
View file

@ -30,4 +30,15 @@
color: var(--primary-foreground-color);
}
}
.uninstall-button {
background-color: rgba(72, 69, 114, 1);
&:hover {
outline: var(--focus-outline-size) solid rgba(72, 69, 114, 1);
background-color: transparent;
}
&:focus {
outline-color: var(--primary-foreground-color);
}
}
}

22
src/common/MetaPreview/MetaPreview.js
View file

@ -195,6 +195,12 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
</div>
<div className={styles['action-buttons-container']}>
<div className={styles['action-button-wrapper']}>
{
typeof toggleInLibrary === 'function' && compact ?
<div className={styles['label']}>{inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}</div>
:
null
}
{
typeof toggleInLibrary === 'function' ?
<ActionButton
@ -207,14 +213,14 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
:
null
}
</div>
<div className={styles['action-button-wrapper']}>
{
typeof toggleInLibrary === 'function' && compact ?
<div className={styles['label']}>{inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB')}</div>
typeof trailerHref === 'string' && compact ?
<div className={styles['label']}>{t('WATCH_TRAILER')}</div>
:
null
}
</div>
<div className={styles['action-button-wrapper']}>
{
typeof trailerHref === 'string' ?
<ActionButton
@ -227,17 +233,11 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
:
null
}
{
typeof trailerHref === 'string' && compact ?
<div className={styles['label']}>{t('WATCH_TRAILER')}</div>
:
null
}
</div>
{
typeof showHref === 'string' && compact ?
<ActionButton
className={`${styles['action-button']} ${styles['show-button']}`}
className={classnames(styles['action-button'], styles['show-button'])}
icon={'play'}
label={t('SHOW')}
tabIndex={compact ? -1 : 0}

4
src/common/MetaPreview/styles.less
View file

@ -156,6 +156,7 @@
align-self: stretch;
display: flex;
flex-direction: row;
align-items: flex-end;
max-height: 10rem;
padding-top: 2rem;
flex-wrap: wrap;
@ -166,9 +167,10 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
gap: 1rem 0;
.label {
opacity: 0;
transition: opacity 0.3s ease;
max-width: 6rem;
text-align: center;

2
src/common/ModalDialog/ModalDialog.js
View file

@ -75,7 +75,7 @@ const ModalDialog = ({ className, title, buttons, children, dataset, onCloseRequ
Array.isArray(buttons) && buttons.length > 0 ?
<div className={styles['buttons-container']}>
{buttons.map(({ className, label, icon, props }, index) => (
<Button title={label} {...props} key={index} className={classnames(className, label === 'Uninstall' ? styles['uninstall-button'] : styles['action-button'])}>
<Button title={label} {...props} key={index} className={classnames(className, styles['action-button'])}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} name={icon} />

23
src/common/ModalDialog/styles.less
View file

@ -64,7 +64,7 @@
flex: 1;
align-self: stretch;
overflow-y: auto;
padding: 32px 0;
padding: 2rem 0;
&:last-child {
margin-bottom: 2rem;
@ -84,7 +84,7 @@
}
}
}
.base-button() {
.action-button {
flex: 1;
display: flex;
flex-direction: row;
@ -93,9 +93,11 @@
height: 3.5rem;
border-radius: 3.5rem;
padding: 1.2rem;
background-color: var(--secondary-accent-color);
&:hover {
background-color: transparent;
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
}
&:focus {
@ -124,24 +126,7 @@
text-align: center;
color: var(--primary-foreground-color);
}
}
.uninstall-button {
.base-button();
background-color: rgba(72, 69, 114, 1);
&:hover {
outline: var(--focus-outline-size) solid rgba(72, 69, 114, 1);
}
}
.action-button {
.base-button();
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
}
}
@media only screen and (max-width: @minimum) {

6
src/routes/MetaDetails/StreamsList/Stream/Stream.js
View file

@ -83,7 +83,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
<Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>
{
typeof thumbnail === 'string' && thumbnail.length > 0 ?
<div className={styles['thumbnail-container']} title={name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}>
<div className={styles['thumbnail-container']} title={name || addonName}>
<Image
className={styles['thumbnail']}
src={thumbnail}
@ -92,8 +92,8 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
/>
</div>
:
<div className={styles['addon-name-container']} title={name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}>
<div className={styles['addon-name']}>{name?.replace(/\|/g, '') || addonName?.replace(/\|/g, '')}</div>
<div className={styles['addon-name-container']} title={name || addonName}>
<div className={styles['addon-name']}>{name || addonName}</div>
</div>
}
{

23
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -3,11 +3,6 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
:import('~stremio/common/PlayIconCircleCentered/styles.less') {
play-icon-circle-centered-background: background;
play-icon-circle-centered-icon: icon;
}
.stream-container {
display: flex;
flex-direction: row;
@ -22,16 +17,8 @@
}
&:hover, &:focus, &:global(.selected) {
.play-icon {
.icon {
opacity: 1;
.play-icon-circle-centered-background {
fill: var(--secondary-accent-color);
}
.play-icon-circle-centered-icon {
fill: var(--primary-foreground-color);
}
}
}
@ -70,6 +57,7 @@
flex: 1;
max-height: 3.6em;
padding: 0 0.5rem 0 1.5rem;
opacity: 0.6;
display: flex;
flex-direction: column;
-webkit-line-clamp: 3;
@ -101,6 +89,7 @@
height: 3rem;
padding: 0.7rem;
border-radius: 50%;
opacity: 0;
color: var(--primary-foreground-color);
background-color: var(--secondary-accent-color);
}
@ -123,11 +112,5 @@
font-weight: 500;
}
}
.play-icon {
.play-icon-circle-centered-icon {
fill: var(--primary-foreground-color);
}
}
}
}

3
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -102,8 +102,7 @@ const StreamsList = ({ className, video, ...props }) => {
<Icon className={styles['icon']} name={'chevron-back'} />
</Button>
<div className={styles['episode-title']}>
{`S${video?.season}E${video?.episode} ${(video?.title)?.toLowerCase()?.replace(/\b\w/g, (char) => char.toUpperCase())}
`}
{`S${video?.season}E${video?.episode} ${(video?.title)}`}
</div>
</React.Fragment>
)

2
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -84,7 +84,7 @@
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
color: #707070;
color: var(--color-released);
opacity: 0.9;
}