);
}
+const getClassName = (poster, progress) => {
+ if (poster.length > 0 && !progress) return 'with-poster';
+ if (progress && poster.length === 0) return 'with-progress';
+ if (poster.length > 0 && progress) return 'with-poster-progress';
+ return 'video';
+}
+
const Video = (props) => {
return (
-
0 && props.progress ? 'flex' : null }} className={styles['video']}>
+
0 ? '10px 10px' : '10px 16px' }} className={styles[getClassName(props.poster, props.progress)]}>
{renderPoster(props.poster)}
-
-
- {renderNumber(props.number)}
- {renderName(props.name)}
-
- {renderDuration(props.duration)}
- {renderReleasedDate(props.released)}
- {renderWatched(props.isWatched)}
- {renderUpcoming(props.isUpcoming)}
- {renderProgress(props.poster, props.progress)}
-
+ {renderNumber(props.number)}
+ {renderName(props.name)}
+ {renderDuration(props.duration)}
+ {renderReleasedDate(props.released)}
+ {renderLabel(props.isWatched, props.isUpcoming)}
+ {renderProgress(props.progress)}
);
}
diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less
index fd9557504..8684b0e73 100644
--- a/src/common/Video/styles.less
+++ b/src/common/Video/styles.less
@@ -1,73 +1,89 @@
@import 'stremio-colors';
-
-.video {
- height: 62px;
+.with-poster, .with-progress, .with-poster-progress, .video {
width: 340px;
- display: flex;
- padding: 10px 10px;
+ display: grid;
+ font-size: 12px;
+ color: @colorwhite;
background-color: @colorblack20;
-
.poster {
- margin-right: 10px;
+ grid-area: poster;
background-position: center;
background-size: cover, auto;
background-repeat: no-repeat;
}
-
- .video-container {
- width: 240px;
- color: @colorwhite;
-
- .main-info {
- font-size: 12px;
-
- .number {
- margin-right: 6px;
- }
-
- .name {
- overflow: hidden;
- white-space: pre;
- text-overflow: ellipsis;
- }
- }
-
- .duration, .released-date {
- font-size: 11px;
- padding-left: 1px;
- margin-right: 10px;
- color: @colorwhite60;
- }
-
- .progress-container {
- background-color: @colorwhite20;
-
- .progress {
- height: 3px;
- margin-top: 2px;
- border-radius: 1px;
- background-color: @colorprimlight;
- }
- }
-
+ .number {
+ grid-area: number;
+ }
+ .name {
+ grid-area: name;
+ overflow: hidden;
+ white-space: pre;
+ text-overflow: ellipsis;
+ }
+ .duration, .released-date {
+ grid-area: time;
+ font-size: 11px;
+ color: @colorwhite60;
+ }
+ .label-container {
+ grid-area: label;
.watched-label, .upcoming-label {
+ grid-area: label;
font-weight: 600;
font-size: 10px;
padding: 1px 6px;
border-radius: 2px;
}
-
.watched-label {
background-color: @colorprimlight;
}
-
.upcoming-label {
background-color: @colorsignal5;
}
}
-
+ .progress-container {
+ grid-area: progress;
+ background-color: @colorwhite20;
+ .progress {
+ height: 3px;
+ border-radius: 1px;
+ background-color: @colorprimlight;
+ }
+ }
&:hover, &:focus {
cursor: pointer;
background-color: @colorwhite20;
}
+}
+.with-poster {
+ grid-template-columns: 70px 10px 1px 15px 28px 196px;
+ grid-template-rows: 18px 24px;
+ grid-template-areas:
+ "poster . number number name name"
+ "poster . . time time label";
+}
+.with-progress {
+ background-color: @colorblack40;
+ grid-template-columns: 1px 15px 278px 14px;
+ grid-template-rows: 18px 19px 3px 2px;
+ grid-template-areas:
+ "number number name"
+ ". time time"
+ "progress progress progress";
+}
+.with-poster-progress {
+ background-color: @colorblack40;
+ grid-template-columns: 70px 10px 1px 15px 204px 20px;
+ grid-template-rows: 18px 19px 3px 2px;
+ grid-template-areas:
+ "poster . number number name"
+ "poster . . time time"
+ "poster . progress progress progress";
+}
+.video {
+ grid-template-columns: 1px 15px 28px 264px;
+ grid-template-rows: 18px 24px;
+ grid-template-areas:
+ "number number name name"
+ ". time time label";
}
\ No newline at end of file
diff --git a/stories/index.stories.js b/stories/index.stories.js
index 20a7fe0ff..da3df8622 100644
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@@ -1,83 +1,80 @@
import React from 'react';
-import styles from '../src/app/styles';
-
import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
+import appStyles from '../src/app/styles';
+import styles from './styles';
storiesOf('Addon', module)
- .add('addon', () => (
-
- ));
+ .add('addon', () => (
+
+ ));
storiesOf('Checkbox', module)
- .add('checkbox', () => (
-
-
-
-
-
-
- ))
+ .add('checkbox', () => (
+
+
+
+
+
+
+ ))
storiesOf('LibraryItemList', module)
- .add('library item list', () => (
-
-
-
-
-
-
- ));
+ .add('library item list', () => (
+
+
+
+
+
+
+ ));
storiesOf('MetaItem', module)
- .add('meta item', () => (
-
-
-
-
-
-
- ));
+ .add('meta item', () => (
+
+
+
+
+
+
+ ));
storiesOf('ShareAddon', module)
- .add('share addon', () => (
-
-
-
- ));
+ .add('share addon', () => (
+
+
+
+ ));
storiesOf('Stream', module)
- .add('stream', () => (
-
-
-
-
-
-
-
- ));
+ .add('stream', () => (
+
+
+
+
+
+
+
+ ));
storiesOf('UserPanel', module)
- .add('user panel', () => (
-
-
-
- ));
+ .add('user panel', () => (
+
+
+
+ ));
storiesOf('Video', module)
- .add('video', () => (
-
-
-
-
-
-
- ));
\ No newline at end of file
+ .add('video', () => (
+
+
+
+
+
+
+ ));
\ No newline at end of file
diff --git a/stories/styles.less b/stories/styles.less
new file mode 100644
index 000000000..9a2987fe9
--- /dev/null
+++ b/stories/styles.less
@@ -0,0 +1,4 @@
+.checkbox-size {
+ height: 16px;
+ width: 16px;
+}
\ No newline at end of file