feat: improve webapp, improve mobile player, improve design ✨

.devcontainer/devcontainer.json

@@ -0,0 +1,28 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Stremio Web dev container",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+	"features": {
+		"ghcr.io/devcontainers/features/git:1": {},
+        "ghcr.io/devcontainers/features/git-lfs:1": {}
+	},
+	"forwardPorts": [8080],
+	"portsAttributes": {
+		"8080": {
+			"label": "Web Server (don't forget to manually change this port to public in the Ports tab in VS Code to access it externally)",
+			"onAutoForward": "notify",
+			"protocol": "https"
+		}
+	},
+	"postCreateCommand": "npm install",
+	"customizations": {
+        "vscode": {
+            "settings": {
+                "window.menuBarVisibility": "visible",
+                "files.autoSave" : "afterDelay",
+                "window.commandCenter": true
+            }
+        }
+    }
+}

.github/workflows/build.yml

@@ -3,21 +3,19 @@ name: Build
 on:
   push:
     branches:
-      - development
-    tags-ignore:
       - '**'
   pull_request:
     branches:
-      - development
+      - '**'
   # Allow manual dispatch in GH
   workflow_dispatch:
 
-permissions:
-  contents: write
-
 jobs:
   build:
     runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -36,7 +34,7 @@ jobs:
       # Create recursivelly the destiantion dir with
       # "--parrents where no error if existing, make parent directories as needed."
       - run: mkdir -p ./build/${{ github.head_ref || github.ref_name }}
-      - name: Deploy to GitHub Pages
+      - name: Deploy to GitHub Pages (multi-branch)
         if: github.repository == 'Stremio/stremio-web' && github.actor != 'dependabot[bot]'
         uses: peaceiris/actions-gh-pages@v4
         with:
@@ -46,3 +44,14 @@ jobs:
           # so we need a recursive creation of the destination dir
           destination_dir: ${{ github.head_ref || github.ref_name }}
           allow_empty_commit: true
+      - name: Upload build to GitHub Pages
+        if: github.event_name == 'push' && github.repository != 'Stremio/stremio-web'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          name: stremio-web
+          path: build
+      - name: Deploy build to GitHub Pages (single branch)
+        if: github.event_name == 'push' && github.repository != 'Stremio/stremio-web'
+        uses: actions/deploy-pages@v4
+        with:
+          artifact_name: stremio-web

package.json

@@ -40,7 +40,7 @@
         "react-i18next": "^12.1.1",
         "react-is": "18.2.0",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "github:Stremio/stremio-translations#b13b3e2653bd0dcf644d2a20ffa32074fe6532dd",
+        "stremio-translations": "github:Stremio/stremio-translations#4182ec9bf732e1cda0e2e6c714fd235077eb6ae1",
         "url": "0.11.0",
         "use-long-press": "^3.1.5"
     },

src/App/App.js

@@ -52,6 +52,31 @@ const App = () => {
             window.removeEventListener('hashchange', onLocationHashChange);
         };
     }, []);
