From cdb417f22b316e51f2a19cc749cdba44346af21b Mon Sep 17 00:00:00 2001 From: svetlagasheva Date: Tue, 11 Sep 2018 16:40:46 +0300 Subject: [PATCH] wip: 'stream' component --- src/common/Stream/Stream.js | 118 ++++++++++++++++++++++++++++++++++ src/common/Stream/index.js | 3 + src/common/Stream/styles.less | 97 ++++++++++++++++++++++++++++ src/common/index.js | 4 +- src/routes/Board/Board.js | 19 ++++-- src/services/API/API.js | 4 +- src/services/addons/addons.js | 6 +- 7 files changed, 238 insertions(+), 13 deletions(-) create mode 100644 src/common/Stream/Stream.js create mode 100644 src/common/Stream/index.js create mode 100644 src/common/Stream/styles.less diff --git a/src/common/Stream/Stream.js b/src/common/Stream/Stream.js new file mode 100644 index 000000000..448c740dc --- /dev/null +++ b/src/common/Stream/Stream.js @@ -0,0 +1,118 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import Icon from 'stremio-icons/dom'; +import styles from './styles'; + +class Stream extends Component { + renderLogo() { + if(this.props.logo.length === 0 && this.props.sourceName.length === 0){ + return null; + } + + if(this.props.logo) { + return ( + + ); + } + + return ( + {this.props.sourceName} + ); + } + + renderTitle() { + if(this.props.title.length === 0) { + return null; + } + + return ( +
{this.props.title.split(',').join("\n")}
+ ); + } + + renderSubtitle() { + if(!this.props.isFree && !this.props.isSubscription && !this.props.subtitle){ + return null; + } + + if(this.props.isFree) { + return ( + FREE + ); + } + + if(this.props.isSubscription) { + return ( + SUBSCRIPTION + ); + } + + return ( +
{this.props.subtitle}
+ ); + } + + renderPlay() { + return ( +
+ +
+ ); + } + + renderProgress() { + if(this.props.lastWatched) { + return ( +
+
+
+ ); + } + } + + render() { + return ( +
+
+
+
+
+ {this.renderLogo()} +
+
+ {this.renderTitle()} + {this.renderSubtitle()} +
+
+ {this.renderProgress()} +
+ {this.renderPlay()} +
+
+ ); + } +} + +Stream.propTypes = { + logo: PropTypes.string.isRequired, + sourceName: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + subtitle: PropTypes.string.isRequired, + isFree: PropTypes.bool.isRequired, + isSubscription: PropTypes.bool.isRequired, + progress: PropTypes.number.isRequired, + lastWatched: PropTypes.bool.isRequired +}; + +Stream.defaultProps = { + logo: '', + sourceName: '', + title: '', + subtitle: '', + isFree: false, + isSubscription: false, + progress: 0, + lastWatched: false +}; + +export default Stream; \ No newline at end of file diff --git a/src/common/Stream/index.js b/src/common/Stream/index.js new file mode 100644 index 000000000..a052285b0 --- /dev/null +++ b/src/common/Stream/index.js @@ -0,0 +1,3 @@ +import Stream from './Stream'; + +export default Stream; diff --git a/src/common/Stream/styles.less b/src/common/Stream/styles.less new file mode 100644 index 000000000..936d5f3bb --- /dev/null +++ b/src/common/Stream/styles.less @@ -0,0 +1,97 @@ +@import 'stremio-colors'; +.stream { + width: 340px; + background-color: @colorblack20; + .stream-item { + display: inline-flex; + } + .stream-container { + color: @colorwhite; + margin-left: 16px; + margin-top: 10px; + .stream-holder { + display: inline-flex; + .logo-container { + width: 80px; + height: 40px; + font-size: 14px; + padding-top: 6px; + margin-right: 40px; + .logo { + fill: @colorwhite; + } + .source-name { + top: 4px; + position: relative; + } + } + .title-container { + height: 40px; + width: 120px; + font-size: 11px; + overflow: hidden; + white-space: pre; + .title, .subtitle { + overflow: hidden; + padding-top: 4px; + line-height: 16px; + color: @colorwhite60; + text-overflow: ellipsis; + &:hover { + width: auto; + transition: margin-left 3s linear; + margin-left: -180%; + text-overflow: initial; + } + } + } + .free-label, .subscription-label { + font-weight: 600; + font-size: 11px; + border-radius: 2px; + } + .free-label { + padding: 1px 6px; + background-color: @colorprimlight; + } + .subscription-label { + color: @colorsignal1; + } + } + .progress-container { + .progress { + height: 3px; + width: 240px; + border-radius: 1px; + background-color: @colorprimlight; + } + } + } + .play-container { + width: 46px; + height: 46px; + padding: 14px 17px; + margin: 7px 20px; + .play { + width: 18px; + height: 18px; + fill: @colorwhite60; + } + } + &:hover, &:focus { + cursor: pointer; + background-color: @colorwhite20; + } + .last-watched { + background-color: @colorblack40; + width: 340px; + display: inline-flex; + .play-container { + background-color: @colorwhite; + border-radius: 50%; + .play { + fill: @colormedium; + } + } + } +} \ No newline at end of file diff --git a/src/common/index.js b/src/common/index.js index 84cac84b0..6da977742 100644 --- a/src/common/index.js +++ b/src/common/index.js @@ -4,6 +4,7 @@ import NavBar from './NavBar'; import Modal from './Modal'; import MetadataItem from './MetadataItem'; import Router from './Router'; +import Stream from './Stream'; export { Checkbox, @@ -11,5 +12,6 @@ export { NavBar, Modal, MetadataItem, - Router + Router, + Stream }; diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 87e8e8068..146205981 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -1,12 +1,13 @@ import React, { PureComponent } from 'react'; import { Catalogs } from 'stremio-aggregators'; import { addons } from 'stremio-services'; +import { Stream } from 'stremio-common'; class Board extends PureComponent { constructor(props) { super(props); - this.aggregator = new Catalogs(addons.addons); + // this.aggregator = new Catalogs(addons.addons); this.state = { catalogs: [] @@ -14,22 +15,26 @@ class Board extends PureComponent { } componentDidMount() { - this.aggregator.evs.addListener('updated', this.onCatalogsUpdated); - this.aggregator.run(); + // this.aggregator.evs.addListener('updated', this.onCatalogsUpdated); + // this.aggregator.run(); } componentWillUnmount() { - this.aggregator.evs.removeListener('updated', this.onCatalogsUpdated); + // this.aggregator.evs.removeListener('updated', this.onCatalogsUpdated); } onCatalogsUpdated = () => { - this.setState({ catalogs: this.aggregator.results.slice() }); + // this.setState({ catalogs: this.aggregator.results.slice() }); } render() { return ( -
- You're on the Board Tab +
+ + + + +
); } diff --git a/src/services/API/API.js b/src/services/API/API.js index 94f7503f5..c2c713027 100644 --- a/src/services/API/API.js +++ b/src/services/API/API.js @@ -1,6 +1,6 @@ import StremioAPI from 'stremio-api-client'; import storage from './storage'; -const API = new StremioAPI({ storage }); +// const API = new StremioAPI({ storage }); -export default API; +export default {}; diff --git a/src/services/addons/addons.js b/src/services/addons/addons.js index 38b33d8e6..0964b3d10 100644 --- a/src/services/addons/addons.js +++ b/src/services/addons/addons.js @@ -1,7 +1,7 @@ import { AddonCollection } from 'stremio-addon-client'; import officialAddons from 'stremio-official-addons'; -const addons = new AddonCollection(); -addons.load(officialAddons); +// const addons = new AddonCollection(); +// addons.load(officialAddons); -export default addons; +export default {};