diff --git a/src/common/Addon/Addon.js b/src/common/Addon/Addon.js new file mode 100644 index 000000000..140f4f9a6 --- /dev/null +++ b/src/common/Addon/Addon.js @@ -0,0 +1,167 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'stremio-icons/dom'; +import styles from './styles'; + +class Addon extends Component { + renderLogo() { + if(this.props.logo.length === 0) { + return ( +
+ +
+ ); + } + + return ( +
+ +
+ ); + + } + + renderName() { + if(this.props.name.length === 0) { + return null; + } + + return ( + {this.props.name} + ); + } + + renderVersion() { + if(this.props.version.length === 0) { + return null; + } + + return ( + {'v. ' + this.props.version} + ); + } + + renderInstalled() { + if(!this.props.isInstalled) { + return null; + } + + return ( + + Installed + + ); + } + + renderType() { + var allTypes = this.props.types; + + if(this.props.types.length <= 1) { + return ( +
+ {allTypes.join('')} +
+ ); + } + + return ( +
+ {allTypes.slice(0, -1).join(', ') + ' & ' + allTypes[allTypes.length - 1]} +
+ ); + } + + renderDescription() { + if(this.props.description.length === 0) { + return null; + } + + return ( + {this.props.description} + ); + } + + renderUrls() { + if(this.props.urls.length === 0) { + return null; + } + + return ( +
+ {this.props.urls.map((item, key) => { + return ( + + ); + })} +
+ ); + } + + renderShareButton() { + return ( +
+ + SHARE ADD-ON +
+ ); + } + + renderState() { + if(this.props.isInstalled) { + return ( +
Uninstall
+ ); + } + + return ( +
Install
+ ); + } + + render() { + return ( +
+
+ {this.renderLogo()} + {this.renderName()} + {this.renderVersion()} + {this.renderInstalled()} + {this.renderType()} + {this.renderDescription()} +
+ {this.renderUrls()} +
+ {this.renderShareButton()} + {this.renderState()} +
+
+ ); + } +} + +Addon.propTypes = { + logo: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + version: PropTypes.string.isRequired, + isInstalled: PropTypes.bool.isRequired, + types: PropTypes.array.isRequired, + description: PropTypes.string.isRequired, + urls: PropTypes.array.isRequired +}; +Addon.defaultProps = { + logo: '', + name: '', + version: '', + isInstalled: false, + types: [], + description: '', + urls: [] +}; + +export default Addon; \ No newline at end of file diff --git a/src/common/Addon/index.js b/src/common/Addon/index.js new file mode 100644 index 000000000..4cb262fd8 --- /dev/null +++ b/src/common/Addon/index.js @@ -0,0 +1,3 @@ +import Addon from './Addon'; + +export default Addon; diff --git a/src/common/Addon/styles.less b/src/common/Addon/styles.less new file mode 100644 index 000000000..dcdc3fff4 --- /dev/null +++ b/src/common/Addon/styles.less @@ -0,0 +1,109 @@ +@import 'stremio-colors'; +.addon { + float: left; + width: 550px; + margin: 10px; + padding: 18px; + display: grid; + font-size: 12px; + color: @colorwhite; + font-family: LatoLight; + background-color: @colorglass; + .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; + } + .version { + margin: 10px; + color: @colorwhite60; + } + .check-container { + color: @colorwhite60; + .check-icon { + width: 10px; + fill: @colorsignal5; + } + } + .type { + color: @coloraccent; + } + .urls { + margin: 20px 0px; + .url-container { + display: flex; + align-items: center; + .default-checkbox { + display: none; + } + .checkbox { + width: 14px; + height: 14px; + cursor: pointer; + margin-right: 6px; + border: 2px solid @colorwhite60; + .checkmark { + width: 10px; + height: 10px; + display: none; + fill: @colorwhite; + } + } + input:checked ~ .checkbox { + background-color: @colorprimlight; + border: 2px solid @colorprimlight; + .checkmark { + display: block; + } + } + input:not(:checked) ~ .url { + color: @colorwhite60; + } + } + } + .buttons { + display: flex; + margin-top: 10px; + text-align: center; + align-items: center; + .share-container { + width: 50%; + margin-right: 50px; + .share-icon { + width: 20px; + margin-right: 6px; + fill: @coloraccent; + } + .share-label { + font-size: larger; + color:@coloraccent; + vertical-align: super; + } + } + .install-label, .uninstall-label { + width: 50%; + font-weight: 600; + font-size: larger; + padding: 10px 80px; + border-radius: 2px; + } + .install-label { + border: 2px solid @colorsignal5; + background-color: @colorsignal5; + } + .uninstall-label { + border: 2px solid @colorwhite20; + } + } +} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index fa061d94d..4bbbfb998 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -8,6 +8,7 @@ import Stream from './Stream'; import Episode from './Episode'; import LibraryItemList from './LibraryItemList'; import LibraryItemGrid from './LibraryItemGrid'; +import Addon from './Addon'; export { Checkbox, @@ -19,5 +20,6 @@ export { Stream, Episode, LibraryItemList, - LibraryItemGrid + LibraryItemGrid, + Addon }; diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 08bb0de3e..b3fef6eb7 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -5,6 +5,7 @@ import { Stream } from 'stremio-common'; import { Episode } from 'stremio-common'; import { LibraryItemList } from 'stremio-common'; import { LibraryItemGrid } from 'stremio-common'; +import { Addon } from 'stremio-common'; class Board extends PureComponent { constructor(props) { @@ -33,16 +34,10 @@ class Board extends PureComponent { render() { return (
- - - - - - - - - - + + + +
); }