Board: update the style of the streaming server warning

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 === 'Err' &&
+            !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

src/routes/Board/StreamingServerWarning/StreamingServerWarning.less

@@ -0,0 +1,61 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.warning-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1rem;
+    background-color: @color-accent5-dark3;
+    border-radius: 0.5rem;
+    box-shadow: 0rem 0.25rem 1rem rgba(0, 0, 0, 0.48), 0rem 0.5rem 3rem rgba(0, 0, 0, 0.64);
+
+    .warning-statement {
+        flex: 1;
+        font-size: 1.2rem;
+        max-height: 2.4em;
+        color: @color-surface-light5-90;
+    }
+
+    .actions {
+        display: flex;
+        gap: 1rem;
+
+        .action {
+            flex: none;
+            padding: 0.5rem 1rem;
+            color: @color-surface-light5-90;
+            background-color: rgba(0, 0, 0, 0.24);
+            border-radius: var(--border-radius);
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            .label {
+                font-size: 1.2rem;
+                color: @color-surface-light5-90;
+            }
+
+            &:hover {
+                .label {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: @minimum) {
+    .warning-container {
+        flex-direction: column;
+        text-align: center;
+        padding: 1rem 0.5rem;
+
+        .actions {
+            justify-content: space-around;
+        }
+    }
+}

src/routes/Board/StreamingServerWarning/StreamingServerWarning.tsx

@@ -0,0 +1,101 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import classnames from 'classnames';
+import { useServices } from 'stremio/services';
+import { Button } from 'stremio/components';
+import useProfile from 'stremio/common/useProfile';
+import { withCoreSuspender } from 'stremio/common/CoreSuspender';
+import styles from './StreamingServerWarning.less';
+
+type Props = {
+    className?: string;
+};
+
+const StreamingServerWarning = ({ className }: Props) => {
+    const { t } = useTranslation();
+    const { core } = useServices();
+    const profile = useProfile();
+
+    const createDismissalDate = (months: number, years = 0): Date => {
+        const dismissalDate = new Date();
+
+        if (months) {
+            dismissalDate.setMonth(dismissalDate.getMonth() + months);
+        }
+        if (years) {
+            dismissalDate.setFullYear(dismissalDate.getFullYear() + years);
+        }
+
+        return dismissalDate;
+    };
+
+    const updateSettings = useCallback((streamingServerWarningDismissed: Date) => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'UpdateSettings',
+                args: {
+                    ...profile.settings,
+                    streamingServerWarningDismissed
+                }
+            }
+        });
+    }, [profile.settings]);
+
+    const onLater = useCallback(() => {
+        updateSettings(createDismissalDate(1));
+    }, [updateSettings]);
+
+    const onDismiss = useCallback(() => {
+        updateSettings(createDismissalDate(0, 50));
+    }, [updateSettings]);
+
+    return (
+        <div className={classnames(className, styles['warning-container'])}>
+            <div className={styles['warning-statement']}>
+                {t('SETTINGS_SERVER_UNAVAILABLE')}
+            </div>
+            <div className={styles['actions']}>
+                <a
+                    href='https://www.stremio.com/download-service'
+                    target='_blank'
+                    rel='noreferrer'
+                >
+                    <Button
+                        className={styles['action']}
+                        title={t('SERVICE_INSTALL')}
+                        tabIndex={-1}
+                    >
+                        <div className={styles['label']}>
+                            {t('SERVICE_INSTALL')}
+                        </div>
+                    </Button>
+                </a>
+                <Button
+                    className={styles['action']}
+                    title={t('WARNING_STREAMING_SERVER_LATER')}
+                    onClick={onLater}
+                    tabIndex={-1}
+                >
+                    <div className={styles['label']}>
+                        {t('WARNING_STREAMING_SERVER_LATER')}
+                    </div>
+                </Button>
+                <Button
+                    className={styles['action']}
+                    title={t('DONT_SHOW_AGAIN')}
+                    onClick={onDismiss}
+                    tabIndex={-1}
+                >
+                    <div className={styles['label']}>
+                        {t('DONT_SHOW_AGAIN')}
+                    </div>
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default withCoreSuspender(StreamingServerWarning);

src/routes/Board/StreamingServerWarning/index.ts

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import StreamingServerWarning from './StreamingServerWarning';
+
+export default StreamingServerWarning;

src/routes/Board/styles.less

@@ -36,9 +36,10 @@
     }
 
     .board-warning-container {
-        flex: none;
-        align-self: stretch;
-        margin-bottom: var(--calculated-bottom-safe-inset, 0rem);
+        position: absolute;
+        bottom: 0.5rem;
+        left: 0.5rem;
+        right: 0.5rem;
     }
 }
 
@@ -216,12 +217,8 @@
         }
 
         .board-warning-container {
-            position: absolute;
-            left: 0;
-            right: 0;
             bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem));
-            height: 4rem;
-            margin-bottom: 0rem;
+            height: 7rem;
         }
     }
 }