haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(info): pass in dial in and live stream url 

Passing these values in should trigger AtlasKit InlineDialog
to re-render and reposition itself.
This commit is contained in:
Leonard Kim 2018-04-18 12:48:43 -07:00
parent ead36d026d
commit cb17a96745
2 changed files with 36 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
react/features/invite/components/InfoDialogButton.web.js
View File

@ -35,12 +35,9 @@ class InfoDialogButton extends Component {
static propTypes = {
/**
* Phone numbers for dialing into the conference.
* The redux state representing the dial-in numbers feature.
*/
_dialInNumbers: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array
]),
_dialIn: PropTypes.object,
/**
* Whether or not the {@code InfoDialog} should display automatically
@ -48,6 +45,11 @@ class InfoDialogButton extends Component {
*/
_disableAutoShow: PropTypes.bool,
/**
* The URL for a currently active live broadcast
*/
_liveStreamViewURL: PropTypes.string,
/**
* The number of real participants in the call. If in a lonely call,
* the {@code InfoDialog} will be automatically shown.
@ -117,7 +119,7 @@ class InfoDialogButton extends Component {
this._maybeAutoShowDialog();
}, INFO_DIALOG_AUTO_SHOW_TIMEOUT);
if (!this.props._dialInNumbers) {
if (!this.props._dialIn.numbers) {
this.props.dispatch(updateDialInNumbers());
}
}
@ -150,7 +152,7 @@ class InfoDialogButton extends Component {
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
const { _dialIn, _liveStreamViewURL, t } = this.props;
const { showDialog } = this.state;
const iconClass = `icon-info ${showDialog ? 'toggled' : ''}`;
@ -158,7 +160,10 @@ class InfoDialogButton extends Component {
<div className = 'toolbox-button-wth-dialog'>
<InlineDialog
content = {
<InfoDialog onClose = { this._onDialogClose } /> }
<InfoDialog
dialIn = { _dialIn }
liveStreamViewURL = { _liveStreamViewURL }
onClose = { this._onDialogClose } /> }
isOpen = { showDialog }
onClose = { this._onDialogClose }
position = { 'top right' }>
@ -215,16 +220,18 @@ class InfoDialogButton extends Component {
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _dialInNumbers: Array,
* _disableAutoShow: bolean,
* _dialIn: Object,
* _disableAutoShow: boolean,
* _liveStreamViewURL: string,
* _participantCount: number,
* _toolboxVisible: boolean
* }}
*/
function _mapStateToProps(state) {
return {
_dialInNumbers: state['features/invite'].numbers,
_dialIn: state['features/invite'],
_disableAutoShow: state['features/base/config'].iAmRecorder,
_liveStreamViewURL: state['features/recording'].liveStreamViewURL,
_participantCount:
getParticipantCount(state['features/base/participants']),
_toolboxVisible: state['features/toolbox'].visible

72
react/features/invite/components/info-dialog/InfoDialog.web.js
View File

@ -10,8 +10,6 @@ import {
getLocalParticipant
} from '../../../base/participants';
import { updateDialInNumbers } from '../../actions';
import DialInNumber from './DialInNumber';
import PasswordForm from './PasswordForm';
@ -24,15 +22,6 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
* @extends Component
*/
class InfoDialog extends Component {
/**
* Default values for {@code InfoDialog} component's properties.
*
* @static
*/
static defaultProps = {
autoUpdateNumbers: true
};
/**
* {@code InfoDialog} component's property types.
*
@ -57,21 +46,11 @@ class InfoDialog extends Component {
*/
_conferenceName: PropTypes.string,
/**
* The redux state representing the dial-in numbers feature.
*/
_dialIn: PropTypes.object,
/**
* The current url of the conference to be copied onto the clipboard.
*/
_inviteURL: PropTypes.string,
/**
* The current known URL for a live stream in progress.
*/
_liveStreamViewURL: PropTypes.string,
/**
* The value for how the conference is locked (or undefined if not
* locked) as defined by room-lock constants.
@ -84,17 +63,20 @@ class InfoDialog extends Component {
_password: PropTypes.string,
/**
* Whether or not this component should make a request for dial-in
* numbers. If false, this component will rely on an outside source
* updating and passing in numbers through the _dialIn prop.
* The object representing the dialIn feature.
*/
autoUpdateNumbers: PropTypes.bool,
dialIn: PropTypes.object,
/**
* Invoked to open a dialog for adding participants to the conference.
*/
dispatch: PropTypes.func,
/**
* The current known URL for a live stream in progress.
*/
liveStreamViewURL: PropTypes.string,
/**
* Callback invoked when the dialog should be closed.
*/
@ -134,7 +116,7 @@ class InfoDialog extends Component {
constructor(props) {
super(props);
const { defaultCountry, numbers } = props._dialIn;
const { defaultCountry, numbers } = props.dialIn;
if (numbers) {
this.state.phoneNumber
@ -161,20 +143,6 @@ class InfoDialog extends Component {
this._setCopyElement = this._setCopyElement.bind(this);
}
/**
* Implements {@link Component#componentDidMount()}. Invoked immediately
* after this component is mounted. Requests dial-in numbers if not
* already known.
*
* @inheritdoc
* @returns {void}
*/
componentDidMount() {
if (!this.state.phoneNumber && this.props.autoUpdateNumbers) {
this.props.dispatch(updateDialInNumbers());
}
}
/**
* Implements React's {@link Component#componentWillReceiveProps()}. Invoked
* before this mounted component receives new props.
@ -187,8 +155,8 @@ class InfoDialog extends Component {
this.setState({ passwordEditEnabled: false });
}
if (!this.state.phoneNumber && nextProps._dialIn.numbers) {
const { defaultCountry, numbers } = nextProps._dialIn;
if (!this.state.phoneNumber && nextProps.dialIn.numbers) {
const { defaultCountry, numbers } = nextProps.dialIn;
this.setState({
phoneNumber:
@ -204,7 +172,7 @@ class InfoDialog extends Component {
* @returns {ReactElement}
*/
render() {
const { _liveStreamViewURL, onMouseOver, t } = this.props;
const { liveStreamViewURL, onMouseOver, t } = this.props;
return (
<div
@ -236,7 +204,7 @@ class InfoDialog extends Component {
<div className = 'info-dialog-dial-in'>
{ this._renderDialInDisplay() }
</div>
{ _liveStreamViewURL && this._renderLiveStreamURL() }
{ liveStreamViewURL && this._renderLiveStreamURL() }
<div className = 'info-dialog-password'>
<PasswordForm
editEnabled = { this.state.passwordEditEnabled }
@ -336,7 +304,7 @@ class InfoDialog extends Component {
if (this._shouldDisplayDialIn()) {
const dial = t('info.invitePhone', {
number: this.state.phoneNumber,
conferenceID: this.props._dialIn.conferenceID
conferenceID: this.props.dialIn.conferenceID
});
const moreNumbers = t('info.invitePhoneAlternatives', {
url: this._getDialInfoPageURL()
@ -445,7 +413,7 @@ class InfoDialog extends Component {
return (
<div>
<DialInNumber
conferenceID = { this.props._dialIn.conferenceID }
conferenceID = { this.props.dialIn.conferenceID }
phoneNumber = { this.state.phoneNumber } />
<a
className = 'more-numbers'
@ -504,7 +472,7 @@ class InfoDialog extends Component {
* @returns {null|ReactElement}
*/
_renderLiveStreamURL() {
const { _liveStreamViewURL, t } = this.props;
const { liveStreamViewURL, t } = this.props;
return (
<div className = 'info-dialog-live-stream-url'>
@ -515,9 +483,9 @@ class InfoDialog extends Component {
<span className = 'info-value'>
<a
className = 'info-dialog-hidden-link'
href = { _liveStreamViewURL }
href = { liveStreamViewURL }
onClick = { this._onClickHiddenURL } >
{ _liveStreamViewURL }
{ liveStreamViewURL }
</a>
</span>
</div>
@ -531,7 +499,7 @@ class InfoDialog extends Component {
* @returns {boolean}
*/
_shouldDisplayDialIn() {
const { conferenceID, numbers, numbersEnabled } = this.props._dialIn;
const { conferenceID, numbers, numbersEnabled } = this.props.dialIn;
const { phoneNumber } = this.state;
return Boolean(
@ -565,9 +533,7 @@ class InfoDialog extends Component {
* _canEditPassword: boolean,
* _conference: Object,
* _conferenceName: string,
* _dialIn: Object,
* _inviteURL: string,
* _liveStreamViewURL: string,
* _locked: string,
* _password: string
* }}
@ -593,9 +559,7 @@ function _mapStateToProps(state) {
_canEditPassword: canEditPassword,
_conference: conference,
_conferenceName: room,
_dialIn: state['features/invite'],
_inviteURL: getInviteURL(state),
_liveStreamViewURL: state['features/recording'].liveStreamViewURL,
_locked: locked,
_password: password
};