From bbcf69975a51a6aee3c72ecd23e86f22f83a73c8 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 21 Nov 2018 15:32:45 +0200
Subject: [PATCH] flex style

---
 src/common/Stream/Stream.js   |  10 ++--
 src/common/Stream/styles.less |  50 +++++++++--------
 src/common/Video/Video.js     |  40 +++++++------
 src/common/Video/styles.less  | 103 +++++++++++++++++++---------------
 4 files changed, 113 insertions(+), 90 deletions(-)

diff --git a/src/common/Stream/Stream.js b/src/common/Stream/Stream.js
index 1d77f04c5..831b5583c 100644
--- a/src/common/Stream/Stream.js
+++ b/src/common/Stream/Stream.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon from 'stremio-icons/dom';
-import colors from 'stremio-colors';
 import styles from './styles';
 
 const renderLogo = (logo, sourceName) => {
@@ -49,15 +49,15 @@ const renderProgress = (progress) => {
 
 const Stream = (props) => {
     return (
-        <div onClick={props.play} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['stream-container']}>
-            <div className={styles['stream']}>
+        <div onClick={props.play} className={classnames(styles['stream-container'], { [styles['active']]: props.progress })}>
+            <div className={styles['flex-row-container']}>
                 {renderLogo(props.logo, props.sourceName)}
                 <div className={styles['text-container']}>
                     {renderTitle(props.title)}
                     {renderSubtitle(props.subtitle)}
                 </div>
                 <div className={styles['play-container']}>
-                    <Icon style={{ width: props.progress ? '65%' : null, height: props.progress ? '65%' : null,  fill: props.progress ? colors.white : null }} className={styles['play']} icon={'ic_play'} />
+                    <Icon className={styles['play']} icon={'ic_play'} />
                 </div>
             </div>
             {renderProgress(props.progress)}
@@ -82,4 +82,4 @@ Stream.defaultProps = {
     progress: 0
 };
 
-export default Stream;
\ No newline at end of file
+export default Stream;
diff --git a/src/common/Stream/styles.less b/src/common/Stream/styles.less
index 3a12aeccc..16bb7413f 100644
--- a/src/common/Stream/styles.less
+++ b/src/common/Stream/styles.less
@@ -7,29 +7,25 @@
 .stream-container {
     width: @stream-width;
 
-    .stream {
+    .source-name {
+        font-size: 13px;
+    }
+
+    .text-container {
         min-height: round((@stream-width * 0.2));
+        line-height: 15px;
 
-        .source-name {
-            font-size: 13px;
+        .title {
+            font-size: 11px;
         }
 
-        .text-container {
-            line-height: 15px;
-
-            .title {
-                font-size: 11px;
-            }
-
-            .subtitle {
-                font-size: 11px;
-            }
+        .subtitle {
+            font-size: 11px;
         }
+    }
 
-        .play-container {
-            height: @play-width;
-            width: @play-width;
-        }
+    .play-container {
+        height: @play-width;
     }
 
     .progress {
@@ -41,20 +37,24 @@
     margin: 10px; //remove
     background-color: @colorblack20;
 
-    .stream {
+    &.active {
+        background-color: @colorblack40;
+    }
+
+    .flex-row-container {
         display: flex;
         align-items: center;
         justify-content: space-around;
 
         .logo {
-            width: 20%;
+            flex: 1;
+            margin: 0% 5%;
             fill: @colorwhite;
         }
 
         .source-name {
-            display: flex;
-            justify-content: center;
-            width: 20%;
+            flex: 1;
+            margin: 0% 5%;
             color: @colorwhite;
             overflow: hidden;
             white-space: pre;
@@ -62,7 +62,10 @@
         }
 
         .text-container {
-            width: 45%;
+            flex: 3;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
             padding: 2% 0%;
 
             .title {
@@ -77,6 +80,7 @@
         }
 
         .play-container {
+            flex: 1;
             display: flex;
 
             .play {
diff --git a/src/common/Video/Video.js b/src/common/Video/Video.js
index e961f88cc..1aae7e478 100644
--- a/src/common/Video/Video.js
+++ b/src/common/Video/Video.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon, { dataUrl as iconDataUrl } from 'stremio-icons/dom';
 import colors from 'stremio-colors';
 import styles from './styles';
@@ -9,14 +10,15 @@ const renderPoster = (poster) => {
         return null;
     }
 
-    const videoWidth = 340;
-    const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent, width: '20%', height: videoWidth * 0.13 });
+    const placeholderIconUrl = iconDataUrl({ icon: 'ic_channels', fill: colors.accent });
     const imageStyle = {
         backgroundImage: `url('${poster}'), url('${placeholderIconUrl}')`
     };
 
     return (
-        <div style={imageStyle} className={styles['poster']} />
+        <div className={styles['poster-container']}>
+            <div style={imageStyle} className={styles['poster']} />
+        </div>
     );
 }
 
@@ -26,7 +28,7 @@ const renderTitle = (number, title) => {
     }
 
     return (
-        <div className={styles['title']}>{number + '.' + ' ' + title}</div>
+        <div className={styles['title']}>{number}. {title}</div>
     );
 }
 
@@ -38,12 +40,12 @@ const renderReleasedDate = (released) => {
     const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
     return (
-        <div className={styles['released-date']}>{released.getDate() + ' ' + months[released.getMonth()]}</div>
+        <div className={styles['released-date']}>{released.getDate()} {months[released.getMonth()]}</div>
     );
 }
 
 const renderUpcomingLabel = (isUpcoming) => {
-    if(!isUpcoming) {
+    if (!isUpcoming) {
         return null;
     }
 
@@ -53,7 +55,7 @@ const renderUpcomingLabel = (isUpcoming) => {
 }
 
 const renderWatchedLabel = (isWatched) => {
-    if(!isWatched) {
+    if (!isWatched) {
         return null;
     }
 
@@ -76,19 +78,21 @@ const renderProgress = (progress) => {
 
 const Video = (props) => {
     return (
-        <div onClick={props.onVideoClicked} style={{ backgroundColor: props.progress ? colors.black40 : null }} className={styles['video-container']}>
-            <div className={styles['video']}>
+        <div onClick={props.onVideoClicked} className={classnames(styles['video-container'], { [styles['active']]: props.progress > 0 })}>
+            <div className={styles['flex-row-container']}>
                 {renderPoster(props.poster)}
-                <div style={{width: props.poster ? '50%' : '77%' }} className={styles['text-container']}>
-                    {renderTitle(props.number, props.title)}
-                    {renderReleasedDate(props.released)}
-                    <div className={styles['label-container']}>
-                        {renderUpcomingLabel(props.isUpcoming)}
-                        {renderWatchedLabel(props.isWatched)}
+                <div className={styles['text-container']}>
+                    <div className={styles['text-content']}>
+                        {renderTitle(props.number, props.title)}
+                        {renderReleasedDate(props.released)}
+                        <div className={styles['label-container']}>
+                            {renderUpcomingLabel(props.isUpcoming)}
+                            {renderWatchedLabel(props.isWatched)}
+                        </div>
                     </div>
                 </div>
-                <div className={styles['play-container']}>
-                    <Icon style={{ width: props.progress ? '65%' : null, height: props.progress ? '65%' : null,  fill: props.progress ? colors.white : null }} className={styles['play']} icon={'ic_arrow_left'} />
+                <div className={styles['arrow-container']}>
+                    <Icon className={styles['arrow']} icon={'ic_arrow_left'} />
                 </div>
             </div>
             {renderProgress(props.progress)}
@@ -116,4 +120,4 @@ Video.defaultProps = {
     progress: 0
 };
 
-export default Video;
\ No newline at end of file
+export default Video;
diff --git a/src/common/Video/styles.less b/src/common/Video/styles.less
index ad74a520c..9a1c91da9 100644
--- a/src/common/Video/styles.less
+++ b/src/common/Video/styles.less
@@ -1,19 +1,15 @@
 @import 'stremio-colors';
 
 @video-width: 340px;
-@play-width: ceil((@video-width * 0.13));
+@icon-width: round((@video-width * 0.14));
 @progress-height: 3px;
 
 .video-container {
     width: @video-width;
 
-    .video {
+    .text-container {
         min-height: round((@video-width * 0.2));
 
-        .poster {
-            height: round((@video-width * 0.14));
-        }
-
         .title {
             font-size: 12px;
         }
@@ -26,11 +22,10 @@
             font-size: 10px;
             border-radius: 2px;
         }
+    }
 
-        .play-container {
-            height: @play-width;
-            width: @play-width;
-        }
+    .arrow-container {
+        width: @icon-width;
     }
 
     .progress {
@@ -40,59 +35,76 @@
 
 .video-container {
     margin: 10px; //remove
-    background-color: @colorblack20;
+    background-color: @colorglass;
 
-    .video {
+    .flex-row-container {
         display: flex;
+        flex-direction: row;
         align-items: center;
-        justify-content: space-around;
 
-        .poster {
-            width: 20%;
-            background-position: center;
-            background-size: cover, auto;
-            background-repeat: no-repeat;
+        .poster-container {
+            flex: 1;
+            display: flex;
+            align-self: stretch;
+            align-items: center;
+            justify-content: flex-end;
+
+            .poster {
+                height: 70%;
+                width: 90%;
+                background-position: center;
+                background-size: cover, auto;
+                background-repeat: no-repeat;
+            }
         }
 
         .text-container {
-            padding: 2% 0%;
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
 
-            .title {
-                color: @colorwhite;
-                word-break: break-word;
-            }
+            .text-content {
+                margin: 2% 4%;
 
-            .released-date {
-                color: @colorwhite60;
-            }
-
-            .label-container {
-                display: flex;
-                justify-content: space-between;
-
-                .watched-label, .upcoming-label {
-                    padding: 0% 3%;
-                    font-weight: 600;
+                .title {
                     color: @colorwhite;
+                    word-break: break-word;
                 }
 
-                .watched-label {
-                    background-color: @colorprimlight;
+                .released-date {
+                    color: @colorwhite60;
                 }
 
-                .upcoming-label {
-                    background-color: @colorsignal5;
+                .label-container {
+                    display: flex;
+
+                    .upcoming-label, .watched-label {
+                        padding: 0em 0.6em;
+                        font-weight: 600;
+                        color: @colorwhite;
+                    }
+
+                    .upcoming-label {
+                        margin-right: 8%;
+                        background-color: @colorsignal5;
+                    }
+
+                    .watched-label {
+                        background-color: @colorprimlight;
+                    }
                 }
             }
         }
 
-        .play-container {
+        .arrow-container {
             display: flex;
+            align-items: center;
+            justify-content: center;
             transform: rotate(180deg);
 
-            .play {
-                width: 38%;
-                height: 38%;
+            .arrow {
+                width: 30%;
                 margin: auto;
                 fill: @colorwhite60;
             }
@@ -100,7 +112,7 @@
     }
 
     .progress-container {
-        background-color: @colorwhite20;
+        background-color: @colorprim;
 
         .progress {
             background-color: @colorprimlight;
@@ -109,6 +121,9 @@
 
     &:hover {
         cursor: pointer;
-        background-color: @colorwhite20;
+
+        .flex-row-container {
+            background-color: @colorwhite20;
+        }
     }
 }
\ No newline at end of file