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

refactor(Player): move error to component

Browse source
This commit is contained in:
Tim 2023-12-06 12:54:08 +01:00
parent b5d259df29
commit 8ecca49b00
5 changed files with 119 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/routes/Player/Error/Error.js Normal file
View file

@ -0,0 +1,43 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const { useTranslation } = require('react-i18next');
const PropTypes = require('prop-types');
const classNames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const Error = ({ className, code, message, stream }) => {
const { t } = useTranslation();
return (
<div className={classNames(className, styles['error'])}>
<div className={styles['error-label']} title={message}>{message}</div>
{
code === 2 ?
<div className={styles['error-sub']} title={t('EXTERNAL_PLAYER_HINT')}>{t('EXTERNAL_PLAYER_HINT')}</div>
:
null
}
{
stream !== null ?
<Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={stream.deepLinks.externalPlayer.href} download={stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
<Icon className={styles['icon']} name={'ic_downloads'} />
<div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button>
:
null
}
</div>
);
};
Error.propTypes = {
className: PropTypes.string,
code: PropTypes.number,
message: PropTypes.string,
stream: PropTypes.object,
};
module.exports = Error;

5
src/routes/Player/Error/index.js Normal file
View file

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

64
src/routes/Player/Error/styles.less Normal file
View file

@ -0,0 +1,64 @@
// Copyright (C) 2017-2023 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 1);
.error-label {
flex: 0 1 auto;
padding: 0 8rem;
max-height: 4.8em;
font-size: 2rem;
color: var(--primary-foreground-color);
text-align: center;
}
.error-sub {
flex: 0 1 auto;
padding: 0 2rem;
max-height: 4.8em;
font-size: 1.3rem;
margin-top: 0.8rem;
color: var(--primary-foreground-color);
text-align: center;
}
.playlist-button {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
border-radius: 3.5rem;
margin-top: 1.5rem;
padding: 0 2rem;
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
}
.label {
flex: 1;
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
color: var(--primary-foreground-color);
text-align: center;
}
}
}

27
src/routes/Player/Player.js
View file

@ -8,9 +8,9 @@ const langs = require('langs');
const { useTranslation } = require('react-i18next');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { HorizontalNavBar, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
const BufferingLoader = require('./BufferingLoader');
const Error = require('./Error');
const ControlBar = require('./ControlBar');
const NextVideoPopup = require('./NextVideoPopup');
const StatisticsMenu = require('./StatisticsMenu');
@ -622,24 +622,11 @@ const Player = ({ urlParams, queryParams }) => {
/>
{
error !== null ?
<div className={classnames(styles['layer'], styles['error-layer'])}>
<div className={styles['error-label']} title={error.message}>{error.message}</div>
{
error.code === 2 ?
<div className={styles['error-sub']} title={t('EXTERNAL_PLAYER_HINT')}>{t('EXTERNAL_PLAYER_HINT')}</div>
:
null
}
{
player.selected !== null ?
<Button className={styles['playlist-button']} title={t('PLAYER_OPEN_IN_EXTERNAL')} href={player.selected.stream.deepLinks.externalPlayer.href} download={player.selected.stream.deepLinks.externalPlayer.fileName} target={'_blank'}>
<Icon className={styles['icon']} name={'ic_downloads'} />
<div className={styles['label']}>{t('PLAYER_OPEN_IN_EXTERNAL')}</div>
</Button>
:
null
}
</div>
<Error
className={styles['layer']}
stream={video.state.stream}
{...error}
/>
:
null
}

61
src/routes/Player/styles.less
View file

@ -40,67 +40,6 @@ html:not(.active-slider-within) {
bottom: 0;
z-index: 0;
&.error-layer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: @background-color;
.error-label {
flex: 0 1 auto;
padding: 0 8rem;
max-height: 4.8em;
font-size: 2rem;
color: var(--primary-foreground-color);
text-align: center;
}
.error-sub {
flex: 0 1 auto;
padding: 0 2rem;
max-height: 4.8em;
font-size: 1.3rem;
margin-top: 0.8rem;
color: var(--primary-foreground-color);
text-align: center;
}
.playlist-button {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
height: 3.5rem;
border-radius: 3.5rem;
margin-top: 1.5rem;
padding: 0 2rem;
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
}
.label {
flex: 1;
max-height: 2.4em;
font-size: 1.1rem;
font-weight: 500;
color: var(--primary-foreground-color);
text-align: center;
}
}
}
&.nav-bar-layer {
bottom: initial;
background: transparent;