123 lines
3.3 KiB
JavaScript
123 lines
3.3 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
import { Text, TouchableHighlight, View } from 'react-native';
|
|
|
|
import { translate } from '../../../base/i18n';
|
|
|
|
import styles, { ACTIVE_OPACITY, TOUCHABLE_UNDERLAY } from './styles';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* The list of broadcasts the user can pick from.
|
|
*/
|
|
broadcasts: ?Array<Object>,
|
|
|
|
/**
|
|
* Callback to be invoked when the user picked a broadcast. To be invoked
|
|
* with a single key (string).
|
|
*/
|
|
onChange: Function,
|
|
|
|
/**
|
|
* Function to be used to translate i18n labels.
|
|
*/
|
|
t: Function
|
|
}
|
|
|
|
type State = {
|
|
|
|
/**
|
|
* The key of the currently selected stream.
|
|
*/
|
|
streamKey: ?string
|
|
}
|
|
|
|
/**
|
|
* Class to implement a stream key picker (dropdown) component to allow the user
|
|
* to choose from the available Google Broadcasts/Streams.
|
|
*
|
|
* NOTE: This component is currently only used on mobile, but it is advised at
|
|
* a later point to unify mobile and web logic for this functionality. But it's
|
|
* out of the scope for now of the mobile live streaming functionality.
|
|
*/
|
|
class StreamKeyPicker extends Component<Props, State> {
|
|
|
|
/**
|
|
* Instantiates a new instance of StreamKeyPicker.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
streamKey: null
|
|
};
|
|
|
|
this._onStreamPick = this._onStreamPick.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Renders the component.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
render() {
|
|
const { broadcasts } = this.props;
|
|
|
|
if (!broadcasts || !broadcasts.length) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style = { styles.formWrapper }>
|
|
<View style = { styles.streamKeyPickerCta }>
|
|
<Text>
|
|
{ this.props.t('liveStreaming.choose') }
|
|
</Text>
|
|
</View>
|
|
<View style = { styles.streamKeyPickerWrapper } >
|
|
{ broadcasts.map((broadcast, index) =>
|
|
(<TouchableHighlight
|
|
activeOpacity = { ACTIVE_OPACITY }
|
|
key = { index }
|
|
onPress = { this._onStreamPick(broadcast.key) }
|
|
style = { [
|
|
styles.streamKeyPickerItem,
|
|
this.state.streamKey === broadcast.key
|
|
? styles.streamKeyPickerItemHighlight : null
|
|
] }
|
|
underlayColor = { TOUCHABLE_UNDERLAY }>
|
|
<Text style = { styles.streamKeyPickerItemText }>
|
|
{ broadcast.title }
|
|
</Text>
|
|
</TouchableHighlight>))
|
|
}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
_onStreamPick: string => Function
|
|
|
|
/**
|
|
* Callback to be invoked when the user picks a stream from the list.
|
|
*
|
|
* @private
|
|
* @param {string} streamKey - The key of the stream selected.
|
|
* @returns {Function}
|
|
*/
|
|
_onStreamPick(streamKey) {
|
|
return () => {
|
|
this.setState({
|
|
streamKey
|
|
});
|
|
this.props.onChange(streamKey);
|
|
};
|
|
}
|
|
}
|
|
|
|
export default translate(StreamKeyPicker);
|