From e03aba766afd4678d85a6a66eee75629e2ab574e Mon Sep 17 00:00:00 2001 From: IEduStu <125146135+IEduStu@users.noreply.github.com> Date: Wed, 17 Apr 2024 00:25:21 +0000 Subject: [PATCH 01/44] feat: improve mobile design --- src/App/styles.less | 10 ++++-- src/common/Button/styles.less | 2 ++ src/common/MainNavBars/styles.less | 33 +++++++++++++++++-- .../NavBar/HorizontalNavBar/styles.less | 4 ++- src/common/StreamingServerWarning/styles.less | 13 ++++++-- src/index.html | 2 +- src/routes/Addons/styles.less | 31 +++++++++++++++-- src/routes/Board/styles.less | 13 ++------ src/routes/Discover/styles.less | 30 +++++++++++++++-- src/routes/Library/styles.less | 30 +++++++++++++++-- src/routes/MetaDetails/styles.less | 5 +++ src/routes/Settings/styles.less | 2 -- 12 files changed, 144 insertions(+), 31 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index edff6e66d..ba6ce5a4b 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -85,13 +85,19 @@ svg { } html { - width: 100%; - height: 100%; + width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; + height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; min-width: 640px; min-height: 480px; font-family: 'PlusJakartaSans', 'sans-serif'; overflow: auto; overscroll-behavior: none; + user-select: none; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + + // 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; body { width: 100%; diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index 6baf8b7aa..e911d4a63 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -8,6 +8,8 @@ outline-offset: calc(-1 * var(--focus-outline-size)); -webkit-tap-highlight-color: transparent; cursor: pointer; + -webkit-touch-callout: none; + touch-callout: none; &:focus { outline-style: solid; diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index e76192fbb..cc13854f4 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -5,6 +5,11 @@ .main-nav-bars-container { position: relative; z-index: 0; + overflow: clip; + margin-left: env(safe-area-inset-left, 0px); + margin-right: env(safe-area-inset-right, 0px); + width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); + height: 100%; .horizontal-nav-bar { position: absolute; @@ -17,18 +22,32 @@ .vertical-nav-bar { position: absolute; top: var(--horizontal-nav-bar-size); - bottom: 0; + bottom: var(--calculated-bottom-safe-inset); left: 0; z-index: 1; } .nav-content-container { position: absolute; - top: var(--horizontal-nav-bar-size); + padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); + top: 0; right: 0; bottom: 0; left: var(--vertical-nav-bar-size); z-index: 0; + overflow: scroll; + + --top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); + --bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); } } @@ -36,7 +55,15 @@ .main-nav-bars-container { .nav-content-container { left: 0; - bottom: var(--vertical-nav-bar-size); + padding-bottom: var(--vertical-nav-bar-size); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), + transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) + ); } .vertical-nav-bar { diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 2be5ccf35..36658b341 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -12,6 +12,8 @@ padding-right: 1rem; background-color: transparent; overflow: visible; + padding-top: env(safe-area-inset-top,0px); + box-sizing: content-box; .logo-container { flex: none; @@ -32,7 +34,7 @@ } .back-button-container { - margin-left: 1rem; + margin-left: max(0px, calc(1rem - env(safe-area-inset-left, 0px))); } .title { diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index 42ab6bb4b..e8b2a8a17 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -6,8 +6,11 @@ display: flex; flex-direction: row; align-items: center; - padding: 1rem; background-color: @color-accent5-dark3; + padding: 1rem; + border-radius: 8px; + margin: 0px 8px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48), 0px 8px 48px rgba(0, 0, 0, 0.64); .warning-statement { flex: 1; @@ -19,8 +22,12 @@ .warning-button { flex: none; - margin-left: 1rem; + margin-left: 1.5rem; color: @color-surface-light5-90; + background-color: rgba(0, 0, 0, 0.24); + padding: 8px 12px; + border-radius: 8px; + line-height: 18px; &:first-child { margin-left: 0; @@ -50,7 +57,7 @@ height: auto !important; text-align: center; .warning-statement { - margin-bottom: 0.5rem; + margin-bottom: 1rem; margin-right: 0; } .warning-button { diff --git a/src/index.html b/src/index.html index 6b9e62fe4..ba8a9e795 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - + diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 8060e23b8..095e0e7c5 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -22,17 +22,39 @@ } .addons-container { - width: 100%; height: 100%; background-color: transparent; .addons-content { + --selectable-inputs-assumed-height: 84px; + --top-overlay-size: var(--selectable-inputs-assumed-height); + --bottom-vertical-nav-bar-size: 0px; + --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + width: 100%; - height: 100%; + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; align-self: stretch; + .addons-list-container { + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + padding: 0 1.5rem; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size, 0px); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); + z-index: 1; + } + .selectable-inputs-container { flex: none; align-self: stretch; @@ -41,6 +63,7 @@ justify-content: space-between; padding: 1.5rem; overflow: visible; + z-index: 2; .add-button-container { flex: none; @@ -53,6 +76,7 @@ padding: 0 1.5rem; border-radius: 3rem; background-color: var(--secondary-accent-color); + z-index: 3; &:hover { outline: var(--focus-outline-size) solid var(--secondary-accent-color); @@ -133,7 +157,6 @@ .addons-list-container { flex: 1; align-self: stretch; - padding: 0 1.5rem; overflow-y: auto; .addon { @@ -278,6 +301,8 @@ @media only screen and (max-width: @minimum) { .addons-container { .addons-content { + --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); + .selectable-inputs-container { .add-button-container { z-index: 1; diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index b949d8689..1c09e09c9 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -24,7 +24,6 @@ .board-content { width: 100%; - height: 100%; padding: 0 1rem; overflow-y: auto; @@ -38,6 +37,7 @@ .board-warning-container { flex: none; align-self: stretch; + margin-bottom: var(--calculated-bottom-safe-inset, 0px); } } @@ -191,15 +191,7 @@ z-index: 0; .board-content-container { - &:only-child { - .board-content { - height: 100%; - } - } - .board-content { - height: calc(100% - 4rem); - .board-row { margin-bottom: 1.5rem; } @@ -226,8 +218,9 @@ position: absolute; left: 0; right: 0; - bottom: var(--vertical-nav-bar-size); + bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); height: 4rem; + margin-bottom: 0px; } } } \ No newline at end of file diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 9f7969702..dad457d2e 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -17,13 +17,20 @@ } .discover-container { - width: 100%; height: 100%; background-color: transparent; .discover-content { + --selectable-inputs-assumed-height: 84px; + --top-overlay-size: var(--selectable-inputs-assumed-height); + --bottom-vertical-nav-bar-size: 0px; + --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + width: 100%; - height: 100%; + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: row; @@ -33,6 +40,21 @@ display: flex; flex-direction: column; + .meta-items-container { + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + padding: 0 1.5rem; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size, 0px); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); + z-index: 1; + } + .selectable-inputs-container { flex: none; align-self: stretch; @@ -40,6 +62,7 @@ flex-direction: row; padding: 1.5rem; overflow: visible; + z-index: 2; .select-input { flex: 0 1 15rem; @@ -162,7 +185,6 @@ align-items: center; grid-gap: 0.5rem; margin-right: 1.5rem; - padding: 0 1.5rem; overflow-y: auto; .meta-item-placeholder { @@ -348,6 +370,8 @@ @media only screen and (max-width: @minimum) { .discover-container { .discover-content { + --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); + .catalog-container { .selectable-inputs-container { justify-content: space-between; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 9bdd49d4a..290a51208 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -13,16 +13,38 @@ } .library-container { - width: 100%; height: 100%; background-color: transparent; .library-content { + --selectable-inputs-assumed-height: 80px; + --top-overlay-size: var(--selectable-inputs-assumed-height); + --bottom-vertical-nav-bar-size: 0px; + --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; + width: 100%; - height: 100%; + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; + .meta-items-container { + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + padding: 0 1.5rem; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size, 0px); + + mask: linear-gradient( + to bottom, + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black 100% + ); + z-index: 1; + } + .selectable-inputs-container { flex: none; align-self: stretch; @@ -30,6 +52,7 @@ flex-direction: row; padding: 1.5rem; overflow: visible; + z-index: 2; .select-input-container { flex-grow: 0; @@ -119,7 +142,6 @@ grid-auto-rows: max-content; align-items: center; grid-gap: 0.5rem; - padding: 0 1.5rem; overflow-y: auto; } } @@ -216,6 +238,8 @@ @media only screen and (max-width: @minimum) { .library-container { .library-content { + --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); + .selectable-inputs-container { justify-content: space-between; } diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 54352fe7e..3923c7927 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -17,6 +17,9 @@ flex-direction: column; width: 100%; height: 100%; + padding-left: env(safe-area-inset-left, 0px); + padding-right: env(safe-area-inset-right, 0px); + box-sizing: border-box; .nav-bar { z-index: 1; @@ -91,6 +94,8 @@ flex: 0 1 auto; align-self: stretch; padding: 0 4rem 2rem 4rem; + + padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0px))); } .spacing { diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 37103540f..82ffdcbd2 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -13,13 +13,11 @@ } .settings-container { - width: 100%; height: 100%; background-color: transparent; .settings-content { width: 100%; - height: 100%; display: flex; flex-direction: row; From ec570b91f1b619e3d08d58665311e2ac196ab598 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 15:30:07 +0200 Subject: [PATCH 02/44] refactor(styles): app styles.less --- src/App/styles.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index ba6ce5a4b..8290b7cfc 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -13,6 +13,11 @@ @import (once, less) '~stremio-router/styles.css'; } +// 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px)))"; +@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; +@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; + :root { --landscape-shape-ratio: 0.5625; --poster-shape-ratio: 1.464; @@ -85,8 +90,8 @@ svg { } html { - width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; - height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; + width: @html-width; + height: @html-height; min-width: 640px; min-height: 480px; font-family: 'PlusJakartaSans', 'sans-serif'; @@ -96,9 +101,6 @@ html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; - // 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; - body { width: 100%; height: 100%; From 45ed5254ea828e6ad0f2f930889b0510fcf34312 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 15:40:35 +0200 Subject: [PATCH 03/44] add: calculated-bottom-safe-inset this will allow us to reuse in the app without importing globals file --- src/App/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 8290b7cfc..884f6b451 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -12,9 +12,7 @@ @import (once, less) '~stremio/common/animations.less'; @import (once, less) '~stremio-router/styles.css'; } - -// 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px)))"; +@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; @@ -45,6 +43,8 @@ --modal-background-color: rgba(15, 13, 32, 1); --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; + // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp + --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; } * { From 055ac1d87388e534c4f10c6bfa38872d2fde5a41 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 15:41:27 +0200 Subject: [PATCH 04/44] remove: webkit properties on button touch-callout is not supported well and might cause problems, clearly written not to use in production; highlight color not needed since we use it on global html --- src/common/Button/styles.less | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index e911d4a63..6a26b3b7f 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -6,10 +6,7 @@ outline-width: var(--focus-outline-size); outline-color: @color-surface-light5; outline-offset: calc(-1 * var(--focus-outline-size)); - -webkit-tap-highlight-color: transparent; cursor: pointer; - -webkit-touch-callout: none; - touch-callout: none; &:focus { outline-style: solid; From 4f4b46c9f192897b4ea42ac9fe237c487e1996d8 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 20:53:36 +0200 Subject: [PATCH 05/44] refactor(MainNavbars): use less variables this ensures we utilize built in less style variables at the top of the file to avoid inline variable declarations --- src/common/MainNavBars/styles.less | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index cc13854f4..9119b451d 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -2,6 +2,11 @@ @import (reference) '~stremio/common/screen-sizes.less'; +@top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); +@bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); +@overlap-size: 3rem; +@transparency-grandient-pad: 6rem; + .main-nav-bars-container { position: relative; z-index: 0; @@ -37,15 +42,10 @@ z-index: 0; overflow: scroll; - --top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); - --bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - mask: linear-gradient( to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + transparent calc(@top-overlay-size - @overlap-size), + black calc(@top-overlay-size + @transparency-grandient-pad), black 100% ); } @@ -59,10 +59,10 @@ mask: linear-gradient( to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), - transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) + transparent calc(@top-overlay-size - @overlap-size), + black calc(@top-overlay-size + @transparency-grandient-pad), + black calc(100% - @bottom-overlay-size - @transparency-grandient-pad), + transparent calc(100% - @bottom-overlay-size + @overlap-size) ); } From 77657929e8ead8b7fdf8fdb2a2f69cef1a65a017 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 20:55:37 +0200 Subject: [PATCH 06/44] refactor(HorizontalNavbar): add missing space --- src/common/NavBar/HorizontalNavBar/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 36658b341..0d22b286a 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -12,7 +12,7 @@ padding-right: 1rem; background-color: transparent; overflow: visible; - padding-top: env(safe-area-inset-top,0px); + padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; .logo-container { From 39cb89b0b04017df930cd44c2a139b2d98774ec9 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 20:56:25 +0200 Subject: [PATCH 07/44] refactor: update the copyrights (1) --- src/App/styles.less | 5 +++-- src/common/MainNavBars/styles.less | 2 +- src/common/NavBar/HorizontalNavBar/styles.less | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 884f6b451..df48aa83a 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~stremio/common/screen-sizes.less'; @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @@ -12,6 +12,8 @@ @import (once, less) '~stremio/common/animations.less'; @import (once, less) '~stremio-router/styles.css'; } + +// 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; @@ -43,7 +45,6 @@ --modal-background-color: rgba(15, 13, 32, 1); --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; - // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; } diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 9119b451d..33558dc48 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index 0d22b286a..f1dc8f813 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; From dd8791d5895ed05e1efb3016e2aed8c09319c582 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:24:39 +0200 Subject: [PATCH 08/44] refactor(StreamingServerWarning): styles - removed the use of px values since these might be problematic on some devices - sticking to rem as the best way of defining sizes - reusing the global variable approach according screen sizes - added spacing - improved border-radius handling --- src/common/StreamingServerWarning/styles.less | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index e8b2a8a17..ea8f9c267 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -1,6 +1,7 @@ // Copyright (C) 2017-2023 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; +@import (reference) '~stremio/common/screen-sizes.less'; .warning-container { display: flex; @@ -8,9 +9,9 @@ align-items: center; background-color: @color-accent5-dark3; padding: 1rem; - border-radius: 8px; - margin: 0px 8px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.48), 0px 8px 48px rgba(0, 0, 0, 0.64); + border-radius: 0.5rem 0.5rem 0 0; + margin: 0rem 0.5rem; + box-shadow: var(--outer-glow); .warning-statement { flex: 1; @@ -22,12 +23,12 @@ .warning-button { flex: none; - margin-left: 1.5rem; color: @color-surface-light5-90; background-color: rgba(0, 0, 0, 0.24); - padding: 8px 12px; - border-radius: 8px; - line-height: 18px; + padding: 0.5rem 1rem; + margin-left: 1.5rem; + border-radius: 0.5rem; + line-height: 1.2rem; &:first-child { margin-left: 0; @@ -43,6 +44,7 @@ font-size: 1.2rem; max-height: 1.2em; color: @color-surface-light5-90; + overflow: visible; } } @@ -51,15 +53,18 @@ } } -@media only screen and (max-width: 500px) { +@media only screen and (max-width: @minimum) { .warning-container { display: block; height: auto !important; text-align: center; + border-radius: 0.5rem; + .warning-statement { margin-bottom: 1rem; margin-right: 0; } + .warning-button { display: inline-block; } From d7776f6d982dabf9d29be9f51198d573dd9196a6 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:44:00 +0200 Subject: [PATCH 09/44] refactor(Addons): styles - removed use of px - creates less native variables -removed unnecessary vars --- src/routes/Addons/styles.less | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 095e0e7c5..0d4339e5a 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -21,35 +21,34 @@ filters-modal-content: modal-dialog-content; } +@selectable-inputs-assumed-height: 5.25rem; +@top-overlay-size: @selectable-inputs-assumed-height; +@bottom-overlay-size: calc(1.5rem + env(safe-area-inset-bottom, 0rem)); +@overlap-size: 3rem; +@transparency-grandient-pad: 6rem; + .addons-container { height: 100%; background-color: transparent; .addons-content { - --selectable-inputs-assumed-height: 84px; - --top-overlay-size: var(--selectable-inputs-assumed-height); - --bottom-vertical-nav-bar-size: 0px; - --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - width: 100%; - height: calc(100% + var(--bottom-overlay-size)); - margin-bottom: calc(var(--bottom-overlay-size) * -1); + height: calc(100% + @bottom-overlay-size); + margin-bottom: calc(@bottom-overlay-size * -1); display: flex; flex-direction: column; align-self: stretch; .addons-list-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(@selectable-inputs-assumed-height * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); - padding-bottom: var(--bottom-overlay-size, 0px); + padding-top: @selectable-inputs-assumed-height; + padding-bottom: @bottom-overlay-size; mask: linear-gradient( to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + transparent calc(@top-overlay-size - @overlap-size), + black calc(@top-overlay-size + @transparency-grandient-pad), black 100% ); z-index: 1; @@ -301,8 +300,6 @@ @media only screen and (max-width: @minimum) { .addons-container { .addons-content { - --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); - .selectable-inputs-container { .add-button-container { z-index: 1; From 896950cff0a2e4ea5a9329065ea1d5f59734e08b Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:46:45 +0200 Subject: [PATCH 10/44] refactor(Board): styles - removed use of px --- src/routes/Board/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 1c09e09c9..1d973be18 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -37,7 +37,7 @@ .board-warning-container { flex: none; align-self: stretch; - margin-bottom: var(--calculated-bottom-safe-inset, 0px); + margin-bottom: var(--calculated-bottom-safe-inset, 0rem); } } @@ -218,9 +218,9 @@ position: absolute; left: 0; right: 0; - bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); + bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); height: 4rem; - margin-bottom: 0px; + margin-bottom: 0rem; } } } \ No newline at end of file From 3a67df5791d5651a5878ed54fac89f893dcdf56d Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:55:11 +0200 Subject: [PATCH 11/44] refactor(app): add vars used across the app --- src/App/styles.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/App/styles.less b/src/App/styles.less index df48aa83a..139f2e946 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -18,6 +18,12 @@ @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; +@selectable-inputs-assumed-height: 5.25rem; +@top-overlay-size: @selectable-inputs-assumed-height; +@bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); +@overlap-size: 3rem; +@transparency-grandient-pad: 6rem; + :root { --landscape-shape-ratio: 0.5625; --poster-shape-ratio: 1.464; @@ -46,6 +52,11 @@ --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; + --selectable-inputs-assumed-height: 5.25rem; + --top-overlay-size: @selectable-inputs-assumed-height; + --bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); + --overlap-size: 3rem; + --transparency-grandient-pad: 6rem; } * { From d7a4deadaa561694e1524aca86ebeeab8d0943bc Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:55:26 +0200 Subject: [PATCH 12/44] refactor(Addons): use global vars --- src/routes/Addons/styles.less | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 0d4339e5a..028fa5ed5 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -21,34 +21,28 @@ filters-modal-content: modal-dialog-content; } -@selectable-inputs-assumed-height: 5.25rem; -@top-overlay-size: @selectable-inputs-assumed-height; -@bottom-overlay-size: calc(1.5rem + env(safe-area-inset-bottom, 0rem)); -@overlap-size: 3rem; -@transparency-grandient-pad: 6rem; - .addons-container { height: 100%; background-color: transparent; .addons-content { width: 100%; - height: calc(100% + @bottom-overlay-size); - margin-bottom: calc(@bottom-overlay-size * -1); + height: calc(100% + var(--bottom-overlay-size)); + margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; align-self: stretch; .addons-list-container { - margin-top: calc(@selectable-inputs-assumed-height * -1); + margin-top: calc(var(--selectable-inputs-assumed-height) * -1); padding: 0 1.5rem; - padding-top: @selectable-inputs-assumed-height; - padding-bottom: @bottom-overlay-size; + padding-top: var(--selectable-inputs-assumed-height); + padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( to bottom, - transparent calc(@top-overlay-size - @overlap-size), - black calc(@top-overlay-size + @transparency-grandient-pad), + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), black 100% ); z-index: 1; From d29375c31b069a53f04a757becbda21a79906568 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:55:40 +0200 Subject: [PATCH 13/44] refactor(Discover): use global vars --- src/routes/Discover/styles.less | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index dad457d2e..c70c9d8eb 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -21,13 +21,6 @@ background-color: transparent; .discover-content { - --selectable-inputs-assumed-height: 84px; - --top-overlay-size: var(--selectable-inputs-assumed-height); - --bottom-vertical-nav-bar-size: 0px; - --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - width: 100%; height: calc(100% + var(--bottom-overlay-size)); margin-bottom: calc(var(--bottom-overlay-size) * -1); @@ -44,7 +37,7 @@ margin-top: calc(var(--selectable-inputs-assumed-height) * -1); padding: 0 1.5rem; padding-top: var(--selectable-inputs-assumed-height); - padding-bottom: var(--bottom-overlay-size, 0px); + padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( to bottom, From ef153fab4b74dd594acedf95bb6f9bcfa4ca1e27 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:56:01 +0200 Subject: [PATCH 14/44] refactor(Discover): remove inline var --- src/routes/Discover/styles.less | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index c70c9d8eb..f6dc5e58b 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -363,8 +363,6 @@ @media only screen and (max-width: @minimum) { .discover-container { .discover-content { - --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); - .catalog-container { .selectable-inputs-container { justify-content: space-between; From fb1a043e1d6f02f39156d366dd4d023219165f59 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 21:57:47 +0200 Subject: [PATCH 15/44] refactor(MetaDetails): use rem instead - remove unused nav-bar-size declaration --- src/routes/MetaDetails/styles.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 3923c7927..d1d3d287b 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -17,8 +17,8 @@ flex-direction: column; width: 100%; height: 100%; - padding-left: env(safe-area-inset-left, 0px); - padding-right: env(safe-area-inset-right, 0px); + padding-left: env(safe-area-inset-left, 0rem); + padding-right: env(safe-area-inset-right, 0rem); box-sizing: border-box; .nav-bar { @@ -36,7 +36,6 @@ flex-direction: row; .vertical-nav-bar { - --vertical-nav-bar-size: 6rem; flex: none; } @@ -95,7 +94,7 @@ align-self: stretch; padding: 0 4rem 2rem 4rem; - padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0px))); + padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0rem))); } .spacing { From 96ceafa458d9db1bece58397887422bf5e24369e Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:11:13 +0200 Subject: [PATCH 16/44] remove(app styles): variable which was repeated - var(--selectable-inputs-assumed-height) removed in favor of reusing var(--top-overlay-size) - fixed the bottom overlay size --- src/App/styles.less | 14 ++++++-------- src/routes/Addons/styles.less | 4 ++-- src/routes/Discover/styles.less | 4 ++-- src/routes/Library/styles.less | 6 +++--- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 139f2e946..b8ae28a6d 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -18,9 +18,8 @@ @html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; @html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; -@selectable-inputs-assumed-height: 5.25rem; -@top-overlay-size: @selectable-inputs-assumed-height; -@bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); +@top-overlay-size: 5.25rem; +@bottom-overlay-size: calc(3rem + env(safe-area-inset-bottom, 0rem)); @overlap-size: 3rem; @transparency-grandient-pad: 6rem; @@ -52,11 +51,10 @@ --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); --border-radius: 0.75rem; --calculated-bottom-safe-inset: @calculated-bottom-safe-inset; - --selectable-inputs-assumed-height: 5.25rem; - --top-overlay-size: @selectable-inputs-assumed-height; - --bottom-overlay-size: calc(1rem + env(safe-area-inset-bottom, 0rem)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; + --top-overlay-size: @top-overlay-size; + --bottom-overlay-size: @bottom-overlay-size; + --overlap-size: @overlap-size; + --transparency-grandient-pad: @transparency-grandient-pad; } * { diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 028fa5ed5..ce8b7c69d 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -34,9 +34,9 @@ align-self: stretch; .addons-list-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); + padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index f6dc5e58b..48fb111f4 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -34,9 +34,9 @@ flex-direction: column; .meta-items-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); + padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); mask: linear-gradient( diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 290a51208..80c519d45 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -18,7 +18,7 @@ .library-content { --selectable-inputs-assumed-height: 80px; - --top-overlay-size: var(--selectable-inputs-assumed-height); + --top-overlay-size: var(--top-overlay-size); --bottom-vertical-nav-bar-size: 0px; --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); --overlap-size: 3rem; @@ -31,9 +31,9 @@ flex-direction: column; .meta-items-container { - margin-top: calc(var(--selectable-inputs-assumed-height) * -1); + margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--selectable-inputs-assumed-height); + padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size, 0px); mask: linear-gradient( From 9ca41aa8c00583a65ad00d041a084195c94958a1 Mon Sep 17 00:00:00 2001 From: IEduStu <125146135+IEduStu@users.noreply.github.com> Date: Wed, 17 Apr 2024 01:13:30 +0000 Subject: [PATCH 17/44] feat: improve mobile design --- .../VerticalNavBar/NavTabButton/styles.less | 10 ++-- src/routes/MetaDetails/MetaDetails.js | 29 +++++----- src/routes/MetaDetails/styles.less | 56 ++++++++++++------- src/routes/Search/styles.less | 1 - 4 files changed, 57 insertions(+), 39 deletions(-) diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less index 01fd993e3..408752c38 100644 --- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less +++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less @@ -11,11 +11,13 @@ background-color: transparent; border-radius: 0.75rem; - &:hover { - background-color: var(--overlay-color); + @media (pointer: fine) { + &:hover { + background-color: var(--overlay-color); - .label { - opacity: 0.6; + .label { + opacity: 0.6; + } } } diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index acbe03517..ef7700d09 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,8 +76,23 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); + + const canRenderBackground = metaPath !== null && metaDetails.metaItem !== null && metaDetails.metaItem.content.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' && + typeof metaDetails.metaItem.content.content.background === 'string' && metaDetails.metaItem.content.content.background.length > 0; + return (
+ { + canRenderBackground && +
+ {' +
+ } { : - { - typeof metaDetails.metaItem.content.content.background === 'string' && - metaDetails.metaItem.content.content.background.length > 0 ? -
- {' -
- : - null - } Date: Sat, 21 Dec 2024 22:26:33 +0200 Subject: [PATCH 18/44] refactor(MetaDetails): styles + performance - use useMemo for the bg render check --- src/routes/MetaDetails/MetaDetails.js | 31 ++++++++++++++++----------- src/routes/MetaDetails/styles.less | 11 ++-------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ef7700d09..ee0a6907a 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,22 +76,29 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); - - const canRenderBackground = metaPath !== null && metaDetails.metaItem !== null && metaDetails.metaItem.content.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' && - typeof metaDetails.metaItem.content.content.background === 'string' && metaDetails.metaItem.content.content.background.length > 0; + const renderBackground = React.useMemo(() => !!( + metaPath && + metaDetails?.metaItem && + metaDetails.metaItem.content?.type !== 'Err' && + metaDetails.metaItem.content.type !== 'Loading' && + typeof metaDetails.metaItem.content.content?.background === 'string' && + metaDetails.metaItem.content.content.background.length > 0 + ), [metaPath, metaDetails]); return (
{ - canRenderBackground && -
- {' -
+ renderBackground ? +
+ {' +
+ : + null } Date: Sat, 21 Dec 2024 22:35:42 +0200 Subject: [PATCH 19/44] fix(app): styles for the bottom-overlay-size - use rem instead of px - make the bottom-overlay-size adjustments --- src/App/styles.less | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index b8ae28a6d..a48dcf248 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -14,12 +14,12 @@ } // 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, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))"; -@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)))"; -@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0px) + env(safe-area-inset-left, 0px)))"; +@calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 0rem))))"; +@html-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0rem) + env(safe-area-inset-bottom, 0rem)))"; +@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0rem) + env(safe-area-inset-left, 0rem)))"; @top-overlay-size: 5.25rem; -@bottom-overlay-size: calc(3rem + env(safe-area-inset-bottom, 0rem)); +@bottom-overlay-size: 0rem; @overlap-size: 3rem; @transparency-grandient-pad: 6rem; @@ -211,4 +211,10 @@ html { } } } +} + +@media only screen and (max-width: @minimum) { + :root { + --bottom-overlay-size: 6rem; + } } \ No newline at end of file From 9c2b9da9bf764f4cdcde4e0063a225218d874886 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:39:07 +0200 Subject: [PATCH 20/44] refactor(app toasts): styles --- src/App/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index a48dcf248..9a8afc809 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -124,9 +124,9 @@ html { .toasts-container { position: absolute; - top: calc(1.2 * var(--horizontal-nav-bar-size)); - right: 0; - bottom: calc(1.2 * var(--horizontal-nav-bar-size)); + top: calc(1.2 * var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0rem)); + right: env(safe-area-inset-right, 0rem); + bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); left: auto; z-index: 1; padding: 0 calc(0.5 * var(--horizontal-nav-bar-size)); From 561896b6114a6aad0addf66fca5ddbfdf5ba46de Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:39:37 +0200 Subject: [PATCH 21/44] remove(SearchBar): remove fixed width - .search-container --- src/routes/Search/styles.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less index 5bbeb7076..ff8f7d1b9 100644 --- a/src/routes/Search/styles.less +++ b/src/routes/Search/styles.less @@ -12,7 +12,6 @@ } .search-container { - width: 100%; height: 100%; background-color: transparent; From dab4205988742d1706af3579c422ad140e37fef4 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 22:57:55 +0200 Subject: [PATCH 22/44] refactor(app styles): env vars changes --- src/App/styles.less | 16 ++++++++++++---- src/common/MainNavBars/styles.less | 17 ++++++----------- src/routes/Library/styles.less | 9 --------- src/routes/MetaDetails/styles.less | 6 +++--- 4 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index 9a8afc809..1a1f50dcc 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -15,8 +15,12 @@ // 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-height: ~"min(100lvh, calc(100% + env(safe-area-inset-top, 0rem) + env(safe-area-inset-bottom, 0rem)))"; -@html-width: ~"min(100lvw, calc(100% + env(safe-area-inset-right, 0rem) + env(safe-area-inset-left, 0rem)))"; +@html-width: ~"calc(max(100svw, 100dvw))"; +@html-height: ~"calc(max(100svh, 100dvh))"; +@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); +@safe-area-inset-left: env(safe-area-inset-left, 0rem); @top-overlay-size: 5.25rem; @bottom-overlay-size: 0rem; @@ -55,6 +59,10 @@ --bottom-overlay-size: @bottom-overlay-size; --overlap-size: @overlap-size; --transparency-grandient-pad: @transparency-grandient-pad; + --safe-area-inset-top: @safe-area-inset-top; + --safe-area-inset-right: @safe-area-inset-right; + --safe-area-inset-bottom: @safe-area-inset-bottom; + --safe-area-inset-left: @safe-area-inset-left; } * { @@ -124,8 +132,8 @@ html { .toasts-container { position: absolute; - top: calc(1.2 * var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0rem)); - right: env(safe-area-inset-right, 0rem); + top: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-top)); + right: var(--safe-area-inset-right); bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem)); left: auto; z-index: 1; diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 33558dc48..7495b90a2 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -2,11 +2,6 @@ @import (reference) '~stremio/common/screen-sizes.less'; -@top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px)); -@bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px)); -@overlap-size: 3rem; -@transparency-grandient-pad: 6rem; - .main-nav-bars-container { position: relative; z-index: 0; @@ -44,8 +39,8 @@ mask: linear-gradient( to bottom, - transparent calc(@top-overlay-size - @overlap-size), - black calc(@top-overlay-size + @transparency-grandient-pad), + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), black 100% ); } @@ -59,10 +54,10 @@ mask: linear-gradient( to bottom, - transparent calc(@top-overlay-size - @overlap-size), - black calc(@top-overlay-size + @transparency-grandient-pad), - black calc(100% - @bottom-overlay-size - @transparency-grandient-pad), - transparent calc(100% - @bottom-overlay-size + @overlap-size) + transparent calc(var(--top-overlay-size) - var(--overlap-size)), + black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), + black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), + transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) ); } diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 80c519d45..23df0b026 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -17,13 +17,6 @@ background-color: transparent; .library-content { - --selectable-inputs-assumed-height: 80px; - --top-overlay-size: var(--top-overlay-size); - --bottom-vertical-nav-bar-size: 0px; - --bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px)); - --overlap-size: 3rem; - --transparency-grandient-pad: 6rem; - width: 100%; height: calc(100% + var(--bottom-overlay-size)); margin-bottom: calc(var(--bottom-overlay-size) * -1); @@ -238,8 +231,6 @@ @media only screen and (max-width: @minimum) { .library-container { .library-content { - --bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size); - .selectable-inputs-container { justify-content: space-between; } diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 092e113c3..906b7fb70 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -17,8 +17,8 @@ flex-direction: column; width: 100%; height: 100%; - padding-left: env(safe-area-inset-left, 0rem); - padding-right: env(safe-area-inset-right, 0rem); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); box-sizing: border-box; .background-image-layer { @@ -103,7 +103,7 @@ align-self: stretch; padding: 0 4rem 2rem 4rem; - padding-left: max(1rem, calc(4rem - env(safe-area-inset-left, 0rem))); + padding-left: max(1rem, calc(4rem - var(--safe-area-inset-left))); } .spacing { From 3d29fefa7c8a07345b4980ce5dc0575ddf13b1de Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:10:16 +0200 Subject: [PATCH 23/44] refactor(copyright): update copyright info --- src/common/BottomSheet/BottomSheet.less | 1 - src/common/Button/styles.less | 2 +- src/common/Chips/Chip/Chip.less | 1 - src/common/MetaItem/styles.less | 3 +-- src/common/NavBar/VerticalNavBar/NavTabButton/styles.less | 2 +- src/common/RadioButton/RadioButton.less | 1 - src/common/StreamingServerWarning/styles.less | 2 +- src/routes/Addons/styles.less | 2 +- src/routes/Board/styles.less | 2 +- src/routes/Calendar/Details/Details.less | 1 - src/routes/Calendar/Selector/Selector.less | 1 - src/routes/Calendar/Table/Cell/Cell.less | 1 - src/routes/Discover/styles.less | 2 +- src/routes/Library/styles.less | 2 +- src/routes/MetaDetails/styles.less | 2 +- src/routes/Search/styles.less | 4 +++- src/routes/Settings/styles.less | 4 +++- 17 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/common/BottomSheet/BottomSheet.less b/src/common/BottomSheet/BottomSheet.less index 4ac68ead6..6428e5081 100644 --- a/src/common/BottomSheet/BottomSheet.less +++ b/src/common/BottomSheet/BottomSheet.less @@ -23,7 +23,6 @@ opacity: 0.8; transition: opacity 0.1s ease-out; cursor: pointer; - -webkit-tap-highlight-color: transparent; } .container { diff --git a/src/common/Button/styles.less b/src/common/Button/styles.less index 6a26b3b7f..f6a7bcb4b 100644 --- a/src/common/Button/styles.less +++ b/src/common/Button/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; diff --git a/src/common/Chips/Chip/Chip.less b/src/common/Chips/Chip/Chip.less index b71a7b6b6..4261f35e9 100644 --- a/src/common/Chips/Chip/Chip.less +++ b/src/common/Chips/Chip/Chip.less @@ -16,7 +16,6 @@ text-transform: capitalize; padding: 0 1.75rem; border-radius: @height; - -webkit-tap-highlight-color: transparent; background-color: transparent; user-select: none; overflow: hidden; diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less index c2d094ac9..455552bce 100644 --- a/src/common/MetaItem/styles.less +++ b/src/common/MetaItem/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -23,7 +23,6 @@ .meta-item-container { padding: 1rem; overflow: visible; - -webkit-tap-highlight-color: transparent; &:hover, &:focus, &:global(.active), &:global(.selected) { outline-style: none; diff --git a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less index 408752c38..99592189d 100644 --- a/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less +++ b/src/common/NavBar/VerticalNavBar/NavTabButton/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/common/RadioButton/RadioButton.less b/src/common/RadioButton/RadioButton.less index 4f3380147..7e414a521 100644 --- a/src/common/RadioButton/RadioButton.less +++ b/src/common/RadioButton/RadioButton.less @@ -24,7 +24,6 @@ outline-width: var(--focus-outline-size); outline-color: @color-surface-light5; outline-offset: calc(-1 * var(--focus-outline-size)); - -webkit-tap-highlight-color: transparent; input[type='radio'] { opacity: 0; diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index ea8f9c267..873a27a1a 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index ce8b7c69d..e2030c7ac 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 1d973be18..1348529aa 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Calendar/Details/Details.less b/src/routes/Calendar/Details/Details.less index 2e78ca703..db11acc78 100644 --- a/src/routes/Calendar/Details/Details.less +++ b/src/routes/Calendar/Details/Details.less @@ -16,7 +16,6 @@ font-size: 1rem; font-weight: 500; color: var(--primary-foreground-color); - -webkit-tap-highlight-color: transparent; .name { flex: auto; diff --git a/src/routes/Calendar/Selector/Selector.less b/src/routes/Calendar/Selector/Selector.less index 6683697be..d71e10c70 100644 --- a/src/routes/Calendar/Selector/Selector.less +++ b/src/routes/Calendar/Selector/Selector.less @@ -22,7 +22,6 @@ gap: 0.5rem; border-radius: 0.5rem; transition: background-color 0.1s ease-out; - -webkit-tap-highlight-color: transparent; .label, .icon { color: var(--primary-foreground-color); diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less index 1a0f16d7e..a5c79e178 100644 --- a/src/routes/Calendar/Table/Cell/Cell.less +++ b/src/routes/Calendar/Table/Cell/Cell.less @@ -13,7 +13,6 @@ overflow: hidden; cursor: pointer; transition: border-color 0.1s ease-out; - -webkit-tap-highlight-color: transparent; &:first-child { border-radius: var(--border-radius) 0 0 0; diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 48fb111f4..48e4e9e80 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 23df0b026..7fc7b0c46 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 906b7fb70..7c6ad8392 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; diff --git a/src/routes/Search/styles.less b/src/routes/Search/styles.less index ff8f7d1b9..03aa5c383 100644 --- a/src/routes/Search/styles.less +++ b/src/routes/Search/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -13,9 +13,11 @@ .search-container { height: 100%; + width: 100%; background-color: transparent; .search-content { + height: 100%; width: 100%; overflow-y: auto; diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less index 82ffdcbd2..f8587d5a5 100644 --- a/src/routes/Settings/styles.less +++ b/src/routes/Settings/styles.less @@ -1,4 +1,4 @@ -// Copyright (C) 2017-2023 Smart code 203358507 +// Copyright (C) 2017-2024 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -14,9 +14,11 @@ .settings-container { height: 100%; + width: 100%; background-color: transparent; .settings-content { + height: 100%; width: 100%; display: flex; flex-direction: row; From c49ae8d5954a87a72251c7c7a632fafee9b92525 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:14:12 +0200 Subject: [PATCH 24/44] refactor(MetaDetails): use rem instead of px --- src/routes/MetaDetails/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 7c6ad8392..40601f9eb 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -56,7 +56,7 @@ flex-direction: row; margin-top: calc(var(--top-overlay-size) * -1); padding-top: var(--top-overlay-size); - padding-bottom: var(--calculated-bottom-safe-inset, 0px); + padding-bottom: var(--calculated-bottom-safe-inset, 0rem); mask: linear-gradient( to bottom, transparent calc(var(--top-overlay-size) - var(--overlap-size)), From 7c23ab5585298acc0a1edb4ff044e4fab190d85b Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:14:37 +0200 Subject: [PATCH 25/44] refactor(HorizontalNavbar): use rem & use vars --- src/common/NavBar/HorizontalNavBar/styles.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less index f1dc8f813..512788855 100644 --- a/src/common/NavBar/HorizontalNavBar/styles.less +++ b/src/common/NavBar/HorizontalNavBar/styles.less @@ -12,7 +12,7 @@ padding-right: 1rem; background-color: transparent; overflow: visible; - padding-top: env(safe-area-inset-top, 0px); + padding-top: var(--safe-area-inset-top); box-sizing: content-box; .logo-container { @@ -34,7 +34,7 @@ } .back-button-container { - margin-left: max(0px, calc(1rem - env(safe-area-inset-left, 0px))); + margin-left: max(0rem, calc(1rem - var(--safe-area-inset-left))); } .title { From fbebd9bbd4f7f7de22ce330ee3e85547a975b816 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Sat, 21 Dec 2024 23:14:49 +0200 Subject: [PATCH 26/44] refactor(Library): use rem instead of px --- src/routes/Library/styles.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 7fc7b0c46..864977e40 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -27,7 +27,7 @@ margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size, 0px); + padding-bottom: var(--bottom-overlay-size, 0rem); mask: linear-gradient( to bottom, From d589b67f859cf9ed95f4b9818ce5b22d6aeaec74 Mon Sep 17 00:00:00 2001 From: Tim Date: Sat, 21 Dec 2024 23:14:48 +0100 Subject: [PATCH 27/44] feat(Addons): make addons actions one click --- src/routes/Addons/Addon/Addon.js | 55 ++++++++++++++++++++--------- src/routes/Addons/Addon/styles.less | 6 +++- src/routes/Addons/Addons.js | 34 +++++++++++++++--- 3 files changed, 73 insertions(+), 22 deletions(-) diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js index ae27dca51..cd00b7929 100644 --- a/src/routes/Addons/Addon/Addon.js +++ b/src/routes/Addons/Addon/Addon.js @@ -8,19 +8,43 @@ const { default: Icon } = require('@stremio/stremio-icons/react'); const { Button, Image } = require('stremio/common'); const styles = require('./styles'); -const Addon = ({ className, id, name, version, logo, description, types, behaviorHints, installed, onToggle, onConfigure, onShare, dataset }) => { +const Addon = ({ className, id, name, version, logo, description, types, behaviorHints, installed, onInstall, onUninstall, onConfigure, onOpen, onShare, dataset }) => { const { t } = useTranslation(); - const toggleButtonOnClick = React.useCallback((event) => { - if (typeof onToggle === 'function') { - onToggle({ - type: 'toggle', + const onInstallClick = React.useCallback((event) => { + event.stopPropagation(); + if (typeof onInstall === 'function') { + onInstall({ + type: 'install', nativeEvent: event.nativeEvent, reactEvent: event, dataset: dataset }); } - }, [onToggle, dataset]); + }, [onInstall, dataset]); + const onUninstallClick = React.useCallback((event) => { + event.stopPropagation(); + if (typeof onUninstall === 'function') { + onUninstall({ + type: 'uninstall', + nativeEvent: event.nativeEvent, + reactEvent: event, + dataset: dataset + }); + } + }, [onUninstall, dataset]); + const onOpenClick = React.useCallback((event) => { + event.stopPropagation(); + if (typeof onOpen === 'function') { + onOpen({ + type: 'open', + nativeEvent: event.nativeEvent, + reactEvent: event, + dataset: dataset + }); + } + }, [onOpen, dataset]); const configureButtonOnClick = React.useCallback((event) => { + event.stopPropagation(); if (typeof onConfigure === 'function') { onConfigure({ type: 'configure', @@ -31,6 +55,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio } }, [onConfigure, dataset]); const shareButtonOnClick = React.useCallback((event) => { + event.stopPropagation(); if (typeof onShare === 'function') { onShare({ type: 'share', @@ -41,20 +66,15 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio } }, [onShare, dataset]); const onKeyDown = React.useCallback((event) => { - if (event.key === 'Enter' && typeof onToggle === 'function') { - onToggle({ - type: 'toggle', - nativeEvent: event.nativeEvent, - reactEvent: event, - dataset: dataset - }); + if (event.key === 'Enter') { + onOpenClick(event); } - }, [onToggle, dataset]); + }, [onOpenClick]); const renderLogoFallback = React.useCallback(() => ( ), []); return ( - @@ -137,7 +157,10 @@ Addon.propTypes = { }), installed: PropTypes.bool, onToggle: PropTypes.func, + onInstall: PropTypes.func, + onUninstall: PropTypes.func, onConfigure: PropTypes.func, + onOpen: PropTypes.func, onShare: PropTypes.func, dataset: PropTypes.object }; diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less index 26863df3f..5e8a63a79 100644 --- a/src/routes/Addons/Addon/styles.less +++ b/src/routes/Addons/Addon/styles.less @@ -10,7 +10,11 @@ padding: 1.5rem; border-radius: var(--border-radius); background-color: var(--overlay-color); - cursor: inherit; + cursor: pointer; + + &:hover { + outline: var(--focus-outline-size) solid var(--overlay-color); + } .logo-container { flex: none; diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index 1c410b819..b850e5088 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -6,6 +6,7 @@ const classnames = require('classnames'); const { useTranslation } = require('react-i18next'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, usePlatform, useBinaryState, withCoreSuspender } = require('stremio/common'); +const { useServices } = require('stremio/services'); const Addon = require('./Addon'); const useInstalledAddons = require('./useInstalledAddons'); const useRemoteAddons = require('./useRemoteAddons'); @@ -17,6 +18,7 @@ const { AddonPlaceholder } = require('./AddonPlaceholder'); const Addons = ({ urlParams, queryParams }) => { const { t } = useTranslation(); const platform = usePlatform(); + const { core } = useServices(); const installedAddons = useInstalledAddons(urlParams); const remoteAddons = useRemoteAddons(urlParams); const [addonDetailsTransportUrl, setAddonDetailsTransportUrl] = useAddonDetailsTransportUrl(urlParams, queryParams); @@ -57,12 +59,30 @@ const Addons = ({ urlParams, queryParams }) => { const onAddonShare = React.useCallback((event) => { setSharedAddon(event.dataset.addon); }, []); - const onAddonToggle = React.useCallback((event) => { - setAddonDetailsTransportUrl(event.dataset.addon.transportUrl); - }, [setAddonDetailsTransportUrl]); + const onAddonInstall = React.useCallback((event) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'InstallAddon', + args: event.dataset.addon, + } + }); + }, []); + const onAddonUninstall = React.useCallback((event) => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UninstallAddon', + args: event.dataset.addon, + } + }); + }, []); const onAddonConfigure = React.useCallback((event) => { platform.openExternal(event.dataset.addon.transportUrl.replace('manifest.json', 'configure')); }, []); + const onAddonOpen = React.useCallback((event) => { + setAddonDetailsTransportUrl(event.dataset.addon.transportUrl); + }, [setAddonDetailsTransportUrl]); const closeAddonDetails = React.useCallback(() => { setAddonDetailsTransportUrl(null); }, [setAddonDetailsTransportUrl]); @@ -135,8 +155,10 @@ const Addons = ({ urlParams, queryParams }) => { types={addon.manifest.types} behaviorHints={addon.manifest.behaviorHints} installed={addon.installed} - onToggle={onAddonToggle} + onInstall={onAddonInstall} + onUninstall={onAddonUninstall} onConfigure={onAddonConfigure} + onOpen={onAddonOpen} onShare={onAddonShare} dataset={{ addon }} /> @@ -173,8 +195,10 @@ const Addons = ({ urlParams, queryParams }) => { types={addon.manifest.types} behaviorHints={addon.manifest.behaviorHints} installed={addon.installed} - onToggle={onAddonToggle} + onInstall={onAddonInstall} + onUninstall={onAddonUninstall} onConfigure={onAddonConfigure} + onOpen={onAddonOpen} onShare={onAddonShare} dataset={{ addon }} /> From ec720dcd24679988075f74374b97ef8592fcab73 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Mon, 23 Dec 2024 20:59:22 +0200 Subject: [PATCH 28/44] fix(Discover): mask was flickering --- src/routes/Discover/styles.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 48e4e9e80..5490de005 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -32,6 +32,7 @@ align-self: stretch; display: flex; flex-direction: column; + contain: strict; .meta-items-container { margin-top: calc(var(--top-overlay-size) * -1); From b15b7bbb12e6efe53ce8471eaff0ef5dfdd6999c Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Mon, 23 Dec 2024 21:28:46 +0200 Subject: [PATCH 29/44] remove: masks in the routes --- src/common/MainNavBars/styles.less | 15 --------------- src/routes/Addons/styles.less | 7 ------- src/routes/Discover/styles.less | 7 ------- src/routes/Library/styles.less | 7 ------- src/routes/MetaDetails/styles.less | 7 ------- 5 files changed, 43 deletions(-) diff --git a/src/common/MainNavBars/styles.less b/src/common/MainNavBars/styles.less index 7495b90a2..2ee57b505 100644 --- a/src/common/MainNavBars/styles.less +++ b/src/common/MainNavBars/styles.less @@ -36,13 +36,6 @@ left: var(--vertical-nav-bar-size); z-index: 0; overflow: scroll; - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); } } @@ -51,14 +44,6 @@ .nav-content-container { left: 0; padding-bottom: var(--vertical-nav-bar-size); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)), - transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size)) - ); } .vertical-nav-bar { diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index e2030c7ac..c3f0e57a1 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -38,13 +38,6 @@ padding: 0 1.5rem; padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); z-index: 1; } diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 5490de005..eb4f56548 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -39,13 +39,6 @@ padding: 0 1.5rem; padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); z-index: 1; } diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 864977e40..9387e1371 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -28,13 +28,6 @@ padding: 0 1.5rem; padding-top: var(--top-overlay-size); padding-bottom: var(--bottom-overlay-size, 0rem); - - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); z-index: 1; } diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less index 40601f9eb..dec898288 100644 --- a/src/routes/MetaDetails/styles.less +++ b/src/routes/MetaDetails/styles.less @@ -57,13 +57,6 @@ margin-top: calc(var(--top-overlay-size) * -1); padding-top: var(--top-overlay-size); padding-bottom: var(--calculated-bottom-safe-inset, 0rem); - mask: linear-gradient( - to bottom, - transparent calc(var(--top-overlay-size) - var(--overlap-size)), - black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), - black 100% - ); - .vertical-nav-bar { flex: none; } From ed56e8387b932be63517ebf733fdb2037f83415f Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Tue, 24 Dec 2024 16:06:41 +0200 Subject: [PATCH 30/44] refactor(masks): remove masks paddings --- src/routes/Addons/styles.less | 3 --- src/routes/Board/styles.less | 1 + src/routes/Discover/styles.less | 3 --- src/routes/Library/styles.less | 3 --- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index c3f0e57a1..be333cf2f 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -34,10 +34,7 @@ align-self: stretch; .addons-list-container { - margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size); z-index: 1; } diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index 1348529aa..13ca002ee 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -23,6 +23,7 @@ background: transparent; .board-content { + height: 100%; width: 100%; padding: 0 1rem; overflow-y: auto; diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index eb4f56548..9c6d5b5e0 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -35,10 +35,7 @@ contain: strict; .meta-items-container { - margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size); z-index: 1; } diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 9387e1371..6175f74ae 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -24,10 +24,7 @@ flex-direction: column; .meta-items-container { - margin-top: calc(var(--top-overlay-size) * -1); padding: 0 1.5rem; - padding-top: var(--top-overlay-size); - padding-bottom: var(--bottom-overlay-size, 0rem); z-index: 1; } From 97ed4b519aa761ed52ee4e05b9eff3e058ec41a8 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 26 Dec 2024 16:19:22 +0200 Subject: [PATCH 31/44] fix(content): Content height was too big --- src/routes/Addons/styles.less | 2 +- src/routes/Discover/styles.less | 2 +- src/routes/Library/styles.less | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index be333cf2f..647b9fe26 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -27,7 +27,7 @@ .addons-content { width: 100%; - height: calc(100% + var(--bottom-overlay-size)); + height: 100%; margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less index 9c6d5b5e0..b48a5e59b 100644 --- a/src/routes/Discover/styles.less +++ b/src/routes/Discover/styles.less @@ -22,7 +22,7 @@ .discover-content { width: 100%; - height: calc(100% + var(--bottom-overlay-size)); + height: 100%; margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: row; diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less index 6175f74ae..e2b4da2fc 100644 --- a/src/routes/Library/styles.less +++ b/src/routes/Library/styles.less @@ -18,7 +18,7 @@ .library-content { width: 100%; - height: calc(100% + var(--bottom-overlay-size)); + height: 100%; margin-bottom: calc(var(--bottom-overlay-size) * -1); display: flex; flex-direction: column; From dc00a9fadc18a220a952081b62b943fc97ef4cc1 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Thu, 26 Dec 2024 16:31:25 +0200 Subject: [PATCH 32/44] revert(MetaDetails): renderbg logic --- src/routes/MetaDetails/MetaDetails.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ee0a6907a..ec5377509 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,19 +76,12 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); - const renderBackground = React.useMemo(() => !!( - metaPath && - metaDetails?.metaItem && - metaDetails.metaItem.content?.type !== 'Err' && - metaDetails.metaItem.content.type !== 'Loading' && - typeof metaDetails.metaItem.content.content?.background === 'string' && - metaDetails.metaItem.content.content.background.length > 0 - ), [metaPath, metaDetails]); return (
{ - renderBackground ? + typeof metaDetails.metaItem.content.content.background === 'string' + && metaDetails.metaItem.content.content.background.length > 0 ?
Date: Thu, 26 Dec 2024 16:38:16 +0200 Subject: [PATCH 33/44] Revert "revert(MetaDetails): renderbg logic" This reverts commit dc00a9fadc18a220a952081b62b943fc97ef4cc1. --- src/routes/MetaDetails/MetaDetails.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ec5377509..ee0a6907a 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -76,12 +76,19 @@ const MetaDetails = ({ urlParams, queryParams }) => { setSeason(event.value); }, [setSeason]); const renderBackgroundImageFallback = React.useCallback(() => null, []); + const renderBackground = React.useMemo(() => !!( + metaPath && + metaDetails?.metaItem && + metaDetails.metaItem.content?.type !== 'Err' && + metaDetails.metaItem.content.type !== 'Loading' && + typeof metaDetails.metaItem.content.content?.background === 'string' && + metaDetails.metaItem.content.content.background.length > 0 + ), [metaPath, metaDetails]); return (
{ - typeof metaDetails.metaItem.content.content.background === 'string' - && metaDetails.metaItem.content.content.background.length > 0 ? + renderBackground ?
Date: Thu, 26 Dec 2024 16:38:55 +0200 Subject: [PATCH 34/44] refactor: remove err state to make fallback render --- src/routes/MetaDetails/MetaDetails.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js index ee0a6907a..5e79479b3 100644 --- a/src/routes/MetaDetails/MetaDetails.js +++ b/src/routes/MetaDetails/MetaDetails.js @@ -79,7 +79,6 @@ const MetaDetails = ({ urlParams, queryParams }) => { const renderBackground = React.useMemo(() => !!( metaPath && metaDetails?.metaItem && - metaDetails.metaItem.content?.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' && typeof metaDetails.metaItem.content.content?.background === 'string' && metaDetails.metaItem.content.content.background.length > 0 From 5865ee58529bdb8e67dcc74cc76cace7c1fab774 Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 31 Dec 2024 11:15:40 +0100 Subject: [PATCH 35/44] chore: update stremio-core-web --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2ac27cb5a..1c93bad01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@babel/runtime": "7.26.0", "@sentry/browser": "8.42.0", "@stremio/stremio-colors": "5.2.0", - "@stremio/stremio-core-web": "0.48.2", + "@stremio/stremio-core-web": "0.48.4", "@stremio/stremio-icons": "5.4.0", "@stremio/stremio-video": "0.0.46", "a-color-picker": "1.2.1", @@ -3379,9 +3379,9 @@ "license": "MIT" }, "node_modules/@stremio/stremio-core-web": { - "version": "0.48.2", - "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.2.tgz", - "integrity": "sha512-zkz4ftGMoK9RmIDlGLd/DYLtaXuf4HxnMEN1NduKNXDlYPSJ4Q/b1hCbXrVqVK/nx6s+8X4XyYr9IOwFLaT5ew==", + "version": "0.48.4", + "resolved": "https://registry.npmjs.org/@stremio/stremio-core-web/-/stremio-core-web-0.48.4.tgz", + "integrity": "sha512-848OLm0dtP75aAlYhUB0KoOqwosJIj+ubB8/abuaAzH/N3dtxs40vu2AezmMpGjwR4V60rlOUkUZeWFvrUOjrw==", "license": "MIT", "dependencies": { "@babel/runtime": "7.24.1" diff --git a/package.json b/package.json index bec340a54..5ee65d7c7 100755 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "@babel/runtime": "7.26.0", "@sentry/browser": "8.42.0", "@stremio/stremio-colors": "5.2.0", - "@stremio/stremio-core-web": "0.48.2", + "@stremio/stremio-core-web": "0.48.4", "@stremio/stremio-icons": "5.4.0", "@stremio/stremio-video": "0.0.46", "a-color-picker": "1.2.1", From 4c8ac14cc51c71d7646aafd142b0ce97f8f60ade Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 31 Dec 2024 11:28:55 +0100 Subject: [PATCH 36/44] refactor(Addon): animate border-color on hover --- src/routes/Addons/Addon/styles.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/routes/Addons/Addon/styles.less b/src/routes/Addons/Addon/styles.less index 5e8a63a79..a3bb4e174 100644 --- a/src/routes/Addons/Addon/styles.less +++ b/src/routes/Addons/Addon/styles.less @@ -8,12 +8,14 @@ flex-direction: row; align-items: flex-start; padding: 1.5rem; + border: 0.15rem solid transparent; border-radius: var(--border-radius); background-color: var(--overlay-color); + transition: border-color 0.1s ease-out; cursor: pointer; &:hover { - outline: var(--focus-outline-size) solid var(--overlay-color); + border-color: var(--overlay-color); } .logo-container { From a4dd1e2f6e92f90c201287ea6a83a865a7f10d71 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 13:26:30 +0200 Subject: [PATCH 37/44] feat(MultiSelectMenu): scroll into view --- .../MultiselectMenu/Dropdown/Dropdown.tsx | 70 +++++++++++++------ .../Dropdown/Option/Option.tsx | 10 +-- 2 files changed, 53 insertions(+), 27 deletions(-) diff --git a/src/common/MultiselectMenu/Dropdown/Dropdown.tsx b/src/common/MultiselectMenu/Dropdown/Dropdown.tsx index cb7de76c2..eea0d679e 100644 --- a/src/common/MultiselectMenu/Dropdown/Dropdown.tsx +++ b/src/common/MultiselectMenu/Dropdown/Dropdown.tsx @@ -1,6 +1,6 @@ // Copyright (C) 2017-2024 Smart code 203358507 -import React from 'react'; +import React, { useRef, useEffect, useCallback } from 'react'; import Button from 'stremio/common/Button'; import { useTranslation } from 'react-i18next'; import classNames from 'classnames'; @@ -19,33 +19,57 @@ type Props = { const Dropdown = ({ level, setLevel, options, onSelect, selectedOption, menuOpen }: Props) => { const { t } = useTranslation(); + const optionsRef = useRef(new Map()); + const containerRef = useRef(null); - const onBackButtonClick = () => { + const handleSetOptionRef = useCallback((value: number) => (node: HTMLButtonElement | null) => { + if (node) { + optionsRef.current.set(value, node); + } else { + optionsRef.current.delete(value); + } + }, []); + + const handleBackClick = useCallback(() => { setLevel(level - 1); - }; + }, [setLevel, level]); + + useEffect(() => { + if (menuOpen && selectedOption && containerRef.current) { + const selectedNode = optionsRef.current.get(selectedOption.value); + if (selectedNode) { + selectedNode.scrollIntoView({ + behavior: 'smooth', + block: 'nearest' + }); + } + } + }, [menuOpen, selectedOption]); return ( -
- { - level > 0 ? - - : null +
+ {level > 0 ? + + : null } - { - options - .filter((option: MultiselectMenuOption) => !option.hidden) - .map((option: MultiselectMenuOption, index) => ( -
); diff --git a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx index 13ea37bd5..3812282a2 100644 --- a/src/common/MultiselectMenu/Dropdown/Option/Option.tsx +++ b/src/common/MultiselectMenu/Dropdown/Option/Option.tsx @@ -1,6 +1,6 @@ // Copyright (C) 2017-2024 Smart code 203358507 -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useMemo, forwardRef } from 'react'; import classNames from 'classnames'; import Button from 'stremio/common/Button'; import styles from './Option.less'; @@ -12,7 +12,7 @@ type Props = { onSelect: (value: number) => void; }; -const Option = ({ option, selectedOption, onSelect }: Props) => { +const Option = forwardRef(({ option, selectedOption, onSelect }, ref) => { // consider using option.id === selectedOption?.id instead const selected = useMemo(() => option?.value === selectedOption?.value, [option, selectedOption]); @@ -22,6 +22,7 @@ const Option = ({ option, selectedOption, onSelect }: Props) => { return ( ); -}; +}); + +Option.displayName = 'Option'; export default Option; From c65b10e9158f83541d1988bc7bcf8849d7f7ed5a Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 15:27:34 +0200 Subject: [PATCH 38/44] fix(Board): Hide empty catalogs --- src/routes/Board/Board.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index a494a02ee..facdded5c 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -57,14 +57,21 @@ const Board = () => { {board.catalogs.map((catalog, index) => { switch (catalog.content?.type) { case 'Ready': { - return ( - - ); + if (catalog.content.content.length > 0) { + return ( + + ); + } + return null; } case 'Err': { return ( From 2288bd27d0466580ddd97df41581412b44b714d9 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 15:41:44 +0200 Subject: [PATCH 39/44] refactor(Board): dont show err instead --- src/routes/Board/Board.js | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index facdded5c..e2a646789 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -57,29 +57,12 @@ const Board = () => { {board.catalogs.map((catalog, index) => { switch (catalog.content?.type) { case 'Ready': { - if (catalog.content.content.length > 0) { - return ( - - ); - } - return null; - } - case 'Err': { return ( ); } From 5ebc8df63fdbb0b94d394bf67048e2f8421cdaf2 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 17:14:04 +0200 Subject: [PATCH 40/44] refactor(Board): hide only empty catalogs --- src/routes/Board/Board.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index e2a646789..238dd106d 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -66,6 +66,19 @@ const Board = () => { /> ); } + case 'Err': { + if (!catalog.content.content === 'EmptyContent') { + return ( + + ); + } + return null; + } default: { return ( Date: Fri, 3 Jan 2025 17:17:49 +0200 Subject: [PATCH 41/44] refactor(Board): use !== instead --- src/routes/Board/Board.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 238dd106d..528d4ce0e 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -67,7 +67,7 @@ const Board = () => { ); } case 'Err': { - if (!catalog.content.content === 'EmptyContent') { + if (catalog.content.content !== 'EmptyContent') { return ( Date: Fri, 3 Jan 2025 18:06:17 +0200 Subject: [PATCH 42/44] remove(StreamingServerWarning): changes --- src/common/StreamingServerWarning/styles.less | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index 873a27a1a..d4fad4b9f 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -9,9 +9,6 @@ align-items: center; background-color: @color-accent5-dark3; padding: 1rem; - border-radius: 0.5rem 0.5rem 0 0; - margin: 0rem 0.5rem; - box-shadow: var(--outer-glow); .warning-statement { flex: 1; @@ -24,11 +21,7 @@ .warning-button { flex: none; color: @color-surface-light5-90; - background-color: rgba(0, 0, 0, 0.24); - padding: 0.5rem 1rem; - margin-left: 1.5rem; - border-radius: 0.5rem; - line-height: 1.2rem; + margin-left: 1rem; &:first-child { margin-left: 0; @@ -44,7 +37,6 @@ font-size: 1.2rem; max-height: 1.2em; color: @color-surface-light5-90; - overflow: visible; } } @@ -53,18 +45,15 @@ } } -@media only screen and (max-width: @minimum) { +@media only screen and (max-width: 500px) { .warning-container { display: block; height: auto !important; text-align: center; - border-radius: 0.5rem; - .warning-statement { - margin-bottom: 1rem; + margin-bottom: 0.5rem; margin-right: 0; } - .warning-button { display: inline-block; } From 5c531fb3e3debde94870f505f58cc9da6230128d Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Fri, 3 Jan 2025 18:07:20 +0200 Subject: [PATCH 43/44] remove: Style changes on streamingserverwarning(2) --- src/common/StreamingServerWarning/styles.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index d4fad4b9f..42ab6bb4b 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -1,14 +1,13 @@ -// Copyright (C) 2017-2024 Smart code 203358507 +// Copyright (C) 2017-2023 Smart code 203358507 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; -@import (reference) '~stremio/common/screen-sizes.less'; .warning-container { display: flex; flex-direction: row; align-items: center; - background-color: @color-accent5-dark3; padding: 1rem; + background-color: @color-accent5-dark3; .warning-statement { flex: 1; @@ -20,8 +19,8 @@ .warning-button { flex: none; - color: @color-surface-light5-90; margin-left: 1rem; + color: @color-surface-light5-90; &:first-child { margin-left: 0; From 326fc1263bf4c1f7cc5554bc593a59e425f9a938 Mon Sep 17 00:00:00 2001 From: Tim Date: Mon, 6 Jan 2025 10:55:24 +0100 Subject: [PATCH 44/44] 5.0.0-beta.16 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c0876ac29..be53e9ec7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "stremio", - "version": "5.0.0-beta.15", + "version": "5.0.0-beta.16", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "stremio", - "version": "5.0.0-beta.15", + "version": "5.0.0-beta.16", "license": "gpl-2.0", "dependencies": { "@babel/runtime": "7.26.0", diff --git a/package.json b/package.json index 0b784890c..79593f9d5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "stremio", "displayName": "Stremio", - "version": "5.0.0-beta.15", + "version": "5.0.0-beta.16", "author": "Smart Code OOD", "private": true, "license": "gpl-2.0",