+    React.useEffect(() => {
+        // on some platforms, like mobile and macOS (with a trackpad), the scrollbars aren't visible when they're not being used,
+        // here we detect this behavior so we can immitate it with our custom scrollbar styles on those platforms
+
+        const testTag = document.createElement('div');
+        testTag.classList.add('test-overlay-scrollbar');
+        testTag.style.width = '100px';
+        testTag.style.height = '100px';
+        testTag.style.overflow = 'scroll';
+        testTag.style.position = 'fixed';
+        testTag.style.top = '-200px';
+        testTag.style.left = '-200px';
+        testTag.style.opacity = '0';
+        testTag.style.pointerEvents = 'none';
+        testTag.style.scrollbarWidth = 'thin';
+
+        document.body.appendChild(testTag);
+
+        // checks whether the scrollbar actually takes space inside of the element
+        const osOverlayScrollbar = testTag.offsetWidth === testTag.clientWidth;
+
+        testTag.remove();
+
+        document.documentElement.classList.toggle('os-overlay-scrollbar', osOverlayScrollbar);
+    }, []);
     React.useEffect(() => {
         const onCoreStateChanged = () => {
             setInitialized(

src/App/ErrorDialog/styles.less

@@ -53,9 +53,11 @@
             border-radius: 3.5rem;
             background-color: var(--overlay-color);
 
-            &:hover {
-                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
-                background-color: transparent;
+            @media (pointer: fine) {
+                &:hover {
+                    outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                    background-color: transparent;
+                }
             }
 
             &:active {

src/App/styles.less

@@ -40,6 +40,8 @@
     --modal-background-color: rgba(15, 13, 32, 1);
     --outer-glow: 0px 0px 30px rgba(123, 91, 245, 0.37);
     --border-radius: 0.75rem;
+
+    background-color: #161523; // copied from WebpackPwaManifest config (see webpack.config.js)
 }
 
 * {
@@ -58,6 +60,16 @@
     box-shadow: none;
     overflow: hidden;
     word-break: break-word;
+
+    @supports not selector(::-webkit-scrollbar) {
+        scrollbar-width: thin;
+        scrollbar-color: var(--overlay-color) transparent;
+    }
+}
+
+html:global(.os-overlay-scrollbar) {
+    // this makes the browser ignore the custom scrollbar styles when it bahves as an overlay on this platform
+    // and fallbacks to using the OS scrollbar with the given properties when it's not an overlay scrollbar
     scrollbar-width: thin;
     scrollbar-color: var(--overlay-color) transparent;
 }
@@ -85,12 +97,30 @@ svg {
 }
 
 html {
-    width: 100%;
-    height: 100%;
+    width: ~"calc(max(100svw, 100dvw))";
+    height: ~"calc(max(100svh, 100dvh))";
     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;
+
+    --safe-area-inset-top: env(safe-area-inset-top, 0px);
+    --safe-area-inset-right: env(safe-area-inset-right, 0px);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-inset-left: env(safe-area-inset-left, 0px);
+    --calculated-bottom-safe-inset: var(--safe-area-inset-bottom);
+
+    @media (display-mode: standalone) {
+        width: ~"calc(max(100%, 100lvw))";
+        height: ~"calc(max(100%, 100lvh))";
+
+        // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp
+        --calculated-bottom-safe-inset: ~"calc(min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px)))))";
+    }
 
     body {
         width: 100%;
@@ -105,16 +135,19 @@ 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) + var(--safe-area-inset-top, 0px));
+                right: var(--safe-area-inset-right, 0px);
+                bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
                 left: auto;
                 z-index: 1;
                 padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));
                 overflow-y: auto;
-                scrollbar-width: none;
                 pointer-events: none;
 
+                @supports not selector(::-webkit-scrollbar) {
+                    scrollbar-width: none;
+                }
+
                 &::-webkit-scrollbar {
                     display: none;
                 }
@@ -183,7 +216,12 @@ html {
         body {
             :global(#app) {
                 .toasts-container {
-                    padding: 0 1rem;
+                    padding-top: 3rem;
+                    padding-left: 3rem;
+                    padding-bottom: 3rem;
+                    margin-top: -3rem;
+                    margin-left: -3rem;
+                    margin-bottom: -3rem;
                 }
 
                 .tooltip-container {

src/common/AddonDetailsModal/styles.less

@@ -17,9 +17,11 @@
         background-color: transparent;
         opacity: 0.3;
 
-        &:hover {
-            outline: var(--focus-outline-size) solid var(--primary-foreground-color);
-            opacity: 1;
+        @media (pointer: fine) {
+            &:hover {
+                outline: var(--focus-outline-size) solid var(--primary-foreground-color);
+                opacity: 1;
+            }
         }
 
         &:focus {
@@ -34,9 +36,11 @@
     .uninstall-button {
         background-color: var(--overlay-color);
 
-        &:hover {
-            outline: var(--focus-outline-size) solid var(--overlay-color);
-            background-color: transparent;
+        @media (pointer: fine) {
+            &:hover {
+                outline: var(--focus-outline-size) solid var(--overlay-color);
+                background-color: transparent;
+            }
         }
 
         &:focus {

src/common/Button/styles.less

@@ -7,6 +7,8 @@
     outline-color: @color-surface-light5;
     outline-offset: calc(-1 * var(--focus-outline-size));
     cursor: pointer;
+    -webkit-touch-callout: none;
+    touch-callout: none;
 
     &:focus {
         outline-style: solid;

src/common/Chips/Chip/Chip.less

@@ -21,9 +21,11 @@
     user-select: none;
     overflow: hidden;
 
-    &:hover {
-        background-color: var(--overlay-color);
-        transition: background-color 0.1s ease-out;
+    @media (pointer: fine) {
+        &:hover {
+            background-color: var(--overlay-color);
+            transition: background-color 0.1s ease-out;
+        }
     }
 
     &.active {

src/common/EventModal/styles.less

@@ -89,8 +89,10 @@
                         font-weight: 700;
                     }
 
-                    &:hover {
-                        background-color: transparent;
+                    @media (pointer: fine) {
+                        &:hover {
+                            background-color: transparent;
+                        }
                     }
                 }
             }

src/common/MainNavBars/MainNavBars.js

@@ -14,7 +14,7 @@ const TABS = [
     { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
 ];
 
-const MainNavBars = React.memo(({ className, route, query, children }) => {
+const MainNavBars = React.memo(({ className, route, query, noOverflow, children }) => {
     return (
         <div className={classnames(className, styles['main-nav-bars-container'])}>
             <HorizontalNavBar
@@ -32,7 +32,7 @@ const MainNavBars = React.memo(({ className, route, query, children }) => {
                 selected={route}
                 tabs={TABS}
             />
-            <div className={styles['nav-content-container']}>{children}</div>
+            <div className={classnames(styles['nav-content-container'], {[styles['no-overflow']]: noOverflow})}>{children}</div>
         </div>
     );
 });
@@ -43,7 +43,8 @@ MainNavBars.propTypes = {
     className: PropTypes.string,
     route: PropTypes.string,
     query: PropTypes.string,
-    children: PropTypes.node
+    noOverflow: PropTypes.bool,
+    children: PropTypes.node,
 };
 
 module.exports = MainNavBars;