'LibraryItemList' component

src/common/LibraryItemList/LibraryItemList.js

@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'stremio-icons/dom';
+import styles from './styles';
+
+class LibraryItemList extends Component {
+    renderPoster() {
+        if(this.props.poster.length === 0) {
+            return null;
+        }
+        // src?
+        return (
+            <div className={styles['poster-container']}>
+                <img className={styles['poster']} src={this.props.poster}/>
+            </div>
+        );
+    }
+
+    renderPlay() {
+        return (
+            <div className={styles['play-container']}>
+                <Icon className={styles['play']} icon={'ic_play'}/>
+            </div>
+        );
+    }
+
+    renderTitle() {
+        if(this.props.title.length === 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['title']}>{this.props.title}</span>
+        );
+    }
+
+    renderType() {
+        if(this.props.type.length === 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['type']}>{this.props.type}</span>
+        );
+    }
+
+    renderYear() {
+        if(this.props.year.length === 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['year']}>{this.props.year}</span>
+        );
+    }
+
+    renderDateAdded() {
+        if(this.props.dateAdded.length === 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['date-added']}>{this.props.dateAdded}</span>
+        );  
+    }
+
+    renderViews() {
+        return (
+            <span className={styles['views']}>{this.props.views}</span>
+        );
+    }
+
+    renderHours() {
+        return (
+            <span className={styles['hours']}>{this.props.hours}</span>
+        );
+    }
+
+    renderLastViewed() {
+        if(this.props.lastViewed.length === 0) {
+            return null;
+        }
+
+        return (
+            <span className={styles['last-viewed']}>{this.props.lastViewed}</span>
+        );
+    }
+
+    renderTrailerIcon() {
+        return (
+            <div className={styles['icon-container']}>
+                <Icon className={styles['trailer-icon']} icon={'ic_movies'}/>
+                <p className={styles['trailer']}>Trailer</p>
+            </div>
+        );
+    }
+
+    renderAddlibIcon() {
+        return (
+            <div className={styles['icon-container']}>
+                <Icon className={styles['addlib-icon']} icon={'ic_addlib'}/>
+                <p className={styles['addlib']}>Add to Library</p>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div className={styles['library-item']}>
+                {this.renderPoster()}
+                {this.renderPlay()}
+                {this.renderTitle()}
+                {this.renderType()}
+                {this.renderYear()}
+                {this.renderDateAdded()}
+                {this.renderViews()}
+                {this.renderHours()}
+                {this.renderLastViewed()}
+                {this.renderTrailerIcon()}
+                {this.renderAddlibIcon()}
+            </div>
+        );
+    }
+}
+
+LibraryItemList.propTypes = {
+    poster: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    year: PropTypes.string.isRequired,
+    dateAdded: PropTypes.string.isRequired,
+    views: PropTypes.number.isRequired,
+    hours: PropTypes.number.isRequired,
+    lastViewed: PropTypes.string.isRequired
+};
+LibraryItemList.defaultProps = {
+    poster: '',
+    title: '',
+    type: '',
+    year: '',
+    dateAdded: '',
+    views: 0,
+    hours: 0,
+    lastViewed: ''
+};
+
+export default LibraryItemList;

src/common/LibraryItemList/index.js

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

src/common/LibraryItemList/styles.less

