feat(transcription-label):Adding a transcription status label
This commit is contained in:
parent
62a8ceecce
commit
7b60187847
|
@ -26,6 +26,13 @@ p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.006em;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
body, input, textarea, keygen, select, button {
|
body, input, textarea, keygen, select, button {
|
||||||
font-family: $baseFontFamily !important;
|
font-family: $baseFontFamily !important;
|
||||||
}
|
}
|
||||||
|
|
|
@ -162,7 +162,7 @@
|
||||||
transition: right 0.5s;
|
transition: right 0.5s;
|
||||||
|
|
||||||
&.with-filmstrip.with-remote-videos {
|
&.with-filmstrip.with-remote-videos {
|
||||||
&#recordingLabel {
|
&#transcriptionLabel {
|
||||||
right: 200px;
|
right: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -127,6 +127,7 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
z-index: #{$tooltipsZ + 1};
|
||||||
|
|
||||||
i {
|
i {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -145,13 +146,9 @@
|
||||||
z-index: $tooltipsZ;
|
z-index: $tooltipsZ;
|
||||||
}
|
}
|
||||||
|
|
||||||
#videoResolutionLabel {
|
|
||||||
z-index: #{$tooltipsZ + 1};
|
|
||||||
}
|
|
||||||
|
|
||||||
.centeredVideoLabel {
|
.centeredVideoLabel {
|
||||||
bottom: 45%;
|
bottom: 45%;
|
||||||
border-radius: 2px;
|
border-radius: 3px;
|
||||||
display: none;
|
display: none;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
|
|
|
@ -5,6 +5,7 @@ import React, { Component } from 'react';
|
||||||
import { Watermarks } from '../../base/react';
|
import { Watermarks } from '../../base/react';
|
||||||
import { VideoQualityLabel } from '../../video-quality';
|
import { VideoQualityLabel } from '../../video-quality';
|
||||||
import { RecordingLabel } from '../../recording';
|
import { RecordingLabel } from '../../recording';
|
||||||
|
import { TranscriptionLabel } from '../../transcription';
|
||||||
|
|
||||||
declare var interfaceConfig: Object;
|
declare var interfaceConfig: Object;
|
||||||
|
|
||||||
|
@ -70,6 +71,7 @@ export default class LargeVideo extends Component {
|
||||||
<span id = 'localConnectionMessage' />
|
<span id = 'localConnectionMessage' />
|
||||||
{ interfaceConfig.filmStripOnly ? null : <VideoQualityLabel /> }
|
{ interfaceConfig.filmStripOnly ? null : <VideoQualityLabel /> }
|
||||||
<RecordingLabel />
|
<RecordingLabel />
|
||||||
|
<TranscriptionLabel />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import JitsiMeetJS from '../../base/lib-jitsi-meet';
|
||||||
import { translate } from '../../base/i18n';
|
import { translate } from '../../base/i18n';
|
||||||
import { shouldRemoteVideosBeVisible } from '../../filmstrip';
|
import { shouldRemoteVideosBeVisible } from '../../filmstrip';
|
||||||
|
|
||||||
|
@ -45,6 +46,11 @@ class RecordingLabel extends Component {
|
||||||
*/
|
*/
|
||||||
_remoteVideosVisible: React.PropTypes.bool,
|
_remoteVideosVisible: React.PropTypes.bool,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Indicates if the transcription label is currently visible.
|
||||||
|
*/
|
||||||
|
_transcriptionLabelVisible: React.PropTypes.bool,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Invoked to obtain translated string.
|
* Invoked to obtain translated string.
|
||||||
*/
|
*/
|
||||||
|
@ -110,10 +116,26 @@ class RecordingLabel extends Component {
|
||||||
? 'with-remote-videos' : 'without-remote-videos'
|
? 'with-remote-videos' : 'without-remote-videos'
|
||||||
].join(' ');
|
].join(' ');
|
||||||
|
|
||||||
|
let rightIndent = {};
|
||||||
|
|
||||||
|
if (this.props._filmstripVisible
|
||||||
|
&& this.props._remoteVideosVisible) {
|
||||||
|
rightIndent
|
||||||
|
= this.props._transcriptionLabelVisible ? '243px' : '200px';
|
||||||
|
} else {
|
||||||
|
rightIndent
|
||||||
|
= this.props._transcriptionLabelVisible ? '123px' : '80px';
|
||||||
|
}
|
||||||
|
|
||||||
|
const inlineStyle = {
|
||||||
|
right: rightIndent
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className = { rootClassName }
|
className = { rootClassName }
|
||||||
id = 'recordingLabel'>
|
id = 'recordingLabel'
|
||||||
|
style = { inlineStyle }>
|
||||||
<span id = 'recordingLabelText'>
|
<span id = 'recordingLabelText'>
|
||||||
{ this.props.t(key) }
|
{ this.props.t(key) }
|
||||||
</span>
|
</span>
|
||||||
|
@ -143,6 +165,7 @@ class RecordingLabel extends Component {
|
||||||
function _mapStateToProps(state) {
|
function _mapStateToProps(state) {
|
||||||
const { visible } = state['features/filmstrip'];
|
const { visible } = state['features/filmstrip'];
|
||||||
const { labelDisplayConfiguration } = state['features/recording'];
|
const { labelDisplayConfiguration } = state['features/recording'];
|
||||||
|
const { transcriptionState } = state['features/transcription'];
|
||||||
|
|
||||||
return {
|
return {
|
||||||
/**
|
/**
|
||||||
|
@ -165,7 +188,10 @@ function _mapStateToProps(state) {
|
||||||
*
|
*
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
_remoteVideosVisible: shouldRemoteVideosBeVisible(state)
|
_remoteVideosVisible: shouldRemoteVideosBeVisible(state),
|
||||||
|
|
||||||
|
_transcriptionLabelVisible: transcriptionState
|
||||||
|
=== JitsiMeetJS.constants.transcriptionStatus.ON
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
/**
|
||||||
|
* The type of Redux action which updates the current known state of the
|
||||||
|
* transcription feature.
|
||||||
|
*
|
||||||
|
* {
|
||||||
|
* type: TRANSCRIPTION_STATE_UPDATED,
|
||||||
|
* recordingState: string
|
||||||
|
* }
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
export const TRANSCRIPTION_STATE_UPDATED
|
||||||
|
= Symbol('TRANSCRIPTION_STATE_UPDATED');
|
|
@ -0,0 +1,22 @@
|
||||||
|
import JitsiMeetJS from '../base/lib-jitsi-meet';
|
||||||
|
|
||||||
|
import { TRANSCRIPTION_STATE_UPDATED } from './actionTypes';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the Redux state for the transcription feature.
|
||||||
|
*
|
||||||
|
* @param {Object} transcriptionState - The new state to merge with the existing
|
||||||
|
* state in Redux.
|
||||||
|
* @returns {{
|
||||||
|
* type: TRANSCRIPTION_STATE_UPDATED,
|
||||||
|
* recordingState: string
|
||||||
|
* }}
|
||||||
|
*/
|
||||||
|
export function updateTranscriptionState(transcriptionState
|
||||||
|
= JitsiMeetJS.constants.transcriptionStatus.OFF) {
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: TRANSCRIPTION_STATE_UPDATED,
|
||||||
|
transcriptionState
|
||||||
|
};
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
/**
|
||||||
|
* Created by ystamcheva on 12/9/17.
|
||||||
|
*/
|
|
@ -0,0 +1,145 @@
|
||||||
|
import JitsiMeetJS from '../../base/lib-jitsi-meet';
|
||||||
|
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import { shouldRemoteVideosBeVisible } from '../../filmstrip';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React {@code Component} responsible for displaying a label that indicates
|
||||||
|
* the transcription current state.
|
||||||
|
*/
|
||||||
|
export class TranscriptionLabel extends Component {
|
||||||
|
/**
|
||||||
|
* {@code VideoQualityLabel}'s property types.
|
||||||
|
*
|
||||||
|
* @static
|
||||||
|
*/
|
||||||
|
static propTypes = {
|
||||||
|
/**
|
||||||
|
* Whether or not the filmstrip is currently set to be displayed.
|
||||||
|
*/
|
||||||
|
_filmstripVisible: React.PropTypes.bool,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 TranscriptionLabel} positioning.
|
||||||
|
*/
|
||||||
|
_remoteVideosVisible: React.PropTypes.bool,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The current state of the transcription.
|
||||||
|
*/
|
||||||
|
_transcriptionState: React.PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initializes a new {@code TranscriptionLabel} 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 isVisible = this.props._transcriptionState
|
||||||
|
=== JitsiMeetJS.constants.transcriptionStatus.ON;
|
||||||
|
|
||||||
|
const rootClassName = [
|
||||||
|
'video-state-indicator moveToCorner',
|
||||||
|
isVisible ? 'show-inline' : '',
|
||||||
|
this.state.filmstripBecomingVisible ? 'opening' : '',
|
||||||
|
this.props._filmstripVisible
|
||||||
|
? 'with-filmstrip' : 'without-filmstrip',
|
||||||
|
this.props._remoteVideosVisible
|
||||||
|
? 'with-remote-videos' : 'without-remote-videos'
|
||||||
|
].join(' ');
|
||||||
|
|
||||||
|
return (
|
||||||
|
isVisible
|
||||||
|
? <span
|
||||||
|
className = { rootClassName }
|
||||||
|
id = 'transcriptionLabel'>
|
||||||
|
<span className = 'icon-edit' />
|
||||||
|
</span>
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Maps (parts of) the Redux state to the associated
|
||||||
|
* {@code TranscriptionLabel}'s props.
|
||||||
|
*
|
||||||
|
* @param {Object} state - The Redux state.
|
||||||
|
* @private
|
||||||
|
* @returns {{
|
||||||
|
* _filmstripVisible: boolean,
|
||||||
|
* _remoteVideosVisible: boolean,
|
||||||
|
* _transcriptionState: string
|
||||||
|
* }}
|
||||||
|
*/
|
||||||
|
function _mapStateToProps(state) {
|
||||||
|
const { visible } = state['features/filmstrip'];
|
||||||
|
const { transcriptionState } = state['features/transcription'];
|
||||||
|
|
||||||
|
return {
|
||||||
|
/**
|
||||||
|
* Whether or not the filmstrip is currently set to be displayed.
|
||||||
|
*
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
_filmstripVisible: visible,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether or not remote videos are displayed in the filmstrip.
|
||||||
|
*
|
||||||
|
* @type {boolean}
|
||||||
|
*/
|
||||||
|
_remoteVideosVisible: shouldRemoteVideosBeVisible(state),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The current state of the transcription.
|
||||||
|
*/
|
||||||
|
_transcriptionState: transcriptionState
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(_mapStateToProps)(TranscriptionLabel);
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as TranscriptionLabel } from './TranscriptionLabel';
|
|
@ -0,0 +1,5 @@
|
||||||
|
export * from './actions';
|
||||||
|
export * from './components';
|
||||||
|
|
||||||
|
import './middleware';
|
||||||
|
import './reducer';
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CONFERENCE_FAILED,
|
||||||
|
CONFERENCE_JOINED,
|
||||||
|
CONFERENCE_LEFT
|
||||||
|
} from '../base/conference';
|
||||||
|
import { MiddlewareRegistry } from '../base/redux';
|
||||||
|
|
||||||
|
import { updateTranscriptionState } from './actions';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Middleware that captures conference actions and adds a listener to
|
||||||
|
* transcription status events.
|
||||||
|
*
|
||||||
|
* @param {Store} store - Redux store.
|
||||||
|
* @returns {Function}
|
||||||
|
*/
|
||||||
|
MiddlewareRegistry.register(store => next => action => {
|
||||||
|
const result = next(action);
|
||||||
|
|
||||||
|
switch (action.type) {
|
||||||
|
case CONFERENCE_JOINED: {
|
||||||
|
const { conference } = action;
|
||||||
|
|
||||||
|
conference && conference.on(
|
||||||
|
JitsiConferenceEvents.TRANSCRIPTION_STATUS_CHANGED,
|
||||||
|
(...args) => store.dispatch(updateTranscriptionState(...args)));
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case CONFERENCE_FAILED:
|
||||||
|
case CONFERENCE_LEFT:
|
||||||
|
// REMOVE THE LISTENER?
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
});
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { ReducerRegistry } from '../base/redux';
|
||||||
|
import { TRANSCRIPTION_STATE_UPDATED } from './actionTypes';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reduces the Redux actions of the feature features/transcription.
|
||||||
|
*/
|
||||||
|
ReducerRegistry.register('features/transcription', (state = {}, action) => {
|
||||||
|
switch (action.type) {
|
||||||
|
case TRANSCRIPTION_STATE_UPDATED:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
transcriptionState: action.transcriptionState
|
||||||
|
};
|
||||||
|
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
});
|
|
@ -119,9 +119,9 @@ class VideoQualityDialog extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className = 'video-quality-dialog'>
|
<div className = 'video-quality-dialog'>
|
||||||
<h3 className = 'video-quality-dialog-title'>
|
<h4 className = 'video-quality-dialog-title'>
|
||||||
{ t('videoStatus.callQuality') }
|
{ t('videoStatus.callQuality') }
|
||||||
</h3>
|
</h4>
|
||||||
<div className = { showP2PWarning ? '' : 'hide-warning' }>
|
<div className = { showP2PWarning ? '' : 'hide-warning' }>
|
||||||
{ this._renderP2PMessage() }
|
{ this._renderP2PMessage() }
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue