您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

VideoLayout.js 33KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154
  1. /* global APP, $, interfaceConfig */
  2. const logger = require('jitsi-meet-logger').getLogger(__filename);
  3. import {
  4. JitsiParticipantConnectionStatus
  5. } from '../../../react/features/base/lib-jitsi-meet';
  6. import {
  7. getPinnedParticipant,
  8. pinParticipant
  9. } from '../../../react/features/base/participants';
  10. import Filmstrip from './Filmstrip';
  11. import UIEvents from '../../../service/UI/UIEvents';
  12. import UIUtil from '../util/UIUtil';
  13. import RemoteVideo from './RemoteVideo';
  14. import LargeVideoManager from './LargeVideoManager';
  15. import { VIDEO_CONTAINER_TYPE } from './VideoContainer';
  16. import LocalVideo from './LocalVideo';
  17. const remoteVideos = {};
  18. let localVideoThumbnail = null;
  19. let eventEmitter = null;
  20. let largeVideo;
  21. /**
  22. * flipX state of the localVideo
  23. */
  24. let localFlipX = null;
  25. /**
  26. * Handler for local flip X changed event.
  27. * @param {Object} val
  28. */
  29. function onLocalFlipXChanged(val) {
  30. localFlipX = val;
  31. if (largeVideo) {
  32. largeVideo.onLocalFlipXChange(val);
  33. }
  34. }
  35. /**
  36. * Returns the redux representation of all known users.
  37. *
  38. * @private
  39. * @returns {Array}
  40. */
  41. function getAllParticipants() {
  42. return APP.store.getState()['features/base/participants'];
  43. }
  44. /**
  45. * Returns an array of all thumbnails in the filmstrip.
  46. *
  47. * @private
  48. * @returns {Array}
  49. */
  50. function getAllThumbnails() {
  51. return [
  52. localVideoThumbnail,
  53. ...Object.values(remoteVideos)
  54. ];
  55. }
  56. /**
  57. * Returns the user ID of the remote participant that is current the dominant
  58. * speaker.
  59. *
  60. * @private
  61. * @returns {string|null}
  62. */
  63. function getCurrentRemoteDominantSpeakerID() {
  64. const dominantSpeaker = getAllParticipants()
  65. .find(participant => participant.dominantSpeaker);
  66. if (dominantSpeaker) {
  67. return dominantSpeaker.local ? null : dominantSpeaker.id;
  68. }
  69. return null;
  70. }
  71. /**
  72. * Returns the corresponding resource id to the given peer container
  73. * DOM element.
  74. *
  75. * @return the corresponding resource id to the given peer container
  76. * DOM element
  77. */
  78. function getPeerContainerResourceId(containerElement) {
  79. if (localVideoThumbnail.container === containerElement) {
  80. return localVideoThumbnail.id;
  81. }
  82. const i = containerElement.id.indexOf('participant_');
  83. if (i >= 0) {
  84. return containerElement.id.substring(i + 12);
  85. }
  86. }
  87. const VideoLayout = {
  88. init(emitter) {
  89. eventEmitter = emitter;
  90. localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
  91. // sets default video type of local video
  92. // FIXME container type is totally different thing from the video type
  93. localVideoThumbnail.setVideoType(VIDEO_CONTAINER_TYPE);
  94. // if we do not resize the thumbs here, if there is no video device
  95. // the local video thumb maybe one pixel
  96. this.resizeThumbnails(true);
  97. this.registerListeners();
  98. },
  99. /**
  100. * Cleans up any existing largeVideo instance.
  101. *
  102. * @returns {void}
  103. */
  104. resetLargeVideo() {
  105. if (largeVideo) {
  106. largeVideo.destroy();
  107. }
  108. largeVideo = null;
  109. },
  110. /**
  111. * Registering listeners for UI events in Video layout component.
  112. *
  113. * @returns {void}
  114. */
  115. registerListeners() {
  116. eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED,
  117. onLocalFlipXChanged);
  118. },
  119. initLargeVideo() {
  120. this.resetLargeVideo();
  121. largeVideo = new LargeVideoManager(eventEmitter);
  122. if (localFlipX) {
  123. largeVideo.onLocalFlipXChange(localFlipX);
  124. }
  125. largeVideo.updateContainerSize();
  126. },
  127. /**
  128. * Sets the audio level of the video elements associated to the given id.
  129. *
  130. * @param id the video identifier in the form it comes from the library
  131. * @param lvl the new audio level to update to
  132. */
  133. setAudioLevel(id, lvl) {
  134. const smallVideo = this.getSmallVideo(id);
  135. if (smallVideo) {
  136. smallVideo.updateAudioLevelIndicator(lvl);
  137. }
  138. if (largeVideo && id === largeVideo.id) {
  139. largeVideo.updateLargeVideoAudioLevel(lvl);
  140. }
  141. },
  142. changeLocalVideo(stream) {
  143. const localId = APP.conference.getMyUserId();
  144. this.onVideoTypeChanged(localId, stream.videoType);
  145. localVideoThumbnail.changeVideo(stream);
  146. /* Update if we're currently being displayed */
  147. if (this.isCurrentlyOnLarge(localId)) {
  148. this.updateLargeVideo(localId);
  149. }
  150. },
  151. /**
  152. * Get's the localID of the conference and set it to the local video
  153. * (small one). This needs to be called as early as possible, when muc is
  154. * actually joined. Otherwise events can come with information like email
  155. * and setting them assume the id is already set.
  156. */
  157. mucJoined() {
  158. if (largeVideo && !largeVideo.id) {
  159. this.updateLargeVideo(APP.conference.getMyUserId(), true);
  160. }
  161. // FIXME: replace this call with a generic update call once SmallVideo
  162. // only contains a ReactElement. Then remove this call once the
  163. // Filmstrip is fully in React.
  164. localVideoThumbnail.updateIndicators();
  165. },
  166. /**
  167. * Adds or removes icons for not available camera and microphone.
  168. * @param resourceJid the jid of user
  169. * @param devices available devices
  170. */
  171. setDeviceAvailabilityIcons(id, devices) {
  172. if (APP.conference.isLocalId(id)) {
  173. localVideoThumbnail.setDeviceAvailabilityIcons(devices);
  174. return;
  175. }
  176. const video = remoteVideos[id];
  177. if (!video) {
  178. return;
  179. }
  180. video.setDeviceAvailabilityIcons(devices);
  181. },
  182. /**
  183. * Enables/disables device availability icons for the given participant id.
  184. * The default value is {true}.
  185. * @param id the identifier of the participant
  186. * @param enable {true} to enable device availability icons
  187. */
  188. enableDeviceAvailabilityIcons(id, enable) {
  189. let video;
  190. if (APP.conference.isLocalId(id)) {
  191. video = localVideoThumbnail;
  192. } else {
  193. video = remoteVideos[id];
  194. }
  195. if (video) {
  196. video.enableDeviceAvailabilityIcons(enable);
  197. }
  198. },
  199. /**
  200. * Shows/hides local video.
  201. * @param {boolean} true to make the local video visible, false - otherwise
  202. */
  203. setLocalVideoVisible(visible) {
  204. localVideoThumbnail.setVisible(visible);
  205. },
  206. /**
  207. * Checks if removed video is currently displayed and tries to display
  208. * another one instead.
  209. * Uses focusedID if any or dominantSpeakerID if any,
  210. * otherwise elects new video, in this order.
  211. */
  212. updateAfterThumbRemoved(id) {
  213. // Always trigger an update if large video is empty.
  214. if (!largeVideo
  215. || (this.getLargeVideoID() && !this.isCurrentlyOnLarge(id))) {
  216. return;
  217. }
  218. const pinnedId = this.getPinnedId();
  219. let newId;
  220. if (pinnedId) {
  221. newId = pinnedId;
  222. } else if (getCurrentRemoteDominantSpeakerID()) {
  223. newId = getCurrentRemoteDominantSpeakerID();
  224. } else { // Otherwise select last visible video
  225. newId = this.electLastVisibleVideo();
  226. }
  227. this.updateLargeVideo(newId);
  228. },
  229. electLastVisibleVideo() {
  230. // pick the last visible video in the row
  231. // if nobody else is left, this picks the local video
  232. const remoteThumbs = Filmstrip.getThumbs(true).remoteThumbs;
  233. let thumbs = remoteThumbs.filter('[id!="mixedstream"]');
  234. const lastVisible = thumbs.filter(':visible:last');
  235. if (lastVisible.length) {
  236. const id = getPeerContainerResourceId(lastVisible[0]);
  237. if (remoteVideos[id]) {
  238. logger.info(`electLastVisibleVideo: ${id}`);
  239. return id;
  240. }
  241. // The RemoteVideo was removed (but the DOM elements may still
  242. // exist).
  243. }
  244. logger.info('Last visible video no longer exists');
  245. thumbs = Filmstrip.getThumbs().remoteThumbs;
  246. if (thumbs.length) {
  247. const id = getPeerContainerResourceId(thumbs[0]);
  248. if (remoteVideos[id]) {
  249. logger.info(`electLastVisibleVideo: ${id}`);
  250. return id;
  251. }
  252. // The RemoteVideo was removed (but the DOM elements may
  253. // still exist).
  254. }
  255. // Go with local video
  256. logger.info('Fallback to local video...');
  257. const id = APP.conference.getMyUserId();
  258. logger.info(`electLastVisibleVideo: ${id}`);
  259. return id;
  260. },
  261. onRemoteStreamAdded(stream) {
  262. const id = stream.getParticipantId();
  263. const remoteVideo = remoteVideos[id];
  264. if (!remoteVideo) {
  265. return;
  266. }
  267. remoteVideo.addRemoteStreamElement(stream);
  268. // Make sure track's muted state is reflected
  269. if (stream.getType() === 'audio') {
  270. this.onAudioMute(stream.getParticipantId(), stream.isMuted());
  271. } else {
  272. this.onVideoMute(stream.getParticipantId(), stream.isMuted());
  273. }
  274. },
  275. onRemoteStreamRemoved(stream) {
  276. const id = stream.getParticipantId();
  277. const remoteVideo = remoteVideos[id];
  278. // Remote stream may be removed after participant left the conference.
  279. if (remoteVideo) {
  280. remoteVideo.removeRemoteStreamElement(stream);
  281. }
  282. this.updateMutedForNoTracks(id, stream.getType());
  283. },
  284. /**
  285. * FIXME get rid of this method once muted indicator are reactified (by
  286. * making sure that user with no tracks is displayed as muted )
  287. *
  288. * If participant has no tracks will make the UI display muted status.
  289. * @param {string} participantId
  290. * @param {string} mediaType 'audio' or 'video'
  291. */
  292. updateMutedForNoTracks(participantId, mediaType) {
  293. const participant = APP.conference.getParticipantById(participantId);
  294. if (participant
  295. && !participant.getTracksByMediaType(mediaType).length) {
  296. if (mediaType === 'audio') {
  297. APP.UI.setAudioMuted(participantId, true);
  298. } else if (mediaType === 'video') {
  299. APP.UI.setVideoMuted(participantId, true);
  300. } else {
  301. logger.error(`Unsupported media type: ${mediaType}`);
  302. }
  303. }
  304. },
  305. /**
  306. * Return the type of the remote video.
  307. * @param id the id for the remote video
  308. * @returns {String} the video type video or screen.
  309. */
  310. getRemoteVideoType(id) {
  311. const smallVideo = VideoLayout.getSmallVideo(id);
  312. return smallVideo ? smallVideo.getVideoType() : null;
  313. },
  314. isPinned(id) {
  315. return id === this.getPinnedId();
  316. },
  317. getPinnedId() {
  318. const { id } = getPinnedParticipant(APP.store.getState()) || {};
  319. return id || null;
  320. },
  321. /**
  322. * Callback invoked to update display when the pin participant has changed.
  323. *
  324. * @paramn {string|null} pinnedParticipantID - The participant ID of the
  325. * participant that is pinned or null if no one is pinned.
  326. * @returns {void}
  327. */
  328. onPinChange(pinnedParticipantID) {
  329. if (interfaceConfig.filmStripOnly) {
  330. return;
  331. }
  332. getAllThumbnails().forEach(thumbnail =>
  333. thumbnail.focus(pinnedParticipantID === thumbnail.getId()));
  334. if (pinnedParticipantID) {
  335. this.updateLargeVideo(pinnedParticipantID);
  336. } else {
  337. const currentDominantSpeakerID
  338. = getCurrentRemoteDominantSpeakerID();
  339. if (currentDominantSpeakerID) {
  340. this.updateLargeVideo(currentDominantSpeakerID);
  341. } else {
  342. // if there is no currentDominantSpeakerID, it can also be
  343. // that local participant is the dominant speaker
  344. // we should act as a participant has left and was on large
  345. // and we should choose somebody (electLastVisibleVideo)
  346. this.updateLargeVideo(this.electLastVisibleVideo());
  347. }
  348. }
  349. },
  350. /**
  351. * Creates or adds a participant container for the given id and smallVideo.
  352. *
  353. * @param {JitsiParticipant} user the participant to add
  354. * @param {SmallVideo} smallVideo optional small video instance to add as a
  355. * remote video, if undefined <tt>RemoteVideo</tt> will be created
  356. */
  357. addParticipantContainer(user, smallVideo) {
  358. const id = user.getId();
  359. let remoteVideo;
  360. if (smallVideo) {
  361. remoteVideo = smallVideo;
  362. } else {
  363. remoteVideo = new RemoteVideo(user, VideoLayout, eventEmitter);
  364. }
  365. this._setRemoteControlProperties(user, remoteVideo);
  366. this.addRemoteVideoContainer(id, remoteVideo);
  367. this.updateMutedForNoTracks(id, 'audio');
  368. this.updateMutedForNoTracks(id, 'video');
  369. const remoteVideosCount = Object.keys(remoteVideos).length;
  370. if (remoteVideosCount === 1) {
  371. window.setTimeout(() => {
  372. const updatedRemoteVideosCount
  373. = Object.keys(remoteVideos).length;
  374. if (updatedRemoteVideosCount === 1 && remoteVideos[id]) {
  375. this._maybePlaceParticipantOnLargeVideo(id);
  376. }
  377. }, 3000);
  378. }
  379. },
  380. /**
  381. * Adds remote video container for the given id and <tt>SmallVideo</tt>.
  382. *
  383. * @param {string} the id of the video to add
  384. * @param {SmallVideo} smallVideo the small video instance to add as a
  385. * remote video
  386. */
  387. addRemoteVideoContainer(id, remoteVideo) {
  388. remoteVideos[id] = remoteVideo;
  389. if (!remoteVideo.getVideoType()) {
  390. // make video type the default one (camera)
  391. // FIXME container type is not a video type
  392. remoteVideo.setVideoType(VIDEO_CONTAINER_TYPE);
  393. }
  394. VideoLayout.resizeThumbnails(true);
  395. // Initialize the view
  396. remoteVideo.updateView();
  397. },
  398. // FIXME: what does this do???
  399. remoteVideoActive(videoElement, resourceJid) {
  400. logger.info(`${resourceJid} video is now active`, videoElement);
  401. VideoLayout.resizeThumbnails(
  402. false, () => {
  403. if (videoElement) {
  404. $(videoElement).show();
  405. }
  406. });
  407. this._maybePlaceParticipantOnLargeVideo(resourceJid);
  408. },
  409. /**
  410. * Update the large video to the last added video only if there's no current
  411. * dominant, focused speaker or update it to the current dominant speaker.
  412. *
  413. * @params {string} resourceJid - The id of the user to maybe display on
  414. * large video.
  415. * @returns {void}
  416. */
  417. _maybePlaceParticipantOnLargeVideo(resourceJid) {
  418. const pinnedId = this.getPinnedId();
  419. if ((!pinnedId
  420. && !getCurrentRemoteDominantSpeakerID()
  421. && this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE))
  422. || pinnedId === resourceJid
  423. || (!pinnedId && resourceJid
  424. && getCurrentRemoteDominantSpeakerID() === resourceJid)
  425. /* Playback started while we're on the stage - may need to update
  426. video source with the new stream */
  427. || this.isCurrentlyOnLarge(resourceJid)) {
  428. this.updateLargeVideo(resourceJid, true);
  429. }
  430. },
  431. /**
  432. * Shows a visual indicator for the moderator of the conference.
  433. * On local or remote participants.
  434. */
  435. showModeratorIndicator() {
  436. const isModerator = APP.conference.isModerator;
  437. if (isModerator) {
  438. localVideoThumbnail.addModeratorIndicator();
  439. } else {
  440. localVideoThumbnail.removeModeratorIndicator();
  441. }
  442. APP.conference.listMembers().forEach(member => {
  443. const id = member.getId();
  444. const remoteVideo = remoteVideos[id];
  445. if (!remoteVideo) {
  446. return;
  447. }
  448. if (member.isModerator()) {
  449. remoteVideo.addModeratorIndicator();
  450. }
  451. remoteVideo.updateRemoteVideoMenu();
  452. });
  453. },
  454. /*
  455. * Shows or hides the audio muted indicator over the local thumbnail video.
  456. * @param {boolean} isMuted
  457. */
  458. showLocalAudioIndicator(isMuted) {
  459. localVideoThumbnail.showAudioIndicator(isMuted);
  460. },
  461. /**
  462. * Shows/hides the indication about local connection being interrupted.
  463. *
  464. * @param {boolean} isInterrupted <tt>true</tt> if local connection is
  465. * currently in the interrupted state or <tt>false</tt> if the connection
  466. * is fine.
  467. */
  468. showLocalConnectionInterrupted(isInterrupted) {
  469. // Currently local video thumbnail displays only "active" or
  470. // "interrupted" despite the fact that ConnectionIndicator supports more
  471. // states.
  472. const status
  473. = isInterrupted
  474. ? JitsiParticipantConnectionStatus.INTERRUPTED
  475. : JitsiParticipantConnectionStatus.ACTIVE;
  476. localVideoThumbnail.updateConnectionStatus(status);
  477. },
  478. /**
  479. * Resizes thumbnails.
  480. */
  481. resizeThumbnails(
  482. forceUpdate = false,
  483. onComplete = null) {
  484. const { localVideo, remoteVideo }
  485. = Filmstrip.calculateThumbnailSize();
  486. Filmstrip.resizeThumbnails(localVideo, remoteVideo, forceUpdate);
  487. if (onComplete && typeof onComplete === 'function') {
  488. onComplete();
  489. }
  490. return { localVideo,
  491. remoteVideo };
  492. },
  493. /**
  494. * On audio muted event.
  495. */
  496. onAudioMute(id, isMuted) {
  497. if (APP.conference.isLocalId(id)) {
  498. localVideoThumbnail.showAudioIndicator(isMuted);
  499. } else {
  500. const remoteVideo = remoteVideos[id];
  501. if (!remoteVideo) {
  502. return;
  503. }
  504. remoteVideo.showAudioIndicator(isMuted);
  505. remoteVideo.updateRemoteVideoMenu(isMuted);
  506. }
  507. },
  508. /**
  509. * On video muted event.
  510. */
  511. onVideoMute(id, value) {
  512. if (APP.conference.isLocalId(id)) {
  513. localVideoThumbnail.setVideoMutedView(value);
  514. } else {
  515. const remoteVideo = remoteVideos[id];
  516. if (remoteVideo) {
  517. remoteVideo.setVideoMutedView(value);
  518. }
  519. }
  520. if (this.isCurrentlyOnLarge(id)) {
  521. // large video will show avatar instead of muted stream
  522. this.updateLargeVideo(id, true);
  523. }
  524. },
  525. /**
  526. * Display name changed.
  527. */
  528. onDisplayNameChanged(id, displayName, status) {
  529. if (id === 'localVideoContainer'
  530. || APP.conference.isLocalId(id)) {
  531. localVideoThumbnail.setDisplayName(displayName);
  532. } else {
  533. const remoteVideo = remoteVideos[id];
  534. if (remoteVideo) {
  535. remoteVideo.setDisplayName(displayName, status);
  536. }
  537. }
  538. },
  539. /**
  540. * Sets the "raised hand" status for a participant identified by 'id'.
  541. */
  542. setRaisedHandStatus(id, raisedHandStatus) {
  543. const video
  544. = APP.conference.isLocalId(id)
  545. ? localVideoThumbnail : remoteVideos[id];
  546. if (video) {
  547. video.showRaisedHandIndicator(raisedHandStatus);
  548. if (raisedHandStatus) {
  549. video.showDominantSpeakerIndicator(false);
  550. }
  551. }
  552. },
  553. /**
  554. * On dominant speaker changed event.
  555. *
  556. * @param {string} id - The participant ID of the new dominant speaker.
  557. * @returns {void}
  558. */
  559. onDominantSpeakerChanged(id) {
  560. getAllThumbnails().forEach(thumbnail =>
  561. thumbnail.showDominantSpeakerIndicator(id === thumbnail.getId()));
  562. if (!remoteVideos[id]) {
  563. return;
  564. }
  565. // Local video will not have container found, but that's ok
  566. // since we don't want to switch to local video.
  567. if (!interfaceConfig.filmStripOnly && !this.getPinnedId()
  568. && !this.getCurrentlyOnLargeContainer().stayOnStage()) {
  569. this.updateLargeVideo(id);
  570. }
  571. },
  572. /**
  573. * Shows/hides warning about remote user's connectivity issues.
  574. *
  575. * @param {string} id the ID of the remote participant(MUC nickname)
  576. */
  577. // eslint-disable-next-line no-unused-vars
  578. onParticipantConnectionStatusChanged(id) {
  579. // Show/hide warning on the large video
  580. if (this.isCurrentlyOnLarge(id)) {
  581. if (largeVideo) {
  582. // We have to trigger full large video update to transition from
  583. // avatar to video on connectivity restored.
  584. this.updateLargeVideo(id, true /* force update */);
  585. }
  586. }
  587. // Show/hide warning on the thumbnail
  588. const remoteVideo = remoteVideos[id];
  589. if (remoteVideo) {
  590. // Updating only connection status indicator is not enough, because
  591. // when we the connection is restored while the avatar was displayed
  592. // (due to 'muted while disconnected' condition) we may want to show
  593. // the video stream again and in order to do that the display mode
  594. // must be updated.
  595. // remoteVideo.updateConnectionStatusIndicator(isActive);
  596. remoteVideo.updateView();
  597. }
  598. },
  599. /**
  600. * On last N change event.
  601. *
  602. * @param endpointsLeavingLastN the list currently leaving last N
  603. * endpoints
  604. * @param endpointsEnteringLastN the list currently entering last N
  605. * endpoints
  606. */
  607. onLastNEndpointsChanged(endpointsLeavingLastN, endpointsEnteringLastN) {
  608. if (endpointsLeavingLastN) {
  609. endpointsLeavingLastN.forEach(this._updateRemoteVideo, this);
  610. }
  611. if (endpointsEnteringLastN) {
  612. endpointsEnteringLastN.forEach(this._updateRemoteVideo, this);
  613. }
  614. },
  615. /**
  616. * Updates remote video by id if it exists.
  617. * @param {string} id of the remote video
  618. * @private
  619. */
  620. _updateRemoteVideo(id) {
  621. const remoteVideo = remoteVideos[id];
  622. if (remoteVideo) {
  623. remoteVideo.updateView();
  624. if (remoteVideo.isCurrentlyOnLargeVideo()) {
  625. this.updateLargeVideo(id);
  626. }
  627. }
  628. },
  629. /**
  630. * Hides the connection indicator
  631. * @param id
  632. */
  633. hideConnectionIndicator(id) {
  634. const remoteVideo = remoteVideos[id];
  635. if (remoteVideo) {
  636. remoteVideo.removeConnectionIndicator();
  637. }
  638. },
  639. /**
  640. * Hides all the indicators
  641. */
  642. hideStats() {
  643. for (const video in remoteVideos) { // eslint-disable-line guard-for-in
  644. const remoteVideo = remoteVideos[video];
  645. if (remoteVideo) {
  646. remoteVideo.removeConnectionIndicator();
  647. }
  648. }
  649. localVideoThumbnail.removeConnectionIndicator();
  650. },
  651. removeParticipantContainer(id) {
  652. // Unlock large video
  653. if (this.getPinnedId() === id) {
  654. logger.info('Focused video owner has left the conference');
  655. APP.store.dispatch(pinParticipant(null));
  656. }
  657. const remoteVideo = remoteVideos[id];
  658. if (remoteVideo) {
  659. // Remove remote video
  660. logger.info(`Removing remote video: ${id}`);
  661. delete remoteVideos[id];
  662. remoteVideo.remove();
  663. } else {
  664. logger.warn(`No remote video for ${id}`);
  665. }
  666. VideoLayout.resizeThumbnails();
  667. },
  668. onVideoTypeChanged(id, newVideoType) {
  669. if (VideoLayout.getRemoteVideoType(id) === newVideoType) {
  670. return;
  671. }
  672. logger.info('Peer video type changed: ', id, newVideoType);
  673. let smallVideo;
  674. if (APP.conference.isLocalId(id)) {
  675. if (!localVideoThumbnail) {
  676. logger.warn('Local video not ready yet');
  677. return;
  678. }
  679. smallVideo = localVideoThumbnail;
  680. } else if (remoteVideos[id]) {
  681. smallVideo = remoteVideos[id];
  682. } else {
  683. return;
  684. }
  685. smallVideo.setVideoType(newVideoType);
  686. if (this.isCurrentlyOnLarge(id)) {
  687. this.updateLargeVideo(id, true);
  688. }
  689. },
  690. /**
  691. * Resizes the video area.
  692. *
  693. * TODO: Remove the "animate" param as it is no longer passed in as true.
  694. *
  695. * @param forceUpdate indicates that hidden thumbnails will be shown
  696. */
  697. resizeVideoArea(
  698. forceUpdate = false,
  699. animate = false) {
  700. if (largeVideo) {
  701. largeVideo.updateContainerSize();
  702. largeVideo.resize(animate);
  703. }
  704. // Calculate available width and height.
  705. const availableHeight = window.innerHeight;
  706. const availableWidth = UIUtil.getAvailableVideoWidth();
  707. if (availableWidth < 0 || availableHeight < 0) {
  708. return;
  709. }
  710. // Resize the thumbnails first.
  711. this.resizeThumbnails(forceUpdate);
  712. },
  713. getSmallVideo(id) {
  714. if (APP.conference.isLocalId(id)) {
  715. return localVideoThumbnail;
  716. }
  717. return remoteVideos[id];
  718. },
  719. changeUserAvatar(id, avatarUrl) {
  720. const smallVideo = VideoLayout.getSmallVideo(id);
  721. if (smallVideo) {
  722. smallVideo.avatarChanged(avatarUrl);
  723. } else {
  724. logger.warn(
  725. `Missed avatar update - no small video yet for ${id}`
  726. );
  727. }
  728. if (this.isCurrentlyOnLarge(id)) {
  729. largeVideo.updateAvatar(avatarUrl);
  730. }
  731. },
  732. /**
  733. * Indicates that the video has been interrupted.
  734. */
  735. onVideoInterrupted() {
  736. if (largeVideo) {
  737. largeVideo.onVideoInterrupted();
  738. }
  739. },
  740. /**
  741. * Indicates that the video has been restored.
  742. */
  743. onVideoRestored() {
  744. if (largeVideo) {
  745. largeVideo.onVideoRestored();
  746. }
  747. },
  748. isLargeVideoVisible() {
  749. return this.isLargeContainerTypeVisible(VIDEO_CONTAINER_TYPE);
  750. },
  751. /**
  752. * @return {LargeContainer} the currently displayed container on large
  753. * video.
  754. */
  755. getCurrentlyOnLargeContainer() {
  756. return largeVideo.getCurrentContainer();
  757. },
  758. isCurrentlyOnLarge(id) {
  759. return largeVideo && largeVideo.id === id;
  760. },
  761. /**
  762. * Triggers an update of remote video and large video displays so they may
  763. * pick up any state changes that have occurred elsewhere.
  764. *
  765. * @returns {void}
  766. */
  767. updateAllVideos() {
  768. const displayedUserId = this.getLargeVideoID();
  769. if (displayedUserId) {
  770. this.updateLargeVideo(displayedUserId, true);
  771. }
  772. Object.keys(remoteVideos).forEach(video => {
  773. remoteVideos[video].updateView();
  774. });
  775. },
  776. updateLargeVideo(id, forceUpdate) {
  777. if (!largeVideo) {
  778. return;
  779. }
  780. const currentContainer = largeVideo.getCurrentContainer();
  781. const currentContainerType = largeVideo.getCurrentContainerType();
  782. const currentId = largeVideo.id;
  783. const isOnLarge = this.isCurrentlyOnLarge(id);
  784. const smallVideo = this.getSmallVideo(id);
  785. if (isOnLarge && !forceUpdate
  786. && LargeVideoManager.isVideoContainer(currentContainerType)
  787. && smallVideo) {
  788. const currentStreamId = currentContainer.getStreamID();
  789. const newStreamId
  790. = smallVideo.videoStream
  791. ? smallVideo.videoStream.getId() : null;
  792. // FIXME it might be possible to get rid of 'forceUpdate' argument
  793. if (currentStreamId !== newStreamId) {
  794. logger.debug('Enforcing large video update for stream change');
  795. forceUpdate = true; // eslint-disable-line no-param-reassign
  796. }
  797. }
  798. if (!isOnLarge || forceUpdate) {
  799. const videoType = this.getRemoteVideoType(id);
  800. // FIXME video type is not the same thing as container type
  801. if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) {
  802. eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
  803. }
  804. let oldSmallVideo;
  805. if (currentId) {
  806. oldSmallVideo = this.getSmallVideo(currentId);
  807. }
  808. smallVideo.waitForResolutionChange();
  809. if (oldSmallVideo) {
  810. oldSmallVideo.waitForResolutionChange();
  811. }
  812. largeVideo.updateLargeVideo(
  813. id,
  814. smallVideo.videoStream,
  815. videoType
  816. ).then(() => {
  817. // update current small video and the old one
  818. smallVideo.updateView();
  819. oldSmallVideo && oldSmallVideo.updateView();
  820. }, () => {
  821. // use clicked other video during update, nothing to do.
  822. });
  823. } else if (currentId) {
  824. const currentSmallVideo = this.getSmallVideo(currentId);
  825. currentSmallVideo.updateView();
  826. }
  827. },
  828. addLargeVideoContainer(type, container) {
  829. largeVideo && largeVideo.addContainer(type, container);
  830. },
  831. removeLargeVideoContainer(type) {
  832. largeVideo && largeVideo.removeContainer(type);
  833. },
  834. /**
  835. * @returns Promise
  836. */
  837. showLargeVideoContainer(type, show) {
  838. if (!largeVideo) {
  839. return Promise.reject();
  840. }
  841. const isVisible = this.isLargeContainerTypeVisible(type);
  842. if (isVisible === show) {
  843. return Promise.resolve();
  844. }
  845. const currentId = largeVideo.id;
  846. let oldSmallVideo;
  847. if (currentId) {
  848. oldSmallVideo = this.getSmallVideo(currentId);
  849. }
  850. let containerTypeToShow = type;
  851. // if we are hiding a container and there is focusedVideo
  852. // (pinned remote video) use its video type,
  853. // if not then use default type - large video
  854. if (!show) {
  855. const pinnedId = this.getPinnedId();
  856. if (pinnedId) {
  857. containerTypeToShow = this.getRemoteVideoType(pinnedId);
  858. } else {
  859. containerTypeToShow = VIDEO_CONTAINER_TYPE;
  860. }
  861. }
  862. return largeVideo.showContainer(containerTypeToShow)
  863. .then(() => {
  864. if (oldSmallVideo) {
  865. oldSmallVideo && oldSmallVideo.updateView();
  866. }
  867. });
  868. },
  869. isLargeContainerTypeVisible(type) {
  870. return largeVideo && largeVideo.state === type;
  871. },
  872. /**
  873. * Returns the id of the current video shown on large.
  874. * Currently used by tests (torture).
  875. */
  876. getLargeVideoID() {
  877. return largeVideo && largeVideo.id;
  878. },
  879. /**
  880. * Returns the the current video shown on large.
  881. * Currently used by tests (torture).
  882. */
  883. getLargeVideo() {
  884. return largeVideo;
  885. },
  886. /**
  887. * Sets the flipX state of the local video.
  888. * @param {boolean} true for flipped otherwise false;
  889. */
  890. setLocalFlipX(val) {
  891. this.localFlipX = val;
  892. },
  893. getEventEmitter() {
  894. return eventEmitter;
  895. },
  896. /**
  897. * Handles user's features changes.
  898. */
  899. onUserFeaturesChanged(user) {
  900. const video = this.getSmallVideo(user.getId());
  901. if (!video) {
  902. return;
  903. }
  904. this._setRemoteControlProperties(user, video);
  905. },
  906. /**
  907. * Sets the remote control properties (checks whether remote control
  908. * is supported and executes remoteVideo.setRemoteControlSupport).
  909. * @param {JitsiParticipant} user the user that will be checked for remote
  910. * control support.
  911. * @param {RemoteVideo} remoteVideo the remoteVideo on which the properties
  912. * will be set.
  913. */
  914. _setRemoteControlProperties(user, remoteVideo) {
  915. APP.remoteControl.checkUserRemoteControlSupport(user).then(result =>
  916. remoteVideo.setRemoteControlSupport(result));
  917. },
  918. /**
  919. * Returns the wrapper jquery selector for the largeVideo
  920. * @returns {JQuerySelector} the wrapper jquery selector for the largeVideo
  921. */
  922. getLargeVideoWrapper() {
  923. return this.getCurrentlyOnLargeContainer().$wrapper;
  924. },
  925. /**
  926. * Returns the number of remove video ids.
  927. *
  928. * @returns {number} The number of remote videos.
  929. */
  930. getRemoteVideosCount() {
  931. return Object.keys(remoteVideos).length;
  932. },
  933. /**
  934. * Sets the remote control active status for a remote participant.
  935. *
  936. * @param {string} participantID - The id of the remote participant.
  937. * @param {boolean} isActive - The new remote control active status.
  938. * @returns {void}
  939. */
  940. setRemoteControlActiveStatus(participantID, isActive) {
  941. remoteVideos[participantID].setRemoteControlActiveStatus(isActive);
  942. },
  943. /**
  944. * Sets the remote control active status for the local participant.
  945. *
  946. * @returns {void}
  947. */
  948. setLocalRemoteControlActiveChanged() {
  949. Object.values(remoteVideos).forEach(
  950. remoteVideo => remoteVideo.updateRemoteVideoMenu()
  951. );
  952. }
  953. };
  954. export default VideoLayout;