mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-19 09:42:13 +00:00
stream refactored
This commit is contained in:
svetlagasheva
parent
84ba55b717
commit
0788b9a2d5
4 changed files with 62 additions and 45 deletions
|
|
@ -4,15 +4,21 @@ import classnames from 'classnames';
|
|||
import Icon from 'stremio-icons/dom';
|
||||
import styles from './styles';
|
||||
|
||||
const MAX_SOURCE_NAME_SYMBOLS = 100;
|
||||
const MAX_TITLE_SYMBOLS = 500;
|
||||
const MAX_SUBTITLE_SYMBOLS = 500;
|
||||
|
||||
const renderLogo = (logo, sourceName) => {
|
||||
if (logo) {
|
||||
return (
|
||||
<Icon className={styles['logo']} icon={logo} />
|
||||
<div className={styles['logo-container']}>
|
||||
<Icon className={styles['logo']} icon={logo} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['source-name']}>{sourceName}</div>
|
||||
<div className={styles['source-name']}>{sourceName.length > MAX_SOURCE_NAME_SYMBOLS ? sourceName.slice(0, MAX_SOURCE_NAME_SYMBOLS) + '...' : sourceName}</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -22,14 +28,14 @@ const renderTitle = (title) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={styles['title']}>{title}</div>
|
||||
<div className={styles['title']}>{title.length > MAX_TITLE_SYMBOLS ? title.slice(0, MAX_TITLE_SYMBOLS) + '...' : title}</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderSubtitle = (subtitle) => {
|
||||
if (subtitle) {
|
||||
return (
|
||||
<div className={styles['subtitle']}>{subtitle}</div>
|
||||
<div className={styles['subtitle']}>{subtitle.length > MAX_SUBTITLE_SYMBOLS ? subtitle.slice(0, MAX_SUBTITLE_SYMBOLS) + '...' : subtitle}</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
|
@ -49,7 +55,7 @@ const renderProgress = (progress) => {
|
|||
|
||||
const Stream = (props) => {
|
||||
return (
|
||||
<div onClick={props.play} className={classnames(styles['stream-container'], { [styles['active']]: props.progress })}>
|
||||
<div onClick={props.onClick} className={classnames(styles['stream-container'], props.className)}>
|
||||
<div className={styles['flex-row-container']}>
|
||||
{renderLogo(props.logo, props.sourceName)}
|
||||
<div className={styles['text-container']}>
|
||||
|
|
@ -66,12 +72,13 @@ const Stream = (props) => {
|
|||
}
|
||||
|
||||
Stream.propTypes = {
|
||||
className: PropTypes.string,
|
||||
logo: PropTypes.string.isRequired,
|
||||
sourceName: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
progress: PropTypes.number.isRequired,
|
||||
play: PropTypes.func
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
Stream.defaultProps = {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
@stream-width: 340px;
|
||||
@play-width: ceil((@stream-width * 0.13));
|
||||
@progress-height: 3px;
|
||||
@stream-width: 360px;
|
||||
@spacing: min(12px, ceil((@stream-width * 0.04)));
|
||||
@progress-height: 5px;
|
||||
|
||||
.stream-container {
|
||||
width: @stream-width;
|
||||
|
||||
.logo-container {
|
||||
margin: @spacing 0 @spacing @spacing;
|
||||
}
|
||||
|
||||
.source-name {
|
||||
font-size: 13px;
|
||||
margin: @spacing 0 @spacing @spacing;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
min-height: round((@stream-width * 0.2));
|
||||
line-height: 15px;
|
||||
min-height: ceil((@stream-width * 0.16));
|
||||
padding: @spacing;
|
||||
|
||||
.title {
|
||||
font-size: 11px;
|
||||
|
|
@ -22,10 +27,15 @@
|
|||
.subtitle {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
:not(:last-child) {
|
||||
margin-bottom: (@spacing * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.play-container {
|
||||
height: @play-width;
|
||||
width: floor((@stream-width * 0.08));
|
||||
padding: @spacing @spacing @spacing 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
|
|
@ -34,31 +44,31 @@
|
|||
}
|
||||
|
||||
.stream-container {
|
||||
margin: 10px; //remove
|
||||
background-color: @colorblack20;
|
||||
|
||||
&.active {
|
||||
background-color: @colorblack40;
|
||||
}
|
||||
background-color: @colorglass;
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
|
||||
.logo {
|
||||
.logo-container {
|
||||
flex: 1;
|
||||
margin: 0% 5%;
|
||||
fill: @colorwhite;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.source-name {
|
||||
flex: 1;
|
||||
margin: 0% 5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @colorwhite;
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
|
|
@ -66,7 +76,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2% 0%;
|
||||
|
||||
.title {
|
||||
color: @colorwhite;
|
||||
|
|
@ -80,23 +89,20 @@
|
|||
}
|
||||
|
||||
.play-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 38%;
|
||||
height: 38%;
|
||||
margin: auto;
|
||||
fill: @colorwhite60;
|
||||
width: 100%;
|
||||
fill: @colorwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
background-color: @colorneutral;
|
||||
background-color: @colorprim;
|
||||
|
||||
.progress {
|
||||
height: @progress-height;
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,6 +164,7 @@ storiesOf('Stream', module)
|
|||
.add('no-logo-title', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Stream
|
||||
className={styles['stream']}
|
||||
sourceName={'Amazon'}
|
||||
title={'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1'}
|
||||
/>
|
||||
|
|
@ -172,6 +173,7 @@ storiesOf('Stream', module)
|
|||
.add('no-logo-subtitle', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Stream
|
||||
className={styles['stream']}
|
||||
sourceName={'iTunes'}
|
||||
subtitle={'Aasdasd dsasa sad.'}
|
||||
/>
|
||||
|
|
@ -180,28 +182,30 @@ storiesOf('Stream', module)
|
|||
.add('logo-progress', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Stream
|
||||
play={function() { alert(122) }}
|
||||
className={styles['stream']}
|
||||
onClick={function() { alert(122) }}
|
||||
progress={40}
|
||||
logo={'ic_itunes'}
|
||||
title={'$1.99 purchase SD,$2.99 purchase HD'}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
.add('logo-free', () => (
|
||||
.add('long-source-name', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Stream
|
||||
logo={'ic_amazon'}
|
||||
title={'HDTV'}
|
||||
isFree={true}
|
||||
className={styles['stream']}
|
||||
sourceName={'Amazon amazonamazon amazonamazonamazon amazonamazonamazonamazon amazonamazonamazon amazonamazon amazon'}
|
||||
title={'SD'}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
.add('no-logo-subscription', () => (
|
||||
.add('long-title-subtitle', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Stream
|
||||
sourceName={'Amazon'}
|
||||
title={'SD'}
|
||||
isSubscription={true}
|
||||
className={styles['stream']}
|
||||
sourceName={'iTunes'}
|
||||
title={'This is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title istitle is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title is title'}
|
||||
subtitle={'This is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle issubtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle is subtitle'}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@
|
|||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.video {
|
||||
.video, .stream {
|
||||
margin: 10px;
|
||||
}
|
||||
Loading…
Reference in a new issue