mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-19 13:52:12 +00:00
video refactored
This commit is contained in:
svetlagasheva
parent
bbcf69975a
commit
08c1dcd6ee
4 changed files with 89 additions and 68 deletions
|
|
@ -16,9 +16,7 @@ const renderPoster = (poster) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={styles['poster-container']}>
|
||||
<div style={imageStyle} className={styles['poster']} />
|
||||
</div>
|
||||
<div style={imageStyle} className={styles['poster']} />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -64,6 +62,19 @@ const renderWatchedLabel = (isWatched) => {
|
|||
);
|
||||
}
|
||||
|
||||
const renderLabels = (isUpcoming, isWatched) => {
|
||||
if (!isWatched && !isUpcoming) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles['label-container']}>
|
||||
{renderUpcomingLabel(isUpcoming)}
|
||||
{renderWatchedLabel(isWatched)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const renderProgress = (progress) => {
|
||||
if (progress <= 0) {
|
||||
return null;
|
||||
|
|
@ -78,18 +89,13 @@ const renderProgress = (progress) => {
|
|||
|
||||
const Video = (props) => {
|
||||
return (
|
||||
<div onClick={props.onVideoClicked} className={classnames(styles['video-container'], { [styles['active']]: props.progress > 0 })}>
|
||||
<div onClick={props.onVideoClicked} className={classnames(styles['video-container'], { [styles['active']]: props.progress > 0 }, props.className)}>
|
||||
<div className={styles['flex-row-container']}>
|
||||
{renderPoster(props.poster)}
|
||||
<div className={styles['text-container']}>
|
||||
<div className={styles['text-content']}>
|
||||
{renderTitle(props.number, props.title)}
|
||||
{renderReleasedDate(props.released)}
|
||||
<div className={styles['label-container']}>
|
||||
{renderUpcomingLabel(props.isUpcoming)}
|
||||
{renderWatchedLabel(props.isWatched)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['info-container']}>
|
||||
{renderTitle(props.number, props.title)}
|
||||
{renderReleasedDate(props.released)}
|
||||
{renderLabels(props.isUpcoming, props.isWatched)}
|
||||
</div>
|
||||
<div className={styles['arrow-container']}>
|
||||
<Icon className={styles['arrow']} icon={'ic_arrow_left'} />
|
||||
|
|
@ -101,6 +107,7 @@ const Video = (props) => {
|
|||
}
|
||||
|
||||
Video.propTypes = {
|
||||
className: PropTypes.string,
|
||||
poster: PropTypes.string.isRequired,
|
||||
number: PropTypes.number.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
@import 'stremio-colors';
|
||||
|
||||
@video-width: 340px;
|
||||
@icon-width: round((@video-width * 0.14));
|
||||
@video-width: 360px;
|
||||
@spacing: min(8px, ceil((@video-width * 0.02)));
|
||||
@progress-height: 3px;
|
||||
|
||||
.video-container {
|
||||
width: @video-width;
|
||||
|
||||
.text-container {
|
||||
min-height: round((@video-width * 0.2));
|
||||
.poster {
|
||||
margin: @spacing 0 @spacing @spacing;
|
||||
}
|
||||
|
||||
.info-container {
|
||||
min-height: ceil((@video-width * 0.2));
|
||||
padding: @spacing;
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
|
|
@ -18,14 +23,23 @@
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
.watched-label, .upcoming-label {
|
||||
.upcoming-label, .watched-label {
|
||||
font-size: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.upcoming-label {
|
||||
margin-right: @spacing;
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
margin-bottom: (@spacing * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
width: @icon-width;
|
||||
width: floor((@video-width * 0.07));
|
||||
padding: @spacing @spacing @spacing 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
|
|
@ -34,65 +48,53 @@
|
|||
}
|
||||
|
||||
.video-container {
|
||||
margin: 10px; //remove
|
||||
background-color: @colorglass;
|
||||
|
||||
.flex-row-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.poster-container {
|
||||
.poster {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.poster {
|
||||
height: 70%;
|
||||
width: 90%;
|
||||
background-position: center;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
background-position: center;
|
||||
background-size: cover, auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
flex: 2;
|
||||
.info-container {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.text-content {
|
||||
margin: 2% 4%;
|
||||
.title {
|
||||
color: @colorwhite;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.title {
|
||||
.released-date {
|
||||
color: @colorwhite60;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
display: flex;
|
||||
|
||||
.upcoming-label, .watched-label {
|
||||
padding: 0 0.6em;
|
||||
font-weight: 600;
|
||||
color: @colorwhite;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.released-date {
|
||||
color: @colorwhite60;
|
||||
.upcoming-label {
|
||||
background-color: @colorsignal5;
|
||||
}
|
||||
|
||||
.label-container {
|
||||
display: flex;
|
||||
|
||||
.upcoming-label, .watched-label {
|
||||
padding: 0em 0.6em;
|
||||
font-weight: 600;
|
||||
color: @colorwhite;
|
||||
}
|
||||
|
||||
.upcoming-label {
|
||||
margin-right: 8%;
|
||||
background-color: @colorsignal5;
|
||||
}
|
||||
|
||||
.watched-label {
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
.watched-label {
|
||||
background-color: @colorprimlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,12 +102,9 @@
|
|||
.arrow-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: rotate(180deg);
|
||||
|
||||
.arrow {
|
||||
width: 30%;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
fill: @colorwhite60;
|
||||
}
|
||||
}
|
||||
|
|
@ -121,9 +120,6 @@
|
|||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.flex-row-container {
|
||||
background-color: @colorwhite20;
|
||||
}
|
||||
background-color: @colorwhite20;
|
||||
}
|
||||
}
|
||||
|
|
@ -218,13 +218,27 @@ storiesOf('UserPanel', module)
|
|||
));
|
||||
|
||||
storiesOf('Video', module)
|
||||
.add('poster-upcoming-watched-long-title', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'}
|
||||
number={2}
|
||||
title={'The Bing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis'}
|
||||
released={new Date(2018, 4, 23)}
|
||||
isUpcoming={true}
|
||||
isWatched={true}
|
||||
onVideoClicked={function() { alert(8) }}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
.add('poster-watched', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
poster={'https://www.nationalgeographic.com/content/dam/photography/rights-exempt/pod-archive-grid-wide.adapt.945.1.jpg'}
|
||||
number={2}
|
||||
title={'The Bing Bran Hypothesis'}
|
||||
duration={23}
|
||||
isWatched={true}
|
||||
onVideoClicked={function() { alert(8) }}
|
||||
/>
|
||||
|
|
@ -233,27 +247,28 @@ storiesOf('Video', module)
|
|||
.add('no-poster-progress', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
number={4}
|
||||
title={'The Luminous Fish Effect'}
|
||||
progress={50}
|
||||
duration={22}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
.add('poster-progress', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
poster={'5'}
|
||||
number={5}
|
||||
title={'The Dumpling Paradox'}
|
||||
progress={50}
|
||||
duration={22}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
.add('no-poster-upcoming', () => (
|
||||
<div style={storyStyle} className={appStyles['app']}>
|
||||
<Video
|
||||
className={styles['video']}
|
||||
number={8}
|
||||
title={'The Loobendfeld Decay'}
|
||||
released={new Date(2018, 4, 23)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
.checkbox-size {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.video {
|
||||
margin: 10px;
|
||||
}
|
||||
Loading…
Reference in a new issue