Browse Source

Fixes showToolbar in filmstrip-only mode and renames some funcs

master
yanas 8 years ago
parent
commit
031f2dfeb8
2 changed files with 24 additions and 22 deletions
  1. 2
    2
      modules/UI/UI.js
  2. 22
    20
      modules/UI/videolayout/FilmStrip.js

+ 2
- 2
modules/UI/UI.js View File

322
         SidePanels.init(eventEmitter);
322
         SidePanels.init(eventEmitter);
323
     } else {
323
     } else {
324
         $("body").addClass("filmstrip-only");
324
         $("body").addClass("filmstrip-only");
325
-        UIUtil.setVisible('mainToolbarContainer', false);
326
-        FilmStrip.setupFilmStripOnly();
325
+        UI.showToolbar();
326
+        FilmStrip.setFilmStripOnly();
327
         messageHandler.enableNotifications(false);
327
         messageHandler.enableNotifications(false);
328
         JitsiPopover.enabled = false;
328
         JitsiPopover.enabled = false;
329
     }
329
     }

+ 22
- 20
modules/UI/videolayout/FilmStrip.js View File

20
     },
20
     },
21
 
21
 
22
     /**
22
     /**
23
-     * Initializes the filmstrip toolbar
23
+     * Initializes the filmstrip toolbar.
24
      */
24
      */
25
     _initFilmStripToolbar() {
25
     _initFilmStripToolbar() {
26
-        let toolbar = this._generateFilmStripToolbar();
26
+        // Do not show the toggle button in film strip only mode.
27
+        if (interfaceConfig.filmStripOnly)
28
+            return;
29
+
30
+        let toolbarContainerHTML = this._generateToolbarHTML();
27
         let className = this.filmStripContainerClassName;
31
         let className = this.filmStripContainerClassName;
28
         let container = document.querySelector(`.${className}`);
32
         let container = document.querySelector(`.${className}`);
29
 
33
 
30
-        UIUtil.prependChild(container, toolbar);
34
+        UIUtil.prependChild(container, toolbarContainerHTML);
31
 
35
 
32
-        let iconSelector = '#hideVideoToolbar i';
36
+        let iconSelector = '#toggleFilmStripButton i';
33
         this.toggleFilmStripIcon = document.querySelector(iconSelector);
37
         this.toggleFilmStripIcon = document.querySelector(iconSelector);
34
     },
38
     },
35
 
39
 
36
     /**
40
     /**
37
-     * Generates HTML layout for filmstrip toolbar
41
+     * Generates HTML layout for filmstrip toggle button and wrapping container.
38
      * @returns {HTMLElement}
42
      * @returns {HTMLElement}
39
      * @private
43
      * @private
40
      */
44
      */
41
-    _generateFilmStripToolbar() {
45
+    _generateToolbarHTML() {
42
         let container = document.createElement('div');
46
         let container = document.createElement('div');
43
         let isVisible = this.isFilmStripVisible();
47
         let isVisible = this.isFilmStripVisible();
44
         container.className = 'filmstrip__toolbar';
48
         container.className = 'filmstrip__toolbar';
45
-        if(!interfaceConfig.filmStripOnly) {
46
-            container.innerHTML = `
47
-                <button id="hideVideoToolbar">
48
-                    <i class="icon-menu-${isVisible ? 'down' : 'up'}">
49
-                    </i>
50
-                </button>
51
-            `;
52
-        }
49
+        container.innerHTML = `
50
+            <button id="toggleFilmStripButton">
51
+                <i class="icon-menu-${isVisible ? 'down' : 'up'}">
52
+                </i>
53
+            </button>
54
+        `;
53
 
55
 
54
         return container;
56
         return container;
55
     },
57
     },
62
         // Firing the event instead of executing toggleFilmstrip method because
64
         // Firing the event instead of executing toggleFilmstrip method because
63
         // it's important to hide the filmstrip by UI.toggleFilmstrip in order
65
         // it's important to hide the filmstrip by UI.toggleFilmstrip in order
64
         // to correctly resize the video area.
66
         // to correctly resize the video area.
65
-        $('#hideVideoToolbar').on('click',
67
+        $('#toggleFilmStripButton').on('click',
66
             () => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP));
68
             () => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP));
67
 
69
 
68
         this._registerToggleFilmstripShortcut();
70
         this._registerToggleFilmstripShortcut();
162
         return !this.filmStrip.hasClass('hidden');
164
         return !this.filmStrip.hasClass('hidden');
163
     },
165
     },
164
 
166
 
165
-    setupFilmStripOnly() {
166
-        this.filmStrip.css({
167
-            padding: "0px 0px 18px 0px",
168
-            right: 0
169
-        });
167
+    /**
168
+     * Adjusts styles for film-strip only mode.
169
+     */
170
+    setFilmStripOnly() {
171
+        this.filmStrip.addClass('filmstrip__videos-filmstripOnly');
170
     },
172
     },
171
 
173
 
172
     /**
174
     /**

Loading…
Cancel
Save