haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Lyubo Marinov 2017-04-10 12:59:44 -05:00
parent 2ffef3bdda
commit a9bdde193d
33 changed files with 192 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/overlay/_overlay.scss
View File

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

2
css/themes/_light.scss
View File

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

4
doc/api.md
View File

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

2
modules/API/API.js
View File

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

4
modules/API/external/external_api.js vendored
View File

@ -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.

54
modules/FollowMe.js
View File

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

30
modules/UI/UI.js
View File

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

4
modules/UI/etherpad/Etherpad.js
View File

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

4
modules/UI/shared_video/SharedVideo.js
View File

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

102
modules/UI/videolayout/FilmStrip.js → modules/UI/videolayout/Filmstrip.js
View File

@ -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 = `
<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',
() => 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;

4
modules/UI/videolayout/VideoContainer.js
View File

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

10
modules/UI/videolayout/VideoLayout.js
View File

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

6
react/features/conference/components/Conference.native.js
View File

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

1
react/features/film-strip/components/index.js
View File

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

20
react/features/film-strip/components/FilmStrip.js → react/features/filmstrip/components/Filmstrip.js
View File

@ -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
* of this writing and on mobile the film strip is visible when the
* XXX The React Component Filmstrip is used on mobile only at the time
* 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);

2
react/features/film-strip/components/Thumbnail.js → react/features/filmstrip/components/Thumbnail.js
View File

@ -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'];

0
react/features/film-strip/components/_.native.js → react/features/filmstrip/components/_.native.js
View File

1
react/features/filmstrip/components/index.js Normal file
View File

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

0
react/features/film-strip/components/native/AudioMutedIndicator.js → react/features/filmstrip/components/native/AudioMutedIndicator.js
View File

0
react/features/film-strip/components/native/DominantSpeakerIndicator.js → react/features/filmstrip/components/native/DominantSpeakerIndicator.js
View File

0
react/features/film-strip/components/native/ModeratorIndicator.js → react/features/filmstrip/components/native/ModeratorIndicator.js
View File

0
react/features/film-strip/components/native/VideoMutedIndicator.js → react/features/filmstrip/components/native/VideoMutedIndicator.js
View File

0
react/features/film-strip/components/native/index.js → react/features/filmstrip/components/native/index.js
View File

2
react/features/film-strip/components/native/styles.js → react/features/filmstrip/components/native/styles.js
View File

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

10
react/features/film-strip/components/styles.js → react/features/filmstrip/components/styles.js
View File

@ -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
},

0
react/features/film-strip/index.js → react/features/filmstrip/index.js
View File

8
react/features/overlay/components/FilmStripOnlyOverlayFrame.js → react/features/overlay/components/FilmstripOnlyOverlayFrame.js
View File

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

41
react/features/overlay/components/OverlayContainer.js
View File

@ -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
from './UserMediaPermissionsFilmStripOnlyOverlay';
import 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
? PageReloadFilmStripOnlyOverlay : PageReloadOverlay;
overlayComponent
= filmstripOnly
? PageReloadFilmstripOnlyOverlay
: PageReloadOverlay;
props = {
isNetworkFailure: this.props._isNetworkFailure,
reason: this.props._reason
};
} else if (this.props._suspendDetected) {
overlayComponent = filmStripOnlyMode
? SuspendedFilmStripOnlyOverlay : SuspendedOverlay;
overlayComponent
= filmstripOnly
? SuspendedFilmstripOnlyOverlay
: SuspendedOverlay;
} else if (this.props._isMediaPermissionPromptVisible) {
overlayComponent = filmStripOnlyMode
? UserMediaPermissionsFilmStripOnlyOverlay
overlayComponent
= filmstripOnly
? UserMediaPermissionsFilmstripOnlyOverlay
: UserMediaPermissionsOverlay;
props = { browser: this.props._browser };
}
if (overlayComponent) {
return React.createElement(overlayComponent, props);
}
return null;
return (
overlayComponent
? React.createElement(overlayComponent, props)
: null);
}
}

6
react/features/overlay/components/OverlayFrame.js
View File

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

12
react/features/overlay/components/PageReloadFilmStripOnlyOverlay.js → react/features/overlay/components/PageReloadFilmstripOnlyOverlay.js
View File

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

12
react/features/overlay/components/SuspendedFilmStripOnlyOverlay.js → react/features/overlay/components/SuspendedFilmstripOnlyOverlay.js
View File

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

12
react/features/overlay/components/UserMediaPermissionsFilmStripOnlyOverlay.js → react/features/overlay/components/UserMediaPermissionsFilmstripOnlyOverlay.js
View File

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

22
service/UI/UIEvents.js
View File

@ -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",