From 735a596afe0ced48670b537e7a1a39325d0cae1b Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Fri, 25 Aug 2017 09:45:30 -0700 Subject: [PATCH] ref(recording): convert recording label to react (#1915) * ref(recording): convert recording label to react - Create a RecordingLabel component for displaying the current recording state, as reflected in the redux store. This is needed for 1-on-1 mode to be completely in redux. - Update the store with the recording state so RecordingLabel can update itself. - Remove previous logic for updating the non-react label, which includes event emitting for filmstrip visibility changes, as RecordingLabel is hooked into redux updates. * ref(recording): use status and type constants from lib * make label really dumb, move logic back to Recording --- css/_recording.scss | 3 +- css/modals/video-quality/_video-quality.scss | 7 +- modules/UI/recording/Recording.js | 226 ++++++++---------- react/features/filmstrip/middleware.js | 16 -- .../large-video/components/LargeVideo.web.js | 13 +- react/features/recording/actionTypes.js | 22 ++ react/features/recording/actions.js | 31 +++ .../components/RecordingLabel.native.js | 0 .../components/RecordingLabel.web.js | 171 +++++++++++++ react/features/recording/components/index.js | 1 + react/features/recording/index.js | 4 + react/features/recording/reducer.js | 24 ++ service/UI/UIEvents.js | 5 - 13 files changed, 363 insertions(+), 160 deletions(-) create mode 100644 react/features/recording/actionTypes.js create mode 100644 react/features/recording/actions.js create mode 100644 react/features/recording/components/RecordingLabel.native.js create mode 100644 react/features/recording/components/RecordingLabel.web.js create mode 100644 react/features/recording/components/index.js create mode 100644 react/features/recording/index.js create mode 100644 react/features/recording/reducer.js diff --git a/css/_recording.scss b/css/_recording.scss index aa56227a7..b3577f38e 100644 --- a/css/_recording.scss +++ b/css/_recording.scss @@ -1,4 +1,3 @@ .recordingSpinner { - display: none; vertical-align: top; -} \ No newline at end of file +} diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss index ef7ec87d2..c442560cf 100644 --- a/css/modals/video-quality/_video-quality.scss +++ b/css/modals/video-quality/_video-quality.scss @@ -154,12 +154,15 @@ bottom: 45%; border-radius: 2px; display: none; - -webkit-transition: all 2s 2s linear; - transition: all 2s 2s linear; + padding: 10px; + transform: translate(-50%, 0); z-index: $centeredVideoLabelZ; &.moveToCorner { bottom: auto; + transform: none; + -webkit-transition: all 2s 2s linear; + transition: all 2s 2s linear; } } diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index 99295d9bc..6c6b1ecc2 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -22,6 +22,50 @@ import VideoLayout from '../videolayout/VideoLayout'; import { setToolboxEnabled } from '../../../react/features/toolbox'; import { setNotificationsEnabled } from '../../../react/features/notifications'; +import { + hideRecordingLabel, + updateRecordingState +} from '../../../react/features/recording'; + +const Status = JitsiMeetJS.constants.recordingStatus; + +/** + * Translation keys to use for display in the UI when recording the conference + * but not streaming live. + * + * @private + * @type {Object} + */ +export const RECORDING_TRANSLATION_KEYS = { + failedToStartKey: 'recording.failedToStart', + recordingBusy: 'liveStreaming.busy', + recordingButtonTooltip: 'recording.buttonTooltip', + recordingErrorKey: 'recording.error', + recordingOffKey: 'recording.off', + recordingOnKey: 'recording.on', + recordingPendingKey: 'recording.pending', + recordingTitle: 'dialog.recording', + recordingUnavailable: 'recording.unavailable' +}; + +/** + * Translation keys to use for display in the UI when the recording mode is + * currently streaming live. + * + * @private + * @type {Object} + */ +export const STREAMING_TRANSLATION_KEYS = { + failedToStartKey: 'liveStreaming.failedToStart', + recordingBusy: 'liveStreaming.busy', + recordingButtonTooltip: 'liveStreaming.buttonTooltip', + recordingErrorKey: 'liveStreaming.error', + recordingOffKey: 'liveStreaming.off', + recordingOnKey: 'liveStreaming.on', + recordingPendingKey: 'liveStreaming.pending', + recordingTitle: 'dialog.liveStreaming', + recordingUnavailable: 'liveStreaming.unavailable' +}; /** * The dialog for user input. @@ -194,57 +238,6 @@ function _showStopRecordingPrompt(recordingType) { }); } -/** - * Moves the element given by {selector} to the top right corner of the screen. - * Set additional classes that can be used to style the selector relative to the - * state of the filmstrip. - * - * @param selector the selector for the element to move - * @param move {true} to move the element, {false} to move it back to its intial - * position - */ -function moveToCorner(selector, move) { - let moveToCornerClass = "moveToCorner"; - let containsClass = selector.hasClass(moveToCornerClass); - - if (move && !containsClass) - selector.addClass(moveToCornerClass); - else if (!move && containsClass) - selector.removeClass(moveToCornerClass); - - const { - remoteVideosVisible, - visible - } = APP.store.getState()['features/filmstrip']; - const filmstripWasHidden = selector.hasClass('without-filmstrip'); - const filmstipIsOpening = filmstripWasHidden && visible; - selector.toggleClass('opening', filmstipIsOpening); - - selector.toggleClass('with-filmstrip', visible); - selector.toggleClass('without-filmstrip', !visible); - - selector.toggleClass('with-remote-videos', remoteVideosVisible); - selector.toggleClass('without-remote-videos', !remoteVideosVisible); -} - -/** - * The status of the recorder. - * FIXME: Those constants should come from the library. - * @type {{ON: string, OFF: string, AVAILABLE: string, - * UNAVAILABLE: string, PENDING: string}} - */ -var Status = { - ON: "on", - OFF: "off", - AVAILABLE: "available", - UNAVAILABLE: "unavailable", - PENDING: "pending", - RETRYING: "retrying", - ERROR: "error", - FAILED: "failed", - BUSY: "busy" -}; - /** * Checks whether if the given status is either PENDING or RETRYING * @param status {Status} Jibri status to be checked @@ -271,27 +264,11 @@ var Recording = { if (recordingType === 'jibri') { this.baseClass = "fa fa-play-circle"; - this.recordingTitle = "dialog.liveStreaming"; - this.recordingOnKey = "liveStreaming.on"; - this.recordingOffKey = "liveStreaming.off"; - this.recordingPendingKey = "liveStreaming.pending"; - this.failedToStartKey = "liveStreaming.failedToStart"; - this.recordingErrorKey = "liveStreaming.error"; - this.recordingButtonTooltip = "liveStreaming.buttonTooltip"; - this.recordingUnavailable = "liveStreaming.unavailable"; - this.recordingBusy = "liveStreaming.busy"; + Object.assign(this, STREAMING_TRANSLATION_KEYS); } else { this.baseClass = "icon-recEnable"; - this.recordingTitle = "dialog.recording"; - this.recordingOnKey = "recording.on"; - this.recordingOffKey = "recording.off"; - this.recordingPendingKey = "recording.pending"; - this.failedToStartKey = "recording.failedToStart"; - this.recordingErrorKey = "recording.error"; - this.recordingButtonTooltip = "recording.buttonTooltip"; - this.recordingUnavailable = "recording.unavailable"; - this.recordingBusy = "liveStreaming.busy"; + Object.assign(this, RECORDING_TRANSLATION_KEYS); } // XXX Due to the React-ification of Toolbox, the HTMLElement with id @@ -311,10 +288,6 @@ var Recording = { APP.store.dispatch(setNotificationsEnabled(false)); APP.UI.messageHandler.enablePopups(false); } - - this.eventEmitter.addListener(UIEvents.UPDATED_FILMSTRIP_DISPLAY, () =>{ - this._updateStatusLabel(); - }); }, /** @@ -364,65 +337,85 @@ var Recording = { let oldState = this.currentState; this.currentState = recordingState; - // TODO: handle recording state=available - if (recordingState === Status.ON || - recordingState === Status.RETRYING) { + let labelDisplayConfiguration; + + switch (recordingState) { + case Status.ON: + case Status.RETRYING: { + labelDisplayConfiguration = { + centered: false, + key: this.recordingOnKey, + showSpinner: recordingState === Status.RETRYING + }; this._setToolbarButtonToggled(true); - this._updateStatusLabel(this.recordingOnKey, false); + break; } - else if (recordingState === Status.OFF - || recordingState === Status.UNAVAILABLE - || recordingState === Status.BUSY - || recordingState === Status.FAILED) { - // We don't want to do any changes if this is - // an availability change. - if (oldState !== Status.ON - && !isStartingStatus(oldState)) + case Status.OFF: + case Status.BUSY: + case Status.FAILED: + case Status.UNAVAILABLE: { + const wasInStartingStatus = isStartingStatus(oldState); + + // We don't want UI changes if this is an availability change. + if (oldState !== Status.ON && !wasInStartingStatus) { + APP.store.dispatch(updateRecordingState({ recordingState })); return; + } + + labelDisplayConfiguration = { + centered: true, + key: wasInStartingStatus + ? this.failedToStartKey + : this.recordingOffKey + }; this._setToolbarButtonToggled(false); - let messageKey; - if (isStartingStatus(oldState)) - messageKey = this.failedToStartKey; - else - messageKey = this.recordingOffKey; - - this._updateStatusLabel(messageKey, true); - setTimeout(function(){ - $('#recordingLabel').css({display: "none"}); + APP.store.dispatch(hideRecordingLabel()); }, 5000); + + break; } - else if (recordingState === Status.PENDING) { + + case Status.PENDING: { + labelDisplayConfiguration = { + centered: true, + key: this.recordingPendingKey + }; this._setToolbarButtonToggled(false); - this._updateStatusLabel(this.recordingPendingKey, true); + break; } - else if (recordingState === Status.ERROR - || recordingState === Status.FAILED) { + + case Status.ERROR: { + labelDisplayConfiguration = { + centered: true, + key: this.recordingErrorKey + }; this._setToolbarButtonToggled(false); - this._updateStatusLabel(this.recordingErrorKey, true); + break; } - let labelSelector = $('#recordingLabel'); + // Return an empty label display configuration to indicate no label + // should be displayed. The Status.AVAIABLE case is handled here. + default: { + labelDisplayConfiguration = null; + } + } - // We don't show the label for available state. - if (recordingState !== Status.AVAILABLE - && !labelSelector.is(":visible")) - labelSelector.css({display: "inline-block"}); - - // Recording spinner - let spinnerId = 'recordingSpinner'; - UIUtil.setVisible( - spinnerId, recordingState === Status.RETRYING); + APP.store.dispatch(updateRecordingState({ + labelDisplayConfiguration, + recordingState + })); }, + // checks whether recording is enabled and whether we have params // to start automatically recording checkAutoRecord() { @@ -432,21 +425,6 @@ var Recording = { this.predefinedToken); } }, - /** - * Updates the status label. - * @param textKey the text to show - * @param isCentered indicates if the label should be centered on the window - * or moved to the top right corner. - */ - _updateStatusLabel(textKey, isCentered) { - let labelSelector = $('#recordingLabel'); - let labelTextSelector = $('#recordingLabelText'); - - moveToCorner(labelSelector, !isCentered); - - labelTextSelector.attr("data-i18n", textKey); - APP.translation.translateElement(labelSelector); - }, /** * Handles {@code click} on {@code toolbar_button_record}. diff --git a/react/features/filmstrip/middleware.js b/react/features/filmstrip/middleware.js index 132776a70..637b8d941 100644 --- a/react/features/filmstrip/middleware.js +++ b/react/features/filmstrip/middleware.js @@ -4,12 +4,6 @@ import { MiddlewareRegistry } from '../base/redux'; import { SET_CALL_OVERLAY_VISIBLE } from '../jwt'; import Filmstrip from '../../../modules/UI/videolayout/Filmstrip'; -import UIEvents from '../../../service/UI/UIEvents'; - -import { - SET_FILMSTRIP_REMOTE_VIDEOS_VISIBLITY, - SET_FILMSTRIP_VISIBILITY -} from './actionTypes'; declare var APP: Object; @@ -37,16 +31,6 @@ MiddlewareRegistry.register(({ getState }) => next => action => { return result; } break; - - case SET_FILMSTRIP_REMOTE_VIDEOS_VISIBLITY: - case SET_FILMSTRIP_VISIBILITY: { - const result = next(action); - - typeof APP === 'undefined' - || APP.UI.emitEvent(UIEvents.UPDATED_FILMSTRIP_DISPLAY); - - return result; - } } return next(action); diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index 732ea1bf7..c8f82107f 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/react/features/large-video/components/LargeVideo.web.js @@ -4,6 +4,7 @@ import React, { Component } from 'react'; import { Watermarks } from '../../base/react'; import { VideoQualityLabel } from '../../video-quality'; +import { RecordingLabel } from '../../recording'; declare var interfaceConfig: Object; @@ -67,18 +68,8 @@ export default class LargeVideo extends Component { - { interfaceConfig.filmStripOnly ? null : } - - - - - + ); } diff --git a/react/features/recording/actionTypes.js b/react/features/recording/actionTypes.js new file mode 100644 index 000000000..dc85a1cec --- /dev/null +++ b/react/features/recording/actionTypes.js @@ -0,0 +1,22 @@ +/** + * The type of Redux action which signals for the label indicating current + * recording state to stop displaying. + * + * { + * type: HIDE_RECORDING_LABEL + * } + * @public + */ +export const HIDE_RECORDING_LABEL = Symbol('HIDE_RECORDING_LABEL'); + +/** + * The type of Redux action which updates the current known state of the + * recording feature. + * + * { + * type: RECORDING_STATE_UPDATED, + * recordingState: string + * } + * @public + */ +export const RECORDING_STATE_UPDATED = Symbol('RECORDING_STATE_UPDATED'); diff --git a/react/features/recording/actions.js b/react/features/recording/actions.js new file mode 100644 index 000000000..8b74ae7d6 --- /dev/null +++ b/react/features/recording/actions.js @@ -0,0 +1,31 @@ +import { HIDE_RECORDING_LABEL, RECORDING_STATE_UPDATED } from './actionTypes'; + +/** + * Hides any displayed recording label, regardless of current recording state. + * + * @returns {{ + * type: HIDE_RECORDING_LABEL + * }} + */ +export function hideRecordingLabel() { + return { + type: HIDE_RECORDING_LABEL + }; +} + +/** + * Updates the redux state for the recording feature. + * + * @param {Object} recordingState - The new state to merge with the existing + * state in redux. + * @returns {{ + * type: RECORDING_STATE_UPDATED, + * recordingState: Object + * }} + */ +export function updateRecordingState(recordingState = {}) { + return { + type: RECORDING_STATE_UPDATED, + recordingState + }; +} diff --git a/react/features/recording/components/RecordingLabel.native.js b/react/features/recording/components/RecordingLabel.native.js new file mode 100644 index 000000000..e69de29bb diff --git a/react/features/recording/components/RecordingLabel.web.js b/react/features/recording/components/RecordingLabel.web.js new file mode 100644 index 000000000..e3dd9d280 --- /dev/null +++ b/react/features/recording/components/RecordingLabel.web.js @@ -0,0 +1,171 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; + +import { translate } from '../../base/i18n'; + +/** + * Implements a React {@link Component} which displays the current state of + * conference recording. Currently it uses CSS to display itself automatically + * when there is a recording state update. + * + * @extends {Component} + */ +class RecordingLabel extends Component { + /** + * {@code RecordingLabel} component's property types. + * + * @static + */ + static propTypes = { + /** + * Whether or not the filmstrip is currently visible or toggled to + * hidden. Depending on the filmstrip state, different CSS classes will + * be set to allow for adjusting of {@code RecordingLabel} positioning. + */ + _filmstripVisible: React.PropTypes.bool, + + /** + * An object to describe the {@code RecordingLabel} content. If no + * translation key to display is specified, the label will apply CSS to + * itself so it can be made invisible. + * {{ + * centered: boolean, + * key: string, + * showSpinner: boolean + * }} + */ + _labelDisplayConfiguration: React.PropTypes.object, + + /** + * Whether or not remote videos within the filmstrip are currently + * visible. Depending on the visibility state, coupled with filmstrip + * visibility, CSS classes will be set to allow for adjusting of + * {@code RecordingLabel} positioning. + */ + _remoteVideosVisible: React.PropTypes.bool, + + /** + * Invoked to obtain translated string. + */ + t: React.PropTypes.func + }; + + /** + * Initializes a new {@code RecordingLabel} instance. + * + * @param {Object} props - The read-only properties with which the new + * instance is to be initialized. + */ + constructor(props) { + super(props); + + this.state = { + /** + * Whether or not the filmstrip was not visible but has transitioned + * in the latest component update to visible. This boolean is used + * to set a class for position animations. + * + * @type {boolean} + */ + filmstripBecomingVisible: false + }; + } + + /** + * Updates the state for whether or not the filmstrip is being toggled to + * display after having being hidden. + * + * @inheritdoc + * @param {Object} nextProps - The read-only props which this Component will + * receive. + * @returns {void} + */ + componentWillReceiveProps(nextProps) { + this.setState({ + filmstripBecomingVisible: nextProps._filmstripVisible + && !this.props._filmstripVisible + }); + } + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const { _labelDisplayConfiguration } = this.props; + const { centered, key, showSpinner } = _labelDisplayConfiguration || {}; + + const isVisible = Boolean(key); + const rootClassName = [ + 'video-state-indicator centeredVideoLabel', + isVisible ? 'show-inline' : '', + centered ? '' : 'moveToCorner', + this.state.filmstripBecomingVisible ? 'opening' : '', + this.props._filmstripVisible + ? 'with-filmstrip' : 'without-filmstrip', + this.props._remoteVideosVisible + ? 'with-remote-videos' : 'without-remote-videos' + ].join(' '); + + return ( + + + { this.props.t(key) } + + { showSpinner + ? + : null } + + ); + } +} + +/** + * Maps (parts of) the Redux state to the associated {@code RecordingLabel} + * component's props. + * + * @param {Object} state - The Redux state. + * @private + * @returns {{ + * _filmstripVisible: boolean, + * _labelDisplayConfiguration: Object, + * _remoteVideosVisible: boolean, + * }} + */ +function _mapStateToProps(state) { + const { remoteVideosVisible, visible } = state['features/filmstrip']; + const { labelDisplayConfiguration } = state['features/recording']; + + return { + /** + * Whether or not the filmstrip is currently set to be displayed. + * + * @type {boolean} + */ + _filmstripVisible: visible, + + /** + * An object describing how {@code RecordingLabel} should display its + * contents. + * + * @type {Object} + */ + _labelDisplayConfiguration: labelDisplayConfiguration, + + /** + * Whether or not remote videos are displayed in the filmstrip. + * + * @type {boolean} + */ + _remoteVideosVisible: remoteVideosVisible + }; +} + +export default translate(connect(_mapStateToProps)(RecordingLabel)); diff --git a/react/features/recording/components/index.js b/react/features/recording/components/index.js new file mode 100644 index 000000000..90ce231bd --- /dev/null +++ b/react/features/recording/components/index.js @@ -0,0 +1 @@ +export { default as RecordingLabel } from './RecordingLabel'; diff --git a/react/features/recording/index.js b/react/features/recording/index.js new file mode 100644 index 000000000..582e1f9dd --- /dev/null +++ b/react/features/recording/index.js @@ -0,0 +1,4 @@ +export * from './actions'; +export * from './components'; + +import './reducer'; diff --git a/react/features/recording/reducer.js b/react/features/recording/reducer.js new file mode 100644 index 000000000..16406ed9d --- /dev/null +++ b/react/features/recording/reducer.js @@ -0,0 +1,24 @@ +import { ReducerRegistry } from '../base/redux'; +import { HIDE_RECORDING_LABEL, RECORDING_STATE_UPDATED } from './actionTypes'; + +/** + * Reduces the Redux actions of the feature features/recording. + */ +ReducerRegistry.register('features/recording', (state = {}, action) => { + switch (action.type) { + case HIDE_RECORDING_LABEL: + return { + ...state, + labelDisplayConfiguration: null + }; + + case RECORDING_STATE_UPDATED: + return { + ...state, + ...action.recordingState + }; + + default: + return state; + } +}); diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 3f033d1aa..19a4689f6 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -66,11 +66,6 @@ export default { */ TOGGLED_FILMSTRIP: "UI.toggled_filmstrip", - /** - * Notifies that the filmstrip has updated its appearance, such as by - * toggling or removing videos or adding videos. - */ - UPDATED_FILMSTRIP_DISPLAY: "UI.updated_filmstrip_display", TOGGLE_SCREENSHARING: "UI.toggle_screensharing", TOGGLED_SHARED_DOCUMENT: "UI.toggled_shared_document", CONTACT_CLICKED: "UI.contact_clicked",