@@ -0,0 +1,83 @@
+@import 'stremio-colors';
+.library-item {
+    width: 90%;
+    display: flex;
+    padding: 8px;
+    align-items: center;
+    color: @colorwhite60;
+    border-top: 1px solid @colorwhite20;
+    .poster-container {
+        display: flex; 
+        height: 110px; 
+        margin-right: 20px;
+        .poster {
+            width: 75px;
+        }
+    }
+    .play-container {
+        width: 52px;
+        height: 52px;
+        position: absolute;
+        padding: 16px 19px;
+        margin: 0px 11.5px;
+        .play {
+            width: 20px;
+            height: 20px;
+            fill: @colortransparent;
+        }
+    }
+    .title {
+        width: 170px;
+        color: @colorwhite;
+    }
+    .type, .year, .views, .hours {
+        width: 100px;
+    }
+    .date-added, .last-viewed {
+        width: 130px;
+    }
+    .icon-container {
+        width: 100px;
+        height: 100px;
+        padding-top: 24px;
+        text-align: center;
+        visibility: hidden;
+        .trailer-icon {
+            width: 22px;
+            fill: @colorwhite;
+        }
+        .addlib-icon {
+            width: 34px;
+            fill: @colorwhite;
+        }
+    }
+    &:hover, &:focus {
+        cursor: pointer;
+        color: @colorblack;
+        background-color: @colorwhite;
+        .play-container {
+            border-radius: 50%;
+            background-color: @colorwhite; 
+            .play { 
+                fill: @colormedium;
+            }
+        } 
+        .title {
+            color: @colorblack;
+        }
+        .icon-container {
+            visibility: visible;
+            .trailer-icon, .addlib-icon, .trailer, .addlib {
+                fill: @colorprim;
+                color: @colorprim;
+            }
+            &:hover, &:focus {
+                background-color: @colorblack20;
+                .trailer-icon, .addlib-icon, .trailer, .addlib {
+                    fill: @colorprimdark;
+                    color: @colorprimdark;
+                }
+            }
+        }
+    }
+}

src/common/index.js

@@ -6,6 +6,7 @@ import MetadataItem from './MetadataItem';
 import Router from './Router';
 import Stream from './Stream';
 import Episode from './Episode';
+import LibraryItemList from './LibraryItemList';
 
 export {
     Checkbox,
@@ -15,5 +16,6 @@ export {
     MetadataItem,
     Router,
     Stream,
-    Episode
+    Episode,
+    LibraryItemList
 };

src/routes/Board/Board.js

@@ -3,6 +3,7 @@ import { Catalogs } from 'stremio-aggregators';
 import { addons } from 'stremio-services';
 import { Stream } from 'stremio-common';
 import { Episode } from 'stremio-common';
+import { LibraryItemList } from 'stremio-common';
 
 class Board extends PureComponent {
     constructor(props) {
@@ -31,10 +32,10 @@ class Board extends PureComponent {
     render() {
         return (
             <div style={{ paddingTop: 40, color: 'yellow' }}>
-                <Episode number={2} name={'The Bing Bran Hypothesis'} duration={23} isWatched={true}></Episode>
-                <Episode number={4} name={'The Luminous Fish Effect'} duration={22} lastWatched={true}></Episode>
-                <Episode number={5} name={'The Dumpling Paradox'} duration={22}></Episode>
-                <Episode number={8} name={'The Loobendfeld Decay'} date={'23 April'} isUpcoming={true}></Episode>
+                <LibraryItemList poster={'http://t3.gstatic.com/images?q=tbn:ANd9GcST1uigGrukMvSAVUefFNuQ0NMZAR-FjfFIwSZFCR5ZkyMSgCyj'} title={'Thor Ragnarok'} type={'Movies'} year={'2017'} dateAdded={'14.12.2017'} views={12} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
+                <LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BMTU5NDI1MjkwMF5BMl5BanBnXkFtZTgwNjIxNTY2MzI@._V1_UX182_CR0,0,182,268_AL_.jpg'} title={'Pitch Perfect 3'} type={'Series'} year={'2015'} dateAdded={'12.12.2012'} views={1} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
+                <LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BODAxNDFhNGItMzdiMC00NDM1LWExYWUtZjNiMGIzYTc0MTM5XkEyXkFqcGdeQXVyMjYzMjA3NzI@._V1_UY268_CR3,0,182,268_AL_.jpg'} title={'Deadpool'} type={'Channel'} year={'2013'} dateAdded={'12.12.2012'} views={3} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
+                <LibraryItemList poster={'https://m.media-amazon.com/images/M/MV5BNGNiNWQ5M2MtNGI0OC00MDA2LWI5NzEtMmZiYjVjMDEyOWYzXkEyXkFqcGdeQXVyMjM4NTM5NDY@._V1_.jpg'} title={'The Shape of Water'} type={'Movies'} year={'2017'} dateAdded={'12.12.2012'} views={8} hours={1245} lastViewed={'14.12.2017'}></LibraryItemList>
             </div>
         );
     }