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

ref(follow-me): hook into redux (#3991) 

Use subscribers to detect state change and emit those
out to other participants. Use middleware to register
the command listener.
This commit is contained in:
virtuacoplenny 2019-04-17 08:05:32 -07:00 committed by GitHub
parent aefa836406
commit c7013f5c4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 330 additions and 612 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

546
modules/FollowMe.js
View File

@ -1,546 +0,0 @@
/* global APP */
/*
* Copyright @ 2015 Atlassian Pty Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const logger = require('jitsi-meet-logger').getLogger(__filename);
import {
getPinnedParticipant,
pinParticipant
} from '../react/features/base/participants';
import { setTileView } from '../react/features/video-layout';
import UIEvents from '../service/UI/UIEvents';
import VideoLayout from './UI/videolayout/VideoLayout';
/**
* The (name of the) command which transports the state (represented by
* {State} for the local state at the time of this writing) of a {FollowMe}
* (instance) between participants.
*/
const _COMMAND = 'follow-me';
/**
* The timeout after which a follow-me command that has been received will be
* ignored if not consumed.
*
* @type {number} in seconds
* @private
*/
const _FOLLOW_ME_RECEIVED_TIMEOUT = 30;
/**
* Represents the set of {FollowMe}-related states (properties and their
* respective values) which are to be followed by a participant. {FollowMe}
* will send {_COMMAND} whenever a property of {State} changes (if the local
* participant is in her right to issue such a command, of course).
*/
class State {
/**
* Initializes a new {State} instance.
*
* @param propertyChangeCallback {Function} which is to be called when a
* property of the new instance has its value changed from an old value
* into a (different) new value. The function is supplied with the name of
* the property, the old value of the property before the change, and the
* new value of the property after the change.
*/
constructor(propertyChangeCallback) {
this._propertyChangeCallback = propertyChangeCallback;
}
/**
*
*/
get filmstripVisible() {
return this._filmstripVisible;
}
/**
*
*/
set filmstripVisible(b) {
const oldValue = this._filmstripVisible;
if (oldValue !== b) {
this._filmstripVisible = b;
this._firePropertyChange('filmstripVisible', oldValue, b);
}
}
/**
*
*/
get nextOnStage() {
return this._nextOnStage;
}
/**
*
*/
set nextOnStage(id) {
const oldValue = this._nextOnStage;
if (oldValue !== id) {
this._nextOnStage = id;
this._firePropertyChange('nextOnStage', oldValue, id);
}
}
/**
*
*/
get sharedDocumentVisible() {
return this._sharedDocumentVisible;
}
/**
*
*/
set sharedDocumentVisible(b) {
const oldValue = this._sharedDocumentVisible;
if (oldValue !== b) {
this._sharedDocumentVisible = b;
this._firePropertyChange('sharedDocumentVisible', oldValue, b);
}
}
/**
* A getter for this object instance to know the state of tile view.
*
* @returns {boolean} True if tile view is enabled.
*/
get tileViewEnabled() {
return this._tileViewEnabled;
}
/**
* A setter for {@link tileViewEnabled}. Fires a property change event for
* other participants to follow.
*
* @param {boolean} b - Whether or not tile view is enabled.
* @returns {void}
*/
set tileViewEnabled(b) {
const oldValue = this._tileViewEnabled;
if (oldValue !== b) {
this._tileViewEnabled = b;
this._firePropertyChange('tileViewEnabled', oldValue, b);
}
}
/**
* Invokes {_propertyChangeCallback} to notify it that {property} had its
* value changed from {oldValue} to {newValue}.
*
* @param property the name of the property which had its value changed
* from {oldValue} to {newValue}
* @param oldValue the value of {property} before the change
* @param newValue the value of {property} after the change
*/
_firePropertyChange(property, oldValue, newValue) {
const propertyChangeCallback = this._propertyChangeCallback;
if (propertyChangeCallback) {
propertyChangeCallback(property, oldValue, newValue);
}
}
}
/**
* Represents the "Follow Me" feature which enables a moderator to
* (partially) control the user experience/interface (e.g. filmstrip
* visibility) of (other) non-moderator particiapnts.
*
* @author Lyubomir Marinov
*/
class FollowMe {
/**
* Initializes a new {FollowMe} instance.
*
* @param conference the {conference} which is to transport
* {FollowMe}-related information between participants
* @param UI the {UI} which is the source (model/state) to be sent to
* remote participants if the local participant is the moderator or the
* destination (model/state) to receive from the remote moderator if the
* local participant is not the moderator
*/
constructor(conference, UI) {
this._conference = conference;
this._UI = UI;
this.nextOnStageTimer = 0;
// The states of the local participant which are to be followed (by the
// remote participants when the local participant is in her right to
// issue such commands).
this._local = new State(this._localPropertyChange.bind(this));
// Listen to "Follow Me" commands. I'm not sure whether a moderator can
// (in lib-jitsi-meet and/or Meet) become a non-moderator. If that's
// possible, then it may be easiest to always listen to commands. The
// listener will validate received commands before acting on them.
conference.commands.addCommandListener(
_COMMAND,
this._onFollowMeCommand.bind(this));
}
/**
* Sets the current state of all follow-me properties, which will fire a
* localPropertyChangeEvent and trigger a send of the follow-me command.
* @private
*/
_setFollowMeInitialState() {
this._filmstripToggled.bind(this, this._UI.isFilmstripVisible());
const pinnedId = VideoLayout.getPinnedId();
this._nextOnStage(pinnedId, Boolean(pinnedId));
// check whether shared document is enabled/initialized
if (this._UI.getSharedDocumentManager()) {
this._sharedDocumentToggled
.bind(this, this._UI.getSharedDocumentManager().isVisible());
}
this._tileViewToggled.bind(
this,
APP.store.getState()['features/video-layout'].tileViewEnabled);
}
/**
* Adds listeners for the UI states of the local participant which are
* to be followed (by the remote participants). A non-moderator (very
* likely) can become a moderator so it may be easiest to always track
* the states of interest.
* @private
*/
_addFollowMeListeners() {
this.filmstripEventHandler = this._filmstripToggled.bind(this);
this._UI.addListener(UIEvents.TOGGLED_FILMSTRIP,
this.filmstripEventHandler);
const self = this;
this.pinnedEndpointEventHandler = function(videoId, isPinned) {
self._nextOnStage(videoId, isPinned);
};
this._UI.addListener(UIEvents.PINNED_ENDPOINT,
this.pinnedEndpointEventHandler);
this.sharedDocEventHandler = this._sharedDocumentToggled.bind(this);
this._UI.addListener(UIEvents.TOGGLED_SHARED_DOCUMENT,
this.sharedDocEventHandler);
this.tileViewEventHandler = this._tileViewToggled.bind(this);
this._UI.addListener(UIEvents.TOGGLED_TILE_VIEW,
this.tileViewEventHandler);
}
/**
* Removes all follow me listeners.
* @private
*/
_removeFollowMeListeners() {
this._UI.removeListener(UIEvents.TOGGLED_FILMSTRIP,
this.filmstripEventHandler);
this._UI.removeListener(UIEvents.TOGGLED_SHARED_DOCUMENT,
this.sharedDocEventHandler);
this._UI.removeListener(UIEvents.PINNED_ENDPOINT,
this.pinnedEndpointEventHandler);
this._UI.removeListener(UIEvents.TOGGLED_TILE_VIEW,
this.tileViewEventHandler);
}
/**
* Enables or disabled the follow me functionality
*
* @param enable {true} to enable the follow me functionality, {false} -
* to disable it
*/
enableFollowMe(enable) {
if (enable) {
this._setFollowMeInitialState();
this._addFollowMeListeners();
} else {
this._removeFollowMeListeners();
}
}
/**
* Notifies this instance that the (visibility of the) filmstrip was
* toggled (in the user interface of the local participant).
*
* @param filmstripVisible {Boolean} {true} if the filmstrip was shown (as a
* result of the toggle) or {false} if the filmstrip was hidden
*/
_filmstripToggled(filmstripVisible) {
this._local.filmstripVisible = filmstripVisible;
}
/**
* Notifies this instance that the (visibility of the) shared document was
* toggled (in the user interface of the local participant).
*
* @param sharedDocumentVisible {Boolean} {true} if the shared document was
* shown (as a result of the toggle) or {false} if it was hidden
*/
_sharedDocumentToggled(sharedDocumentVisible) {
this._local.sharedDocumentVisible = sharedDocumentVisible;
}
/**
* Notifies this instance that the tile view mode has been enabled or
* disabled.
*
* @param {boolean} enabled - True if tile view has been enabled, false
* if has been disabled.
* @returns {void}
*/
_tileViewToggled(enabled) {
this._local.tileViewEnabled = enabled;
}
/**
* Changes the nextOnStage property value.
*
* @param smallVideo the {SmallVideo} that was pinned or unpinned
* @param isPinned indicates if the given {SmallVideo} was pinned or
* unpinned
* @private
*/
_nextOnStage(videoId, isPinned) {
if (!this._conference.isModerator) {
return;
}
let nextOnStage = null;
if (isPinned) {
nextOnStage = videoId;
}
this._local.nextOnStage = nextOnStage;
}
/**
* Sends the follow-me command, when a local property change occurs.
*
* @private
*/
_localPropertyChange() { // eslint-disable-next-line no-unused-vars
// Only a moderator is allowed to send commands.
const conference = this._conference;
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,
{
attributes: {
filmstripVisible: local.filmstripVisible,
nextOnStage: local.nextOnStage,
sharedDocumentVisible: local.sharedDocumentVisible,
tileViewEnabled: local.tileViewEnabled
}
});
}
/**
* Notifies this instance about a &qout;Follow Me&qout; command (delivered
* by the Command(s) API of {this._conference}).
*
* @param attributes the attributes {Object} carried by the command
* @param id the identifier of the participant who issued the command. A
* notable idiosyncrasy of the Command(s) API to be mindful of here is that
* the command may be issued by the local participant.
*/
_onFollowMeCommand({ attributes }, id) {
// 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') {
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)) {
return;
}
if (!this._conference.isParticipantModerator(id)) {
logger.warn('Received follow-me command not from moderator');
return;
}
// Applies the received/remote command to the user experience/interface
// of the local participant.
this._onFilmstripVisible(attributes.filmstripVisible);
this._onNextOnStage(attributes.nextOnStage);
this._onSharedDocumentVisible(attributes.sharedDocumentVisible);
this._onTileViewEnabled(attributes.tileViewEnabled);
}
/**
* Process a filmstrip open / close event received from FOLLOW-ME
* command.
* @param filmstripVisible indicates if the filmstrip has been shown or
* hidden
* @private
*/
_onFilmstripVisible(filmstripVisible) {
if (typeof filmstripVisible !== 'undefined') {
// XXX The Command(s) API doesn't preserve the types (of
// attributes, at least) at the time of this writing so take into
// account that what originated as a Boolean may be a String on
// receipt.
// 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()) {
this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
}
}
}
/**
* Process the id received from a FOLLOW-ME command.
* @param id the identifier of the next participant to show on stage or
* undefined if we're clearing the stage (we're unpining all pined and we
* rely on dominant speaker events)
* @private
*/
_onNextOnStage(id) {
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
clickId = VideoLayout.getPinnedId();
pin = false;
}
if (clickId) {
this._pinVideoThumbnailById(clickId, pin);
}
}
/**
* Process a shared document open / close event received from FOLLOW-ME
* command.
* @param sharedDocumentVisible indicates if the shared document has been
* opened or closed
* @private
*/
_onSharedDocumentVisible(sharedDocumentVisible) {
if (typeof sharedDocumentVisible !== 'undefined') {
// XXX The Command(s) API doesn't preserve the types (of
// attributes, at least) at the time of this writing so take into
// account that what originated as a Boolean may be a String on
// receipt.
// eslint-disable-next-line eqeqeq, no-param-reassign
sharedDocumentVisible = sharedDocumentVisible == 'true';
if (sharedDocumentVisible
!== this._UI.getSharedDocumentManager().isVisible()) {
this._UI.getSharedDocumentManager().toggleEtherpad();
}
}
}
/**
* Process a tile view enabled / disabled event received from FOLLOW-ME.
*
* @param {boolean} enabled - Whether or not tile view should be shown.
* @private
* @returns {void}
*/
_onTileViewEnabled(enabled) {
if (typeof enabled === 'undefined') {
return;
}
APP.store.dispatch(setTileView(enabled === 'true'));
}
/**
* Pins / unpins the video thumbnail given by clickId.
*
* @param clickId the identifier of the video thumbnail to pin or unpin
* @param pin {true} to pin, {false} to unpin
* @private
*/
_pinVideoThumbnailById(clickId, pin) {
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);
if (pin) {
APP.store.dispatch(pinParticipant(clickId));
} else {
const { id } = getPinnedParticipant(APP.store.getState()) || {};
if (id === clickId) {
APP.store.dispatch(pinParticipant(null));
}
}
} 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);
}
}
}
export default FollowMe;

