MetaPreview wip

src/common/MetaPreview/MetaPreview.js

@@ -0,0 +1,148 @@
+const React = require('react');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const { Input } = require('stremio-navigation');
+const styles = require('./styles');
+
+const MetaPreview = ({ className, compact, id, type, name, logo = '', background = '', duration = '', releaseInfo = '', released, description, genres = [], writers = [], directors = [], cast = [], imdbId = '', imdbRating = '', inLibrary = false, trailer = '', share = '', toggleLibraryOnClick }) => {
+    const logoOnError = React.useCallback((event) => {
+        event.currentTarget.style.display = 'none';
+    }, []);
+    const releaseInfoText = releaseInfo.length > 0 ?
+        releaseInfo
+        :
+        released instanceof Date && !isNaN(released.getFullYear()) ?
+            released.getFullYear()
+            :
+            '';
+    return (
+        <div className={classnames(className, styles['meta-preview-container'], { [styles['compact']]: compact })} style={{ backgroundImage: `url(${background})` }}>
+            <div className={styles['meta-preview-content']}>
+                <img className={styles['logo']} src={logo} onError={logoOnError} />
+                {
+                    releaseInfoText.length > 0 || duration.length > 0 ?
+                        <div className={styles['duration-release-info-container']}>
+                            {
+                                releaseInfoText.length > 0 ?
+                                    <div className={styles['release-info']}>{releaseInfoText}</div>
+                                    :
+                                    null
+                            }
+                            {
+                                duration.length > 0 ?
+                                    <div className={styles['duration']}>{duration}</div>
+                                    :
+                                    null
+                            }
+                        </div>
+                        :
+                        null
+                }
+                {
+                    name.length > 0 ?
+                        <div className={styles['name-container']}>
+                            <div className={styles['name']} title={name}>{name}</div>
+                        </div>
+                        :
+                        null
+                }
+                {
+                    description.length > 0 ?
+                        <div className={styles['description-container']}>
+                            <div className={styles['description']}>{description}</div>
+                        </div>
+                        :
+                        null
+                }
+                {
+                    genres.length > 0 ?
+                        <div className={styles['links-container']}>
+                            <div className={styles['title']}>Genres:</div>
+                            {genres.map((genre) => (
+                                <Input key={genre} className={styles['link']} tabIndex={-1} type={'link'} href={`#/discover/${type}//${genre}`}>
+                                    {genre}
+                                </Input>
+                            ))}
+                        </div>
+                        :
+                        null
+                }
+            </div>
+            {/* 
+            {
+                writers.length > 0 ?
+                    <div className={styles['links-container']}>
+                        <div className={styles['title']}>Writers</div>
+                        {writers.map((writer) => (
+                            <Input key={writer} className={styles['link']} type={'link'} href={`#/search?q=${writer}`}>
+                                {writer}
+                            </Input>
+                        ))}
+                    </div>
+                    :
+                    null
+            }
+            {
+                cast.length > 0 ?
+                    <div className={styles['links-container']}>
+                        <div className={styles['title']}>Cast</div>
+                        {cast.map((actor) => (
+                            <Input key={actor} className={styles['link']} type={'link'} href={`#/search?q=${actor}`}>
+                                {actor}
+                            </Input>
+                        ))}
+                    </div>
+                    :
+                    null
+            }
+            <div className={styles['action-buttons-container']}>
+                {
+                    trailer.length > 0 ?
+                        <Input className={styles['action-button-container']} type={'link'} href={`#/player?stream=${trailer}`}>
+                            <Icon className={styles['icon']} icon={'ic_movies'} />
+                            <div className={styles['label']}>Trailer</div>
+                        </Input>
+                        :
+                        null
+                }
+                {
+                    imdbId.length > 0 ?
+                        <Input className={styles['action-button-container']} type={'link'} href={`https://imdb.com/title/${imdbId}`} target={'_blank'}>
+                            <Icon className={styles['icon']} icon={'ic_imdb'} />
+                            {
+                                imdbRating.length > 0 ?
+                                    <div className={styles['label']}>{imdbRating} / 10</div>
+                                    :
+                                    null
+                            }
+                        </Input>
+                        :
+                        null
+                }
+                <Input className={styles['action-button-container']} type={'button'} data-meta-item-id={id} onClick={toggleLibraryOnClick}>
+                    <Icon className={styles['icon']} icon={inLibrary ? 'ic_removelib' : 'ic_addlib'} />
+                    <div className={styles['label']}>{inLibrary ? 'Remove from Library' : 'Add to library'}</div>
+                </Input>
+                {
+                    share.length > 0 ?
+                        <Input className={styles['action-button-container']} type={'button'}>
+                            <Icon className={styles['icon']} icon={'ic_share'} />
+                            <div className={styles['label']}>Share</div>
+                            {
+                                shareModalOpen ?
+                                    <Modal>
+                                        
+                                    </Modal>
+                                    :
+                                    null
+                            }
+                        </Input>
+                        :
+                        null
+                }
+            </div> */}
+        </div >
+    );
+};
+
+module.exports = MetaPreview;

