Stremio · Iheuzio · Dec 9, 2023 · Dec 10, 2023 · Dec 10, 2023 · Dec 10, 2023
diff --git a/http_server.js b/http_server.js
@@ -12,12 +12,21 @@ const path = require('path');
 const build_path = path.resolve(__dirname, 'build');
 const index_path = path.join(build_path, 'index.html');
 
-express().use(express.static(build_path, {
+const app = express();
+
+app.use(express.static(build_path, {
     setHeaders: (res, path) => {
-        if (path === index_path) res.set('cache-control', `public, max-age: ${INDEX_CACHE}`);
-        else res.set('cache-control', `public, max-age: ${ASSETS_CACHE}`);
-    }
-})).all('*', (_req, res) => {
-    // TODO: better 404 page
-    res.status(404).send('<h1>404! Page not found</h1>');
-}).listen(HTTP_PORT, () => console.info(`Server listening on port: ${HTTP_PORT}`));
+        if (path === index_path) {
+            res.set('Cache-Control', `max-age=${INDEX_CACHE}, must-revalidate, public`);
+        } else {
+            res.set('Cache-Control', `max-age=${ASSETS_CACHE}, must-revalidate, public`);
+        }
+    },
+    fallthrough: true
+}));
+
+app.use((_req, res) => {
+    res.status(404).sendFile(index_path);
+});
+
+app.listen(HTTP_PORT, () => console.info(`Server listening on port: ${HTTP_PORT}`));
diff --git a/src/App/styles.less b/src/App/styles.less
@@ -49,6 +49,8 @@
     border: none;
     outline: none;
     list-style: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     text-decoration: none;
     appearance: none;

diff --git a/src/common/AddonDetailsModal/AddonDetails/styles.less b/src/common/AddonDetailsModal/AddonDetails/styles.less
@@ -67,6 +67,8 @@
             color: var(--primary-foreground-color);
 
             &.transport-url-label {
+                -webkit-user-select: text;
+                -ms-user-select: text;
                 user-select: text;
             }
 

diff --git a/src/common/Image/Image.js b/src/common/Image/Image.js
@@ -5,23 +5,35 @@ const PropTypes = require('prop-types');
 
 const Image = ({ className, src, alt, fallbackSrc, renderFallback, ...props }) => {
     const [broken, setBroken] = React.useState(false);
+
     const onError = React.useCallback((event) => {
         if (typeof props.onError === 'function') {
             props.onError(event);
         }
 
         setBroken(true);
     }, [props.onError]);
+
     React.useLayoutEffect(() => {
         setBroken(false);
     }, [src]);
-    return (broken || typeof src !== 'string' || src.length === 0) && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
-        typeof renderFallback === 'function' ?
-            renderFallback()
+
+    return (
+        (broken || typeof src !== 'string' || src.length === 0) && (typeof renderFallback === 'function' || typeof fallbackSrc === 'string') ?
+            typeof renderFallback === 'function' ?
+                renderFallback()
+                :
+                <img {...props} className={className} src={fallbackSrc} alt={alt} loading="lazy" />
             :
-            <img {...props} className={className} src={fallbackSrc} alt={alt} />
-        :
-        <img {...props} className={className} src={src} alt={alt} onError={onError} />;
+            <img
+                {...props}
+                className={className}
+                src={src}
+                alt={alt}
+                onError={onError}
+                draggable={false}
+            />
+    );
 };
 
 Image.propTypes = {

diff --git a/src/common/TextInput/styles.less b/src/common/TextInput/styles.less
@@ -1,6 +1,8 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 .text-input {
+    -webkit-user-select: text;
+    -ms-user-select: none;
     user-select: text;
 
     &::-moz-focus-inner {

diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <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">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-title" content="Stremio">
     <link rel="icon" type="image/png" sizes="96x96" href="<%= htmlWebpackPlugin.options.faviconsPath %>/icon-96.png">
-    <link rel="manifest" href="<%= htmlWebpackPlugin.options.manifestPath %>" />
-    <meta name="theme-color" content="<%= htmlWebpackPlugin.options.themeColor %>">
+    <link rel="webmanifest" href="<%= htmlWebpackPlugin.options.manifestPath %>" />
     <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.imagesPath %>/icon_x192.png">
     <title>Stremio - Freedom to Stream</title>
     <%= htmlWebpackPlugin.tags.headTags %>

diff --git a/src/index.js b/src/index.js
@@ -8,7 +8,7 @@ if (typeof process.env.SENTRY_DSN === 'string') {
 const Bowser = require('bowser');
 const browser = Bowser.parse(window.navigator?.userAgent || '');
 if (browser?.platform?.type === 'desktop') {
-    document.querySelector('meta[name="viewport"]')?.setAttribute('content', '');
+    document.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1');
 }
 
 const React = require('react');

diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
@@ -166,7 +166,9 @@
                 flex: 1;
                 align-self: stretch;
                 display: grid;
+                display: -ms-grid;
                 grid-auto-rows: max-content;
+                -ms-grid-rows: max-content;
                 align-items: center;
                 grid-gap: 0.5rem;
                 margin-right: 1.5rem;
@@ -241,6 +243,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(10, 1fr);
+                    -ms: repeat(10, 1fr);
                 }
             }
         }
@@ -253,6 +256,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(9, 1fr);
+                    -ms: repeat(9, 1fr);
                 }
             }
         }
@@ -265,6 +269,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(8, 1fr);
+                    -ms: repeat(8, 1fr);
                 }
             }
         }
@@ -277,6 +282,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(7, 1fr);
+                    -ms: repeat(7, 1fr);
                 }
             }
         }
@@ -289,6 +295,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(6, 1fr);
+                    -ms: repeat(6, 1fr);
                 }
             }
         }
@@ -301,6 +308,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(5, 1fr);
+                    -ms: repeat(5, 1fr);
                 }
             }
         }
@@ -313,6 +321,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(4, 1fr);
+                    -ms: repeat(4, 1fr);
                 }
             }
         }
@@ -325,6 +334,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(5, 1fr);
+                    -ms: repeat(5, 1fr);
                     margin-right: 0;
                 }
             }
@@ -342,6 +352,7 @@
             .catalog-container {
                 .meta-items-container {
                     grid-template-columns: repeat(4, 1fr);
+                    -ms: repeat(4, 1fr);
                     margin-right: 0;
                 }
             }
@@ -373,6 +384,7 @@
 
                 .meta-items-container {
                     grid-template-columns: repeat(3, 1fr);
+                    -ms: repeat(3, 1fr);
                 }
             }
         }

diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
@@ -166,7 +166,9 @@
             flex: 1;
             align-self: stretch;
             display: grid;
+            display: -ms-grid;
             grid-auto-rows: max-content;
+            -ms-grid-rows: max-content;
             align-items: center;
             grid-gap: 0.5rem;
             padding: 0 1.5rem;

diff --git a/src/routes/NotFound/NotFound.js b/src/routes/NotFound/NotFound.js
@@ -1,26 +1,41 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const { Image, HorizontalNavBar } = require('stremio/common');
+const { Image, HorizontalNavBar, VerticalNavBar } = require('stremio/common');
 const styles = require('./styles');
 
+const TABS = [
+    { id: 'board', label: 'Board', icon: 'home', href: '#/' },
+    { id: 'discover', label: 'Discover', icon: 'discover', href: '#/discover' },
+    { id: 'library', label: 'Library', icon: 'library', href: '#/library' },
+    { id: 'addons', label: 'ADDONS', icon: 'addons', href: '#/addons' },
+    { id: 'settings', label: 'SETTINGS', icon: 'settings', href: '#/settings' },
+];
+
 const NotFound = () => {
     return (
         <div className={styles['not-found-container']}>
             <HorizontalNavBar
-                className={styles['nav-bar']}
+                className={styles['nav-bar-horizontal']}
                 title={'Page not found'}
                 backButton={true}
                 fullscreenButton={true}
                 navMenu={true}
             />
-            <div className={styles['not-found-content']}>
-                <Image
-                    className={styles['not-found-image']}
-                    src={require('/images/empty.png')}
-                    alt={' '}
+            <div className={styles['not-found-vertical-window']}>
+                <VerticalNavBar
+                    className={styles['nav-bar-vertical']}
+                    selected={'board'}
+                    tabs={TABS}
                 />
-                <div className={styles['not-found-label']}>Page not found!</div>
+                <div className={styles['not-found-content']}>
+                    <Image
+                        className={styles['not-found-image']}
+                        src={require('/images/empty.png')}
+                        alt={' '}
+                    />
+                    <div className={styles['not-found-label']}>Page not found!</div>
+                </div>
             </div>
         </div>
     );

diff --git a/src/routes/NotFound/styles.less b/src/routes/NotFound/styles.less
@@ -3,15 +3,24 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .not-found-container {
-    display: flex;
-    flex-direction: column;
     width: 100%;
     height: 100%;
     background-color: transparent;
 
-    .nav-bar {
-        flex: none;
-        align-self: stretch;
+    .nav-bar-horizontal {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+    }
+    .nav-bar-vertical {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+    .not-found-vertical-window {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
     }
 
     .not-found-content {

diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
@@ -328,9 +328,13 @@
                             justify-content: center;
 
                             &.selectable {
+                                -webkit-user-select: text;
+                                -ms-user-select: none;
                                 user-select: text;
 
                                 .label {
+                                    -webkit-user-select: text;
+                                    -ms-user-select: none;
                                     user-select: text;
                                 }
                             }