diff --git a/src/common/animations.less b/src/common/animations.less
index 6ca879343..00653433d 100644
--- a/src/common/animations.less
+++ b/src/common/animations.less
@@ -51,4 +51,35 @@
.slide-left-exit {
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;
+ }
+
+ 40% {
+ opacity: 0;
+ }
+
+ 70% {
+ opacity: 0.6;
+ }
+
+ 100% {
+ opacity: 1;
+ }
}
\ No newline at end of file
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index a9ed6b553..d405ece67 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -5,11 +5,11 @@ const classnames = require('classnames');
const debounce = require('lodash.debounce');
const { useTranslation } = require('react-i18next');
const { useStreamingServer, useNotifications, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
-const { ContinueWatchingItem, EventModal, MainNavBars, MetaItem, MetaRow } = require('stremio/components');
-const StreamingServerWarning = require('./StreamingServerWarning');
+const { ContinueWatchingItem, EventModal, MainNavBars, MetaItem, MetaRow, Transition } = require('stremio/components');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
const styles = require('./styles');
+const { default: StreamingServerWarning } = require('./StreamingServerWarning');
const THRESHOLD = 5;
@@ -21,6 +21,7 @@ const Board = () => {
const notifications = useNotifications();
const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
const scrollContainerRef = React.useRef();
+ const streamingServerWarningOpen = React.useMemo(() => streamingServer.settings !== null && streamingServer.settings.type === 'Err', [streamingServer.settings]);
const onVisibleRangeChange = React.useCallback(() => {
const range = getVisibleChildrenRange(scrollContainerRef.current);
if (range === null) {
@@ -94,12 +95,9 @@ const Board = () => {
})}
- {
- streamingServer.settings !== null && streamingServer.settings.type === 'Err' ?
-
- :
- 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.tsx b/src/routes/Board/StreamingServerWarning/StreamingServerWarning.tsx
new file mode 100644
index 000000000..5b2218bf0
--- /dev/null
+++ b/src/routes/Board/StreamingServerWarning/StreamingServerWarning.tsx
@@ -0,0 +1,93 @@
+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 './styles.less';
+
+type Props = {
+ className?: string;
+};
+
+const StreamingServerWarning = ({ className }: Props) => {
+ const { t } = useTranslation();
+ const { core } = useServices();
+ const profile = useProfile();
+
+ const createDate = (months: number, years: number): Date => {
+ const date = new Date();
+ if (months) date.setMonth(date.getMonth() + months);
+ if (years) date.setFullYear(date.getFullYear() + years);
+ return date;
+ };
+
+ const updateSettings = useCallback((warningDismissed: Date) => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...profile.settings,
+ warningDismissed
+ }
+ }
+ });
+ }, [profile.settings]);
+
+ const onLater = useCallback(() => {
+ updateSettings(createDate(1, 0));
+ }, [updateSettings]);
+
+ const onDismiss = useCallback(() => {
+ updateSettings(createDate(0, 50));
+ }, [updateSettings]);
+
+ return (
+
+
+ {t('SETTINGS_SERVER_UNAVAILABLE')}
+
+
+