From dc93940bbdc2bf68c743bfffae8fc2585e26d6ca Mon Sep 17 00:00:00 2001
From: Maxim Voloshin <mvoloshin@atlassian.com>
Date: Tue, 18 Oct 2016 18:16:14 +0300
Subject: [PATCH] Filmstrip is extended with "Hide" button

---
 css/_videolayout_default.scss       | 38 +++++++++++++++++++++++++--
 modules/UI/videolayout/FilmStrip.js | 40 +++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index bed8bb805..52cb02a2c 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -25,9 +25,8 @@
     position:absolute;
     text-align:right;
     height:196px;
-    padding: 10px 10px 10px 5px;
+    padding: 10px 10px 17px 5px;
     bottom: 0;
-    left: 0;
     right: 0;
     width:auto;
     border: 2px solid transparent;
@@ -603,4 +602,39 @@
 
 .moveToCorner + .moveToCorner {
     right: 80px;
+}
+
+.filmstripToolbar {
+    width: 20px;
+    position: absolute;
+    right: 4px;
+    bottom: 20px;
+    z-index: 6;
+
+    button {
+        font-size: 14px;
+        line-height: 1.2;
+        text-align: center;
+        background: transparent;
+        opacity: 0.7;
+        height: auto;
+        width: 100%;
+        padding: 0;
+        margin: 0 1px;
+        border: none;
+
+        -webkit-appearance: none;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        i {
+            cursor: pointer;
+        }
+    }
+}
+
+.filmstripToolbar + #remoteVideos {
+    padding-right: 24px;
 }
\ No newline at end of file
diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js
index 6dcd64aac..fe75db12c 100644
--- a/modules/UI/videolayout/FilmStrip.js
+++ b/modules/UI/videolayout/FilmStrip.js
@@ -12,6 +12,46 @@ const FilmStrip = {
     init (eventEmitter) {
         this.filmStrip = $('#remoteVideos');
         this.eventEmitter = eventEmitter;
+        this.filmStripIsVisible = true;
+        this.renderFilmstripToolbar();
+        this.activateHideButton();
+    },
+
+    /**
+     * Attach 'click' listener to "hide filmstrip" button
+     */
+    activateHideButton () {
+        $('#videospace').on('click', '#hideVideoToolbar', () => {
+            var icon = document.querySelector('#hideVideoToolbar i');
+
+            this.filmStripIsVisible = !this.filmStripIsVisible;
+            this.toggleFilmStrip(this.filmStripIsVisible);
+
+            icon.classList.remove(
+                this.filmStripIsVisible ? 'icon-menu-up' : 'icon-menu-down');
+            icon.classList.add(
+                this.filmStripIsVisible ? 'icon-menu-down' : 'icon-menu-up');
+        });
+    },
+
+    /**
+     * Shows toolbar on the right of the filmstrip
+     */
+    renderFilmstripToolbar () {
+        // create toolbar
+        var container = document.createElement('div');
+        container.className = 'filmstripToolbar';
+
+        container.innerHTML = `
+            <button id="hideVideoToolbar">
+                <i class="icon-menu-${this.filmStripIsVisible ? 'down' : 'up'}">
+                </i>
+            </button>
+        `;
+
+        // show toolbar
+        document.querySelector('#videospace')
+            .insertBefore(container, document.querySelector('#remoteVideos'));
     },
 
     /**