jiti-meet/react/features/large-video/actions.js

148 lines
4.4 KiB
JavaScript
Raw Normal View History

2017-10-04 22:36:09 +00:00
// @flow
import { _handleParticipantError } from '../base/conference';
2017-01-17 14:32:20 +00:00
import { MEDIA_TYPE, VIDEO_TYPE } from '../base/media';
import {
getLocalVideoTrack,
getTrackByMediaTypeAndParticipant
} from '../base/tracks';
feat(quality-slider): initial implementation (#1817) * feat(quality-slider): initial implementation - Add new menu button with an Inline Dialog slider for selecting received video quality. - Place P2P status in redux store for the Inline Dialog to display a warning about not respecting video quality selection. - Respond to data channel open events by setting receive video quality. This is for lonely call cases where a setting is set before the data channel is open. - Remove dropdown menu from video status label and clean up related js and css. * first pass at addressing feedback - Move VideoStatusLabel to video-quality directory. - Rename VideoStatusLabel to VideoQualityLabel. - Open VideoQualitydialog from VideoQualityLabel. - New CSS for making VideoQualityLabel display properly. - Do not render VideoQualityLabel in filmstrip only instead of hiding with css. - Remove tooltip from VideoQualityLabel. - Show LD, SD, HD labels in VideoQualityLabel. - Remove action SET_LARGE_VIDEO_HD_STATUS from conference. - Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video. - Move VideoQualityButton into video-quality directory. - General renaming (medium -> standard, menu -> dialog). - Render P2P message between title and slider. - Add padding to slider for displacement caused by P2P message's new placement. - Fix display issue with VideoQualityButton displaying out of line in the primary toolbar. * second pass at addressing feedback - Fix p2p inline message color - Force labels to break on words - Resolve rebase issues, including only dispatching quality update on change. Before there was double calling of dispatch produced by an IE11 workaround. This breaks now when setting audio only mode to true twice. - Rename some instances of quality to definition * rename to data channel opened * do not show p2p in audio only * stop toggle audio only icon automatically * remove fixme about toolbar button * find closest resolution for label * toggle dialog on button click * redo last commit for both button and label
2017-08-09 19:40:03 +00:00
import {
SELECT_LARGE_VIDEO_PARTICIPANT,
UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION
} from './actionTypes';
/**
* Signals conference to select a participant.
*
* @returns {Function}
*/
export function selectParticipant() {
2017-10-04 22:36:09 +00:00
return (dispatch: Dispatch<*>, getState: Function) => {
const state = getState();
2017-10-04 22:36:09 +00:00
const { conference } = state['features/base/conference'];
if (conference) {
2017-01-17 14:44:50 +00:00
const largeVideo = state['features/large-video'];
const tracks = state['features/base/tracks'];
const id = largeVideo.participantId;
const videoTrack
= getTrackByMediaTypeAndParticipant(
2017-06-15 00:40:51 +00:00
tracks,
MEDIA_TYPE.VIDEO,
id);
try {
conference.selectParticipant(
2017-06-15 00:40:51 +00:00
videoTrack && videoTrack.videoType === VIDEO_TYPE.CAMERA
? id
: null);
} catch (err) {
_handleParticipantError(err);
}
}
};
}
/**
* Action to select the participant to be displayed in LargeVideo based on a
* variety of factors: if there is a dominant or pinned speaker, or if there are
2017-01-17 14:32:20 +00:00
* remote tracks, etc.
*
* @returns {Function}
*/
export function selectParticipantInLargeVideo() {
2017-10-04 22:36:09 +00:00
return (dispatch: Dispatch<*>, getState: Function) => {
const state = getState();
const participantId = _electParticipantInLargeVideo(state);
2017-01-17 14:44:50 +00:00
const largeVideo = state['features/large-video'];
if (participantId !== largeVideo.participantId) {
dispatch({
type: SELECT_LARGE_VIDEO_PARTICIPANT,
participantId
});
dispatch(selectParticipant());
}
};
}
feat(quality-slider): initial implementation (#1817) * feat(quality-slider): initial implementation - Add new menu button with an Inline Dialog slider for selecting received video quality. - Place P2P status in redux store for the Inline Dialog to display a warning about not respecting video quality selection. - Respond to data channel open events by setting receive video quality. This is for lonely call cases where a setting is set before the data channel is open. - Remove dropdown menu from video status label and clean up related js and css. * first pass at addressing feedback - Move VideoStatusLabel to video-quality directory. - Rename VideoStatusLabel to VideoQualityLabel. - Open VideoQualitydialog from VideoQualityLabel. - New CSS for making VideoQualityLabel display properly. - Do not render VideoQualityLabel in filmstrip only instead of hiding with css. - Remove tooltip from VideoQualityLabel. - Show LD, SD, HD labels in VideoQualityLabel. - Remove action SET_LARGE_VIDEO_HD_STATUS from conference. - Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video. - Move VideoQualityButton into video-quality directory. - General renaming (medium -> standard, menu -> dialog). - Render P2P message between title and slider. - Add padding to slider for displacement caused by P2P message's new placement. - Fix display issue with VideoQualityButton displaying out of line in the primary toolbar. * second pass at addressing feedback - Fix p2p inline message color - Force labels to break on words - Resolve rebase issues, including only dispatching quality update on change. Before there was double calling of dispatch produced by an IE11 workaround. This breaks now when setting audio only mode to true twice. - Rename some instances of quality to definition * rename to data channel opened * do not show p2p in audio only * stop toggle audio only icon automatically * remove fixme about toolbar button * find closest resolution for label * toggle dialog on button click * redo last commit for both button and label
2017-08-09 19:40:03 +00:00
/**
* Updates the currently seen resolution of the video displayed on large video.
*
* @param {number} resolution - The current resolution (height) of the video.
* @returns {{
* type: UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION,
* resolution: number
* }}
*/
2017-10-04 22:36:09 +00:00
export function updateKnownLargeVideoResolution(resolution: number) {
feat(quality-slider): initial implementation (#1817) * feat(quality-slider): initial implementation - Add new menu button with an Inline Dialog slider for selecting received video quality. - Place P2P status in redux store for the Inline Dialog to display a warning about not respecting video quality selection. - Respond to data channel open events by setting receive video quality. This is for lonely call cases where a setting is set before the data channel is open. - Remove dropdown menu from video status label and clean up related js and css. * first pass at addressing feedback - Move VideoStatusLabel to video-quality directory. - Rename VideoStatusLabel to VideoQualityLabel. - Open VideoQualitydialog from VideoQualityLabel. - New CSS for making VideoQualityLabel display properly. - Do not render VideoQualityLabel in filmstrip only instead of hiding with css. - Remove tooltip from VideoQualityLabel. - Show LD, SD, HD labels in VideoQualityLabel. - Remove action SET_LARGE_VIDEO_HD_STATUS from conference. - Create new action UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION in large-video. - Move VideoQualityButton into video-quality directory. - General renaming (medium -> standard, menu -> dialog). - Render P2P message between title and slider. - Add padding to slider for displacement caused by P2P message's new placement. - Fix display issue with VideoQualityButton displaying out of line in the primary toolbar. * second pass at addressing feedback - Fix p2p inline message color - Force labels to break on words - Resolve rebase issues, including only dispatching quality update on change. Before there was double calling of dispatch produced by an IE11 workaround. This breaks now when setting audio only mode to true twice. - Rename some instances of quality to definition * rename to data channel opened * do not show p2p in audio only * stop toggle audio only icon automatically * remove fixme about toolbar button * find closest resolution for label * toggle dialog on button click * redo last commit for both button and label
2017-08-09 19:40:03 +00:00
return {
type: UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION,
resolution
};
}
/**
* Returns the most recent existing video track. It can be local or remote
* video.
*
* @param {Track[]} tracks - All current tracks.
* @private
* @returns {(Track|undefined)}
*/
function _electLastVisibleVideo(tracks) {
// First we try to get most recent remote video track.
for (let i = tracks.length - 1; i >= 0; --i) {
const track = tracks[i];
if (!track.local && track.mediaType === MEDIA_TYPE.VIDEO) {
return track;
}
}
// And if no remote video tracks are available, we select the local one.
return getLocalVideoTrack(tracks);
}
/**
* Returns the identifier of the participant who is to be on the stage i.e.
* should be displayed in {@code LargeVideo}.
*
* @param {Object} state - The Redux state from which the participant to be
* displayed in {@code LargeVideo} is to be elected.
* @private
* @returns {(string|undefined)}
*/
function _electParticipantInLargeVideo(state) {
// First get the pinned participant. If the local participant is pinned,
// he/she will be shown in LargeVideo.
const participants = state['features/base/participants'];
let participant = participants.find(p => p.pinned);
let id = participant ? participant.id : undefined;
if (!id) {
// No participant is pinned so get the dominant speaker. But the local
// participant won't be displayed in LargeVideo even if he/she is the
// dominant speaker.
participant = participants.find(p => p.dominantSpeaker && !p.local);
if (participant) {
id = participant.id;
}
if (!id) {
// There is no dominant speaker so get the participant with the last
// visible video track. This may turn out to be the local
// participant.
const tracks = state['features/base/tracks'];
const videoTrack = _electLastVisibleVideo(tracks);
id = videoTrack && videoTrack.participantId;
}
}
return id;
}