{types.length <= 1 ? types.join('') : types.slice(0, -1).join(', ') + ' & ' + types[types.length - 1]}
@@ -50,7 +46,7 @@ const renderDescription = (description) => {
}
const renderUrls = (urls) => {
- if (urls.length === 0) {
+ if(!urls) {
return null;
}
@@ -65,33 +61,25 @@ const renderUrls = (urls) => {
);
}
-const renderShareButton = (shareAddon) => {
- return (
-
-
- SHARE ADD-ON
-
- );
-}
-
-const renderState = (onToggleClicked, isInstalled) => {
- return (
-
{isInstalled ? 'Install' : 'Uninstall'}
- );
-}
-
const Addon = (props) => {
return (
- {renderLogo(props.logo)}
- {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)}
- {renderShareButton(props.shareAddon)}
- {renderState(props.onToggleClicked, props.isInstalled)}
+
+
+ SHARE ADD-ON
+
+
{props.isInstalled ? 'Install' : 'Uninstall'}
);
@@ -103,7 +91,7 @@ Addon.propTypes = {
version: PropTypes.string.isRequired,
types: PropTypes.array.isRequired,
description: PropTypes.string.isRequired,
- urls: PropTypes.arrayOf(PropTypes.string).isRequired,
+ urls: PropTypes.arrayOf(PropTypes.string),
isInstalled: PropTypes.bool.isRequired,
shareAddon: PropTypes.func,
onToggleClicked: PropTypes.func
diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less
index f476f8a63..2d45b9612 100644
--- a/src/common/Addon/styles.less
+++ b/src/common/Addon/styles.less
@@ -6,33 +6,39 @@
color: @colorwhite;
font-family: LatoLight;
background-color: @colorglass;
- .logo-container {
- width: 80px;
+ .info-container {
height: 80px;
- float: left;
- display: flex;
- margin-right: 14px;
- background-color: @colordarkest;
- .logo {
- width: 40px;
- margin: auto;
- fill: @colorwhite;
+ margin-bottom: 26px;
+ .logo-container {
+ width: 80px;
+ height: 80px;
+ float: left;
+ display: flex;
+ margin-right: 14px;
+ background-color: @colordarkest;
+ .logo {
+ width: 40px;
+ margin: auto;
+ fill: @colorwhite;
+ }
+ }
+ .name {
+ font-size: 20px;
+ margin-right: 10px;
+ }
+ .version {
+ margin-right: 10px;
+ color: @colorwhite60;
+ }
+ .type {
+ color: @coloraccent;
+ }
+ .type, .description {
+ margin-top: 2px;
}
- }
- .name {
- font-size: 20px;
- margin-right: 10px;
- }
- .version {
- margin-right: 10px;
- color: @colorwhite60;
- }
- .type {
- color: @coloraccent;
}
.urls {
display: flex;
- margin: 26px 0px;
flex-direction: column;
.url {
color: @colorwhite60;
@@ -40,30 +46,28 @@
}
.buttons {
display: flex;
- text-align: center;
- align-items: center;
+ margin-top: 26px;
+ justify-content: space-between;
.share-container {
- width: 50%;
- margin-right: 50px;
+ border: 2px solid @coloraccent;
.share-icon {
- width: 20px;
+ width: 18px;
margin-right: 6px;
fill: @coloraccent;
}
.share-label {
- cursor: pointer;
- font-size: larger;
color: @coloraccent;
- vertical-align: super;
}
}
- .install-label, .uninstall-label {
- width: 50%;
+ .share-container, .install-label, .uninstall-label {
+ width: 230px;
+ display: flex;
cursor: pointer;
font-weight: 600;
font-size: larger;
- padding: 10px 80px;
- border-radius: 2px;
+ padding: 10px 0px;
+ align-items: center;
+ justify-content: center;
}
.install-label {
border: 2px solid @colorsignal5;
diff --git a/src/common/LibraryItemList/LibraryItemList.js b/src/common/LibraryItemList/LibraryItemList.js
index 2a4e47a73..eea2dfc49 100644
--- a/src/common/LibraryItemList/LibraryItemList.js
+++ b/src/common/LibraryItemList/LibraryItemList.js
@@ -67,24 +67,6 @@ const renderLastViewed = (lastViewed) => {
);
}
-const renderTrailerButton = (watchTrailer) => {
- return (
-
- );
-}
-
-const renderAddToLibraryButton = (addToLibrary) => {
- return (
-
- );
-}
-
const LibraryItemList = (props) => {
return (
@@ -96,8 +78,14 @@ const LibraryItemList = (props) => {
{props.views}
{props.hours}
{renderLastViewed(props.lastViewed)}
- {renderTrailerButton(props.watchTrailer)}
- {renderAddToLibraryButton(props.addToLibrary)}
+
+
);
}
diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 36fa3bc11..b5d2ac5d4 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -55,14 +55,6 @@ const getPlaceholderIcon = (type) => {
}
}
-const renderPlay = (play, progress) => {
- return (
-
-
-
- );
-}
-
const renderProgress = (progress) => {
if (progress <= 0) {
return null;
@@ -132,7 +124,9 @@ const MetaItem = (props) => {
return (
- {renderPlay(props.play, props.progress)}
+
+
+
{renderProgress(props.progress)}
diff --git a/src/common/ShareAddon/ShareAddon.js b/src/common/ShareAddon/ShareAddon.js
index e5c1f524c..5a8f0ace4 100644
--- a/src/common/ShareAddon/ShareAddon.js
+++ b/src/common/ShareAddon/ShareAddon.js
@@ -4,36 +4,6 @@ import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
import colors from 'stremio-colors';
import styles from './styles';
-const renderX = (closeModalDialog) => {
- const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
- const imageStyle = {
- width: 10,
- height: 10,
- backgroundImage: `url('${placeholderIconUrl}')`
- };
- return (
-
- );
-}
-
-const renderButtons = (shareInFacebook, shareInTwitter, shareInGplus) => {
- return (
-
-
- FACEBOOK
-
-
- TWITTER
-
-
- GOOGLE+
-
-
- );
-}
-
const renderUrl = (copyToClipboard, url) => {
if (url.length === 0) {
return null;
@@ -42,18 +12,39 @@ const renderUrl = (copyToClipboard, url) => {
return (
- Copy
+
+ Copy
+
);
}
const ShareAddon = (props) => {
+ const placeholderIconUrl = iconDataUrl({ icon: 'ic_x', fill: colors.neutrallight });
+ const imageStyle = {
+ width: 10,
+ height: 10,
+ backgroundImage: `url('${placeholderIconUrl}')`
+ };
+
return (
- {renderX(props.closeModalDialog)}
+
Share Add-on
- {renderButtons(props.shareInFacebook, props.shareInTwitter, props.shareInGplus)}
+
+
+ FACEBOOK
+
+
+ TWITTER
+
+
+ GOOGLE+
+
+
{renderUrl(props.copyToClipboard, props.url)}
diff --git a/src/common/ShareAddon/styles.less b/src/common/ShareAddon/styles.less
index c5d71c83f..5e64a9f13 100644
--- a/src/common/ShareAddon/styles.less
+++ b/src/common/ShareAddon/styles.less
@@ -71,10 +71,19 @@
}
.copy-label {
width: 30%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: @colorblack20;
+ .copy-icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 4px;
+ fill: @colorblack40;
+ }
}
}
}
diff --git a/src/common/Stream/Stream.js b/src/common/Stream/Stream.js
index 57e4be798..610ae6293 100644
--- a/src/common/Stream/Stream.js
+++ b/src/common/Stream/Stream.js
@@ -47,14 +47,6 @@ const renderSubtitle = (isFree, isSubscription, subtitle) => {
return null;
}
-const renderPlay = (progress) => {
- return (
-
-
-
- );
-}
-
const renderProgress = (progress) => {
if (progress <= 0) {
return null;
@@ -80,7 +72,9 @@ const Stream = (props) => {
{renderProgress(props.progress)}
- {renderPlay(props.progress)}
+
+
+