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.

subscriber.js 4.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. // @flow
  2. import debounce from 'lodash/debounce';
  3. import { pinParticipant, getPinnedParticipant } from '../base/participants';
  4. import { StateListenerRegistry, equals } from '../base/redux';
  5. import { isFollowMeActive } from '../follow-me';
  6. import { selectParticipant } from '../large-video/actions';
  7. import { setRemoteParticipantsWithScreenShare } from './actions';
  8. declare var APP: Object;
  9. declare var interfaceConfig: Object;
  10. /**
  11. * StateListenerRegistry provides a reliable way of detecting changes to
  12. * preferred layout state and dispatching additional actions.
  13. */
  14. StateListenerRegistry.register(
  15. /* selector */ state => state['features/video-layout'].tileViewEnabled,
  16. /* listener */ (tileViewEnabled, store) => {
  17. const { dispatch } = store;
  18. dispatch(selectParticipant());
  19. }
  20. );
  21. /**
  22. * For auto-pin mode, listen for changes to the known media tracks and look
  23. * for updates to screen shares. The listener is debounced to avoid state
  24. * thrashing that might occur, especially when switching in or out of p2p.
  25. */
  26. StateListenerRegistry.register(
  27. /* selector */ state => state['features/base/tracks'],
  28. /* listener */ debounce((tracks, store) => {
  29. if (!_getAutoPinSetting() || isFollowMeActive(store)) {
  30. return;
  31. }
  32. const oldScreenSharesOrder = store.getState()['features/video-layout'].remoteScreenShares || [];
  33. const knownSharingParticipantIds = tracks.reduce((acc, track) => {
  34. if (track.mediaType === 'video' && track.videoType === 'desktop') {
  35. const skipTrack = _getAutoPinSetting() === 'remote-only' && track.local;
  36. if (!skipTrack) {
  37. acc.push(track.participantId);
  38. }
  39. }
  40. return acc;
  41. }, []);
  42. // Filter out any participants which are no longer screen sharing
  43. // by looping through the known sharing participants and removing any
  44. // participant IDs which are no longer sharing.
  45. const newScreenSharesOrder = oldScreenSharesOrder.filter(
  46. participantId => knownSharingParticipantIds.includes(participantId));
  47. // Make sure all new sharing participant get added to the end of the
  48. // known screen shares.
  49. knownSharingParticipantIds.forEach(participantId => {
  50. if (!newScreenSharesOrder.includes(participantId)) {
  51. newScreenSharesOrder.push(participantId);
  52. }
  53. });
  54. if (!equals(oldScreenSharesOrder, newScreenSharesOrder)) {
  55. store.dispatch(
  56. setRemoteParticipantsWithScreenShare(newScreenSharesOrder));
  57. _updateAutoPinnedParticipant(oldScreenSharesOrder, store);
  58. }
  59. }, 100));
  60. /**
  61. * A selector for retrieving the current automatic pinning setting.
  62. *
  63. * @private
  64. * @returns {string|undefined} The string "remote-only" is returned if only
  65. * remote screensharing should be automatically pinned, any other truthy value
  66. * means automatically pin all screenshares. Falsy means do not automatically
  67. * pin any screenshares.
  68. */
  69. function _getAutoPinSetting() {
  70. return typeof interfaceConfig === 'object'
  71. ? interfaceConfig.AUTO_PIN_LATEST_SCREEN_SHARE
  72. : 'remote-only';
  73. }
  74. /**
  75. * Private helper to automatically pin the latest screen share stream or unpin
  76. * if there are no more screen share streams.
  77. *
  78. * @param {Array<string>} screenShares - Array containing the list of all the screensharing endpoints
  79. * before the update was triggered (including the ones that have been removed from redux because of the update).
  80. * @param {Store} store - The redux store.
  81. * @returns {void}
  82. */
  83. function _updateAutoPinnedParticipant(screenShares, { dispatch, getState }) {
  84. const state = getState();
  85. const remoteScreenShares = state['features/video-layout'].remoteScreenShares;
  86. const pinned = getPinnedParticipant(getState);
  87. // Unpin the screenshare when the screensharing participant leaves. Switch to tile view if no other
  88. // participant was pinned before screenshare was auto-pinned, pin the previously pinned participant otherwise.
  89. if (!remoteScreenShares?.length) {
  90. let participantId = null;
  91. if (pinned && !screenShares.find(share => share === pinned.id)) {
  92. participantId = pinned.id;
  93. }
  94. dispatch(pinParticipant(participantId));
  95. return;
  96. }
  97. const latestScreenshareParticipantId = remoteScreenShares[remoteScreenShares.length - 1];
  98. if (latestScreenshareParticipantId) {
  99. dispatch(pinParticipant(latestScreenshareParticipantId));
  100. }
  101. }