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

Merge pull request #803 from Stremio/refactor/player-next-video-popup

Browse source 
refactor(NextVideoPopup): remove desc & styles
This commit is contained in:
Timothy Z. 2025-01-20 16:49:44 +02:00 committed by GitHub
commit 22c02fa535
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 37 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/screen-sizes.less
View file

@ -21,5 +21,5 @@
@small-phone-portrait: ~"screen and (max-width: @{small-phone-landscape-size}) and (max-height: @{small-phone-portrait-size}) and (orientation: portrait)";
@phone-landscape: ~"screen and (max-width: @{phone-portrait-size}) and (max-height: @{phone-landscape-size}) and (orientation: landscape)";
@phone-portrait: ~"screen and (max-width: @{phone-portrait-size}) and (max-height: @{phone-portrait-size}) and (orientation: portrait)";
@phone-portrait: ~"screen and (max-width: @{phone-landscape-size}) and (max-height: @{phone-portrait-size}) and (orientation: portrait)";

8
src/routes/Player/NextVideoPopup/NextVideoPopup.js
View file

@ -76,14 +76,6 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideo
:
null
}
{
nextVideo !== null && typeof nextVideo.overview === 'string' ?
<div className={styles['description']}>
{ nextVideo.overview }
</div>
:
null
}
</div>
<div className={styles['buttons-container']}>
<Button className={classnames(styles['button-container'], styles['dismiss'])} onClick={onDismissButtonClick}>

53
src/routes/Player/NextVideoPopup/styles.less
View file

@ -1,11 +1,13 @@
// Copyright (C) 2017-2023 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.next-video-popup-container {
display: flex;
flex-direction: row;
width: 50rem;
width: 38rem;
min-height: 13rem;
animation: slide-fade-in 0.5s ease-in;
@keyframes slide-fade-in {
@ -21,7 +23,7 @@
}
.poster-container {
flex: 1 1 45%;
flex: 1 1 25%;
display: flex;
justify-content: center;
align-items: center;
@ -50,14 +52,16 @@
.details-container {
flex: auto;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem 2rem;
.name {
flex: none;
align-self: stretch;
max-height: 2.4em;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--primary-accent-color);
.label {
@ -70,36 +74,30 @@
align-self: stretch;
max-height: 2.4em;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--primary-foreground-color);
}
.description {
color: var(--primary-foreground-color);
opacity: 0.5;
max-width: 80%;
padding: 0.5rem 0;
}
}
.buttons-container {
display: flex;
flex-direction: row;
padding: 0 1rem 2rem;
justify-content: space-between;
gap: 1rem;
padding: 0 1rem 1.5rem;
.spacing {
flex: 0 0 50%;
}
.button-container {
flex: 0 0 45%;
flex: 0 1 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
height: 3.5rem;
padding: 0 0.5rem;
margin-left: 1rem;
padding: 0 1rem;
border-radius: 1.75rem;
&.play-button {
@ -123,7 +121,6 @@
flex: none;
width: 1.4rem;
height: 1.4rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
}
@ -145,4 +142,26 @@
}
}
}
}
@media @phone-portrait {
.next-video-popup-container {
.info-container {
.buttons-container {
gap: 0.5rem;
.button-container {
margin-left: 0rem;
.icon {
margin-right: 0rem;
}
.label {
display: none;
}
}
}
}
}
}