Refactor filmstrip module

modules/UI/videolayout/FilmStrip.js

@@ -10,36 +10,35 @@ const FilmStrip = {
      * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILM_STRIP}).
      */
     init (eventEmitter) {
+        this.iconMenuDownClassName = 'icon-menu-down';
+        this.iconMenuUpClassName = 'icon-menu-up';
         this.filmStrip = $('#remoteVideos');
         this.eventEmitter = eventEmitter;
         this.filmStripIsVisible = true;
-        this.renderFilmstripToolbar();
-        this.activateHideButton();
+        this._initFilmStripToolbar();
+        this.registerListeners();
     },
 
     /**
-     * Attach 'click' listener to "hide filmstrip" button
+     * Initializes the filmstrip toolbar
      */
-    activateHideButton () {
-        $('#videospace').on('click', '#hideVideoToolbar', () => {
-            var icon = document.querySelector('#hideVideoToolbar i');
+    _initFilmStripToolbar() {
+        let toolbar = this._generateFilmStripToolbar();
 
-            this.filmStripIsVisible = !this.filmStripIsVisible;
-            this.toggleFilmStrip(this.filmStripIsVisible);
+        document.querySelector('#videospace')
+            .insertBefore(toolbar, document.querySelector('#remoteVideos'));
 
-            icon.classList.remove(
-                this.filmStripIsVisible ? 'icon-menu-up' : 'icon-menu-down');
-            icon.classList.add(
-                this.filmStripIsVisible ? 'icon-menu-down' : 'icon-menu-up');
-        });
+        let iconSelector = '#hideVideoToolbar i';
+        this.toggleFilmStripIcon = document.querySelector(iconSelector);
     },
 
     /**
-     * Shows toolbar on the right of the filmstrip
+     * Generates HTML layout for filmstrip toolbar
+     * @returns {HTMLElement}
+     * @private
      */
-    renderFilmstripToolbar () {
-        // create toolbar
-        var container = document.createElement('div');
+    _generateFilmStripToolbar() {
+        let container = document.createElement('div');
         container.className = 'filmstripToolbar';
 
         container.innerHTML = `
@@ -49,9 +48,42 @@ const FilmStrip = {
             </button>
         `;
 
-        // show toolbar
-        document.querySelector('#videospace')
-            .insertBefore(container, document.querySelector('#remoteVideos'));
+        return container;
+    },
+
+    /**
+     * Attach 'click' listener to "hide filmstrip" button
+     */
+    registerListeners() {
+        $('#videospace').on('click', '#hideVideoToolbar', () => {
+
+            this.filmStripIsVisible = !this.filmStripIsVisible;
+            this.toggleFilmStrip(this.filmStripIsVisible);
+
+            if (this.filmStripIsVisible) {
+                this.showMenuDownIcon();
+            } else {
+                this.showMenuUpIcon();
+            }
+        });
+    },
+
+    /**
+     * Changes classes of icon for showing down state
+     */
+    showMenuDownIcon() {
+        let icon = this.toggleFilmStripIcon;
+        icon.classList.add(this.iconMenuDownClassName);
+        icon.classList.remove(this.iconMenuUpClassName);
+    },
+
+    /**
+     * Changes classes of icon for showing up state
+     */
+    showMenuUpIcon() {
+        let icon = this.toggleFilmStripIcon;
+        icon.classList.add(this.iconMenuUpClassName);
+        icon.classList.remove(this.iconMenuDownClassName);
     },
 
     /**