Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 22:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(StreamingServerWarning): convert to TS

Browse source
This commit is contained in:
Timothy Z. 2025-01-06 22:43:46 +02:00
parent 89b6526555
commit 3e36d7ad6a
8 changed files with 167 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/common/animations.less
View file

@ -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;
}
}

14
src/routes/Board/Board.js
View file

@ -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 = () => {
})}
</div>
</MainNavBars>
{
streamingServer.settings !== null && streamingServer.settings.type === 'Err' ?
<StreamingServerWarning className={styles['board-warning-container']} />
:
null
}
<Transition when={streamingServerWarningOpen} name={'slide-top'}>
<StreamingServerWarning className={styles['board-warning-container']} />
</Transition>
</div>
);
};

73
src/routes/Board/StreamingServerWarning/StreamingServerWarning.js
View file

@ -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 (
<div className={classnames(className, styles['warning-container'])}>
<div className={styles['warning-statement']}>{ t('SETTINGS_SERVER_UNAVAILABLE') }</div>
<a href="https://www.stremio.com/download-service" target="_blank" rel="noreferrer">
<Button className={styles['warning-button']} title={t('SERVICE_INSTALL')} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('SERVICE_INSTALL') }</div>
</Button>
</a>
<Button className={styles['warning-button']} title={t('WARNING_STREAMING_SERVER_LATER')} onClick={onLaterClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('WARNING_STREAMING_SERVER_LATER') }</div>
</Button>
<Button className={styles['warning-button']} title={t('DONT_SHOW_AGAIN')} onClick={onDismissClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('DONT_SHOW_AGAIN') }</div>
</Button>
</div>
);
};
StreamingServerWarning.propTypes = {
className: PropTypes.string
};
module.exports = withCoreSuspender(StreamingServerWarning);

93
src/routes/Board/StreamingServerWarning/StreamingServerWarning.tsx Normal file
View file

@ -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 (
<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);

5
src/routes/Board/StreamingServerWarning/index.js
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const StreamingServerWarning = require('./StreamingServerWarning');
module.exports = StreamingServerWarning;

5
src/routes/Board/StreamingServerWarning/index.ts Normal file
View file

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

62
src/routes/Board/StreamingServerWarning/styles.less
View file

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

2
src/routes/Board/styles.less
View file

@ -220,7 +220,7 @@
left: 0;
right: 0;
bottom: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0rem));
height: 4rem;
height: 6rem;
margin-bottom: 0rem;
}
}