jiti-meet/react/features/filmstrip/constants.js

146 lines
3.4 KiB
JavaScript
Raw Normal View History

2018-06-14 09:14:32 +00:00
// @flow
import { BoxModel } from '../base/styles';
/**
* The size (height and width) of the small (not tile view) thumbnails.
*/
export const SMALL_THUMBNAIL_SIZE = 80;
2018-06-14 09:14:32 +00:00
/**
* The height of the filmstrip in narrow aspect ratio, or width in wide.
*/
export const FILMSTRIP_SIZE = SMALL_THUMBNAIL_SIZE + BoxModel.margin;
/**
* The aspect ratio of a tile in tile view.
*/
export const TILE_ASPECT_RATIO = 16 / 9;
/**
* The aspect ratio of a square tile in tile view.
*/
export const SQUARE_TILE_ASPECT_RATIO = 1;
/**
* Width below which the overflow menu(s) will be displayed as drawer(s).
*/
export const DISPLAY_DRAWER_THRESHOLD = 512;
/**
* Breakpoint past which a single column view is enforced in tile view.
*/
export const SINGLE_COLUMN_BREAKPOINT = 300;
/**
* Breakpoint past which a two column view is enforced in tile view.
*/
export const TWO_COLUMN_BREAKPOINT = 1000;
/**
* Breakpoint past which the aspect ratio is switched in tile view.
* Also, past this breakpoint, if there are two participants in the conference, we enforce
* single column view.
* If this is to be modified, please also change the related media query from the tile_view scss file.
*/
export const ASPECT_RATIO_BREAKPOINT = 500;
/**
* The default number of columns for tile view.
*/
export const DEFAULT_MAX_COLUMNS = 5;
/**
* An extended number of columns for tile view.
*/
export const ABSOLUTE_MAX_COLUMNS = 7;
/**
* An array of attributes of the video element that will be used for adding a listener for every event in the list.
* The latest event will be stored in redux. This is currently used by torture only.
*/
export const VIDEO_TEST_EVENTS = [
'onAbort',
'onCanPlay',
'onCanPlayThrough',
'onEmptied',
'onEnded',
'onError',
'onLoadedData',
'onLoadedMetadata',
'onLoadStart',
'onPause',
'onPlay',
'onPlaying',
'onRateChange',
'onStalled',
'onSuspend',
'onWaiting'
];
/**
* Display mode constant used when video is being displayed on the small video.
* @type {number}
* @constant
*/
export const DISPLAY_VIDEO = 0;
/**
* Display mode constant used when the user's avatar is being displayed on
* the small video.
* @type {number}
* @constant
*/
export const DISPLAY_AVATAR = 1;
/**
* Display mode constant used when neither video nor avatar is being displayed
* on the small video. And we just show the display name.
* @type {number}
* @constant
*/
export const DISPLAY_BLACKNESS_WITH_NAME = 2;
/**
* Display mode constant used when video is displayed and display name
* at the same time.
* @type {number}
* @constant
*/
export const DISPLAY_VIDEO_WITH_NAME = 3;
/**
* Display mode constant used when neither video nor avatar is being displayed
* on the small video. And we just show the display name.
* @type {number}
* @constant
*/
export const DISPLAY_AVATAR_WITH_NAME = 4;
/**
* Maps the display modes to class name that will be applied on the thumbnail container.
* @type {Array<string>}
* @constant
*/
export const DISPLAY_MODE_TO_CLASS_NAME = [
'display-video',
'display-avatar-only',
'display-name-on-black',
'display-name-on-video',
'display-avatar-with-name'
];
/**
* Maps the display modes to string.
* @type {Array<string>}
* @constant
*/
export const DISPLAY_MODE_TO_STRING = [
'video',
'avatar',
'blackness-with-name',
'video-with-name',
'avatar-with-name'
];