From 0b84afc28ce7ac648da4ef1a61b4f32b31cafa0a Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Wed, 28 Aug 2019 16:39:12 +0300
Subject: [PATCH] render Videos/Streams in detail page

---
 src/routes/Detail/Detail.js   | 14 ++++++++++++++
 src/routes/Detail/styles.less | 13 +++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/routes/Detail/Detail.js b/src/routes/Detail/Detail.js
index 3a7e3ed9a..d7330ab4c 100644
--- a/src/routes/Detail/Detail.js
+++ b/src/routes/Detail/Detail.js
@@ -1,5 +1,7 @@
 const React = require('react');
 const { NavBar, MetaPreview } = require('stremio/common');
+const VideosList = require('./VideosList');
+const StreamsList = require('./StreamsList');
 const useMetaItem = require('./useMetaItem');
 const useInLibrary = require('./useInLibrary');
 require('./styles');
@@ -18,6 +20,18 @@ const Detail = ({ urlParams }) => {
                     inLibrary={inLibrary}
                     toggleInLibrary={toggleInLibrary}
                 />
+                {
+                    typeof urlParams.videoId === 'string' && urlParams.videoId.length > 0 ?
+                        <StreamsList
+                            className={'streams-list'}
+                            metaItem={metaItem}
+                        />
+                        :
+                        <VideosList
+                            className={'videos-list'}
+                            metaItem={metaItem}
+                        />
+                }
             </div>
         </div>
     );
diff --git a/src/routes/Detail/styles.less b/src/routes/Detail/styles.less
index 2ee876369..b944cc0e1 100644
--- a/src/routes/Detail/styles.less
+++ b/src/routes/Detail/styles.less
@@ -13,10 +13,19 @@
     .detail-content {
         flex: 1;
         align-self: stretch;
+        display: flex;
+        flex-direction: row;
 
         .meta-preview {
-            width: 100%;
-            height: 100%;
+            flex: 1;
+            align-self: stretch;
+        }
+
+        .videos-list, .streams-list {
+            flex-grow: 0;
+            flex-shrink: 0;
+            flex-basis: 30rem;
+            align-self: stretch;
         }
     }
 }
\ No newline at end of file