Fixes showToolbar in filmstrip-only mode and renames some funcs

This commit is contained in:
yanas 2017-04-06 13:28:47 -05:00 committed by Lyubo Marinov
parent cb0eef9edd
commit 031f2dfeb8
2 changed files with 24 additions and 22 deletions

View File

@ -322,8 +322,8 @@ UI.start = function () {
SidePanels.init(eventEmitter); SidePanels.init(eventEmitter);
} else { } else {
$("body").addClass("filmstrip-only"); $("body").addClass("filmstrip-only");
UIUtil.setVisible('mainToolbarContainer', false); UI.showToolbar();
FilmStrip.setupFilmStripOnly(); FilmStrip.setFilmStripOnly();
messageHandler.enableNotifications(false); messageHandler.enableNotifications(false);
JitsiPopover.enabled = false; JitsiPopover.enabled = false;
} }

View File

@ -20,36 +20,38 @@ const FilmStrip = {
}, },
/** /**
* Initializes the filmstrip toolbar * Initializes the filmstrip toolbar.
*/ */
_initFilmStripToolbar() { _initFilmStripToolbar() {
let toolbar = this._generateFilmStripToolbar(); // Do not show the toggle button in film strip only mode.
if (interfaceConfig.filmStripOnly)
return;
let toolbarContainerHTML = this._generateToolbarHTML();
let className = this.filmStripContainerClassName; let className = this.filmStripContainerClassName;
let container = document.querySelector(`.${className}`); let container = document.querySelector(`.${className}`);
UIUtil.prependChild(container, toolbar); UIUtil.prependChild(container, toolbarContainerHTML);
let iconSelector = '#hideVideoToolbar i'; let iconSelector = '#toggleFilmStripButton i';
this.toggleFilmStripIcon = document.querySelector(iconSelector); this.toggleFilmStripIcon = document.querySelector(iconSelector);
}, },
/** /**
* Generates HTML layout for filmstrip toolbar * Generates HTML layout for filmstrip toggle button and wrapping container.
* @returns {HTMLElement} * @returns {HTMLElement}
* @private * @private
*/ */
_generateFilmStripToolbar() { _generateToolbarHTML() {
let container = document.createElement('div'); let container = document.createElement('div');
let isVisible = this.isFilmStripVisible(); let isVisible = this.isFilmStripVisible();
container.className = 'filmstrip__toolbar'; container.className = 'filmstrip__toolbar';
if(!interfaceConfig.filmStripOnly) {
container.innerHTML = ` container.innerHTML = `
<button id="hideVideoToolbar"> <button id="toggleFilmStripButton">
<i class="icon-menu-${isVisible ? 'down' : 'up'}"> <i class="icon-menu-${isVisible ? 'down' : 'up'}">
</i> </i>
</button> </button>
`; `;
}
return container; return container;
}, },
@ -62,7 +64,7 @@ const FilmStrip = {
// Firing the event instead of executing toggleFilmstrip method because // Firing the event instead of executing toggleFilmstrip method because
// it's important to hide the filmstrip by UI.toggleFilmstrip in order // it's important to hide the filmstrip by UI.toggleFilmstrip in order
// to correctly resize the video area. // to correctly resize the video area.
$('#hideVideoToolbar').on('click', $('#toggleFilmStripButton').on('click',
() => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP)); () => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP));
this._registerToggleFilmstripShortcut(); this._registerToggleFilmstripShortcut();
@ -162,11 +164,11 @@ const FilmStrip = {
return !this.filmStrip.hasClass('hidden'); return !this.filmStrip.hasClass('hidden');
}, },
setupFilmStripOnly() { /**
this.filmStrip.css({ * Adjusts styles for film-strip only mode.
padding: "0px 0px 18px 0px", */
right: 0 setFilmStripOnly() {
}); this.filmStrip.addClass('filmstrip__videos-filmstripOnly');
}, },
/** /**