src/common/MetaPreview/index.js

@@ -0,0 +1,3 @@
+const MetaItemPreview = require('./MetaPreview');
+
+module.exports = MetaItemPreview;

src/common/MetaPreview/styles.less

@@ -0,0 +1,118 @@
+.meta-preview-container {
+    background-color: var(--color-backgrounddarker);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: border-box;
+    color: var(--color-surfacelighter);
+
+    &.compact {
+        .meta-preview-content {
+
+            .logo {
+                width: 100%;
+                object-position: center;
+                background-color: var(--color-surfacedark20);
+            }
+
+            .duration-release-info-container {
+                justify-content: space-evenly;
+
+                .duration, .release-info {
+                    margin-left: 0.4em;
+                    margin-right: 0.4em;
+                }
+            }
+        }
+    }
+
+    .meta-preview-content {
+        width: 100%;
+        height: 100%;
+        padding: 0.8em;
+        background-color: var(--color-backgrounddarker60);
+
+        .logo {
+            max-width: 100%;
+            height: 7em;
+            margin-bottom: 0.8em;
+            object-fit: contain;
+            object-position: left center;
+        }
+
+        .duration-release-info-container {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: flex-start;
+            flex-wrap: wrap;
+
+            .duration, .release-info {
+                flex-grow: 0;
+                flex-shrink: 1;
+                margin-bottom: 0.8em;
+                margin-right: 0.8em;
+                line-height: 1.1em;
+                max-height: 2.2em;
+                text-align: center;
+                word-wrap: break-word;
+                word-break: break-word;
+            }
+        }
+
+        .name-container {
+            width: 100%;
+            margin-bottom: 0.8em;
+
+            .name {
+                font-size: 1.3em;
+                line-height: 1.2em;
+                max-height: 3.6em;
+                word-wrap: break-word;
+                word-break: break-word;
+            }
+        }
+
+        .description-container {
+            width: 100%;
+            margin-bottom: 0.8em;
+
+            .description {
+                font-size: 0.9em;
+                line-height: 1.15em;
+                max-height: 4.8em;
+                word-wrap: break-word;
+                word-break: break-word;
+            }
+        }
+
+        .links-container {
+            width: 100%;
+            max-height: 3.2em;
+            margin-bottom: 0.8em;
+
+            .title {
+                width: 100%;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: var(--color-surfacelight);
+            }
+
+            .link {
+                display: inline-block;
+                max-width: 100%;
+                padding-right: 0.4em;
+                font-size: 0.9em;
+                line-height: 1.15em;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: var(--color-surfacelighter);
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+}

src/common/index.js

@@ -3,6 +3,7 @@ const ColorPicker = require('./ColorPicker');
 const Loader = require('./Loader');
 const MainNavBar = require('./MainNavBar');
 const MetaItem = require('./MetaItem');
+const MetaPreview = require('./MetaPreview');
 const NavBar = require('./NavBar');
 const Popup = require('./Popup');
 const ShareModal = require('./ShareModal');
@@ -17,6 +18,7 @@ module.exports = {
     Loader,
     MainNavBar,
     MetaItem,
+    MetaPreview,
     NavBar,
     Popup,
     ShareModal,