From 51d48e18c6350d1f1716794da29e136426ee0cc5 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 3 Nov 2016 13:44:17 +0200 Subject: [PATCH 1/7] Refactor filmstrip module --- modules/UI/videolayout/FilmStrip.js | 88 ++++++++++++++++++++--------- 1 file changed, 60 insertions(+), 28 deletions(-) diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index fe75db12c..d1db0fcaf 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/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 = { `; - // 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); }, /** @@ -62,7 +94,7 @@ const FilmStrip = { * (i.e. toggled); otherwise, the visibility will be set to the specified * value. */ - toggleFilmStrip (visible) { + toggleFilmStrip(visible) { if (typeof visible === 'boolean' && this.isFilmStripVisible() == visible) { return; @@ -79,18 +111,18 @@ const FilmStrip = { } }, - isFilmStripVisible () { + isFilmStripVisible() { return !this.filmStrip.hasClass('hidden'); }, - setupFilmStripOnly () { + setupFilmStripOnly() { this.filmStrip.css({ padding: "0px 0px 18px 0px", right: 0 }); }, - getFilmStripHeight () { + getFilmStripHeight() { if (this.isFilmStripVisible()) { return this.filmStrip.outerHeight(); } else { @@ -98,7 +130,7 @@ const FilmStrip = { } }, - getFilmStripWidth () { + getFilmStripWidth() { return this.filmStrip.innerWidth() - parseInt(this.filmStrip.css('paddingLeft'), 10) - parseInt(this.filmStrip.css('paddingRight'), 10); @@ -115,7 +147,7 @@ const FilmStrip = { /** * Normalizes local and remote thumbnail ratios */ - normalizeThumbnailRatio () { + normalizeThumbnailRatio() { let remoteHeightRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_HEIGHT; let remoteWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_WIDTH; @@ -251,7 +283,7 @@ const FilmStrip = { }; }, - resizeThumbnails (local, remote, + resizeThumbnails(local, remote, animate = false, forceUpdate = false) { return new Promise(resolve => { @@ -289,7 +321,7 @@ const FilmStrip = { }); }, - getThumbs (only_visible = false) { + getThumbs(only_visible = false) { let selector = 'span'; if (only_visible) { selector += ':visible'; From 1328870a2b60991f3f1701527401c45789d3ff9b Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 3 Nov 2016 15:02:03 +0200 Subject: [PATCH 2/7] fix bug with F shortcut --- modules/UI/videolayout/FilmStrip.js | 34 +++++++++++++++++------------ 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index d1db0fcaf..d902ce5c3 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -14,7 +14,6 @@ const FilmStrip = { this.iconMenuUpClassName = 'icon-menu-up'; this.filmStrip = $('#remoteVideos'); this.eventEmitter = eventEmitter; - this.filmStripIsVisible = true; this._initFilmStripToolbar(); this.registerListeners(); }, @@ -39,11 +38,12 @@ const FilmStrip = { */ _generateFilmStripToolbar() { let container = document.createElement('div'); + let isVisible = this.isFilmStripVisible(); container.className = 'filmstripToolbar'; container.innerHTML = ` `; @@ -55,17 +55,15 @@ const FilmStrip = { * Attach 'click' listener to "hide filmstrip" button */ registerListeners() { - $('#videospace').on('click', '#hideVideoToolbar', () => { + let toggleFilmstripMethod = this.toggleFilmStrip.bind(this); + let selector = '#hideVideoToolbar'; + $('#videospace').on('click', selector, toggleFilmstripMethod); - this.filmStripIsVisible = !this.filmStripIsVisible; - this.toggleFilmStrip(this.filmStripIsVisible); - - if (this.filmStripIsVisible) { - this.showMenuDownIcon(); - } else { - this.showMenuUpIcon(); - } - }); + let eventEmitter = this.eventEmitter; + let event = UIEvents.TOGGLE_FILM_STRIP; + if (eventEmitter) { + eventEmitter.addListener(event, toggleFilmstripMethod); + } }, /** @@ -95,13 +93,21 @@ const FilmStrip = { * value. */ toggleFilmStrip(visible) { - if (typeof visible === 'boolean' - && this.isFilmStripVisible() == visible) { + let isVisibleDefined = typeof visible === 'boolean'; + if (!isVisibleDefined) { + visible = this.isFilmStripVisible(); + } else if (this.isFilmStripVisible() === visible) { return; } this.filmStrip.toggleClass("hidden"); + if (!visible) { + this.showMenuDownIcon(); + } else { + this.showMenuUpIcon(); + } + // Emit/fire UIEvents.TOGGLED_FILM_STRIP. var eventEmitter = this.eventEmitter; if (eventEmitter) { From 69e4f49e7466522f2f6decab16508e694c2ef09b Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 3 Nov 2016 15:12:45 +0200 Subject: [PATCH 3/7] Add bunch of JSDocs --- modules/UI/videolayout/FilmStrip.js | 41 +++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index d902ce5c3..2ed3c1787 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -117,6 +117,10 @@ const FilmStrip = { } }, + /** + * Shows if filmstrip is visible + * @returns {boolean} + */ isFilmStripVisible() { return !this.filmStrip.hasClass('hidden'); }, @@ -128,6 +132,10 @@ const FilmStrip = { }); }, + /** + * Returns the height of filmstrip + * @returns {number} height + */ getFilmStripHeight() { if (this.isFilmStripVisible()) { return this.filmStrip.outerHeight(); @@ -136,12 +144,20 @@ const FilmStrip = { } }, + /** + * Returns the width of filmstip + * @returns {number} width + */ getFilmStripWidth() { return this.filmStrip.innerWidth() - parseInt(this.filmStrip.css('paddingLeft'), 10) - parseInt(this.filmStrip.css('paddingRight'), 10); }, + /** + * Calculates the size for thumbnails: local and remote one + * @returns {*|{localVideo, remoteVideo}} + */ calculateThumbnailSize() { let availableSizes = this.calculateAvailableSize(); let width = availableSizes.availableWidth; @@ -184,6 +200,11 @@ const FilmStrip = { return { localRatio, remoteRatio }; }, + /** + * Calculates available size for one thumbnail according to + * the current window size + * @returns {{availableWidth: number, availableHeight: number}} + */ calculateAvailableSize() { let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT; let thumbs = this.getThumbs(true); @@ -259,6 +280,13 @@ const FilmStrip = { return { availableWidth, availableHeight }; }, + /** + * Takes the available size for thumbnail and calculates + * final size of thumbnails + * @param availableWidth + * @param availableHeight + * @returns {{localVideo, remoteVideo}} + */ calculateThumbnailSizeFromAvailable(availableWidth, availableHeight) { let { localRatio, remoteRatio } = this.normalizeThumbnailRatio(); let { remoteThumbs } = this.getThumbs(true); @@ -289,6 +317,14 @@ const FilmStrip = { }; }, + /** + * Resizes thumbnails + * @param local + * @param remote + * @param animate + * @param forceUpdate + * @returns {Promise} + */ resizeThumbnails(local, remote, animate = false, forceUpdate = false) { @@ -327,6 +363,11 @@ const FilmStrip = { }); }, + /** + * Returns thumbnails of the filmstrip + * @param only_visible + * @returns {object} thumbnails + */ getThumbs(only_visible = false) { let selector = 'span'; if (only_visible) { From 02ae3b30538948bec672471c3bb6430218705328 Mon Sep 17 00:00:00 2001 From: Ilya Daynatovich Date: Thu, 3 Nov 2016 16:18:28 +0200 Subject: [PATCH 4/7] Add wrapper --- css/_filmstrip.scss | 76 +++++++++++++++++++++++++++ css/_videolayout_default.scss | 79 ----------------------------- css/main.scss | 1 + index.html | 28 +++++----- modules/UI/videolayout/FilmStrip.js | 4 +- 5 files changed, 94 insertions(+), 94 deletions(-) create mode 100644 css/_filmstrip.scss diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss new file mode 100644 index 000000000..f6c3754bd --- /dev/null +++ b/css/_filmstrip.scss @@ -0,0 +1,76 @@ +.filmstrip { + &__videos { + @include flex(); + flex-direction: row-reverse; + flex-wrap: nowrap; + justify-content: flex-start; + + position:absolute; + text-align:right; + height:196px; + padding: 10px 10px 17px 5px; + bottom: 0; + right: 0; + width:auto; + border: 2px solid transparent; + z-index: 5; + transition: bottom 2s; + overflow: visible !important; + font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/ + + &.hidden { + bottom: -196px; + } + + .videocontainer { + display: none; + position: relative; + background-size: contain; + border: 2px solid transparent; + border-radius:1px; + margin: 0 $thumbnailVideoMargin; + + &.videoContainerFocused, &:hover { + cursor: hand; + } + + /** + * Focused video thumbnail. + */ + &.videoContainerFocused { + transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + -webkit-animation-name: greyPulse; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: 1; + border: 2px solid $videoThumbnailSelected !important; + box-shadow: inset 0 0 3px $videoThumbnailSelected, + 0 0 3px $videoThumbnailSelected !important; + } + + /** + * Hovered video thumbnail. + */ + &:hover { + cursor: hand; + border: 2px solid $videoThumbnailHovered; + box-shadow: inset 0 0 3px $videoThumbnailHovered, + 0 0 3px $videoThumbnailHovered; + } + + /* With TemasysWebRTC plugin element is used + instead of