From 493b6c3d79323cb5fde7d8fd63f3baf0cd228ba2 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 28 Aug 2019 13:49:22 +0300
Subject: [PATCH] sample detail page implemented

---
 src/routes/Detail/Detail.js       | 179 ++++--------------------------
 src/routes/Detail/index.js        |   4 +-
 src/routes/Detail/styles.less     | 177 ++---------------------------
 src/routes/Detail/useInLibrary.js |   8 ++
 src/routes/Detail/useMetaItem.js  |  39 +++++++
 5 files changed, 83 insertions(+), 324 deletions(-)
 create mode 100644 src/routes/Detail/useInLibrary.js
 create mode 100644 src/routes/Detail/useMetaItem.js

diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index 3c73a7859..3a7e3ed9a 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -1,161 +1,26 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import VideosList from './VideosList';
-import Icon from 'stremio-icons/dom';
-import styles from './styles';
+const React = require('react');
+const { NavBar, MetaPreview } = require('stremio/common');
+const useMetaItem = require('./useMetaItem');
+const useInLibrary = require('./useInLibrary');
+require('./styles');
 
-class Detail extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            logoLoaded: true
-        };
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextState.logoLoaded !== this.state.logoLoaded;
-    }
-
-    renderSection({ title, links }) {
-        return (
-            <div className={styles['section-container']}>
-                {
-                    title ?
-                        <div className={styles['title']}>{title}</div>
-                        :
-                        null
-                }
-                {links.map(link => <a key={link} className={styles['link']}>{link}</a>)}
+const Detail = ({ urlParams }) => {
+    const metaItem = useMetaItem(urlParams.type, urlParams.id, urlParams.videoId);
+    const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useInLibrary(urlParams.id);
+    return (
+        <div className={'detail-container'}>
+            <NavBar className={'nav-bar'} backButton={true} title={metaItem.name} />
+            <div className={'detail-content'}>
+                <MetaPreview
+                    {...metaItem}
+                    className={'meta-preview'}
+                    background={null}
+                    inLibrary={inLibrary}
+                    toggleInLibrary={toggleInLibrary}
+                />
             </div>
-        );
-    }
-
-    render() {
-        return (
-            <div style={this.props.metaItem.background.length > 0 ? { backgroundImage: 'url(' + this.props.metaItem.background + ')' } : { backgroundColor: colors.backgrounddarker }} className={styles['detail-container']}>
-                <div className={styles['overlay-container']} />
-                <div className={styles['info-container']}>
-                    {
-                        this.state.logoLoaded ?
-                            <img className={styles['logo']} src={this.props.metaItem.logo} onError={() => this.setState({ logoLoaded: false })} />
-                            :
-                            null
-                    }
-                    <div className={styles['duration']}>{this.props.metaItem.duration}</div>
-                    <div className={styles['release-info']}>
-                        {
-                            this.props.metaItem.releaseInfo.length > 0 ?
-                                this.props.metaItem.releaseInfo
-                                :
-                                this.props.metaItem.released.getFullYear()
-                        }
-                    </div>
-                    <div className={styles['name']}>{this.props.metaItem.name}</div>
-                    <div className={styles['description']}>{this.props.metaItem.description}</div>
-                    {this.renderSection({ title: 'GENRES', links: this.props.metaItem.genres })}
-                    {this.renderSection({ title: 'WRITTEN BY', links: this.props.metaItem.writers })}
-                    {this.renderSection({ title: 'DIRECTED BY', links: this.props.metaItem.directors })}
-                    {this.renderSection({ title: 'CAST', links: this.props.metaItem.cast })}
-                    <div className={styles['action-buttons-container']}>
-                        <a href={this.props.metaItem.links.youtube} className={styles['action-button-container']}>
-                            <Icon className={styles['icon']} icon={'ic_movies'} />
-                            <div className={styles['label']}>Trailer</div>
-                        </a>
-                        <a href={this.props.metaItem.links.imdb} target={'_blank'} className={styles['action-button-container']}>
-                            <Icon className={styles['icon']} icon={'ic_imdb'} />
-                            <div className={styles['label']}>{this.props.metaItem.imdbRating} / 10</div>
-                        </a>
-                        <div className={styles['action-button-container']} onClick={this.props.toggleLibraryButton}>
-                            <Icon className={styles['icon']} icon={this.props.inLibrary ? 'ic_removelib' : 'ic_addlib'} />
-                            <div className={styles['label']}>{this.props.inLibrary ? 'Remove from Library' : 'Add to library'}</div>
-                        </div>
-                        <div className={styles['action-button-container']}>
-                            <Icon className={styles['icon']} icon={'ic_share'} />
-                            <div className={styles['label']}>Share</div>
-                        </div>
-                    </div>
-                </div>
-                <VideosList className={styles['videos-list']} videos={this.props.metaItem.videos}></VideosList>
-            </div>
-        );
-    }
-}
-
-Detail.propTypes = {
-    inLibrary: PropTypes.bool.isRequired,
-    metaItem: PropTypes.object.isRequired,
-    toggleLibraryButton: PropTypes.func
-};
-Detail.defaultProps = {
-    inLibrary: false,
-    metaItem: {
-        logo: 'https://images.metahub.space/logo/medium/tt4123430/img',
-        background: 'https://images.metahub.space/background/medium/tt4123430/img',
-        duration: '134 min',
-        releaseInfo: '2018',
-        released: new Date(2018, 4, 23),
-        imdbRating: '7.4',
-        name: 'Fantastic Beasts and Where to Find Them: The Original Screenplay',
-        description: 'In an effort to thwart Grindelwald' + 's plans ofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraisingpurebloodwizardstoansofraising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards toans of raising pure-blood wizards to rule over all non-magical beings, Albus Dumbledore enlists his former student Newt Scamander, who agrees to help, unaware of the dangers that lie ahead. Lines are drawn as love and loyalty are tested, even among the truest friends and family, in an increasingly divided wizarding world.',
-        genres: ['Adventure', 'Family', 'Fantasy'],
-        writers: ['J. K. Rowling'],
-        directors: ['David Yates'],
-        cast: ['Johny Depp', 'Kevin Guthrie', 'Carmen Ejogo', 'Wolf Roth'],
-        videos: [
-            { id: '1', poster: 'https://www.stremio.com/websiste/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '2', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 3 },
-            { id: '3', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 5 },
-            { id: '4', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 4 },
-            { id: '5', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-            { id: '6', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '7', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '8', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-            { id: '9', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '10', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-            { id: '11', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '12', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '13', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '14', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-            { id: '15', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '16', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-            { id: '17', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '18', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '19', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '20', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-            { id: '21', poster: 'https://www.stremiocom/wsebsite/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '22', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-            { id: '23', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '24', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '25', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '26', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 3 },
-            { id: '27', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '28', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 5 },
-            { id: '29', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '30', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '31', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '32', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-            { id: '33', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '34', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '35', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '36', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '37', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '38', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-            { id: '39', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '40', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '41', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 },
-            { id: '42', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 1, name: 'The Bing BranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBranHypothesiingBran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesiing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, isWatched: true, season: 1 },
-            { id: '43', poster: 'https://www.stremio.com/website/home-stremio.png', episode: 2, name: 'The Bing Bran Hypothesis', description: 'dasdasda', released: new Date(2018, 4, 23), isWatched: true, season: 1 },
-            { id: '44', episode: 4, name: 'The Luminous Fish Effect', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 1 },
-            { id: '45', poster: 'https://www.stremiocom/website/home-stremio.png', episode: 5, name: 'The Dumpling Paradox', description: 'dasdasda', released: new Date(2018, 4, 23), progress: 50, season: 2 },
-            { id: '46', episode: 8, name: 'The Loobendfeld Decay', description: 'dasdasda', released: new Date(2018, 4, 23), isUpcoming: true, season: 1 }
-        ],
-        links: {
-            share: '',
-            imdb: 'https://www.imdb.com/title/tt4123430/?ref_=fn_al_tt_3',
-            youtube: '#/player'
-        }
-    }
+        </div>
+    );
 };
 
-export default Detail;
+module.exports = Detail;
diff --git a/src/routes/Detail/index.js b/src/routes/Detail/index.js
index ccf95e690..89fc1aead 100644
--- a/src/routes/Detail/index.js
+++ b/src/routes/Detail/index.js
@@ -1,3 +1,3 @@
-import Detail from './Detail';
+const Detail = require('./Detail');
 
-export default Detail;
+module.exports = Detail;
diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
index c45e3e2fa..2ee876369 100644
--- a/src/routes/Detail/styles.less
+++ b/src/routes/Detail/styles.less
@@ -1,175 +1,22 @@
-.detail-container, :global(.detail-popup-container) {
-    --spacing: 8px;
-    --action-button-width: 80px;
-    --video-width: 360px;
-    --stream-width: 360px;
-    font-size: 12px;
-}
-
 .detail-container {
-    position: relative;
-    z-index: 0;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+    background-color: var(--color-background);
 
-    .overlay-container {
-        position: absolute;
-        z-index: 0;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: var(--color-backgrounddarker60);
+    .nav-bar {
+        flex: none;
+        align-self: stretch;
     }
 
-    .info-container {
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        left: 0;
-        right: 40%;
-        bottom: 0;
-        padding: calc(var(--spacing) * 3);
+    .detail-content {
+        flex: 1;
+        align-self: stretch;
 
-        .logo {
-            display: block;
-            height: calc(var(--action-button-width) * 1.2);
-            object-fit: contain;
+        .meta-preview {
+            width: 100%;
+            height: 100%;
         }
-
-        .logo-error {
-            display: none;
-        }
-
-        .duration {
-            display: inline-block;
-            max-width: 45%;
-            margin-right: 1.2em;
-            font-size: 1.15em;
-            overflow: hidden;
-            white-space: pre;
-            text-overflow: ellipsis;
-            color: var(--color-surfacelight);
-        }
-
-        .release-info {
-            display: inline-block;
-            max-width: 45%;
-            font-size: 1.15em;
-            overflow: hidden;
-            white-space: pre;
-            text-overflow: ellipsis;
-            color: var(--color-surfacelight);
-        }
-
-        .name {
-            max-height: 3em;
-            overflow: hidden;
-            overflow-wrap: break-word;
-            font-size: 1.5em;
-            line-height: 1.5;
-            color: var(--color-surfacelight);
-        }
-
-        .description {
-            max-height: 10.5em;
-            overflow: hidden;
-            overflow-wrap: break-word;
-            line-height: 1.5;
-            color: var(--color-surfacelight);
-        }
-
-        .section-container {
-            max-height: 3.2em;
-            overflow: hidden;
-
-            .title {
-                margin-bottom: 0.3em;
-                font-size: 1.15em;
-                color: var(--color-surface);
-            }
-
-            .link {
-                display: none;
-                max-width: 100%;
-                padding: 0.3em 0.6em;
-                font-size: 1.15em;
-                overflow: hidden;
-                white-space: pre;
-                text-overflow: ellipsis;
-                color: var(--color-surfacelight);
-                cursor: pointer;
-
-                &:hover {
-                    color: var(--color-surfacelighter);
-                    background-color: var(--color-surface40);
-                }
-
-                &:nth-child(-n+6) {
-                    display: inline-block;
-                }
-            }
-        }
-
-        .action-buttons-container {
-            position: absolute;
-            left: calc(var(--spacing) * 3);
-            bottom: calc(var(--spacing) * 3);
-
-            .action-button-container {
-                cursor: pointer;
-                width: var(--action-button-width);
-                height: var(--action-button-width);
-                display: inline-flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                text-align: center;
-
-                .icon {
-                    height: 30%;
-                    margin: 10% 0;
-                    fill: var(--color-surfacelight);
-                }
-
-                .label {
-                    height: 2.4em;
-                    padding: 0 1em;
-                    overflow-wrap: break-word;
-                    overflow: hidden;
-                    font-size: 1.05em;
-                    line-height: 1.2em;
-                    color: var(--color-surfacelight);
-                }
-
-                &:hover {
-                    background-color: var(--color-surfacedarker60);
-
-                    .icon {
-                        fill: var(--color-surfacelighter);
-                    }
-
-                    .label {
-                        color: var(--color-surfacelighter);
-                    }
-                }
-            }
-        }
-
-        >:not(:last-child) {
-            margin-bottom: calc(var(--spacing) * 1.5);
-        }
-    }
-
-    .videos-list {
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        padding: calc(3 * var(--spacing)) 0;
     }
 }
\ No newline at end of file
diff --git a/src/routes/Detail/useInLibrary.js b/src/routes/Detail/useInLibrary.js
new file mode 100644
index 000000000..08ffd21fd
--- /dev/null
+++ b/src/routes/Detail/useInLibrary.js
@@ -0,0 +1,8 @@
+const { useBinaryState } = require('stremio/common');
+
+const useInLibrary = (id = '') => {
+    const [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary] = useBinaryState(false);
+    return [inLibrary, addToLibrary, removeFromLibrary, toggleInLibrary];
+};
+
+module.exports = useInLibrary;
diff --git a/src/routes/Detail/useMetaItem.js b/src/routes/Detail/useMetaItem.js
new file mode 100644
index 000000000..dc5134320
--- /dev/null
+++ b/src/routes/Detail/useMetaItem.js
@@ -0,0 +1,39 @@
+const React = require('react');
+
+const useMetaItem = (type = '', id = '', videoId = '') => {
+    const [metaItem] = React.useState(() => ({
+        id,
+        type,
+        name: 'Underworld',
+        logo: 'https://images.metahub.space/logo/medium/tt0320691/img',
+        background: 'https://images.metahub.space/background/medium/tt0320691/img',
+        duration: '121 min',
+        releaseInfo: '2003',
+        released: '2003-09-19T00:00:00.000Z',
+        description: 'Selene, a vampire warrior, is entrenched in a conflict between vampires and werewolves, while falling in love with Michael, a human who is sought by werewolves for unknown reasons.',
+        genres: ['Action', 'Fantasy', 'Thriller'],
+        writers: ['Kevin Grevioux', 'Len Wiseman', 'Danny McBride', 'Danny McBride'],
+        directors: ['Len Wiseman'],
+        cast: ['Kate Beckinsale', 'Scott Speedman', 'Michael Sheen', 'Shane Brolly'],
+        imdbRating: '7.0',
+        links: {
+            trailer: 'mn4O3iQ8B_s',
+            imdb: 'tt0320691',
+            share: 'movie/underworld-0320691'
+        },
+        videos: [
+            {
+                id: '1',
+                name: 'How to create a Stremio add-on with Node.js',
+                description: 'This is a step-by-step tutorial on how to create your own add-on using Node.js.',
+                released: 'Mon Jul 01 2019 00:00:00 GMT+0300 (Eastern European Summer Time)',
+                poster: 'https://theme.zdassets.com/theme_assets/2160011/77a6ad5aee11a07eb9b87281070f1aadf946f2b3.png',
+                season: 0,
+                episode: 0
+            }
+        ]
+    }));
+    return metaItem;
+};
+
+module.exports = useMetaItem;