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

feat(eslint): Enable for non react files

This commit is contained in:
hristoterezov 2017-10-12 18:02:29 -05:00 committed by Lyubo Marinov
parent b1b3807e9b
commit 969f5d67ab
55 changed files with 3612 additions and 2711 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

272
.eslintrc.js
View File

@ -23,9 +23,157 @@ module.exports = {
'sourceType': 'module'
},
'plugins': [
'flowtype'
'flowtype',
// ESLint's rule no-duplicate-imports does not understand Flow's import
// type. Fortunately, eslint-plugin-import understands Flow's import
// type.
'import'
],
'rules': {
// Possible Errors group
'no-cond-assign': 2,
'no-console': 0,
'no-constant-condition': 2,
'no-control-regex': 2,
'no-debugger': 2,
'no-dupe-args': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty': 2,
'no-empty-character-class': 2,
'no-ex-assign': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [
'error',
'all',
{ 'nestedBinaryExpressions': false }
],
'no-extra-semi': 2,
'no-func-assign': 2,
'no-inner-declarations': 2,
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-negated-in-lhs': 2,
'no-obj-calls': 2,
'no-prototype-builtins': 0,
'no-regex-spaces': 2,
'no-sparse-arrays': 2,
'no-unexpected-multiline': 2,
'no-unreachable': 2,
'no-unsafe-finally': 2,
'use-isnan': 2,
'valid-typeof': 2,
// Best Practices group
'accessor-pairs': 0,
'array-callback-return': 2,
'block-scoped-var': 0,
'complexity': 0,
'consistent-return': 0,
'curly': 2,
'default-case': 0,
'dot-location': [ 'error', 'property' ],
'dot-notation': 2,
'eqeqeq': 2,
'guard-for-in': 2,
'no-alert': 2,
'no-caller': 2,
'no-case-declarations': 2,
'no-div-regex': 0,
'no-else-return': 2,
'no-empty-function': 2,
'no-empty-pattern': 2,
'no-eq-null': 2,
'no-eval': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-label': 2,
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-implicit-coercion': 2,
'no-implicit-globals': 2,
'no-implied-eval': 2,
'no-invalid-this': 2,
'no-iterator': 2,
'no-labels': 2,
'no-lone-blocks': 2,
'no-loop-func': 2,
'no-magic-numbers': 0,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-native-reassign': 2,
'no-new': 2,
'no-new-func': 2,
'no-new-wrappers': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-param-reassign': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-return-assign': 2,
'no-script-url': 2,
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-throw-literal': 2,
'no-unmodified-loop-condition': 2,
'no-unused-expressions': [
'error',
{
'allowShortCircuit': true,
'allowTernary': true
}
],
'no-unused-labels': 2,
'no-useless-call': 2,
'no-useless-concat': 2,
'no-useless-escape': 2,
'no-void': 2,
'no-warning-comments': 0,
'no-with': 2,
'radix': 2,
'vars-on-top': 2,
'wrap-iife': [ 'error', 'inside' ],
'yoda': 2,
// Strict Mode group
'strict': 2,
// Variables group
'init-declarations': 0,
'no-catch-shadow': 2,
'no-delete-var': 2,
'no-label-var': 2,
'no-restricted-globals': 0,
'no-shadow': 2,
'no-shadow-restricted-names': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-undefined': 0,
'no-unused-vars': 2,
'no-use-before-define': [ 'error', { 'functions': false } ],
// Stylistic issues group
'array-bracket-spacing': [
'error',
'always',
{ 'objectsInArrays': true }
],
'block-spacing': [ 'error', 'always' ],
'brace-style': 2,
'camelcase': 2,
'comma-dangle': 2,
'comma-spacing': 2,
'comma-style': 2,
'computed-property-spacing': 2,
'consistent-this': [ 'error', 'self' ],
'eol-last': 2,
'func-names': 0,
'func-style': 0,
'id-blacklist': 0,
'id-length': 0,
'id-match': 0,
'indent': [
'error',
4,
@ -43,19 +191,121 @@ module.exports = {
'SwitchCase': 0
}
],
'new-cap': [
'key-spacing': 2,
'keyword-spacing': 2,
'linebreak-style': [ 'error', 'unix' ],
'lines-around-comment': [
'error',
{
'capIsNew': false // Behave like JSHint's newcap.
'allowBlockStart': true,
'allowObjectStart': true,
'beforeBlockComment': true,
'beforeLineComment': true
}
],
// While it is considered a best practice to avoid using methods on
// console in JavaScript that is designed to be executed in the browser
// and ESLint includes the rule among its set of recommended rules, (1)
// the general practice is to strip such calls before pushing to
// production and (2) we prefer to utilize console in lib-jitsi-meet
// (and jitsi-meet).
'no-console': 'off',
'semi': 'error'
'max-depth': 2,
'max-len': [ 'error', 80 ],
'max-lines': 0,
'max-nested-callbacks': 2,
'max-params': 2,
'max-statements': 0,
'max-statements-per-line': 2,
'multiline-ternary': 0,
'new-cap': 2,
'new-parens': 2,
'newline-after-var': 2,
'newline-before-return': 2,
'newline-per-chained-call': 2,
'no-array-constructor': 2,
'no-bitwise': 2,
'no-continue': 2,
'no-inline-comments': 0,
'no-lonely-if': 2,
'no-mixed-operators': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multiple-empty-lines': 2,
'no-negated-condition': 2,
'no-nested-ternary': 0,
'no-new-object': 2,
'no-plusplus': 0,
'no-restricted-syntax': 0,
'no-spaced-func': 2,
'no-tabs': 2,
'no-ternary': 0,
'no-trailing-spaces': 2,
'no-underscore-dangle': 0,
'no-unneeded-ternary': 2,
'no-whitespace-before-property': 2,
'object-curly-newline': 0,
'object-curly-spacing': [ 'error', 'always' ],
'object-property-newline': 2,
'one-var': 0,
'one-var-declaration-per-line': 0,
'operator-assignment': 0,
'operator-linebreak': [ 'error', 'before' ],
'padded-blocks': 0,
'quote-props': 0,
'quotes': [ 'error', 'single' ],
'require-jsdoc': [
'error',
{
'require': {
'ClassDeclaration': true,
'FunctionDeclaration': true,
'MethodDefinition': true
}
}
],
'semi': [ 'error', 'always' ],
'semi-spacing': 2,
'sort-vars': 2,
'space-before-blocks': 2,
'space-before-function-paren': [ 'error', 'never' ],
'space-in-parens': [ 'error', 'never' ],
'space-infix-ops': 2,
'space-unary-ops': 2,
'spaced-comment': 2,
'unicode-bom': 0,
'wrap-regex': 0,
// ES6 group rules
'arrow-body-style': [
'error',
'as-needed',
{ requireReturnForObjectLiteral: true }
],
'arrow-parens': [ 'error', 'as-needed' ],
'arrow-spacing': 2,
'constructor-super': 2,
'generator-star-spacing': 2,
'no-class-assign': 2,
'no-confusing-arrow': 2,
'no-const-assign': 2,
'no-dupe-class-members': 2,
'no-new-symbol': 2,
'no-restricted-imports': 0,
'no-this-before-super': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-rename': 2,
'no-var': 2,
'object-shorthand': [
'error',
'always',
{ 'avoidQuotes': true }
],
'prefer-arrow-callback': [ 'error', { 'allowNamedFunctions': true } ],
'prefer-const': 2,
'prefer-reflect': 0,
'prefer-rest-params': 2,
'prefer-spread': 2,
'prefer-template': 2,
'require-yield': 2,
'rest-spread-spacing': 2,
'sort-imports': 0,
'template-curly-spacing': 2,
'yield-star-spacing': 2,
'import/no-duplicates': 2
}
};

4
ConferenceEvents.js
View File

@ -1,11 +1,11 @@
/**
* Notifies interested parties that hangup procedure will start.
*/
export const BEFORE_HANGUP = "conference.before_hangup";
export const BEFORE_HANGUP = 'conference.before_hangup';
/**
* Notifies interested parties that desktop sharing enable/disable state is
* changed.
*/
export const DESKTOP_SHARING_ENABLED_CHANGED
= "conference.desktop_sharing_enabled_changed";
= 'conference.desktop_sharing_enabled_changed';

25
analytics.js
View File

@ -2,8 +2,11 @@
/* eslint-disable indent */
(function(ctx) {
/**
*
*/
function Analytics() {
/* eslint-disable semi */
/* eslint-disable */
/**
* Google Analytics
@ -14,25 +17,29 @@
ga('create', 'UA-319188-14', 'jit.si');
ga('send', 'pageview');
/* eslint-enable semi */
/* eslint-enable */
}
Analytics.prototype.sendEvent = function(action, data) {
// empty label if missing value for it and add the value,
// the value should be integer or null
var value = data.value;
let value = data.value;
value = value ? Math.round(parseFloat(value)) : null;
var label = data.label || "";
const label = data.label || '';
ga('send', 'event', 'jit.si',
action + '.' + data.browserName, label, value);
`${action}.${data.browserName}`, label, value);
};
if (typeof ctx.JitsiMeetJS === "undefined")
if (typeof ctx.JitsiMeetJS === 'undefined') {
ctx.JitsiMeetJS = {};
if (typeof ctx.JitsiMeetJS.app === "undefined")
}
if (typeof ctx.JitsiMeetJS.app === 'undefined') {
ctx.JitsiMeetJS.app = {};
if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === "undefined")
}
if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === 'undefined') {
ctx.JitsiMeetJS.app.analyticsHandlers = [];
}
ctx.JitsiMeetJS.app.analyticsHandlers.push(Analytics);
}(window));
})(window);

580
conference.js
View File

File diff suppressed because it is too large Load Diff

15
config.js
View File

