feat: implement shell updater banner

src/App/App.js

@@ -10,6 +10,7 @@ const { PlatformProvider, ToastProvider, TooltipProvider, CONSTANTS, withCoreSus
 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');
@@ -168,6 +169,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,39 @@
+.updater-banner {
+    height: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--primary-foreground-color);
+    background-color: var(--primary-accent-color);
+
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 0.75rem;
+
+        .button {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            height: 2.75rem;
+            padding: 0 1rem;
+            border-radius: var(--border-radius);
+            transition: all 0.1s ease-out;
+
+            &.suggested {
+                color: var(--primary-background-color);
+                background-color: var(--primary-foreground-color);
+            }
+
+            &:hover {
+                color: var(--primary-foreground-color);
+                background-color: transparent;
+                box-shadow: inset 0 0 0 0.15rem var(--primary-foreground-color);
+            }
+        }
+    }
+}

src/App/UpdaterBanner/UpdaterBanner.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect } from 'react';
+import { useServices } from 'stremio/services';
+import { useBinaryState } from 'stremio/common';
+import { Button, Transition } from 'stremio/components';
+import styles from './UpdaterBanner.less';
+import classNames from 'classnames';
+
+type Props = {
+    className: string,
+};
+
+const UpdaterBanner = ({ className }: Props) => {
+    const { shell } = useServices();
+    const [visible, show, hide] = useBinaryState(false);
+
+    const onInstallClick = () => {
+        shell.transport && shell.transport.send('autoupdater-notif-clicked');
+    };
+
+    useEffect(() => {
+        shell.on('autoupdater-show-notif', show);
+
+        return () => {
+            shell.off('autoupdater-show-notif', show);
+        };
+    });
+
+    return (
+        <div className={className}>
+            <Transition when={visible} name={'slide-up'}>
+                <div className={styles['updater-banner']}>
+                    <div className={styles['label']}>
+                        A new version of Stremio is available
+                    </div>
+                    <div className={styles['buttons']}>
+                        <Button className={styles['button']} onClick={hide}>
+                            Dismiss
+                        </Button>
+                        <Button className={classNames(styles['button'], styles['suggested'])} onClick={onInstallClick}>
+                            Install now
+                        </Button>
+                    </div>
+                </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

@@ -208,6 +208,14 @@ html {
                 }
             }
 
+            .updater-banner-container {
+                z-index: 1;
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+
             .router {
                 width: 100%;
                 height: 100%;

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;