Links extracted in a separete component

src/common/MetaPreview/MetaPreview.js

@@ -4,21 +4,54 @@ 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 MetaLinks = ({ label, links, href }) => (
+    <React.Fragment>
+        <div className={styles['links-label']}>{label}</div>
+        <div className={styles['links-container']}>
+            {links.map((link, index) => (
+                <Input key={`${link}-${index}`} className={styles['link']} title={link} type={'link'} tabIndex={-1} href={href(link)}>
+                    {link}
+                    {index < links.length - 1 ? ',' : null}
+                </Input>
+            ))}
+        </div>
+    </React.Fragment>
+);
+
+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 releaseInfoText = React.useMemo(() => {
+        const releasedDate = new Date(released);
+        return releaseInfo.length > 0 ?
+            releaseInfo
+            :
+            !isNaN(releasedDate.getFullYear()) ?
+                releasedDate.getFullYear()
+                :
+                '';
+    }, [releaseInfo, released]);
     const logoOnError = React.useCallback((event) => {
         event.currentTarget.style.display = 'none';
     }, []);
-    const releaseInfoText = releaseInfo.length > 0 ?
+    const hrefForGenre = React.useCallback((genre) => {
-        releaseInfo
+        return `#/discover/${type}//${genre}`;
-        :
+    }, [type]);
-        released instanceof Date && !isNaN(released.getFullYear()) ?
+    const hrefForCrew = React.useCallback((name) => {
-            released.getFullYear()
+        return `#/search?q=${name}`;
-            :
+    }, []);
-            '';
     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} />
+                {
+                    logo.length > 0 ?
+                        <img
+                            key={logo}
+                            className={styles['logo']}
+                            src={logo}
+                            onError={logoOnError}
+                        />
+                        :
+                        null
+                }
                 {
                     releaseInfoText.length > 0 || duration.length > 0 ?
                         <div className={styles['duration-release-info-container']}>
@@ -41,7 +74,7 @@ const MetaPreview = ({ className, compact, id, type, name, logo = '', background
                 {
                     name.length > 0 ?
                         <div className={styles['name-container']}>
-                            <div className={styles['name']} title={name}>{name}</div>
+                            <div className={styles['name']}>{name}</div>
                         </div>
                         :
                         null
@@ -56,45 +89,30 @@ const MetaPreview = ({ className, compact, id, type, name, logo = '', background
                 }
                 {
                     genres.length > 0 ?
-                        <div className={styles['links-container']}>
+                        <MetaLinks label={'Genres:'} links={genres} href={hrefForGenre} />
-                            <div className={styles['title']}>Genres:</div>
+                        :
-                            {genres.map((genre) => (
+                        null
-                                <Input key={genre} className={styles['link']} tabIndex={-1} type={'link'} href={`#/discover/${type}//${genre}`}>
+                }
-                                    {genre}
+                {
-                                </Input>
+                    cast.length > 0 ?
-                            ))}
+                        <MetaLinks label={'Cast:'} links={cast} href={hrefForCrew} />
-                        </div>
+                        :
+                        null
+                }
+                {
+                    writers.length > 0 && !compact ?
+                        <MetaLinks label={'Writers:'} links={writers} href={hrefForCrew} />
+                        :
+                        null
+                }
+                {
+                    directors.length > 0 && !compact ?
+                        <MetaLinks label={'Directors:'} links={directors} href={hrefForCrew} />
                         :
                         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 ?

src/common/MetaPreview/styles.less

@@ -4,15 +4,15 @@
     background-repeat: no-repeat;
     background-position: center;
     background-origin: border-box;
-    color: var(--color-surfacelighter);
 
     &.compact {
         .meta-preview-content {
+            overflow-x: hidden;
+            overflow-y: auto;
 
             .logo {
                 width: 100%;
                 object-position: center;
-                background-color: var(--color-surfacedark20);
             }
 
             .duration-release-info-container {
@@ -31,80 +31,82 @@
         height: 100%;
         padding: 0.8em;
         background-color: var(--color-backgrounddarker60);
+        color: var(--color-surfacelighter);
 
         .logo {
+            display: block;
             max-width: 100%;
             height: 7em;
             margin-bottom: 0.8em;
             object-fit: contain;
             object-position: left center;
+            background-color: var(--color-surfacedarker40)
         }
 
         .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;
+                max-width: 100%;
                 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;
+                overflow: visible;
             }
         }
 
         .name-container {
-            width: 100%;
             margin-bottom: 0.8em;
+            overflow: visible;
 
             .name {
                 font-size: 1.3em;
-                line-height: 1.2em;
-                max-height: 3.6em;
                 word-wrap: break-word;
                 word-break: break-word;
+                overflow: visible;
             }
         }
 
         .description-container {
-            width: 100%;
             margin-bottom: 0.8em;
+            overflow: visible;
 
             .description {
                 font-size: 0.9em;
-                line-height: 1.15em;
-                max-height: 4.8em;
                 word-wrap: break-word;
                 word-break: break-word;
+                overflow: visible;
             }
         }
 
+        .links-label {
+            font-size: 1.1em;
+            color: var(--color-surfacelight);
+            word-wrap: break-word;
+            word-break: break-word;
+            overflow: visible;
+        }
+
         .links-container {
-            width: 100%;
+            display: flex;
-            max-height: 3.2em;
+            flex-direction: row;
+            flex-wrap: wrap;
             margin-bottom: 0.8em;
 
-            .title {
-                width: 100%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                color: var(--color-surfacelight);
-            }
-
             .link {
-                display: inline-block;
+                flex-grow: 0;
+                flex-shrink: 1;
                 max-width: 100%;
-                padding-right: 0.4em;
+                margin-right: 0.4em;
                 font-size: 0.9em;
-                line-height: 1.15em;
+                line-height: 1.2em;
+                overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 color: var(--color-surfacelighter);