@ -1,3 +1,4 @@
/* eslint-disable no-unused-vars, no-var */
var config = { // eslint-disable-line no-unused-vars
// Configuration
//
@ -17,7 +18,7 @@ var config = { // eslint-disable-line no-unused-vars
domain: 'jitsi-meet.example.com',
// XMPP MUC domain. FIXME: use XEP-0030 to discover it.
muc: 'conference.jitsi-meet.example.com',
muc: 'conference.jitsi-meet.example.com'
// When using authentication, domain for guest users.
// anonymousdomain: 'guest.example.com',
@ -51,9 +52,10 @@ var config = { // eslint-disable-line no-unused-vars
testing: {
// Enables experimental simulcast support on Firefox.
enableFirefoxSimulcast: false,
// P2P test mode disables automatic switching to P2P when there are 2
// participants in the conference.
p2pTestMode: false,
p2pTestMode: false
},
// Disables ICE/UDP by filtering out local and remote UDP candidates in
@ -200,6 +202,8 @@ var config = { // eslint-disable-line no-unused-vars
// Disable hiding of remote thumbnails when in a 1-on-1 conference call.
// disable1On1Mode: false,
// The minumum value a video's height (or width, whichever is smaller) needs
// The minimum value a video's height (or width, whichever is smaller) needs
// to be in order to be considered high-definition.
minHDHeight: 540,
@ -255,9 +259,9 @@ var config = { // eslint-disable-line no-unused-vars
// The STUN servers that will be used in the peer to peer connections
stunServers: [
{ urls: "stun:stun.l.google.com:19302" },
{ urls: "stun:stun1.l.google.com:19302" },
{ urls: "stun:stun2.l.google.com:19302" }
{ urls: 'stun:stun.l.google.com:19302' },
{ urls: 'stun:stun1.l.google.com:19302' },
{ urls: 'stun:stun2.l.google.com:19302' }
],
// If set to true, it will prefer to use H.264 for P2P calls (if H.264
@ -284,3 +288,4 @@ var config = { // eslint-disable-line no-unused-vars
// userRegion: "asia"
}
};
/* eslint-enable no-unused-vars, no-var */

51
connection.js
View File

@ -13,7 +13,7 @@ import {
JitsiConnectionEvents
} from './react/features/base/lib-jitsi-meet';
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
/**
* Checks if we have data to use attach instead of connect. If we have the data
@ -28,25 +28,30 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
*/
function checkForAttachParametersAndConnect(id, password, connection) {
if (window.XMPPAttachInfo) {
APP.connect.status = "connecting";
APP.connect.status = 'connecting';
// When connection optimization is not deployed or enabled the default
// value will be window.XMPPAttachInfo.status = "error"
// If the connection optimization is deployed and enabled and there is
// a failure the value will be window.XMPPAttachInfo.status = "error"
if(window.XMPPAttachInfo.status === "error") {
connection.connect({id, password});
if (window.XMPPAttachInfo.status === 'error') {
connection.connect({ id,
password });
return;
}
var attachOptions = window.XMPPAttachInfo.data;
const attachOptions = window.XMPPAttachInfo.data;
if (attachOptions) {
connection.attach(attachOptions);
delete window.XMPPAttachInfo.data;
} else {
connection.connect({id, password});
connection.connect({ id,
password });
}
} else {
APP.connect.status = "ready";
APP.connect.status = 'ready';
APP.connect.handler = checkForAttachParametersAndConnect.bind(null,
id, password, connection);
}
@ -64,15 +69,15 @@ function connect(id, password, roomName) {
const connectionConfig = Object.assign({}, config);
const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
connectionConfig.bosh += '?room=' + roomName;
connectionConfig.bosh += `?room=${roomName}`;
let connection
const connection
= new JitsiMeetJS.JitsiConnection(
null,
jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
connectionConfig);
return new Promise(function (resolve, reject) {
return new Promise((resolve, reject) => {
connection.addEventListener(
JitsiConnectionEvents.CONNECTION_ESTABLISHED,
handleConnectionEstablished);
@ -83,6 +88,9 @@ function connect(id, password, roomName) {
JitsiConnectionEvents.CONNECTION_FAILED,
connectionFailedHandler);
/**
*
*/
function connectionFailedHandler(error, message, credentials) {
APP.store.dispatch(
connectionFailed(connection, error, message, credentials));
@ -94,6 +102,9 @@ function connect(id, password, roomName) {
}
}
/**
*
*/
function unsubscribe() {
connection.removeEventListener(
JitsiConnectionEvents.CONNECTION_ESTABLISHED,
@ -103,15 +114,21 @@ function connect(id, password, roomName) {
handleConnectionFailed);
}
/**
*
*/
function handleConnectionEstablished() {
APP.store.dispatch(connectionEstablished(connection));
unsubscribe();
resolve(connection);
}
/**
*
*/
function handleConnectionFailed(err) {
unsubscribe();
logger.error("CONNECTION FAILED:", err);
logger.error('CONNECTION FAILED:', err);
reject(err);
}
@ -133,16 +150,16 @@ function connect(id, password, roomName) {
* @returns {Promise<JitsiConnection>}
*/
export function openConnection({ id, password, retry, roomName }) {
let usernameOverride
= jitsiLocalStorage.getItem("xmpp_username_override");
let passwordOverride
= jitsiLocalStorage.getItem("xmpp_password_override");
const usernameOverride
= jitsiLocalStorage.getItem('xmpp_username_override');
const passwordOverride
= jitsiLocalStorage.getItem('xmpp_password_override');
if (usernameOverride && usernameOverride.length > 0) {
id = usernameOverride;
id = usernameOverride; // eslint-disable-line no-param-reassign
}
if (passwordOverride && passwordOverride.length > 0) {
password = passwordOverride;
password = passwordOverride; // eslint-disable-line no-param-reassign
}
return connect(id, password, roomName).catch(err => {

4
index.html
View File

@ -72,9 +72,9 @@
+ "font-size: medium;"
+ "font-weight: 400;"
+ "transform: translate(-50%, -50%)'>"
+ "Uh oh! We couldn't fully download everything we needed :(" // jshint ignore:line
+ "Uh oh! We couldn't fully download everything we needed :("
+ "<br/> "
+ "We will try again shortly. In the mean time, check for problems with your Internet connection!" // jshint ignore:line
+ "We will try again shortly. In the mean time, check for problems with your Internet connection!"
+ "<br/><br/> "
+ "<div id='moreInfo' style='"
+ "display: none;'>" + "Missing " + fileRef

36
interface_config.js
View File

@ -1,7 +1,9 @@
var interfaceConfig = { // eslint-disable-line no-unused-vars
/* eslint-disable no-unused-vars, no-var, max-len */
var interfaceConfig = {
// TO FIX: this needs to be handled from SASS variables. There are some
// methods allowing to use variables both in css and js.
DEFAULT_BACKGROUND: '#474747',
/**
* In case the desktop sharing is disabled through the config the button
* will not be hidden, but displayed as disabled with this text us as
@ -10,45 +12,53 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
DESKTOP_SHARING_BUTTON_DISABLED_TOOLTIP: null,
INITIAL_TOOLBAR_TIMEOUT: 20000,
TOOLBAR_TIMEOUT: 4000,
DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster",
DEFAULT_LOCAL_DISPLAY_NAME: "me",
DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster',
DEFAULT_LOCAL_DISPLAY_NAME: 'me',
SHOW_JITSI_WATERMARK: true,
JITSI_WATERMARK_LINK: "https://jitsi.org",
JITSI_WATERMARK_LINK: 'https://jitsi.org',
// if watermark is disabled by default, it can be shown only for guests
SHOW_WATERMARK_FOR_GUESTS: true,
SHOW_BRAND_WATERMARK: false,
BRAND_WATERMARK_LINK: "",
BRAND_WATERMARK_LINK: '',
SHOW_POWERED_BY: false,
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
APP_NAME: "Jitsi Meet",
APP_NAME: 'Jitsi Meet',
LANG_DETECTION: false, // Allow i18n to detect the system language
INVITATION_POWERED_BY: true,
/**
* If we should show authentication block in profile
*/
AUTHENTICATION_ENABLE: true,
/**
* the toolbar buttons line is intentionally left in one line, to be able
* to easily override values or remove them using regex
*/
TOOLBAR_BUTTONS: [
// main toolbar
'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup', // jshint ignore:line
'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup',
// extended toolbar
'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip'], // jshint ignore:line
'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip' ],
/**
* Main Toolbar Buttons
* All of them should be in TOOLBAR_BUTTONS
*/
MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup'], // jshint ignore:line
MAIN_TOOLBAR_BUTTONS: [ 'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup' ],
SETTINGS_SECTIONS: [ 'language', 'devices', 'moderator' ],
INVITE_OPTIONS: [ 'invite', 'dialout', 'addtocall' ],
// Determines how the video would fit the screen. 'both' would fit the whole
// screen, 'height' would fit the original video height to the height of the
// screen, 'width' would fit the original video width to the width of the
// screen respecting ratio.
VIDEO_LAYOUT_FIT: 'both',
SHOW_CONTACTLIST_AVATARS: true,
/**
* Whether to only show the filmstrip (and hide the toolbar).
*/
@ -64,6 +74,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
RANDOM_AVATAR_URL_PREFIX: false,
RANDOM_AVATAR_URL_SUFFIX: false,
FILM_STRIP_MAX_HEIGHT: 120,
// Enables feedback star animation.
ENABLE_FEEDBACK_ANIMATION: false,
DISABLE_FOCUS_INDICATOR: false,
@ -76,13 +87,13 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
* @type {boolean}
*/
DISABLE_RINGING: false,
AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
AUDIO_LEVEL_PRIMARY_COLOR: 'rgba(255,255,255,0.4)',
AUDIO_LEVEL_SECONDARY_COLOR: 'rgba(255,255,255,0.2)',
POLICY_LOGO: null,
LOCAL_THUMBNAIL_RATIO: 16 / 9, // 16:9
REMOTE_THUMBNAIL_RATIO: 1, // 1:1
// Documentation reference for the live streaming feature.
LIVE_STREAMING_HELP_LINK: "https://jitsi.org/live",
LIVE_STREAMING_HELP_LINK: 'https://jitsi.org/live',
/**
* Whether the mobile app Jitsi Meet is to be promoted to participants
@ -131,3 +142,4 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
*/
// ADD_PEOPLE_APP_NAME: ""
};
/* eslint-enable no-unused-vars, no-var, max-len */

7
logging_config.js
View File

@ -1,10 +1,15 @@
/* eslint-disable no-unused-vars, no-var */
// Logging configuration
var loggingConfig = { // eslint-disable-line no-unused-vars
var loggingConfig = {
// default log level for the app and lib-jitsi-meet
defaultLogLevel: 'trace',
// Option to disable LogCollector (which stores the logs on CallStats)
// disableLogCollector: true,
// Logging level adjustments for verbose modules:
'modules/xmpp/strophe.util.js': 'log',
'modules/statistics/CallStats.js': 'info'
};
/* eslint-enable no-unused-vars, no-var */

135
modules/FollowMe.js
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import UIEvents from '../service/UI/UIEvents';
import VideoLayout from './UI/videolayout/VideoLayout';
@ -23,7 +23,7 @@ import VideoLayout from './UI/videolayout/VideoLayout';
* {State} for the local state at the time of this writing) of a {FollowMe}
* (instance) between participants.
*/
const _COMMAND = "follow-me";
const _COMMAND = 'follow-me';
/**
* The timeout after which a follow-me command that has been received will be
@ -54,30 +54,57 @@ class State {
this._propertyChangeCallback = propertyChangeCallback;
}
get filmstripVisible () { return this._filmstripVisible; }
/**
*
*/
get filmstripVisible() {
return this._filmstripVisible;
}
/**
*
*/
set filmstripVisible(b) {
var oldValue = this._filmstripVisible;
const oldValue = this._filmstripVisible;
if (oldValue !== b) {
this._filmstripVisible = b;
this._firePropertyChange('filmstripVisible', oldValue, b);
}
}
get nextOnStage() { return this._nextOnStage; }
/**
*
*/
get nextOnStage() {
return this._nextOnStage;
}
/**
*
*/
set nextOnStage(id) {
var oldValue = this._nextOnStage;
const oldValue = this._nextOnStage;
if (oldValue !== id) {
this._nextOnStage = id;
this._firePropertyChange('nextOnStage', oldValue, id);
}
}
get sharedDocumentVisible () { return this._sharedDocumentVisible; }
/**
*
*/
get sharedDocumentVisible() {
return this._sharedDocumentVisible;
}
/**
*
*/
set sharedDocumentVisible(b) {
var oldValue = this._sharedDocumentVisible;
const oldValue = this._sharedDocumentVisible;
if (oldValue !== b) {
this._sharedDocumentVisible = b;
this._firePropertyChange('sharedDocumentVisible', oldValue, b);
@ -94,11 +121,13 @@ class State {
* @param newValue the value of {property} after the change
*/
_firePropertyChange(property, oldValue, newValue) {
var propertyChangeCallback = this._propertyChangeCallback;
if (propertyChangeCallback)
const propertyChangeCallback = this._propertyChangeCallback;
if (propertyChangeCallback) {
propertyChangeCallback(property, oldValue, newValue);
}
}
}
/**
* Represents the &quot;Follow Me&quot; feature which enables a moderator to
@ -150,10 +179,11 @@ class FollowMe {
this._nextOnStage(pinnedId, Boolean(pinnedId));
// check whether shared document is enabled/initialized
if(this._UI.getSharedDocumentManager())
if (this._UI.getSharedDocumentManager()) {
this._sharedDocumentToggled
.bind(this, this._UI.getSharedDocumentManager().isVisible());
}
}
/**
* Adds listeners for the UI states of the local participant which are
@ -167,7 +197,8 @@ class FollowMe {
this._UI.addListener(UIEvents.TOGGLED_FILMSTRIP,
this.filmstripEventHandler);
var self = this;
const self = this;
this.pinnedEndpointEventHandler = function(videoId, isPinned) {
self._nextOnStage(videoId, isPinned);
};
@ -202,10 +233,10 @@ class FollowMe {
if (enable) {
this._setFollowMeInitialState();
this._addFollowMeListeners();
}
else
} else {
this._removeFollowMeListeners();
}
}
/**
* Notifies this instance that the (visibility of the) filmstrip was
@ -238,12 +269,15 @@ class FollowMe {
* @private
*/
_nextOnStage(videoId, isPinned) {
if (!this._conference.isModerator)
if (!this._conference.isModerator) {
return;
}
var nextOnStage = null;
if(isPinned)
let nextOnStage = null;
if (isPinned) {
nextOnStage = videoId;
}
this._local.nextOnStage = nextOnStage;
}
@ -251,24 +285,25 @@ class FollowMe {
/**
* Sends the follow-me command, when a local property change occurs.
*
* @param property the property name
* @param oldValue the old value
* @param newValue the new value
* @private
*/
// eslint-disable-next-line no-unused-vars
_localPropertyChange (property, oldValue, newValue) {
_localPropertyChange() { // eslint-disable-next-line no-unused-vars
// Only a moderator is allowed to send commands.
const conference = this._conference;
if (!conference.isModerator)
if (!conference.isModerator) {
return;
}
const commands = conference.commands;
// XXX The "Follow Me" command represents a snapshot of all states
// which are to be followed so don't forget to removeCommand before
// sendCommand!
commands.removeCommand(_COMMAND);
const local = this._local;
commands.sendCommandOnce(
_COMMAND,
{
@ -293,18 +328,20 @@ class FollowMe {
// We require to know who issued the command because (1) only a
// moderator is allowed to send commands and (2) a command MUST be
// issued by a defined commander.
if (typeof id === 'undefined')
if (typeof id === 'undefined') {
return;
}
// The Command(s) API will send us our own commands and we don't want
// to act upon them.
if (this._conference.isLocalId(id))
if (this._conference.isLocalId(id)) {
return;
}
if (!this._conference.isParticipantModerator(id)) {
logger.warn('Received follow-me command '
+ 'not from moderator');
if (!this._conference.isParticipantModerator(id))
{
logger.warn('Received follow-me command ' +
'not from moderator');
return;
}
@ -328,16 +365,18 @@ class FollowMe {
// 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');
// eslint-disable-next-line eqeqeq, no-param-reassign
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
// a design standpoint) either.
if (filmstripVisible !== this._UI.isFilmstripVisible())
if (filmstripVisible !== this._UI.isFilmstripVisible()) {
this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
}
}
}
/**
* Process the id received from a FOLLOW-ME command.
@ -347,23 +386,25 @@ class FollowMe {
* @private
*/
_onNextOnStage(id) {
var clickId = null;
var pin;
let clickId = null;
let pin;
// if there is an id which is not pinned we schedule it for pin only the
// first time
if (typeof id !== 'undefined' && !VideoLayout.isPinned(id)) {
clickId = id;
pin = true;
}
} else if (typeof id === 'undefined' && VideoLayout.getPinnedId()) {
// if there is no id, but we have a pinned one, let's unpin
else if (typeof id == 'undefined' && VideoLayout.getPinnedId()) {
clickId = VideoLayout.getPinnedId();
pin = false;
}
if (clickId)
if (clickId) {
this._pinVideoThumbnailById(clickId, pin);
}
}
/**
* Process a shared document open / close event received from FOLLOW-ME
@ -378,13 +419,15 @@ class FollowMe {
// 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.
sharedDocumentVisible = (sharedDocumentVisible == 'true');
// eslint-disable-next-line eqeqeq, no-param-reassign
sharedDocumentVisible = sharedDocumentVisible == 'true';
if (sharedDocumentVisible
!== this._UI.getSharedDocumentManager().isVisible())
!== this._UI.getSharedDocumentManager().isVisible()) {
this._UI.getSharedDocumentManager().toggleEtherpad();
}
}
}
/**
* Pins / unpins the video thumbnail given by clickId.
@ -394,27 +437,31 @@ class FollowMe {
* @private
*/
_pinVideoThumbnailById(clickId, pin) {
var self = this;
var smallVideo = VideoLayout.getSmallVideo(clickId);
const self = this;
const smallVideo = VideoLayout.getSmallVideo(clickId);
// If the SmallVideo for the given clickId exists we proceed with the
// pin/unpin.
if (smallVideo) {
this.nextOnStageTimer = 0;
clearTimeout(this.nextOnStageTimout);
/* eslint-disable no-mixed-operators */
if (pin && !VideoLayout.isPinned(clickId)
|| !pin && VideoLayout.isPinned(clickId))
|| !pin && VideoLayout.isPinned(clickId)) {
/* eslint-disable no-mixed-operators */
VideoLayout.handleVideoThumbClicked(clickId);
}
// If there's no SmallVideo object for the given id, lets wait and see
// if it's going to be created in the next 30sec.
else {
} else {
// If there's no SmallVideo object for the given id, lets wait and
// see if it's going to be created in the next 30sec.
this.nextOnStageTimout = setTimeout(function() {
if (self.nextOnStageTimer > _FOLLOW_ME_RECEIVED_TIMEOUT) {
self.nextOnStageTimer = 0;
return;
}
// eslint-disable-next-line no-invalid-this
this.nextOnStageTimer++;
self._pinVideoThumbnailById(clickId, pin);
}, 1000);

311
modules/UI/UI.js
View File

@ -1,24 +1,24 @@
/* global APP, $, config, interfaceConfig */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
var UI = {};
const UI = {};
import Chat from "./side_pannels/chat/Chat";
import SidePanels from "./side_pannels/SidePanels";
import Avatar from "./avatar/Avatar";
import SideContainerToggler from "./side_pannels/SideContainerToggler";
import messageHandler from "./util/MessageHandler";
import UIUtil from "./util/UIUtil";
import UIEvents from "../../service/UI/UIEvents";
import Chat from './side_pannels/chat/Chat';
import SidePanels from './side_pannels/SidePanels';
import Avatar from './avatar/Avatar';
import SideContainerToggler from './side_pannels/SideContainerToggler';
import messageHandler from './util/MessageHandler';
import UIUtil from './util/UIUtil';
import UIEvents from '../../service/UI/UIEvents';
import EtherpadManager from './etherpad/Etherpad';
import SharedVideoManager from './shared_video/SharedVideo';
import Recording from "./recording/Recording";
import Recording from './recording/Recording';
import VideoLayout from "./videolayout/VideoLayout";
import Filmstrip from "./videolayout/Filmstrip";
import SettingsMenu from "./side_pannels/settings/SettingsMenu";
import Profile from "./side_pannels/profile/Profile";
import VideoLayout from './videolayout/VideoLayout';
import Filmstrip from './videolayout/Filmstrip';
import SettingsMenu from './side_pannels/settings/SettingsMenu';
import Profile from './side_pannels/profile/Profile';
import {
openDeviceSelectionDialog
@ -43,11 +43,13 @@ import {
showToolbox
} from '../../react/features/toolbox';
var EventEmitter = require("events");
UI.messageHandler = messageHandler;
import FollowMe from "../FollowMe";
const EventEmitter = require('events');
UI.messageHandler = messageHandler;
import FollowMe from '../FollowMe';
const eventEmitter = new EventEmitter();
var eventEmitter = new EventEmitter();
UI.eventEmitter = eventEmitter;
let etherpadManager;
@ -62,38 +64,82 @@ const JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP = {
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP
.camera[JitsiTrackErrors.UNSUPPORTED_RESOLUTION]
= "dialog.cameraUnsupportedResolutionError";
= 'dialog.cameraUnsupportedResolutionError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[JitsiTrackErrors.GENERAL]
= "dialog.cameraUnknownError";
= 'dialog.cameraUnknownError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[JitsiTrackErrors.PERMISSION_DENIED]
= "dialog.cameraPermissionDeniedError";
= 'dialog.cameraPermissionDeniedError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[JitsiTrackErrors.NOT_FOUND]
= "dialog.cameraNotFoundError";
= 'dialog.cameraNotFoundError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[JitsiTrackErrors.CONSTRAINT_FAILED]
= "dialog.cameraConstraintFailedError";
= 'dialog.cameraConstraintFailedError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP
.camera[JitsiTrackErrors.NO_DATA_FROM_SOURCE]
= "dialog.cameraNotSendingData";
= 'dialog.cameraNotSendingData';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[JitsiTrackErrors.GENERAL]
= "dialog.micUnknownError";
= 'dialog.micUnknownError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP
.microphone[JitsiTrackErrors.PERMISSION_DENIED]
= "dialog.micPermissionDeniedError";
= 'dialog.micPermissionDeniedError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[JitsiTrackErrors.NOT_FOUND]
= "dialog.micNotFoundError";
= 'dialog.micNotFoundError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP
.microphone[JitsiTrackErrors.CONSTRAINT_FAILED]
= "dialog.micConstraintFailedError";
= 'dialog.micConstraintFailedError';
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP
.microphone[JitsiTrackErrors.NO_DATA_FROM_SOURCE]
= "dialog.micNotSendingData";
= 'dialog.micNotSendingData';
const UIListeners = new Map([
[
UIEvents.ETHERPAD_CLICKED,
() => etherpadManager && etherpadManager.toggleEtherpad()
], [
UIEvents.SHARED_VIDEO_CLICKED,
() => sharedVideoManager && sharedVideoManager.toggleSharedVideo()
], [
UIEvents.TOGGLE_FULLSCREEN,
() => UI.toggleFullScreen()
], [
UIEvents.TOGGLE_CHAT,
() => UI.toggleChat()
], [
UIEvents.TOGGLE_SETTINGS,
() => {
// Opening of device selection is special-cased as it is a dialog
// opened through a button in settings and not directly displayed in
// settings itself. As it is not useful to only have a settings menu
// with a button to open a dialog, open the dialog directly instead.
if (interfaceConfig.SETTINGS_SECTIONS.length === 1
&& UIUtil.isSettingEnabled('devices')) {
APP.store.dispatch(openDeviceSelectionDialog());
} else {
UI.toggleSidePanel('settings_container');
}
}
], [
UIEvents.TOGGLE_CONTACT_LIST,
() => UI.toggleContactList()
], [
UIEvents.TOGGLE_PROFILE,
() => {
UI.toggleSidePanel('profile_container');
}
], [
UIEvents.TOGGLE_FILMSTRIP,
() => UI.handleToggleFilmstrip()
], [
UIEvents.FOLLOW_ME_ENABLED,
enabled => followMeHandler && followMeHandler.enableFollowMe(enabled)
]
]);
/**
* Toggles the application in and out of full screen mode
* (a.k.a. presentation mode in Chrome).
*/
UI.toggleFullScreen = function() {
(UIUtil.isFullScreen())
UIUtil.isFullScreen()
? UIUtil.exitFullScreen()
: UIUtil.enterFullScreen();
};
@ -112,10 +158,12 @@ UI.notifyGracefulShutdown = function () {
* Notify user that reservation error happened.
*/
UI.notifyReservationError = function(code, msg) {
var message = APP.translation.generateTranslationHTML(
"dialog.reservationErrorMsg", {code: code, msg: msg});
const message = APP.translation.generateTranslationHTML(
'dialog.reservationErrorMsg', { code,
msg });
messageHandler.openDialog(
"dialog.reservationError", message, true, {}, () => false);
'dialog.reservationError', message, true, {}, () => false);
};
/**
@ -123,8 +171,8 @@ UI.notifyReservationError = function (code, msg) {
*/
UI.notifyKicked = function() {
messageHandler.openMessageDialog(
"dialog.sessTerminated",
"dialog.kickMessage");
'dialog.sessTerminated',
'dialog.kickMessage');
};
/**
@ -135,7 +183,7 @@ UI.notifyConferenceDestroyed = function (reason) {
// FIXME: use Session Terminated from translation, but
// 'reason' text comes from XMPP packet and is not translated
messageHandler.openDialog(
"dialog.sessTerminated", reason, true, {}, () => false);
'dialog.sessTerminated', reason, true, {}, () => false);
};
/**
@ -160,7 +208,7 @@ UI.changeDisplayName = function (id, displayName) {
if (APP.conference.isLocalId(id) || id === 'localVideoContainer') {
Profile.changeDisplayName(displayName);
Chat.setChatConversationMode(!!displayName);
Chat.setChatConversationMode(Boolean(displayName));
}
};
@ -208,7 +256,7 @@ UI.initConference = function () {
UI.showToolbar();
let displayName = config.displayJids ? id : name;
const displayName = config.displayJids ? id : name;
if (displayName) {
UI.changeDisplayName('localVideoContainer', displayName);
@ -276,22 +324,24 @@ UI.start = function () {
VideoLayout.resizeVideoArea(true, true);
sharedVideoManager = new SharedVideoManager(eventEmitter);
// eslint-disable-next-line no-negated-condition
if (!interfaceConfig.filmStripOnly) {
// Initialise the recording module.
if (config.enableRecording) {
Recording.init(eventEmitter, config.recordingType);
}
// Initialize side panels
SidePanels.init(eventEmitter);
} else {
$("body").addClass("filmstrip-only");
$('body').addClass('filmstrip-only');
UI.showToolbar();
Filmstrip.setFilmstripOnly();
APP.store.dispatch(setNotificationsEnabled(false));
}
if (interfaceConfig.VERTICAL_FILMSTRIP) {
$("body").addClass("vertical-filmstrip");
$('body').addClass('vertical-filmstrip');
}
document.title = interfaceConfig.APP_NAME;
@ -322,6 +372,9 @@ UI.unregisterListeners
* Setup some DOM event listeners.
*/
UI.bindEvents = () => {
/**
*
*/
function onResize() {
SideContainerToggler.resize();
VideoLayout.resizeVideoArea();
@ -364,7 +417,7 @@ UI.addLocalStream = track => {
VideoLayout.changeLocalVideo(track);
break;
default:
logger.error("Unknown stream type: " + track.getType());
logger.error(`Unknown stream type: ${track.getType()}`);
break;
}
};
@ -414,16 +467,17 @@ UI.getSharedDocumentManager = () => etherpadManager;
* @param {JitsiParticipant} user
*/
UI.addUser = function(user) {
var id = user.getId();
var displayName = user.getDisplayName();
const id = user.getId();
const displayName = user.getDisplayName();
messageHandler.participantNotification(
displayName, 'notify.somebody', 'connected', 'notify.connected'
);
if (!config.startAudioMuted ||
config.startAudioMuted > APP.conference.membersCount)
if (!config.startAudioMuted
|| config.startAudioMuted > APP.conference.membersCount) {
UIUtil.playSoundNotification('userJoined');
}
// Add Peer's container
VideoLayout.addParticipantContainer(user);
@ -432,8 +486,9 @@ UI.addUser = function (user) {
UI.setUserEmail(id);
// set initial display name
if(displayName)
if (displayName) {
UI.changeDisplayName(id, displayName);
}
};
/**
@ -476,9 +531,10 @@ UI.updateLocalRole = isModerator => {
SettingsMenu.showFollowMeOptions(isModerator);
if (isModerator) {
if (!interfaceConfig.DISABLE_FOCUS_INDICATOR)
if (!interfaceConfig.DISABLE_FOCUS_INDICATOR) {
messageHandler.participantNotification(
null, "notify.me", 'connected', "notify.moderator");
null, 'notify.me', 'connected', 'notify.moderator');
}
Recording.checkAutoRecord();
}
@ -498,7 +554,8 @@ UI.updateUserRole = user => {
return;
}
var displayName = user.getDisplayName();
const displayName = user.getDisplayName();
if (displayName) {
messageHandler.participantNotification(
displayName, 'notify.somebody',
@ -524,9 +581,10 @@ UI.updateUserStatus = (user, status) => {
return;
}
let displayName = user.getDisplayName();
const displayName = user.getDisplayName();
messageHandler.participantNotification(
displayName, '', 'connected', "dialOut.statusMessage",
displayName, '', 'connected', 'dialOut.statusMessage',
{
status: UIUtil.escapeHtml(status)
});
@ -541,8 +599,8 @@ UI.toggleSmileys = () => Chat.toggleSmileys();
* Toggles filmstrip.
*/
UI.toggleFilmstrip = function() {
var self = Filmstrip;
self.toggleFilmstrip.apply(self, arguments);
// eslint-disable-next-line prefer-rest-params
Filmstrip.toggleFilmstrip(...arguments);
VideoLayout.resizeVideoArea(true, false);
};
@ -555,12 +613,12 @@ UI.isFilmstripVisible = () => Filmstrip.isFilmstripVisible();
/**
* Toggles chat panel.
*/
UI.toggleChat = () => UI.toggleSidePanel("chat_container");
UI.toggleChat = () => UI.toggleSidePanel('chat_container');
/**
* Toggles contact list panel.
*/
UI.toggleContactList = () => UI.toggleSidePanel("contacts_container");
UI.toggleContactList = () => UI.toggleSidePanel('contacts_container');
/**
* Toggles the given side panel.
@ -588,6 +646,7 @@ UI.inputDisplayNameHandler = function (newDisplayName) {
* @param {number} timeout - The time to show the popup
* @returns {void}
*/
// eslint-disable-next-line max-params
UI.showCustomToolbarPopup = function(buttonName, popupID, show, timeout) {
const action = show
? setButtonPopupTimeout(buttonName, popupID, timeout)
@ -609,17 +668,19 @@ UI.getRemoteVideoType = function (jid) {
UI.showLoginPopup = function(callback) {
logger.log('password is required');
let message = (
`<input name="username" type="text"
const message
= `<input name="username" type="text"
placeholder="user@domain.net"
class="input-control" autofocus>
<input name="password" type="password"
data-i18n="[placeholder]dialog.userPassword"
class="input-control"
placeholder="user password">`
);
let submitFunction = (e, v, m, f) => {
;
// eslint-disable-next-line max-params
const submitFunction = (e, v, m, f) => {
if (v) {
if (f.username && f.password) {
callback(f.username, f.password);
@ -628,7 +689,7 @@ UI.showLoginPopup = function(callback) {
};
messageHandler.openTwoButtonDialog({
titleKey : "dialog.passwordRequired",
titleKey: 'dialog.passwordRequired',
msgString: message,
leftButtonKey: 'dialog.Ok',
submitFunction,
@ -637,6 +698,7 @@ UI.showLoginPopup = function(callback) {
};
UI.askForNickname = function() {
// eslint-disable-next-line no-alert
return window.prompt('Your nickname (optional)');
};
@ -697,13 +759,14 @@ UI.removeListener = function (type, listener) {
UI.emitEvent = (type, ...options) => eventEmitter.emit(type, ...options);
UI.clickOnVideo = function(videoNumber) {
let videos = $("#remoteVideos .videocontainer:not(#mixedstream)");
let videosLength = videos.length;
const videos = $('#remoteVideos .videocontainer:not(#mixedstream)');
const videosLength = videos.length;
if (videosLength <= videoNumber) {
return;
}
let videoIndex = videoNumber === 0 ? 0 : videosLength - videoNumber;
const videoIndex = videoNumber === 0 ? 0 : videosLength - videoNumber;
videos[videoIndex].click();
};
@ -769,16 +832,17 @@ UI.setUserAvatarUrl = function (id, url) {
* @param {string} stropheErrorMsg raw Strophe error message
*/
UI.notifyConnectionFailed = function(stropheErrorMsg) {
var message;
let message;
if (stropheErrorMsg) {
message = APP.translation.generateTranslationHTML(
"dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
'dialog.connectErrorWithMsg', { msg: stropheErrorMsg });
} else {
message = APP.translation.generateTranslationHTML(
"dialog.connectError");
'dialog.connectError');
}
messageHandler.openDialog("dialog.error", message, true, {}, () => false);
messageHandler.openDialog('dialog.error', message, true, {}, () => false);
};
@ -786,10 +850,10 @@ UI.notifyConnectionFailed = function (stropheErrorMsg) {
* Notify user that maximum users limit has been reached.
*/
UI.notifyMaxUsersLimitReached = function() {
var message = APP.translation.generateTranslationHTML(
"dialog.maxUsersLimitReached");
const message = APP.translation.generateTranslationHTML(
'dialog.maxUsersLimitReached');
messageHandler.openDialog("dialog.error", message, true, {}, () => false);
messageHandler.openDialog('dialog.error', message, true, {}, () => false);
};
/**
@ -798,9 +862,9 @@ UI.notifyMaxUsersLimitReached = function () {
UI.notifyInitiallyMuted = function() {
messageHandler.participantNotification(
null,
"notify.mutedTitle",
"connected",
"notify.muted",
'notify.mutedTitle',
'connected',
'notify.muted',
null,
120000);
};
@ -877,6 +941,7 @@ UI.markVideoInterrupted = function (interrupted) {
* @param {string} message message text
* @param {number} stamp timestamp when message was created
*/
// eslint-disable-next-line max-params
UI.addMessage = function(from, displayName, message, stamp) {
Chat.updateChatConversation(from, displayName, message, stamp);
};
@ -889,20 +954,21 @@ UI.updateRecordingState = function (state) {
};
UI.notifyTokenAuthFailed = function() {
messageHandler.showError( "dialog.tokenAuthFailedTitle",
"dialog.tokenAuthFailed");
messageHandler.showError('dialog.tokenAuthFailedTitle',
'dialog.tokenAuthFailed');
};
UI.notifyInternalError = function() {
messageHandler.showError( "dialog.internalErrorTitle",
"dialog.internalError");
messageHandler.showError('dialog.internalErrorTitle',
'dialog.internalError');
};
UI.notifyFocusDisconnected = function(focus, retrySec) {
messageHandler.participantNotification(
null, "notify.focus",
'disconnected', "notify.focusFail",
{component: focus, ms: retrySec}
null, 'notify.focus',
'disconnected', 'notify.focusFail',
{ component: focus,
ms: retrySec }
);
};
@ -912,8 +978,8 @@ UI.notifyFocusDisconnected = function (focus, retrySec) {
* @param {string} [login] current login
*/
UI.updateAuthInfo = function(isAuthEnabled, login) {
let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
let loggedIn = !!login;
const showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
const loggedIn = Boolean(login);
Profile.showAuthenticationButtons(showAuth);
@ -979,9 +1045,9 @@ UI.isPinned = userId => VideoLayout.getPinnedId() === userId;
*/
UI.showExtensionRequiredDialog = function(url) {
messageHandler.openMessageDialog(
"dialog.extensionRequired",
"[html]dialog.firefoxExtensionPrompt",
{url: url});
'dialog.extensionRequired',
'[html]dialog.firefoxExtensionPrompt',
{ url });
};
/**
@ -992,22 +1058,22 @@ UI.showExtensionRequiredDialog = function (url) {
UI.showExtensionExternalInstallationDialog = function(url) {
let openedWindow = null;
let submitFunction = function(e,v){
const submitFunction = function(e, v) {
if (v) {
e.preventDefault();
if (openedWindow === null || openedWindow.closed) {
openedWindow
= window.open(
url,
"extension_store_window",
"resizable,scrollbars=yes,status=1");
'extension_store_window',
'resizable,scrollbars=yes,status=1');
} else {
openedWindow.focus();
}
}
};
let closeFunction = function (e, v) {
const closeFunction = function(e, v) {
if (openedWindow) {
// Ideally we would close the popup, but this does not seem to work
// on Chrome. Leaving it uncommented in case it could work
@ -1038,13 +1104,13 @@ UI.showExtensionExternalInstallationDialog = function (url) {
* the install button - it should make another attempt to install the extension.
*/
UI.showExtensionInlineInstallationDialog = function(callback) {
let submitFunction = function(e,v){
const submitFunction = function(e, v) {
if (v) {
callback();
}
};
let closeFunction = function (e, v) {
const closeFunction = function(e, v) {
if (!v) {
eventEmitter.emit(UIEvents.EXTERNAL_INSTALLATION_CANCELED);
}
@ -1112,8 +1178,8 @@ UI.showCameraErrorNotification = function (cameraError) {
const persistenceKey = `doNotShowErrorAgain-camera-${name}`;
const cameraJitsiTrackErrorMsg =
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[name];
const cameraJitsiTrackErrorMsg
= JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[name];
const cameraErrorMsg = cameraJitsiTrackErrorMsg
|| JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP
.camera[JitsiTrackErrors.GENERAL];
@ -1138,9 +1204,9 @@ UI.showCameraErrorNotification = function (cameraError) {
*/
UI.showTrackNotWorkingDialog = function(stream) {
messageHandler.openMessageDialog(
"dialog.error",
stream.isAudioTrack()? "dialog.micNotSendingData" :
"dialog.cameraNotSendingData");
'dialog.error',
stream.isAudioTrack() ? 'dialog.micNotSendingData'
: 'dialog.cameraNotSendingData');
};
UI.updateDevicesAvailability = function(id, devices) {
@ -1154,8 +1220,9 @@ UI.updateDevicesAvailability = function (id, devices) {
* @param {string} attributes
*/
UI.onSharedVideoStart = function(id, url, attributes) {
if (sharedVideoManager)
if (sharedVideoManager) {
sharedVideoManager.onSharedVideoStart(id, url, attributes);
}
};
/**
@ -1165,8 +1232,9 @@ UI.onSharedVideoStart = function (id, url, attributes) {
* @param {string} attributes
*/
UI.onSharedVideoUpdate = function(id, url, attributes) {
if (sharedVideoManager)
if (sharedVideoManager) {
sharedVideoManager.onSharedVideoUpdate(id, url, attributes);
}
};
/**
@ -1175,8 +1243,9 @@ UI.onSharedVideoUpdate = function (id, url, attributes) {
* @param {string} attributes
*/
UI.onSharedVideoStop = function(id, attributes) {
if (sharedVideoManager)
if (sharedVideoManager) {
sharedVideoManager.onSharedVideoStop(id, attributes);
}
};
/**
@ -1211,50 +1280,6 @@ UI.setLocalRemoteControlActiveChanged = function() {
VideoLayout.setLocalRemoteControlActiveChanged();
};
const UIListeners = new Map([
[
UIEvents.ETHERPAD_CLICKED,
() => etherpadManager && etherpadManager.toggleEtherpad()
], [
UIEvents.SHARED_VIDEO_CLICKED,
() => sharedVideoManager && sharedVideoManager.toggleSharedVideo()
], [
UIEvents.TOGGLE_FULLSCREEN,
UI.toggleFullScreen
], [
UIEvents.TOGGLE_CHAT,
UI.toggleChat
], [
UIEvents.TOGGLE_SETTINGS,
() => {
// Opening of device selection is special-cased as it is a dialog
// opened through a button in settings and not directly displayed in
// settings itself. As it is not useful to only have a settings menu
// with a button to open a dialog, open the dialog directly instead.
if (interfaceConfig.SETTINGS_SECTIONS.length === 1
&& UIUtil.isSettingEnabled('devices')) {
APP.store.dispatch(openDeviceSelectionDialog());
} else {
UI.toggleSidePanel("settings_container");
}
}
], [
UIEvents.TOGGLE_CONTACT_LIST,
UI.toggleContactList
], [
UIEvents.TOGGLE_PROFILE,
() => {
UI.toggleSidePanel('profile_container');
}
], [
UIEvents.TOGGLE_FILMSTRIP,
UI.handleToggleFilmstrip
], [
UIEvents.FOLLOW_ME_ENABLED,
enabled => (followMeHandler && followMeHandler.enableFollowMe(enabled))
]
]);
// TODO: Export every function separately. For now there is no point of doing
// this because we are importing everything.
export default UI;

2
modules/UI/UIErrors.js
View File

@ -7,4 +7,4 @@
*
* @type {{FEEDBACK_REQUEST_IN_PROGRESS: string}}
*/
export const FEEDBACK_REQUEST_IN_PROGRESS = "FeedbackRequestInProgress";
export const FEEDBACK_REQUEST_IN_PROGRESS = 'FeedbackRequestInProgress';

36
modules/UI/audio_levels/AudioLevels.js
View File

@ -1,6 +1,6 @@
/* global interfaceConfig */
import UIUtil from "../util/UIUtil";
import UIUtil from '../util/UIUtil';
/**
* Responsible for drawing audio levels.
@ -19,29 +19,31 @@ const AudioLevels = {
_setDotLevel(elementID, index, opacity) {
let audioSpan
= document.getElementById(elementID)
.getElementsByClassName("audioindicator");
.getElementsByClassName('audioindicator');
// Make sure the audio span is still around.
if (audioSpan && audioSpan.length > 0)
if (audioSpan && audioSpan.length > 0) {
audioSpan = audioSpan[0];
else
} else {
return;
}
let audioTopDots
= audioSpan.getElementsByClassName("audiodot-top");
let audioDotMiddle
= audioSpan.getElementsByClassName("audiodot-middle");
let audioBottomDots
= audioSpan.getElementsByClassName("audiodot-bottom");
const audioTopDots
= audioSpan.getElementsByClassName('audiodot-top');
const audioDotMiddle
= audioSpan.getElementsByClassName('audiodot-middle');
const audioBottomDots
= audioSpan.getElementsByClassName('audiodot-bottom');
// First take care of the middle dot case.
if (index === 0) {
audioDotMiddle[0].style.opacity = opacity;
return;
}
// Index > 0 : we are setting non-middle dots.
index--;
index--;// eslint-disable-line no-param-reassign
audioBottomDots[index].style.opacity = opacity;
audioTopDots[this.sideDotsCount - index - 1].style.opacity = opacity;
},
@ -52,19 +54,21 @@ const AudioLevels = {
* @param audioLevel the new audio level to set.
*/
updateLargeVideoAudioLevel(elementId, audioLevel) {
let element = document.getElementById(elementId);
const element = document.getElementById(elementId);
if(!UIUtil.isVisible(element))
if (!UIUtil.isVisible(element)) {
return;
}
let level = parseFloat(audioLevel);
level = isNaN(level) ? 0 : level;
let shadowElement = element.getElementsByClassName("dynamic-shadow");
let shadowElement = element.getElementsByClassName('dynamic-shadow');
if (shadowElement && shadowElement.length > 0)
if (shadowElement && shadowElement.length > 0) {
shadowElement = shadowElement[0];
}
shadowElement.style.boxShadow = this._updateLargeVideoShadow(level);
},
@ -83,7 +87,7 @@ const AudioLevels = {
// External circle audio level.
const ext = {
level: (int.level * scale * level + int.level).toFixed(0),
level: ((int.level * scale * level) + int.level).toFixed(0),
color: interfaceConfig.AUDIO_LEVEL_SECONDARY_COLOR
};

105
modules/UI/authentication/AuthHandler.js
View File

@ -9,14 +9,14 @@ import UIUtil from '../util/UIUtil';
import LoginDialog from './LoginDialog';
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
let externalAuthWindow;
let authRequiredDialog;
let isTokenAuthEnabled
= typeof config.tokenAuthUrl === "string" && config.tokenAuthUrl.length;
let getTokenAuthUrl
const isTokenAuthEnabled
= typeof config.tokenAuthUrl === 'string' && config.tokenAuthUrl.length;
const getTokenAuthUrl
= JitsiMeetJS.util.AuthUtil.getTokenAuthUrl.bind(null, config.tokenAuthUrl);
/**
@ -29,20 +29,22 @@ let getTokenAuthUrl
function doExternalAuth(room, lockPassword) {
if (externalAuthWindow) {
externalAuthWindow.focus();
return;
}
if (room.isJoined()) {
let getUrl;
if (isTokenAuthEnabled) {
getUrl = Promise.resolve(getTokenAuthUrl(room.getName(), true));
initJWTTokenListener(room);
} else {
getUrl = room.getExternalAuthUrl(true);
}
getUrl.then(function (url) {
getUrl.then(url => {
externalAuthWindow = LoginDialog.showExternalAuthDialog(
url,
function () {
() => {
externalAuthWindow = null;
if (!isTokenAuthEnabled) {
room.join(lockPassword);
@ -50,16 +52,12 @@ function doExternalAuth (room, lockPassword) {
}
);
});
} else {
// If conference has not been started yet
// then redirect to login page
if (isTokenAuthEnabled) {
} else if (isTokenAuthEnabled) {
redirectToTokenAuthService(room.getName());
} else {
room.getExternalAuthUrl().then(UIUtil.redirect);
}
}
}
/**
* Redirect the user to the token authentication service for the login to be
@ -77,61 +75,80 @@ function redirectToTokenAuthService(roomName) {
* @param room the name fo the conference room.
*/
function initJWTTokenListener(room) {
var listener = function ({ data, source }) {
/**
*
*/
function listener({ data, source }) {
if (externalAuthWindow !== source) {
logger.warn("Ignored message not coming " +
"from external authnetication window");
logger.warn('Ignored message not coming '
+ 'from external authnetication window');
return;
}
let jwt;
if (data && (jwt = data.jwtToken)) {
logger.info("Received JSON Web Token (JWT):", jwt);
logger.info('Received JSON Web Token (JWT):', jwt);
APP.store.dispatch(setJWT(jwt));
var roomName = room.getName();
openConnection({retry: false, roomName: roomName })
.then(function (connection) {
const roomName = room.getName();
openConnection({
retry: false,
roomName
}).then(connection => {
// Start new connection
let newRoom = connection.initJitsiConference(
const newRoom = connection.initJitsiConference(
roomName, APP.conference._getConferenceOptions());
// Authenticate from the new connection to get
// the session-ID from the focus, which wil then be used
// to upgrade current connection's user role
newRoom.room.moderator.authenticate().then(function () {
newRoom.room.moderator.authenticate()
.then(() => {
connection.disconnect();
// At this point we'll have session-ID stored in
// the settings. It wil be used in the call below
// to upgrade user's role
room.room.moderator.authenticate()
.then(function () {
logger.info("User role upgrade done !");
.then(() => {
logger.info('User role upgrade done !');
// eslint-disable-line no-use-before-define
unregister();
}).catch(function (err, errCode) {
logger.error(
"Authentication failed: ", err, errCode);
})
.catch((err, errCode) => {
logger.error('Authentication failed: ',
err, errCode);
unregister();
});
}).catch(function (error, code) {
})
.catch((error, code) => {
unregister();
connection.disconnect();
logger.error(
'Authentication failed on the new connection',
error, code);
});
}, function (err) {
}, err => {
unregister();
logger.error("Failed to open new connection", err);
logger.error('Failed to open new connection', err);
});
}
};
var unregister = function () {
window.removeEventListener("message", listener);
};
}
/**
*
*/
function unregister() {
window.removeEventListener('message', listener);
}
if (window.addEventListener) {
window.addEventListener("message", listener, false);
window.addEventListener('message', listener, false);
}
}
@ -199,9 +216,9 @@ function authenticate (room, lockPassword) {
* @returns {Promise}
*/
function logout(room) {
return new Promise(function (resolve) {
return new Promise(resolve => {
room.room.moderator.logout(resolve);
}).then(function (url) {
}).then(url => {
// de-authenticate conference on the fly
if (room.isJoined()) {
room.join();
@ -241,14 +258,17 @@ function closeAuth() {
}
}
/**
*
*/
function showXmppPasswordPrompt(roomName, connect) {
return new Promise(function (resolve, reject) {
let authDialog = LoginDialog.showAuthDialog(
function (id, password) {
connect(id, password, roomName).then(function (connection) {
return new Promise((resolve, reject) => {
const authDialog = LoginDialog.showAuthDialog(
(id, password) => {
connect(id, password, roomName).then(connection => {
authDialog.close();
resolve(connection);
}, function (err) {
}, err => {
if (err === JitsiConnectionErrors.PASSWORD_REQUIRED) {
authDialog.displayError(err);
} else {
@ -275,9 +295,10 @@ function requestAuth(roomName, connect) {
if (isTokenAuthEnabled) {
// This Promise never resolves as user gets redirected to another URL
return new Promise(() => redirectToTokenAuthService(roomName));
} else {
return showXmppPasswordPrompt(roomName, connect);
}
return showXmppPasswordPrompt(roomName, connect);
}
export default {

68
modules/UI/authentication/LoginDialog.js
View File

@ -10,9 +10,9 @@ import {
* @returns {string} html string
*/
function getPasswordInputHtml() {
let placeholder = config.hosts.authdomain
? "user identity"
: "user@domain.net";
const placeholder = config.hosts.authdomain
? 'user identity'
: 'user@domain.net';
return `
<input name="username" type="text"
@ -29,7 +29,7 @@ function getPasswordInputHtml() {
*/
function cancelButton() {
return {
title: APP.translation.generateTranslationHTML("dialog.Cancel"),
title: APP.translation.generateTranslationHTML('dialog.Cancel'),
value: false
};
}
@ -46,11 +46,11 @@ function cancelButton() {
* @param {function} [cancelCallback] callback to invoke if user canceled.
*/
function LoginDialog(successCallback, cancelCallback) {
let loginButtons = [{
title: APP.translation.generateTranslationHTML("dialog.Ok"),
const loginButtons = [ {
title: APP.translation.generateTranslationHTML('dialog.Ok'),
value: true
} ];
let finishedButtons = [{
const finishedButtons = [ {
title: APP.translation.generateTranslationHTML('dialog.retry'),
value: 'retry'
} ];
@ -61,17 +61,28 @@ function LoginDialog(successCallback, cancelCallback) {
finishedButtons.push(cancelButton());
}
const connDialog = APP.UI.messageHandler.openDialogWithStates(
states, // eslint-disable-line no-use-before-define
{
persistent: true,
closeText: ''
},
null
);
const states = {
login: {
titleKey: 'dialog.passwordRequired',
html: getPasswordInputHtml(),
buttons: loginButtons,
focus: ':input:first',
submit: function (e, v, m, f) {
// eslint-disable-next-line max-params
submit(e, v, m, f) {
e.preventDefault();
if (v) {
let jid = f.username;
let password = f.password;
const jid = f.username;
const password = f.password;
if (jid && password) {
connDialog.goToState('connecting');
successCallback(toJid(jid, config.hosts), password);
@ -93,7 +104,7 @@ function LoginDialog(successCallback, cancelCallback) {
html: '<div id="errorMessage"></div>',
buttons: finishedButtons,
defaultButton: 0,
submit: function (e, v) {
submit(e, v) {
e.preventDefault();
if (v === 'retry') {
connDialog.goToState('login');
@ -105,10 +116,6 @@ function LoginDialog(successCallback, cancelCallback) {
}
};
var connDialog = APP.UI.messageHandler.openDialogWithStates(
states, { persistent: true, closeText: '' }, null
);
/**
* Displays error message in 'finished' state which allows either to cancel
* or retry.
@ -117,26 +124,27 @@ function LoginDialog(successCallback, cancelCallback) {
*/
this.displayError = function(error, options) {
let finishedState = connDialog.getState('finished');
const finishedState = connDialog.getState('finished');
let errorMessageElem = finishedState.find('#errorMessage');
const errorMessageElem = finishedState.find('#errorMessage');
let messageKey;
if (error === JitsiConnectionErrors.PASSWORD_REQUIRED) {
// this is a password required error, as login window was already
// open once, this means username or password is wrong
messageKey = 'dialog.incorrectPassword';
}
else {
} else {
messageKey = 'dialog.connectErrorWithMsg';
if (!options)
options = {};
if (!options) {
options = {};// eslint-disable-line no-param-reassign
}
options.msg = error;
}
errorMessageElem.attr("data-i18n", messageKey);
errorMessageElem.attr('data-i18n', messageKey);
APP.translation.translateElement($(errorMessageElem), options);
@ -148,10 +156,11 @@ function LoginDialog(successCallback, cancelCallback) {
* @param {string} messageKey the key to the message
*/
this.displayConnectionStatus = function(messageKey) {
let connectingState = connDialog.getState('connecting');
const connectingState = connDialog.getState('connecting');
let connectionStatus = connectingState.find('#connectionStatus');
connectionStatus.attr("data-i18n", messageKey);
const connectionStatus = connectingState.find('#connectionStatus');
connectionStatus.attr('data-i18n', messageKey);
APP.translation.translateElement($(connectionStatus));
};
@ -173,7 +182,7 @@ export default {
*
* @returns {LoginDialog}
*/
showAuthDialog: function (successCallback, cancelCallback) {
showAuthDialog(successCallback, cancelCallback) {
return new LoginDialog(successCallback, cancelCallback);
},
@ -183,15 +192,16 @@ export default {
* @param {function} callback callback to invoke when auth popup is closed.
* @returns auth dialog
*/
showExternalAuthDialog: function (url, callback) {
var dialog = APP.UI.messageHandler.openCenteredPopup(
showExternalAuthDialog(url, callback) {
const dialog = APP.UI.messageHandler.openCenteredPopup(
url, 910, 660,
// On closed
callback
);
if (!dialog) {
APP.UI.messageHandler.openMessageDialog(null, "dialog.popupError");
APP.UI.messageHandler.openMessageDialog(null, 'dialog.popupError');
}
return dialog;

28
modules/UI/avatar/Avatar.js
View File

@ -25,7 +25,7 @@
import { getAvatarURL } from '../../../react/features/base/participants';
let users = {};
const users = {};
export default {
/**
@ -34,17 +34,19 @@ export default {
* @param prop {string} name of the prop
* @param val {string} value to be set
*/
_setUserProp: function (id, prop, val) {
_setUserProp(id, prop, val) {
// FIXME: Fixes the issue with not be able to return avatar for the
// local user when the conference has been left. Maybe there is beter
// way to solve it.
if (!id || APP.conference.isLocalId(id)) {
id = "local";
id = 'local';// eslint-disable-line no-param-reassign
}
if(!val || (users[id] && users[id][prop] === val))
if (!val || (users[id] && users[id][prop] === val)) {
return;
if(!users[id])
}
if (!users[id]) {
users[id] = {};
}
users[id][prop] = val;
},
@ -54,8 +56,8 @@ export default {
* @param id id of the user
* @param email email or nickname to be used as a hash
*/
setUserEmail: function (id, email) {
this._setUserProp(id, "email", email);
setUserEmail(id, email) {
this._setUserProp(id, 'email', email);
},
/**
@ -64,8 +66,8 @@ export default {
* @param id id of the user
* @param url the url for the avatar
*/
setUserAvatarUrl: function (id, url) {
this._setUserProp(id, "avatarUrl", url);
setUserAvatarUrl(id, url) {
this._setUserProp(id, 'avatarUrl', url);
},
/**
@ -73,8 +75,8 @@ export default {
* @param id id of the user
* @param avatarId an id to be used for the avatar
*/
setUserAvatarID: function (id, avatarId) {
this._setUserProp(id, "avatarId", avatarId);
setUserAvatarID(id, avatarId) {
this._setUserProp(id, 'avatarId', avatarId);
},
/**
@ -82,10 +84,12 @@ export default {
* identified by its id.
* @param {string} userId user id
*/
getAvatarUrl: function (userId) {
getAvatarUrl(userId) {
let user;
if (!userId || APP.conference.isLocalId(userId)) {
user = users.local;
// eslint-disable-next-line no-param-reassign
userId = APP.conference.getMyUserId();
} else {
user = users[userId];

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

@ -1,8 +1,8 @@
/* global $ */
import VideoLayout from "../videolayout/VideoLayout";
import VideoLayout from '../videolayout/VideoLayout';
import LargeContainer from '../videolayout/LargeContainer';
import UIEvents from "../../../service/UI/UIEvents";
import UIEvents from '../../../service/UI/UIEvents';
import Filmstrip from '../videolayout/Filmstrip';
/**
@ -15,14 +15,21 @@ const options = $.param({
useMonospaceFont: false
});
/**
*
*/
function bubbleIframeMouseMove(iframe) {
var existingOnMouseMove = iframe.contentWindow.onmousemove;
const existingOnMouseMove = iframe.contentWindow.onmousemove;
iframe.contentWindow.onmousemove = function(e) {
if(existingOnMouseMove) existingOnMouseMove(e);
var evt = document.createEvent("MouseEvents");
var boundingClientRect = iframe.getBoundingClientRect();
if (existingOnMouseMove) {
existingOnMouseMove(e);
}
const evt = document.createEvent('MouseEvents');
const boundingClientRect = iframe.getBoundingClientRect();
evt.initMouseEvent(
"mousemove",
'mousemove',
true, // bubbles
false, // not cancelable
window,
@ -46,27 +53,30 @@ function bubbleIframeMouseMove(iframe){
* Default Etherpad frame width.
*/
const DEFAULT_WIDTH = 640;
/**
* Default Etherpad frame height.
*/
const DEFAULT_HEIGHT = 480;
const ETHERPAD_CONTAINER_TYPE = "etherpad";
const ETHERPAD_CONTAINER_TYPE = 'etherpad';
/**
* Container for Etherpad iframe.
*/
class Etherpad extends LargeContainer {
/**
* Creates new Etherpad object
*/
constructor(domain, name) {
super();
const iframe = document.createElement('iframe');
iframe.id = "etherpadIFrame";
iframe.src = domain + name + '?' + options;
iframe.id = 'etherpadIFrame';
iframe.src = `${domain + name}?${options}`;
iframe.frameBorder = 0;
iframe.scrolling = "no";
iframe.scrolling = 'no';
iframe.width = DEFAULT_WIDTH;
iframe.height = DEFAULT_HEIGHT;
iframe.setAttribute('style', 'visibility: hidden;');
@ -77,15 +87,17 @@ class Etherpad extends LargeContainer {
document.domain = document.domain;
bubbleIframeMouseMove(iframe);
setTimeout(function() {
setTimeout(() => {
const doc = iframe.contentDocument;
// the iframes inside of the etherpad are
// not yet loaded when the etherpad iframe is loaded
const outer = doc.getElementsByName("ace_outer")[0];
const outer = doc.getElementsByName('ace_outer')[0];
bubbleIframeMouseMove(outer);
const inner = doc.getElementsByName("ace_inner")[0];
const inner = doc.getElementsByName('ace_inner')[0];
bubbleIframeMouseMove(inner);
}, 2000);
};
@ -93,29 +105,42 @@ class Etherpad extends LargeContainer {
this.iframe = iframe;
}
/**
*
*/
get isOpen() {
return !!this.iframe;
return Boolean(this.iframe);
}
/**
*
*/
get container() {
return document.getElementById('etherpad');
}
// eslint-disable-next-line no-unused-vars
resize (containerWidth, containerHeight, animate) {
let height = containerHeight - Filmstrip.getFilmstripHeight();
let width = containerWidth;
/**
*
*/
resize(containerWidth, containerHeight) {
const height = containerHeight - Filmstrip.getFilmstripHeight();
const width = containerWidth;
$(this.iframe).width(width).height(height);
$(this.iframe)
.width(width)
.height(height);
}
/**
*
*/
show() {
const $iframe = $(this.iframe);
const $container = $(this.container);
let self = this;
const self = this;
return new Promise(resolve => {
$iframe.fadeIn(300, function () {
$iframe.fadeIn(300, () => {
self.bodyBackground = document.body.style.background;
document.body.style.background = '#eeeeee';
$iframe.css({ visibility: 'visible' });
@ -125,13 +150,17 @@ class Etherpad extends LargeContainer {
});
}
/**
*
*/
hide() {
const $iframe = $(this.iframe);
const $container = $(this.container);
document.body.style.background = this.bodyBackground;
return new Promise(resolve => {
$iframe.fadeOut(300, function () {
$iframe.fadeOut(300, () => {
$iframe.css({ visibility: 'hidden' });
$container.css({ zIndex: 0 });
resolve();
@ -151,9 +180,12 @@ class Etherpad extends LargeContainer {
* Manager of the Etherpad frame.
*/
export default class EtherpadManager {
/**
*
*/
constructor(domain, name, eventEmitter) {
if (!domain || !name) {
throw new Error("missing domain or name");
throw new Error('missing domain or name');
}
this.domain = domain;
@ -162,10 +194,16 @@ export default class EtherpadManager {
this.etherpad = null;
}
/**
*
*/
get isOpen() {
return !!this.etherpad;
return Boolean(this.etherpad);
}
/**
*
*/
isVisible() {
return VideoLayout.isLargeContainerTypeVisible(ETHERPAD_CONTAINER_TYPE);
}
@ -190,7 +228,7 @@ export default class EtherpadManager {
this.openEtherpad();
}
let isVisible = this.isVisible();
const isVisible = this.isVisible();
VideoLayout.showLargeVideoContainer(
ETHERPAD_CONTAINER_TYPE, !isVisible);

164
modules/UI/recording/Recording.js
View File

@ -14,9 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import UIEvents from "../../../service/UI/UIEvents";
import UIEvents from '../../../service/UI/UIEvents';
import UIUtil from '../util/UIUtil';
import VideoLayout from '../videolayout/VideoLayout';
@ -84,7 +84,7 @@ let dialog = null;
*/
function _isRecordingButtonEnabled() {
return (
interfaceConfig.TOOLBAR_BUTTONS.indexOf("recording") !== -1
interfaceConfig.TOOLBAR_BUTTONS.indexOf('recording') !== -1
&& config.enableRecording
&& APP.conference.isRecordingSupported());
}
@ -95,69 +95,75 @@ function _isRecordingButtonEnabled() {
*/
function _requestLiveStreamId() {
const cancelButton
= APP.translation.generateTranslationHTML("dialog.Cancel");
const backButton = APP.translation.generateTranslationHTML("dialog.Back");
= APP.translation.generateTranslationHTML('dialog.Cancel');
const backButton = APP.translation.generateTranslationHTML('dialog.Back');
const startStreamingButton
= APP.translation.generateTranslationHTML("dialog.startLiveStreaming");
= APP.translation.generateTranslationHTML('dialog.startLiveStreaming');
const streamIdRequired
= APP.translation.generateTranslationHTML(
"liveStreaming.streamIdRequired");
'liveStreaming.streamIdRequired');
const streamIdHelp
= APP.translation.generateTranslationHTML(
"liveStreaming.streamIdHelp");
'liveStreaming.streamIdHelp');
return new Promise(function (resolve, reject) {
return new Promise((resolve, reject) => {
dialog = APP.UI.messageHandler.openDialogWithStates({
state0: {
titleKey: "dialog.liveStreaming",
titleKey: 'dialog.liveStreaming',
html:
`<input class="input-control"
name="streamId" type="text"
data-i18n="[placeholder]dialog.streamKey"
autofocus><div style="text-align: right">
<a class="helper-link" target="_new"
href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
+ streamIdHelp
+ `</a></div>`,
href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">${
streamIdHelp
}</a></div>`,
persistent: false,
buttons: [
{title: cancelButton, value: false},
{title: startStreamingButton, value: true}
{ title: cancelButton,
value: false },
{ title: startStreamingButton,
value: true }
],
focus: ':input:first',
defaultButton: 1,
submit: function (e, v, m, f) {
submit(e, v, m, f) { // eslint-disable-line max-params
e.preventDefault();
if (v) {
if (f.streamId && f.streamId.length > 0) {
resolve(UIUtil.escapeHtml(f.streamId));
dialog.close();
return;
}
else {
dialog.goToState('state1');
return false;
}
} else {
reject(APP.UI.messageHandler.CANCEL);
dialog.close();
return false;
}
}
},
state1: {
titleKey: "dialog.liveStreaming",
titleKey: 'dialog.liveStreaming',
html: streamIdRequired,
persistent: false,
buttons: [
{title: cancelButton, value: false},
{title: backButton, value: true}
{ title: cancelButton,
value: false },
{ title: backButton,
value: true }
],
focus: ':input:first',
defaultButton: 1,
submit: function (e, v) {
submit(e, v) {
e.preventDefault();
if (v === 0) {
reject(APP.UI.messageHandler.CANCEL);
@ -168,7 +174,7 @@ function _requestLiveStreamId() {
}
}
}, {
close: function () {
close() {
dialog = null;
}
});
@ -180,26 +186,29 @@ function _requestLiveStreamId() {
* @returns {Promise}
*/
function _requestRecordingToken() {
let titleKey = "dialog.recordingToken";
let msgString = (
`<input name="recordingToken" type="text"
const titleKey = 'dialog.recordingToken';
const msgString
= `<input name="recordingToken" type="text"
data-i18n="[placeholder]dialog.token"
class="input-control"
autofocus>`
);
return new Promise(function (resolve, reject) {
;
return new Promise((resolve, reject) => {
dialog = APP.UI.messageHandler.openTwoButtonDialog({
titleKey,
msgString,
leftButtonKey: 'dialog.Save',
submitFunction: function (e, v, m, f) {
submitFunction(e, v, m, f) { // eslint-disable-line max-params
if (v && f.recordingToken) {
resolve(UIUtil.escapeHtml(f.recordingToken));
} else {
reject(APP.UI.messageHandler.CANCEL);
}
},
closeFunction: function () {
closeFunction() {
dialog = null;
},
focus: ':input:first'
@ -215,18 +224,18 @@ function _requestRecordingToken() {
* @private
*/
function _showStopRecordingPrompt(recordingType) {
var title;
var message;
var buttonKey;
if (recordingType === "jibri") {
title = "dialog.liveStreaming";
message = "dialog.stopStreamingWarning";
buttonKey = "dialog.stopLiveStreaming";
}
else {
title = "dialog.recording";
message = "dialog.stopRecordingWarning";
buttonKey = "dialog.stopRecording";
let title;
let message;
let buttonKey;
if (recordingType === 'jibri') {
title = 'dialog.liveStreaming';
message = 'dialog.stopStreamingWarning';
buttonKey = 'dialog.stopLiveStreaming';
} else {
title = 'dialog.recording';
message = 'dialog.stopRecordingWarning';
buttonKey = 'dialog.stopRecording';
}
return new Promise((resolve, reject) => {
@ -248,7 +257,10 @@ function _showStopRecordingPrompt(recordingType) {
* @returns {boolean} true if the condition is met or false otherwise.
*/
function isStartingStatus(status) {
return status === JitsiRecordingStatus.PENDING || status === JitsiRecordingStatus.RETRYING;
return (
status === JitsiRecordingStatus.PENDING
|| status === JitsiRecordingStatus.RETRYING
);
}
/**
@ -256,7 +268,7 @@ function isStartingStatus(status) {
* @type {{init, initRecordingButton, showRecordingButton, updateRecordingState,
* updateRecordingUI, checkAutoRecord}}
*/
var Recording = {
const Recording = {
/**
* Initializes the recording UI.
*/
@ -267,11 +279,10 @@ var Recording = {
this.updateRecordingState(APP.conference.getRecordingState());
if (recordingType === 'jibri') {
this.baseClass = "fa fa-play-circle";
this.baseClass = 'fa fa-play-circle';
Object.assign(this, STREAMING_TRANSLATION_KEYS);
}
else {
this.baseClass = "icon-recEnable";
} else {
this.baseClass = 'icon-recEnable';
Object.assign(this, RECORDING_TRANSLATION_KEYS);
}
@ -301,7 +312,7 @@ var Recording = {
const selector = $('#toolbar_button_record');
selector.addClass(this.baseClass);
selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
selector.attr('data-i18n', `[content]${this.recordingButtonTooltip}`);
APP.translation.translateElement(selector);
},
@ -310,8 +321,8 @@ var Recording = {
* @param show {true} to show the recording button, {false} to hide it
*/
showRecordingButton(show) {
let shouldShow = show && _isRecordingButtonEnabled();
let id = 'toolbar_button_record';
const shouldShow = show && _isRecordingButtonEnabled();
const id = 'toolbar_button_record';
UIUtil.setVisible(id, shouldShow);
},
@ -322,12 +333,14 @@ var Recording = {
*/
updateRecordingState(recordingState) {
// I'm the recorder, so I don't want to see any UI related to states.
if (config.iAmRecorder)
if (config.iAmRecorder) {
return;
}
// If there's no state change, we ignore the update.
if (!recordingState || this.currentState === recordingState)
if (!recordingState || this.currentState === recordingState) {
return;
}
this.updateRecordingUI(recordingState);
},
@ -338,7 +351,8 @@ var Recording = {
*/
updateRecordingUI(recordingState) {
let oldState = this.currentState;
const oldState = this.currentState;
this.currentState = recordingState;
let labelDisplayConfiguration;
@ -366,6 +380,7 @@ var Recording = {
// We don't want UI changes if this is an availability change.
if (oldState !== JitsiRecordingStatus.ON && !wasInStartingStatus) {
APP.store.dispatch(updateRecordingState({ recordingState }));
return;
}
@ -378,7 +393,7 @@ var Recording = {
this._setToolbarButtonToggled(false);
setTimeout(function(){
setTimeout(() => {
APP.store.dispatch(hideRecordingLabel());
}, 5000);
@ -408,7 +423,8 @@ var Recording = {
}
// Return an empty label display configuration to indicate no label
// should be displayed. The JitsiRecordingStatus.AVAIABLE case is handled here.
// should be displayed. The JitsiRecordingStatus.AVAIABLE case is
// handled here.
default: {
labelDisplayConfiguration = null;
}
@ -450,42 +466,48 @@ var Recording = {
this.eventEmitter.emit(UIEvents.RECORDING_TOGGLED);
sendEvent('recording.stopped');
},
() => {});
() => {}); // eslint-disable-line no-empty-function
break;
}
case JitsiRecordingStatus.AVAILABLE:
case JitsiRecordingStatus.OFF: {
if (this.recordingType === 'jibri')
_requestLiveStreamId().then(streamId => {
if (this.recordingType === 'jibri') {
_requestLiveStreamId()
.then(streamId => {
this.eventEmitter.emit(
UIEvents.RECORDING_TOGGLED,
{ streamId });
sendEvent('recording.started');
}).catch(reason => {
if (reason !== APP.UI.messageHandler.CANCEL)
logger.error(reason);
else
})
.catch(reason => {
if (reason === APP.UI.messageHandler.CANCEL) {
sendEvent('recording.canceled');
} else {
logger.error(reason);
}
});
else {
} else {
if (this.predefinedToken) {
this.eventEmitter.emit(
UIEvents.RECORDING_TOGGLED,
{ token: this.predefinedToken });
sendEvent('recording.started');
return;
}
_requestRecordingToken().then((token) => {
_requestRecordingToken().then(token => {
this.eventEmitter.emit(
UIEvents.RECORDING_TOGGLED,
{ token });
sendEvent('recording.started');
}).catch(reason => {
if (reason !== APP.UI.messageHandler.CANCEL)
logger.error(reason);
else
})
.catch(reason => {
if (reason === APP.UI.messageHandler.CANCEL) {
sendEvent('recording.canceled');
} else {
logger.error(reason);
}
});
}
break;
@ -521,7 +543,7 @@ var Recording = {
* or not
*/
_setToolbarButtonToggled(isToggled) {
$("#toolbar_button_record").toggleClass("toggled", isToggled);
$('#toolbar_button_record').toggleClass('toggled', isToggled);
}
};

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

@ -1,10 +1,10 @@
/* global $, APP, YT, onPlayerReady, onPlayerStateChange, onPlayerError */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
import VideoLayout from "../videolayout/VideoLayout";
import VideoLayout from '../videolayout/VideoLayout';
import LargeContainer from '../videolayout/LargeContainer';
import Filmstrip from '../videolayout/Filmstrip';
@ -17,13 +17,13 @@ import { dockToolbox, showToolbox } from '../../../react/features/toolbox';
import SharedVideoThumb from './SharedVideoThumb';
export const SHARED_VIDEO_CONTAINER_TYPE = "sharedvideo";
export const SHARED_VIDEO_CONTAINER_TYPE = 'sharedvideo';
/**
* Example shared video link.
* @type {string}
*/
const defaultSharedVideoLink = "https://www.youtube.com/watch?v=xNXN7CZk8X0";
const defaultSharedVideoLink = 'https://www.youtube.com/watch?v=xNXN7CZk8X0';
const updateInterval = 5000; // milliseconds
/**
@ -36,6 +36,9 @@ let dialog = null;
* Manager of shared video.
*/
export default class SharedVideoManager {
/**
*
*/
constructor(emitter) {
this.emitter = emitter;
this.isSharedVideoShown = false;
@ -52,10 +55,10 @@ export default class SharedVideoManager {
* currently on.
*/
isSharedVideoVolumeOn() {
return (this.player
return this.player
&& this.player.getPlayerState() === YT.PlayerState.PLAYING
&& !this.player.isMuted()
&& this.player.getVolume() > 0);
&& this.player.getVolume() > 0;
}
/**
@ -71,8 +74,9 @@ export default class SharedVideoManager {
* asks whether the user wants to stop sharing the video.
*/
toggleSharedVideo() {
if (dialog)
if (dialog) {
return;
}
if (!this.isSharedVideoShown) {
requestVideoLink().then(
@ -86,6 +90,7 @@ export default class SharedVideoManager {
sendEvent('sharedvideo.canceled');
}
);
return;
}
@ -104,13 +109,13 @@ export default class SharedVideoManager {
UIEvents.UPDATE_SHARED_VIDEO, this.url, 'stop');
sendEvent('sharedvideo.stoped');
},
() => {});
() => {}); // eslint-disable-line no-empty-function
} else {
dialog = APP.UI.messageHandler.openMessageDialog(
"dialog.shareVideoTitle",
"dialog.alreadySharedVideoMsg",
'dialog.shareVideoTitle',
'dialog.alreadySharedVideoMsg',
null,
function () {
() => {
dialog = null;
}
);
@ -127,8 +132,9 @@ export default class SharedVideoManager {
* @param attributes
*/
onSharedVideoStart(id, url, attributes) {
if (this.isSharedVideoShown)
if (this.isSharedVideoShown) {
return;
}
this.isSharedVideoShown = true;
@ -145,10 +151,11 @@ export default class SharedVideoManager {
this.emitter.on(UIEvents.AUDIO_MUTED, this.localAudioMutedListener);
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
const tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
const firstScriptTag = document.getElementsByTagName('script')[0];
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// sometimes we receive errors like player not defined
@ -158,14 +165,16 @@ export default class SharedVideoManager {
// and will process any initial attributes if any
this.initialAttributes = attributes;
var self = this;
if(self.isPlayerAPILoaded)
const self = this;
if (self.isPlayerAPILoaded) {
window.onYouTubeIframeAPIReady();
else
} else {
window.onYouTubeIframeAPIReady = function() {
self.isPlayerAPILoaded = true;
let showControls = APP.conference.isLocalId(self.from) ? 1 : 0;
let p = new YT.Player('sharedVideoIFrame', {
const showControls
= APP.conference.isLocalId(self.from) ? 1 : 0;
const p = new YT.Player('sharedVideoIFrame', {
height: '100%',
width: '100%',
videoId: self.url,
@ -185,28 +194,28 @@ export default class SharedVideoManager {
// add listener for volume changes
p.addEventListener(
"onVolumeChange", "onVolumeChange");
'onVolumeChange', 'onVolumeChange');
if (APP.conference.isLocalId(self.from)) {
// adds progress listener that will be firing events
// while we are paused and we change the progress of the
// video (seeking forward or backward on the video)
p.addEventListener(
"onVideoProgress", "onVideoProgress");
'onVideoProgress', 'onVideoProgress');
}
};
}
/**
* Indicates that a change in state has occurred for the shared video.
* @param event the event notifying us of the change
*/
window.onPlayerStateChange = function(event) {
// eslint-disable-next-line eqeqeq
if (event.data == YT.PlayerState.PLAYING) {
self.player = event.target;
if(self.initialAttributes)
{
if (self.initialAttributes) {
// If a network update has occurred already now is the
// time to process it.
self.processVideoUpdate(
@ -216,10 +225,12 @@ export default class SharedVideoManager {
self.initialAttributes = null;
}
self.smartAudioMute();
// eslint-disable-next-line eqeqeq
} else if (event.data == YT.PlayerState.PAUSED) {
self.smartAudioUnmute();
sendEvent('sharedvideo.paused');
}
// eslint-disable-next-line eqeqeq
self.fireSharedVideoEvent(event.data == YT.PlayerState.PAUSED);
};
@ -228,7 +239,9 @@ export default class SharedVideoManager {
* @param event
*/
window.onVideoProgress = function(event) {
let state = event.target.getPlayerState();
const state = event.target.getPlayerState();
// eslint-disable-next-line eqeqeq
if (state == YT.PlayerState.PAUSED) {
self.fireSharedVideoEvent(true);
}
@ -244,32 +257,38 @@ export default class SharedVideoManager {
// let's check, if player is not muted lets mute locally
if (event.data.volume > 0 && !event.data.muted) {
self.smartAudioMute();
}
else if (event.data.volume <=0 || event.data.muted) {
} else if (event.data.volume <= 0 || event.data.muted) {
self.smartAudioUnmute();
}
sendEvent('sharedvideo.volumechanged');
};
window.onPlayerReady = function(event) {
let player = event.target;
const player = event.target;
// do not relay on autoplay as it is not sending all of the events
// in onPlayerStateChange
player.playVideo();
let thumb = new SharedVideoThumb(
const thumb = new SharedVideoThumb(
self.url, SHARED_VIDEO_CONTAINER_TYPE, VideoLayout);
thumb.setDisplayName(player.getVideoData().title);
VideoLayout.addRemoteVideoContainer(self.url, thumb);
let iframe = player.getIframe();
const iframe = player.getIframe();
// eslint-disable-next-line no-use-before-define
self.sharedVideo = new SharedVideoContainer(
{url, iframe, player});
{ url,
iframe,
player });
// prevents pausing participants not sharing the video
// to pause the video
if (!APP.conference.isLocalId(self.from)) {
$("#sharedVideo").css("pointer-events","none");
$('#sharedVideo').css('pointer-events', 'none');
}
VideoLayout.addLargeVideoContainer(
@ -293,7 +312,8 @@ export default class SharedVideoManager {
};
window.onPlayerError = function(event) {
logger.error("Error in the player:", event.data);
logger.error('Error in the player:', event.data);
// store the error player, so we can remove it
self.errorInPlayer = event.target;
};
@ -304,21 +324,23 @@ export default class SharedVideoManager {
* @param player the player to operate over
* @param attributes the attributes with the player state we want
*/
processVideoUpdate (player, attributes)
{
if(!attributes)
processVideoUpdate(player, attributes) {
if (!attributes) {
return;
}
// eslint-disable-next-line eqeqeq
if (attributes.state == 'playing') {
let isPlayerPaused
= (this.player.getPlayerState() === YT.PlayerState.PAUSED);
const isPlayerPaused
= this.player.getPlayerState() === YT.PlayerState.PAUSED;
// If our player is currently paused force the seek.
this.processTime(player, attributes, isPlayerPaused);
// Process mute.
let isAttrMuted = (attributes.muted === "true");
const isAttrMuted = attributes.muted === 'true';
if (player.isMuted() !== isAttrMuted) {
this.smartPlayerMute(isAttrMuted, true);
}
@ -326,16 +348,18 @@ export default class SharedVideoManager {
// Process volume
if (!isAttrMuted
&& attributes.volume !== undefined
// eslint-disable-next-line eqeqeq
&& player.getVolume() != attributes.volume) {
player.setVolume(attributes.volume);
logger.info("Player change of volume:" + attributes.volume);
logger.info(`Player change of volume:${attributes.volume}`);
this.showSharedVideoMutedPopup(false);
}
if (isPlayerPaused)
if (isPlayerPaused) {
player.playVideo();
}
// eslint-disable-next-line eqeqeq
} else if (attributes.state == 'pause') {
// if its not paused, pause it
player.pauseVideo();
@ -350,23 +374,23 @@ export default class SharedVideoManager {
* @param attributes the attributes with the player state we want
* @param forceSeek whether seek should be forced
*/
processTime (player, attributes, forceSeek)
{
processTime(player, attributes, forceSeek) {
if (forceSeek) {
logger.info("Player seekTo:", attributes.time);
logger.info('Player seekTo:', attributes.time);
player.seekTo(attributes.time);
return;
}
// check received time and current time
let currentPosition = player.getCurrentTime();
let diff = Math.abs(attributes.time - currentPosition);
const currentPosition = player.getCurrentTime();
const diff = Math.abs(attributes.time - currentPosition);
// if we drift more than the interval for checking
// sync, the interval is in milliseconds
if (diff > updateInterval / 1000) {
logger.info("Player seekTo:", attributes.time,
" current time is:", currentPosition, " diff:", diff);
logger.info('Player seekTo:', attributes.time,
' current time is:', currentPosition, ' diff:', diff);
player.seekTo(attributes.time);
}
}
@ -374,24 +398,25 @@ export default class SharedVideoManager {
/**
* Checks current state of the player and fire an event with the values.
*/
fireSharedVideoEvent(sendPauseEvent)
{
fireSharedVideoEvent(sendPauseEvent) {
// ignore update checks if we are not the owner of the video
// or there is still no player defined or we are stopped
// (in a process of stopping)
if (!APP.conference.isLocalId(this.from) || !this.player
|| !this.isSharedVideoShown)
|| !this.isSharedVideoShown) {
return;
}
const state = this.player.getPlayerState();
let state = this.player.getPlayerState();
// if its paused and haven't been pause - send paused
if (state === YT.PlayerState.PAUSED && sendPauseEvent) {
this.emitter.emit(UIEvents.UPDATE_SHARED_VIDEO,
this.url, 'pause', this.player.getCurrentTime());
}
} else if (state === YT.PlayerState.PLAYING) {
// if its playing and it was paused - send update with time
// if its playing and was playing just send update with time
else if (state === YT.PlayerState.PLAYING) {
this.emitter.emit(UIEvents.UPDATE_SHARED_VIDEO,
this.url, 'playing',
this.player.getCurrentTime(),
@ -415,12 +440,14 @@ export default class SharedVideoManager {
if (!this.isSharedVideoShown) {
this.onSharedVideoStart(id, url, attributes);
return;
}
if(!this.player)
// eslint-disable-next-line no-negated-condition
if (!this.player) {
this.initialAttributes = attributes;
else {
} else {
this.processVideoUpdate(this.player, attributes);
}
}
@ -432,17 +459,20 @@ export default class SharedVideoManager {
* @param id the id of the sender of the command
*/
onSharedVideoStop(id, attributes) {
if (!this.isSharedVideoShown)
if (!this.isSharedVideoShown) {
return;
}
if(this.from !== id)
if (this.from !== id) {
return;
}
if (!this.player) {
// if there is no error in the player till now,
// store the initial attributes
if (!this.errorInPlayer) {
this.initialAttributes = attributes;
return;
}
}
@ -461,15 +491,16 @@ export default class SharedVideoManager {
if (this.player) {
this.player.destroy();
this.player = null;
} // if there is an error in player, remove that instance
else if (this.errorInPlayer) {
} else if (this.errorInPlayer) {
// if there is an error in player, remove that instance
this.errorInPlayer.destroy();
this.errorInPlayer = null;
}
this.smartAudioUnmute();
// revert to original behavior (prevents pausing
// for participants not sharing the video to pause it)
$("#sharedVideo").css("pointer-events","auto");
$('#sharedVideo').css('pointer-events', 'auto');
this.emitter.emit(
UIEvents.UPDATE_SHARED_VIDEO, null, 'removed');
@ -489,14 +520,15 @@ export default class SharedVideoManager {
* i.e. pressing the mute button or it was programatically triggerred
*/
onLocalAudioMuted(muted, userInteraction) {
if(!this.player)
if (!this.player) {
return;
}
if (muted) {
this.mutedWithUserInteraction = userInteraction;
}
else if (this.player.getPlayerState() !== YT.PlayerState.PAUSED) {
} else if (this.player.getPlayerState() !== YT.PlayerState.PAUSED) {
this.smartPlayerMute(true, false);
// Check if we need to update other participants
this.fireSharedVideoEvent();
}
@ -512,14 +544,15 @@ export default class SharedVideoManager {
if (!this.player.isMuted() && mute) {
this.player.mute();
if (isVideoUpdate)
if (isVideoUpdate) {
this.smartAudioUnmute();
}
else if (this.player.isMuted() && !mute) {
} else if (this.player.isMuted() && !mute) {
this.player.unMute();
if (isVideoUpdate)
if (isVideoUpdate) {
this.smartAudioMute();
}
}
this.showSharedVideoMutedPopup(mute);
}
@ -533,7 +566,7 @@ export default class SharedVideoManager {
if (APP.conference.isLocalAudioMuted()
&& !this.mutedWithUserInteraction
&& !this.isSharedVideoVolumeOn()) {
sendEvent("sharedvideo.audio.unmuted");
sendEvent('sharedvideo.audio.unmuted');
logger.log('Shared video: audio unmuted');
this.emitter.emit(UIEvents.AUDIO_MUTED, false, false);
this.showMicMutedPopup(false);
@ -547,7 +580,7 @@ export default class SharedVideoManager {
smartAudioMute() {
if (!APP.conference.isLocalAudioMuted()
&& this.isSharedVideoVolumeOn()) {
sendEvent("sharedvideo.audio.muted");
sendEvent('sharedvideo.audio.muted');
logger.log('Shared video: audio muted');
this.emitter.emit(UIEvents.AUDIO_MUTED, true, false);
this.showMicMutedPopup(true);
@ -560,8 +593,9 @@ export default class SharedVideoManager {
* @param show boolean, show or hide the notification
*/
showMicMutedPopup(show) {
if(show)
if (show) {
this.showSharedVideoMutedPopup(false);
}
APP.UI.showCustomToolbarPopup(
'microphone', 'micMutedPopup', show, 5000);
@ -574,8 +608,9 @@ export default class SharedVideoManager {
* @param show boolean, show or hide the notification
*/
showSharedVideoMutedPopup(show) {
if(show)
if (show) {
this.showMicMutedPopup(false);
}
APP.UI.showCustomToolbarPopup(
'sharedvideo', 'sharedVideoMutedPopup', show, 5000);
@ -586,7 +621,9 @@ export default class SharedVideoManager {
* Container for shared video iframe.
*/
class SharedVideoContainer extends LargeContainer {
/**
*
*/
constructor({ url, iframe, player }) {
super();
@ -595,8 +632,13 @@ class SharedVideoContainer extends LargeContainer {
this.player = player;
}
/**
*
*/
show() {
let self = this;
const self = this;
return new Promise(resolve => {
this.$iframe.fadeIn(300, () => {
self.bodyBackground = document.body.style.background;
@ -608,9 +650,14 @@ class SharedVideoContainer extends LargeContainer {
});
}
/**
*
*/
hide() {
let self = this;
const self = this;
APP.store.dispatch(dockToolbox(false));
return new Promise(resolve => {
this.$iframe.fadeOut(300, () => {
document.body.style.background = self.bodyBackground;
@ -620,18 +667,27 @@ class SharedVideoContainer extends LargeContainer {
});
}
/**
*
*/
onHoverIn() {
APP.store.dispatch(showToolbox());
}
/**
*
*/
get id() {
return this.url;
}
/**
*
*/
resize(containerWidth, containerHeight) {
let height = containerHeight - Filmstrip.getFilmstripHeight();
const height = containerHeight - Filmstrip.getFilmstripHeight();
let width = containerWidth;
const width = containerWidth;
this.$iframe.width(width).height(height);
}
@ -650,16 +706,18 @@ class SharedVideoContainer extends LargeContainer {
* @returns {boolean}
*/
function getYoutubeLink(url) {
let p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;//jshint ignore:line
return (url.match(p)) ? RegExp.$1 : false;
const p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;// eslint-disable-line max-len
return url.match(p) ? RegExp.$1 : false;
}
/**
* Ask user if he want to close shared video.
*/
function showStopVideoPropmpt() {
return new Promise(function (resolve, reject) {
let submitFunction = function(e,v) {
return new Promise((resolve, reject) => {
const submitFunction = function(e, v) {
if (v) {
resolve();
} else {
@ -667,14 +725,14 @@ function showStopVideoPropmpt() {
}
};
let closeFunction = function () {
const closeFunction = function() {
dialog = null;
};
dialog = APP.UI.messageHandler.openTwoButtonDialog({
titleKey: "dialog.removeSharedVideoTitle",
msgKey: "dialog.removeSharedVideoMsg",
leftButtonKey: "dialog.Remove",
titleKey: 'dialog.removeSharedVideoTitle',
msgKey: 'dialog.removeSharedVideoMsg',
leftButtonKey: 'dialog.Remove',
submitFunction,
closeFunction
});
@ -686,46 +744,53 @@ function showStopVideoPropmpt() {
* Dialog validates client input to allow only youtube urls.
*/
function requestVideoLink() {
let i18n = APP.translation;
const cancelButton = i18n.generateTranslationHTML("dialog.Cancel");
const shareButton = i18n.generateTranslationHTML("dialog.Share");
const backButton = i18n.generateTranslationHTML("dialog.Back");
const i18n = APP.translation;
const cancelButton = i18n.generateTranslationHTML('dialog.Cancel');
const shareButton = i18n.generateTranslationHTML('dialog.Share');
const backButton = i18n.generateTranslationHTML('dialog.Back');
const linkError
= i18n.generateTranslationHTML("dialog.shareVideoLinkError");
= i18n.generateTranslationHTML('dialog.shareVideoLinkError');
return new Promise(function (resolve, reject) {
return new Promise((resolve, reject) => {
dialog = APP.UI.messageHandler.openDialogWithStates({
state0: {
titleKey: "dialog.shareVideoTitle",
titleKey: 'dialog.shareVideoTitle',
html: `
<input name="sharedVideoUrl" type="text"
class="input-control"
data-i18n="[placeholder]defaultLink"
<input name='sharedVideoUrl' type='text'
class='input-control'
data-i18n='[placeholder]defaultLink'
autofocus>`,
persistent: false,
buttons: [
{title: cancelButton, value: false},
{title: shareButton, value: true}
{ title: cancelButton,
value: false },
{ title: shareButton,
value: true }
],
focus: ':input:first',
defaultButton: 1,
submit: function (e, v, m, f) {
submit(e, v, m, f) { // eslint-disable-line max-params
e.preventDefault();
if (!v) {
reject('cancelled');
dialog.close();
return;
}
let sharedVideoUrl = f.sharedVideoUrl;
const sharedVideoUrl = f.sharedVideoUrl;
if (!sharedVideoUrl) {
return;
}
let urlValue = encodeURI(UIUtil.escapeHtml(sharedVideoUrl));
let yVideoId = getYoutubeLink(urlValue);
const urlValue
= encodeURI(UIUtil.escapeHtml(sharedVideoUrl));
const yVideoId = getYoutubeLink(urlValue);
if (!yVideoId) {
dialog.goToState('state1');
return false;
}
@ -735,16 +800,18 @@ function requestVideoLink() {
},
state1: {
titleKey: "dialog.shareVideoTitle",
titleKey: 'dialog.shareVideoTitle',
html: linkError,
persistent: false,
buttons: [
{title: cancelButton, value: false},
{title: backButton, value: true}
{ title: cancelButton,
value: false },
{ title: backButton,
value: true }
],
focus: ':input:first',
defaultButton: 1,
submit: function (e, v) {
submit(e, v) {
e.preventDefault();
if (v === 0) {
reject();
@ -755,7 +822,7 @@ function requestVideoLink() {
}
}
}, {
close: function () {
close() {
dialog = null;
}
}, {

33
modules/UI/shared_video/SharedVideoThumb.js
View File

@ -1,15 +1,17 @@
/* global $ */
import SmallVideo from '../videolayout/SmallVideo';
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
export default function SharedVideoThumb (url, videoType, VideoLayout)
{
/**
*
*/
export default function SharedVideoThumb(url, videoType, VideoLayout) {
this.id = url;
this.url = url;
this.setVideoType(videoType);
this.videoSpanId = "sharedVideoContainer";
this.videoSpanId = 'sharedVideoContainer';
this.container = this.createContainer(this.videoSpanId);
this.$container = $(this.container);
this.container.onclick = this.videoClick.bind(this);
@ -23,27 +25,33 @@ SharedVideoThumb.prototype.constructor = SharedVideoThumb;
/**
* hide display name
*/
// eslint-disable-next-line no-empty-function
SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function() {};
// eslint-disable-next-line no-empty-function
SharedVideoThumb.prototype.avatarChanged = function() {};
SharedVideoThumb.prototype.createContainer = function(spanId) {
var container = document.createElement('span');
const container = document.createElement('span');
container.id = spanId;
container.className = 'videocontainer';
// add the avatar
var avatar = document.createElement('img');
const avatar = document.createElement('img');
avatar.className = 'sharedVideoAvatar';
avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg";
avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
container.appendChild(avatar);
const displayNameContainer = document.createElement('div');
displayNameContainer.className = 'displayNameContainer';
container.appendChild(displayNameContainer);
var remotes = document.getElementById('filmstripRemoteVideosContainer');
const remotes = document.getElementById('filmstripRemoteVideosContainer');
return remotes.appendChild(container);
};
@ -58,7 +66,7 @@ SharedVideoThumb.prototype.videoClick = function () {
* Removes RemoteVideo from the page.
*/
SharedVideoThumb.prototype.remove = function() {
logger.log("Remove shared video thumb", this.id);
logger.log('Remove shared video thumb', this.id);
// Make sure that the large video is updated if are removing its
// corresponding small video.
@ -75,8 +83,9 @@ SharedVideoThumb.prototype.remove = function () {
*/
SharedVideoThumb.prototype.setDisplayName = function(displayName) {
if (!this.container) {
logger.warn( "Unable to set displayName - " + this.videoSpanId +
" does not exist");
logger.warn(`Unable to set displayName - ${this.videoSpanId
} does not exist`);
return;
}

72
modules/UI/side_pannels/SideContainerToggler.js
View File

@ -1,5 +1,5 @@
/* global $ */
import UIEvents from "../../../service/UI/UIEvents";
import UIEvents from '../../../service/UI/UIEvents';
/**
* Handles open and close of the extended toolbar side panel
@ -19,22 +19,28 @@ const SideContainerToggler = {
// We may not have a side toolbar container, for example, in
// filmstrip-only mode.
const sideToolbarContainer
= document.getElementById("sideToolbarContainer");
= document.getElementById('sideToolbarContainer');
if (!sideToolbarContainer)
if (!sideToolbarContainer) {
return;
}
// Adds a listener for the animationend event that would take care of
// hiding all internal containers when the extendedToolbarPanel is
// closed.
sideToolbarContainer.addEventListener(
"animationend",
function(e) {
if (e.animationName === "slideOutExt")
$("#sideToolbarContainer").children().each(function() {
if ($(this).hasClass("show"))
'animationend',
e => {
if (e.animationName === 'slideOutExt') {
$('#sideToolbarContainer').children()
.each(function() {
/* eslint-disable no-invalid-this */
if ($(this).hasClass('show')) {
SideContainerToggler.hideInnerContainer($(this));
}
/* eslint-enable no-invalid-this */
});
}
},
false);
},
@ -46,21 +52,26 @@ const SideContainerToggler = {
* toggle
*/
toggle(elementId) {
let elementSelector = $(`#${elementId}`);
let isSelectorVisible = elementSelector.hasClass("show");
const elementSelector = $(`#${elementId}`);
const isSelectorVisible = elementSelector.hasClass('show');
if (isSelectorVisible) {
this.hide();
}
else {
if (this.isVisible())
$("#sideToolbarContainer").children().each(function() {
if ($(this).id !== elementId && $(this).hasClass("show"))
} else {
if (this.isVisible()) {
$('#sideToolbarContainer').children()
.each(function() {
/* eslint-disable no-invalid-this */
if ($(this).id !== elementId && $(this).hasClass('show')) {
SideContainerToggler.hideInnerContainer($(this));
}
/* eslint-enable no-invalid-this */
});
}
if (!this.isVisible())
if (!this.isVisible()) {
this.show();
}
this.showInnerContainer(elementSelector);
}
@ -71,7 +82,7 @@ const SideContainerToggler = {
* otherwise returns {false}.
*/
isVisible() {
return $("#sideToolbarContainer").hasClass("slideInExt");
return $('#sideToolbarContainer').hasClass('slideInExt');
},
/**
@ -79,24 +90,27 @@ const SideContainerToggler = {
* {false} otherwise.
*/
isHovered() {
return $("#sideToolbarContainer:hover").length > 0;
return $('#sideToolbarContainer:hover').length > 0;
},
/**
* Hides the side toolbar panel with a slide out animation.
*/
hide() {
$("#sideToolbarContainer")
.removeClass("slideInExt").addClass("slideOutExt");
$('#sideToolbarContainer')
.removeClass('slideInExt')
.addClass('slideOutExt');
},
/**
* Shows the side toolbar panel with a slide in animation.
*/
show() {
if (!this.isVisible())
$("#sideToolbarContainer")
.removeClass("slideOutExt").addClass("slideInExt");
if (!this.isVisible()) {
$('#sideToolbarContainer')
.removeClass('slideOutExt')
.addClass('slideInExt');
}
},
/**
@ -106,7 +120,7 @@ const SideContainerToggler = {
* element to hide
*/
hideInnerContainer(containerSelector) {
containerSelector.removeClass("show").addClass("hide");
containerSelector.removeClass('show').addClass('hide');
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
containerSelector.attr('id'), false);
@ -124,12 +138,16 @@ const SideContainerToggler = {
// If we quickly show a container, while another one is animating
// and animation never ends, so we do not really hide the first one and
// we end up with to shown panels
$("#sideToolbarContainer").children().each(function() {
if ($(this).hasClass("show"))
$('#sideToolbarContainer').children()
.each(function() {
/* eslint-disable no-invalid-this */
if ($(this).hasClass('show')) {
SideContainerToggler.hideInnerContainer($(this));
}
/* eslint-enable no-invalid-this */
});
containerSelector.removeClass("hide").addClass("show");
containerSelector.removeClass('hide').addClass('show');
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
containerSelector.attr('id'), true);

173
modules/UI/side_pannels/chat/Chat.js
View File

@ -2,7 +2,7 @@
import { processReplacements, linkify } from './Replacement';
import CommandsProcessor from './Commands';
import VideoLayout from "../../videolayout/VideoLayout";
import VideoLayout from '../../videolayout/VideoLayout';
import UIUtil from '../../util/UIUtil';
import UIEvents from '../../../../service/UI/UIEvents';
@ -36,6 +36,9 @@ const htmlStr = `
</div>
</div>`;
/**
*
*/
function initHTML() {
$(`#${sidePanelsContainerId}`)
.append(htmlStr);
@ -44,7 +47,7 @@ function initHTML() {
/**
* The container id, which is and the element id.
*/
var CHAT_CONTAINER_ID = "chat_container";
const CHAT_CONTAINER_ID = 'chat_container';
/**
* Updates visual notification, indicating that a message has arrived.
@ -66,19 +69,15 @@ function updateVisualNotification() {
= document.getElementById('toolbar_button_chat');
const leftIndent
= (UIUtil.getTextWidth(chatButtonElement)
- UIUtil.getTextWidth(unreadMsgElement))
/ 2;
- UIUtil.getTextWidth(unreadMsgElement)) / 2;
const topIndent
= (UIUtil.getTextHeight(chatButtonElement)
- UIUtil.getTextHeight(unreadMsgElement))
/ 2
- 5;
= ((UIUtil.getTextHeight(chatButtonElement)
- UIUtil.getTextHeight(unreadMsgElement)) / 2) - 5;
unreadMsgElement.setAttribute(
'style',
'top:' + topIndent + '; left:' + leftIndent + ';');
}
else {
`top:${topIndent}; left:${leftIndent};`);
} else {
unreadMsgSelector.html('');
}
@ -93,37 +92,49 @@ function updateVisualNotification() {
* @returns {string}
*/
function getCurrentTime(stamp) {
var now = (stamp? new Date(stamp): new Date());
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
const now = stamp ? new Date(stamp) : new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
if (hour.toString().length === 1) {
hour = '0'+hour;
hour = `0${hour}`;
}
if (minute.toString().length === 1) {
minute = '0'+minute;
minute = `0${minute}`;
}
if (second.toString().length === 1) {
second = '0'+second;
}
return hour+':'+minute+':'+second;
second = `0${second}`;
}
return `${hour}:${minute}:${second}`;
}
/**
*
*/
function toggleSmileys() {
var smileys = $('#smileysContainer');
if(!smileys.is(':visible')) {
smileys.show("slide", { direction: "down", duration: 300});
const smileys = $('#smileysContainer'); // eslint-disable-line no-shadow
if (smileys.is(':visible')) {
smileys.hide('slide', { direction: 'down',
duration: 300 });
} else {
smileys.hide("slide", { direction: "down", duration: 300});
smileys.show('slide', { direction: 'down',
duration: 300 });
}
$('#usermsg').focus();
}
/**
*
*/
function addClickFunction(smiley, number) {
smiley.onclick = function addSmileyToMessage() {
var usermsg = $('#usermsg');
var message = usermsg.val();
message += smileys['smiley' + number];
const usermsg = $('#usermsg');
let message = usermsg.val();
message += smileys[`smiley${number}`];
usermsg.val(message);
usermsg.get(0).setSelectionRange(message.length, message.length);
toggleSmileys();
@ -135,35 +146,38 @@ function addClickFunction(smiley, number) {
* Adds the smileys container to the chat
*/
function addSmileys() {
var smileysContainer = document.createElement('div');
const smileysContainer = document.createElement('div');
smileysContainer.id = 'smileysContainer';
for(var i = 1; i <= 21; i++) {
var smileyContainer = document.createElement('div');
smileyContainer.id = 'smiley' + i;
for (let i = 1; i <= 21; i++) {
const smileyContainer = document.createElement('div');
smileyContainer.id = `smiley${i}`;
smileyContainer.className = 'smileyContainer';
var smiley = document.createElement('img');
smiley.src = 'images/smileys/smiley' + i + '.svg';
const smiley = document.createElement('img');
smiley.src = `images/smileys/smiley${i}.svg`;
smiley.className = 'smiley';
addClickFunction(smiley, i);
smileyContainer.appendChild(smiley);
smileysContainer.appendChild(smileyContainer);
}
$("#chat_container").append(smileysContainer);
$('#chat_container').append(smileysContainer);
}
/**
* Resizes the chat conversation.
*/
function resizeChatConversation() {
var msgareaHeight = $('#usermsg').outerHeight();
var chatspace = $('#' + CHAT_CONTAINER_ID);
var width = chatspace.width();
var chat = $('#chatconversation');
var smileys = $('#smileysarea');
const msgareaHeight = $('#usermsg').outerHeight();
const chatspace = $(`#${CHAT_CONTAINER_ID}`);
const width = chatspace.width();
const chat = $('#chatconversation');
const smileys = $('#smileysarea'); // eslint-disable-line no-shadow
smileys.height(msgareaHeight);
$("#smileys").css('bottom', (msgareaHeight - 26) / 2);
$('#smileys').css('bottom', (msgareaHeight - 26) / 2);
$('#smileysContainer').css('bottom', msgareaHeight);
chat.width(width - 10);
chat.height(window.innerHeight - 15 - msgareaHeight);
@ -178,10 +192,11 @@ function resizeChatConversation() {
function deferredFocus(id) {
setTimeout(() => $(`#${id}`).focus(), 400);
}
/**
* Chat related user interface.
*/
var Chat = {
const Chat = {
/**
* Initializes chat related interface.
*/
@ -191,47 +206,54 @@ var Chat = {
Chat.setChatConversationMode(true);
}
$("#smileys").click(function() {
$('#smileys').click(() => {
Chat.toggleSmileys();
});
$('#nickinput').keydown(function(event) {
if (event.keyCode === 13) {
event.preventDefault();
let val = this.value;
this.value = '';
const val = this.value; // eslint-disable-line no-invalid-this
this.value = '';// eslint-disable-line no-invalid-this
eventEmitter.emit(UIEvents.NICKNAME_CHANGED, val);
deferredFocus('usermsg');
}
});
var usermsg = $('#usermsg');
const usermsg = $('#usermsg');
usermsg.keydown(function(event) {
if (event.keyCode === 13) {
event.preventDefault();
var value = this.value;
const value = this.value; // eslint-disable-line no-invalid-this
usermsg.val('').trigger('autosize.resize');
this.focus();
var command = new CommandsProcessor(value, eventEmitter);
this.focus();// eslint-disable-line no-invalid-this
const command = new CommandsProcessor(value, eventEmitter);
if (command.isCommand()) {
command.processCommand();
} else {
var message = UIUtil.escapeHtml(value);
const message = UIUtil.escapeHtml(value);
eventEmitter.emit(UIEvents.MESSAGE_CREATED, message);
}
}
});
var onTextAreaResize = function () {
const onTextAreaResize = function() {
resizeChatConversation();
Chat.scrollChatToBottom();
};
usermsg.autosize({ callback: onTextAreaResize });
eventEmitter.on(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
function(containerId, isVisible) {
if (containerId !== CHAT_CONTAINER_ID || !isVisible)
(containerId, isVisible) => {
if (containerId !== CHAT_CONTAINER_ID || !isVisible) {
return;
}
unreadMessages = 0;
updateVisualNotification();
@ -257,13 +279,14 @@ var Chat = {
/**
* Appends the given message to the chat conversation.
*/
// eslint-disable-next-line max-params
updateChatConversation(id, displayName, message, stamp) {
var divClassName = '';
let divClassName = '';
if (APP.conference.isLocalId(id)) {
divClassName = "localuser";
divClassName = 'localuser';
} else {
divClassName = "remoteuser";
divClassName = 'remoteuser';
if (!Chat.isVisible()) {
unreadMessages++;
@ -275,18 +298,21 @@ var Chat = {
// replace links and smileys
// Strophe already escapes special symbols on sending,
// so we escape here only tags to avoid double &amp;
var escMessage = message.replace(/</g, '&lt;').
replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
var escDisplayName = UIUtil.escapeHtml(displayName);
const escMessage = message.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/\n/g, '<br/>');
const escDisplayName = UIUtil.escapeHtml(displayName);
// eslint-disable-next-line no-param-reassign
message = processReplacements(escMessage);
var messageContainer =
'<div class="chatmessage">'+
'<img src="images/chatArrow.svg" class="chatArrow">' +
'<div class="username ' + divClassName +'">' + escDisplayName +
'</div>' + '<div class="timestamp">' + getCurrentTime(stamp) +
'</div>' + '<div class="usermessage">' + message + '</div>' +
'</div>';
const messageContainer
= `${'<div class="chatmessage">'
+ '<img src="images/chatArrow.svg" class="chatArrow">'
+ '<div class="username '}${divClassName}">${escDisplayName
}</div><div class="timestamp">${getCurrentTime(stamp)
}</div><div class="usermessage">${message}</div>`
+ '</div>';
$('#chatconversation').append(messageContainer);
$('#chatconversation').animate(
@ -299,14 +325,16 @@ var Chat = {
* @param originalText the original message.
*/
chatAddError(errorMessage, originalText) {
// eslint-disable-next-line no-param-reassign
errorMessage = UIUtil.escapeHtml(errorMessage);
// eslint-disable-next-line no-param-reassign
originalText = UIUtil.escapeHtml(originalText);
$('#chatconversation').append(
'<div class="errorMessage"><b>Error: </b>' + 'Your message' +
(originalText? (` "${originalText}"`) : "") +
' was not sent.' +
(errorMessage? (' Reason: ' + errorMessage) : '') + '</div>');
`${'<div class="errorMessage"><b>Error: </b>Your message'}${
originalText ? ` "${originalText}"` : ''
} was not sent.${
errorMessage ? ` Reason: ${errorMessage}` : ''}</div>`);
$('#chatconversation').animate(
{ scrollTop: $('#chatconversation')[0].scrollHeight }, 1000);
},
@ -317,6 +345,7 @@ var Chat = {
*/
setSubject(subject) {
if (subject) {
// eslint-disable-next-line no-param-reassign
subject = subject.trim();
}
@ -333,7 +362,7 @@ var Chat = {
* conversation mode or not.
*/
setChatConversationMode(isConversationMode) {
$('#' + CHAT_CONTAINER_ID)
$(`#${CHAT_CONTAINER_ID}`)
.toggleClass('is-conversation-mode', isConversationMode);
},
@ -341,7 +370,8 @@ var Chat = {
* Resizes the chat area.
*/
resizeChat(width, height) {
$('#' + CHAT_CONTAINER_ID).width(width).height(height);
$(`#${CHAT_CONTAINER_ID}`).width(width)
.height(height);
resizeChatConversation();
},
@ -353,6 +383,7 @@ var Chat = {
return UIUtil.isVisible(
document.getElementById(CHAT_CONTAINER_ID));
},
/**
* Shows and hides the window with the smileys
*/

24
modules/UI/side_pannels/chat/Commands.js
View File

@ -7,7 +7,7 @@ import UIEvents from '../../../../service/UI/UIEvents';
* @type {{String: function}}
*/
const commands = {
"topic" : processTopic
'topic': processTopic
};
/**
@ -17,12 +17,14 @@ const commands = {
*/
function getCommand(message) {
if (message) {
for(var command in commands) {
if(message.indexOf("/" + command) === 0)
for (const command in commands) {
if (message.indexOf(`/${command}`) === 0) {
return command;
}
}
return "";
}
return '';
}
/**
@ -30,7 +32,8 @@ function getCommand(message) {
* @param commandArguments the arguments of the topic command.
*/
function processTopic(commandArguments, emitter) {
var topic = UIUtil.escapeHtml(commandArguments);
const topic = UIUtil.escapeHtml(commandArguments);
emitter.emit(UIEvents.SUBJECT_CHANGED, topic);
}
@ -41,7 +44,7 @@ function processTopic(commandArguments, emitter) {
* @constructor
*/
function CommandsProcessor(message, emitter) {
var command = getCommand(message);
const command = getCommand(message);
this.emitter = emitter;
@ -54,7 +57,7 @@ function CommandsProcessor(message, emitter) {
};
var messageArgument = message.substr(command.length + 2);
const messageArgument = message.substr(command.length + 2);
/**
* Returns the arguments of the command.
@ -70,8 +73,10 @@ function CommandsProcessor(message, emitter) {
* @returns {boolean}
*/
CommandsProcessor.prototype.isCommand = function() {
if (this.getCommand())
if (this.getCommand()) {
return true;
}
return false;
};
@ -79,8 +84,9 @@ CommandsProcessor.prototype.isCommand = function() {
* Processes the command.
*/
CommandsProcessor.prototype.processCommand = function() {
if(!this.isCommand())
if (!this.isCommand()) {
return;
}
commands[this.getCommand()](this.getArgument(), this.emitter);
};

31
modules/UI/side_pannels/chat/Replacement.js
View File

@ -1,17 +1,11 @@
/* jshint -W101 */
import { regexes } from './smileys';
/**
* Processes links and smileys in "body"
*/
export function processReplacements(body) {
//make links clickable
body = linkify(body);
//add smileys
body = smilify(body);
return body;
// make links clickable + add smileys
return smilify(linkify(body));
}
/**
@ -19,20 +13,23 @@ export function processReplacements(body) {
* with their <a href=""></a>
*/
export function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;
let replacedText;
/* eslint-disable no-useless-escape */
/* eslint-disable no-useless-escape, max-len */
// URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
const replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
// URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
const replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="https://$2" target="_blank" rel="noopener noreferrer">$2</a>');
// Change email addresses to mailto: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
const replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
/* eslint-enable no-useless-escape */
@ -48,10 +45,12 @@ function smilify(body) {
return body;
}
for(var smiley in regexes) {
let formattedBody = body;
for (const smiley in regexes) {
if (regexes.hasOwnProperty(smiley)) {
body = body.replace(regexes[smiley],
'<img class="smiley" src="images/smileys/' + smiley + '.svg">');
formattedBody = formattedBody.replace(regexes[smiley],
`<img class="smiley" src="images/smileys/${smiley}.svg">`);
}
}

42
modules/UI/side_pannels/chat/smileys.js
View File

@ -1,25 +1,25 @@
export const smileys = {
smiley1: ":)",
smiley2: ":(",
smiley3: ":D",
smiley4: "(y)",
smiley5: " :P",
smiley6: "(wave)",
smiley7: "(blush)",
smiley8: "(chuckle)",
smiley9: "(shocked)",
smiley10: ":*",
smiley11: "(n)",
smiley12: "(search)",
smiley13: " <3",
smiley14: "(oops)",
smiley15: "(angry)",
smiley16: "(angel)",
smiley17: "(sick)",
smiley18: ";(",
smiley19: "(bomb)",
smiley20: "(clap)",
smiley21: " ;)"
smiley1: ':)',
smiley2: ':(',
smiley3: ':D',
smiley4: '(y)',
smiley5: ' :P',
smiley6: '(wave)',
smiley7: '(blush)',
smiley8: '(chuckle)',
smiley9: '(shocked)',
smiley10: ':*',
smiley11: '(n)',
smiley12: '(search)',
smiley13: ' <3',
smiley14: '(oops)',
smiley15: '(angry)',
smiley16: '(angel)',
smiley17: '(sick)',
smiley18: ';(',
smiley19: '(bomb)',
smiley20: '(clap)',
smiley21: ' ;)'
};
export const regexes = {

6
modules/UI/side_pannels/contactlist/ContactListView.js
View File

@ -19,7 +19,7 @@ import UIUtil from '../../util/UIUtil';
* the term "contact" is not used elsewhere. Normally people in the conference
* are internally refered to as "participants" or externally as "members".
*/
var ContactListView = {
const ContactListView = {
/**
* Creates and appends the contact list to the side panel.
*
@ -33,7 +33,6 @@ var ContactListView = {
$('#sideToolbarContainer').append(contactListPanelContainer);
/* jshint ignore:start */
ReactDOM.render(
<Provider store = { APP.store }>
<I18nextProvider i18n = { i18next }>
@ -42,7 +41,6 @@ var ContactListView = {
</Provider>,
contactListPanelContainer
);
/* jshint ignore:end */
},
/**
@ -51,7 +49,7 @@ var ContactListView = {
* @return {boolean) true if the contact list is currently visible.
*/
isVisible() {
return UIUtil.isVisible(document.getElementById("contactlist"));
return UIUtil.isVisible(document.getElementById('contactlist'));
}
};

100
modules/UI/side_pannels/profile/Profile.js
View File

@ -1,43 +1,47 @@
/* global $, APP */
import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents";
import UIUtil from '../../util/UIUtil';
import UIEvents from '../../../../service/UI/UIEvents';
import Settings from '../../../settings/Settings';
import { sendEvent } from '../../../../react/features/analytics';
const sidePanelsContainerId = 'sideToolbarContainer';
const htmlStr = `
<div id="profile_container" class="sideToolbarContainer__inner">
<div class="title" data-i18n="profile.title"></div>
<div class="sideToolbarBlock first">
<label class="first" data-i18n="profile.setDisplayNameLabel">
<div id='profile_container' class='sideToolbarContainer__inner'>
<div class='title' data-i18n='profile.title'></div>
<div class='sideToolbarBlock first'>
<label class='first' data-i18n='profile.setDisplayNameLabel'>
</label>
<input class="input-control" type="text" id="setDisplayName"
data-i18n="[placeholder]settings.name">
<input class='input-control' type='text' id='setDisplayName'
data-i18n='[placeholder]settings.name'>
</div>
<div class="sideToolbarBlock">
<label data-i18n="profile.setEmailLabel"></label>
<input id="setEmail" type="text" class="input-control"
data-i18n="[placeholder]profile.setEmailInput">
<div class='sideToolbarBlock'>
<label data-i18n='profile.setEmailLabel'></label>
<input id='setEmail' type='text' class='input-control'
data-i18n='[placeholder]profile.setEmailInput'>
</div>
<div id="profile_auth_container"
class="sideToolbarBlock auth_container">
<p data-i18n="toolbar.authenticate"></p>
<div id='profile_auth_container'
class='sideToolbarBlock auth_container'>
<p data-i18n='toolbar.authenticate'></p>
<ul>
<li id="profile_auth_identity"></li>
<li id="profile_button_login">
<a class="authButton" data-i18n="toolbar.login"></a>
<li id='profile_auth_identity'></li>
<li id='profile_button_login'>
<a class='authButton' data-i18n='toolbar.login'></a>
</li>
<li id="profile_button_logout">
<a class="authButton" data-i18n="toolbar.logout"></a>
<li id='profile_button_logout'>
<a class='authButton' data-i18n='toolbar.logout'></a>
</li>
</ul>
</div>
</div>`;
/**
*
*/
function initHTML() {
$(`#${sidePanelsContainerId}`)
.append(htmlStr);
// make sure we translate the panel, as adding it can be after i18n
// library had initialized and translated already present html
APP.translation.translateElement($(`#${sidePanelsContainerId}`));
@ -46,35 +50,46 @@ function initHTML() {
export default {
init(emitter) {
initHTML();
// DISPLAY NAME
/**
* Updates display name.
*
* @returns {void}
*/
function updateDisplayName() {
emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
}
$('#setDisplayName')
.val(Settings.getDisplayName())
.keyup(function (event) {
.keyup(event => {
if (event.keyCode === 13) { // enter
updateDisplayName();
}
})
.focusout(updateDisplayName);
// EMAIL
/**
* Updates the email.
*
* @returns {void}
*/
function updateEmail() {
emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
}
$('#setEmail')
.val(Settings.getEmail())
.keyup(function (event) {
.keyup(event => {
if (event.keyCode === 13) { // enter
updateEmail();
}
}).focusout(updateEmail);
})
.focusout(updateEmail);
// LOGIN
/**
*
*/
function loginClicked() {
sendEvent('authenticate.login.clicked');
emitter.emit(UIEvents.AUTH_CLICKED);
@ -82,17 +97,21 @@ export default {
$('#profile_button_login').click(loginClicked);
// LOGOUT
/**
*
*/
function logoutClicked() {
let titleKey = "dialog.logoutTitle";
let msgKey = "dialog.logoutQuestion";
const titleKey = 'dialog.logoutTitle';
const msgKey = 'dialog.logoutQuestion';
sendEvent('authenticate.logout.clicked');
// Ask for confirmation
APP.UI.messageHandler.openTwoButtonDialog({
titleKey: titleKey,
msgKey: msgKey,
leftButtonKey: "dialog.Yes",
submitFunction: function (evt, yes) {
titleKey,
msgKey,
leftButtonKey: 'dialog.Yes',
submitFunction(evt, yes) {
if (yes) {
emitter.emit(UIEvents.LOGOUT);
}
@ -108,7 +127,7 @@ export default {
* @returns {boolean}
*/
isVisible() {
return UIUtil.isVisible(document.getElementById("profile_container"));
return UIUtil.isVisible(document.getElementById('profile_container'));
},
/**
@ -140,7 +159,8 @@ export default {
* @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
*/
showAuthenticationButtons(show) {
let id = 'profile_auth_container';
const id = 'profile_auth_container';
UIUtil.setVisible(id, show);
},
@ -149,7 +169,7 @@ export default {
* @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
*/
showLoginButton(show) {
let id = 'profile_button_login';
const id = 'profile_button_login';
UIUtil.setVisible(id, show);
},
@ -159,7 +179,7 @@ export default {
* @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
*/
showLogoutButton(show) {
let id = 'profile_button_logout';
const id = 'profile_button_logout';
UIUtil.setVisible(id, show);
},
@ -169,9 +189,9 @@ export default {
* @param {string} authIdentity identity name to be displayed.
*/
setAuthenticatedIdentity(authIdentity) {
let id = 'profile_auth_identity';
const id = 'profile_auth_identity';
UIUtil.setVisible(id, !!authIdentity);
UIUtil.setVisible(id, Boolean(authIdentity));
$(`#${id}`).text(authIdentity ? authIdentity : '');
}

70
modules/UI/side_pannels/settings/SettingsMenu.js
View File

@ -1,10 +1,10 @@
/* global $, APP, AJS, interfaceConfig */
import { LANGUAGES } from "../../../../react/features/base/i18n";
import { LANGUAGES } from '../../../../react/features/base/i18n';
import { openDeviceSelectionDialog }
from '../../../../react/features/device-selection';
import UIUtil from "../../util/UIUtil";
import UIEvents from "../../../../service/UI/UIEvents";
import UIUtil from '../../util/UIUtil';
import UIEvents from '../../../../service/UI/UIEvents';
const sidePanelsContainerId = 'sideToolbarContainer';
const deviceSelectionButtonClasses
@ -54,9 +54,13 @@ const htmlStr = `
</form>
</div>`;
/**
*
*/
function initHTML() {
$(`#${sidePanelsContainerId}`)
.append(htmlStr);
// make sure we translate the panel, as adding it can be after i18n
// library had initialized and translated already present html
APP.translation.translateElement($(`#${sidePanelsContainerId}`));
@ -70,8 +74,8 @@ function initHTML() {
* @returns {string}
*/
function generateLanguagesOptions(items, currentLang) {
return items.map(function (lang) {
let attrs = {
return items.map(lang => {
const attrs = {
value: lang,
'data-i18n': `languages:${lang}`
};
@ -80,7 +84,9 @@ function generateLanguagesOptions(items, currentLang) {
attrs.selected = 'selected';
}
let attrsStr = UIUtil.attrsToString(attrs);
const attrsStr = UIUtil.attrsToString(attrs);
return `<option ${attrsStr}></option>`;
}).join('');
}
@ -103,12 +109,13 @@ function initSelect2($el, onSelectedCb) {
export default {
init(emitter) {
initHTML();
// LANGUAGES BOX
if (UIUtil.isSettingEnabled('language')) {
const wrapperId = 'languagesSelectWrapper';
const selectId = 'languagesSelect';
const selectEl = AJS.$(`#${selectId}`);
let selectInput;
let selectInput; // eslint-disable-line prefer-const
selectEl.html(generateLanguagesOptions(
LANGUAGES,
@ -121,11 +128,13 @@ export default {
APP.translation.translateElement(selectInput);
emitter.emit(UIEvents.LANG_CHANGED, val);
});
// find new selectInput element
selectInput = $(`#s2id_${selectId} .select2-chosen`);
// first select fix for languages options
selectInput[0].dataset.i18n =
`languages:${APP.translation.getCurrentLanguage()}`;
selectInput[0].dataset.i18n
= `languages:${APP.translation.getCurrentLanguage()}`;
// translate selectInput, which is the currently selected language
// otherwise there will be no selected option
@ -133,10 +142,13 @@ export default {
APP.translation.translateElement(selectEl);
APP.translation.addLanguageChangedListener(
lng => selectInput[0].dataset.i18n = `languages:${lng}`);
lng => {
selectInput[0].dataset.i18n = `languages:${lng}`;
});
UIUtil.setVisible(wrapperId, true);
}
// DEVICES LIST
if (UIUtil.isSettingEnabled('devices')) {
const wrapperId = 'deviceOptionsWrapper';
@ -145,19 +157,21 @@ export default {
APP.store.dispatch(openDeviceSelectionDialog()));
// Only show the subtitle if this isn't the only setting section.
if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.setVisible("deviceOptionsTitle", true);
if (interfaceConfig.SETTINGS_SECTIONS.length > 1) {
UIUtil.setVisible('deviceOptionsTitle', true);
}
UIUtil.setVisible(wrapperId, true);
}
// MODERATOR
if (UIUtil.isSettingEnabled('moderator')) {
const wrapperId = 'moderatorOptionsWrapper';
// START MUTED
$("#startMutedOptions").change(function () {
let startAudioMuted = $("#startAudioMuted").is(":checked");
let startVideoMuted = $("#startVideoMuted").is(":checked");
$('#startMutedOptions').change(() => {
const startAudioMuted = $('#startAudioMuted').is(':checked');
const startVideoMuted = $('#startVideoMuted').is(':checked');
emitter.emit(
UIEvents.START_MUTED_CHANGED,
@ -168,8 +182,10 @@ export default {
// FOLLOW ME
const followMeToggle = document.getElementById('followMeCheckBox');
followMeToggle.addEventListener('change', () => {
const isFollowMeEnabled = followMeToggle.checked;
emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
});
@ -184,23 +200,25 @@ export default {
showStartMutedOptions(show) {
if (show && UIUtil.isSettingEnabled('moderator')) {
// Only show the subtitle if this isn't the only setting section.
if (!$("#moderatorOptionsTitle").is(":visible")
&& interfaceConfig.SETTINGS_SECTIONS.length > 1)
UIUtil.setVisible("moderatorOptionsTitle", true);
if (!$('#moderatorOptionsTitle').is(':visible')
&& interfaceConfig.SETTINGS_SECTIONS.length > 1) {
UIUtil.setVisible('moderatorOptionsTitle', true);
}
UIUtil.setVisible("startMutedOptions", true);
UIUtil.setVisible('startMutedOptions', true);
} else {
// Only show the subtitle if this isn't the only setting section.
if ($("#moderatorOptionsTitle").is(":visible"))
UIUtil.setVisible("moderatorOptionsTitle", false);
if ($('#moderatorOptionsTitle').is(':visible')) {
UIUtil.setVisible('moderatorOptionsTitle', false);
}
UIUtil.setVisible("startMutedOptions", false);
UIUtil.setVisible('startMutedOptions', false);
}
},
updateStartMutedBox(startAudioMuted, startVideoMuted) {
$("#startAudioMuted").attr("checked", startAudioMuted);
$("#startVideoMuted").attr("checked", startVideoMuted);
$('#startAudioMuted').attr('checked', startAudioMuted);
$('#startVideoMuted').attr('checked', startVideoMuted);
},
/**
@ -210,7 +228,7 @@ export default {
*/
showFollowMeOptions(show) {
UIUtil.setVisible(
"followMeOptions",
'followMeOptions',
show && UIUtil.isSettingEnabled('moderator'));
},
@ -219,6 +237,6 @@ export default {
* @returns {boolean}
*/
isVisible() {
return UIUtil.isVisible(document.getElementById("settings_container"));
return UIUtil.isVisible(document.getElementById('settings_container'));
}
};

177
modules/UI/util/MessageHandler.js
View File

@ -1,5 +1,5 @@
/* global $, APP */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import jitsiLocalStorage from '../../util/JitsiLocalStorage';
@ -32,11 +32,13 @@ let twoButtonDialog = null;
*/
function generateDontShowCheckbox(options) {
if (!isDontShowAgainEnabled(options)) {
return "";
return '';
}
let checked
= (options.checked === true) ? "checked" : "";
const checked
= options.checked === true ? 'checked' : '';
return `<br />
<label>
<input type='checkbox' ${checked} id='${options.id}' />
@ -56,10 +58,11 @@ function generateDontShowCheckbox(options) {
function dontShowTheDialog(options) {
if (isDontShowAgainEnabled(options)) {
if (jitsiLocalStorage.getItem(options.localStorageKey || options.id)
=== "true") {
=== 'true') {
return true;
}
}
return false;
}
@ -79,21 +82,24 @@ function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
if (isDontShowAgainEnabled(options)) {
return (...args) => {
logger.debug(args, options.buttonValues);
// args[1] is the value associated with the pressed button
if (!options.buttonValues || options.buttonValues.length === 0
|| options.buttonValues.indexOf(args[1]) !== -1) {
let checkbox = $(`#${options.id}`);
const checkbox = $(`#${options.id}`);
if (checkbox.length) {
jitsiLocalStorage.setItem(
options.localStorageKey || options.id,
checkbox.prop("checked"));
checkbox.prop('checked'));
}
}
submitFunction(...args);
};
} else {
return submitFunction;
}
return submitFunction;
}
/**
@ -102,12 +108,12 @@ function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
* @returns {boolean} true if enabled and false if not.
*/
function isDontShowAgainEnabled(options) {
return typeof options === "object";
return typeof options === 'object';
}
var messageHandler = {
OK: "dialog.OK",
CANCEL: "dialog.Cancel",
const messageHandler = {
OK: 'dialog.OK',
CANCEL: 'dialog.Cancel',
/**
* Shows a message to the user.
@ -120,25 +126,32 @@ var messageHandler = {
* the prompt is closed (optional)
* @return the prompt that was created, or null
*/
// eslint-disable-next-line max-params
openMessageDialog(titleKey, messageKey, i18nOptions, closeFunction) {
if (!popupEnabled)
if (!popupEnabled) {
return null;
}
let dialog = $.prompt(
const dialog = $.prompt(
APP.translation.generateTranslationHTML(messageKey, i18nOptions),
{
title: this._getFormattedTitleString(titleKey),
persistent: false,
promptspeed: 0,
classes: this._getDialogClasses(),
// eslint-disable-next-line max-params
close(e, v, m, f) {
if(closeFunction)
if (closeFunction) {
closeFunction(e, v, m, f);
}
}
});
APP.translation.translateElement(dialog, i18nOptions);
return $.prompt.getApi();
},
/**
* Shows a message to the user with two buttons: first is given as a
* parameter and the second is Cancel.
@ -169,8 +182,8 @@ var messageHandler = {
* storage. if not provided dontShowAgain.id will be used.
* @return the prompt that was created, or null
*/
openTwoButtonDialog: function(options) {
let {
openTwoButtonDialog(options) {
const {
titleKey,
msgKey,
msgString,
@ -182,32 +195,40 @@ var messageHandler = {
size,
defaultButton,
wrapperClass,
classes,
dontShowAgain
} = options;
if (!popupEnabled || twoButtonDialog)
let { classes } = options;
if (!popupEnabled || twoButtonDialog) {
return null;
}
if (dontShowTheDialog(dontShowAgain)) {
// Maybe we should pass some parameters here? I'm not sure
// and currently we don't need any parameters.
submitFunction();
return null;
}
var buttons = [];
const buttons = [];
var leftButton = leftButtonKey ?
APP.translation.generateTranslationHTML(leftButtonKey) :
APP.translation.generateTranslationHTML('dialog.Submit');
buttons.push({ title: leftButton, value: true});
const leftButton = leftButtonKey
? APP.translation.generateTranslationHTML(leftButtonKey)
: APP.translation.generateTranslationHTML('dialog.Submit');
var cancelButton
= APP.translation.generateTranslationHTML("dialog.Cancel");
buttons.push({title: cancelButton, value: false});
buttons.push({ title: leftButton,
value: true });
const cancelButton
= APP.translation.generateTranslationHTML('dialog.Cancel');
buttons.push({ title: cancelButton,
value: false });
let message = msgString;
var message = msgString;
if (msgKey) {
message = APP.translation.generateTranslationHTML(msgKey);
}
@ -220,20 +241,20 @@ var messageHandler = {
twoButtonDialog = $.prompt(message, {
title: this._getFormattedTitleString(titleKey),
persistent: false,
buttons: buttons,
defaultButton: defaultButton,
focus: focus,
buttons,
defaultButton,
focus,
loaded: loadedFunction,
promptspeed: 0,
classes,
submit: dontShowAgainSubmitFunctionWrapper(dontShowAgain,
function (e, v, m, f) {
(e, v, m, f) => { // eslint-disable-line max-params
twoButtonDialog = null;
if (v && submitFunction) {
submitFunction(e, v, m, f);
}
}),
close: function (e, v, m, f) {
close(e, v, m, f) { // eslint-disable-line max-params
twoButtonDialog = null;
if (closeFunction) {
closeFunction(e, v, m, f);
@ -241,6 +262,7 @@ var messageHandler = {
}
});
APP.translation.translateElement(twoButtonDialog);
return $.prompt.getApi();
},
@ -270,7 +292,7 @@ var messageHandler = {
* @param {string} dontShowAgain.localStorageKey the key for the local
* storage. if not provided dontShowAgain.id will be used.
*/
openDialog(
openDialog(// eslint-disable-line max-params
titleKey,
msgString,
persistent,
@ -279,29 +301,33 @@ var messageHandler = {
loadedFunction,
closeFunction,
dontShowAgain) {
if (!popupEnabled)
if (!popupEnabled) {
return;
}
if (dontShowTheDialog(dontShowAgain)) {
// Maybe we should pass some parameters here? I'm not sure
// and currently we don't need any parameters.
submitFunction();
return;
}
let args = {
const args = {
title: this._getFormattedTitleString(titleKey),
persistent: persistent,
buttons: buttons,
persistent,
buttons,
defaultButton: 1,
promptspeed: 0,
loaded: function() {
loaded() {
if (loadedFunction) {
// eslint-disable-next-line prefer-rest-params
loadedFunction.apply(this, arguments);
}
// Hide the close button
if (persistent) {
$(".jqiclose", this).hide();
$('.jqiclose', this).hide();
}
},
submit: dontShowAgainSubmitFunctionWrapper(
@ -314,9 +340,11 @@ var messageHandler = {
args.closeText = '';
}
let dialog = $.prompt(
const dialog = $.prompt(
msgString + generateDontShowCheckbox(dontShowAgain), args);
APP.translation.translateElement(dialog);
return $.prompt.getApi();
},
@ -326,10 +354,13 @@ var messageHandler = {
* @return the title string formatted as a div.
*/
_getFormattedTitleString(titleKey) {
let $titleString = $('<h2>');
const $titleString = $('<h2>');
$titleString.addClass('aui-dialog2-header-main');
$titleString.attr('data-i18n', titleKey);
return $('<div>').append($titleString).html();
return $('<div>').append($titleString)
.html();
},
/**
@ -359,23 +390,28 @@ var messageHandler = {
* @param options impromptu options
* @param translateOptions options passed to translation
*/
openDialogWithStates: function (statesObject, options, translateOptions) {
if (!popupEnabled)
openDialogWithStates(statesObject, options, translateOptions) {
if (!popupEnabled) {
return;
let { classes, size } = options;
let defaultClasses = this._getDialogClasses(size);
}
const { classes, size } = options;
const defaultClasses = this._getDialogClasses(size);
options.classes = Object.assign({}, defaultClasses, classes);
options.promptspeed = options.promptspeed || 0;
for (let state in statesObject) {
let currentState = statesObject[state];
for (const state in statesObject) { // eslint-disable-line guard-for-in
const currentState = statesObject[state];
if (currentState.titleKey) {
currentState.title
= this._getFormattedTitleString(currentState.titleKey);
}
}
let dialog = $.prompt(statesObject, options);
const dialog = $.prompt(statesObject, options);
APP.translation.translateElement(dialog, translateOptions);
return $.prompt.getApi();
},
@ -392,17 +428,20 @@ var messageHandler = {
* @returns {object} popup window object if opened successfully or undefined
* in case we failed to open it(popup blocked)
*/
openCenteredPopup: function (url, w, h, onPopupClosed) {
if (!popupEnabled)
// eslint-disable-next-line max-params
openCenteredPopup(url, w, h, onPopupClosed) {
if (!popupEnabled) {
return;
}
var l = window.screenX + (window.innerWidth / 2) - (w / 2);
var t = window.screenY + (window.innerHeight / 2) - (h / 2);
var popup = window.open(
const l = window.screenX + (window.innerWidth / 2) - (w / 2);
const t = window.screenY + (window.innerHeight / 2) - (h / 2);
const popup = window.open(
url, '_blank',
'top=' + t + ', left=' + l + ', width=' + w + ', height=' + h + '');
String(`top=${t}, left=${l}, width=${w}, height=${h}`));
if (popup && onPopupClosed) {
var pollTimer = window.setInterval(function () {
const pollTimer = window.setInterval(() => {
if (popup.closed !== false) {
window.clearInterval(pollTimer);
onPopupClosed();
@ -420,9 +459,10 @@ var messageHandler = {
* @param msgKey the text of the message
* @param error the error that is being reported
*/
openReportDialog: function(titleKey, msgKey, error) {
openReportDialog(titleKey, msgKey, error) {
this.openMessageDialog(titleKey, msgKey);
logger.log(error);
// FIXME send the error to the server
},
@ -431,14 +471,7 @@ var messageHandler = {
* @param titleKey the title of the message.
* @param msgKey the text of the message.
*/
showError: function(titleKey, msgKey) {
if (!titleKey) {
titleKey = "dialog.oops";
}
if (!msgKey) {
msgKey = "dialog.defaultError";
}
showError(titleKey = 'dialog.oops', msgKey = 'dialog.defaultError') {
messageHandler.openMessageDialog(titleKey, msgKey);
},
@ -454,7 +487,7 @@ var messageHandler = {
* @param messageArguments object with the arguments for the message.
* @param optional configurations for the notification (e.g. timeout)
*/
participantNotification(
participantNotification( // eslint-disable-line max-params
displayName,
displayNameKey,
cls,
@ -484,12 +517,12 @@ var messageHandler = {
* translation.
* @returns {void}
*/
notify: function(titleKey, messageKey, messageArguments) {
notify(titleKey, messageKey, messageArguments) {
this.participantNotification(
null, titleKey, null, messageKey, messageArguments);
},
enablePopups: function (enable) {
enablePopups(enable) {
popupEnabled = enable;
},
@ -498,8 +531,8 @@ var messageHandler = {
* false otherwise
* @returns {boolean} isOpened
*/
isDialogOpened: function () {
return !!$.prompt.getCurrentStateName();
isDialogOpened() {
return Boolean($.prompt.getCurrentStateName());
}
};

88
modules/UI/util/UIUtil.js
View File

@ -31,7 +31,7 @@ const IndicatorFontSizes = {
/**
* Created by hristo on 12/22/14.
*/
var UIUtil = {
const UIUtil = {
/**
* Returns the available video width.
@ -43,17 +43,18 @@ var UIUtil = {
/**
* Changes the style class of the element given by id.
*/
buttonClick: function(id, classname) {
buttonClick(id, classname) {
// add the class to the clicked element
$("#" + id).toggleClass(classname);
$(`#${id}`).toggleClass(classname);
},
/**
* Returns the text width for the given element.
*
* @param el the element
*/
getTextWidth(el) {
return (el.clientWidth + 1);
return el.clientWidth + 1;
},
/**
@ -62,7 +63,7 @@ var UIUtil = {
* @param el the element
*/
getTextHeight(el) {
return (el.clientHeight + 1);
return el.clientHeight + 1;
},
/**
@ -78,7 +79,8 @@ var UIUtil = {
* Escapes the given text.
*/
escapeHtml(unsafeText) {
return $('<div/>').text(unsafeText).html();
return $('<div/>').text(unsafeText)
.html();
},
/**
@ -88,22 +90,27 @@ var UIUtil = {
* @returns {string} unescaped html string.
*/
unescapeHtml(safe) {
return $('<div />').html(safe).text();
return $('<div />').html(safe)
.text();
},
imageToGrayScale(canvas) {
var context = canvas.getContext('2d');
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imgData.data;
const context = canvas.getContext('2d');
const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imgData.data;
for (let i = 0, n = pixels.length; i < n; i += 4) {
const grayscale
= (pixels[i] * 0.3)
+ (pixels[i + 1] * 0.59)
+ (pixels[i + 2] * 0.11);
for (var i = 0, n = pixels.length; i < n; i += 4) {
var grayscale
= pixels[i] * 0.3 + pixels[i+1] * 0.59 + pixels[i+2] * 0.11;
pixels[i] = grayscale; // red
pixels[i + 1] = grayscale; // green
pixels[i + 2] = grayscale; // blue
// pixels[i+3] is alpha
}
// redraw the image in black & white
context.putImageData(imgData, 0, 0);
},
@ -114,7 +121,8 @@ var UIUtil = {
* @param newChild the new element that will be inserted into the container
*/
prependChild(container, newChild) {
var firstChild = container.childNodes[0];
const firstChild = container.childNodes[0];
if (firstChild) {
container.insertBefore(newChild, firstChild);
} else {
@ -152,6 +160,7 @@ var UIUtil = {
*/
setVisible(id, visible) {
let element;
if (id instanceof HTMLElement) {
element = id;
} else {
@ -162,20 +171,20 @@ var UIUtil = {
return;
}
if (!visible)
if (!visible) {
element.classList.add('hide');
else if (element.classList.contains('hide')) {
} else if (element.classList.contains('hide')) {
element.classList.remove('hide');
}
let type = this._getElementDefaultDisplay(element.tagName);
let className = SHOW_CLASSES[type];
const type = this._getElementDefaultDisplay(element.tagName);
const className = SHOW_CLASSES[type];
if (visible) {
element.classList.add(className);
}
else if (element.classList.contains(className))
} else if (element.classList.contains(className)) {
element.classList.remove(className);
}
},
/**
@ -185,10 +194,11 @@ var UIUtil = {
* @private
*/
_getElementDefaultDisplay(tag) {
let tempElement = document.createElement(tag);
const tempElement = document.createElement(tag);
document.body.appendChild(tempElement);
let style = window.getComputedStyle(tempElement).display;
const style = window.getComputedStyle(tempElement).display;
document.body.removeChild(tempElement);
return style;
@ -203,7 +213,7 @@ var UIUtil = {
*/
setVisibleBySelector(jquerySelector, isVisible) {
if (jquerySelector && jquerySelector.length > 0) {
jquerySelector.css("visibility", isVisible ? "visible" : "hidden");
jquerySelector.css('visibility', isVisible ? 'visible' : 'hidden');
}
},
@ -264,7 +274,8 @@ var UIUtil = {
*/
attrsToString(attrs) {
return (
Object.keys(attrs).map(key => ` ${key}="${attrs[key]}"`).join(' '));
Object.keys(attrs).map(key => ` ${key}="${attrs[key]}"`)
.join(' '));
},
/**
@ -275,7 +286,7 @@ var UIUtil = {
* @param {el} The DOM element we'd like to check for visibility
*/
isVisible(el) {
return (el.offsetParent !== null);
return el.offsetParent !== null;
},
/**
@ -289,25 +300,32 @@ var UIUtil = {
*/
animateShowElement(selector, show, hideDelay) {
if (show) {
if (!selector.is(":visible"))
selector.css("display", "inline-block");
if (!selector.is(':visible')) {
selector.css('display', 'inline-block');
}
selector.fadeIn(300,
() => {selector.css({opacity: 1});}
() => {
selector.css({ opacity: 1 });
}
);
if (hideDelay && hideDelay > 0)
if (hideDelay && hideDelay > 0) {
setTimeout(
() => {
selector.fadeOut(
300,
() => { selector.css({opacity: 0}); });
() => {
selector.css({ opacity: 0 });
});
},
hideDelay);
}
else {
} else {
selector.fadeOut(300,
() => {selector.css({opacity: 0});}
() => {
selector.css({ opacity: 0 });
}
);
}
},
@ -318,7 +336,7 @@ var UIUtil = {
* @param cssValue the string value we obtain when querying css properties
*/
parseCssInt(cssValue) {
return parseInt(cssValue) || 0;
return parseInt(cssValue, 10) || 0;
},
/**
@ -332,8 +350,8 @@ var UIUtil = {
aLinkElement.attr('href', link);
} else {
aLinkElement.css({
"pointer-events": "none",
"cursor": "default"
'pointer-events': 'none',
'cursor': 'default'
});
}
},

128
modules/UI/videolayout/Filmstrip.js
View File

@ -2,8 +2,8 @@
import { setFilmstripVisibility } from '../../../react/features/filmstrip';
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
import UIEvents from '../../../service/UI/UIEvents';
import UIUtil from '../util/UIUtil';
import { sendEvent } from '../../../react/features/analytics';
@ -33,13 +33,14 @@ const Filmstrip = {
* Initializes the filmstrip toolbar.
*/
_initFilmstripToolbar() {
let toolbarContainerHTML = this._generateToolbarHTML();
let className = this.filmstripContainerClassName;
let container = document.querySelector(`.${className}`);
const toolbarContainerHTML = this._generateToolbarHTML();
const className = this.filmstripContainerClassName;
const container = document.querySelector(`.${className}`);
UIUtil.prependChild(container, toolbarContainerHTML);
let iconSelector = '#toggleFilmstripButton i';
const iconSelector = '#toggleFilmstripButton i';
this.toggleFilmstripIcon = document.querySelector(iconSelector);
},
@ -49,8 +50,9 @@ const Filmstrip = {
* @private
*/
_generateToolbarHTML() {
let container = document.createElement('div');
let isVisible = this.isFilmstripVisible();
const container = document.createElement('div');
const isVisible = this.isFilmstripVisible();
container.className = 'filmstrip__toolbar';
container.innerHTML = `
<button id="toggleFilmstripButton">
@ -81,14 +83,15 @@ const Filmstrip = {
* @private
*/
_registerToggleFilmstripShortcut() {
let shortcut = 'F';
let shortcutAttr = 'filmstripPopover';
let description = 'keyboardShortcuts.toggleFilmstrip';
const shortcut = 'F';
const shortcutAttr = 'filmstripPopover';
const description = 'keyboardShortcuts.toggleFilmstrip';
// Important:
// 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_FILMSTRIP);
const handler = () => this.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
APP.keyboardshortcut.registerShortcut(
shortcut,
@ -102,7 +105,8 @@ const Filmstrip = {
* Changes classes of icon for showing down state
*/
showMenuDownIcon() {
let icon = this.toggleFilmstripIcon;
const icon = this.toggleFilmstripIcon;
if (icon) {
icon.classList.add(this.iconMenuDownClassName);
icon.classList.remove(this.iconMenuUpClassName);
@ -113,7 +117,8 @@ const Filmstrip = {
* Changes classes of icon for showing up state
*/
showMenuUpIcon() {
let icon = this.toggleFilmstripIcon;
const icon = this.toggleFilmstripIcon;
if (icon) {
icon.classList.add(this.iconMenuUpClassName);
icon.classList.remove(this.iconMenuDownClassName);
@ -137,7 +142,9 @@ const Filmstrip = {
*/
toggleFilmstrip(visible, sendAnalytics = true) {
const isVisibleDefined = typeof visible === 'boolean';
if (!isVisibleDefined) {
// eslint-disable-next-line no-param-reassign
visible = this.isFilmstripVisible();
} else if (this.isFilmstripVisible() === visible) {
return;
@ -145,7 +152,7 @@ const Filmstrip = {
if (sendAnalytics) {
sendEvent('toolbar.filmstrip.toggled');
}
this.filmstrip.toggleClass("hidden");
this.filmstrip.toggleClass('hidden');
if (visible) {
this.showMenuUpIcon();
@ -190,9 +197,10 @@ const Filmstrip = {
// display should be.
if (this.isFilmstripVisible() && !interfaceConfig.VERTICAL_FILMSTRIP) {
return $(`.${this.filmstripContainerClassName}`).outerHeight();
} else {
return 0;
}
return 0;
},
/**
@ -200,9 +208,9 @@ const Filmstrip = {
* @returns {*|{localVideo, remoteVideo}}
*/
calculateThumbnailSize() {
let availableSizes = this.calculateAvailableSize();
let width = availableSizes.availableWidth;
let height = availableSizes.availableHeight;
const availableSizes = this.calculateAvailableSize();
const width = availableSizes.availableWidth;
const height = availableSizes.availableHeight;
return this.calculateThumbnailSizeFromAvailable(width, height);
},
@ -215,17 +223,17 @@ const Filmstrip = {
*/
calculateAvailableSize() {
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
let thumbs = this.getThumbs(true);
let numvids = thumbs.remoteThumbs.length;
const thumbs = this.getThumbs(true);
const numvids = thumbs.remoteThumbs.length;
let localVideoContainer = $("#localVideoContainer");
const localVideoContainer = $('#localVideoContainer');
/**
* If the videoAreaAvailableWidth is set we use this one to calculate
* 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
const videoAreaAvailableWidth
= UIUtil.getAvailableVideoWidth()
- this._getFilmstripExtraPanelsWidth()
- UIUtil.parseCssInt(this.filmstrip.css('right'), 10)
@ -240,7 +248,7 @@ const Filmstrip = {
// If local thumb is not hidden
if (thumbs.localThumb) {
availableWidth = Math.floor(
(videoAreaAvailableWidth - (
videoAreaAvailableWidth - (
UIUtil.parseCssInt(
localVideoContainer.css('borderLeftWidth'), 10)
+ UIUtil.parseCssInt(
@ -252,7 +260,7 @@ const Filmstrip = {
+ UIUtil.parseCssInt(
localVideoContainer.css('marginLeft'), 10)
+ UIUtil.parseCssInt(
localVideoContainer.css('marginRight'), 10)))
localVideoContainer.css('marginRight'), 10))
);
}
@ -260,9 +268,10 @@ const Filmstrip = {
// filmstrip mode we don't need to calculate further any adjustments
// to width based on the number of videos present.
if (numvids && !interfaceConfig.VERTICAL_FILMSTRIP) {
let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
const remoteVideoContainer = thumbs.remoteThumbs.eq(0);
availableWidth = Math.floor(
(videoAreaAvailableWidth - numvids * (
videoAreaAvailableWidth - (numvids * (
UIUtil.parseCssInt(
remoteVideoContainer.css('borderLeftWidth'), 10)
+ UIUtil.parseCssInt(
@ -278,7 +287,8 @@ const Filmstrip = {
);
}
let maxHeight
const maxHeight
// If the MAX_HEIGHT property hasn't been specified
// we have the static value.
= Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
@ -287,7 +297,8 @@ const Filmstrip = {
availableHeight
= Math.min(maxHeight, window.innerHeight - 18);
return { availableWidth, availableHeight };
return { availableWidth,
availableHeight };
},
/**
@ -300,15 +311,19 @@ const Filmstrip = {
* @private
*/
_getFilmstripExtraPanelsWidth() {
let className = this.filmstripContainerClassName;
const className = this.filmstripContainerClassName;
let width = 0;
$(`.${className}`)
.children()
.each(function() {
/* eslint-disable no-invalid-this */
if (this.id !== 'remoteVideos') {
width += $(this).outerWidth();
}
/* eslint-enable no-invalid-this */
});
return width;
},
@ -362,16 +377,17 @@ const Filmstrip = {
const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP
? 0 : this.getThumbs(true).remoteThumbs.length;
const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
interfaceConfig.LOCAL_THUMBNAIL_RATIO;
const lW = Math.min(availableWidth /
(remoteLocalWidthRatio * remoteThumbsInRow + 1), availableHeight *
interfaceConfig.LOCAL_THUMBNAIL_RATIO);
const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO
/ interfaceConfig.LOCAL_THUMBNAIL_RATIO;
const lW = Math.min(availableWidth
/ ((remoteLocalWidthRatio * remoteThumbsInRow) + 1), availableHeight
* interfaceConfig.LOCAL_THUMBNAIL_RATIO);
const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
const remoteVideoWidth = lW * remoteLocalWidthRatio;
let localVideo;
if (interfaceConfig.VERTICAL_FILMSTRIP) {
localVideo = {
thumbWidth: remoteVideoWidth,
@ -401,13 +417,15 @@ const Filmstrip = {
* @param forceUpdate
* @returns {Promise}
*/
// eslint-disable-next-line max-params
resizeThumbnails(local, remote, animate = false, forceUpdate = false) {
return new Promise(resolve => {
let thumbs = this.getThumbs(!forceUpdate);
let promises = [];
const thumbs = this.getThumbs(!forceUpdate);
const promises = [];
if (thumbs.localThumb) {
promises.push(new Promise((resolve) => {
// eslint-disable-next-line no-shadow
promises.push(new Promise(resolve => {
thumbs.localThumb.animate({
height: local.thumbHeight,
width: local.thumbWidth
@ -415,14 +433,16 @@ const Filmstrip = {
}));
}
if (thumbs.remoteThumbs) {
promises.push(new Promise((resolve) => {
// eslint-disable-next-line no-shadow
promises.push(new Promise(resolve => {
thumbs.remoteThumbs.animate({
height: remote.thumbHeight,
width: remote.thumbWidth
}, this._getAnimateOptions(animate, resolve));
}));
}
promises.push(new Promise((resolve) => {
// eslint-disable-next-line no-shadow
promises.push(new Promise(resolve => {
// Let CSS take care of height in vertical filmstrip mode.
if (interfaceConfig.VERTICAL_FILMSTRIP) {
$('#filmstripLocalVideo').animate({
@ -438,9 +458,10 @@ const Filmstrip = {
}));
promises.push(new Promise(() => {
let { localThumb } = this.getThumbs();
let height = localThumb ? localThumb.height() : 0;
let fontSize = UIUtil.getIndicatorFontSize(height);
const { localThumb } = this.getThumbs();
const height = localThumb ? localThumb.height() : 0;
const fontSize = UIUtil.getIndicatorFontSize(height);
this.filmstrip.find('.indicator').animate({
fontSize
}, this._getAnimateOptions(animate, resolve));
@ -471,24 +492,27 @@ const Filmstrip = {
/**
* Returns thumbnails of the filmstrip
* @param only_visible
* @param onlyVisible
* @returns {object} thumbnails
*/
getThumbs(only_visible = false) {
getThumbs(onlyVisible = false) {
let selector = 'span';
if (only_visible) {
if (onlyVisible) {
selector += ':visible';
}
let localThumb = $("#localVideoContainer");
let remoteThumbs = this.filmstripRemoteVideos.children(selector);
const localThumb = $('#localVideoContainer');
const remoteThumbs = this.filmstripRemoteVideos.children(selector);
// Exclude the local video container if it has been hidden.
if (localThumb.hasClass("hidden")) {
if (localThumb.hasClass('hidden')) {
return { remoteThumbs };
} else {
return { remoteThumbs, localThumb };
}
return { remoteThumbs,
localThumb };
}
};

13
modules/UI/videolayout/LargeContainer.js
View File

@ -3,7 +3,7 @@
* Base class for all Large containers which we can show.
*/
export default class LargeContainer {
/* eslint-disable no-unused-vars, no-empty-function */
/**
* Show this container.
* @returns Promise
@ -24,20 +24,19 @@ export default class LargeContainer {
* @param {number} containerHeight available height
* @param {boolean} animate if container should animate it's resize process
*/
// eslint-disable-next-line no-unused-vars
resize(containerWidth, containerHeight, animate) {
}
/**
* Handler for "hover in" events.
*/
onHoverIn (e) { // eslint-disable-line no-unused-vars
onHoverIn(e) {
}
/**
* Handler for "hover out" events.
*/
onHoverOut (e) { // eslint-disable-line no-unused-vars
onHoverOut(e) {
}
/**
@ -46,14 +45,14 @@ export default class LargeContainer {
* @param {JitsiTrack?} stream new stream
* @param {string} videoType video type
*/
setStream (userID, stream, videoType) {// eslint-disable-line no-unused-vars
setStream(userID, stream, videoType) {
}
/**
* Show or hide user avatar.
* @param {boolean} show
*/
showAvatar (show) { // eslint-disable-line no-unused-vars
showAvatar(show) {
}
/**
@ -63,4 +62,6 @@ export default class LargeContainer {
*/
stayOnStage() {
}
/* eslint-enable no-unused-vars, no-empty-function */
}

94
modules/UI/videolayout/LargeVideoManager.js
View File

@ -7,7 +7,7 @@ import { Provider } from 'react-redux';
import { PresenceLabel } from '../../../react/features/presence-status';
/* eslint-enable no-unused-vars */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import {
JitsiParticipantConnectionStatus
@ -16,15 +16,16 @@ import {
updateKnownLargeVideoResolution
} from '../../../react/features/large-video';
import Avatar from "../avatar/Avatar";
import Avatar from '../avatar/Avatar';
import { createDeferred } from '../../util/helpers';
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
import {VideoContainer, VIDEO_CONTAINER_TYPE} from "./VideoContainer";
import UIEvents from '../../../service/UI/UIEvents';
import UIUtil from '../util/UIUtil';
import { VideoContainer, VIDEO_CONTAINER_TYPE } from './VideoContainer';
import AudioLevels from "../audio_levels/AudioLevels";
import AudioLevels from '../audio_levels/AudioLevels';
const DESKTOP_CONTAINER_TYPE = 'desktop';
/**
* The time interval in milliseconds to check the video resolution of the video
* being displayed.
@ -49,6 +50,9 @@ export default class LargeVideoManager {
|| containerType === DESKTOP_CONTAINER_TYPE;
}
/**
*
*/
constructor(emitter) {
/**
* The map of <tt>LargeContainer</tt>s where the key is the video
@ -59,6 +63,7 @@ export default class LargeVideoManager {
this.eventEmitter = emitter;
this.state = VIDEO_CONTAINER_TYPE;
// FIXME: We are passing resizeContainer as parameter which is calling
// Container.resize. Probably there's better way to implement this.
this.videoContainer = new VideoContainer(
@ -125,6 +130,9 @@ export default class LargeVideoManager {
this.removePresenceLabel();
}
/**
*
*/
onHoverIn(e) {
if (!this.state) {
return;
@ -134,6 +142,9 @@ export default class LargeVideoManager {
container.onHoverIn(e);
}
/**
*
*/
onHoverOut(e) {
if (!this.state) {
return;
@ -148,7 +159,8 @@ export default class LargeVideoManager {
*/
onVideoInterrupted() {
this.enableLocalConnectionProblemFilter(true);
this._setLocalConnectionMessage("connection.RECONNECTING");
this._setLocalConnectionMessage('connection.RECONNECTING');
// Show the message only if the video is currently being displayed
this.showLocalConnectionMessage(
LargeVideoManager.isVideoContainer(this.state));
@ -162,11 +174,19 @@ export default class LargeVideoManager {
this.showLocalConnectionMessage(false);
}
/**
*
*/
get id() {
const container = this.getCurrentContainer();
return container.id;
}
/**
*
*/
scheduleLargeVideoUpdate() {
if (this.updateInProcess || !this.newStreamData) {
return;
@ -175,6 +195,7 @@ export default class LargeVideoManager {
this.updateInProcess = true;
// Include hide()/fadeOut only if we're switching between users
// eslint-disable-next-line eqeqeq
const isUserSwitch = this.newStreamData.id != this.id;
const container = this.getCurrentContainer();
const preUpdate = isUserSwitch ? container.hide() : Promise.resolve();
@ -190,9 +211,11 @@ export default class LargeVideoManager {
this.newStreamData = null;
logger.info("hover in %s", id);
logger.info('hover in %s', id);
this.state = videoType;
// eslint-disable-next-line no-shadow
const container = this.getCurrentContainer();
container.setStream(id, stream, videoType);
// change the avatar url on large
@ -215,7 +238,7 @@ export default class LargeVideoManager {
=== JitsiParticipantConnectionStatus.ACTIVE
|| wasUsersImageCached);
let showAvatar
const showAvatar
= isVideoContainer
&& (APP.conference.isAudioOnly() || !isVideoRenderable);
@ -225,6 +248,7 @@ export default class LargeVideoManager {
// but we still should show watermark
if (showAvatar) {
this.showWatermark(true);
// If the intention of this switch is to show the avatar
// we need to make sure that the video is hidden
promise = container.hide();
@ -246,10 +270,10 @@ export default class LargeVideoManager {
let messageKey = null;
if (isConnectionInterrupted) {
messageKey = "connection.USER_CONNECTION_INTERRUPTED";
messageKey = 'connection.USER_CONNECTION_INTERRUPTED';
} else if (connectionStatus
=== JitsiParticipantConnectionStatus.INACTIVE) {
messageKey = "connection.LOW_BANDWIDTH";
messageKey = 'connection.LOW_BANDWIDTH';
}
// Make sure no notification about remote failure is shown as
@ -302,21 +326,23 @@ export default class LargeVideoManager {
this.videoContainer.showRemoteConnectionProblemIndicator(
showProblemsIndication);
if (!messageKey) {
// Hide the message
this.showRemoteConnectionMessage(false);
} else {
if (messageKey) {
// Get user's display name
let displayName
const displayName
= APP.conference.getParticipantDisplayName(id);
this._setRemoteConnectionMessage(
messageKey,
{ displayName: displayName });
{ displayName });
// Show it now only if the VideoContainer is on top
this.showRemoteConnectionMessage(
LargeVideoManager.isVideoContainer(this.state));
} else {
// Hide the message
this.showRemoteConnectionMessage(false);
}
}
/**
@ -356,7 +382,8 @@ export default class LargeVideoManager {
* @param {boolean} [animate=false] if resize process should be animated.
*/
resizeContainer(type, animate = false) {
let container = this.getContainer(type);
const container = this.getContainer(type);
container.resize(this.width, this.height, animate);
}
@ -392,7 +419,7 @@ export default class LargeVideoManager {
* Updates the src of the dominant speaker avatar
*/
updateAvatar(avatarUrl) {
$("#dominantSpeakerAvatar").attr('src', avatarUrl);
$('#dominantSpeakerAvatar').attr('src', avatarUrl);
}
/**
@ -401,7 +428,7 @@ export default class LargeVideoManager {
* @param lvl the new audio level to set
*/
updateLargeVideoAudioLevel(lvl) {
AudioLevels.updateLargeVideoAudioLevel("dominantSpeaker", lvl);
AudioLevels.updateLargeVideoAudioLevel('dominantSpeaker', lvl);
}
/**
@ -418,19 +445,18 @@ export default class LargeVideoManager {
if (isConnectionMessageVisible) {
this.removePresenceLabel();
return;
}
const presenceLabelContainer = $('#remotePresenceMessage');
if (presenceLabelContainer.length) {
/* jshint ignore:start */
ReactDOM.render(
<Provider store = { APP.store }>
<PresenceLabel participantID = { id } />
</Provider>,
presenceLabelContainer.get(0));
/* jshint ignore:end */
}
}
@ -443,9 +469,7 @@ export default class LargeVideoManager {
const presenceLabelContainer = $('#remotePresenceMessage');
if (presenceLabelContainer.length) {
/* jshint ignore:start */
ReactDOM.unmountComponentAtNode(presenceLabelContainer.get(0));
/* jshint ignore:end */
}
}
@ -465,10 +489,11 @@ export default class LargeVideoManager {
*/
showLocalConnectionMessage(show) {
if (typeof show !== 'boolean') {
// eslint-disable-next-line no-param-reassign
show = APP.conference.isConnectionInterrupted();
}
let id = 'localConnectionMessage';
const id = 'localConnectionMessage';
UIUtil.setVisible(id, show);
@ -494,6 +519,7 @@ export default class LargeVideoManager {
const connStatus
= APP.conference.getParticipantConnectionStatus(this.id);
// eslint-disable-next-line no-param-reassign
show = !APP.conference.isLocalId(this.id)
&& (connStatus === JitsiParticipantConnectionStatus.INTERRUPTED
|| connStatus
@ -501,7 +527,8 @@ export default class LargeVideoManager {
}
if (show) {
$('#remoteConnectionMessage').css({display: "block"});
$('#remoteConnectionMessage').css({ display: 'block' });
// 'videoConnectionMessage' message conflicts with 'avatarMessage',
// so it must be hidden
this.showLocalConnectionMessage(false);
@ -523,8 +550,8 @@ export default class LargeVideoManager {
_setRemoteConnectionMessage(msgKey, msgOptions) {
if (msgKey) {
$('#remoteConnectionMessage')
.attr("data-i18n", msgKey)
.attr("data-i18n-options", JSON.stringify(msgOptions));
.attr('data-i18n', msgKey)
.attr('data-i18n-options', JSON.stringify(msgOptions));
APP.translation.translateElement(
$('#remoteConnectionMessage'), msgOptions);
}
@ -541,7 +568,7 @@ export default class LargeVideoManager {
*/
_setLocalConnectionMessage(msgKey) {
$('#localConnectionMessage')
.attr("data-i18n", msgKey);
.attr('data-i18n', msgKey);
APP.translation.translateElement($('#localConnectionMessage'));
}
@ -565,7 +592,7 @@ export default class LargeVideoManager {
* @returns {LargeContainer}
*/
getContainer(type) {
let container = this.containers[type];
const container = this.containers[type];
if (!container) {
throw new Error(`container of type ${type} doesn't exist`);
@ -617,10 +644,12 @@ export default class LargeVideoManager {
return Promise.resolve();
}
let oldContainer = this.containers[this.state];
const oldContainer = this.containers[this.state];
// FIXME when video is being replaced with other content we need to hide
// companion icons/messages. It would be best if the container would
// be taking care of it by itself, but that is a bigger refactoring
if (LargeVideoManager.isVideoContainer(this.state)) {
this.showWatermark(false);
this.showLocalConnectionMessage(false);
@ -629,7 +658,7 @@ export default class LargeVideoManager {
oldContainer.hide();
this.state = type;
let container = this.getContainer(type);
const container = this.getContainer(type);
return container.show().then(() => {
if (LargeVideoManager.isVideoContainer(type)) {
@ -638,6 +667,7 @@ export default class LargeVideoManager {
// the container would be taking care of it by itself, but that
// is a bigger refactoring
this.showWatermark(true);
// "avatar" and "video connection" can not be displayed both
// at the same time, but the latter is of higher priority and it
// will hide the avatar one if will be displayed.

72
modules/UI/videolayout/LocalVideo.js
View File

@ -9,29 +9,33 @@ import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet';
import { VideoTrack } from '../../../react/features/base/media';
/* eslint-enable no-unused-vars */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import UIEvents from "../../../service/UI/UIEvents";
import SmallVideo from "./SmallVideo";
import UIEvents from '../../../service/UI/UIEvents';
import SmallVideo from './SmallVideo';
/**
*
*/
function LocalVideo(VideoLayout, emitter) {
this.videoSpanId = "localVideoContainer";
this.videoSpanId = 'localVideoContainer';
this.container = this.createContainer();
this.$container = $(this.container);
$("#filmstripLocalVideo").append(this.container);
$('#filmstripLocalVideo').append(this.container);
this.localVideoId = null;
this.bindHoverHandler();
if(config.enableLocalVideoFlip)
if (config.enableLocalVideoFlip) {
this._buildContextMenu();
}
this.isLocal = true;
this.emitter = emitter;
this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP
? 'left top' : 'top center';
Object.defineProperty(this, 'id', {
get: function () {
get() {
return APP.conference.getMyUserId();
}
});
@ -51,6 +55,7 @@ LocalVideo.prototype.constructor = LocalVideo;
LocalVideo.prototype.createContainer = function() {
const containerSpan = document.createElement('span');
containerSpan.classList.add('videocontainer');
containerSpan.id = this.videoSpanId;
@ -72,14 +77,15 @@ LocalVideo.prototype.createContainer = function () {
LocalVideo.prototype.setDisplayName = function(displayName) {
if (!this.container) {
logger.warn(
"Unable to set displayName - " + this.videoSpanId +
" does not exist");
`Unable to set displayName - ${this.videoSpanId
} does not exist`);
return;
}
this.updateDisplayName({
allowEditing: true,
displayName: displayName,
displayName,
displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
elementID: 'localDisplayName',
participantID: this.id
@ -89,7 +95,7 @@ LocalVideo.prototype.setDisplayName = function(displayName) {
LocalVideo.prototype.changeVideo = function(stream) {
this.videoStream = stream;
let localVideoClick = (event) => {
const localVideoClick = event => {
// TODO Checking the classes is a workround to allow events to bubble
// into the DisplayName component if it was clicked. React's synthetic
// events will fire after jQuery handlers execute, so stop propogation
@ -125,11 +131,10 @@ LocalVideo.prototype.changeVideo = function (stream) {
this.$container.off('click');
this.$container.on('click', localVideoClick);
this.localVideoId = 'localVideo_' + stream.getId();
this.localVideoId = `localVideo_${stream.getId()}`;
var localVideoContainer = document.getElementById('localVideoWrapper');
const localVideoContainer = document.getElementById('localVideoWrapper');
/* jshint ignore:start */
ReactDOM.render(
<Provider store = { APP.store }>
<VideoTrack
@ -138,13 +143,15 @@ LocalVideo.prototype.changeVideo = function (stream) {
</Provider>,
localVideoContainer
);
/* jshint ignore:end */
let isVideo = stream.videoType != "desktop";
// eslint-disable-next-line eqeqeq
const isVideo = stream.videoType != 'desktop';
this._enableDisableContextMenu(isVideo);
this.setFlipX(isVideo ? APP.settings.getLocalFlipX() : false);
let endedHandler = () => {
const endedHandler = () => {
// Only remove if there is no video and not a transition state.
// Previous non-react logic created a new video element with each track
// removal whereas react reuses the video component so it could be the
@ -160,6 +167,7 @@ LocalVideo.prototype.changeVideo = function (stream) {
}
stream.off(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
};
stream.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
};
@ -172,15 +180,14 @@ LocalVideo.prototype.setVisible = function(visible) {
// We toggle the hidden class as an indication to other interested parties
// that this container has been hidden on purpose.
this.$container.toggleClass("hidden");
this.$container.toggleClass('hidden');
// We still show/hide it as we need to overwrite the style property if we
// want our action to take effect. Toggling the display property through
// the above css class didn't succeed in overwriting the style.
if (visible) {
this.$container.show();
}
else {
} else {
this.$container.hide();
}
};
@ -191,12 +198,13 @@ LocalVideo.prototype.setVisible = function(visible) {
*/
LocalVideo.prototype.setFlipX = function(val) {
this.emitter.emit(UIEvents.LOCAL_FLIPX_CHANGED, val);
if(!this.localVideoId)
if (!this.localVideoId) {
return;
}
if (val) {
this.selectVideoElement().addClass("flipVideoX");
this.selectVideoElement().addClass('flipVideoX');
} else {
this.selectVideoElement().removeClass("flipVideoX");
this.selectVideoElement().removeClass('flipVideoX');
}
};
@ -205,23 +213,24 @@ LocalVideo.prototype.setFlipX = function (val) {
*/
LocalVideo.prototype._buildContextMenu = function() {
$.contextMenu({
selector: '#' + this.videoSpanId,
selector: `#${this.videoSpanId}`,
zIndex: 10000,
items: {
flip: {
name: "Flip",
name: 'Flip',
callback: () => {
let val = !APP.settings.getLocalFlipX();
const val = !APP.settings.getLocalFlipX();
this.setFlipX(val);
APP.settings.setLocalFlipX(val);
}
}
},
events: {
show : function(options){
options.items.flip.name =
APP.translation.generateTranslationHTML(
"videothumbnail.flip");
show(options) {
options.items.flip.name
= APP.translation.generateTranslationHTML(
'videothumbnail.flip');
}
}
});
@ -232,8 +241,9 @@ LocalVideo.prototype._buildContextMenu = function () {
* @param enable {boolean} true for enable, false for disable
*/
LocalVideo.prototype._enableDisableContextMenu = function(enable) {
if(this.$container.contextMenu)
if (this.$container.contextMenu) {
this.$container.contextMenu(enable);
}
};
export default LocalVideo;

113
modules/UI/videolayout/RemoteVideo.js
View File

@ -18,11 +18,11 @@ import {
} from '../../../react/features/remote-video-menu';
/* eslint-enable no-unused-vars */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import SmallVideo from "./SmallVideo";
import UIUtils from "../util/UIUtil";
import SmallVideo from './SmallVideo';
import UIUtils from '../util/UIUtil';
/**
* Creates new instance of the <tt>RemoteVideo</tt>.
@ -52,6 +52,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
this.isLocal = false;
this.popupMenuIsHovered = false;
this._isRemoteControlSessionActive = false;
/**
* The flag is set to <tt>true</tt> after the 'onplay' event has been
* triggered on the current video element. It goes back to <tt>false</tt>
@ -60,6 +61,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
* @type {boolean}
*/
this.wasVideoPlayed = false;
/**
* The flag is set to <tt>true</tt> if remote participant's video gets muted
* during his media connection disruption. This is to prevent black video
@ -108,8 +110,10 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
* NOTE: extends SmallVideo's method
*/
RemoteVideo.prototype._isHovered = function() {
let isHovered = SmallVideo.prototype._isHovered.call(this)
const isHovered = SmallVideo.prototype._isHovered.call(this)
|| this.popupMenuIsHovered;
return isHovered;
};
@ -139,14 +143,13 @@ RemoteVideo.prototype._generatePopupContent = function () {
&& ((!APP.remoteControl.active && !this._isRemoteControlSessionActive)
|| APP.remoteControl.controller.activeParticipant === this.id)) {
if (controller.getRequestedParticipant() === this.id) {
onRemoteControlToggle = () => {};
remoteControlState = REMOTE_CONTROL_MENU_STATES.REQUESTING;
} else if (!controller.isStarted()) {
onRemoteControlToggle = this._requestRemoteControlPermissions;
remoteControlState = REMOTE_CONTROL_MENU_STATES.NOT_STARTED;
} else {
} else if (controller.isStarted()) {
onRemoteControlToggle = this._stopRemoteControl;
remoteControlState = REMOTE_CONTROL_MENU_STATES.STARTED;
} else {
onRemoteControlToggle = this._requestRemoteControlPermissions;
remoteControlState = REMOTE_CONTROL_MENU_STATES.NOT_STARTED;
}
}
@ -161,7 +164,6 @@ RemoteVideo.prototype._generatePopupContent = function () {
const { isModerator } = APP.conference;
const participantID = this.id;
/* jshint ignore:start */
ReactDOM.render(
<Provider store = { APP.store }>
<I18nextProvider i18n = { i18next }>
@ -177,7 +179,6 @@ RemoteVideo.prototype._generatePopupContent = function () {
</I18nextProvider>
</Provider>,
remoteVideoMenuContainer);
/* jshint ignore:end */
};
RemoteVideo.prototype._onRemoteVideoMenuDisplay = function() {
@ -219,15 +220,17 @@ RemoteVideo.prototype._requestRemoteControlPermissions = function () {
}
this.updateRemoteVideoMenu();
APP.UI.messageHandler.notify(
"dialog.remoteControlTitle",
(result === false) ? "dialog.remoteControlDeniedMessage"
: "dialog.remoteControlAllowedMessage",
'dialog.remoteControlTitle',
result === false ? 'dialog.remoteControlDeniedMessage'
: 'dialog.remoteControlAllowedMessage',
{ user: this.user.getDisplayName()
|| interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME }
);
if(result === true) {//the remote control permissions has been granted
if (result === true) {
// the remote control permissions has been granted
// pin the controlled participant
let pinnedId = this.VideoLayout.getPinnedId();
const pinnedId = this.VideoLayout.getPinnedId();
if (pinnedId !== this.id) {
this.VideoLayout.handleVideoThumbClicked(this.id);
}
@ -236,8 +239,8 @@ RemoteVideo.prototype._requestRemoteControlPermissions = function () {
logger.error(error);
this.updateRemoteVideoMenu();
APP.UI.messageHandler.notify(
"dialog.remoteControlTitle",
"dialog.remoteControlErrorMessage",
'dialog.remoteControlTitle',
'dialog.remoteControlErrorMessage',
{ user: this.user.getDisplayName()
|| interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME }
);
@ -270,6 +273,8 @@ RemoteVideo.prototype._getAudioElement = function () {
*/
RemoteVideo.prototype._canSetAudioVolume = function() {
const audioElement = this._getAudioElement();
return audioElement && audioElement.volume !== undefined;
};
@ -302,6 +307,7 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (
*/
RemoteVideo.prototype.setVideoMutedView = function(isMuted) {
SmallVideo.prototype.setVideoMutedView.call(this, isMuted);
// Update 'mutedWhileDisconnected' flag
this._figureOutMutedWhileDisconnected();
};
@ -314,6 +320,7 @@ RemoteVideo.prototype.setVideoMutedView = function(isMuted) {
*/
RemoteVideo.prototype._figureOutMutedWhileDisconnected = function() {
const isActive = this.isConnectionActive();
if (!isActive && this.isVideoMuted) {
this.mutedWhileDisconnected = true;
} else if (isActive && !this.isVideoMuted) {
@ -344,21 +351,23 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
* @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
*/
RemoteVideo.prototype.removeRemoteStreamElement = function(stream) {
if (!this.container)
if (!this.container) {
return false;
}
var isVideo = stream.isVideoTrack();
const isVideo = stream.isVideoTrack();
const elementID = SmallVideo.getStreamElementID(stream);
const select = $(`#${elementID}`);
var elementID = SmallVideo.getStreamElementID(stream);
var select = $('#' + elementID);
select.remove();
if (isVideo) {
this.wasVideoPlayed = false;
}
logger.info((isVideo ? "Video" : "Audio") +
" removed " + this.id, select);
logger.info(`${isVideo ? 'Video' : 'Audio'
} removed ${this.id}`, select);
// when removing only the video element and we are on stage
// update the stage
@ -386,10 +395,11 @@ RemoteVideo.prototype.isConnectionActive = function() {
* The remote video is considered "playable" once the stream has started
* according to the {@link #hasVideoStarted} result.
* It will be allowed to display video also in
* {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video was ever played
* and was not muted while not in ACTIVE state. This basically means that there
* is stalled video image cached that could be displayed. It's used to show
* "grey video image" in user's thumbnail when there are connectivity issues.
* {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video was ever
* played and was not muted while not in ACTIVE state. This basically means
* that there is stalled video image cached that could be displayed. It's used
* to show "grey video image" in user's thumbnail when there are connectivity
* issues.
*
* @inheritdoc
* @override
@ -433,18 +443,20 @@ RemoteVideo.prototype.updateConnectionStatusIndicator = function () {
const isInterrupted
= connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED;
// Toggle thumbnail video problem filter
this.selectVideoElement().toggleClass(
"videoThumbnailProblemFilter", isInterrupted);
'videoThumbnailProblemFilter', isInterrupted);
this.$avatar().toggleClass(
"videoThumbnailProblemFilter", isInterrupted);
'videoThumbnailProblemFilter', isInterrupted);
};
/**
* Removes RemoteVideo from the page.
*/
RemoteVideo.prototype.remove = function() {
logger.log("Remove thumbnail", this.id);
logger.log('Remove thumbnail', this.id);
this.removeAudioLevelIndicator();
@ -470,6 +482,7 @@ RemoteVideo.prototype.remove = function () {
// Make sure that the large video is updated if are removing its
// corresponding small video.
this.VideoLayout.updateAfterThumbRemoved(this.id);
// Remove whole container
if (this.container.parentNode) {
this.container.parentNode.removeChild(this.container);
@ -478,22 +491,25 @@ RemoteVideo.prototype.remove = function () {
RemoteVideo.prototype.waitForPlayback = function(streamElement, stream) {
var webRtcStream = stream.getOriginalStream();
var isVideo = stream.isVideoTrack();
const webRtcStream = stream.getOriginalStream();
const isVideo = stream.isVideoTrack();
if (!isVideo || webRtcStream.id === 'mixedmslabel') {
return;
}
var self = this;
const self = this;
// Triggers when video playback starts
var onPlayingHandler = function () {
const onPlayingHandler = function() {
self.wasVideoPlayed = true;
self.VideoLayout.remoteVideoActive(streamElement, self.id);
streamElement.onplaying = null;
// Refresh to show the video
self.updateView();
};
streamElement.onplaying = onPlayingHandler;
};
@ -512,14 +528,16 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
return;
}
let isVideo = stream.isVideoTrack();
const isVideo = stream.isVideoTrack();
isVideo ? this.videoStream = stream : this.audioStream = stream;
if (isVideo)
if (isVideo) {
this.setVideoType(stream.videoType);
}
// Add click handler.
let onClickHandler = (event) => {
const onClickHandler = event => {
const $source = $(event.target || event.srcElement);
const { classList } = event.target;
@ -546,12 +564,15 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
event.stopPropagation();
event.preventDefault();
}
return false;
};
this.container.onclick = onClickHandler;
if(!stream.getOriginalStream())
if (!stream.getOriginalStream()) {
return;
}
let streamElement = SmallVideo.createStreamElement(stream);
@ -591,8 +612,9 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
*/
RemoteVideo.prototype.setDisplayName = function(displayName) {
if (!this.container) {
logger.warn( "Unable to set displayName - " + this.videoSpanId +
" does not exist");
logger.warn(`Unable to set displayName - ${this.videoSpanId
} does not exist`);
return;
}
@ -610,7 +632,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName) {
* @param videoElementId the id of local or remote video element.
*/
RemoteVideo.prototype.removeRemoteVideoMenu = function() {
var menuSpan = this.$container.find('.remotevideomenu');
const menuSpan = this.$container.find('.remotevideomenu');
if (menuSpan.length) {
ReactDOM.unmountComponentAtNode(menuSpan.get(0));
@ -630,13 +652,11 @@ RemoteVideo.prototype.addPresenceLabel = function () {
= this.container.querySelector('.presence-label-container');
if (presenceLabelContainer) {
/* jshint ignore:start */
ReactDOM.render(
<Provider store = { APP.store }>
<PresenceLabel participantID = { this.id } />
</Provider>,
presenceLabelContainer);
/* jshint ignore:end */
}
};
@ -656,6 +676,7 @@ RemoteVideo.prototype.removePresenceLabel = function () {
RemoteVideo.createContainer = function(spanId) {
const container = document.createElement('span');
container.id = spanId;
container.className = 'videocontainer';
@ -669,7 +690,9 @@ RemoteVideo.createContainer = function (spanId) {
<div class ='presence-label-container'></div>
<span class = 'remotevideomenu'></span>`;
var remotes = document.getElementById('filmstripRemoteVideosContainer');
const remotes = document.getElementById('filmstripRemoteVideosContainer');
return remotes.appendChild(container);
};

151
modules/UI/videolayout/SmallVideo.js
View File

@ -25,11 +25,11 @@ import {
} from '../../../react/features/filmstrip';
/* eslint-enable no-unused-vars */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import Avatar from "../avatar/Avatar";
import UIUtil from "../util/UIUtil";
import UIEvents from "../../../service/UI/UIEvents";
import Avatar from '../avatar/Avatar';
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
@ -39,6 +39,7 @@ const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
* @constant
*/
const DISPLAY_VIDEO = 0;
/**
* Display mode constant used when the user's avatar is being displayed on
* the small video.
@ -46,6 +47,7 @@ const DISPLAY_VIDEO = 0;
* @constant
*/
const DISPLAY_AVATAR = 1;
/**
* Display mode constant used when neither video nor avatar is being displayed
* on the small video. And we just show the display name.
@ -70,6 +72,9 @@ const DISPLAY_VIDEO_WITH_NAME = 3;
*/
const DISPLAY_AVATAR_WITH_NAME = 4;
/**
* Constructor.
*/
function SmallVideo(VideoLayout) {
this._isModerator = false;
this.isAudioMuted = false;
@ -80,6 +85,7 @@ function SmallVideo(VideoLayout) {
this.VideoLayout = VideoLayout;
this.videoIsHovered = false;
this.hideDisplayName = false;
// we can stop updating the thumbnail
this.disableUpdateView = false;
@ -154,8 +160,9 @@ SmallVideo.prototype.isVisible = function () {
* @param {enable} set to {true} to enable and {false} to disable
*/
SmallVideo.prototype.enableDeviceAvailabilityIcons = function(enable) {
if (typeof enable === "undefined")
if (typeof enable === 'undefined') {
return;
}
this.deviceAvailabilityIconsEnabled = enable;
};
@ -165,31 +172,33 @@ SmallVideo.prototype.enableDeviceAvailabilityIcons = function (enable) {
* @param devices the devices, which will be checked for availability
*/
SmallVideo.prototype.setDeviceAvailabilityIcons = function(devices) {
if (!this.deviceAvailabilityIconsEnabled)
if (!this.deviceAvailabilityIconsEnabled) {
return;
}
if(!this.container)
if (!this.container) {
return;
}
var noMic = this.$container.find('.noMic');
var noVideo = this.$container.find('.noVideo');
const noMic = this.$container.find('.noMic');
const noVideo = this.$container.find('.noVideo');
noMic.remove();
noVideo.remove();
if (!devices.audio) {
this.container.appendChild(
document.createElement("div")).setAttribute("class", "noMic");
document.createElement('div')).setAttribute('class', 'noMic');
}
if (!devices.video) {
this.container.appendChild(
document.createElement("div")).setAttribute("class", "noVideo");
document.createElement('div')).setAttribute('class', 'noVideo');
}
if (!devices.audio && !devices.video) {
noMic.css("background-position", "75%");
noVideo.css("background-position", "25%");
noVideo.css("background-color", "transparent");
noMic.css('background-position', '75%');
noVideo.css('background-position', '25%');
noVideo.css('background-color', 'transparent');
}
};
@ -219,13 +228,14 @@ SmallVideo.prototype.getVideoType = function () {
* Creates an audio or video element for a particular MediaStream.
*/
SmallVideo.createStreamElement = function(stream) {
let isVideo = stream.isVideoTrack();
const isVideo = stream.isVideoTrack();
let element = isVideo
const element = isVideo
? document.createElement('video')
: document.createElement('audio');
if (isVideo) {
element.setAttribute("muted", "true");
element.setAttribute('muted', 'true');
}
RTCUIHelper.setAutoPlay(element, true);
@ -239,7 +249,7 @@ SmallVideo.createStreamElement = function (stream) {
* Returns the element id for a particular MediaStream.
*/
SmallVideo.getStreamElementID = function(stream) {
let isVideo = stream.isVideoTrack();
const isVideo = stream.isVideoTrack();
return (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId();
};
@ -320,7 +330,6 @@ SmallVideo.prototype.updateStatusBar = function () {
= this.container.querySelector('.videocontainer__toolbar');
const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
/* jshint ignore:start */
ReactDOM.render(
<I18nextProvider i18n = { i18next }>
<div>
@ -339,7 +348,6 @@ SmallVideo.prototype.updateStatusBar = function () {
</div>
</I18nextProvider>,
statusBarContainer);
/* jshint ignore:end */
};
/**
@ -392,12 +400,10 @@ SmallVideo.prototype.updateAudioLevelIndicator = function (lvl = 0) {
const audioLevelContainer = this._getAudioLevelContainer();
if (audioLevelContainer) {
/* jshint ignore:start */
ReactDOM.render(
<AudioLevelIndicator
audioLevel = { lvl }/>,
audioLevelContainer);
/* jshint ignore:end */
}
};
@ -464,7 +470,6 @@ SmallVideo.prototype.updateDisplayName = function (props) {
= this.container.querySelector('.displayNameContainer');
if (displayNameContainer) {
/* jshint ignore:start */
ReactDOM.render(
<Provider store = { APP.store }>
<I18nextProvider i18n = { i18next }>
@ -472,7 +477,6 @@ SmallVideo.prototype.updateDisplayName = function (props) {
</I18nextProvider>
</Provider>,
displayNameContainer);
/* jshint ignore:end */
}
};
@ -498,13 +502,12 @@ SmallVideo.prototype.removeDisplayName = function () {
* @param isFocused indicates if the thumbnail should be focused/pinned or not
*/
SmallVideo.prototype.focus = function(isFocused) {
var focusedCssClass = "videoContainerFocused";
var isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
const focusedCssClass = 'videoContainerFocused';
const isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
if (!isFocused && isFocusClassEnabled) {
this.$container.removeClass(focusedCssClass);
}
else if (isFocused && !isFocusClassEnabled) {
} else if (isFocused && !isFocusClassEnabled) {
this.$container.addClass(focusedCssClass);
}
};
@ -550,13 +553,14 @@ SmallVideo.prototype.selectDisplayMode = function() {
&& this.selectVideoElement().length
&& !APP.conference.isAudioOnly()) {
// check hovering and change state to video with name
return this._isHovered() ?
DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
} else {
// check hovering and change state to avatar with name
return this._isHovered() ?
DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
return this._isHovered()
? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
}
// check hovering and change state to avatar with name
return this._isHovered()
? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
};
/**
@ -578,41 +582,48 @@ SmallVideo.prototype._isHovered = function () {
* video because there is no dominant speaker and no focused speaker
*/
SmallVideo.prototype.updateView = function() {
if (this.disableUpdateView)
if (this.disableUpdateView) {
return;
}
if (!this.hasAvatar) {
if (this.id) {
// Init avatar
this.avatarChanged(Avatar.getAvatarUrl(this.id));
} else {
logger.error("Unable to init avatar - no id", this);
logger.error('Unable to init avatar - no id', this);
return;
}
}
// Determine whether video, avatar or blackness should be displayed
let displayMode = this.selectDisplayMode();
const displayMode = this.selectDisplayMode();
// Show/hide video.
UIUtil.setVisibleBySelector(this.selectVideoElement(),
(displayMode === DISPLAY_VIDEO
|| displayMode === DISPLAY_VIDEO_WITH_NAME));
displayMode === DISPLAY_VIDEO
|| displayMode === DISPLAY_VIDEO_WITH_NAME);
// Show/hide the avatar.
UIUtil.setVisibleBySelector(this.$avatar(),
(displayMode === DISPLAY_AVATAR
|| displayMode === DISPLAY_AVATAR_WITH_NAME));
displayMode === DISPLAY_AVATAR
|| displayMode === DISPLAY_AVATAR_WITH_NAME);
// Show/hide the display name.
UIUtil.setVisibleBySelector(this.$displayName(),
!this.hideDisplayName
&& (displayMode === DISPLAY_BLACKNESS_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME
|| displayMode === DISPLAY_AVATAR_WITH_NAME));
// show hide overlay when there is a video or avatar under
// the display name
UIUtil.setVisibleBySelector(this.$container.find(
'.videocontainer__hoverOverlay'),
(displayMode === DISPLAY_AVATAR_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME));
displayMode === DISPLAY_AVATAR_WITH_NAME
|| displayMode === DISPLAY_VIDEO_WITH_NAME);
};
/**
@ -624,17 +635,16 @@ SmallVideo.prototype.updateView = function () {
*/
SmallVideo.prototype.avatarChanged = function(avatarUrl) {
const thumbnail = this.$avatar().get(0);
this.hasAvatar = true;
if (thumbnail) {
/* jshint ignore:start */
ReactDOM.render(
<AvatarDisplay
className = 'userAvatar'
uri = { avatarUrl } />,
thumbnail
);
/* jshint ignore:end */
}
};
@ -659,12 +669,14 @@ SmallVideo.prototype.removeAvatar = function () {
SmallVideo.prototype.showDominantSpeakerIndicator = function(show) {
// Don't create and show dominant speaker indicator if
// DISABLE_DOMINANT_SPEAKER_INDICATOR is true
if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR)
if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR) {
return;
}
if (!this.container) {
logger.warn( "Unable to set dominant speaker indicator - "
+ this.videoSpanId + " does not exist");
logger.warn(`Unable to set dominant speaker indicator - ${
this.videoSpanId} does not exist`);
return;
}
@ -679,8 +691,9 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
*/
SmallVideo.prototype.showRaisedHandIndicator = function(show) {
if (!this.container) {
logger.warn( "Unable to raised hand indication - "
+ this.videoSpanId + " does not exist");
logger.warn(`Unable to raised hand indication - ${
this.videoSpanId} does not exist`);
return;
}
@ -695,26 +708,31 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
* is added, and will fire a RESOLUTION_CHANGED event.
*/
SmallVideo.prototype.waitForResolutionChange = function() {
let beforeChange = window.performance.now();
let videos = this.selectVideoElement();
if (!videos || !videos.length || videos.length <= 0)
const beforeChange = window.performance.now();
const videos = this.selectVideoElement();
if (!videos || !videos.length || videos.length <= 0) {
return;
let video = videos[0];
let oldWidth = video.videoWidth;
let oldHeight = video.videoHeight;
}
const video = videos[0];
const oldWidth = video.videoWidth;
const oldHeight = video.videoHeight;
video.onresize = () => {
// eslint-disable-next-line eqeqeq
if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) {
// Only run once.
video.onresize = null;
let delay = window.performance.now() - beforeChange;
let emitter = this.VideoLayout.getEventEmitter();
const delay = window.performance.now() - beforeChange;
const emitter = this.VideoLayout.getEventEmitter();
if (emitter) {
emitter.emit(
UIEvents.RESOLUTION_CHANGED,
this.getId(),
oldWidth + "x" + oldHeight,
video.videoWidth + "x" + video.videoHeight,
`${oldWidth}x${oldHeight}`,
`${video.videoWidth}x${video.videoHeight}`,
delay);
}
}
@ -735,11 +753,12 @@ SmallVideo.prototype.waitForResolutionChange = function() {
*/
SmallVideo.prototype.initBrowserSpecificProperties = function() {
var userAgent = window.navigator.userAgent;
if (userAgent.indexOf("QtWebEngine") > -1
&& (userAgent.indexOf("Windows") > -1
|| userAgent.indexOf("Linux") > -1)) {
this.$container.css("overflow", "hidden");
const userAgent = window.navigator.userAgent;
if (userAgent.indexOf('QtWebEngine') > -1
&& (userAgent.indexOf('Windows') > -1
|| userAgent.indexOf('Linux') > -1)) {
this.$container.css('overflow', 'hidden');
}
};
@ -760,7 +779,6 @@ SmallVideo.prototype.updateIndicators = function () {
|| !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
/* jshint ignore:start */
ReactDOM.render(
<I18nextProvider i18n = { i18next }>
<div>
@ -788,7 +806,6 @@ SmallVideo.prototype.updateIndicators = function () {
</I18nextProvider>,
indicatorToolbar
);
/* jshint ignore:end */
};
/**

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

@ -23,16 +23,17 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
* @param videoSpaceHeight the height of the available space
* @return an array with 2 elements, the video width and the video height
*/
function computeDesktopVideoSize(
function computeDesktopVideoSize( // eslint-disable-line max-params
videoWidth,
videoHeight,
videoSpaceWidth,
videoSpaceHeight) {
let aspectRatio = videoWidth / videoHeight;
const aspectRatio = videoWidth / videoHeight;
let availableWidth = Math.max(videoWidth, videoSpaceWidth);
let availableHeight = Math.max(videoHeight, videoSpaceHeight);
// eslint-disable-next-line no-param-reassign
videoSpaceHeight -= Filmstrip.getFilmstripHeight();
if (availableWidth / aspectRatio >= videoSpaceHeight) {
@ -60,13 +61,14 @@ function computeDesktopVideoSize(
* @param videoSpaceHeight the height of the video space
* @return an array with 2 elements, the video width and the video height
*/
function computeCameraVideoSize(
function computeCameraVideoSize( // eslint-disable-line max-params
videoWidth,
videoHeight,
videoSpaceWidth,
videoSpaceHeight,
videoLayoutFit) {
const aspectRatio = videoWidth / videoHeight;
switch (videoLayoutFit) {
case 'height':
return [ videoSpaceHeight * aspectRatio, videoSpaceHeight ];
@ -97,6 +99,7 @@ function computeCameraVideoSize(
height = maxHeight;
width = height * aspectRatio;
}
return [ width, height ];
}
default:
@ -111,7 +114,7 @@ function computeCameraVideoSize(
* @return an array with 2 elements, the horizontal indent and the vertical
* indent
*/
function getCameraVideoPosition(
function getCameraVideoPosition( // eslint-disable-line max-params
videoWidth,
videoHeight,
videoSpaceWidth,
@ -120,13 +123,15 @@ function getCameraVideoPosition(
// full screen mode and this is why we use the screen height in this case.
// Need to think it further at some point and implement it properly.
if (UIUtil.isFullScreen()) {
// eslint-disable-next-line no-param-reassign
videoSpaceHeight = window.innerHeight;
}
let horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
let verticalIndent = (videoSpaceHeight - videoHeight) / 2;
const horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
const verticalIndent = (videoSpaceHeight - videoHeight) / 2;
return { horizontalIndent, verticalIndent };
return { horizontalIndent,
verticalIndent };
}
/**
@ -137,11 +142,12 @@ function getCameraVideoPosition(
* indent
*/
function getDesktopVideoPosition(videoWidth, videoHeight, videoSpaceWidth) {
let horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
const horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
let verticalIndent = 0;// Top aligned
const verticalIndent = 0;// Top aligned
return { horizontalIndent, verticalIndent };
return { horizontalIndent,
verticalIndent };
}
/**
@ -149,14 +155,23 @@ function getDesktopVideoPosition(videoWidth, videoHeight, videoSpaceWidth) {
*/
export class VideoContainer extends LargeContainer {
// FIXME: With Temasys we have to re-select everytime
/**
*
*/
get $video() {
return $('#largeVideo');
}
/**
*
*/
get $videoBackground() {
return $('#largeVideoBackground');
}
/**
*
*/
get id() {
return this.userId;
}
@ -213,15 +228,17 @@ export class VideoContainer extends LargeContainer {
this.avatarHeight = $('#dominantSpeakerAvatar').height();
var onPlayingCallback = function (event) {
const onPlayingCallback = function(event) {
if (typeof resizeContainer === 'function') {
resizeContainer(event);
}
this.wasVideoRendered = true;
}.bind(this);
// This does not work with Temasys plugin - has to be a property to be
// copied between new <object> elements
// this.$video.on('play', onPlay);
this.$video[0].onplaying = onPlayingCallback;
/**
@ -272,7 +289,9 @@ export class VideoContainer extends LargeContainer {
* @returns {{width, height}}
*/
getStreamSize() {
let video = this.$video[0];
const video = this.$video[0];
return {
width: video.videoWidth,
height: video.videoHeight
@ -286,7 +305,7 @@ export class VideoContainer extends LargeContainer {
* @returns {{availableWidth, availableHeight}}
*/
getVideoSize(containerWidth, containerHeight) {
let { width, height } = this.getStreamSize();
const { width, height } = this.getStreamSize();
if (this.stream && this.isScreenSharing()) {
return computeDesktopVideoSize(width,
@ -302,6 +321,7 @@ export class VideoContainer extends LargeContainer {
interfaceConfig.VIDEO_LAYOUT_FIT);
}
/* eslint-disable max-params */
/**
* Calculate optimal video position (offset for top left corner)
* for specified video size and container size.
@ -312,17 +332,19 @@ export class VideoContainer extends LargeContainer {
* @returns {{horizontalIndent, verticalIndent}}
*/
getVideoPosition(width, height, containerWidth, containerHeight) {
/* eslint-enable max-params */
if (this.stream && this.isScreenSharing()) {
return getDesktopVideoPosition(width,
height,
containerWidth,
containerHeight);
} else {
}
return getCameraVideoPosition(width,
height,
containerWidth,
containerHeight);
}
}
/**
@ -346,17 +368,22 @@ export class VideoContainer extends LargeContainer {
*/
_positionParticipantStatus($element) {
if (this.avatarDisplayed) {
let $avatarImage = $('#dominantSpeakerAvatar');
const $avatarImage = $('#dominantSpeakerAvatar');
$element.css(
'top',
$avatarImage.offset().top + $avatarImage.height() + 10);
} else {
let height = $element.height();
let parentHeight = $element.parent().height();
const height = $element.height();
const parentHeight = $element.parent().height();
$element.css('top', (parentHeight / 2) - (height / 2));
}
}
/**
*
*/
resize(containerWidth, containerHeight, animate = false) {
// XXX Prevent TypeError: undefined is not an object when the Web
// browser does not support WebRTC (yet).
@ -366,32 +393,35 @@ export class VideoContainer extends LargeContainer {
this._hideVideoBackground();
let [ width, height ]
const [ width, height ]
= this.getVideoSize(containerWidth, containerHeight);
if ((containerWidth > width) || (containerHeight > height)) {
this._showVideoBackground();
const css
= containerWidth > width
? { width: '100%', height: 'auto' }
: { width: 'auto', height: '100%' };
? { width: '100%',
height: 'auto' }
: { width: 'auto',
height: '100%' };
this.$videoBackground.css(css);
}
let { horizontalIndent, verticalIndent }
const { horizontalIndent, verticalIndent }
= this.getVideoPosition(width, height,
containerWidth, containerHeight);
// update avatar position
let top = containerHeight / 2 - this.avatarHeight / 4 * 3;
const top = (containerHeight / 2) - (this.avatarHeight / 4 * 3);
this.$avatar.css('top', top);
this.positionRemoteStatusMessages();
this.$wrapper.animate({
width: width,
height: height,
width,
height,
top: verticalIndent,
bottom: verticalIndent,
@ -432,11 +462,13 @@ export class VideoContainer extends LargeContainer {
this.videoType = videoType;
this.resizeContainer();
}
return;
} else {
}
// The stream has changed, so the image will be lost on detach
this.wasVideoRendered = false;
}
// detach old stream
if (this.stream) {
@ -475,8 +507,9 @@ export class VideoContainer extends LargeContainer {
*/
setLocalFlipX(val) {
this.localFlipX = val;
if(!this.$video || !this.stream || !this.stream.isLocal())
if (!this.$video || !this.stream || !this.stream.isLocal()) {
return;
}
this.$video.css({
transform: this.localFlipX ? 'scaleX(-1)' : 'none'
});
@ -528,19 +561,21 @@ export class VideoContainer extends LargeContainer {
this.$avatar.toggleClass('remoteVideoProblemFilter', show);
}
// We are doing fadeOut/fadeIn animations on parent div which wraps
// largeVideo, because when Temasys plugin is in use it replaces
// <video> elements with plugin <object> tag. In Safari jQuery is
// unable to store values on this plugin object which breaks all
// animation effects performed on it directly.
/**
* We are doing fadeOut/fadeIn animations on parent div which wraps
* largeVideo, because when Temasys plugin is in use it replaces
* <video> elements with plugin <object> tag. In Safari jQuery is
* unable to store values on this plugin object which breaks all
* animation effects performed on it directly.
*/
show() {
// its already visible
if (this.isVisible) {
return Promise.resolve();
}
return new Promise((resolve) => {
return new Promise(resolve => {
this.$wrapperParent.css('visibility', 'visible').fadeTo(
FADE_DURATION_MS,
1,
@ -552,16 +587,20 @@ export class VideoContainer extends LargeContainer {
});
}
/**
*
*/
hide() {
// as the container is hidden/replaced by another container
// hide its avatar
this.showAvatar(false);
// its already hidden
if (!this.isVisible) {
return Promise.resolve();
}
return new Promise((resolve) => {
return new Promise(resolve => {
this.$wrapperParent.fadeTo(FADE_DURATION_MS, 0, () => {
this.$wrapperParent.css('visibility', 'hidden');
this.isVisible = false;
@ -588,7 +627,7 @@ export class VideoContainer extends LargeContainer {
*/
setLargeVideoBackground(isAvatar) {
$('#largeVideoContainer').css('background',
(this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar)
this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar
? '#000' : interfaceConfig.DEFAULT_BACKGROUND);
}
@ -631,6 +670,7 @@ export class VideoContainer extends LargeContainer {
// do not care. Some browsers (at this time, only Edge is known) don't
// return a promise from .play(), so check before trying to catch.
const res = this.$videoBackground[0].play();
if (typeof res !== 'undefined') {
res.catch(reason => logger.error(reason));
}

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

@ -1,5 +1,5 @@
/* global APP, $, interfaceConfig */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import {
JitsiParticipantConnectionStatus
@ -9,60 +9,29 @@ import {
pinParticipant
} from '../../../react/features/base/participants';
import Filmstrip from "./Filmstrip";
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
import Filmstrip from './Filmstrip';
import UIEvents from '../../../service/UI/UIEvents';
import UIUtil from '../util/UIUtil';
import RemoteVideo from "./RemoteVideo";
import LargeVideoManager from "./LargeVideoManager";
import {VIDEO_CONTAINER_TYPE} from "./VideoContainer";
import LocalVideo from "./LocalVideo";
import RemoteVideo from './RemoteVideo';
import LargeVideoManager from './LargeVideoManager';
import { VIDEO_CONTAINER_TYPE } from './VideoContainer';
import LocalVideo from './LocalVideo';
var remoteVideos = {};
var localVideoThumbnail = null;
const remoteVideos = {};
let localVideoThumbnail = null;
var currentDominantSpeaker = null;
let currentDominantSpeaker = null;
var eventEmitter = null;
let eventEmitter = null;
let largeVideo;
/**
* flipX state of the localVideo
*/
let localFlipX = null;
/**
* On contact list item clicked.
*/
function onContactClicked (id) {
if (APP.conference.isLocalId(id)) {
$("#localVideoContainer").click();
return;
}
let remoteVideo = remoteVideos[id];
if (remoteVideo && remoteVideo.hasVideo()) {
// It is not always the case that a videoThumb exists (if there is
// no actual video).
if (remoteVideo.hasVideoStarted()) {
// We have a video src, great! Let's update the large video
// now.
VideoLayout.handleVideoThumbClicked(id);
} else {
// If we don't have a video src for jid, there's absolutely
// no point in calling handleVideoThumbClicked; Quite
// simply, it won't work because it needs an src to attach
// to the large video.
//
// Instead, we trigger the pinned endpoint changed event to
// let the bridge adjust its lastN set for myjid and store
// the pinned user in the lastNPickupId variable to be
// picked up later by the lastN changed event handler.
this.pinParticipant(remoteVideo.id);
}
}
}
/**
* Handler for local flip X changed event.
* @param {Object} val
@ -86,16 +55,14 @@ function getPeerContainerResourceId (containerElement) {
return localVideoThumbnail.id;
}
let i = containerElement.id.indexOf('participant_');
const i = containerElement.id.indexOf('participant_');
if (i >= 0) {
return containerElement.id.substring(i + 12);
}
}
let largeVideo;
var VideoLayout = {
const VideoLayout = {
init(emitter) {
eventEmitter = emitter;
@ -103,9 +70,11 @@ var VideoLayout = {
this.unregisterListeners();
localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
// sets default video type of local video
// FIXME container type is totally different thing from the video type
localVideoThumbnail.setVideoType(VIDEO_CONTAINER_TYPE);
// if we do not resize the thumbs here, if there is no video device
// the local video thumb maybe one pixel
this.resizeThumbnails(false, true);
@ -168,16 +137,20 @@ var VideoLayout = {
* @param lvl the new audio level to update to
*/
setAudioLevel(id, lvl) {
let smallVideo = this.getSmallVideo(id);
if (smallVideo)
smallVideo.updateAudioLevelIndicator(lvl);
const smallVideo = this.getSmallVideo(id);
if (largeVideo && id === largeVideo.id)
if (smallVideo) {
smallVideo.updateAudioLevelIndicator(lvl);
}
if (largeVideo && id === largeVideo.id) {
largeVideo.updateLargeVideoAudioLevel(lvl);
}
},
changeLocalVideo(stream) {
let localId = APP.conference.getMyUserId();
const localId = APP.conference.getMyUserId();
this.onVideoTypeChanged(localId, stream.videoType);
localVideoThumbnail.changeVideo(stream);
@ -213,10 +186,12 @@ var VideoLayout = {
setDeviceAvailabilityIcons(id, devices) {
if (APP.conference.isLocalId(id)) {
localVideoThumbnail.setDeviceAvailabilityIcons(devices);
return;
}
let video = remoteVideos[id];
const video = remoteVideos[id];
if (!video) {
return;
}
@ -232,15 +207,16 @@ var VideoLayout = {
*/
enableDeviceAvailabilityIcons(id, enable) {
let video;
if (APP.conference.isLocalId(id)) {
video = localVideoThumbnail;
}
else {
} else {
video = remoteVideos[id];
}
if (video)
if (video) {
video.enableDeviceAvailabilityIcons(enable);
}
},
/**
@ -267,12 +243,13 @@ var VideoLayout = {
const pinnedId = this.getPinnedId();
let newId;
if (pinnedId)
if (pinnedId) {
newId = pinnedId;
else if (currentDominantSpeaker)
} else if (currentDominantSpeaker) {
newId = currentDominantSpeaker;
else // Otherwise select last visible video
} else { // Otherwise select last visible video
newId = this.electLastVisibleVideo();
}
this.updateLargeVideo(newId);
},
@ -280,52 +257,61 @@ 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;
const remoteThumbs = Filmstrip.getThumbs(true).remoteThumbs;
let thumbs = remoteThumbs.filter('[id!="mixedstream"]');
let lastVisible = thumbs.filter(':visible:last');
const lastVisible = thumbs.filter(':visible:last');
if (lastVisible.length) {
let id = getPeerContainerResourceId(lastVisible[0]);
const id = getPeerContainerResourceId(lastVisible[0]);
if (remoteVideos[id]) {
logger.info("electLastVisibleVideo: " + id);
logger.info(`electLastVisibleVideo: ${id}`);
return id;
}
// The RemoteVideo was removed (but the DOM elements may still
// exist).
}
logger.info("Last visible video no longer exists");
logger.info('Last visible video no longer exists');
thumbs = Filmstrip.getThumbs().remoteThumbs;
if (thumbs.length) {
let id = getPeerContainerResourceId(thumbs[0]);
const id = getPeerContainerResourceId(thumbs[0]);
if (remoteVideos[id]) {
logger.info("electLastVisibleVideo: " + id);
logger.info(`electLastVisibleVideo: ${id}`);
return id;
}
// The RemoteVideo was removed (but the DOM elements may
// still exist).
}
// Go with local video
logger.info("Fallback to local video...");
logger.info('Fallback to local video...');
let id = APP.conference.getMyUserId();
logger.info("electLastVisibleVideo: " + id);
const id = APP.conference.getMyUserId();
logger.info(`electLastVisibleVideo: ${id}`);
return id;
},
onRemoteStreamAdded(stream) {
let id = stream.getParticipantId();
let remoteVideo = remoteVideos[id];
const id = stream.getParticipantId();
const remoteVideo = remoteVideos[id];
if (!remoteVideo)
if (!remoteVideo) {
return;
}
remoteVideo.addRemoteStreamElement(stream);
// Make sure track's muted state is reflected
if (stream.getType() === "audio") {
if (stream.getType() === 'audio') {
this.onAudioMute(stream.getParticipantId(), stream.isMuted());
} else {
this.onVideoMute(stream.getParticipantId(), stream.isMuted());
@ -333,9 +319,11 @@ var VideoLayout = {
},
onRemoteStreamRemoved(stream) {
let id = stream.getParticipantId();
let remoteVideo = remoteVideos[id];
const id = stream.getParticipantId();
const remoteVideo = remoteVideos[id];
// Remote stream may be removed after participant left the conference.
if (remoteVideo) {
remoteVideo.removeRemoteStreamElement(stream);
}
@ -371,7 +359,9 @@ var VideoLayout = {
* @returns {String} the video type video or screen.
*/
getRemoteVideoType(id) {
let smallVideo = VideoLayout.getSmallVideo(id);
const smallVideo = VideoLayout.getSmallVideo(id);
return smallVideo ? smallVideo.getVideoType() : null;
},
@ -403,19 +393,19 @@ var VideoLayout = {
* @param id the identifier of the video thumbnail
*/
handleVideoThumbClicked(id) {
var smallVideo = VideoLayout.getSmallVideo(id);
const smallVideo = VideoLayout.getSmallVideo(id);
const pinnedId = this.getPinnedId();
if (pinnedId) {
var oldSmallVideo = VideoLayout.getSmallVideo(pinnedId);
const oldSmallVideo = VideoLayout.getSmallVideo(pinnedId);
if (oldSmallVideo && !interfaceConfig.filmStripOnly) {
oldSmallVideo.focus(false);
}
}
// Unpin if currently pinned.
if (pinnedId === id)
{
if (pinnedId === id) {
this.pinParticipant(null);
// Enable the currently set dominant speaker.
@ -453,12 +443,14 @@ var VideoLayout = {
* remote video, if undefined <tt>RemoteVideo</tt> will be created
*/
addParticipantContainer(user, smallVideo) {
let id = user.getId();
const id = user.getId();
let remoteVideo;
if(smallVideo)
if (smallVideo) {
remoteVideo = smallVideo;
else
} else {
remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter);
}
this._setRemoteControlProperties(user, remoteVideo);
this.addRemoteVideoContainer(id, remoteVideo);
@ -504,7 +496,7 @@ var VideoLayout = {
// FIXME: what does this do???
remoteVideoActive(videoElement, resourceJid) {
logger.info(resourceJid + " video is now active", videoElement);
logger.info(`${resourceJid} video is now active`, videoElement);
VideoLayout.resizeThumbnails(
false, false, () => {
@ -527,15 +519,16 @@ var VideoLayout = {
_maybePlaceParticipantOnLargeVideo(resourceJid) {
const pinnedId = this.getPinnedId();
if ((!pinnedId &&
!currentDominantSpeaker &&
this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE)) ||
pinnedId === resourceJid ||
(!pinnedId && resourceJid &&
currentDominantSpeaker === resourceJid) ||
if ((!pinnedId
&& !currentDominantSpeaker
&& this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE))
|| pinnedId === resourceJid
|| (!pinnedId && resourceJid
&& currentDominantSpeaker === resourceJid)
/* Playback started while we're on the stage - may need to update
video source with the new stream */
this.isCurrentlyOnLarge(resourceJid)) {
|| this.isCurrentlyOnLarge(resourceJid)) {
this.updateLargeVideo(resourceJid, true);
}
@ -546,18 +539,21 @@ var VideoLayout = {
* On local or remote participants.
*/
showModeratorIndicator() {
let isModerator = APP.conference.isModerator;
const isModerator = APP.conference.isModerator;
if (isModerator) {
localVideoThumbnail.addModeratorIndicator();
} else {
localVideoThumbnail.removeModeratorIndicator();
}
APP.conference.listMembers().forEach(function (member) {
let id = member.getId();
let remoteVideo = remoteVideos[id];
if (!remoteVideo)
APP.conference.listMembers().forEach(member => {
const id = member.getId();
const remoteVideo = remoteVideos[id];
if (!remoteVideo) {
return;
}
if (member.isModerator()) {
remoteVideo.addModeratorIndicator();
@ -611,12 +607,14 @@ var VideoLayout = {
Filmstrip.resizeThumbnails(localVideo, remoteVideo,
animate, forceUpdate)
.then(function () {
if (onComplete && typeof onComplete === "function")
.then(() => {
if (onComplete && typeof onComplete === 'function') {
onComplete();
}
});
return { localVideo, remoteVideo };
return { localVideo,
remoteVideo };
},
/**
@ -626,9 +624,11 @@ var VideoLayout = {
if (APP.conference.isLocalId(id)) {
localVideoThumbnail.showAudioIndicator(isMuted);
} else {
let remoteVideo = remoteVideos[id];
if (!remoteVideo)
const remoteVideo = remoteVideos[id];
if (!remoteVideo) {
return;
}
remoteVideo.showAudioIndicator(isMuted);
remoteVideo.updateRemoteVideoMenu(isMuted);
@ -642,10 +642,12 @@ var VideoLayout = {
if (APP.conference.isLocalId(id)) {
localVideoThumbnail.setVideoMutedView(value);
} else {
let remoteVideo = remoteVideos[id];
if (remoteVideo)
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.setVideoMutedView(value);
}
}
if (this.isCurrentlyOnLarge(id)) {
// large video will show avatar instead of muted stream
@ -657,23 +659,26 @@ var VideoLayout = {
* Display name changed.
*/
onDisplayNameChanged(id, displayName, status) {
if (id === 'localVideoContainer' ||
APP.conference.isLocalId(id)) {
if (id === 'localVideoContainer'
|| APP.conference.isLocalId(id)) {
localVideoThumbnail.setDisplayName(displayName);
} else {
let remoteVideo = remoteVideos[id];
if (remoteVideo)
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.setDisplayName(displayName, status);
}
}
},
/**
* Sets the "raised hand" status for a participant identified by 'id'.
*/
setRaisedHandStatus(id, raisedHandStatus) {
var video
const video
= APP.conference.isLocalId(id)
? localVideoThumbnail : remoteVideos[id];
if (video) {
video.showRaisedHandIndicator(raisedHandStatus);
if (raisedHandStatus) {
@ -690,20 +695,23 @@ var VideoLayout = {
return;
}
let oldSpeakerRemoteVideo = remoteVideos[currentDominantSpeaker];
const oldSpeakerRemoteVideo = remoteVideos[currentDominantSpeaker];
// We ignore local user events, but just unmark remote user as dominant
// while we are talking
if (APP.conference.isLocalId(id)) {
if(oldSpeakerRemoteVideo)
{
if (oldSpeakerRemoteVideo) {
oldSpeakerRemoteVideo.showDominantSpeakerIndicator(false);
currentDominantSpeaker = null;
}
localVideoThumbnail.showDominantSpeakerIndicator(true);
return;
}
let remoteVideo = remoteVideos[id];
const remoteVideo = remoteVideos[id];
if (!remoteVideo) {
return;
}
@ -745,8 +753,10 @@ var VideoLayout = {
this.updateLargeVideo(id, true /* force update */);
}
}
// Show/hide warning on the thumbnail
let remoteVideo = remoteVideos[id];
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
// Updating only connection status indicator is not enough, because
// when we the connection is restored while the avatar was displayed
@ -783,6 +793,7 @@ var VideoLayout = {
*/
_updateRemoteVideo(id) {
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.updateView();
if (remoteVideo.isCurrentlyOnLargeVideo()) {
@ -796,43 +807,48 @@ var VideoLayout = {
* @param id
*/
hideConnectionIndicator(id) {
let remoteVideo = remoteVideos[id];
if (remoteVideo)
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.removeConnectionIndicator();
}
},
/**
* Hides all the indicators
*/
hideStats() {
for (var video in remoteVideos) {
let remoteVideo = remoteVideos[video];
if (remoteVideo)
for (const video in remoteVideos) { // eslint-disable-line guard-for-in
const remoteVideo = remoteVideos[video];
if (remoteVideo) {
remoteVideo.removeConnectionIndicator();
}
}
localVideoThumbnail.removeConnectionIndicator();
},
removeParticipantContainer(id) {
// Unlock large video
if (this.getPinnedId() === id) {
logger.info("Focused video owner has left the conference");
logger.info('Focused video owner has left the conference');
this.pinParticipant(null);
}
if (currentDominantSpeaker === id) {
logger.info("Dominant speaker has left the conference");
logger.info('Dominant speaker has left the conference');
currentDominantSpeaker = null;
}
var remoteVideo = remoteVideos[id];
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
// Remove remote video
logger.info("Removing remote video: " + id);
logger.info(`Removing remote video: ${id}`);
delete remoteVideos[id];
remoteVideo.remove();
} else {
logger.warn("No remote video for " + id);
logger.warn(`No remote video for ${id}`);
}
VideoLayout.resizeThumbnails();
@ -843,12 +859,14 @@ var VideoLayout = {
return;
}
logger.info("Peer video type changed: ", id, newVideoType);
logger.info('Peer video type changed: ', id, newVideoType);
let smallVideo;
var smallVideo;
if (APP.conference.isLocalId(id)) {
if (!localVideoThumbnail) {
logger.warn("Local video not ready yet");
logger.warn('Local video not ready yet');
return;
}
smallVideo = localVideoThumbnail;
@ -881,8 +899,8 @@ var VideoLayout = {
}
// Calculate available width and height.
let availableHeight = window.innerHeight;
let availableWidth = UIUtil.getAvailableVideoWidth();
const availableHeight = window.innerHeight;
const availableWidth = UIUtil.getAvailableVideoWidth();
if (availableWidth < 0 || availableHeight < 0) {
return;
@ -906,18 +924,20 @@ var VideoLayout = {
getSmallVideo(id) {
if (APP.conference.isLocalId(id)) {
return localVideoThumbnail;
} else {
return remoteVideos[id];
}
return remoteVideos[id];
},
changeUserAvatar(id, avatarUrl) {
var smallVideo = VideoLayout.getSmallVideo(id);
const smallVideo = VideoLayout.getSmallVideo(id);
if (smallVideo) {
smallVideo.avatarChanged(avatarUrl);
} else {
logger.warn(
"Missed avatar update - no small video yet for " + id
`Missed avatar update - no small video yet for ${id}`
);
}
if (this.isCurrentlyOnLarge(id)) {
@ -998,40 +1018,45 @@ var VideoLayout = {
// FIXME it might be possible to get rid of 'forceUpdate' argument
if (currentStreamId !== newStreamId) {
logger.debug('Enforcing large video update for stream change');
forceUpdate = true;
forceUpdate = true; // eslint-disable-line no-param-reassign
}
}
if (!isOnLarge || forceUpdate) {
let videoType = this.getRemoteVideoType(id);
const videoType = this.getRemoteVideoType(id);
// FIXME video type is not the same thing as container type
if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) {
eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
}
let oldSmallVideo;
if (currentId) {
oldSmallVideo = this.getSmallVideo(currentId);
}
smallVideo.waitForResolutionChange();
if (oldSmallVideo)
if (oldSmallVideo) {
oldSmallVideo.waitForResolutionChange();
}
largeVideo.updateLargeVideo(
id,
smallVideo.videoStream,
videoType
).then(function() {
).then(() => {
// update current small video and the old one
smallVideo.updateView();
oldSmallVideo && oldSmallVideo.updateView();
}, function () {
}, () => {
// use clicked other video during update, nothing to do.
});
} else if (currentId) {
let currentSmallVideo = this.getSmallVideo(currentId);
const currentSmallVideo = this.getSmallVideo(currentId);
currentSmallVideo.updateView();
}
},
@ -1052,33 +1077,40 @@ var VideoLayout = {
return Promise.reject();
}
let isVisible = this.isLargeContainerTypeVisible(type);
const isVisible = this.isLargeContainerTypeVisible(type);
if (isVisible === show) {
return Promise.resolve();
}
let currentId = largeVideo.id;
const currentId = largeVideo.id;
let oldSmallVideo;
if (currentId) {
var oldSmallVideo = this.getSmallVideo(currentId);
oldSmallVideo = this.getSmallVideo(currentId);
}
let containerTypeToShow = type;
// if we are hiding a container and there is focusedVideo
// (pinned remote video) use its video type,
// if not then use default type - large video
if (!show) {
const pinnedId = this.getPinnedId();
if(pinnedId)
if (pinnedId) {
containerTypeToShow = this.getRemoteVideoType(pinnedId);
else
} else {
containerTypeToShow = VIDEO_CONTAINER_TYPE;
}
}
return largeVideo.showContainer(containerTypeToShow)
.then(() => {
if(oldSmallVideo)
if (oldSmallVideo) {
oldSmallVideo && oldSmallVideo.updateView();
}
});
},
@ -1110,13 +1142,15 @@ var VideoLayout = {
this.localFlipX = val;
},
getEventEmitter() {return eventEmitter;},
getEventEmitter() {
return eventEmitter;
},
/**
* Handles user's features changes.
*/
onUserFeaturesChanged(user) {
let video = this.getSmallVideo(user.getId());
const video = this.getSmallVideo(user.getId());
if (!video) {
return;
@ -1153,6 +1187,7 @@ var VideoLayout = {
getRemoteVideosCount() {
return Object.keys(remoteVideos).length;
},
/**
* Sets the remote control active status for a remote participant.
*
@ -1176,4 +1211,40 @@ var VideoLayout = {
}
};
/**
* On contact list item clicked.
*/
function onContactClicked(id) {
if (APP.conference.isLocalId(id)) {
$('#localVideoContainer').click();
return;
}
const remoteVideo = remoteVideos[id];
if (remoteVideo && remoteVideo.hasVideo()) {
// It is not always the case that a videoThumb exists (if there is
// no actual video).
if (remoteVideo.hasVideoStarted()) {
// We have a video src, great! Let's update the large video
// now.
VideoLayout.handleVideoThumbClicked(id);
} else {
// If we don't have a video src for jid, there's absolutely
// no point in calling handleVideoThumbClicked; Quite
// simply, it won't work because it needs an src to attach
// to the large video.
//
// Instead, we trigger the pinned endpoint changed event to
// let the bridge adjust its lastN set for myjid and store
// the pinned user in the lastNPickupId variable to be
// picked up later by the lastN changed event handler.
// eslint-disable-next-line no-invalid-this
this.pinParticipant(remoteVideo.id);
}
}
}
export default VideoLayout;

8
modules/URL/ConferenceUrl.js
View File

@ -1,4 +1,4 @@
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
/**
* The modules stores information about the URL used to start the conference and
@ -24,9 +24,9 @@ export default class ConferenceUrl {
* from the sample URL.
*/
constructor(location) {
logger.info("Stored original conference URL: " + location.href);
logger.info(`Stored original conference URL: ${location.href}`);
logger.info(
"Conference URL for invites: " + location.protocol + "//"
+ location.host + location.pathname);
`Conference URL for invites: ${location.protocol}//${
location.host}${location.pathname}`);
}
}

92
modules/devices/mediaDeviceHelper.js
View File

@ -1,8 +1,8 @@
/* global APP, JitsiMeetJS */
let currentAudioInputDevices,
currentVideoInputDevices,
currentAudioOutputDevices;
currentAudioOutputDevices,
currentVideoInputDevices;
/**
* Determines if currently selected audio output device should be changed after
@ -16,14 +16,14 @@ function getNewAudioOutputDevice(newDevices) {
return;
}
let selectedAudioOutputDeviceId = APP.settings.getAudioOutputDeviceId();
let availableAudioOutputDevices = newDevices.filter(
const selectedAudioOutputDeviceId = APP.settings.getAudioOutputDeviceId();
const availableAudioOutputDevices = newDevices.filter(
d => d.kind === 'audiooutput');
// Switch to 'default' audio output device if we don't have the selected one
// available anymore.
if (selectedAudioOutputDeviceId !== 'default' &&
!availableAudioOutputDevices.find(d =>
if (selectedAudioOutputDeviceId !== 'default'
&& !availableAudioOutputDevices.find(d =>
d.deviceId === selectedAudioOutputDeviceId)) {
return 'default';
}
@ -38,10 +38,10 @@ function getNewAudioOutputDevice(newDevices) {
* if audio input device should not be changed.
*/
function getNewAudioInputDevice(newDevices, localAudio) {
let availableAudioInputDevices = newDevices.filter(
const availableAudioInputDevices = newDevices.filter(
d => d.kind === 'audioinput');
let selectedAudioInputDeviceId = APP.settings.getMicDeviceId();
let selectedAudioInputDevice = availableAudioInputDevices.find(
const selectedAudioInputDeviceId = APP.settings.getMicDeviceId();
const selectedAudioInputDevice = availableAudioInputDevices.find(
d => d.deviceId === selectedAudioInputDeviceId);
// Here we handle case when no device was initially plugged, but
@ -51,20 +51,19 @@ function getNewAudioInputDevice(newDevices, localAudio) {
// If we have new audio device and permission to use it was granted
// (label is not an empty string), then we will try to use the first
// available device.
if (availableAudioInputDevices.length &&
availableAudioInputDevices[0].label !== '') {
if (availableAudioInputDevices.length
&& availableAudioInputDevices[0].label !== '') {
return availableAudioInputDevices[0].deviceId;
}
} else {
} else if (selectedAudioInputDevice
&& selectedAudioInputDeviceId !== localAudio.getDeviceId()) {
// And here we handle case when we already have some device working,
// but we plug-in a "preferred" (previously selected in settings, stored
// in local storage) device.
if (selectedAudioInputDevice &&
selectedAudioInputDeviceId !== localAudio.getDeviceId()) {
return selectedAudioInputDeviceId;
}
}
}
/**
* Determines if currently selected video input device should be changed after
@ -75,10 +74,10 @@ function getNewAudioInputDevice(newDevices, localAudio) {
* if video input device should not be changed.
*/
function getNewVideoInputDevice(newDevices, localVideo) {
let availableVideoInputDevices = newDevices.filter(
const availableVideoInputDevices = newDevices.filter(
d => d.kind === 'videoinput');
let selectedVideoInputDeviceId = APP.settings.getCameraDeviceId();
let selectedVideoInputDevice = availableVideoInputDevices.find(
const selectedVideoInputDeviceId = APP.settings.getCameraDeviceId();
const selectedVideoInputDevice = availableVideoInputDevices.find(
d => d.deviceId === selectedVideoInputDeviceId);
// Here we handle case when no video input device was initially plugged,
@ -88,20 +87,18 @@ function getNewVideoInputDevice(newDevices, localVideo) {
// If we have new video device and permission to use it was granted
// (label is not an empty string), then we will try to use the first
// available device.
if (availableVideoInputDevices.length &&
availableVideoInputDevices[0].label !== '') {
if (availableVideoInputDevices.length
&& availableVideoInputDevices[0].label !== '') {
return availableVideoInputDevices[0].deviceId;
}
} else {
} else if (selectedVideoInputDevice
&& selectedVideoInputDeviceId !== localVideo.getDeviceId()) {
// And here we handle case when we already have some device working,
// but we plug-in a "preferred" (previously selected in settings, stored
// in local storage) device.
if (selectedVideoInputDevice &&
selectedVideoInputDeviceId !== localVideo.getDeviceId()) {
return selectedVideoInputDeviceId;
}
}
}
export default {
/**
@ -113,19 +110,21 @@ export default {
getDevicesFromListByKind(devices, kind) {
return devices.filter(d => d.kind === kind);
},
/**
* Stores lists of current 'audioinput', 'videoinput' and 'audiooutput'
* devices.
* @param {MediaDeviceInfo[]} devices
*/
setCurrentMediaDevices(devices) {
currentAudioInputDevices =
this.getDevicesFromListByKind(devices, 'audioinput');
currentVideoInputDevices =
this.getDevicesFromListByKind(devices, 'videoinput');
currentAudioOutputDevices =
this.getDevicesFromListByKind(devices, 'audiooutput');
currentAudioInputDevices
= this.getDevicesFromListByKind(devices, 'audioinput');
currentVideoInputDevices
= this.getDevicesFromListByKind(devices, 'videoinput');
currentAudioOutputDevices
= this.getDevicesFromListByKind(devices, 'audiooutput');
},
/**
* Returns lists of current 'audioinput', 'videoinput' and 'audiooutput'
* devices.
@ -142,6 +141,7 @@ export default {
audiooutput: currentAudioOutputDevices
};
},
/**
* Determines if currently selected media devices should be changed after
* list of available devices has been changed.
@ -155,18 +155,19 @@ export default {
* audiooutput: (string|undefined)
* }}
*/
getNewMediaDevicesAfterDeviceListChanged(
getNewMediaDevicesAfterDeviceListChanged( // eslint-disable-line max-params
newDevices,
isSharingScreen,
localVideo,
localAudio) {
return {
audioinput: getNewAudioInputDevice(newDevices, localAudio),
videoinput: !isSharingScreen &&
getNewVideoInputDevice(newDevices, localVideo),
videoinput: !isSharingScreen
&& getNewVideoInputDevice(newDevices, localVideo),
audiooutput: getNewAudioOutputDevice(newDevices)
};
},
/**
* Tries to create new local tracks for new devices obtained after device
* list changed. Shows error dialog in case of failures.
@ -181,17 +182,18 @@ export default {
micDeviceId) {
let audioTrackError;
let videoTrackError;
let audioRequested = !!micDeviceId;
let videoRequested = !!cameraDeviceId;
const audioRequested = Boolean(micDeviceId);
const videoRequested = Boolean(cameraDeviceId);
if (audioRequested && videoRequested) {
// First we try to create both audio and video tracks together.
return (
createLocalTracks({
devices: [ 'audio', 'video' ],
cameraDeviceId: cameraDeviceId,
micDeviceId: micDeviceId
cameraDeviceId,
micDeviceId
})
// If we fail to do this, try to create them separately.
.catch(() => Promise.all([
createAudioTrack(false).then(([ stream ]) => stream),
@ -212,34 +214,42 @@ export default {
return createVideoTrack();
} else if (audioRequested && !videoRequested) {
return createAudioTrack();
} else {
return Promise.resolve([]);
}
return Promise.resolve([]);
/**
*
*/
function createAudioTrack(showError) {
return (
createLocalTracks({
devices: [ 'audio' ],
cameraDeviceId: null,
micDeviceId: micDeviceId
micDeviceId
})
.catch(err => {
audioTrackError = err;
showError && APP.UI.showMicErrorNotification(err);
return [];
}));
}
/**
*
*/
function createVideoTrack(showError) {
return (
createLocalTracks({
devices: [ 'video' ],
cameraDeviceId: cameraDeviceId,
cameraDeviceId,
micDeviceId: null
})
.catch(err => {
videoTrackError = err;
showError && APP.UI.showCameraErrorNotification(err);
return [];
}));
}

210
modules/keyboardshortcut/keyboardshortcut.js
View File

@ -11,47 +11,6 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
*/
let keyboardShortcutDialog = null;
/**
* Initialise global shortcuts.
* Global shortcuts are shortcuts for features that don't have a button or
* link associated with the action. In other words they represent actions
* triggered _only_ with a shortcut.
*/
function initGlobalShortcuts() {
KeyboardShortcut.registerShortcut("ESCAPE", null, function() {
showKeyboardShortcutsPanel(false);
});
KeyboardShortcut.registerShortcut("?", null, function() {
sendEvent("shortcut.shortcut.help");
showKeyboardShortcutsPanel(true);
}, "keyboardShortcuts.toggleShortcuts");
// register SPACE shortcut in two steps to insure visibility of help message
KeyboardShortcut.registerShortcut(" ", null, function() {
sendEvent("shortcut.talk.clicked");
logger.log('Talk shortcut pressed');
APP.conference.muteAudio(true);
});
KeyboardShortcut._addShortcutToHelp("SPACE","keyboardShortcuts.pushToTalk");
if(!interfaceConfig.filmStripOnly) {
KeyboardShortcut.registerShortcut("T", null, () => {
sendEvent("shortcut.speakerStats.clicked");
APP.store.dispatch(toggleDialog(SpeakerStats, {
conference: APP.conference
}));
}, "keyboardShortcuts.showSpeakerStats");
}
/**
* FIXME: Currently focus keys are directly implemented below in onkeyup.
* They should be moved to the SmallVideo instead.
*/
KeyboardShortcut._addShortcutToHelp("0", "keyboardShortcuts.focusLocal");
KeyboardShortcut._addShortcutToHelp("1-9", "keyboardShortcuts.focusRemote");
}
/**
* Shows or hides the keyboard shortcuts dialog.
* @param {boolean} show whether to show or hide the dialog
@ -60,8 +19,8 @@ function showKeyboardShortcutsPanel(show) {
if (show
&& !APP.UI.messageHandler.isDialogOpened()
&& keyboardShortcutDialog === null) {
let msg = $('#keyboard-shortcuts').html();
let buttons = { Close: true };
const msg = $('#keyboard-shortcuts').html();
const buttons = { Close: true };
keyboardShortcutDialog = APP.UI.messageHandler.openDialog(
'keyboardShortcuts.keyboardShortcuts', msg, true, buttons);
@ -75,7 +34,7 @@ function showKeyboardShortcutsPanel(show) {
* Map of shortcuts. When a shortcut is registered it enters the mapping.
* @type {{}}
*/
let _shortcuts = {};
const _shortcuts = {};
/**
* True if the keyboard shortcuts are enabled and false if not.
@ -87,43 +46,42 @@ let enabled = true;
* Maps keycode to character, id of popover for given function and function.
*/
const KeyboardShortcut = {
init: function () {
initGlobalShortcuts();
init() {
this._initGlobalShortcuts();
var self = this;
window.onkeyup = function(e) {
window.onkeyup = e => {
if (!enabled) {
return;
}
var key = self._getKeyboardKey(e).toUpperCase();
var num = parseInt(key, 10);
if(!($(":focus").is("input[type=text]") ||
$(":focus").is("input[type=password]") ||
$(":focus").is("textarea"))) {
const key = this._getKeyboardKey(e).toUpperCase();
const num = parseInt(key, 10);
if (!($(':focus').is('input[type=text]')
|| $(':focus').is('input[type=password]')
|| $(':focus').is('textarea'))) {
if (_shortcuts.hasOwnProperty(key)) {
_shortcuts[key].function(e);
}
else if (!isNaN(num) && num >= 0 && num <= 9) {
} else if (!isNaN(num) && num >= 0 && num <= 9) {
APP.UI.clickOnVideo(num);
}
// esc while the smileys are visible hides them
} else if (key === "ESCAPE" &&
$('#smileysContainer').is(':visible')) {
} else if (key === 'ESCAPE'
&& $('#smileysContainer').is(':visible')) {
APP.UI.toggleSmileys();
}
};
window.onkeydown = function(e) {
window.onkeydown = e => {
if (!enabled) {
return;
}
if(!($(":focus").is("input[type=text]") ||
$(":focus").is("input[type=password]") ||
$(":focus").is("textarea"))) {
var key = self._getKeyboardKey(e).toUpperCase();
if(key === " ") {
if (!($(':focus').is('input[type=text]')
|| $(':focus').is('input[type=password]')
|| $(':focus').is('textarea'))) {
if (this._getKeyboardKey(e).toUpperCase() === ' ') {
if (APP.conference.isLocalAudioMuted()) {
sendEvent("shortcut.talk.released");
sendEvent('shortcut.talk.released');
logger.log('Talk shortcut released');
APP.conference.muteAudio(false);
}
@ -136,7 +94,7 @@ const KeyboardShortcut = {
* Enables/Disables the keyboard shortcuts.
* @param {boolean} value - the new value.
*/
enable: function (value) {
enable(value) {
enabled = value;
},
@ -151,19 +109,20 @@ const KeyboardShortcut = {
* @param helpDescription the description of the shortcut that would appear
* in the help menu
*/
registerShortcut(
registerShortcut(// eslint-disable-line max-params
shortcutChar,
shortcutAttr,
exec,
helpDescription) {
_shortcuts[shortcutChar] = {
character: shortcutChar,
shortcutAttr: shortcutAttr,
shortcutAttr,
function: exec
};
if (helpDescription)
if (helpDescription) {
this._addShortcutToHelp(shortcutChar, helpDescription);
}
},
/**
@ -172,7 +131,7 @@ const KeyboardShortcut = {
* @param shortcutChar unregisters the given shortcut, which means it will
* no longer be usable
*/
unregisterShortcut: function(shortcutChar) {
unregisterShortcut(shortcutChar) {
_shortcuts.remove(shortcutChar);
this._removeShortcutFromHelp(shortcutChar);
@ -186,44 +145,47 @@ const KeyboardShortcut = {
* or an empty string if the shortcutAttr is null, an empty string or not
* found in the shortcut mapping
*/
getShortcutTooltip: function (shortcutAttr) {
if (typeof shortcutAttr === "string" && shortcutAttr.length > 0) {
for (var key in _shortcuts) {
getShortcutTooltip(shortcutAttr) {
if (typeof shortcutAttr === 'string' && shortcutAttr.length > 0) {
for (const key in _shortcuts) {
if (_shortcuts.hasOwnProperty(key)
&& _shortcuts[key].shortcutAttr
&& _shortcuts[key].shortcutAttr === shortcutAttr) {
return " (" + _shortcuts[key].character + ")";
return ` (${_shortcuts[key].character})`;
}
}
}
return "";
return '';
},
/**
* @param e a KeyboardEvent
* @returns {string} e.key or something close if not supported
*/
_getKeyboardKey: function (e) {
if (typeof e.key === "string") {
_getKeyboardKey(e) {
if (typeof e.key === 'string') {
return e.key;
}
if (e.type === "keypress"
if (e.type === 'keypress'
&& ((e.which >= 32 && e.which <= 126)
|| (e.which >= 160 && e.which <= 255))) {
return String.fromCharCode(e.which);
}
// try to fallback (0-9A-Za-z and QWERTY keyboard)
switch (e.which) {
case 27:
return "Escape";
return 'Escape';
case 191:
return e.shiftKey ? "?" : "/";
return e.shiftKey ? '?' : '/';
}
if (e.shiftKey || e.type === "keypress") {
if (e.shiftKey || e.type === 'keypress') {
return String.fromCharCode(e.which);
} else {
return String.fromCharCode(e.which).toLowerCase();
}
return String.fromCharCode(e.which).toLowerCase();
},
/**
@ -233,36 +195,41 @@ const KeyboardShortcut = {
* @param shortcutDescriptionKey the description of the shortcut
* @private
*/
_addShortcutToHelp: function (shortcutChar, shortcutDescriptionKey) {
_addShortcutToHelp(shortcutChar, shortcutDescriptionKey) {
const listElement = document.createElement('li');
const itemClass = 'shortcuts-list__item';
let listElement = document.createElement("li");
let itemClass = 'shortcuts-list__item';
listElement.className = itemClass;
listElement.id = shortcutChar;
let spanElement = document.createElement("span");
spanElement.className = "item-action";
const spanElement = document.createElement('span');
spanElement.className = 'item-action';
const kbdElement = document.createElement('kbd');
const classes = 'aui-label regular-key';
let kbdElement = document.createElement("kbd");
let classes = 'aui-label regular-key';
kbdElement.className = classes;
kbdElement.innerHTML = shortcutChar;
spanElement.appendChild(kbdElement);
let descriptionElement = document.createElement("span");
let descriptionClass = "shortcuts-list__description";
const descriptionElement = document.createElement('span');
const descriptionClass = 'shortcuts-list__description';
descriptionElement.className = descriptionClass;
descriptionElement.setAttribute("data-i18n", shortcutDescriptionKey);
descriptionElement.setAttribute('data-i18n', shortcutDescriptionKey);
APP.translation.translateElement($(descriptionElement));
listElement.appendChild(spanElement);
listElement.appendChild(descriptionElement);
let parentListElement
= document.getElementById("keyboard-shortcuts-list");
const parentListElement
= document.getElementById('keyboard-shortcuts-list');
if (parentListElement)
if (parentListElement) {
parentListElement.appendChild(listElement);
}
},
/**
@ -270,15 +237,58 @@ const KeyboardShortcut = {
* help dialog
* @private
*/
_removeShortcutFromHelp: function (shortcutChar) {
var parentListElement
= document.getElementById("keyboard-shortcuts-list");
_removeShortcutFromHelp(shortcutChar) {
const parentListElement
= document.getElementById('keyboard-shortcuts-list');
var shortcutElement = document.getElementById(shortcutChar);
const shortcutElement = document.getElementById(shortcutChar);
if (shortcutElement)
if (shortcutElement) {
parentListElement.removeChild(shortcutElement);
}
},
/**
* Initialise global shortcuts.
* Global shortcuts are shortcuts for features that don't have a button or
* link associated with the action. In other words they represent actions
* triggered _only_ with a shortcut.
*/
_initGlobalShortcuts() {
this.registerShortcut('ESCAPE', null, () => {
showKeyboardShortcutsPanel(false);
});
this.registerShortcut('?', null, () => {
sendEvent('shortcut.shortcut.help');
showKeyboardShortcutsPanel(true);
}, 'keyboardShortcuts.toggleShortcuts');
// register SPACE shortcut in two steps to insure visibility of help
// message
this.registerShortcut(' ', null, () => {
sendEvent('shortcut.talk.clicked');
logger.log('Talk shortcut pressed');
APP.conference.muteAudio(true);
});
this._addShortcutToHelp('SPACE', 'keyboardShortcuts.pushToTalk');
if (!interfaceConfig.filmStripOnly) {
this.registerShortcut('T', null, () => {
sendEvent('shortcut.speakerStats.clicked');
APP.store.dispatch(toggleDialog(SpeakerStats, {
conference: APP.conference
}));
}, 'keyboardShortcuts.showSpeakerStats');
}
/**
* FIXME: Currently focus keys are directly implemented below in
* onkeyup. They should be moved to the SmallVideo instead.
*/
this._addShortcutToHelp('0', 'keyboardShortcuts.focusLocal');
this._addShortcutToHelp('1-9', 'keyboardShortcuts.focusRemote');
}
};
export default KeyboardShortcut;

119
modules/keycode/keycode.js
View File

@ -5,74 +5,76 @@
* @enum {string}
*/
export const KEYS = {
BACKSPACE: "backspace" ,
DELETE : "delete",
RETURN : "enter",
TAB : "tab",
ESCAPE : "escape",
UP : "up",
DOWN : "down",
RIGHT : "right",
LEFT : "left",
HOME : "home",
END : "end",
PAGEUP : "pageup",
PAGEDOWN : "pagedown",
BACKSPACE: 'backspace',
DELETE: 'delete',
RETURN: 'enter',
TAB: 'tab',
ESCAPE: 'escape',
UP: 'up',
DOWN: 'down',
RIGHT: 'right',
LEFT: 'left',
HOME: 'home',
END: 'end',
PAGEUP: 'pageup',
PAGEDOWN: 'pagedown',
F1 : "f1",
F2 : "f2",
F3 : "f3",
F4 : "f4",
F5 : "f5",
F6 : "f6",
F7 : "f7",
F8 : "f8",
F9 : "f9",
F10 : "f10",
F11 : "f11",
F12 : "f12",
META : "command",
CMD_L: "command",
CMD_R: "command",
ALT : "alt",
CONTROL : "control",
SHIFT : "shift",
CAPS_LOCK: "caps_lock", //not supported by robotjs
SPACE : "space",
PRINTSCREEN : "printscreen",
INSERT : "insert",
F1: 'f1',
F2: 'f2',
F3: 'f3',
F4: 'f4',
F5: 'f5',
F6: 'f6',
F7: 'f7',
F8: 'f8',
F9: 'f9',
F10: 'f10',
F11: 'f11',
F12: 'f12',
META: 'command',
CMD_L: 'command',
CMD_R: 'command',
ALT: 'alt',
CONTROL: 'control',
SHIFT: 'shift',
CAPS_LOCK: 'caps_lock', // not supported by robotjs
SPACE: 'space',
PRINTSCREEN: 'printscreen',
INSERT: 'insert',
NUMPAD_0 : "numpad_0",
NUMPAD_1 : "numpad_1",
NUMPAD_2 : "numpad_2",
NUMPAD_3 : "numpad_3",
NUMPAD_4 : "numpad_4",
NUMPAD_5 : "numpad_5",
NUMPAD_6 : "numpad_6",
NUMPAD_7 : "numpad_7",
NUMPAD_8 : "numpad_8",
NUMPAD_9 : "numpad_9",
NUMPAD_0: 'numpad_0',
NUMPAD_1: 'numpad_1',
NUMPAD_2: 'numpad_2',
NUMPAD_3: 'numpad_3',
NUMPAD_4: 'numpad_4',
NUMPAD_5: 'numpad_5',
NUMPAD_6: 'numpad_6',
NUMPAD_7: 'numpad_7',
NUMPAD_8: 'numpad_8',
NUMPAD_9: 'numpad_9',
COMMA: ",",
COMMA: ',',
PERIOD: ".",
SEMICOLON: ";",
QUOTE: "'",
BRACKET_LEFT: "[",
BRACKET_RIGHT: "]",
BACKQUOTE: "`",
BACKSLASH: "\\",
MINUS: "-",
EQUAL: "=",
SLASH: "/"
PERIOD: '.',
SEMICOLON: ';',
QUOTE: '\'',
BRACKET_LEFT: '[',
BRACKET_RIGHT: ']',
BACKQUOTE: '`',
BACKSLASH: '\\',
MINUS: '-',
EQUAL: '=',
SLASH: '/'
};
/* eslint-disable max-len */
/**
* Mapping between the key codes and keys deined in KEYS.
* The mappings are based on
* https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Specifications
*/
let keyCodeToKey = {
/* eslint-enable max-len */
const keyCodeToKey = {
8: KEYS.BACKSPACE,
9: KEYS.TAB,
13: KEYS.RETURN,
@ -149,7 +151,8 @@ for(let i = 0; i < 10; i++) {
* Generate codes for letter keys (a-z)
*/
for (let i = 0; i < 26; i++) {
let keyCode = i + 65;
const keyCode = i + 65;
keyCodeToKey[keyCode] = String.fromCharCode(keyCode).toLowerCase();
}

10
modules/recorder/Recorder.js
View File

@ -3,24 +3,28 @@
/**
* The (name of the) command which transports the recorder info.
*/
const _USER_INFO_COMMAND = "userinfo";
const _USER_INFO_COMMAND = 'userinfo';
/**
* The Recorder class is meant to take care of recorder related presence
* commands.
*/
class Recorder {
/**
* Creates new recorder instance.
*/
constructor() {
if (config.iAmRecorder)
if (config.iAmRecorder) {
this._sendRecorderInfo();
}
}
/**
* Sends the information that this is a recorder through the presence.
* @private
*/
_sendRecorderInfo() {
var commands = APP.conference.commands;
const commands = APP.conference.commands;
// XXX The "Follow Me" command represents a snapshot of all states
// which are to be followed so don't forget to removeCommand before

90
modules/settings/Settings.js
View File

@ -1,5 +1,5 @@
/* global JitsiMeetJS */
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
import UIUtil from '../UI/util/UIUtil';
import jitsiLocalStorage from '../util/JitsiLocalStorage';
@ -7,34 +7,35 @@ import { randomHexString } from '../../react/features/base/util';
let avatarUrl = '';
let email = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("email") || '');
let avatarId = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("avatarId") || '');
let email = UIUtil.unescapeHtml(jitsiLocalStorage.getItem('email') || '');
let avatarId = UIUtil.unescapeHtml(jitsiLocalStorage.getItem('avatarId') || '');
if (!avatarId) {
// if there is no avatar id, we generate a unique one and use it forever
avatarId = randomHexString(32);
jitsiLocalStorage.setItem("avatarId", avatarId);
jitsiLocalStorage.setItem('avatarId', avatarId);
}
let localFlipX = JSON.parse(jitsiLocalStorage.getItem("localFlipX") || true);
let localFlipX = JSON.parse(jitsiLocalStorage.getItem('localFlipX') || true);
let displayName = UIUtil.unescapeHtml(
jitsiLocalStorage.getItem("displayname") || '');
let cameraDeviceId = jitsiLocalStorage.getItem("cameraDeviceId") || '';
let micDeviceId = jitsiLocalStorage.getItem("micDeviceId") || '';
jitsiLocalStorage.getItem('displayname') || '');
let cameraDeviceId = jitsiLocalStorage.getItem('cameraDeviceId') || '';
let micDeviceId = jitsiLocalStorage.getItem('micDeviceId') || '';
let welcomePageDisabled = JSON.parse(
jitsiLocalStorage.getItem("welcomePageDisabled") || false);
jitsiLocalStorage.getItem('welcomePageDisabled') || false);
// Currently audio output device change is supported only in Chrome and
// default output always has 'default' device ID
let audioOutputDeviceId = jitsiLocalStorage.getItem("audioOutputDeviceId")
const audioOutputDeviceId = jitsiLocalStorage.getItem('audioOutputDeviceId')
|| 'default';
if (audioOutputDeviceId !==
JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
if (audioOutputDeviceId
!== JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
JitsiMeetJS.mediaDevices.setAudioOutputDevice(audioOutputDeviceId)
.catch((ex) => {
logger.warn('Failed to set audio output device from local ' +
'storage. Default audio output device will be used' +
'instead.', ex);
.catch(ex => {
logger.warn('Failed to set audio output device from local '
+ 'storage. Default audio output device will be used'
+ 'instead.', ex);
});
}
@ -49,16 +50,17 @@ export default {
setDisplayName(newDisplayName, disableLocalStore) {
displayName = newDisplayName;
if (!disableLocalStore)
jitsiLocalStorage.setItem("displayname",
if (!disableLocalStore) {
jitsiLocalStorage.setItem('displayname',
UIUtil.escapeHtml(displayName));
}
},
/**
* Returns the escaped display name currently used by the user
* @returns {string} currently valid user display name.
*/
getDisplayName: function () {
getDisplayName() {
return displayName;
},
@ -67,18 +69,19 @@ export default {
* @param {string} newEmail new email for the local user
* @param {boolean} disableLocalStore disables local store the email
*/
setEmail: function (newEmail, disableLocalStore) {
setEmail(newEmail, disableLocalStore) {
email = newEmail;
if (!disableLocalStore)
jitsiLocalStorage.setItem("email", UIUtil.escapeHtml(newEmail));
if (!disableLocalStore) {
jitsiLocalStorage.setItem('email', UIUtil.escapeHtml(newEmail));
}
},
/**
* Returns email address of the local user.
* @returns {string} email
*/
getEmail: function () {
getEmail() {
return email;
},
@ -86,7 +89,7 @@ export default {
* Returns avatar id of the local user.
* @returns {string} avatar id
*/
getAvatarId: function () {
getAvatarId() {
return avatarId;
},
@ -94,7 +97,7 @@ export default {
* Sets new avatarUrl for local user and saves it to the local storage.
* @param {string} newAvatarUrl new avatarUrl for the local user
*/
setAvatarUrl: function (newAvatarUrl) {
setAvatarUrl(newAvatarUrl) {
avatarUrl = newAvatarUrl;
},
@ -102,7 +105,7 @@ export default {
* Returns avatarUrl address of the local user.
* @returns {string} avatarUrl
*/
getAvatarUrl: function () {
getAvatarUrl() {
return avatarUrl;
},
@ -110,16 +113,16 @@ export default {
* Sets new flipX state of local video and saves it to the local storage.
* @param {string} val flipX state of local video
*/
setLocalFlipX: function (val) {
setLocalFlipX(val) {
localFlipX = val;
jitsiLocalStorage.setItem("localFlipX", val);
jitsiLocalStorage.setItem('localFlipX', val);
},
/**
* Returns flipX state of local video.
* @returns {string} flipX
*/
getLocalFlipX: function () {
getLocalFlipX() {
return localFlipX;
},
@ -128,19 +131,21 @@ export default {
* Empty string stands for default device.
* @returns {String}
*/
getCameraDeviceId: function () {
getCameraDeviceId() {
return cameraDeviceId;
},
/**
* Set device id of the camera which is currently in use.
* Empty string stands for default device.
* @param {string} newId new camera device id
* @param {boolean} whether we need to store the value
*/
setCameraDeviceId: function (newId, store) {
setCameraDeviceId(newId, store) {
cameraDeviceId = newId;
if (store)
jitsiLocalStorage.setItem("cameraDeviceId", newId);
if (store) {
jitsiLocalStorage.setItem('cameraDeviceId', newId);
}
},
/**
@ -148,19 +153,21 @@ export default {
* Empty string stands for default device.
* @returns {String}
*/
getMicDeviceId: function () {
getMicDeviceId() {
return micDeviceId;
},
/**
* Set device id of the microphone which is currently in use.
* Empty string stands for default device.
* @param {string} newId new microphone device id
* @param {boolean} whether we need to store the value
*/
setMicDeviceId: function (newId, store) {
setMicDeviceId(newId, store) {
micDeviceId = newId;
if (store)
jitsiLocalStorage.setItem("micDeviceId", newId);
if (store) {
jitsiLocalStorage.setItem('micDeviceId', newId);
}
},
/**
@ -168,19 +175,20 @@ export default {
* Empty string stands for default device.
* @returns {String}
*/
getAudioOutputDeviceId: function () {
getAudioOutputDeviceId() {
return JitsiMeetJS.mediaDevices.getAudioOutputDevice();
},
/**
* Set device id of the audio output device which is currently in use.
* Empty string stands for default device.
* @param {string} newId='default' - new audio output device id
* @returns {Promise}
*/
setAudioOutputDeviceId: function (newId = 'default') {
setAudioOutputDeviceId(newId = 'default') {
return JitsiMeetJS.mediaDevices.setAudioOutputDevice(newId)
.then(() =>
jitsiLocalStorage.setItem("audioOutputDeviceId", newId));
jitsiLocalStorage.setItem('audioOutputDeviceId', newId));
},
/**
@ -197,6 +205,6 @@ export default {
*/
setWelcomePageEnabled(enabled) {
welcomePageDisabled = !enabled;
jitsiLocalStorage.setItem("welcomePageDisabled", welcomePageDisabled);
jitsiLocalStorage.setItem('welcomePageDisabled', welcomePageDisabled);
}
};

26
modules/translation/translation.js
View File

@ -16,11 +16,20 @@ function _onI18nInitialized() {
$('[data-i18n]').localize();
}
/**
*
*/
class Translation {
/**
*
*/
addLanguageChangedListener(listener: Function) {
i18next.on('languageChanged', listener);
}
/**
*
*/
generateTranslationHTML(key: string, options: Object) {
const optAttr
= options ? ` data-i18n-options='${JSON.stringify(options)}'` : '';
@ -31,23 +40,36 @@ class Translation {
return `<span data-i18n="${key}"${optAttr}>${text}</span>`;
}
/**
*
*/
getCurrentLanguage() {
return i18next.lng();
}
/**
*
*/
init() {
jqueryI18next.init(i18next, $, { useOptionsAttr: true });
if (i18next.isInitialized)
if (i18next.isInitialized) {
_onI18nInitialized();
else
} else {
i18next.on('initialized', _onI18nInitialized);
}
}
/**
*
*/
setLanguage(language: string = DEFAULT_LANGUAGE) {
i18next.setLng(language, {}, _onI18nInitialized);
}
/**
*
*/
translateElement(selector: Object, options: Object) {
// XXX i18next expects undefined if options are missing.
selector.localize(options ? options : undefined);

1
modules/transport/PostMessageTransportBackend.js
View File

@ -65,6 +65,7 @@ export default class PostMessageTransportBackend {
* transport.
*/
constructor({ enableLegacyFormat, postisOptions } = {}) {
// eslint-disable-next-line new-cap
this.postis = Postis({
...DEFAULT_POSTIS_OPTIONS,
...postisOptions

2
modules/util/JitsiLocalStorage.js
View File

@ -6,6 +6,7 @@ const logger = Logger.getLogger(__filename);
* Dummy implementation of Storage interface with empty methods.
*/
class DummyLocalStorage {
/* eslint-disable no-empty-function */
/**
* Empty function
*/
@ -20,6 +21,7 @@ class DummyLocalStorage {
* Empty function
*/
removeItem() { }
/* eslint-enable no-empty-function */
}
/**

12
modules/util/JitsiMeetLogStorage.js
View File

@ -37,15 +37,17 @@ export default class JitsiMeetLogStorage {
return;
}
let logJSON = '{"log' + this.counter + '":"\n';
let logJSON = `{"log${this.counter}":"\n`;
for (let i = 0, len = logEntries.length; i < len; i++) {
let logEntry = logEntries[i];
const logEntry = logEntries[i];
if (typeof logEntry === 'object') {
// Aggregated message
logJSON += '(' + logEntry.count + ') ' + logEntry.text + '\n';
logJSON += `(${logEntry.count}) ${logEntry.text}\n`;
} else {
// Regular message
logJSON += logEntry + '\n';
logJSON += `${logEntry}\n`;
}
}
logJSON += '"}';
@ -60,7 +62,7 @@ export default class JitsiMeetLogStorage {
} catch (error) {
// NOTE console is intentional here
console.error(
"Failed to store the logs: ", logJSON, error);
'Failed to store the logs: ', logJSON, error);
}
}
}

4
modules/util/helpers.js
View File

@ -1,4 +1,4 @@
const logger = require("jitsi-meet-logger").getLogger(__filename);
const logger = require('jitsi-meet-logger').getLogger(__filename);
/**
* Create deferred object.
@ -40,7 +40,7 @@ export function replace(url) {
* @param e {Error} the error
* @param msg {string} [optional] the message printed in addition to the error
*/
export function reportError(e, msg = "") {
export function reportError(e, msg = '') {
logger.error(msg, e);
window.onerror && window.onerror(msg, null, null, null, e);
}

259
react/.eslintrc.js
View File

@ -6,48 +6,12 @@ module.exports = {
}
},
'plugins': [
// ESLint's rule no-duplicate-imports does not understand Flow's import
// type. Fortunately, eslint-plugin-import understands Flow's import
// type.
'import',
'jsdoc',
'react',
'react-native'
],
'rules': {
// Possible Errors group
'no-cond-assign': 2,
'no-console': 0,
'no-constant-condition': 2,
'no-control-regex': 2,
'no-debugger': 2,
'no-dupe-args': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty': 2,
'no-empty-character-class': 2,
'no-ex-assign': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [
'error',
'all',
{ 'nestedBinaryExpressions': false }
],
'no-extra-semi': 2,
'no-func-assign': 2,
'no-inner-declarations': 2,
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-negated-in-lhs': 2,
'no-obj-calls': 2,
'no-prototype-builtins': 0,
'no-regex-spaces': 2,
'no-sparse-arrays': 2,
'no-unexpected-multiline': 2,
'no-unreachable': 2,
'no-unsafe-finally': 2,
'use-isnan': 2,
// Currently, we are using both valid-jsdoc and 'jsdoc' plugin. In the
// future we might stick to one as soon as it has all the features.
@ -74,234 +38,11 @@ module.exports = {
'requireReturnType': true
}
],
'valid-typeof': 2,
// Best Practices group
'accessor-pairs': 0,
'array-callback-return': 2,
'block-scoped-var': 0,
'complexity': 0,
'consistent-return': 0,
'curly': 2,
'default-case': 0,
'dot-location': [ 'error', 'property' ],
'dot-notation': 2,
'eqeqeq': 2,
'guard-for-in': 2,
'no-alert': 2,
'no-caller': 2,
'no-case-declarations': 2,
'no-div-regex': 0,
'no-else-return': 2,
'no-empty-function': 2,
'no-empty-pattern': 2,
'no-eq-null': 2,
'no-eval': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-label': 2,
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-implicit-coercion': 2,
'no-implicit-globals': 2,
'no-implied-eval': 2,
'no-invalid-this': 2,
'no-iterator': 2,
'no-labels': 2,
'no-lone-blocks': 2,
'no-loop-func': 2,
'no-magic-numbers': 0,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-native-reassign': 2,
'no-new': 2,
'no-new-func': 2,
'no-new-wrappers': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-param-reassign': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-return-assign': 2,
'no-script-url': 2,
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-throw-literal': 2,
'no-unmodified-loop-condition': 2,
'no-unused-expressions': [
'error',
{
'allowShortCircuit': true,
'allowTernary': true
}
],
'no-unused-labels': 2,
'no-useless-call': 2,
'no-useless-concat': 2,
'no-useless-escape': 2,
'no-void': 2,
'no-warning-comments': 0,
'no-with': 2,
'radix': 2,
'vars-on-top': 2,
'wrap-iife': [ 'error', 'inside' ],
'yoda': 2,
// Strict Mode group
'strict': 2,
// Variables group
'init-declarations': 0,
'no-catch-shadow': 2,
'no-delete-var': 2,
'no-label-var': 2,
'no-restricted-globals': 0,
'no-shadow': 2,
'no-shadow-restricted-names': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-undefined': 0,
'no-unused-vars': 2,
'no-use-before-define': [ 'error', { 'functions': false } ],
// Stylistic issues group
'array-bracket-spacing': [
'error',
'always',
{ 'objectsInArrays': true }
],
'block-spacing': [ 'error', 'always' ],
'brace-style': 2,
'camelcase': 2,
'comma-dangle': 2,
'comma-spacing': 2,
'comma-style': 2,
'computed-property-spacing': 2,
'consistent-this': [ 'error', 'self' ],
'eol-last': 2,
'func-names': 0,
'func-style': 0,
'id-blacklist': 0,
'id-length': 0,
'id-match': 0,
'jsx-quotes': [ 'error', 'prefer-single' ],
'key-spacing': 2,
'keyword-spacing': 2,
'linebreak-style': [ 'error', 'unix' ],
'lines-around-comment': [
'error',
{
'allowBlockStart': true,
'allowObjectStart': true,
'beforeBlockComment': true,
'beforeLineComment': true
}
],
'max-depth': 2,
'max-len': [ 'error', 80 ],
'max-lines': 0,
'max-nested-callbacks': 2,
'max-params': 2,
'max-statements': 0,
'max-statements-per-line': 2,
'multiline-ternary': 0,
'new-cap': 2,
'new-parens': 2,
'newline-after-var': 2,
'newline-before-return': 2,
'newline-per-chained-call': 2,
'no-array-constructor': 2,
'no-bitwise': 2,
'no-continue': 2,
'no-inline-comments': 0,
'no-lonely-if': 2,
'no-mixed-operators': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multiple-empty-lines': 2,
'no-negated-condition': 2,
'no-nested-ternary': 0,
'no-new-object': 2,
'no-plusplus': 0,
'no-restricted-syntax': 0,
'no-spaced-func': 2,
'no-tabs': 2,
'no-ternary': 0,
'no-trailing-spaces': 2,
'no-underscore-dangle': 0,
'no-unneeded-ternary': 2,
'no-whitespace-before-property': 2,
'object-curly-newline': 0,
'object-curly-spacing': [ 'error', 'always' ],
'object-property-newline': 2,
'one-var': 0,
'one-var-declaration-per-line': 0,
'operator-assignment': 0,
'operator-linebreak': [ 'error', 'before' ],
'padded-blocks': 0,
'quote-props': 0,
'quotes': [ 'error', 'single' ],
'require-jsdoc': [
'error',
{
'require': {
'ClassDeclaration': true,
'FunctionDeclaration': true,
'MethodDefinition': true
}
}
],
'semi': [ 'error', 'always' ],
'semi-spacing': 2,
'sort-vars': 2,
'space-before-blocks': 2,
'space-before-function-paren': [ 'error', 'never' ],
'space-in-parens': [ 'error', 'never' ],
'space-infix-ops': 2,
'space-unary-ops': 2,
'spaced-comment': 2,
'unicode-bom': 0,
'wrap-regex': 0,
// ES6 group rules
'arrow-body-style': [
'error',
'as-needed',
{ requireReturnForObjectLiteral: true }
],
'arrow-parens': [ 'error', 'as-needed' ],
'arrow-spacing': 2,
'constructor-super': 2,
'generator-star-spacing': 2,
'no-class-assign': 2,
'no-confusing-arrow': 2,
'no-const-assign': 2,
'no-dupe-class-members': 2,
'no-new-symbol': 2,
'no-restricted-imports': 0,
'no-this-before-super': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-rename': 2,
'no-var': 2,
'object-shorthand': [
'error',
'always',
{ 'avoidQuotes': true }
],
'prefer-arrow-callback': [ 'error', { 'allowNamedFunctions': true } ],
'prefer-const': 2,
'prefer-reflect': 0,
'prefer-rest-params': 2,
'prefer-spread': 2,
'prefer-template': 2,
'require-yield': 2,
'rest-spread-spacing': 2,
'sort-imports': 0,
'template-curly-spacing': 2,
'yield-star-spacing': 2,
'import/no-duplicates': 2,
// JsDoc plugin rules group. The following rules are in addition to
// valid-jsdoc rule.

95
service/UI/UIEvents.js
View File

@ -1,50 +1,58 @@
export default {
NICKNAME_CHANGED: "UI.nickname_changed",
SELECTED_ENDPOINT: "UI.selected_endpoint",
PINNED_ENDPOINT: "UI.pinned_endpoint",
NICKNAME_CHANGED: 'UI.nickname_changed',
SELECTED_ENDPOINT: 'UI.selected_endpoint',
PINNED_ENDPOINT: 'UI.pinned_endpoint',
/**
* Notifies that local user created text message.
*/
MESSAGE_CREATED: "UI.message_created",
MESSAGE_CREATED: 'UI.message_created',
/**
* Notifies that local user changed language.
*/
LANG_CHANGED: "UI.lang_changed",
LANG_CHANGED: 'UI.lang_changed',
/**
* Notifies that local user changed email.
*/
EMAIL_CHANGED: "UI.email_changed",
EMAIL_CHANGED: 'UI.email_changed',
/**
* Notifies that "start muted" settings changed.
*/
START_MUTED_CHANGED: "UI.start_muted_changed",
AUDIO_MUTED: "UI.audio_muted",
VIDEO_MUTED: "UI.video_muted",
VIDEO_UNMUTING_WHILE_AUDIO_ONLY: "UI.video_unmuting_while_audio_only",
ETHERPAD_CLICKED: "UI.etherpad_clicked",
SHARED_VIDEO_CLICKED: "UI.start_shared_video",
START_MUTED_CHANGED: 'UI.start_muted_changed',
AUDIO_MUTED: 'UI.audio_muted',
VIDEO_MUTED: 'UI.video_muted',
VIDEO_UNMUTING_WHILE_AUDIO_ONLY: 'UI.video_unmuting_while_audio_only',
ETHERPAD_CLICKED: 'UI.etherpad_clicked',
SHARED_VIDEO_CLICKED: 'UI.start_shared_video',
/**
* Updates shared video with params: url, state, time(optional)
* Where url is the video link, state is stop/start/pause and time is the
* current video playing time.
*/
UPDATE_SHARED_VIDEO: "UI.update_shared_video",
USER_KICKED: "UI.user_kicked",
REMOTE_AUDIO_MUTED: "UI.remote_audio_muted",
TOGGLE_FULLSCREEN: "UI.toogle_fullscreen",
FULLSCREEN_TOGGLED: "UI.fullscreen_toggled",
AUTH_CLICKED: "UI.auth_clicked",
UPDATE_SHARED_VIDEO: 'UI.update_shared_video',
USER_KICKED: 'UI.user_kicked',
REMOTE_AUDIO_MUTED: 'UI.remote_audio_muted',
TOGGLE_FULLSCREEN: 'UI.toogle_fullscreen',
FULLSCREEN_TOGGLED: 'UI.fullscreen_toggled',
AUTH_CLICKED: 'UI.auth_clicked',
/**
* Notifies that the audio only mode was toggled.
*/
TOGGLE_AUDIO_ONLY: "UI.toggle_audioonly",
TOGGLE_CHAT: "UI.toggle_chat",
TOGGLE_SETTINGS: "UI.toggle_settings",
TOGGLE_CONTACT_LIST: "UI.toggle_contact_list",
TOGGLE_AUDIO_ONLY: 'UI.toggle_audioonly',
TOGGLE_CHAT: 'UI.toggle_chat',
TOGGLE_SETTINGS: 'UI.toggle_settings',
TOGGLE_CONTACT_LIST: 'UI.toggle_contact_list',
/**
* Notifies that the profile toolbar button has been clicked.
*/
TOGGLE_PROFILE: "UI.toggle_profile",
TOGGLE_PROFILE: 'UI.toggle_profile',
/**
* Notifies that a command to toggle the filmstrip has been issued. The
* event may optionally specify a {Boolean} (primitive) value to assign to
@ -56,7 +64,8 @@ export default {
*
* @see {TOGGLED_FILMSTRIP}
*/
TOGGLE_FILMSTRIP: "UI.toggle_filmstrip",
TOGGLE_FILMSTRIP: 'UI.toggle_filmstrip',
/**
* Notifies that the filmstrip was (actually) toggled. The event supplies a
* {Boolean} (primitive) value indicating the visibility of the filmstrip
@ -64,59 +73,59 @@ export default {
*
* @see {TOGGLE_FILMSTRIP}
*/
TOGGLED_FILMSTRIP: "UI.toggled_filmstrip",
TOGGLED_FILMSTRIP: 'UI.toggled_filmstrip',
TOGGLE_SCREENSHARING: "UI.toggle_screensharing",
TOGGLED_SHARED_DOCUMENT: "UI.toggled_shared_document",
CONTACT_CLICKED: "UI.contact_clicked",
HANGUP: "UI.hangup",
LOGOUT: "UI.logout",
RECORDING_TOGGLED: "UI.recording_toggled",
SUBJECT_CHANGED: "UI.subject_changed",
VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
TOGGLE_SCREENSHARING: 'UI.toggle_screensharing',
TOGGLED_SHARED_DOCUMENT: 'UI.toggled_shared_document',
CONTACT_CLICKED: 'UI.contact_clicked',
HANGUP: 'UI.hangup',
LOGOUT: 'UI.logout',
RECORDING_TOGGLED: 'UI.recording_toggled',
SUBJECT_CHANGED: 'UI.subject_changed',
VIDEO_DEVICE_CHANGED: 'UI.video_device_changed',
AUDIO_DEVICE_CHANGED: 'UI.audio_device_changed',
AUDIO_OUTPUT_DEVICE_CHANGED: 'UI.audio_output_device_changed',
/**
* Notifies interested listeners that the follow-me feature is enabled or
* disabled.
*/
FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
FOLLOW_ME_ENABLED: 'UI.follow_me_enabled',
/**
* Notifies that flipX property of the local video is changed.
*/
LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
LOCAL_FLIPX_CHANGED: 'UI.local_flipx_changed',
// An event which indicates that the resolution of a remote video has
// changed.
RESOLUTION_CHANGED: "UI.resolution_changed",
RESOLUTION_CHANGED: 'UI.resolution_changed',
/**
* Notifies that the button "Cancel" is pressed on the dialog for
* external extension installation.
*/
EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled",
EXTERNAL_INSTALLATION_CANCELED: 'UI.external_installation_canceled',
/**
* Notifies that the side toolbar container has been toggled. The actual
* event must contain the identifier of the container that has been toggled
* and information about toggle on or off.
*/
SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled",
SIDE_TOOLBAR_CONTAINER_TOGGLED: 'UI.side_container_toggled',
/**
* Notifies that the raise hand has been changed.
*/
LOCAL_RAISE_HAND_CHANGED: "UI.local_raise_hand_changed",
LOCAL_RAISE_HAND_CHANGED: 'UI.local_raise_hand_changed',
/**
* Notifies that the avatar is displayed or not on the largeVideo.
*/
LARGE_VIDEO_AVATAR_VISIBLE: "UI.large_video_avatar_visible",
LARGE_VIDEO_AVATAR_VISIBLE: 'UI.large_video_avatar_visible',
/**
* Notifies that the displayed particpant id on the largeVideo is changed.
*/
LARGE_VIDEO_ID_CHANGED: "UI.large_video_id_changed"
LARGE_VIDEO_ID_CHANGED: 'UI.large_video_id_changed'
};

36
service/remotecontrol/Constants.js
View File

@ -2,7 +2,7 @@
* The value for the "var" attribute of feature tag in disco-info packets.
*/
export const DISCO_REMOTE_CONTROL_FEATURE
= "http://jitsi.org/meet/remotecontrol";
= 'http://jitsi.org/meet/remotecontrol';
/**
* Types of remote-control events.
@ -10,17 +10,17 @@ export const DISCO_REMOTE_CONTROL_FEATURE
* @enum {string}
*/
export const EVENTS = {
mousemove: "mousemove",
mousedown: "mousedown",
mouseup: "mouseup",
mousedblclick: "mousedblclick",
mousescroll: "mousescroll",
keydown: "keydown",
keyup: "keyup",
permissions: "permissions",
start: "start",
stop: "stop",
supported: "supported"
mousemove: 'mousemove',
mousedown: 'mousedown',
mouseup: 'mouseup',
mousedblclick: 'mousedblclick',
mousescroll: 'mousescroll',
keydown: 'keydown',
keyup: 'keyup',
permissions: 'permissions',
start: 'start',
stop: 'stop',
supported: 'supported'
};
/**
@ -29,7 +29,7 @@ export const EVENTS = {
* @enum {string}
*/
export const REQUESTS = {
start: "start"
start: 'start'
};
/**
@ -38,16 +38,16 @@ export const REQUESTS = {
* @enum {string}
*/
export const PERMISSIONS_ACTIONS = {
request: "request",
grant: "grant",
deny: "deny",
error: "error"
request: 'request',
grant: 'grant',
deny: 'deny',
error: 'error'
};
/**
* The type of remote control messages.
*/
export const REMOTE_CONTROL_MESSAGE_NAME = "remote-control";
export const REMOTE_CONTROL_MESSAGE_NAME = 'remote-control';
/**
* The remote control event.

30
static/close.js
View File

@ -1,11 +1,13 @@
/* global interfaceConfig */
// list of tips
var hints = [
"You can pin participants by clicking on their thumbnails.",// jshint ignore:line
"You can tell others you have something to say by using the \"Raise Hand\" feature",// jshint ignore:line
"You can learn about key shortcuts by pressing Shift+?",// jshint ignore:line
"You can learn more about the state of everyone's connection by hovering on the bars in their thumbnail",// jshint ignore:line
"You can hide all thumbnails by using the button in the bottom right corner"// jshint ignore:line
const hints = [
'You can pin participants by clicking on their thumbnails.',
'You can tell others you have something to say by using the "Raise Hand" '
+ 'feature',
'You can learn about key shortcuts by pressing Shift+?',
'You can learn more about the state of everyone\'s connection by hovering '
+ 'on the bars in their thumbnail',
'You can hide all thumbnails by using the button in the bottom right corner'
];
/**
@ -14,8 +16,8 @@ var hints = [
* @return {string} the hint message.
*/
function getHint() {
var l = hints.length - 1;
var n = Math.round(Math.random() * l);
const l = hints.length - 1;
const n = Math.round(Math.random() * l);
return hints[n];
}
@ -27,13 +29,13 @@ function getHint(){
* @param id {string} element identificator
* @param msg {string} text message
*/
// eslint-disable-next-line no-unused-vars
function insertTextMsg(id, msg) {
var el = document.getElementById(id);
const el = document.getElementById(id);
if (el)
if (el) {
el.innerHTML = msg;
}
}
/**
* Sets the hint and thanks messages. Will be executed on load event.
@ -41,14 +43,16 @@ function insertTextMsg(id, msg){
function onLoad() {
// Works only for close2.html because close.html doesn't have this element.
insertTextMsg('thanksMessage',
'Thank you for using ' + interfaceConfig.APP_NAME);
`Thank you for using ${interfaceConfig.APP_NAME}`);
// If there is a setting show a special message only for the guests
if (interfaceConfig.CLOSE_PAGE_GUEST_HINT) {
if (window.sessionStorage.getItem('guest') === 'true') {
var element = document.getElementById('hintQuestion');
const element = document.getElementById('hintQuestion');
element.classList.add('hide');
insertTextMsg('hintMessage', interfaceConfig.CLOSE_PAGE_GUEST_HINT);
return;
}
}

25
webpack.config.js
View File

@ -3,7 +3,7 @@
const process = require('process');
const webpack = require('webpack');
const aui_css = `${__dirname}/node_modules/@atlassian/aui/dist/aui/css/`;
const auiCSS = `${__dirname}/node_modules/@atlassian/aui/dist/aui/css/`;
/**
* The URL of the Jitsi Meet deployment to be proxy to in the context of
@ -15,6 +15,8 @@ const devServerProxyTarget
const minimize
= process.argv.indexOf('-p') !== -1
|| process.argv.indexOf('--optimize-minimize') !== -1;
// eslint-disable-next-line camelcase
const node_modules = `${__dirname}/node_modules/`;
const plugins = [
new webpack.LoaderOptionsPlugin({
@ -62,8 +64,7 @@ const config = {
rules: [ {
// Transpile ES2015 (aka ES6) to ES5. Accept the JSX syntax by React
// as well.
exclude: node_modules,
exclude: node_modules, // eslint-disable-line camelcase
loader: 'babel-loader',
options: {
// XXX The require.resolve bellow solves failures to locate the
@ -113,10 +114,10 @@ const config = {
// Emit the static assets of AUI such as images that are referenced
// by CSS into the output path.
include: aui_css,
include: auiCSS,
loader: 'file-loader',
options: {
context: aui_css,
context: auiCSS,
name: '[path][name].[ext]'
},
test: /\.(gif|png|svg)$/
@ -210,9 +211,10 @@ function devServerProxyBypass({ path }) {
const configs = module.exports;
/* eslint-disable indent */
let formattedPath = path;
if ((Array.isArray(configs) ? configs : Array(configs)).some(c => {
if (path.startsWith(c.output.publicPath)) {
if (formattedPath.startsWith(c.output.publicPath)) {
if (!minimize) {
// Since webpack-dev-server is serving non-minimized
// artifacts, serve them even if the minimized ones are
@ -220,18 +222,23 @@ function devServerProxyBypass({ path }) {
Object.keys(c.entry).some(e => {
const name = `${e}.min.js`;
if (path.indexOf(name) !== -1) {
path = path.replace(name, `${e}.js`);
if (formattedPath.indexOf(name) !== -1) {
formattedPath
= formattedPath.replace(name, `${e}.js`);
return true;
}
return false;
});
}
return true;
}
return false;
})) {
return path;
return formattedPath;
}
/* eslint-enable indent */