12
modules/UI/UI.js
View File

@ -32,7 +32,6 @@ import {
const EventEmitter = require('events'); const EventEmitter = require('events');
UI.messageHandler = messageHandler; UI.messageHandler = messageHandler;
import FollowMe from '../FollowMe';
const eventEmitter = new EventEmitter(); const eventEmitter = new EventEmitter();
@ -41,8 +40,6 @@ UI.eventEmitter = eventEmitter;
let etherpadManager; let etherpadManager;
let sharedVideoManager; let sharedVideoManager;
let followMeHandler;
const JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP = { const JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP = {
microphone: {}, microphone: {},
camera: {} camera: {}
@ -86,9 +83,6 @@ const UIListeners = new Map([
], [ ], [
UIEvents.TOGGLE_FILMSTRIP, UIEvents.TOGGLE_FILMSTRIP,
() => UI.toggleFilmstrip() () => UI.toggleFilmstrip()
], [
UIEvents.FOLLOW_ME_ENABLED,
enabled => followMeHandler && followMeHandler.enableFollowMe(enabled)
] ]
]); ]);
@ -193,12 +187,6 @@ UI.initConference = function() {
if (displayName) { if (displayName) {
UI.changeDisplayName('localVideoContainer', displayName); UI.changeDisplayName('localVideoContainer', displayName);
} }
// FollowMe attempts to copy certain aspects of the moderator's UI into the
// other participants' UI. Consequently, it needs (1) read and write access
// to the UI (depending on the moderator role of the local participant) and
// (2) APP.conference as means of communication between the participants.
followMeHandler = new FollowMe(APP.conference, UI);
}; };
/** /**

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

@ -5,7 +5,6 @@ import { getToolboxHeight } from '../../../react/features/toolbox';
import VideoLayout from '../videolayout/VideoLayout'; import VideoLayout from '../videolayout/VideoLayout';
import LargeContainer from '../videolayout/LargeContainer'; import LargeContainer from '../videolayout/LargeContainer';
import UIEvents from '../../../service/UI/UIEvents';
import Filmstrip from '../videolayout/Filmstrip'; import Filmstrip from '../videolayout/Filmstrip';
/** /**
@ -250,9 +249,6 @@ export default class EtherpadManager {
VideoLayout.showLargeVideoContainer( VideoLayout.showLargeVideoContainer(
ETHERPAD_CONTAINER_TYPE, !isVisible); ETHERPAD_CONTAINER_TYPE, !isVisible);
this.eventEmitter
.emit(UIEvents.TOGGLED_SHARED_DOCUMENT, !isVisible);
APP.store.dispatch(setDocumentEditingState(!isVisible)); APP.store.dispatch(setDocumentEditingState(!isVisible));
} }
} }

1
react/features/app/components/AbstractApp.js
View File

@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
import { BaseApp } from '../../base/app'; import { BaseApp } from '../../base/app';
import { toURLString } from '../../base/util'; import { toURLString } from '../../base/util';
import '../../follow-me';
import { OverlayContainer } from '../../overlay'; import { OverlayContainer } from '../../overlay';
import { appNavigate } from '../actions'; import { appNavigate } from '../actions';

6
react/features/base/conference/actions.js
View File

@ -1,7 +1,5 @@
// @flow // @flow
import UIEvents from '../../../../service/UI/UIEvents';
import { import {
createStartMutedConfigurationEvent, createStartMutedConfigurationEvent,
sendAnalytics sendAnalytics
@ -547,10 +545,6 @@ export function setDesktopSharingEnabled(desktopSharingEnabled: boolean) {
* }} * }}
*/ */
export function setFollowMe(enabled: boolean) { export function setFollowMe(enabled: boolean) {
if (typeof APP !== 'undefined') {
APP.UI.emitEvent(UIEvents.FOLLOW_ME_ENABLED, enabled);
}
return { return {
type: SET_FOLLOW_ME, type: SET_FOLLOW_ME,
enabled enabled

53
react/features/etherpad/reducer.js
View File

@ -7,24 +7,45 @@ import {
SET_DOCUMENT_EDITING_STATUS SET_DOCUMENT_EDITING_STATUS
} from './actionTypes'; } from './actionTypes';
const DEFAULT_STATE = {
/**
* Whether or not Etherpad is currently open.
*
* @public
* @type {boolean}
*/
editing: false,
/**
* Whether or not Etherpad is ready to use.
*
* @public
* @type {boolean}
*/
initialized: false
};
/** /**
* Reduces the Redux actions of the feature features/etherpad. * Reduces the Redux actions of the feature features/etherpad.
*/ */
ReducerRegistry.register('features/etherpad', (state = {}, action) => { ReducerRegistry.register(
switch (action.type) { 'features/etherpad',
case ETHERPAD_INITIALIZED: (state = DEFAULT_STATE, action) => {
return { switch (action.type) {
...state, case ETHERPAD_INITIALIZED:
initialized: true return {
}; ...state,
initialized: true
};
case SET_DOCUMENT_EDITING_STATUS: case SET_DOCUMENT_EDITING_STATUS:
return { return {
...state, ...state,
editing: action.editing editing: action.editing
}; };
default: default:
return state; return state;
} }
}); });

6
react/features/follow-me/constants.js Normal file
View File

@ -0,0 +1,6 @@
/**
* The (name of the) command which transports the state (represented by
* {State} for the local state at the time of this writing) of a {FollowMe}
* (instance) between participants.
*/
export const FOLLOW_ME_COMMAND = 'follow-me';

2
react/features/follow-me/index.js Normal file
View File

@ -0,0 +1,2 @@
export * from './middleware';
export * from './subscriber';

162
react/features/follow-me/middleware.js Normal file
View File

@ -0,0 +1,162 @@
// @flow
import { CONFERENCE_WILL_JOIN } from '../base/conference';
import {
getParticipantById,
getPinnedParticipant,
pinParticipant
} from '../base/participants';
import { MiddlewareRegistry } from '../base/redux';
import { setFilmstripVisible } from '../filmstrip';
import { setTileView } from '../video-layout';
import { FOLLOW_ME_COMMAND } from './constants';
const logger = require('jitsi-meet-logger').getLogger(__filename);
declare var APP: Object;
/**
* The timeout after which a follow-me command that has been received will be
* ignored if not consumed.
*
* @type {number} in seconds
* @private
*/
const _FOLLOW_ME_RECEIVED_TIMEOUT = 30;
/**
* An instance of a timeout used as a workaround when attempting to pin a
* non-existent particapant, which may be caused by participant join information
* not being received yet.
*
* @type {TimeoutID}
*/
let nextOnStageTimeout;
/**
* A count of how many seconds the nextOnStageTimeout has ticked while waiting
* for a participant to be discovered that should be pinned. This variable
* works in conjunction with {@code _FOLLOW_ME_RECEIVED_TIMEOUT} and
* {@code nextOnStageTimeout}.
*
* @type {number}
*/
let nextOnStageTimer = 0;
/**
* Represents "Follow Me" feature which enables a moderator to (partially)
* control the user experience/interface (e.g. filmstrip visibility) of (other)
* non-moderator participant.
*/
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case CONFERENCE_WILL_JOIN: {
const { conference } = action;
conference.addCommandListener(
FOLLOW_ME_COMMAND, ({ attributes }, id) => {
_onFollowMeCommand(attributes, id, store);
});
}
}
return next(action);
});
/**
* Notifies this instance about a "Follow Me" command received by the Jitsi
* conference.
*
* @param {Object} attributes - The attributes carried by the command.
* @param {string} id - The identifier of the participant who issuing the
* command. A notable idiosyncrasy to be mindful of here is that the command
* may be issued by the local participant.
* @param {Object} store - The redux store. Used to calculate and dispatch
* updates.
* @private
* @returns {void}
*/
function _onFollowMeCommand(attributes = {}, id, store) {
const state = store.getState();
// 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') {
return;
}
const participantSendingCommand = getParticipantById(state, id);
// The Command(s) API will send us our own commands and we don't want
// to act upon them.
if (participantSendingCommand.local) {
return;
}
if (participantSendingCommand.role !== 'moderator') {
logger.warn('Received follow-me command not from moderator');
return;
}
// XMPP will translate all booleans to strings, so explicitly check against
// the string form of the boolean {@code true}.
store.dispatch(setFilmstripVisible(attributes.filmstripVisible === 'true'));
store.dispatch(setTileView(attributes.tileViewEnabled === 'true'));
// For now gate etherpad checks behind a web-app check to be extra safe
// against calling a web-app global.
if (typeof APP !== 'undefined' && state['features/etherpad'].initialized) {
const isEtherpadVisible = attributes.sharedDocumentVisible === 'true';
const documentManager = APP.UI.getSharedDocumentManager();
if (documentManager
&& isEtherpadVisible !== state['features/etherpad'].editing) {
documentManager.toggleEtherpad();
}
}
const pinnedParticipant
= getPinnedParticipant(state, attributes.nextOnStage);
const idOfParticipantToPin = attributes.nextOnStage;
if (typeof idOfParticipantToPin !== 'undefined'
&& (!pinnedParticipant
|| idOfParticipantToPin !== pinnedParticipant.id)) {
_pinVideoThumbnailById(store, idOfParticipantToPin);
} else if (typeof idOfParticipantToPin === 'undefined'
&& pinnedParticipant) {
store.dispatch(pinParticipant(null));
}
}
/**
* Pins the video thumbnail given by clickId.
*
* @param {Object} store - The redux store.
* @param {string} clickId - The identifier of the participant to pin.
* @private
* @returns {void}
*/
function _pinVideoThumbnailById(store, clickId) {
if (getParticipantById(store.getState(), clickId)) {
clearTimeout(nextOnStageTimeout);
nextOnStageTimer = 0;
store.dispatch(pinParticipant(clickId));
} else {
nextOnStageTimeout = setTimeout(() => {
if (nextOnStageTimer > _FOLLOW_ME_RECEIVED_TIMEOUT) {
nextOnStageTimer = 0;
return;
}
nextOnStageTimer++;
_pinVideoThumbnailById(store, clickId);
}, 1000);
}
}

