feat(toolbar): add beta tag to live streaming button (#3007)
* feat(toolbar): add beta tag to live streaming button * tweak colors and border radius
This commit is contained in:
virtuacoplenny
GitHub
parent
22ce001f14
commit
f608ad4e5e
|
|
@ -133,6 +133,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.beta-tag {
|
||||
background: #B8C7E0;
|
||||
border-radius: 2px;
|
||||
color: $newToolbarBackgroundColor;
|
||||
font-family: -apple-system, BlinkMacSystemFont, $baseFontFamily;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
margin-left: 8px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.overflow-menu-item-icon {
|
||||
margin-right: 10px;
|
||||
|
||||
|
|
|
|||
|
|
@ -290,11 +290,11 @@
|
|||
"sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",
|
||||
"liveStreaming": "Live Streaming",
|
||||
"streamKey": "Live stream key",
|
||||
"startLiveStreaming": "Go live now",
|
||||
"startLiveStreaming": "Start live stream",
|
||||
"startRecording": "Start recording",
|
||||
"stopStreamingWarning": "Are you sure you would like to stop the live streaming?",
|
||||
"stopRecordingWarning": "Are you sure you would like to stop the recording?",
|
||||
"stopLiveStreaming": "Stop live streaming",
|
||||
"stopLiveStreaming": "Stop live stream",
|
||||
"stopRecording": "Stop recording",
|
||||
"doNotShowMessageAgain": "Don't show this message again",
|
||||
"permissionDenied": "Permission Denied",
|
||||
|
|
@ -386,6 +386,7 @@
|
|||
},
|
||||
"recording":
|
||||
{
|
||||
"beta": "BETA",
|
||||
"busy": "We're working on freeing recording resources. Please try again in a few minutes.",
|
||||
"busyTitle": "All recorders are currently busy",
|
||||
"buttonTooltip": "Start / Stop recording",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { translate } from '../../../base/i18n';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of
|
||||
* {@link OverflowMenuLiveStreamingItem}.
|
||||
*/
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The callback to invoke when {@code OverflowMenuLiveStreamingItem} is
|
||||
* clicked.
|
||||
*/
|
||||
onClick: Function,
|
||||
|
||||
/**
|
||||
* The current live streaming session, if any.
|
||||
*/
|
||||
session: ?Object,
|
||||
|
||||
/**
|
||||
* Invoked to obtain translated strings.
|
||||
*/
|
||||
t: Function
|
||||
};
|
||||
|
||||
/**
|
||||
* React {@code Component} for starting or stopping a live streaming of the
|
||||
* current conference and displaying the current state of live streaming.
|
||||
*
|
||||
* @extends Component
|
||||
*/
|
||||
class OverflowMenuLiveStreamingItem extends Component<Props> {
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
const { onClick, session, t } = this.props;
|
||||
|
||||
const translationKey = session
|
||||
? 'dialog.stopLiveStreaming'
|
||||
: 'dialog.startLiveStreaming';
|
||||
|
||||
return (
|
||||
<li
|
||||
aria-label = 'Live stream'
|
||||
className = 'overflow-menu-item'
|
||||
onClick = { onClick }>
|
||||
<span className = 'overflow-menu-item-icon'>
|
||||
<i className = 'icon-public' />
|
||||
</span>
|
||||
<span className = 'profile-text'>
|
||||
{ t(translationKey) }
|
||||
</span>
|
||||
<span className = 'beta-tag'>
|
||||
{ t('recording.beta') }
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(OverflowMenuLiveStreamingItem);
|
||||
|
|
@ -53,6 +53,7 @@ import AudioMuteButton from '../AudioMuteButton';
|
|||
import HangupButton from '../HangupButton';
|
||||
import OverflowMenuButton from './OverflowMenuButton';
|
||||
import OverflowMenuItem from './OverflowMenuItem';
|
||||
import OverflowMenuLiveStreamingItem from './OverflowMenuLiveStreamingItem';
|
||||
import OverflowMenuProfileItem from './OverflowMenuProfileItem';
|
||||
import ToolbarButton from './ToolbarButton';
|
||||
import VideoMuteButton from '../VideoMuteButton';
|
||||
|
|
@ -941,30 +942,6 @@ class Toolbox extends Component<Props> {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders an {@code OverflowMenuItem} for starting or stopping a live
|
||||
* streaming of the current conference.
|
||||
*
|
||||
* @private
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
_renderLiveStreamingButton() {
|
||||
const { _liveStreamingSession, t } = this.props;
|
||||
|
||||
const translationKey = _liveStreamingSession
|
||||
? 'dialog.stopLiveStreaming'
|
||||
: 'dialog.startLiveStreaming';
|
||||
|
||||
return (
|
||||
<OverflowMenuItem
|
||||
accessibilityLabel = 'Live stream'
|
||||
icon = 'icon-public'
|
||||
key = 'liveStreaming'
|
||||
onClick = { this._onToolbarToggleLiveStreaming }
|
||||
text = { t(translationKey) } />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the list elements of the overflow menu.
|
||||
*
|
||||
|
|
@ -978,6 +955,7 @@ class Toolbox extends Component<Props> {
|
|||
_feedbackConfigured,
|
||||
_fullScreen,
|
||||
_isGuest,
|
||||
_liveStreamingSession,
|
||||
_recordingEnabled,
|
||||
_sharingVideo,
|
||||
t
|
||||
|
|
@ -1006,7 +984,10 @@ class Toolbox extends Component<Props> {
|
|||
: t('toolbar.enterFullScreen') } />,
|
||||
_recordingEnabled
|
||||
&& this._shouldShowButton('livestreaming')
|
||||
&& this._renderLiveStreamingButton(),
|
||||
&& <OverflowMenuLiveStreamingItem
|
||||
key = 'livestreaming'
|
||||
onClick = { this._onToolbarToggleLiveStreaming }
|
||||
session = { _liveStreamingSession } />,
|
||||
_recordingEnabled
|
||||
&& this._shouldShowButton('recording')
|
||||
&& this._renderRecordingButton(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue