Merge branch 'development' of https://github.com/Stremio/stremio-web …

…into feat/player-local-subtitles

package.json

@@ -1,7 +1,7 @@
 {
     "name": "stremio",
     "displayName": "Stremio",
-    "version": "5.0.0-beta.16",
+    "version": "5.0.0-beta.17",
     "author": "Smart Code OOD",
     "private": true,
     "license": "gpl-2.0",
@@ -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.4",
+        "@stremio/stremio-core-web": "0.48.5",
         "@stremio/stremio-icons": "5.4.1",
         "@stremio/stremio-video": "0.0.53",
         "a-color-picker": "1.2.1",

src/App/App.js

@@ -10,6 +10,7 @@ const { FileDropProvider, PlatformProvider, ToastProvider, TooltipProvider, CONS
 const ServicesToaster = require('./ServicesToaster');
 const DeepLinkHandler = require('./DeepLinkHandler');
 const SearchParamsHandler = require('./SearchParamsHandler');
+const { default: UpdaterBanner } = require('./UpdaterBanner');
 const ErrorDialog = require('./ErrorDialog');
 const withProtectedRoutes = require('./withProtectedRoutes');
 const routerViewsConfig = require('./routerViewsConfig');
@@ -169,6 +170,7 @@ const App = () => {
                                             <ServicesToaster />
                                             <DeepLinkHandler />
                                             <SearchParamsHandler />
+                                            <UpdaterBanner className={styles['updater-banner-container']} />
                                             <RouterWithProtectedRoutes
                                                 className={styles['router']}
                                                 viewsConfig={routerViewsConfig}

src/App/UpdaterBanner/UpdaterBanner.less

@@ -0,0 +1,46 @@
+.updater-banner {
+    height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 0 1rem;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--primary-foreground-color);
+    background-color: var(--primary-accent-color);
+
+    .button {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        height: 2.5rem;
+        padding: 0 1rem;
+        border-radius: var(--border-radius);
+        color: var(--primary-background-color);
+        background-color: var(--primary-foreground-color);
+        transition: all 0.1s ease-out;
+
+        &:hover {
+            color: var(--primary-foreground-color);
+            background-color: transparent;
+            box-shadow: inset 0 0 0 0.15rem var(--primary-foreground-color);
+        }
+    }
+
+    .close {
+        position: absolute;
+        right: 0;
+        height: 4rem;
+        width: 4rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+            height: 2rem;
+        }
+    }
+}

src/App/UpdaterBanner/UpdaterBanner.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import Icon from '@stremio/stremio-icons/react';
+import { useTranslation } from 'react-i18next';
+import { useServices } from 'stremio/services';
+import { useBinaryState, useShell } from 'stremio/common';
+import { Button, Transition } from 'stremio/components';
+import styles from './UpdaterBanner.less';
+
+type Props = {
+    className: string,
+};
+
+const UpdaterBanner = ({ className }: Props) => {
+    const { t } = useTranslation();
+    const { shell } = useServices();
+    const shellTransport = useShell();
+    const [visible, show, hide] = useBinaryState(false);
+
+    const onInstallClick = () => {
+        shellTransport.send('autoupdater-notif-clicked');
+    };
+
+    useEffect(() => {
+        shell.transport && shell.transport.on('autoupdater-show-notif', show);
+
+        return () => {
+            shell.transport && shell.transport.off('autoupdater-show-notif', show);
+        };
+    }, []);
+
+    return (
+        <div className={className}>
+            <Transition when={visible} name={'slide-up'}>
+                <div className={styles['updater-banner']}>
+                    <div className={styles['label']}>
+                        { t('UPDATER_TITLE') }
+                    </div>
+                    <Button className={styles['button']} onClick={onInstallClick}>
+                        { t('UPDATER_INSTALL_BUTTON') }
+                    </Button>
+                    <Button className={styles['close']} onClick={hide}>
+                        <Icon className={styles['icon']} name={'close'} />
+                    </Button>
+                </div>
+            </Transition>
+        </div>
+    );
+};
+
+export default UpdaterBanner;

src/App/UpdaterBanner/index.ts

@@ -0,0 +1,2 @@
+import UpdaterBanner from './UpdaterBanner';
+export default UpdaterBanner;

src/App/styles.less

@@ -23,8 +23,8 @@
 // HTML sizes
 @html-width: ~"calc(max(var(--small-viewport-width), var(--dynamic-viewport-width)))";
 @html-height: ~"calc(max(var(--small-viewport-height), var(--dynamic-viewport-height)))";
-@html-standalone-width: ~"calc(max(100%, var(--large-viewport-width)))";
-@html-standalone-height: ~"calc(max(100%, var(--large-viewport-height)))";
+@html-standalone-width: ~"calc(max(100%, var(--small-viewport-width)))";
+@html-standalone-height: ~"calc(max(100%, var(--small-viewport-height)))";
 
 // Safe area insets
 @safe-area-inset-top: env(safe-area-inset-top, 0rem);
@@ -64,7 +64,6 @@
     --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;
@@ -99,6 +98,10 @@
     @supports (height: 100lvh) and (height: 100svh) {
         --viewport-height-diff: calc(100lvh - 100svh);
     }
+
+    @media (display-mode: standalone) {
+        --safe-area-inset-bottom: @calculated-bottom-safe-inset;
+    }
 }
 
 * {
@@ -174,7 +177,7 @@ html {
                 position: absolute;
                 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));
+                bottom: calc(1.2 * var(--horizontal-nav-bar-size) + var(--safe-area-inset-bottom, 0rem));
                 left: auto;
                 z-index: 1;
                 padding: 0 calc(0.5 * var(--horizontal-nav-bar-size));
@@ -217,6 +220,14 @@ html {
                 }
             }
 
+            .updater-banner-container {
+                z-index: 1;
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+
             .router {
                 width: 100%;
                 height: 100%;

src/common/Platform/Platform.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { WHITELISTED_HOSTS } from 'stremio/common/CONSTANTS';
-import useShell from './useShell';
+import useShell from 'stremio/common/useShell';
 import { name, isMobile } from './device';
 
 interface PlatformContext {

src/common/animations.less

@@ -69,6 +69,19 @@
     transform: translateX(100%);
 }
 
+.slide-up-enter {
+    transform: translateY(100%);
+}
+
+.slide-up-active {
+    transform: translateY(0%);
+    transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
+}
+
+.slide-up-exit {
+    transform: translateY(100%);
+}
+
 @keyframes fade-in-no-motion {
     0% {
         opacity: 0;

src/common/index.js

@@ -20,6 +20,7 @@ const useModelState = require('./useModelState');
 const useNotifications = require('./useNotifications');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
+const { default: useShell } = require('./useShell');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
@@ -50,6 +51,7 @@ module.exports = {
     useNotifications,
     useOnScrollToBottom,
     useProfile,
+    useShell,
     useStreamingServer,
     useTorrent,
     useTranslate,

src/common/screen-sizes.less

@@ -21,5 +21,5 @@
 @small-phone-portrait: ~"screen and (max-width: @{small-phone-landscape-size}) and (max-height: @{small-phone-portrait-size}) and (orientation: portrait)";
 
 @phone-landscape: ~"screen and (max-width: @{phone-portrait-size}) and (max-height: @{phone-landscape-size}) and (orientation: landscape)";
-@phone-portrait: ~"screen and (max-width: @{phone-portrait-size}) and (max-height: @{phone-portrait-size}) and (orientation: portrait)";
+@phone-portrait: ~"screen and (max-width: @{phone-landscape-size}) and (max-height: @{phone-portrait-size}) and (orientation: portrait)";
 

src/components/BottomSheet/BottomSheet.less

@@ -101,7 +101,7 @@
 @media only screen and (orientation: landscape) {
     .bottom-sheet {
         .container {
-            max-width: 90%;
+            max-width: calc(90% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
         }
     }
 }

src/components/ColorInput/ColorInput.js

@@ -5,7 +5,8 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const AColorPicker = require('a-color-picker');
 const { useTranslation } = require('react-i18next');
-const { Button, ModalDialog } = require('stremio/components');
+const { Button } = require('stremio/components');
+const ModalDialog = require('stremio/components/ModalDialog');
 const useBinaryState = require('stremio/common/useBinaryState');
 const ColorPicker = require('./ColorPicker');
 const styles = require('./styles');

src/components/MainNavBars/MainNavBars.less

@@ -6,9 +6,9 @@
     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));
+    margin-left: var(--safe-area-inset-left);
+    margin-right: var(--safe-area-inset-right);
+    width: calc(100% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
     height: 100%;
 
     .horizontal-nav-bar {
@@ -22,14 +22,14 @@
     .vertical-nav-bar {
         position: absolute;
         top: var(--horizontal-nav-bar-size);
-        bottom: var(--calculated-bottom-safe-inset);
+        bottom: 0;
         left: 0;
         z-index: 1;
     }
 
     .nav-content-container {
         position: absolute;
-        padding-top: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
+        padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
         top: 0;
         right: 0;
         bottom: 0;

src/routes/Addons/styles.less

@@ -22,7 +22,7 @@
 }
 
 .addons-container {
-    height: 100%;
+    height: calc(100% - var(--safe-area-inset-bottom));
     background-color: transparent;
 
     .addons-content {

src/routes/Board/Board.js

@@ -4,12 +4,12 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { useStreamingServer, useNotifications, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { useStreamingServer, useNotifications, withCoreSuspender, getVisibleChildrenRange, useProfile } = require('stremio/common');
 const { ContinueWatchingItem, EventModal, MainNavBars, MetaItem, MetaRow } = require('stremio/components');
-const StreamingServerWarning = require('./StreamingServerWarning');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
+const { default: StreamingServerWarning } = require('./StreamingServerWarning');
 
 const THRESHOLD = 5;
 
@@ -19,8 +19,15 @@ const Board = () => {
     const continueWatchingPreview = useContinueWatchingPreview();
     const [board, loadBoardRows] = useBoard();
     const notifications = useNotifications();
+    const profile = useProfile();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
+    const streamingServerWarningDismissed = React.useMemo(() => {
+        return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || (
+            !isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
+            profile.settings.streamingServerWarningDismissed.getTime() > Date.now()
+        );
+    }, [profile.settings, streamingServer.settings]);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
@@ -95,7 +102,7 @@ const Board = () => {
                 </div>
             </MainNavBars>
             {
-                streamingServer.settings !== null && streamingServer.settings.type === 'Err' ?
+                !streamingServerWarningDismissed ?
                     <StreamingServerWarning className={styles['board-warning-container']} />
                     :
                     null