From d7bccd0c938af19378ca3c131070f67f50849fae Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Thu, 10 Aug 2017 13:51:35 -0700 Subject: [PATCH] ref(pinning): remove pinnedId state from VideoLayout Instead have VideoLayout reach into redux. --- modules/FollowMe.js | 10 +--- modules/UI/videolayout/VideoLayout.js | 56 ++++++++++++-------- react/features/base/conference/middleware.js | 8 +-- 3 files changed, 36 insertions(+), 38 deletions(-) diff --git a/modules/FollowMe.js b/modules/FollowMe.js index 05197ba2e..a5dc1050d 100644 --- a/modules/FollowMe.js +++ b/modules/FollowMe.js @@ -145,15 +145,9 @@ class FollowMe { _setFollowMeInitialState() { this._filmstripToggled.bind(this, this._UI.isFilmstripVisible()); - var pinnedId = VideoLayout.getPinnedId(); - var isPinned = false; - var smallVideo; - if (pinnedId) { - isPinned = true; - smallVideo = VideoLayout.getSmallVideo(pinnedId); - } + const pinnedId = VideoLayout.getPinnedId(); - this._nextOnStage(smallVideo.getId(), isPinned); + this._nextOnStage(pinnedId, Boolean(pinnedId)); // check whether shared document is enabled/initialized if(this._UI.getSharedDocumentManager()) diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index ce4aa970f..4b7e289de 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -1,7 +1,10 @@ /* global APP, $, interfaceConfig, JitsiMeetJS */ const logger = require("jitsi-meet-logger").getLogger(__filename); -import { pinParticipant } from '../../../react/features/base/participants'; +import { + getPinnedParticipant, + pinParticipant +} from '../../../react/features/base/participants'; import Filmstrip from "./Filmstrip"; import UIEvents from "../../../service/UI/UIEvents"; @@ -22,14 +25,6 @@ var currentDominantSpeaker = null; var eventEmitter = null; -// TODO Remove this private reference to pinnedId once other components -// interested in its updates are moved to react/redux. -/** - * Currently focused video jid - * @type {String} - */ -var pinnedId = null; - /** * flipX state of the localVideo */ @@ -63,7 +58,7 @@ function onContactClicked (id) { // 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. - APP.store.dispatch(pinParticipant(remoteVideo.id)); + this.pinParticipant(remoteVideo.id); } } } @@ -281,6 +276,7 @@ var VideoLayout = { return; } + const pinnedId = this.getPinnedId(); let newId; if (pinnedId) @@ -392,11 +388,25 @@ var VideoLayout = { }, isPinned (id) { - return (pinnedId) ? (id === pinnedId) : false; + return id === this.getPinnedId(); }, getPinnedId () { - return pinnedId; + const { id } = getPinnedParticipant(APP.store.getState()) || {}; + + return id || null; + }, + + /** + * Updates the desired pinned participant and notifies web UI of the change. + * + * @param {string|null} id - The participant id of the participant to be + * pinned. Pass in null to unpin without pinning another participant. + * @returns {void} + */ + pinParticipant(id) { + APP.store.dispatch(pinParticipant(id)); + APP.UI.emitEvent(UIEvents.PINNED_ENDPOINT, id, Boolean(id)); }, /** @@ -406,6 +416,8 @@ var VideoLayout = { */ handleVideoThumbClicked (id) { var smallVideo = VideoLayout.getSmallVideo(id); + const pinnedId = this.getPinnedId(); + if(pinnedId) { var oldSmallVideo = VideoLayout.getSmallVideo(pinnedId); if (oldSmallVideo && !interfaceConfig.filmStripOnly) { @@ -416,9 +428,7 @@ var VideoLayout = { // Unpin if currently pinned. if (pinnedId === id) { - pinnedId = null; - - APP.store.dispatch(pinParticipant(null)); + this.pinParticipant(null); // Enable the currently set dominant speaker. if (currentDominantSpeaker) { @@ -436,14 +446,11 @@ var VideoLayout = { return; } - // Lock new video - pinnedId = id; - // Update focused/pinned interface. if (id) { if (smallVideo && !interfaceConfig.filmStripOnly) { smallVideo.focus(true); - APP.store.dispatch(pinParticipant(id)); + this.pinParticipant(id); } } @@ -530,6 +537,8 @@ var VideoLayout = { * @returns {void} */ _maybePlaceParticipantOnLargeVideo(resourceJid) { + const pinnedId = this.getPinnedId(); + if ((!pinnedId && !currentDominantSpeaker && this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE)) || @@ -727,7 +736,7 @@ var VideoLayout = { // Update the large video if the video source is already available, // otherwise wait for the "videoactive.jingle" event. // FIXME: there is no "videoactive.jingle" event. - if (!interfaceConfig.filmStripOnly && !pinnedId + if (!interfaceConfig.filmStripOnly && !this.getPinnedId() && remoteVideo.hasVideoStarted() && !this.getCurrentlyOnLargeContainer().stayOnStage()) { this.updateLargeVideo(id); @@ -819,10 +828,9 @@ var VideoLayout = { removeParticipantContainer (id) { // Unlock large video - if (pinnedId === id) { + if (this.getPinnedId() === id) { logger.info("Focused video owner has left the conference"); - pinnedId = null; - APP.store.dispatch(pinParticipant(null)); + this.pinParticipant(null); } if (currentDominantSpeaker === id) { @@ -1072,6 +1080,8 @@ var VideoLayout = { // (pinned remote video) use its video type, // if not then use default type - large video if (!show) { + const pinnedId = this.getPinnedId(); + if(pinnedId) containerTypeToShow = this.getRemoteVideoType(pinnedId); else diff --git a/react/features/base/conference/middleware.js b/react/features/base/conference/middleware.js index b629b65d0..d9db61b21 100644 --- a/react/features/base/conference/middleware.js +++ b/react/features/base/conference/middleware.js @@ -176,9 +176,7 @@ function _pinParticipant(store, next, action) { const participantById = getParticipantById(participants, id); let pin; - const shouldEmitToLegacyApp = typeof APP !== 'undefined'; - - if (shouldEmitToLegacyApp) { + if (typeof APP !== 'undefined') { const pinnedParticipant = getPinnedParticipant(participants); const actionName = action.participant.id ? 'pinned' : 'unpinned'; let videoType; @@ -218,10 +216,6 @@ function _pinParticipant(store, next, action) { } } - if (shouldEmitToLegacyApp) { - APP.UI.emitEvent(UIEvents.PINNED_ENDPOINT, id, Boolean(id)); - } - return next(action); }