You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VideoLayout.js 35KB

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