From a9bdde193da5d57cbbd4e8c89afebe6de71544a5 Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Mon, 10 Apr 2017 12:59:44 -0500 Subject: [PATCH] Approach consistent filmstrip naming We seemed to be using the names "film strip" and "filmstrip" (and, consequently, their source code-conscious forms such as film-strip, FilmStrip, etc.) In order to comply with our coding style which requires a consistent one name for a given abstraction, choose one name and rename the uses of the other name. Wikipedia has a definition of a "filmstrip", I couldn't find a "film strip". I guess our abstraction can be seen as what's described there. When I google "film strip", I get results about "filmstrip" at the top. That's why I chose "filmstrip". Certain uses of "film strip" such as interfaceConfig.filmStripOnly and in the external API I left untouched in an attempt to preserve compatibility. I wasn't sure whether CSS was tangled in compatibility so I made a choice and renamed there was well. --- css/overlay/_overlay.scss | 4 +- css/themes/_light.scss | 2 +- doc/api.md | 4 +- modules/API/API.js | 2 +- modules/API/external/external_api.js | 4 +- modules/FollowMe.js | 54 +++++----- modules/UI/UI.js | 30 +++--- modules/UI/etherpad/Etherpad.js | 4 +- modules/UI/shared_video/SharedVideo.js | 4 +- .../{FilmStrip.js => Filmstrip.js} | 102 +++++++++--------- modules/UI/videolayout/VideoContainer.js | 4 +- modules/UI/videolayout/VideoLayout.js | 10 +- .../components/Conference.native.js | 6 +- react/features/film-strip/components/index.js | 1 - .../components/Filmstrip.js} | 20 ++-- .../components/Thumbnail.js | 2 +- .../components/_.native.js | 0 react/features/filmstrip/components/index.js | 1 + .../components/native/AudioMutedIndicator.js | 0 .../native/DominantSpeakerIndicator.js | 0 .../components/native/ModeratorIndicator.js | 0 .../components/native/VideoMutedIndicator.js | 0 .../components/native/index.js | 0 .../components/native/styles.js | 2 +- .../components/styles.js | 10 +- .../{film-strip => filmstrip}/index.js | 0 ...yFrame.js => FilmstripOnlyOverlayFrame.js} | 8 +- .../overlay/components/OverlayContainer.js | 41 +++---- .../overlay/components/OverlayFrame.js | 6 +- ...y.js => PageReloadFilmstripOnlyOverlay.js} | 12 +-- ...ay.js => SuspendedFilmstripOnlyOverlay.js} | 12 +-- ...erMediaPermissionsFilmstripOnlyOverlay.js} | 12 +-- service/UI/UIEvents.js | 22 ++-- 33 files changed, 192 insertions(+), 187 deletions(-) rename modules/UI/videolayout/{FilmStrip.js => Filmstrip.js} (84%) delete mode 100644 react/features/film-strip/components/index.js rename react/features/{film-strip/components/FilmStrip.js => filmstrip/components/Filmstrip.js} (86%) rename react/features/{film-strip => filmstrip}/components/Thumbnail.js (98%) rename react/features/{film-strip => filmstrip}/components/_.native.js (100%) create mode 100644 react/features/filmstrip/components/index.js rename react/features/{film-strip => filmstrip}/components/native/AudioMutedIndicator.js (100%) rename react/features/{film-strip => filmstrip}/components/native/DominantSpeakerIndicator.js (100%) rename react/features/{film-strip => filmstrip}/components/native/ModeratorIndicator.js (100%) rename react/features/{film-strip => filmstrip}/components/native/VideoMutedIndicator.js (100%) rename react/features/{film-strip => filmstrip}/components/native/index.js (100%) rename react/features/{film-strip => filmstrip}/components/native/styles.js (95%) rename react/features/{film-strip => filmstrip}/components/styles.js (92%) rename react/features/{film-strip => filmstrip}/index.js (100%) rename react/features/overlay/components/{FilmStripOnlyOverlayFrame.js => FilmstripOnlyOverlayFrame.js} (92%) rename react/features/overlay/components/{PageReloadFilmStripOnlyOverlay.js => PageReloadFilmstripOnlyOverlay.js} (81%) rename react/features/overlay/components/{SuspendedFilmStripOnlyOverlay.js => SuspendedFilmstripOnlyOverlay.js} (78%) rename react/features/overlay/components/{UserMediaPermissionsFilmStripOnlyOverlay.js => UserMediaPermissionsFilmstripOnlyOverlay.js} (83%) diff --git a/css/overlay/_overlay.scss b/css/overlay/_overlay.scss index 000bd8025..a6a43cee4 100644 --- a/css/overlay/_overlay.scss +++ b/css/overlay/_overlay.scss @@ -9,14 +9,14 @@ z-index: $overlayZ; background: $defaultBackground; &.filmstrip-only { - @include transparentBg($filmStripOnlyOverlayBg, 0.8); + @include transparentBg($filmstripOnlyOverlayBg, 0.8); } } &__container-light { @include transparentBg($defaultBackground, 0.7); &.filmstrip-only { - @include transparentBg($filmStripOnlyOverlayBg, 0.2); + @include transparentBg($filmstripOnlyOverlayBg, 0.2); } } diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 42b082549..c0a93868e 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -41,7 +41,7 @@ $overlayButtonBg: #0074E0; * Color variables **/ $defaultBackground: #474747; -$filmStripOnlyOverlayBg: #000; +$filmstripOnlyOverlayBg: #000; $reloadProgressBarBg: #0074E0; /** diff --git a/doc/api.md b/doc/api.md index 6087e1d95..a044d5592 100644 --- a/doc/api.md +++ b/doc/api.md @@ -44,7 +44,7 @@ var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement); ``` You can overwrite options set in [config.js] and [interface_config.js]. -For example, to enable the film-strip-only interface mode, you can use: +For example, to enable the filmstrip-only interface mode, you can use: ```javascript var interfaceConfigOverwrite = {filmStripOnly: true}; @@ -84,7 +84,7 @@ api.executeCommand('toggleAudio') api.executeCommand('toggleVideo') ``` -* **toggleFilmStrip** - Hides / shows the film strip. No arguments are required. +* **toggleFilmStrip** - Hides / shows the filmstrip. No arguments are required. ```javascript api.executeCommand('toggleFilmStrip') ``` diff --git a/modules/API/API.js b/modules/API/API.js index 3bb979e31..1d13fae64 100644 --- a/modules/API/API.js +++ b/modules/API/API.js @@ -49,7 +49,7 @@ function initCommands() { APP.conference.changeLocalDisplayName.bind(APP.conference), "toggle-audio": APP.conference.toggleAudioMuted.bind(APP.conference), "toggle-video": APP.conference.toggleVideoMuted.bind(APP.conference), - "toggle-film-strip": APP.UI.toggleFilmStrip, + "toggle-film-strip": APP.UI.toggleFilmstrip, "toggle-chat": APP.UI.toggleChat, "toggle-contact-list": APP.UI.toggleContactList, "toggle-share-screen": diff --git a/modules/API/external/external_api.js b/modules/API/external/external_api.js index fc107fcdf..d8797e886 100644 --- a/modules/API/external/external_api.js +++ b/modules/API/external/external_api.js @@ -337,7 +337,7 @@ class JitsiMeetExternalAPI extends EventEmitter { * passed in the arguments array. * toggleAudio - mutes / unmutes audio with no arguments. * toggleVideo - mutes / unmutes video with no arguments. - * filmStrip - hides / shows the film strip with no arguments. + * toggleFilmStrip - hides / shows the filmstrip with no arguments. * If the command doesn't require any arguments the parameter should be set * to empty array or it may be omitted. * @@ -362,7 +362,7 @@ class JitsiMeetExternalAPI extends EventEmitter { * passed in the arguments array. * toggleAudio - mutes / unmutes audio. no arguments * toggleVideo - mutes / unmutes video. no arguments - * filmStrip - hides / shows the film strip. no arguments + * toggleFilmStrip - hides / shows the filmstrip. no arguments * toggleChat - hides / shows chat. no arguments. * toggleContactList - hides / shows contact list. no arguments. * toggleShareScreen - starts / stops screen sharing. no arguments. diff --git a/modules/FollowMe.js b/modules/FollowMe.js index a506a7f91..cc039bc59 100644 --- a/modules/FollowMe.js +++ b/modules/FollowMe.js @@ -54,13 +54,13 @@ class State { this._propertyChangeCallback = propertyChangeCallback; } - get filmStripVisible () { return this._filmStripVisible; } + get filmstripVisible () { return this._filmstripVisible; } - set filmStripVisible (b) { - var oldValue = this._filmStripVisible; + set filmstripVisible (b) { + var oldValue = this._filmstripVisible; if (oldValue !== b) { - this._filmStripVisible = b; - this._firePropertyChange('filmStripVisible', oldValue, b); + this._filmstripVisible = b; + this._firePropertyChange('filmstripVisible', oldValue, b); } } @@ -102,7 +102,7 @@ class State { /** * Represents the "Follow Me" feature which enables a moderator to - * (partially) control the user experience/interface (e.g. film strip + * (partially) control the user experience/interface (e.g. filmstrip * visibility) of (other) non-moderator particiapnts. * * @author Lyubomir Marinov @@ -143,7 +143,7 @@ class FollowMe { * @private */ _setFollowMeInitialState() { - this._filmStripToggled.bind(this, this._UI.isFilmStripVisible()); + this._filmstripToggled.bind(this, this._UI.isFilmstripVisible()); var pinnedId = VideoLayout.getPinnedId(); var isPinned = false; @@ -169,9 +169,9 @@ class FollowMe { * @private */ _addFollowMeListeners () { - this.filmStripEventHandler = this._filmStripToggled.bind(this); - this._UI.addListener(UIEvents.TOGGLED_FILM_STRIP, - this.filmStripEventHandler); + this.filmstripEventHandler = this._filmstripToggled.bind(this); + this._UI.addListener(UIEvents.TOGGLED_FILMSTRIP, + this.filmstripEventHandler); var self = this; this.pinnedEndpointEventHandler = function (smallVideo, isPinned) { @@ -190,8 +190,8 @@ class FollowMe { * @private */ _removeFollowMeListeners () { - this._UI.removeListener(UIEvents.TOGGLED_FILM_STRIP, - this.filmStripEventHandler); + this._UI.removeListener(UIEvents.TOGGLED_FILMSTRIP, + this.filmstripEventHandler); this._UI.removeListener(UIEvents.TOGGLED_SHARED_DOCUMENT, this.sharedDocEventHandler); this._UI.removeListener(UIEvents.PINNED_ENDPOINT, @@ -214,14 +214,14 @@ class FollowMe { } /** - * Notifies this instance that the (visibility of the) film strip was + * Notifies this instance that the (visibility of the) filmstrip was * toggled (in the user interface of the local participant). * - * @param filmStripVisible {Boolean} {true} if the film strip was shown (as - * a result of the toggle) or {false} if the film strip was hidden + * @param filmstripVisible {Boolean} {true} if the filmstrip was shown (as a + * result of the toggle) or {false} if the filmstrip was hidden */ - _filmStripToggled (filmStripVisible) { - this._local.filmStripVisible = filmStripVisible; + _filmstripToggled (filmstripVisible) { + this._local.filmstripVisible = filmstripVisible; } /** @@ -279,7 +279,7 @@ class FollowMe { _COMMAND, { attributes: { - filmStripVisible: local.filmStripVisible, + filmstripVisible: local.filmstripVisible, nextOnStage: local.nextOnStage, sharedDocumentVisible: local.sharedDocumentVisible } @@ -316,32 +316,32 @@ class FollowMe { // Applies the received/remote command to the user experience/interface // of the local participant. - this._onFilmStripVisible(attributes.filmStripVisible); + this._onFilmstripVisible(attributes.filmstripVisible); this._onNextOnStage(attributes.nextOnStage); this._onSharedDocumentVisible(attributes.sharedDocumentVisible); } /** - * Process a film strip open / close event received from FOLLOW-ME + * Process a filmstrip open / close event received from FOLLOW-ME * command. - * @param filmStripVisible indicates if the film strip has been shown or + * @param filmstripVisible indicates if the filmstrip has been shown or * hidden * @private */ - _onFilmStripVisible(filmStripVisible) { - if (typeof filmStripVisible !== 'undefined') { + _onFilmstripVisible(filmstripVisible) { + if (typeof filmstripVisible !== 'undefined') { // XXX The Command(s) API doesn't preserve the types (of // attributes, at least) at the time of this writing so take into // account that what originated as a Boolean may be a String on // receipt. - filmStripVisible = (filmStripVisible == 'true'); + filmstripVisible = (filmstripVisible == 'true'); // FIXME The UI (module) very likely doesn't (want to) expose its // eventEmitter as a public field. I'm not sure at the time of this - // writing whether calling UI.toggleFilmStrip() is acceptable (from + // writing whether calling UI.toggleFilmstrip() is acceptable (from // a design standpoint) either. - if (filmStripVisible !== this._UI.isFilmStripVisible()) - this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP); + if (filmstripVisible !== this._UI.isFilmstripVisible()) + this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP); } } diff --git a/modules/UI/UI.js b/modules/UI/UI.js index ab8f31c9a..23b44a331 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -15,7 +15,7 @@ import SharedVideoManager from './shared_video/SharedVideo'; import Recording from "./recording/Recording"; import VideoLayout from "./videolayout/VideoLayout"; -import FilmStrip from "./videolayout/FilmStrip"; +import Filmstrip from "./videolayout/Filmstrip"; import SettingsMenu from "./side_pannels/settings/SettingsMenu"; import Profile from "./side_pannels/profile/Profile"; import Settings from "./../settings/Settings"; @@ -258,7 +258,7 @@ UI.mucJoined = function () { /*** * Handler for toggling filmstrip */ -UI.handleToggleFilmStrip = () => UI.toggleFilmStrip(); +UI.handleToggleFilmstrip = () => UI.toggleFilmstrip(); /** * Sets tooltip defaults. @@ -300,7 +300,7 @@ UI.start = function () { _setTooltipDefaults(); SideContainerToggler.init(eventEmitter); - FilmStrip.init(eventEmitter); + Filmstrip.init(eventEmitter); VideoLayout.init(eventEmitter); if (!interfaceConfig.filmStripOnly) { @@ -323,7 +323,7 @@ UI.start = function () { } else { $("body").addClass("filmstrip-only"); UI.showToolbar(); - FilmStrip.setFilmStripOnly(); + Filmstrip.setFilmstripOnly(); messageHandler.enableNotifications(false); JitsiPopover.enabled = false; } @@ -575,19 +575,19 @@ UI.updateUserRole = user => { UI.toggleSmileys = () => Chat.toggleSmileys(); /** - * Toggles film strip. + * Toggles filmstrip. */ -UI.toggleFilmStrip = function () { - var self = FilmStrip; - self.toggleFilmStrip.apply(self, arguments); +UI.toggleFilmstrip = function () { + var self = Filmstrip; + self.toggleFilmstrip.apply(self, arguments); VideoLayout.resizeVideoArea(true, false); }; /** - * Indicates if the film strip is currently visible or not. - * @returns {true} if the film strip is currently visible, otherwise + * Indicates if the filmstrip is currently visible or not. + * @returns {true} if the filmstrip is currently visible, otherwise */ -UI.isFilmStripVisible = () => FilmStrip.isFilmStripVisible(); +UI.isFilmstripVisible = () => Filmstrip.isFilmstripVisible(); /** * Toggles chat panel. @@ -1336,13 +1336,13 @@ UI.setMicrophoneButtonEnabled UI.showRingOverlay = function () { RingOverlay.show(APP.tokenData.callee, interfaceConfig.DISABLE_RINGING); - FilmStrip.toggleFilmStrip(false, false); + Filmstrip.toggleFilmstrip(false, false); }; UI.hideRingOverLay = function () { if (!RingOverlay.hide()) return; - FilmStrip.toggleFilmStrip(true, false); + Filmstrip.toggleFilmstrip(true, false); }; /** @@ -1391,8 +1391,8 @@ const UIListeners = new Map([ UIEvents.TOGGLE_PROFILE, () => APP.tokenData.isGuest && UI.toggleSidePanel("profile_container") ], [ - UIEvents.TOGGLE_FILM_STRIP, - UI.handleToggleFilmStrip + UIEvents.TOGGLE_FILMSTRIP, + UI.handleToggleFilmstrip ], [ UIEvents.FOLLOW_ME_ENABLED, enabled => (followMeHandler && followMeHandler.enableFollowMe(enabled)) diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js index db890a1c9..9043fd2fc 100644 --- a/modules/UI/etherpad/Etherpad.js +++ b/modules/UI/etherpad/Etherpad.js @@ -3,7 +3,7 @@ import VideoLayout from "../videolayout/VideoLayout"; import LargeContainer from '../videolayout/LargeContainer'; import UIEvents from "../../../service/UI/UIEvents"; -import FilmStrip from '../videolayout/FilmStrip'; +import Filmstrip from '../videolayout/Filmstrip'; /** * Etherpad options. @@ -103,7 +103,7 @@ class Etherpad extends LargeContainer { // eslint-disable-next-line no-unused-vars resize (containerWidth, containerHeight, animate) { - let height = containerHeight - FilmStrip.getFilmStripHeight(); + let height = containerHeight - Filmstrip.getFilmstripHeight(); let width = containerWidth; $(this.iframe).width(width).height(height); diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index 074a20996..35d4d59f6 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -8,7 +8,7 @@ import UIEvents from '../../../service/UI/UIEvents'; import VideoLayout from "../videolayout/VideoLayout"; import LargeContainer from '../videolayout/LargeContainer'; import SmallVideo from '../videolayout/SmallVideo'; -import FilmStrip from '../videolayout/FilmStrip'; +import Filmstrip from '../videolayout/Filmstrip'; import { dockToolbox, showToolbox } from '../../../react/features/toolbox'; @@ -606,7 +606,7 @@ class SharedVideoContainer extends LargeContainer { } resize (containerWidth, containerHeight) { - let height = containerHeight - FilmStrip.getFilmStripHeight(); + let height = containerHeight - Filmstrip.getFilmstripHeight(); let width = containerWidth; diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/Filmstrip.js similarity index 84% rename from modules/UI/videolayout/FilmStrip.js rename to modules/UI/videolayout/Filmstrip.js index 4e75d5f0c..b4becc795 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/Filmstrip.js @@ -3,38 +3,38 @@ import UIEvents from "../../../service/UI/UIEvents"; import UIUtil from "../util/UIUtil"; -const FilmStrip = { +const Filmstrip = { /** * - * @param eventEmitter the {EventEmitter} through which {FilmStrip} is to - * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILM_STRIP}). + * @param eventEmitter the {EventEmitter} through which {Filmstrip} is to + * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILMSTRIP}). */ init (eventEmitter) { this.iconMenuDownClassName = 'icon-menu-down'; this.iconMenuUpClassName = 'icon-menu-up'; - this.filmStripContainerClassName = 'filmstrip'; - this.filmStrip = $('#remoteVideos'); + this.filmstripContainerClassName = 'filmstrip'; + this.filmstrip = $('#remoteVideos'); this.eventEmitter = eventEmitter; - this._initFilmStripToolbar(); + this._initFilmstripToolbar(); this.registerListeners(); }, /** * Initializes the filmstrip toolbar. */ - _initFilmStripToolbar() { - // Do not show the toggle button in film strip only mode. + _initFilmstripToolbar() { + // Do not show the toggle button in filmstrip only mode. if (interfaceConfig.filmStripOnly) return; let toolbarContainerHTML = this._generateToolbarHTML(); - let className = this.filmStripContainerClassName; + let className = this.filmstripContainerClassName; let container = document.querySelector(`.${className}`); UIUtil.prependChild(container, toolbarContainerHTML); - let iconSelector = '#toggleFilmStripButton i'; - this.toggleFilmStripIcon = document.querySelector(iconSelector); + let iconSelector = '#toggleFilmstripButton i'; + this.toggleFilmstripIcon = document.querySelector(iconSelector); }, /** @@ -44,10 +44,10 @@ const FilmStrip = { */ _generateToolbarHTML() { let container = document.createElement('div'); - let isVisible = this.isFilmStripVisible(); + let isVisible = this.isFilmstripVisible(); container.className = 'filmstrip__toolbar'; container.innerHTML = ` - @@ -64,8 +64,8 @@ const FilmStrip = { // Firing the event instead of executing toggleFilmstrip method because // it's important to hide the filmstrip by UI.toggleFilmstrip in order // to correctly resize the video area. - $('#toggleFilmStripButton').on('click', - () => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP)); + $('#toggleFilmstripButton').on('click', + () => this.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP)); this._registerToggleFilmstripShortcut(); }, @@ -82,7 +82,7 @@ const FilmStrip = { // Firing the event instead of executing toggleFilmstrip method because // it's important to hide the filmstrip by UI.toggleFilmstrip in order // to correctly resize the video area. - let handler = () => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP); + let handler = () => this.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP); APP.keyboardshortcut.registerShortcut( shortcut, @@ -96,7 +96,7 @@ const FilmStrip = { * Changes classes of icon for showing down state */ showMenuDownIcon() { - let icon = this.toggleFilmStripIcon; + let icon = this.toggleFilmstripIcon; if(icon) { icon.classList.add(this.iconMenuDownClassName); icon.classList.remove(this.iconMenuUpClassName); @@ -107,7 +107,7 @@ const FilmStrip = { * Changes classes of icon for showing up state */ showMenuUpIcon() { - let icon = this.toggleFilmStripIcon; + let icon = this.toggleFilmstripIcon; if(icon) { icon.classList.add(this.iconMenuUpClassName); icon.classList.remove(this.iconMenuDownClassName); @@ -115,10 +115,10 @@ const FilmStrip = { }, /** - * Toggles the visibility of the film strip. + * Toggles the visibility of the filmstrip. * * @param visible optional {Boolean} which specifies the desired visibility - * of the film strip. If not specified, the visibility will be flipped + * of the filmstrip. If not specified, the visibility will be flipped * (i.e. toggled); otherwise, the visibility will be set to the specified * value. * @param {Boolean} sendAnalytics - True to send an analytics event. The @@ -129,17 +129,17 @@ const FilmStrip = { * It's important to hide the filmstrip with UI.toggleFilmstrip in order * to correctly resize the video area. */ - toggleFilmStrip(visible, sendAnalytics = true) { + toggleFilmstrip(visible, sendAnalytics = true) { const isVisibleDefined = typeof visible === 'boolean'; if (!isVisibleDefined) { - visible = this.isFilmStripVisible(); - } else if (this.isFilmStripVisible() === visible) { + visible = this.isFilmstripVisible(); + } else if (this.isFilmstripVisible() === visible) { return; } if (sendAnalytics) { JitsiMeetJS.analytics.sendEvent('toolbar.filmstrip.toggled'); } - this.filmStrip.toggleClass("hidden"); + this.filmstrip.toggleClass("hidden"); if (visible) { this.showMenuUpIcon(); @@ -147,12 +147,12 @@ const FilmStrip = { this.showMenuDownIcon(); } - // Emit/fire UIEvents.TOGGLED_FILM_STRIP. + // Emit/fire UIEvents.TOGGLED_FILMSTRIP. const eventEmitter = this.eventEmitter; if (eventEmitter) { eventEmitter.emit( - UIEvents.TOGGLED_FILM_STRIP, - this.isFilmStripVisible()); + UIEvents.TOGGLED_FILMSTRIP, + this.isFilmstripVisible()); } }, @@ -160,24 +160,24 @@ const FilmStrip = { * Shows if filmstrip is visible * @returns {boolean} */ - isFilmStripVisible() { - return !this.filmStrip.hasClass('hidden'); + isFilmstripVisible() { + return !this.filmstrip.hasClass('hidden'); }, /** - * Adjusts styles for film-strip only mode. + * Adjusts styles for filmstrip-only mode. */ - setFilmStripOnly() { - this.filmStrip.addClass('filmstrip__videos-filmstripOnly'); + setFilmstripOnly() { + this.filmstrip.addClass('filmstrip__videos-filmstripOnly'); }, /** * Returns the height of filmstrip * @returns {number} height */ - getFilmStripHeight() { - if (this.isFilmStripVisible()) { - return $(`.${this.filmStripContainerClassName}`).outerHeight(); + getFilmstripHeight() { + if (this.isFilmstripVisible()) { + return $(`.${this.filmstripContainerClassName}`).outerHeight(); } else { return 0; } @@ -187,10 +187,10 @@ 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); + getFilmstripWidth() { + return this.filmstrip.innerWidth() + - parseInt(this.filmstrip.css('paddingLeft'), 10) + - parseInt(this.filmstrip.css('paddingRight'), 10); }, /** @@ -220,17 +220,17 @@ const FilmStrip = { /** * If the videoAreaAvailableWidth is set we use this one to calculate - * the filmStrip width, because we're probably in a state where the - * film strip size hasn't been updated yet, but it will be. + * the filmstrip width, because we're probably in a state where the + * filmstrip size hasn't been updated yet, but it will be. */ let videoAreaAvailableWidth = UIUtil.getAvailableVideoWidth() - this._getFilmstripExtraPanelsWidth() - - UIUtil.parseCssInt(this.filmStrip.css('right'), 10) - - UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10) - - UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10) - - UIUtil.parseCssInt(this.filmStrip.css('borderLeftWidth'), 10) - - UIUtil.parseCssInt(this.filmStrip.css('borderRightWidth'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('right'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('paddingLeft'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('paddingRight'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('borderLeftWidth'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('borderRightWidth'), 10) - 5; let availableWidth = videoAreaAvailableWidth; @@ -297,7 +297,7 @@ const FilmStrip = { * @private */ _getFilmstripExtraPanelsWidth() { - let className = this.filmStripContainerClassName; + let className = this.filmstripContainerClassName; let width = 0; $(`.${className}`) .children() @@ -405,7 +405,7 @@ const FilmStrip = { })); } promises.push(new Promise((resolve) => { - this.filmStrip.animate({ + this.filmstrip.animate({ // adds 2 px because of small video 1px border height: remote.thumbHeight + 2 }, this._getAnimateOptions(animate, resolve)); @@ -415,7 +415,7 @@ const FilmStrip = { let { localThumb } = this.getThumbs(); let height = localThumb.height(); let fontSize = UIUtil.getIndicatorFontSize(height); - this.filmStrip.find('.indicator').animate({ + this.filmstrip.find('.indicator').animate({ fontSize }, this._getAnimateOptions(animate, resolve)); })); @@ -455,7 +455,7 @@ const FilmStrip = { } let localThumb = $("#localVideoContainer"); - let remoteThumbs = this.filmStrip.children(selector) + let remoteThumbs = this.filmstrip.children(selector) .not("#localVideoContainer"); // Exclude the local video container if it has been hidden. @@ -467,4 +467,4 @@ const FilmStrip = { } }; -export default FilmStrip; +export default Filmstrip; diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js index 26f79cff7..1c00986c9 100644 --- a/modules/UI/videolayout/VideoContainer.js +++ b/modules/UI/videolayout/VideoContainer.js @@ -1,7 +1,7 @@ /* global $, APP, interfaceConfig */ /* jshint -W101 */ -import FilmStrip from './FilmStrip'; +import Filmstrip from './Filmstrip'; import LargeContainer from './LargeContainer'; import UIEvents from "../../../service/UI/UIEvents"; import UIUtil from "../util/UIUtil"; @@ -48,7 +48,7 @@ function getDesktopVideoSize(videoWidth, let availableWidth = Math.max(videoWidth, videoSpaceWidth); let availableHeight = Math.max(videoHeight, videoSpaceHeight); - videoSpaceHeight -= FilmStrip.getFilmStripHeight(); + videoSpaceHeight -= Filmstrip.getFilmstripHeight(); if (availableWidth / aspectRatio >= videoSpaceHeight) { availableHeight = videoSpaceHeight; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 5aa648072..96a61093d 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1,7 +1,7 @@ /* global APP, $, interfaceConfig */ const logger = require("jitsi-meet-logger").getLogger(__filename); -import FilmStrip from "./FilmStrip"; +import Filmstrip from "./Filmstrip"; import UIEvents from "../../../service/UI/UIEvents"; import UIUtil from "../util/UIUtil"; @@ -270,7 +270,7 @@ var VideoLayout = { electLastVisibleVideo () { // pick the last visible video in the row // if nobody else is left, this picks the local video - let remoteThumbs = FilmStrip.getThumbs(true).remoteThumbs; + let remoteThumbs = Filmstrip.getThumbs(true).remoteThumbs; let thumbs = remoteThumbs.filter('[id!="mixedstream"]'); let lastVisible = thumbs.filter(':visible:last'); @@ -285,7 +285,7 @@ var VideoLayout = { } logger.info("Last visible video no longer exists"); - thumbs = FilmStrip.getThumbs().remoteThumbs; + thumbs = Filmstrip.getThumbs().remoteThumbs; if (thumbs.length) { let id = getPeerContainerResourceId(thumbs[0]); if (remoteVideos[id]) { @@ -530,9 +530,9 @@ var VideoLayout = { forceUpdate = false, onComplete = null) { const { localVideo, remoteVideo } - = FilmStrip.calculateThumbnailSize(); + = Filmstrip.calculateThumbnailSize(); - FilmStrip.resizeThumbnails(localVideo, remoteVideo, + Filmstrip.resizeThumbnails(localVideo, remoteVideo, animate, forceUpdate) .then(function () { if (onComplete && typeof onComplete === "function") diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index 9fe5bf8b2..91492d0b1 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -4,7 +4,7 @@ import { connect as reactReduxConnect } from 'react-redux'; import { connect, disconnect } from '../../base/connection'; import { DialogContainer } from '../../base/dialog'; import { Container } from '../../base/react'; -import { FilmStrip } from '../../film-strip'; +import { Filmstrip } from '../../filmstrip'; import { LargeVideo } from '../../large-video'; import { setToolboxVisible, Toolbox } from '../../toolbox'; @@ -133,7 +133,7 @@ class Conference extends Component { - + @@ -155,7 +155,7 @@ class Conference extends Component { /** * Changes the value of the toolboxVisible state, thus allowing us to switch - * between Toolbox and FilmStrip and change their visibility. + * between Toolbox and Filmstrip and change their visibility. * * @private * @returns {void} diff --git a/react/features/film-strip/components/index.js b/react/features/film-strip/components/index.js deleted file mode 100644 index 3b7d3dc20..000000000 --- a/react/features/film-strip/components/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as FilmStrip } from './FilmStrip'; diff --git a/react/features/film-strip/components/FilmStrip.js b/react/features/filmstrip/components/Filmstrip.js similarity index 86% rename from react/features/film-strip/components/FilmStrip.js rename to react/features/filmstrip/components/Filmstrip.js index 889aa472d..7cd429c78 100644 --- a/react/features/film-strip/components/FilmStrip.js +++ b/react/features/filmstrip/components/Filmstrip.js @@ -8,13 +8,13 @@ import Thumbnail from './Thumbnail'; import { styles } from './_'; /** - * React component for film strip. + * React component for filmstrip. * * @extends Component */ -class FilmStrip extends Component { +class Filmstrip extends Component { /** - * FilmStrip component's property types. + * Filmstrip component's property types. * * @static */ @@ -28,7 +28,7 @@ class FilmStrip extends Component { _participants: React.PropTypes.array, /** - * The indicator which determines whether the film strip is visible. + * The indicator which determines whether the filmstrip is visible. * * @private * @type {boolean} @@ -44,13 +44,13 @@ class FilmStrip extends Component { render() { return ( +
{ t(title) } @@ -54,9 +54,9 @@ class PageReloadFilmStripOnlyOverlay extends AbstractPageReloadOverlay { { this._renderProgressBar() } - + ); } } -export default translate(PageReloadFilmStripOnlyOverlay); +export default translate(PageReloadFilmstripOnlyOverlay); diff --git a/react/features/overlay/components/SuspendedFilmStripOnlyOverlay.js b/react/features/overlay/components/SuspendedFilmstripOnlyOverlay.js similarity index 78% rename from react/features/overlay/components/SuspendedFilmStripOnlyOverlay.js rename to react/features/overlay/components/SuspendedFilmstripOnlyOverlay.js index d08a47593..b63a03e76 100644 --- a/react/features/overlay/components/SuspendedFilmStripOnlyOverlay.js +++ b/react/features/overlay/components/SuspendedFilmstripOnlyOverlay.js @@ -2,16 +2,16 @@ import React, { Component } from 'react'; import { translate, translateToHTML } from '../../base/i18n'; -import FilmStripOnlyOverlayFrame from './FilmStripOnlyOverlayFrame'; +import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame'; import ReloadButton from './ReloadButton'; /** * Implements a React Component for suspended overlay for filmstrip only mode. * Shown when suspended is detected. */ -class SuspendedFilmStripOnlyOverlay extends Component { +class SuspendedFilmstripOnlyOverlay extends Component { /** - * SuspendedFilmStripOnlyOverlay component's property types. + * SuspendedFilmstripOnlyOverlay component's property types. * * @static */ @@ -35,7 +35,7 @@ class SuspendedFilmStripOnlyOverlay extends Component { const { t } = this.props; return ( - +
{ t('suspendedoverlay.title') } @@ -45,9 +45,9 @@ class SuspendedFilmStripOnlyOverlay extends Component {
- + ); } } -export default translate(SuspendedFilmStripOnlyOverlay); +export default translate(SuspendedFilmstripOnlyOverlay); diff --git a/react/features/overlay/components/UserMediaPermissionsFilmStripOnlyOverlay.js b/react/features/overlay/components/UserMediaPermissionsFilmstripOnlyOverlay.js similarity index 83% rename from react/features/overlay/components/UserMediaPermissionsFilmStripOnlyOverlay.js rename to react/features/overlay/components/UserMediaPermissionsFilmstripOnlyOverlay.js index 244b9a350..7f3399704 100644 --- a/react/features/overlay/components/UserMediaPermissionsFilmStripOnlyOverlay.js +++ b/react/features/overlay/components/UserMediaPermissionsFilmstripOnlyOverlay.js @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import { translate, translateToHTML } from '../../base/i18n'; -import FilmStripOnlyOverlayFrame from './FilmStripOnlyOverlayFrame'; +import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame'; /** * Implements a React Component for overlay with guidance how to proceed with * gUM prompt. This component will be displayed only for filmstrip only mode. */ -class UserMediaPermissionsFilmStripOnlyOverlay extends Component { +class UserMediaPermissionsFilmstripOnlyOverlay extends Component { /** - * UserMediaPermissionsFilmStripOnlyOverlay component's property types. + * UserMediaPermissionsFilmstripOnlyOverlay component's property types. * * @static */ @@ -44,7 +44,7 @@ class UserMediaPermissionsFilmStripOnlyOverlay extends Component { const textKey = `userMedia.${this.props.browser}GrantPermissions`; return ( -
@@ -60,9 +60,9 @@ class UserMediaPermissionsFilmStripOnlyOverlay extends Component { }
- + ); } } -export default translate(UserMediaPermissionsFilmStripOnlyOverlay); +export default translate(UserMediaPermissionsFilmstripOnlyOverlay); diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index a17f11ed0..8720e50b7 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -45,25 +45,25 @@ export default { */ TOGGLE_PROFILE: "UI.toggle_profile", /** - * Notifies that a command to toggle the film strip has been issued. The + * Notifies that a command to toggle the filmstrip has been issued. The * event may optionally specify a {Boolean} (primitive) value to assign to - * the visibility of the film strip (i.e. the event may act as a setter). - * The very toggling of the film strip may or may not occurred at the time + * the visibility of the filmstrip (i.e. the event may act as a setter). + * The very toggling of the filmstrip may or may not occurred at the time * of the receipt of the event depending on the position of the receiving * event listener in relation to the event listener which carries out the - * command to toggle the film strip. + * command to toggle the filmstrip. * - * @see {TOGGLED_FILM_STRIP} + * @see {TOGGLED_FILMSTRIP} */ - TOGGLE_FILM_STRIP: "UI.toggle_film_strip", + TOGGLE_FILMSTRIP: "UI.toggle_filmstrip", /** - * Notifies that the film strip was (actually) toggled. The event supplies - * a {Boolean} (primitive) value indicating the visibility of the film - * strip after the toggling (at the time of the event emission). + * Notifies that the filmstrip was (actually) toggled. The event supplies a + * {Boolean} (primitive) value indicating the visibility of the filmstrip + * after the toggling (at the time of the event emission). * - * @see {TOGGLE_FILM_STRIP} + * @see {TOGGLE_FILMSTRIP} */ - TOGGLED_FILM_STRIP: "UI.toggled_film_strip", + TOGGLED_FILMSTRIP: "UI.toggled_filmstrip", TOGGLE_SCREENSHARING: "UI.toggle_screensharing", TOGGLED_SHARED_DOCUMENT: "UI.toggled_shared_document", CONTACT_CLICKED: "UI.contact_clicked",