addon, episode(renamed video), stream changes

src/common/Addon/Addon.js

@@ -76,8 +76,14 @@ class Addon extends Component {
             return null;
         }
 
+        if(this.props.description.length > 150) {
+            return (
+                <div style={{overflowY: 'scroll', height: '36px'}} className={styles['description']}>{this.props.description}</div>
+            );
+        }
+
         return (
-            <span className={styles['description']}>{this.props.description}</span>
+            <div className={styles['description']}>{this.props.description}</div>
         );
     }
 
@@ -90,12 +96,12 @@ class Addon extends Component {
             <div className={styles['urls']}>
                 {this.props.urls.map((item, key) => {
                     return (
-                        <label className={styles['url-container']}>
+                        <label key={key} className={styles['url-container']}>
                             <input type='checkbox' className={styles['default-checkbox']}/>
                             <span className={styles['checkbox']}>
                                 <Icon className={styles['checkmark']} icon={'ic_check'}/>
                             </span>
-                            <span key={key} className={styles['url']}>{item}</span>
+                            <span className={styles['url']}>{item}</span>
                         </label>
                     );
                 })}
@@ -127,14 +133,12 @@ class Addon extends Component {
     render() {
         return (
             <div className={styles['addon']}>
-                <div className={styles['info-container']}>
-                    {this.renderLogo()}
-                    {this.renderName()}
-                    {this.renderVersion()}
-                    {this.renderInstalled()}
-                    {this.renderType()}
-                    {this.renderDescription()}
-                </div>
+                {this.renderLogo()}
+                {this.renderName()}
+                {this.renderVersion()}
+                {this.renderInstalled()}
+                {this.renderType()}
+                {this.renderDescription()}
                 {this.renderUrls()}
                 <div className={styles['buttons']}>
                     {this.renderShareButton()}

src/common/Addon/styles.less

@@ -23,9 +23,10 @@
     }
     .name {
         font-size: 20px;
+        margin-right: 10px;
     }
     .version {
-        margin: 10px;
+        margin-right: 10px;
         color: @colorwhite60;
     }
     .check-container {
@@ -73,7 +74,6 @@
     }
     .buttons {
         display: flex;
-        margin-top: 10px;
         text-align: center;
         align-items: center;
         .share-container {

src/common/Episode/Episode.js

@@ -1,101 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import styles from './styles';
-
-class Episode extends Component {
-    renderNumber() {
-        if(this.props.number <= 0){
-            return null;
-        }
-
-        if(this.props.number > 0) {
-            return (
-                <span className={styles['number']}>{this.props.number + '.'}</span>
-            );
-        }
-    }
-
-    renderName() {
-        if(this.props.name.length === 0){
-            return null;
-        }
-
-        return (
-            <span className={styles['name']}>{this.props.name}</span>
-        );
-    }
-
-    renderProgress() {
-        if(this.props.lastWatched) {
-            return (
-                <div className={styles['episode-last']}>
-                    <div className={styles['progress']}></div>
-                </div>
-            );
-        }
-    }
-
-    renderState() {
-        if(this.props.isUpcoming) {
-            return (
-                <div className={styles['episode-upcoming']}>
-                    <span className={styles['date']}>{this.props.date}</span>
-                    <span className={styles['upcoming-label']}>UPCOMING</span>
-                </div>
-            );
-        }
-
-        if(this.props.isWatched) {
-            return (
-                <div className={styles['episode-watched']}>
-                    <span className={styles['duration']}>{this.props.duration + ' min'}</span>
-                    <span className={styles['watched-label']}>WATCHED</span>
-                </div>
-            );
-        }
-
-        return (
-            <div className={styles['episode-duration']}>
-                <span className={styles['duration']}>{this.props.duration + ' min'}</span>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className={styles['episode']}>
-                <div className={styles[this.props.lastWatched ? 'last-watched' : null]}>
-                    <div className={styles['episode-container']}>
-                        {this.renderNumber()}
-                        {this.renderName()}
-                        {this.renderState()}
-                        {this.renderProgress()}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-Episode.propTypes = {
-    number: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    duration: PropTypes.number.isRequired,
-    isWatched: PropTypes.bool.isRequired,
-    date: PropTypes.string.isRequired,
-    isUpcoming: PropTypes.bool.isRequired,
-    progress: PropTypes.number.isRequired,
-    lastWatched: PropTypes.bool.isRequired
-};
-Episode.defaultProps = {
-    number: 0,
-    name: '',
-    duration: 0,
-    isWatched: false,
-    date: '',
-    isUpcoming: false,
-    progress: 0,
-    lastWatched: false
-};
-
-export default Episode;

src/common/Episode/index.js

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

src/common/Episode/styles.less

@@ -1,52 +0,0 @@
-@import 'stremio-colors';
-.episode {
-    //change height
-    height: 60px;
-    width: 340px;
-    background-color: @colorblack20;
-    line-height: 18px;
-    font-size: 12px;
-    .episode-container {
-        padding: 10px 16px;
-        span {
-            color: @colorwhite;
-        }
-        .name { 
-            margin-left: 10px;
-        }
-        .duration, .date {
-            color: @colorwhite60;
-            font-size: 11px;
-            padding-left: 1px;
-        }
-        .episode-last {
-            .progress {
-                height: 3px;
-                width: 300px;
-                margin-top: 2px;
-                border-radius: 1px;
-                background-color: @colorprimlight;
-            }
-        }
-        .watched-label, .upcoming-label {
-            font-weight: 600;
-            font-size: 10px;
-            padding: 1px 6px;
-            border-radius: 2px;
-            margin-left: 10px;
-        }
-        .watched-label {
-            background-color: @colorprimlight;
-        }
-        .upcoming-label {
-            background-color: @colorsignal5;
-        }
-    }
-    &:hover, &:focus {
-        cursor: pointer;
-        background-color: @colorwhite20;
-    }
-    .last-watched {
-        background-color: @colorblack40;
-    }
-}

src/common/Stream/Stream.js

@@ -1,14 +1,11 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Icon from 'stremio-icons/dom';
+import colors from 'stremio-colors';
 import styles from './styles';
 
-class Stream extends Component {
+class Stream extends PureComponent {
     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}/>
@@ -16,7 +13,7 @@ class Stream extends Component {
         }
 
         return (
-            <span className={styles['source-name']}>{this.props.sourceName}</span>
+            <div className={styles['source-name']}>{this.props.sourceName}</div>
         );
     }
 
@@ -26,15 +23,11 @@ class Stream extends Component {
         }
 
         return (
-            <div className={styles['title']}>{this.props.title.split(',').join("\n")}</div>
+            <div className={this.props.title.length > 22 ? styles['long-title'] : styles['title']}>{this.props.title}</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>
@@ -47,47 +40,48 @@ class Stream extends Component {
             );
         }
 
-        return (
-            <div className={styles['subtitle']}>{this.props.subtitle}</div>
-        );
+        if(this.props.subtitle) {
+            return (
+                <div className={styles['subtitle']}>{this.props.subtitle}</div>
+            );
+        }
+        return null;
     }
 
     renderPlay() {
         return (
-            <div className={styles['play-container']}>
-                <Icon className={styles['play']} icon={'ic_play'}/>
+            <div style={{backgroundColor: this.props.progress ? colors.white : null}} className={styles['play-container']}>
+                <Icon style={{fill: this.props.progress ? colors.medium : null}} className={styles['play']} icon={'ic_play'}/>
             </div>
         );
     }
 
     renderProgress() {
-        if(this.props.lastWatched) {
-            return (
-                <div className={styles['progress-container']}>
-                    <div className={styles['progress']}></div>
-                </div>
-            );
+        if(this.props.progress <= 0) {
+            return null;
         }
+
+        return (
+            <div className={styles['progress-container']}>
+                <div style={{width: this.props.progress + '%'}} 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 style={{backgroundColor: this.props.progress ? colors.black40 : null}} className={styles['stream']}>
+                <div className={styles['stream-info-container']}>
+                    <div className={styles['stream-info']}>
+                        {this.renderLogo()}
+                        <div className={styles['text-container']}>
+                            {this.renderTitle()}
+                            {this.renderSubtitle()}
                         </div>
-                        {this.renderProgress()}
                     </div>
-                    {this.renderPlay()}
+                    {this.renderProgress()}
                 </div>
+                {this.renderPlay()}
             </div>
         );
     }
@@ -100,8 +94,7 @@ Stream.propTypes = {
     subtitle: PropTypes.string.isRequired,
     isFree: PropTypes.bool.isRequired,
     isSubscription: PropTypes.bool.isRequired,
-    progress: PropTypes.number.isRequired,
-    lastWatched: PropTypes.bool.isRequired
+    progress: PropTypes.number.isRequired
 };
 
 Stream.defaultProps = {
@@ -111,8 +104,7 @@ Stream.defaultProps = {
     subtitle: '',
     isFree: false,
     isSubscription: false,
-    progress: 0,
-    lastWatched: false
+    progress: 0
 };
 
 export default Stream;

src/common/Stream/styles.less

@@ -1,67 +1,58 @@
 @import 'stremio-colors';
 .stream {
     width: 340px;
+    display: flex;
+    font-size: 11px;
+    padding: 7px 20px;
+    color: @colorwhite;
+    justify-content: space-between;
     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;
-                }
+    .stream-info-container {
+        width: 230px;
+        .stream-info {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .logo {
+                width: 74px;
+                fill: @colorwhite;
             }
-            .title-container {
-                height: 40px;
-                width: 120px;
-                font-size: 11px;
+            .source-name {
+                width: 80px;
+                font-size: 13px;
                 overflow: hidden;
-                white-space: pre;
-                .title, .subtitle {
+            }
+            .text-container {
+                width: 120px;
+                overflow: hidden;
+                .long-title {
                     overflow: hidden;
-                    padding-top: 4px;
-                    line-height: 16px;
-                    color: @colorwhite60;
+                    white-space: pre;
                     text-overflow: ellipsis;
                     &:hover {
-                        width: auto;
-                        transition: margin-left 3s linear;
                         margin-left: -180%;
                         text-overflow: initial;
+                        transition: margin-left 3s linear;
                     }
                 }
-            }
-            .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;
+                .free-label, .subscription-label {
+                    font-weight: 600;
+                }
+                .free-label {
+                    padding: 1px 6px;
+                    border-radius: 2px;
+                    background-color: @colorprimlight;
+                }
+                .subscription-label {
+                    color: @colorsignal1;
+                }
             }
         }
         .progress-container {
+            background-color: @colorneutral;
             .progress {
                 height: 3px;
-                width: 240px;
                 border-radius: 1px;
                 background-color: @colorprimlight;
             }
@@ -70,28 +61,18 @@
     .play-container {
         width: 46px;
         height: 46px;
-        padding: 14px 17px;
-        margin: 7px 20px;
+        display: flex;
+        border-radius: 50%;
         .play {
             width: 18px;
             height: 18px;
+            margin: auto;
+            margin-left: 16px;
             fill: @colorwhite60;
         }
     }
-    &:hover, &:focus {
+    &:hover {
         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/Video/Video.js

@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { dataUrl as iconDataUrl } from 'stremio-icons/dom';
+import colors from 'stremio-colors';
+import styles from './styles';
+
+class Video extends Component {
+    renderPoster() {
+        const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: 40, height: 36});
+        const imageStyle = {
+            width: 70,
+            height: 40,
+            backgroundImage: `url('${this.props.poster}'), url('${placeholderIconUrl}')`
+        };
+
+        if (this.props.poster.length === 0) {
+            return null;
+        }
+
+        return (
+            <div style={imageStyle} className={styles['poster']}></div>
+        );
+    }
+
+    renderEpisode() {
+        if (this.props.episode <= 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['episode']}>{this.props.episode + '.'}</span>
+        );
+    }
+
+    renderName() {
+        if (this.props.name.length === 0) {
+            return null;
+        }
+
+        if (this.props.name.length > 50) {
+            return (
+                <div className={styles['info']}>
+                    <div className={styles['name']}>{this.props.name}</div>
+                </div>
+            );
+        }
+
+        return (
+            <div className={styles['name']}>{this.props.name}</div>
+        );
+    }
+
+    renderDuration() {
+        if (this.props.duration <= 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['duration']}>{this.props.duration + ' min'}</span>
+        );
+    }
+
+    renderWatched() {
+        if (!this.props.isWatched) {
+            return null;
+        }
+
+        return (
+            <span className={styles['watched-label']}>WATCHED</span>
+        );
+    }
+
+    renderReleasedDate() {
+        if (isNaN(this.props.released.getTime())) {
+            return null;
+        }
+
+        return (
+            <span className={styles['released-date']}>{this.props.released.toDateString().slice(4, 10)}</span>
+        );
+    }
+
+    renderUpcoming() {
+        if (!this.props.isUpcoming) {
+            return null;
+        }
+
+        return (
+            <span className={styles['upcoming-label']}>UPCOMING</span>
+        );
+    }
+
+    renderProgress() {
+        if (this.props.progress <= 0) {
+            return null;
+        }
+
+        return (
+            <div style={{ width: this.props.poster.length > 0 ? 220 : 300}} className={styles['progress-container']}>
+                <div style={{ width: this.props.progress + '%' }} className={styles['progress']}></div>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div style={{ backgroundColor: this.props.progress ? colors.black40 : null, display: this.props.poster.length > 0 && this.props.progress ? 'flex' : null }} className={styles['video']}>
+                {this.renderPoster()}
+                <div className={styles['video-container']}>
+                    {this.renderEpisode()}
+                    {this.renderName()}
+                    {this.renderDuration()}
+                    {this.renderWatched()}
+                    {this.renderReleasedDate()}
+                    {this.renderUpcoming()}
+                    {this.renderProgress()}
+                </div>
+            </div>
+        );
+    }
+}
+
+Video.propTypes = {
+    poster: PropTypes.string.isRequired,
+    episode: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    duration: PropTypes.number.isRequired,
+    isWatched: PropTypes.bool.isRequired,
+    released: PropTypes.instanceOf(Date).isRequired,
+    isUpcoming: PropTypes.bool.isRequired,
+    progress: PropTypes.number.isRequired
+};
+Video.defaultProps = {
+    poster: '',
+    episode: 0,
+    name: '',
+    duration: 0,
+    isWatched: false,
+    released: new Date(''), //Invalid Date
+    isUpcoming: false,
+    progress: 0
+};
+
+export default Video;

src/common/Video/index.js

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

src/common/Video/styles.less

@@ -0,0 +1,67 @@
+@import 'stremio-colors';
+.video {
+    height: 60px;
+    width: 340px;
+    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;
+        color: @colorwhite;
+        .episode { 
+            float: left;
+            margin-right: 6px;
+        }
+        .info {
+            white-space: pre;
+            overflow: hidden;
+            .name {          
+                overflow: hidden;
+                text-overflow: ellipsis;
+                &:hover {
+                    width: auto;
+                    margin-left: -180%;
+                    text-overflow: initial;
+                    transition: margin-left 6s linear;
+                }
+            }
+        }
+        .duration, .released-date {
+            font-size: 11px;
+            padding-left: 1px;
+            margin-right: 10px;
+            color: @colorwhite60;
+        }
+        .progress-container {
+            background-color: @colorwhite20;
+            .progress {
+                height: 3px;
+                margin-top: 2px;
+                border-radius: 1px;
+                background-color: @colorprimlight;
+            }
+        }
+        .watched-label, .upcoming-label {
+            font-weight: 600;
+            font-size: 10px;
+            padding: 1px 6px;
+            border-radius: 2px;
+        }
+        .watched-label {
+            background-color: @colorprimlight;
+        }
+        .upcoming-label {
+            background-color: @colorsignal5;
+        }
+    }
+    &:hover, &:focus {
+        cursor: pointer;
+        background-color: @colorwhite20;
+    }
+}

src/common/index.js

@@ -5,7 +5,7 @@ import Modal from './Modal';
 import MetadataItem from './MetadataItem';
 import Router from './Router';
 import Stream from './Stream';
-import Episode from './Episode';
+import Video from './Video';
 import LibraryItemList from './LibraryItemList';
 import LibraryItemGrid from './LibraryItemGrid';
 import Addon from './Addon';
@@ -20,7 +20,7 @@ export {
     MetadataItem,
     Router,
     Stream,
-    Episode,
+    Video,
     LibraryItemList,
     LibraryItemGrid,
     Addon,

src/routes/Board/Board.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { Catalogs } from 'stremio-aggregators';
 import { addons } from 'stremio-services';
 import { Stream } from 'stremio-common';
-import { Episode } from 'stremio-common';
+import { Video } from 'stremio-common';
 import { LibraryItemList } from 'stremio-common';
 import { LibraryItemGrid } from 'stremio-common';
 import { Addon } from 'stremio-common';