"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7550/react/features/filmstrip/subscriber.web.ts" (26 Sep 2023, 8559 Bytes) of package /linux/misc/jitsi-meet-7550.tar.gz:

    1 import { pinParticipant } from '../base/participants/actions';
    2 import { getParticipantCountWithFake } from '../base/participants/functions';
    3 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
    4 import { clientResized, setNarrowLayout } from '../base/responsive-ui/actions';
    5 import { getHideSelfView } from '../base/settings/functions.any';
    6 import { selectParticipantInLargeVideo } from '../large-video/actions.any';
    7 import { getParticipantsPaneOpen } from '../participants-pane/functions';
    8 import { setOverflowDrawer } from '../toolbox/actions.web';
    9 import { LAYOUTS } from '../video-layout/constants';
   10 import { getCurrentLayout, shouldDisplayTileView } from '../video-layout/functions.web';
   11 
   12 import { clearStageParticipants,
   13     setFilmstripVisible,
   14     setHorizontalViewDimensions,
   15     setScreenshareFilmstripParticipant,
   16     setScreensharingTileDimensions,
   17     setStageFilmstripViewDimensions,
   18     setTileViewDimensions,
   19     setVerticalViewDimensions
   20 } from './actions.web';
   21 import {
   22     ASPECT_RATIO_BREAKPOINT,
   23     DISPLAY_DRAWER_THRESHOLD
   24 } from './constants';
   25 import {
   26     isFilmstripResizable,
   27     isTopPanelEnabled
   28 } from './functions.web';
   29 
   30 import './subscriber.any';
   31 
   32 
   33 /**
   34  * Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles.
   35  */
   36 StateListenerRegistry.register(
   37     /* selector */ state => {
   38         return {
   39             numberOfParticipants: getParticipantCountWithFake(state),
   40             disableSelfView: getHideSelfView(state),
   41             localScreenShare: state['features/base/participants'].localScreenShare
   42         };
   43     },
   44     /* listener */ (currentState, store) => {
   45         const state = store.getState();
   46         const resizableFilmstrip = isFilmstripResizable(state);
   47 
   48         if (shouldDisplayTileView(state)) {
   49             store.dispatch(setTileViewDimensions());
   50         }
   51         if (resizableFilmstrip) {
   52             store.dispatch(setVerticalViewDimensions());
   53         }
   54     }, {
   55         deepEquals: true
   56     });
   57 
   58 /**
   59  * Listens for changes in the selected layout to calculate the dimensions of the tile view grid and horizontal view.
   60  */
   61 StateListenerRegistry.register(
   62     /* selector */ state => {
   63         const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
   64 
   65         return {
   66             layout: getCurrentLayout(state),
   67             height: clientHeight,
   68             width: clientWidth
   69         };
   70     },
   71     /* listener */ ({ layout }, store) => {
   72         switch (layout) {
   73         case LAYOUTS.TILE_VIEW: {
   74             const { pinnedParticipant } = store.getState()['features/base/participants'];
   75 
   76             if (pinnedParticipant) {
   77                 store.dispatch(pinParticipant(null));
   78             }
   79             store.dispatch(clearStageParticipants());
   80             store.dispatch(setTileViewDimensions());
   81             break;
   82         }
   83         case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW:
   84             store.dispatch(setHorizontalViewDimensions());
   85             break;
   86         case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
   87             store.dispatch(setVerticalViewDimensions());
   88             if (store.getState()['features/filmstrip'].activeParticipants.length > 1) {
   89                 store.dispatch(clearStageParticipants());
   90             }
   91             break;
   92         case LAYOUTS.STAGE_FILMSTRIP_VIEW:
   93             store.dispatch(pinParticipant(null));
   94             break;
   95         }
   96     }, {
   97         deepEquals: true
   98     });
   99 
  100 /**
  101  * Listens for changes in the chat state to recompute available width.
  102  */
  103 StateListenerRegistry.register(
  104     /* selector */ state => state['features/chat'].isOpen,
  105     /* listener */ (isChatOpen, store) => {
  106         const { innerWidth, innerHeight } = window;
  107 
  108         if (isChatOpen) {
  109             document.body.classList.add('shift-right');
  110         } else {
  111             document.body.classList.remove('shift-right');
  112         }
  113 
  114         store.dispatch(clientResized(innerWidth, innerHeight));
  115     });
  116 
  117 /**
  118  * Listens for changes in the participant pane state to calculate the
  119  * dimensions of the tile view grid and the tiles.
  120  */
  121 StateListenerRegistry.register(
  122     /* selector */ getParticipantsPaneOpen,
  123     /* listener */ (isOpen, store) => {
  124         const { innerWidth, innerHeight } = window;
  125 
  126         store.dispatch(clientResized(innerWidth, innerHeight));
  127     });
  128 
  129 
  130 /**
  131  * Listens for changes in the client width to determine whether the overflow menu(s) should be displayed as drawers.
  132  */
  133 StateListenerRegistry.register(
  134     /* selector */ state => state['features/base/responsive-ui'].clientWidth < DISPLAY_DRAWER_THRESHOLD,
  135     /* listener */ (widthBelowThreshold, store) => {
  136         store.dispatch(setOverflowDrawer(widthBelowThreshold));
  137         store.dispatch(setNarrowLayout(widthBelowThreshold));
  138     });
  139 
  140 /**
  141  * Gracefully hide/show the filmstrip when going past threshold.
  142  */
  143 StateListenerRegistry.register(
  144     /* selector */ state => state['features/base/responsive-ui'].clientWidth < ASPECT_RATIO_BREAKPOINT,
  145     /* listener */ (widthBelowThreshold, store) => {
  146         const state = store.getState();
  147         const { disableFilmstripAutohiding } = state['features/base/config'];
  148 
  149         if (!disableFilmstripAutohiding) {
  150             store.dispatch(setFilmstripVisible(!widthBelowThreshold));
  151         }
  152     });
  153 
  154 /**
  155  * Listens for changes in the filmstrip width to determine the size of the tiles.
  156  */
  157 StateListenerRegistry.register(
  158     /* selector */ state => state['features/filmstrip'].width?.current,
  159     /* listener */(_, store) => {
  160         store.dispatch(setVerticalViewDimensions());
  161     });
  162 
  163 /**
  164  * Listens for changes in the filmstrip config to determine the size of the tiles.
  165  */
  166 StateListenerRegistry.register(
  167     /* selector */ state => state['features/base/config'].filmstrip?.disableResizable,
  168     /* listener */(_, store) => {
  169         store.dispatch(setVerticalViewDimensions());
  170     });
  171 
  172 /**
  173  * Listens for changes to determine the size of the stage filmstrip tiles.
  174  */
  175 StateListenerRegistry.register(
  176     /* selector */ state => {
  177         return {
  178             remoteScreenShares: state['features/video-layout'].remoteScreenShares.length,
  179             length: state['features/filmstrip'].activeParticipants.length,
  180             width: state['features/filmstrip'].width?.current,
  181             visible: state['features/filmstrip'].visible,
  182             clientWidth: state['features/base/responsive-ui'].clientWidth,
  183             clientHeight: state['features/base/responsive-ui'].clientHeight,
  184             tileView: state['features/video-layout'].tileViewEnabled,
  185             height: state['features/filmstrip'].topPanelHeight?.current
  186         };
  187     },
  188     /* listener */(_, store) => {
  189         if (getCurrentLayout(store.getState()) === LAYOUTS.STAGE_FILMSTRIP_VIEW) {
  190             store.dispatch(setStageFilmstripViewDimensions());
  191         }
  192     }, {
  193         deepEquals: true
  194     });
  195 
  196 /**
  197  * Listens for changes in the active participants count determine the stage participant (when
  198  * there's just one).
  199  */
  200 StateListenerRegistry.register(
  201     /* selector */ state => state['features/filmstrip'].activeParticipants,
  202     /* listener */(activeParticipants, store) => {
  203         if (activeParticipants.length <= 1) {
  204             store.dispatch(selectParticipantInLargeVideo());
  205         }
  206     });
  207 
  208 /**
  209  * Listens for changes to determine the size of the screenshare filmstrip.
  210  */
  211 StateListenerRegistry.register(
  212     /* selector */ state => {
  213         return {
  214             length: state['features/video-layout'].remoteScreenShares.length,
  215             clientWidth: state['features/base/responsive-ui'].clientWidth,
  216             clientHeight: state['features/base/responsive-ui'].clientHeight,
  217             height: state['features/filmstrip'].topPanelHeight?.current,
  218             width: state['features/filmstrip'].width?.current,
  219             visible: state['features/filmstrip'].visible,
  220             topPanelVisible: state['features/filmstrip'].topPanelVisible
  221         };
  222     },
  223     /* listener */({ length }, store) => {
  224         if (length >= 1 && isTopPanelEnabled(store.getState())) {
  225             store.dispatch(setScreensharingTileDimensions());
  226         }
  227     }, {
  228         deepEquals: true
  229     });
  230 
  231 /**
  232  * Listens for changes to clear invalid data.
  233  */
  234 StateListenerRegistry.register(
  235     /* selector */ state => state['features/video-layout'].remoteScreenShares.length,
  236     /* listener */(length, store) => {
  237         if (length === 0) {
  238             store.dispatch(setScreenshareFilmstripParticipant());
  239         }
  240     }, {
  241         deepEquals: true
  242     });
  243