From f6aee44df670555f5d01dc3a655b14db29d33f84 Mon Sep 17 00:00:00 2001
From: Torjus <torjusti@gmail.com>
Date: Fri, 20 Jul 2018 09:52:16 +0200
Subject: [PATCH] Add overlay to the Filmstrip and scrollbar for horizontal
 overflow

---
 app/lib/components/Filmstrip.jsx     | 10 ++++---
 app/stylus/components/Filmstrip.styl | 44 ++++++++++++++++++----------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Filmstrip.jsx
index e0a16e9..f1607fd 100644
--- a/app/lib/components/Filmstrip.jsx
+++ b/app/lib/components/Filmstrip.jsx
@@ -48,10 +48,12 @@ class Filmstrip extends Component
 								active   : activeSpeakerName === peerName
 							})}
 						>
-							<Peer
-								advancedMode={advancedMode}
-								name={peerName}
-							/>
+							<div className='film-content'>
+								<Peer
+									advancedMode={advancedMode}
+									name={peerName}
+								/>
+							</div>
 						</div>
 					))}
 				</div>
diff --git a/app/stylus/components/Filmstrip.styl b/app/stylus/components/Filmstrip.styl
index 051249c..1b1d590 100644
--- a/app/stylus/components/Filmstrip.styl
+++ b/app/stylus/components/Filmstrip.styl
@@ -17,30 +17,42 @@
 
   > .filmstrip {
     display: flex;
-    padding: 0.5vmin;
-    cursor: pointer;
+    background: rgba(0, 0, 0 , 0.5);
+    width: 100%;
+    overflow-x: auto;
+    padding: 1vmin 0;
 
     > .film {
       height: 15vmin;
-      margin: 1vmin;
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      box-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5);
+      flex-shrink: 0;        
+      padding-left: 1vmin;
 
-      > [data-component='Peer'] {
-        max-width: 15vmin * (4 / 3);
+      &:last-child {
+        padding-right: 1vmin;
+      }
 
-        &.screen {
-          max-width: 15vmin * (2 * 4 / 3);
-          border: 0;
+      > .film-content {
+        height: 100%;
+        width: 100%;
+        border: 1px solid rgba(255,255,255,0.15);
+
+        > [data-component='Peer'] {
+          max-width: 15vmin * (4 / 3);
+          cursor: pointer;
+
+          &.screen {
+            max-width: 15vmin * (2 * 4 / 3);
+            border: 0;
+          }
         }
-      }
 
-      &.active {
-        border-color: #FFF;
-      }
+        &.active {
+          border-color: #FFF;
+        }
 
-      &.selected {
-        border-color: #377EFF;
+        &.selected {
+          border-color: #377EFF;
+        }
       }
     }
   }