diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index a9ed6b553..31d5ac28a 100644
--- a/src/routes/Board/Board.js
+++ b/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 = () => {
{
- streamingServer.settings !== null && streamingServer.settings.type === 'Err' ?
+ !streamingServerWarningDismissed ?
:
null
diff --git a/src/routes/Board/StreamingServerWarning/StreamingServerWarning.js b/src/routes/Board/StreamingServerWarning/StreamingServerWarning.js
deleted file mode 100644
index 61a70dff3..000000000
--- a/src/routes/Board/StreamingServerWarning/StreamingServerWarning.js
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-const { useServices } = require('stremio/services');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const { useTranslation } = require('react-i18next');
-const { Button } = require('stremio/components');
-const useProfile = require('stremio/common/useProfile');
-const { withCoreSuspender } = require('stremio/common/CoreSuspender');
-const styles = require('./styles');
-
-const StreamingServerWarning = ({ className }) => {
- const { t } = useTranslation();
- const { core } = useServices();
- const profile = useProfile();
- const onLaterClick = React.useCallback(() => {
- const streamingServerWarningDismissed = new Date();
- streamingServerWarningDismissed.setMonth(streamingServerWarningDismissed.getMonth() + 1);
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- streamingServerWarningDismissed
- }
- }
- });
- }, [profile.settings]);
- const onDismissClick = React.useCallback(() => {
- const streamingServerWarningDismissed = new Date();
- streamingServerWarningDismissed.setFullYear(streamingServerWarningDismissed.getFullYear() + 50);
- core.transport.dispatch({
- action: 'Ctx',
- args: {
- action: 'UpdateSettings',
- args: {
- ...profile.settings,
- streamingServerWarningDismissed
- }
- }
- });
- }, [profile.settings]);
-
- if (!isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
- profile.settings.streamingServerWarningDismissed.getTime() > Date.now()) {
- return null;
- }
-
- return (
-
- );
-};
-
-StreamingServerWarning.propTypes = {
- className: PropTypes.string
-};
-
-module.exports = withCoreSuspender(StreamingServerWarning);
diff --git a/src/routes/Board/StreamingServerWarning/StreamingServerWarning.less b/src/routes/Board/StreamingServerWarning/StreamingServerWarning.less
new file mode 100644
index 000000000..233e06c07
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/routes/Board/StreamingServerWarning/StreamingServerWarning.tsx b/src/routes/Board/StreamingServerWarning/StreamingServerWarning.tsx
new file mode 100644
index 000000000..7c9872c8b
--- /dev/null
+++ b/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 (
+
+
+ {t('SETTINGS_SERVER_UNAVAILABLE')}
+
+
+