feat(transcriptions): add TranscribingLabel.native

pull/3425/head
paweldomas 7 years ago committed by Любомир Маринов
parent 6dea107bcd
commit 008fb868a6
  1. 17
      react/features/large-video/components/AbstractLabels.js
  2. 5
      react/features/large-video/components/Labels.native.js
  3. 12
      react/features/transcribing/components/AbstractTranscribingLabel.js
  4. 31
      react/features/transcribing/components/TranscribingLabel.native.js
  5. 48
      react/features/transcribing/components/TranscribingLabel.web.js

@ -20,6 +20,11 @@ export type Props = {
*/
_filmstripVisible: boolean,
/**
* Whether the video quality label should be displayed.
*/
_showTranscribingLabel: boolean,
/**
* Whether the video quality label should be displayed.
*/
@ -66,9 +71,13 @@ export default class AbstractLabels<P: Props, S> extends Component<P, S> {
* @returns {React$Element}
*/
_renderTranscribingLabel() {
return (
<TranscribingLabel />
);
if (this.props._showTranscribingLabel) {
return (
<TranscribingLabel />
);
}
return null;
}
/**
@ -92,12 +101,14 @@ export default class AbstractLabels<P: Props, S> extends Component<P, S> {
* @private
* @returns {{
* _filmstripVisible: boolean,
* _showTranscribingLabel: boolean,
* _showVideoQualityLabel: boolean
* }}
*/
export function _abstractMapStateToProps(state: Object) {
return {
_filmstripVisible: isFilmstripVisible(state),
_showTranscribingLabel: state['features/transcribing'].isTranscribing,
_showVideoQualityLabel: !shouldDisplayTileView(state)
};
}

@ -58,6 +58,9 @@ class Labels extends AbstractLabels<Props, *> {
this._renderRecordingLabel(
JitsiRecordingConstants.mode.STREAM)
}
{
this._renderTranscribingLabel()
}
{/*
* Emil, Lyubomir, Nichole, and Zoli said that the Labels
* should not be rendered in Picture-in-Picture. Saul argued
@ -73,6 +76,8 @@ class Labels extends AbstractLabels<Props, *> {
_renderRecordingLabel: string => React$Element<*>;
_renderTranscribingLabel: () => React$Element<*>
_renderVideoQualityLabel: () => React$Element<*>;
}

@ -0,0 +1,12 @@
// @flow
/**
* The type of the React {@code Component} props of {@link TranscribingLabel}.
*/
export type Props = {
/**
* Invoked to obtain translated strings.
*/
t: Function
};

@ -0,0 +1,31 @@
// @flow
import React, { Component } from 'react';
import { translate } from '../../base/i18n';
import { CircularLabel } from '../../base/label';
import { type Props } from './AbstractTranscribingLabel';
/**
* React {@code Component} for displaying a label when a transcriber is in the
* conference.
*
* @extends Component
*/
class TranscribingLabel extends Component<Props> {
/**
* Renders the platform-specific label component.
*
* @inheritdoc
*/
render() {
return (
<CircularLabel
label = { this.props.t('transcribing.tr') } />
);
}
}
export default translate(TranscribingLabel);

@ -1,30 +1,15 @@
// @flow
import Tooltip from '@atlaskit/tooltip';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from '../../base/i18n/index';
import { CircularLabel } from '../../base/label/index';
import Tooltip from '@atlaskit/tooltip';
import { translate } from '../../base/i18n';
import { CircularLabel } from '../../base/label';
/**
* The type of the React {@code Component} props of {@link TranscribingLabel}.
*/
type Props = {
/**
* Invoked to obtain translated strings.
*/
t: Function,
/**
* Boolean value indicating current transcribing status
*/
_transcribing: boolean
};
import { type Props } from './AbstractTranscribingLabel';
/**
* React Component for displaying a label when a transcriber is in the
* React {@code Component} for displaying a label when a transcriber is in the
* conference.
*
* @extends Component
@ -38,10 +23,6 @@ class TranscribingLabel extends Component<Props> {
* @returns {ReactElement}
*/
render() {
if (!this.props._transcribing) {
return null;
}
return (
<Tooltip
content = { this.props.t('transcribing.labelToolTip') }
@ -55,21 +36,4 @@ class TranscribingLabel extends Component<Props> {
}
/**
* Maps (parts of) the Redux state to the associated props for the
* {@code TranscribingLabel} component.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* }}
*/
function _mapStateToProps(state) {
const { isTranscribing } = state['features/transcribing'];
return {
_transcribing: isTranscribing
};
}
export default translate(connect(_mapStateToProps)(TranscribingLabel));
export default translate(TranscribingLabel);

Loading…
Cancel
Save