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 branch 'development' into refactor/install-addons-button-stream-list

Browse source
This commit is contained in:
Timothy Z. 2025-01-20 17:36:19 +02:00
commit 2af455c691
10 changed files with 175 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/App/styles.less
View file

@ -14,11 +14,19 @@
}
// iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp
@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))";
@html-width: ~"calc(max(100svw, 100dvw))";
@html-height: ~"calc(max(100svh, 100dvh))";
@html-standalone-width: ~"calc(max(100%, 100lvw))";
@html-standalone-height: ~"calc(max(100%, 100lvh))";
@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(var(--viewport-height-diff) - env(safe-area-inset-top, 0rem))))";
// Viewport sizes
@viewport-width: ~"100vw";
@viewport-height: ~"100vh";
// HTML sizes
@html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))";
@html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))";
@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))";
@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))";
// Safe area insets
@safe-area-inset-top: env(safe-area-inset-top, 0rem);
@safe-area-inset-right: env(safe-area-inset-right, 0rem);
@safe-area-inset-bottom: env(safe-area-inset-bottom, 0rem);
@ -65,6 +73,32 @@
--safe-area-inset-right: @safe-area-inset-right;
--safe-area-inset-bottom: @safe-area-inset-bottom;
--safe-area-inset-left: @safe-area-inset-left;
--dynamic-viewport-width: @viewport-width;
--dynamic-viewport-height: @viewport-height;
--large-viewport-width: @viewport-width;
--large-viewport-height: @viewport-height;
--small-viewport-width: @viewport-width;
--small-viewport-height: @viewport-height;
--viewport-height-diff: calc(100vh - 100vh);
@supports (height: 100dvh) {
--dynamic-viewport-width: 100dvw;
--dynamic-viewport-height: 100dvh;
}
@supports (height: 100lvh) {
--large-viewport-width: 100lvw;
--large-viewport-height: 100lvh;
}
@supports (height: 100svh) {
--small-viewport-width: 100svw;
--small-viewport-height: 100svh;
}
@supports (height: 100lvh) and (height: 100svh) {
--viewport-height-diff: calc(100lvh - 100svh);
}
}
* {
@ -112,8 +146,6 @@ svg {
html {
width: @html-width;
height: @html-height;
min-width: 640px;
min-height: 480px;
font-family: 'PlusJakartaSans', 'sans-serif';
overflow: auto;
overscroll-behavior: none;
@ -212,9 +244,6 @@ html {
@media only screen and (max-width: @xsmall) {
html {
min-width: inherit;
min-height: inherit;
body {
:global(#app) {
.toasts-container {

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

@ -9,4 +9,17 @@
@large: 2200px;
@xlarge: 2500px;
@xxlarge: 2800px;
@xxxlarge: 3800px;
@xxxlarge: 3800px;
@small-phone-landscape-size: 400px;
@small-phone-portrait-size: 700px;
@phone-landscape-size: 500px;
@phone-portrait-size: 1000px;
@small-phone-landscape: ~"screen and (max-width: @{small-phone-portrait-size}) and (max-height: @{small-phone-landscape-size}) and (orientation: landscape)";
@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-landscape-size}) and (max-height: @{phone-portrait-size}) and (orientation: portrait)";

8
src/components/MetaPreview/ActionButton/styles.less
View file

@ -51,6 +51,14 @@
}
}
@media @phone-landscape {
.action-button-container {
.label-container {
display: none;
}
}
}
@media only screen and (max-width: @minimum) {
.action-button-container {
flex-direction: row;

42
src/components/MetaPreview/styles.less
View file

@ -213,6 +213,30 @@
width: 30rem;
}
@media @phone-landscape {
.meta-preview-container {
.meta-info-container {
.logo {
height: 5rem;
margin-bottom: 1rem;
}
}
.action-buttons-container {
padding-top: 1.5rem;
gap: 0.5rem;
.action-button {
padding: 0 1.5rem !important;
margin-right: 0rem !important;
height: 3rem;
border-radius: 2rem;
}
}
}
}
@media only screen and (max-width: @minimum) {
.meta-preview-container {
.meta-info-container {
@ -229,16 +253,16 @@
}
}
.action-buttons-container {
flex-shrink: 0;
margin-top: 3rem;
overflow: visible;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.action-buttons-container {
flex-shrink: 0;
margin-top: 3rem;
overflow: visible;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.share-prompt {

14
src/components/NavBar/HorizontalNavBar/styles.less
View file

@ -69,7 +69,7 @@
width: 3.5rem;
height: 3.5rem;
border-radius: 0.75rem;
opacity: 0.4;
opacity: 0.6;
.icon {
flex: none;
@ -79,7 +79,7 @@
opacity: 0.6;
}
&:hover, &:global(.active) {
.active() {
background-color: var(--overlay-color);
opacity: 1;
@ -88,6 +88,16 @@
opacity: 0.8;
}
}
&:global(.active) {
.active();
}
@media (pointer: fine) {
&:hover {
.active();
}
}
}
}

15
src/components/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -18,12 +18,21 @@
.label {
opacity: 0.6;
}
&:global(.selected) {
.label {
opacity: 1;
}
}
}
}
&:global(.selected) {
.icon {
opacity: 1;
}
.icon, .label {
color: var(--primary-accent-color);
}
}
@ -37,7 +46,7 @@
.icon {
color: var(--primary-foreground-color);
opacity: 0.2;
opacity: 0.35;
}
.label {
@ -61,12 +70,12 @@
@media only screen and (max-width: @minimum) {
.nav-tab-button-container {
.label {
opacity: 0.2;
opacity: 0.6;
}
&:global(.selected) {
.label {
opacity: 0.6;
opacity: 1;
}
}
}

10
src/routes/MetaDetails/styles.less
View file

@ -125,6 +125,16 @@
}
}
@media @phone-landscape {
.metadetails-container {
.metadetails-content {
.meta-preview {
padding: 0 1.5rem 1rem;
}
}
}
}
@media only screen and (max-width: @minimum) {
.metadetails-container {
.metadetails-content {

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;
}
}
}
}
}
}

19
src/routes/Search/Search.js
View file

@ -97,14 +97,17 @@ const Search = ({ queryParams }) => {
);
}
case 'Err': {
return (
<MetaRow
key={index}
className={classnames(styles['search-row'], 'animation-fade-in')}
catalog={catalog}
message={catalog.content.content}
/>
);
if (catalog.content.content !== 'EmptyContent') {
return (
<MetaRow
key={index}
className={classnames(styles['search-row'], 'animation-fade-in')}
catalog={catalog}
message={catalog.content.content}
/>
);
}
return null;
}
default: {
return (