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

@@ -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);
         }
     }
 

css/themes/_light.scss

@@ -41,7 +41,7 @@ $overlayButtonBg: #0074E0;
 * Color variables
 **/
 $defaultBackground: #474747;
-$filmStripOnlyOverlayBg: #000;
+$filmstripOnlyOverlayBg: #000;
 $reloadProgressBarBg: #0074E0;
 
 /**

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')
 ```

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":

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.

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) {
+    set filmstripVisible (b) {
-        var oldValue = this._filmStripVisible;
+        var oldValue = this._filmstripVisible;
         if (oldValue !== b) {
-            this._filmStripVisible = b;
+            this._filmstripVisible = b;
-            this._firePropertyChange('filmStripVisible', oldValue, 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.filmstripEventHandler = this._filmstripToggled.bind(this);
-        this._UI.addListener(UIEvents.TOGGLED_FILM_STRIP,
+        this._UI.addListener(UIEvents.TOGGLED_FILMSTRIP,
-                            this.filmStripEventHandler);
+                            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._UI.removeListener(UIEvents.TOGGLED_FILMSTRIP,
-                                this.filmStripEventHandler);
+                                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
+     * @param filmstripVisible {Boolean} {true} if the filmstrip was shown (as a
-     * a result of the toggle) or {false} if the film strip was hidden
+     * result of the toggle) or {false} if the filmstrip was hidden
      */
-    _filmStripToggled (filmStripVisible) {
+    _filmstripToggled (filmstripVisible) {
-        this._local.filmStripVisible = 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) {
+    _onFilmstripVisible(filmstripVisible) {
-        if (typeof filmStripVisible !== 'undefined') {
+        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())
+            if (filmstripVisible !== this._UI.isFilmstripVisible())
-                this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP);
+                this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
         }
     }
 

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 () {
+UI.toggleFilmstrip = function () {
-    var self = FilmStrip;
+    var self = Filmstrip;
-    self.toggleFilmStrip.apply(self, arguments);
+    self.toggleFilmstrip.apply(self, arguments);
     VideoLayout.resizeVideoArea(true, false);
 };
 
 /**
- * Indicates if the film strip is currently visible or not.
+ * Indicates if the filmstrip is currently visible or not.
- * @returns {true} if the film strip is currently visible, otherwise
+ * @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,
+        UIEvents.TOGGLE_FILMSTRIP,
-        UI.handleToggleFilmStrip
+        UI.handleToggleFilmstrip
     ], [
         UIEvents.FOLLOW_ME_ENABLED,
         enabled => (followMeHandler && followMeHandler.enableFollowMe(enabled))

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);

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;
 

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
+     * @param eventEmitter the {EventEmitter} through which {Filmstrip} is to
-     * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILM_STRIP}).
+     * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILMSTRIP}).
      */
     init (eventEmitter) {
         this.iconMenuDownClassName = 'icon-menu-down';
         this.iconMenuUpClassName = 'icon-menu-up';
-        this.filmStripContainerClassName = 'filmstrip';
+        this.filmstripContainerClassName = 'filmstrip';
-        this.filmStrip = $('#remoteVideos');
+        this.filmstrip = $('#remoteVideos');
         this.eventEmitter = eventEmitter;
-        this._initFilmStripToolbar();
+        this._initFilmstripToolbar();
         this.registerListeners();
     },
 
     /**
      * Initializes the filmstrip toolbar.
      */
-    _initFilmStripToolbar() {
+    _initFilmstripToolbar() {
-        // Do not show the toggle button in film strip only mode.
+        // 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';
+        let iconSelector = '#toggleFilmstripButton i';
-        this.toggleFilmStripIcon = document.querySelector(iconSelector);
+        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 = `
-            <button id="toggleFilmStripButton">
+            <button id="toggleFilmstripButton">
                 <i class="icon-menu-${isVisible ? 'down' : 'up'}">
                 </i>
             </button>
@@ -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',
+        $('#toggleFilmstripButton').on('click',
-            () => this.eventEmitter.emit(UIEvents.TOGGLE_FILM_STRIP));
+            () => 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();
+            visible = this.isFilmstripVisible();
-        } else if (this.isFilmStripVisible() === visible) {
+        } 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,
+                UIEvents.TOGGLED_FILMSTRIP,
-                this.isFilmStripVisible());
+                this.isFilmstripVisible());
         }
     },
 
@@ -160,24 +160,24 @@ const FilmStrip = {
      * Shows if filmstrip is visible
      * @returns {boolean}
      */
-    isFilmStripVisible() {
+    isFilmstripVisible() {
-        return !this.filmStrip.hasClass('hidden');
+        return !this.filmstrip.hasClass('hidden');
     },
 
     /**
-     * Adjusts styles for film-strip only mode.
+     * Adjusts styles for filmstrip-only mode.
      */
-    setFilmStripOnly() {
+    setFilmstripOnly() {
-        this.filmStrip.addClass('filmstrip__videos-filmstripOnly');
+        this.filmstrip.addClass('filmstrip__videos-filmstripOnly');
     },
 
     /**
      * Returns the height of filmstrip
      * @returns {number} height
      */
-    getFilmStripHeight() {
+    getFilmstripHeight() {
-        if (this.isFilmStripVisible()) {
+        if (this.isFilmstripVisible()) {
-            return $(`.${this.filmStripContainerClassName}`).outerHeight();
+            return $(`.${this.filmstripContainerClassName}`).outerHeight();
         } else {
             return 0;
         }
@@ -187,10 +187,10 @@ const FilmStrip = {
      * Returns the width of filmstip
      * @returns {number} width
      */
-    getFilmStripWidth() {
+    getFilmstripWidth() {
-        return this.filmStrip.innerWidth()
+        return this.filmstrip.innerWidth()
-            - parseInt(this.filmStrip.css('paddingLeft'), 10)
+            - parseInt(this.filmstrip.css('paddingLeft'), 10)
-            - parseInt(this.filmStrip.css('paddingRight'), 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
+         * the filmstrip width, because we're probably in a state where the
-         * film strip size hasn't been updated yet, but it will be.
+         * 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('right'), 10)
-            - UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10)
+            - UIUtil.parseCssInt(this.filmstrip.css('paddingLeft'), 10)
-            - UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10)
+            - UIUtil.parseCssInt(this.filmstrip.css('paddingRight'), 10)
-            - UIUtil.parseCssInt(this.filmStrip.css('borderLeftWidth'), 10)
+            - UIUtil.parseCssInt(this.filmstrip.css('borderLeftWidth'), 10)
-            - UIUtil.parseCssInt(this.filmStrip.css('borderRightWidth'), 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;

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;

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")

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 {
                 <LargeVideo />
 
                 <Toolbox />
-                <FilmStrip />
+                <Filmstrip />
 
                 <DialogContainer />
             </Container>
@@ -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}

react/features/film-strip/components/index.js

@@ -1 +0,0 @@
-export { default as FilmStrip } from './FilmStrip';

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 (
             <Container
-                style = { styles.filmStrip }
+                style = { styles.filmstrip }
                 visible = { this.props._visible }>
                 <ScrollView
 
                     // eslint-disable-next-line react/jsx-curly-spacing
                     contentContainerStyle = {
-                        styles.filmStripScrollViewContentContainer
+                        styles.filmstripScrollViewContentContainer
                     } // eslint-disable-line react/jsx-curly-spacing
                     horizontal = { true }
                     showsHorizontalScrollIndicator = { false }
@@ -123,10 +123,10 @@ function _mapStateToProps(state) {
         _participants: state['features/base/participants'],
 
         /**
-         * The indicator which determines whether the film strip is visible.
+         * The indicator which determines whether the filmstrip is visible.
          *
-         * XXX The React Component FilmStrip is used on mobile only at the time
+         * XXX The React Component Filmstrip is used on mobile only at the time
-         * of this writing and on mobile the film strip is visible when the
+         * of this writing and on mobile the filmstrip is visible when the
          * toolbar is not.
          *
          * @private
@@ -136,4 +136,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default connect(_mapStateToProps)(FilmStrip);
+export default connect(_mapStateToProps)(Filmstrip);

react/features/filmstrip/components/Thumbnail.js

@@ -145,7 +145,7 @@ class Thumbnail extends Component {
  */
 function _mapStateToProps(state, ownProps) {
     // We need read-only access to the state of features/large-video so that the
-    // film strip doesn't render the video of the participant who is rendered on
+    // filmstrip doesn't render the video of the participant who is rendered on
     // the stage i.e. as a large video.
     const largeVideo = state['features/large-video'];
     const tracks = state['features/base/tracks'];

react/features/filmstrip/components/index.js

@@ -0,0 +1 @@
+export { default as Filmstrip } from './Filmstrip';

react/features/filmstrip/components/native/styles.js

@@ -15,7 +15,7 @@ const indicator = {
 };
 
 /**
- * Native-specific styles for the film strip.
+ * Native-specific styles for the filmstrip.
  */
 export const styles = createStyleSheet(platformIndependentStyles, {
 

react/features/filmstrip/components/styles.js

@@ -1,7 +1,7 @@
 import { BoxModel, ColorPalette } from '../../base/styles';
 
 /**
- * Film strip related styles common to both Web and native.
+ * Filmstrip related styles common to both Web and native.
  */
 export const styles = {
     /**
@@ -25,9 +25,9 @@ export const styles = {
     },
 
     /**
-     * The style of the Container which represents the very film strip.
+     * The style of the Container which represents the very filmstrip.
      */
-    filmStrip: {
+    filmstrip: {
         alignItems: 'flex-end',
         alignSelf: 'stretch',
         bottom: BoxModel.margin,
@@ -40,10 +40,10 @@ export const styles = {
 
     /**
      * The style of the content container of the ScrollView which is placed
-     * inside filmStrip and which contains the participants' thumbnails in order
+     * inside filmstrip and which contains the participants' thumbnails in order
      * to allow scrolling through them if they do not fit within the display.
      */
-    filmStripScrollViewContentContainer: {
+    filmstripScrollViewContentContainer: {
         paddingHorizontal: BoxModel.padding
     },
 

react/features/overlay/components/FilmstripOnlyOverlayFrame.js

@@ -13,9 +13,9 @@ import OverlayFrame from './OverlayFrame';
  * Implements a React Component for the frame of the overlays in filmstrip only
  * mode.
  */
-class FilmStripOnlyOverlayFrame extends Component {
+class FilmstripOnlyOverlayFrame extends Component {
     /**
-     * FilmStripOnlyOverlayFrame component's property types.
+     * FilmstripOnlyOverlayFrame component's property types.
      *
      * @static
      */
@@ -105,7 +105,7 @@ class FilmStripOnlyOverlayFrame extends Component {
 }
 
 /**
- * Maps (parts of) the Redux state to the associated FilmStripOnlyOverlayFrame
+ * Maps (parts of) the Redux state to the associated FilmstripOnlyOverlayFrame
  * props.
  *
  * @param {Object} state - The Redux state.
@@ -130,4 +130,4 @@ function _mapStateToProps(state) {
     };
 }
 
-export default connect(_mapStateToProps)(FilmStripOnlyOverlayFrame);
+export default connect(_mapStateToProps)(FilmstripOnlyOverlayFrame);

react/features/overlay/components/OverlayContainer.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import PageReloadFilmStripOnlyOverlay from './PageReloadFilmStripOnlyOverlay';
+import PageReloadFilmstripOnlyOverlay from './PageReloadFilmstripOnlyOverlay';
 import PageReloadOverlay from './PageReloadOverlay';
-import SuspendedFilmStripOnlyOverlay from './SuspendedFilmStripOnlyOverlay';
+import SuspendedFilmstripOnlyOverlay from './SuspendedFilmstripOnlyOverlay';
 import SuspendedOverlay from './SuspendedOverlay';
-import UserMediaPermissionsFilmStripOnlyOverlay
+import UserMediaPermissionsFilmstripOnlyOverlay
-    from './UserMediaPermissionsFilmStripOnlyOverlay';
+    from './UserMediaPermissionsFilmstripOnlyOverlay';
 import UserMediaPermissionsOverlay from './UserMediaPermissionsOverlay';
 
 declare var APP: Object;
@@ -108,13 +108,14 @@ class OverlayContainer extends Component {
      */
     constructor(props) {
         super(props);
+
         this.state = {
             /**
-             * Indicates whether the film strip only mode is enabled or not.
+             * Indicates whether the filmstrip only mode is enabled or not.
              *
              * @type {boolean}
              */
-            filmStripOnly: interfaceConfig.filmStripOnly
+            filmstripOnly: interfaceConfig.filmStripOnly
         };
     }
 
@@ -141,31 +142,35 @@ class OverlayContainer extends Component {
      * @public
      */
     render() {
-        const filmStripOnlyMode = this.state.filmStripOnly;
+        const { filmstripOnly } = this.state;
         let overlayComponent, props;
 
         if (this.props._connectionEstablished && this.props._haveToReload) {
-            overlayComponent = filmStripOnlyMode
+            overlayComponent
-                ? PageReloadFilmStripOnlyOverlay : PageReloadOverlay;
+                = filmstripOnly
+                    ? PageReloadFilmstripOnlyOverlay
+                    : PageReloadOverlay;
             props = {
                 isNetworkFailure: this.props._isNetworkFailure,
                 reason: this.props._reason
             };
         } else if (this.props._suspendDetected) {
-            overlayComponent = filmStripOnlyMode
+            overlayComponent
-                ? SuspendedFilmStripOnlyOverlay : SuspendedOverlay;
+                = filmstripOnly
+                    ? SuspendedFilmstripOnlyOverlay
+                    : SuspendedOverlay;
         } else if (this.props._isMediaPermissionPromptVisible) {
-            overlayComponent = filmStripOnlyMode
+            overlayComponent
-                ? UserMediaPermissionsFilmStripOnlyOverlay
+                = filmstripOnly
+                    ? UserMediaPermissionsFilmstripOnlyOverlay
                     : UserMediaPermissionsOverlay;
             props = { browser: this.props._browser };
         }
 
-        if (overlayComponent) {
+        return (
-            return React.createElement(overlayComponent, props);
+            overlayComponent
-        }
+                ? React.createElement(overlayComponent, props)
-
+                : null);
-        return null;
     }
 }
 

react/features/overlay/components/OverlayFrame.js

@@ -38,11 +38,11 @@ export default class OverlayFrame extends Component {
 
         this.state = {
             /**
-             * Indicates whether the film strip only mode is enabled or not.
+             * Indicates whether the filmstrip only mode is enabled or not.
              *
              * @type {boolean}
              */
-            filmStripOnly: interfaceConfig.filmStripOnly
+            filmstripOnly: interfaceConfig.filmStripOnly
         };
     }
 
@@ -57,7 +57,7 @@ export default class OverlayFrame extends Component {
             ? 'overlay__container-light' : 'overlay__container';
         let contentClass = 'overlay__content';
 
-        if (this.state.filmStripOnly) {
+        if (this.state.filmstripOnly) {
             containerClass += ' filmstrip-only';
             contentClass += ' filmstrip-only';
         }

react/features/overlay/components/PageReloadFilmstripOnlyOverlay.js

@@ -3,16 +3,16 @@ import React from 'react';
 import { translate } from '../../base/i18n';
 
 import AbstractPageReloadOverlay from './AbstractPageReloadOverlay';
-import FilmStripOnlyOverlayFrame from './FilmStripOnlyOverlayFrame';
+import FilmstripOnlyOverlayFrame from './FilmstripOnlyOverlayFrame';
 
 /**
  * Implements a React Component for page reload overlay for filmstrip only
  * mode. Shown before the conference is reloaded. Shows a warning message and
  * counts down towards the reload.
  */
-class PageReloadFilmStripOnlyOverlay extends AbstractPageReloadOverlay {
+class PageReloadFilmstripOnlyOverlay extends AbstractPageReloadOverlay {
     /**
-     * PageReloadFilmStripOnlyOverlay component's property types.
+     * PageReloadFilmstripOnlyOverlay component's property types.
      *
      * @static
      */
@@ -39,7 +39,7 @@ class PageReloadFilmStripOnlyOverlay extends AbstractPageReloadOverlay {
         const { message, timeLeft, title } = this.state;
 
         return (
-            <FilmStripOnlyOverlayFrame>
+            <FilmstripOnlyOverlayFrame>
                 <div className = 'inlay-filmstrip-only__container'>
                     <div className = 'inlay-filmstrip-only__title'>
                         { t(title) }
@@ -54,9 +54,9 @@ class PageReloadFilmStripOnlyOverlay extends AbstractPageReloadOverlay {
                 {
                     this._renderProgressBar()
                 }
-            </FilmStripOnlyOverlayFrame>
+            </FilmstripOnlyOverlayFrame>
         );
     }
 }
 
-export default translate(PageReloadFilmStripOnlyOverlay);
+export default translate(PageReloadFilmstripOnlyOverlay);

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 (
-            <FilmStripOnlyOverlayFrame isLightOverlay = { true }>
+            <FilmstripOnlyOverlayFrame isLightOverlay = { true }>
                 <div className = 'inlay-filmstrip-only__container'>
                     <div className = 'inlay-filmstrip-only__title'>
                         { t('suspendedoverlay.title') }
@@ -45,9 +45,9 @@ class SuspendedFilmStripOnlyOverlay extends Component {
                     </div>
                 </div>
                 <ReloadButton textKey = 'suspendedoverlay.rejoinKeyTitle' />
-            </FilmStripOnlyOverlayFrame>
+            </FilmstripOnlyOverlayFrame>
         );
     }
 }
 
-export default translate(SuspendedFilmStripOnlyOverlay);
+export default translate(SuspendedFilmstripOnlyOverlay);

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 (
-            <FilmStripOnlyOverlayFrame
+            <FilmstripOnlyOverlayFrame
                 icon = 'icon-mic-camera-combined'
                 isLightOverlay = { true }>
                 <div className = 'inlay-filmstrip-only__container'>
@@ -60,9 +60,9 @@ class UserMediaPermissionsFilmStripOnlyOverlay extends Component {
                         }
                     </div>
                 </div>
-            </FilmStripOnlyOverlayFrame>
+            </FilmstripOnlyOverlayFrame>
         );
     }
 }
 
-export default translate(UserMediaPermissionsFilmStripOnlyOverlay);
+export default translate(UserMediaPermissionsFilmstripOnlyOverlay);

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 visibility of the filmstrip (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 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
+     * Notifies that the filmstrip was (actually) toggled. The event supplies a
-     * a {Boolean} (primitive) value indicating the visibility of the film
+     * {Boolean} (primitive) value indicating the visibility of the filmstrip
-     * strip after the toggling (at the time of the event emission).
+     * 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",