text: // @flow
  import type { Dispatch } from 'redux';
  
  import { getLocalParticipant, getRemoteParticipants, pinParticipant } from '../base/participants';
  
  import {
      SET_HORIZONTAL_VIEW_DIMENSIONS,
      SET_TILE_VIEW_DIMENSIONS,
      SET_VERTICAL_VIEW_DIMENSIONS,
      SET_VISIBLE_REMOTE_PARTICIPANTS,
      SET_VOLUME
  } from './actionTypes';
  import {
      HORIZONTAL_FILMSTRIP_MARGIN,
      SCROLL_SIZE,
      STAGE_VIEW_THUMBNAIL_HORIZONTAL_BORDER,
      STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER,
      TILE_HORIZONTAL_MARGIN,
      TILE_VERTICAL_MARGIN,
      VERTICAL_FILMSTRIP_VERTICAL_MARGIN
  } from './constants';
  import {
      calculateThumbnailSizeForHorizontalView,
      calculateThumbnailSizeForTileView,
      calculateThumbnailSizeForVerticalView
  } from './functions';
  
  /**
   * Sets the dimensions of the tile view grid.
   *
   * @param {Object} dimensions - Whether the filmstrip is visible.
   * @param {Object | Function} stateful - An object or function that can be
   * resolved to Redux state using the {@code toState} function.
   * @returns {Function}
   */
  export function setTileViewDimensions(dimensions: Object) {
      return (dispatch: Dispatch<any>, getState: Function) => {
          const state = getState();
          const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
          const { disableResponsiveTiles } = state['features/base/config'];
          const {
              height,
              width
          } = calculateThumbnailSizeForTileView({
              ...dimensions,
              clientWidth,
              clientHeight,
              disableResponsiveTiles
          });
          const { columns, rows } = dimensions;
          const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
          const hasScroll = clientHeight < thumbnailsTotalHeight;
          const filmstripWidth = (columns * (TILE_HORIZONTAL_MARGIN + width)) + (hasScroll ? SCROLL_SIZE : 0);
          const filmstripHeight = Math.min(clientHeight, thumbnailsTotalHeight);
  
          dispatch({
              type: SET_TILE_VIEW_DIMENSIONS,
              dimensions: {
                  gridDimensions: dimensions,
                  thumbnailSize: {
                      height,
                      width
                  },
                  filmstripHeight,
                  filmstripWidth
              }
          });
      };
  }
  
  /**
   * Sets the dimensions of the thumbnails in vertical view.
   *
   * @returns {Function}
   */
  export function setVerticalViewDimensions() {
      return (dispatch: Dispatch<any>, getState: Function) => {
          const state = getState();
          const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
          const thumbnails = calculateThumbnailSizeForVerticalView(clientWidth);
  
          dispatch({
              type: SET_VERTICAL_VIEW_DIMENSIONS,
              dimensions: {
                  ...thumbnails,
                  remoteVideosContainer: {
                      width: thumbnails?.local?.width
                          + TILE_HORIZONTAL_MARGIN + STAGE_VIEW_THUMBNAIL_HORIZONTAL_BORDER + SCROLL_SIZE,
                      height: clientHeight - thumbnails?.local?.height - VERTICAL_FILMSTRIP_VERTICAL_MARGIN
                  }
              }
  
          });
      };
  }
  
  /**
   * Sets the dimensions of the thumbnails in horizontal view.
   *
   * @returns {Function}
   */
  export function setHorizontalViewDimensions() {
      return (dispatch: Dispatch<any>, getState: Function) => {
          const state = getState();
          const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
          const thumbnails = calculateThumbnailSizeForHorizontalView(clientHeight);
  
          dispatch({
              type: SET_HORIZONTAL_VIEW_DIMENSIONS,
              dimensions: {
                  ...thumbnails,
                  remoteVideosContainer: {
                      width: clientWidth - thumbnails?.local?.width - HORIZONTAL_FILMSTRIP_MARGIN,
                      height: thumbnails?.local?.height
                          + TILE_VERTICAL_MARGIN + STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER + SCROLL_SIZE
                  }
              }
          });
      };
  }
  
  /**
   * Emulates a click on the n-th video.
   *
   * @param {number} n - Number that identifies the video.
   * @returns {Function}
   */
  export function clickOnVideo(n: number) {
      return (dispatch: Function, getState: Function) => {
          const state = getState();
          const participants = [ getLocalParticipant(state), ...getRemoteParticipants(state).values() ];
          const nThParticipant = participants[n];
          const { id, pinned } = nThParticipant;
  
          dispatch(pinParticipant(pinned ? null : id));
      };
  }
  
  /**
   * Sets the volume for a thumbnail's audio.
   *
   * @param {string} participantId - The participant ID asociated with the audio.
   * @param {string} volume - The volume level.
   * @returns {{
   *     type: SET_VOLUME,
   *     participantId: string,
   *     volume: number
   * }}
   */
  export function setVolume(participantId: string, volume: number) {
      return {
          type: SET_VOLUME,
          participantId,
          volume
      };
  }
  
  /**
   * Sets the list of the visible participants in the filmstrip by storing the start and end index from the remote
   * participants array.
   *
   * @param {number} startIndex - The start index from the remote participants array.
   * @param {number} endIndex - The end index from the remote participants array.
   * @returns {{
   *      type: SET_VISIBLE_REMOTE_PARTICIPANTS,
   *      startIndex: number,
   *      endIndex: number
   * }}
   */
  export function setVisibleRemoteParticipants(startIndex: number, endIndex: number) {
      return {
          type: SET_VISIBLE_REMOTE_PARTICIPANTS,
          startIndex,
          endIndex
      };
  }
  
  export * from './actions.native';
  