wip: 'stream' component

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 (
+                <Icon className={styles['logo']} icon={this.props.logo}/>
+            );
+        }
+
+        return (
+            <span className={styles['source-name']}>{this.props.sourceName}</span>
+        );
+    }
+
+    renderTitle() {
+        if(this.props.title.length === 0) {
+            return null;
+        }
+
+        return (
+            <div className={styles['title']}>{this.props.title.split(',').join("\n")}</div>
+        );
+    }
+
+    renderSubtitle() {
+        if(!this.props.isFree && !this.props.isSubscription && !this.props.subtitle){
+            return null;
+        }
+
+        if(this.props.isFree) {
+            return (
+                <span className={styles['free-label']}>FREE</span>
+            );
+        }
+
+        if(this.props.isSubscription) {
+            return (
+                <span className={styles['subscription-label']}>SUBSCRIPTION</span>
+            );
+        }
+
+        return (
+            <div className={styles['subtitle']}>{this.props.subtitle}</div>
+        );
+    }
+
+    renderPlay() {
+        return (
+            <div className={styles['play-container']}>
+                <Icon className={styles['play']} icon={'ic_play'}/>
+            </div>
+        );
+    }
+
+    renderProgress() {
+        if(this.props.lastWatched) {
+            return (
+                <div className={styles['progress-container']}>
+                    <div className={styles['progress']}></div>
+                </div>
+            );
+        }
+    }
+    
+    render() {
+        return (
+            <div className={styles['stream']}>
+                <div className={styles[this.props.lastWatched ? 'last-watched' : 'stream-item']}>
+                    <div className={styles['stream-container']}>
+                        <div className={styles['stream-holder']}>
+                            <div className={styles['logo-container']}>
+                                {this.renderLogo()}
+                            </div>
+                            <div className={styles['title-container']}>
+                                {this.renderTitle()}
+                                {this.renderSubtitle()}
+                            </div>
+                        </div>
+                        {this.renderProgress()}
+                    </div>
+                    {this.renderPlay()}
+                </div>
+            </div>
+        );
+    }
+}
+
+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;

src/common/Stream/index.js

@@ -0,0 +1,3 @@
+import Stream from './Stream';
+
+export default Stream;

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;
+            }
+        } 
+    }
+}

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 
 };

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 (
-            <div style={{ paddingTop: 40 }}>
-                You're on the Board Tab
+            <div style={{ paddingTop: 40, color: 'yellow' }}>
+                <Stream sourceName={'Amazon'} title={'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1'} lastWatched={true}/>
+                <Stream sourceName={'iTunes'} subtitle={'Aasdasd dsasa sad.'}/>
+                <Stream logo={'ic_itunes'} title={'$1.99 purchase SD,$2.99 purchase HD'} lastWatched={true}/>
+                <Stream logo={'ic_amazon'} title={'HDTV'} isFree={true}/>
+                <Stream sourceName={'Amazon'} title={'SD'} isSubscription={true}/>
             </div>
         );
     }

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 {};

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 {};