150 ? { overflowY: 'scroll', height: 36 } : null} className={styles['description']}>{description}
+ 150 ? { overflow: 'auto', height: 36 } : null} className={styles['description']}>{description}
);
}
const renderUrls = (urls) => {
- if(!urls) {
+ if(urls.length === 0) {
return null;
}
return (
-
+
{urls.map((url) => {
return (
{url}
@@ -68,10 +68,12 @@ const Addon = (props) => {
- {renderName(props.name)}
- {renderVersion(props.version)}
- {renderType(props.types)}
- {renderDescription(props.description)}
+
+ {renderName(props.name)}
+ {renderVersion(props.version)}
+ {renderType(props.types)}
+ {renderDescription(props.description)}
+
{renderUrls(props.urls)}
@@ -91,7 +93,7 @@ Addon.propTypes = {
version: PropTypes.string.isRequired,
types: PropTypes.array.isRequired,
description: PropTypes.string.isRequired,
- urls: PropTypes.arrayOf(PropTypes.string),
+ urls: PropTypes.arrayOf(PropTypes.string).isRequired,
isInstalled: PropTypes.bool.isRequired,
shareAddon: PropTypes.func,
onToggleClicked: PropTypes.func
@@ -102,6 +104,7 @@ Addon.defaultProps = {
version: '',
types: [],
description: '',
+ urls: [],
isInstalled: false
};
diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less
index 2d45b9612..618d423f7 100644
--- a/src/common/Addon/styles.less
+++ b/src/common/Addon/styles.less
@@ -8,11 +8,11 @@
background-color: @colorglass;
.info-container {
height: 80px;
+ display: flex;
margin-bottom: 26px;
.logo-container {
width: 80px;
height: 80px;
- float: left;
display: flex;
margin-right: 14px;
background-color: @colordarkest;
@@ -22,22 +22,25 @@
fill: @colorwhite;
}
}
- .name {
- font-size: 20px;
- margin-right: 10px;
- }
- .version {
- margin-right: 10px;
- color: @colorwhite60;
- }
- .type {
- color: @coloraccent;
- }
- .type, .description {
- margin-top: 2px;
+ .info {
+ width: 420px;
+ .name {
+ font-size: 20px;
+ margin-right: 10px;
+ }
+ .version {
+ margin-right: 10px;
+ color: @colorwhite60;
+ }
+ .type {
+ color: @coloraccent;
+ }
+ .type, .description {
+ margin-top: 2px;
+ }
}
}
- .urls {
+ .urls-container {
display: flex;
flex-direction: column;
.url {
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index b5d2ac5d4..30d1e4f71 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -97,10 +97,10 @@ const renderReleaseInfo = (releaseInfo) => {
);
}
-const renderIcon = (showInfo, progress) => {
+const renderIcon = (onItemClicked, progress) => {
if (progress > 0) {
return (
-
+
);
@@ -135,7 +135,7 @@ const MetaItem = (props) => {
{renderTitle(props.title)}
{renderReleaseInfo(props.releaseInfo)}
- {renderIcon(props.showInfo, props.progress)}
+ {renderIcon(props.onItemClicked, props.progress)}
-
+
{renderEmail(props.email)}
Log out
@@ -33,36 +33,36 @@ const UserPanel = (props) => {
Fullscreen mode
);
}
UserPanel.propTypes = {
- photo: PropTypes.string.isRequired,
+ avatar: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
logout: PropTypes.func,
resizeWindow: PropTypes.func,
playMagnetLink: PropTypes.func,
};
UserPanel.defaultProps = {
- photo: '',
+ avatar: '',
email: ''
};
diff --git a/src/common/Video/Video.js b/src/common/Video/Video.js
index 19f55e9ea..c501b1fde 100644
--- a/src/common/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -5,6 +5,10 @@ import colors from 'stremio-colors';
import styles from './styles';
const renderPoster = (poster) => {
+ if (poster.length === 0) {
+ return null;
+ }
+
const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36 });
const imageStyle = {
width: 70,
@@ -12,22 +16,18 @@ const renderPoster = (poster) => {
backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
};
- if (poster.length === 0) {
- return null;
- }
-
return (
);
}
-const renderEpisode = (episode) => {
- if (episode <= 0) {
+const renderNumber = (number) => {
+ if (number <= 0) {
return null;
}
return (
-
{episode + '.'}
+
{number + '.'}
);
}
@@ -37,7 +37,7 @@ const renderName = (name) => {
}
return (
-
{name}
+
{name}
);
}
@@ -52,10 +52,11 @@ const renderDuration = (duration) => {
}
const renderReleasedDate = (released) => {
- const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
if (isNaN(released.getTime())) {
return null;
}
+
+ const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
return (
{released.getDate() + ' ' + months[released.getMonth()]}
@@ -96,11 +97,13 @@ const renderProgress = (poster, progress) => {
const Video = (props) => {
return (
-
0 && props.progress ? 'flex' : null }} className={styles['video']}>
+
0 && props.progress ? 'flex' : null }} className={styles['video']}>
{renderPoster(props.poster)}
- {renderEpisode(props.episode)}
- {renderName(props.name)}
+
+ {renderNumber(props.number)}
+ {renderName(props.name)}
+
{renderDuration(props.duration)}
{renderReleasedDate(props.released)}
{renderWatched(props.isWatched)}
@@ -113,18 +116,18 @@ const Video = (props) => {
Video.propTypes = {
poster: PropTypes.string.isRequired,
- episode: PropTypes.number.isRequired,
+ number: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
duration: PropTypes.number.isRequired,
released: PropTypes.instanceOf(Date).isRequired,
isWatched: PropTypes.bool.isRequired,
isUpcoming: PropTypes.bool.isRequired,
progress: PropTypes.number.isRequired,
- showEpisodeInfo: PropTypes.func
+ onVideoClicked: PropTypes.func
};
Video.defaultProps = {
poster: '',
- episode: 0,
+ number: 0,
name: '',
duration: 0,
released: new Date(''), //Invalid Date
diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less
index 75d63be8a..e42108878 100644
--- a/src/common/Video/styles.less
+++ b/src/common/Video/styles.less
@@ -2,26 +2,28 @@
.video {
height: 62px;
width: 340px;
+ display: flex;
padding: 10px 10px;
background-color: @colorblack20;
.poster {
- float: left;
margin-right: 10px;
background-position: center;
background-size: cover, auto;
background-repeat: no-repeat;
}
.video-container {
- font-size: 12px;
+ width: 240px;
color: @colorwhite;
- .episode {
- float: left;
- margin-right: 6px;
- }
- .name {
- overflow: hidden;
- white-space: pre;
- text-overflow: ellipsis;
+ .main-info {
+ font-size: 12px;
+ .number {
+ margin-right: 6px;
+ }
+ .name {
+ overflow: hidden;
+ white-space: pre;
+ text-overflow: ellipsis;
+ }
}
.duration, .released-date {
font-size: 11px;