Merge branch 'development' into fix/hide-empty-board-catalogs

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';
@@ -13,6 +13,20 @@
     @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, 0rem), max(1rem, calc(100lvh - 100svh - env(safe-area-inset-top, 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;
+@overlap-size: 3rem;
+@transparency-grandient-pad: 6rem;
+
 :root {
     --landscape-shape-ratio: 0.5625;
     --poster-shape-ratio: 1.464;
@@ -40,6 +54,15 @@
     --modal-background-color: rgba(15, 13, 32, 1);
     --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
+    --calculated-bottom-safe-inset: @calculated-bottom-safe-inset;
+    --top-overlay-size: @top-overlay-size;
+    --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;
 }
 
 * {
@@ -85,13 +108,16 @@ svg {
 }
 
 html {
-    width: 100%;
+    width: @html-width;
-    height: 100%;
+    height: @html-height;
     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;
 
     body {
         width: 100%;
@@ -106,9 +132,9 @@ html {
 
             .toasts-container {
                 position: absolute;
-                top: calc(1.2 * var(--horizontal-nav-bar-size));
+                top: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
-                right: 0;
+                right: var(--safe-area-inset-right);
-                bottom: calc(1.2 * var(--horizontal-nav-bar-size));
+                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));
@@ -193,4 +219,10 @@ html {
             }
         }
     }
+}
+
+@media only screen and (max-width: @minimum) {
+    :root {
+        --bottom-overlay-size: 6rem;
+    }
 }

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 {

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';
 
@@ -6,7 +6,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;
     cursor: pointer;
 
     &:focus {

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;

src/common/MainNavBars/styles.less

@@ -1,10 +1,15 @@
-// Copyright (C) 2017-2023 Smart code 203358507
+// Copyright (C) 2017-2024 Smart code 203358507
 
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .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,20 @@
     .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;
     }
 }
 
@@ -36,7 +43,7 @@
     .main-nav-bars-container {
         .nav-content-container {
             left: 0;
-            bottom: var(--vertical-nav-bar-size);
+            padding-bottom: var(--vertical-nav-bar-size);
         }
 
         .vertical-nav-bar {

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;

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';
@@ -12,6 +12,8 @@
     padding-right: 1rem;
     background-color: transparent;
     overflow: visible;
+    padding-top: var(--safe-area-inset-top);
+    box-sizing: content-box;
 
     .logo-container {
         flex: none;
@@ -32,7 +34,7 @@
     }
 
     .back-button-container {
-        margin-left: 1rem;
+        margin-left: max(0rem, calc(1rem - var(--safe-area-inset-left)));
     }
 
     .title {

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';
@@ -11,11 +11,13 @@
     background-color: transparent;
     border-radius: 0.75rem;
 
-    &:hover {
+    @media (pointer: fine) {
-        background-color: var(--overlay-color);
+        &:hover {
+            background-color: var(--overlay-color);
 
-        .label {
+            .label {
-            opacity: 0.6;
+                opacity: 0.6;
+            }
         }
     }
 

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;

src/index.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, user-scalable=no, viewport-fit=cover">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Stremio">
     <link rel="icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.faviconsPath %>/favicon.ico">

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';
@@ -22,17 +22,22 @@
 }
 
 .addons-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .addons-content {
         width: 100%;
         height: 100%;
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: column;
         align-self: stretch;
 
+        .addons-list-container {
+            padding: 0 1.5rem;
+            z-index: 1;
+        }
+
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
@@ -41,6 +46,7 @@
             justify-content: space-between;
             padding: 1.5rem;
             overflow: visible;
+            z-index: 2;
 
             .add-button-container {
                 flex: none;
@@ -53,6 +59,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 +140,6 @@
         .addons-list-container {
             flex: 1;
             align-self: stretch;
-            padding: 0 1.5rem;
             overflow-y: auto;
 
             .addon {

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';
@@ -23,8 +23,8 @@
         background: transparent;
 
         .board-content {
-            width: 100%;
             height: 100%;
+            width: 100%;
             padding: 0 1rem;
             overflow-y: auto;
 
@@ -38,6 +38,7 @@
     .board-warning-container {
         flex: none;
         align-self: stretch;
+        margin-bottom: var(--calculated-bottom-safe-inset, 0rem);
     }
 }
 
@@ -191,15 +192,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 +219,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, 0rem));
             height: 4rem;
+            margin-bottom: 0rem;
         }
     }
 }

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;

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

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;

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';
@@ -17,13 +17,13 @@
 }
 
 .discover-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .discover-content {
         width: 100%;
         height: 100%;
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: row;
 
@@ -32,6 +32,12 @@
             align-self: stretch;
             display: flex;
             flex-direction: column;
+            contain: strict;
+
+            .meta-items-container {
+                padding: 0 1.5rem;
+                z-index: 1;
+            }
 
             .selectable-inputs-container {
                 flex: none;
@@ -40,6 +46,7 @@
                 flex-direction: row;
                 padding: 1.5rem;
                 overflow: visible;
+                z-index: 2;
 
                 .select-input {
                     flex: 0 1 15rem;
@@ -162,7 +169,6 @@
                 align-items: center;
                 grid-gap: 0.5rem;
                 margin-right: 1.5rem;
-                padding: 0 1.5rem;
                 overflow-y: auto;
 
                 .meta-item-placeholder {

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';
@@ -13,16 +13,21 @@
 }
 
 .library-container {
-    width: 100%;
     height: 100%;
     background-color: transparent;
 
     .library-content {
         width: 100%;
         height: 100%;
+        margin-bottom: calc(var(--bottom-overlay-size) * -1);
         display: flex;
         flex-direction: column;
 
+        .meta-items-container {
+            padding: 0 1.5rem;
+            z-index: 1;
+        }
+
         .selectable-inputs-container {
             flex: none;
             align-self: stretch;
@@ -30,6 +35,7 @@
             flex-direction: row;
             padding: 1.5rem;
             overflow: visible;
+            z-index: 2;
 
             .select-input-container {
                 flex-grow: 0;
@@ -119,7 +125,6 @@
             grid-auto-rows: max-content;
             align-items: center;
             grid-gap: 0.5rem;
-            padding: 0 1.5rem;
             overflow-y: auto;
         }
     }

src/routes/MetaDetails/MetaDetails.js

@@ -76,8 +76,29 @@ const MetaDetails = ({ urlParams, queryParams }) => {
         setSeason(event.value);
     }, [setSeason]);
     const renderBackgroundImageFallback = React.useCallback(() => null, []);
+    const renderBackground = React.useMemo(() => !!(
+        metaPath &&
+        metaDetails?.metaItem &&
+        metaDetails.metaItem.content.type !== 'Loading' &&
+        typeof metaDetails.metaItem.content.content?.background === 'string' &&
+        metaDetails.metaItem.content.content.background.length > 0
+    ), [metaPath, metaDetails]);
+
     return (
         <div className={styles['metadetails-container']}>
+            {
+                renderBackground ?
+                    <div className={styles['background-image-layer']}>
+                        <Image
+                            className={styles['background-image']}
+                            src={metaDetails.metaItem.content.content.background}
+                            renderFallback={renderBackgroundImageFallback}
+                            alt={' '}
+                        />
+                    </div>
+                    :
+                    null
+            }
             <HorizontalNavBar
                 className={styles['nav-bar']}
                 backButton={true}
@@ -120,20 +141,6 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                     <MetaPreview.Placeholder className={styles['meta-preview']} />
                                     :
                                     <React.Fragment>
-                                        {
-                                            typeof metaDetails.metaItem.content.content.background === 'string' &&
-                                                metaDetails.metaItem.content.content.background.length > 0 ?
-                                                <div className={styles['background-image-layer']}>
-                                                    <Image
-                                                        className={styles['background-image']}
-                                                        src={metaDetails.metaItem.content.content.background}
-                                                        renderFallback={renderBackgroundImageFallback}
-                                                        alt={' '}
-                                                    />
-                                                </div>
-                                                :
-                                                null
-                                        }
                                         <MetaPreview
                                             className={classnames(styles['meta-preview'], 'animation-fade-in')}
                                             name={metaDetails.metaItem.content.content.name}

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';
@@ -17,6 +17,29 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
+    box-sizing: border-box;
+
+    .background-image-layer {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        background-color: var(--modal-background-color);
+
+        .background-image {
+            pointer-events: none; 
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: top left;
+            opacity: 0.3;
+        }
+    }
 
     .nav-bar {
         z-index: 1;
@@ -31,32 +54,13 @@
         z-index: 0;
         display: flex;
         flex-direction: row;
-
+        margin-top: calc(var(--top-overlay-size) * -1);
+        padding-top: var(--top-overlay-size);
+        padding-bottom: var(--calculated-bottom-safe-inset, 0rem);
         .vertical-nav-bar {
-            --vertical-nav-bar-size: 6rem;
             flex: none;
         }
 
-        .background-image-layer {
-            position: fixed;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: -1;
-            background-color: var(--modal-background-color);
-
-            .background-image {
-                pointer-events: none; 
-                display: block;
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                object-position: top left;
-                opacity: 0.3;
-            }
-        }
-
         .meta-message-container {
             align-self: stretch;
             display: flex;
@@ -91,6 +95,8 @@
             flex: 0 1 auto;
             align-self: stretch;
             padding: 0 4rem 2rem 4rem;
+
+            padding-left: max(1rem, calc(4rem - var(--safe-area-inset-left)));
         }
 
         .spacing {

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';
@@ -12,13 +12,13 @@
 }
 
 .search-container {
-    width: 100%;
     height: 100%;
+    width: 100%;
     background-color: transparent;
 
     .search-content {
-        width: 100%;
         height: 100%;
+        width: 100%;
         overflow-y: auto;
 
         .search-row {

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';
@@ -13,13 +13,13 @@
 }
 
 .settings-container {
-    width: 100%;
     height: 100%;
+    width: 100%;
     background-color: transparent;
 
     .settings-content {
-        width: 100%;
         height: 100%;
+        width: 100%;
         display: flex;
         flex-direction: row;