110
react/features/follow-me/subscriber.js Normal file
View File

@ -0,0 +1,110 @@
// @flow
import { StateListenerRegistry } from '../base/redux';
import { getCurrentConference } from '../base/conference';
import {
getPinnedParticipant,
isLocalParticipantModerator
} from '../base/participants';
import { FOLLOW_ME_COMMAND } from './constants';
/**
* Subscribes to changes to the Follow Me setting for the local participant to
* notify remote participants of current user interface status.
*
* @param sharedDocumentVisible {Boolean} {true} if the shared document was
* shown (as a result of the toggle) or {false} if it was hidden
*/
StateListenerRegistry.register(
/* selector */ state => state['features/base/conference'].followMeEnabled,
/* listener */ _sendFollowMeCommand);
/**
* Subscribes to changes to the currently pinned participant in the user
* interface of the local participant.
*/
StateListenerRegistry.register(
/* selector */ state => {
const pinnedParticipant = getPinnedParticipant(state);
return pinnedParticipant ? pinnedParticipant.id : null;
},
/* listener */ _sendFollowMeCommand);
/**
* Subscribes to changes to the shared document (etherpad) visibility in the
* user interface of the local participant.
*
* @param sharedDocumentVisible {Boolean} {true} if the shared document was
* shown (as a result of the toggle) or {false} if it was hidden
*/
StateListenerRegistry.register(
/* selector */ state => state['features/etherpad'].editing,
/* listener */ _sendFollowMeCommand);
/**
* Subscribes to changes to the filmstrip visibility in the user interface of
* the local participant.
*/
StateListenerRegistry.register(
/* selector */ state => state['features/filmstrip'].visible,
/* listener */ _sendFollowMeCommand);
/**
* Subscribes to changes to the tile view setting in the user interface of the
* local participant.
*/
StateListenerRegistry.register(
/* selector */ state => state['features/video-layout'].tileViewEnabled,
/* listener */ _sendFollowMeCommand);
/**
* Private selector for returning state from redux that should be respected by
* other participants while follow me is enabled.
*
* @param {Object} state - The redux state.
* @returns {Object}
*/
function _getFollowMeState(state) {
const pinnedParticipant = getPinnedParticipant(state);
return {
filmstripVisible: state['features/filmstrip'].visible,
nextOnStage: pinnedParticipant && pinnedParticipant.id,
sharedDocumentVisible: state['features/etherpad'].editing,
tileViewEnabled: state['features/video-layout'].tileViewEnabled
};
}
/**
* Sends the follow-me command, when a local property change occurs.
*
* @param {*} newSelectedValue - The changed selected value from the selector.
* @param {Object} store - The redux store.
* @private
* @returns {void}
*/
function _sendFollowMeCommand(
newSelectedValue, store) { // eslint-disable-line no-unused-vars
const state = store.getState();
const conference = getCurrentConference(state);
if (!conference || !state['features/base/conference'].followMeEnabled) {
return;
}
// Only a moderator is allowed to send commands.
if (!isLocalParticipantModerator(state)) {
return;
}
// XXX The "Follow Me" command represents a snapshot of all states
// which are to be followed so don't forget to removeCommand before
// sendCommand!
conference.removeCommand(FOLLOW_ME_COMMAND);
conference.sendCommandOnce(
FOLLOW_ME_COMMAND,
{ attributes: _getFollowMeState(state) }
);
}

11
react/features/video-layout/middleware.web.js
View File

@ -1,7 +1,6 @@
// @flow // @flow
import VideoLayout from '../../../modules/UI/videolayout/VideoLayout.js'; import VideoLayout from '../../../modules/UI/videolayout/VideoLayout.js';
import UIEvents from '../../../service/UI/UIEvents';
import { CONFERENCE_JOINED, CONFERENCE_WILL_LEAVE } from '../base/conference'; import { CONFERENCE_JOINED, CONFERENCE_WILL_LEAVE } from '../base/conference';
import { import {
@ -16,7 +15,6 @@ import { MiddlewareRegistry } from '../base/redux';
import { TRACK_ADDED } from '../base/tracks'; import { TRACK_ADDED } from '../base/tracks';
import { SET_FILMSTRIP_VISIBLE } from '../filmstrip'; import { SET_FILMSTRIP_VISIBLE } from '../filmstrip';
import { SET_TILE_VIEW } from './actionTypes';
import './middleware.any'; import './middleware.any';
declare var APP: Object; declare var APP: Object;
@ -73,22 +71,13 @@ MiddlewareRegistry.register(store => next => action => {
case PIN_PARTICIPANT: case PIN_PARTICIPANT:
VideoLayout.onPinChange(action.participant.id); VideoLayout.onPinChange(action.participant.id);
APP.UI.emitEvent(
UIEvents.PINNED_ENDPOINT,
action.participant.id,
Boolean(action.participant.id));
break; break;
case SET_FILMSTRIP_VISIBLE: case SET_FILMSTRIP_VISIBLE:
VideoLayout.resizeVideoArea(true, false); VideoLayout.resizeVideoArea(true, false);
APP.UI.emitEvent(UIEvents.TOGGLED_FILMSTRIP, action.visible);
APP.API.notifyFilmstripDisplayChanged(action.visible); APP.API.notifyFilmstripDisplayChanged(action.visible);
break; break;
case SET_TILE_VIEW:
APP.UI.emitEvent(UIEvents.TOGGLED_TILE_VIEW, action.enabled);
break;
case TRACK_ADDED: case TRACK_ADDED:
if (!action.track.local) { if (!action.track.local) {
VideoLayout.onRemoteStreamAdded(action.track.jitsiTrack); VideoLayout.onRemoteStreamAdded(action.track.jitsiTrack);

12
react/features/video-layout/reducer.js
View File

@ -12,6 +12,18 @@ const DEFAULT_STATE = {
screenShares: [] screenShares: []
}; };
const DEFAULT_STATE = {
/**
* The indicator which determines whether the video layout should display
* video thumbnails in a tiled layout.
*
* @public
* @type {boolean}
*/
tileViewEnabled: false
};
const STORE_NAME = 'features/video-layout'; const STORE_NAME = 'features/video-layout';
PersistenceRegistry.register(STORE_NAME, { PersistenceRegistry.register(STORE_NAME, {

17
service/UI/UIEvents.js
View File

@ -1,6 +1,5 @@
export default { export default {
NICKNAME_CHANGED: 'UI.nickname_changed', NICKNAME_CHANGED: 'UI.nickname_changed',
PINNED_ENDPOINT: 'UI.pinned_endpoint',
/** /**
* Notifies that local user changed email. * Notifies that local user changed email.
@ -43,28 +42,12 @@ export default {
*/ */
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
* after the toggling (at the time of the event emission).
*
* @see {TOGGLE_FILMSTRIP}
*/
TOGGLED_FILMSTRIP: 'UI.toggled_filmstrip',
TOGGLE_SCREENSHARING: 'UI.toggle_screensharing', TOGGLE_SCREENSHARING: 'UI.toggle_screensharing',
TOGGLED_SHARED_DOCUMENT: 'UI.toggled_shared_document',
TOGGLED_TILE_VIEW: 'UI.toggled_tile_view',
HANGUP: 'UI.hangup', HANGUP: 'UI.hangup',
LOGOUT: 'UI.logout', LOGOUT: 'UI.logout',
VIDEO_DEVICE_CHANGED: 'UI.video_device_changed', VIDEO_DEVICE_CHANGED: 'UI.video_device_changed',
AUDIO_DEVICE_CHANGED: 'UI.audio_device_changed', AUDIO_DEVICE_CHANGED: 'UI.audio_device_changed',
/**
* Notifies interested listeners that the follow-me feature is enabled or
* disabled.
*/
FOLLOW_ME_ENABLED: 'UI.follow_me_enabled',
/** /**
* Notifies that flipX property of the local video is changed. * Notifies that flipX property of the local video is changed.
*/ */