mirror of https://github.com/jitsi/jitsi-meet
feat(native-participants-pane) added action dialogs for context menu participant details and native community slider
Calin Chitu
4 years ago
committed by
Hristo Terezov
parent
0b3991d9e1
commit
8d4cf7165e
@ -0,0 +1,32 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
|
||||
import { ConfirmDialog } from '../../../base/dialog'; |
||||
import { translate } from '../../../base/i18n'; |
||||
import { connect } from '../../../base/redux'; |
||||
import AbstractMuteRemoteParticipantsVideoDialog |
||||
from '../AbstractMuteRemoteParticipantsVideoDialog'; |
||||
|
||||
/** |
||||
* Dialog to confirm a remote participant's video stop action. |
||||
*/ |
||||
class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVideoDialog { |
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
return ( |
||||
<ConfirmDialog |
||||
contentKey = 'dialog.muteParticipantsVideoDialog' |
||||
onSubmit = { this._onSubmit } /> |
||||
); |
||||
} |
||||
|
||||
_onSubmit: () => boolean; |
||||
} |
||||
|
||||
export default translate(connect()(MuteRemoteParticipantsVideoDialog)); |
||||
@ -0,0 +1,119 @@ |
||||
// @flow
|
||||
|
||||
import Slider from '@react-native-community/slider'; |
||||
import React, { Component } from 'react'; |
||||
import { View } from 'react-native'; |
||||
import { withTheme } from 'react-native-paper'; |
||||
|
||||
import { Icon, IconVolumeEmpty } from '../../../base/icons'; |
||||
import { VOLUME_SLIDER_SCALE } from '../../constants'; |
||||
|
||||
import styles from './styles'; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of {@link VolumeSlider}. |
||||
*/ |
||||
type Props = { |
||||
|
||||
/** |
||||
* The value of the audio slider should display at when the component first |
||||
* mounts. Changes will be stored in state. The value should be a number |
||||
* between 0 and 1. |
||||
*/ |
||||
initialValue: number, |
||||
|
||||
/** |
||||
* The callback to invoke when the audio slider value changes. |
||||
*/ |
||||
onChange: Function, |
||||
|
||||
/** |
||||
* Theme used for styles. |
||||
*/ |
||||
theme: Object |
||||
}; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} state of {@link VolumeSlider}. |
||||
*/ |
||||
type State = { |
||||
|
||||
/** |
||||
* The volume of the participant's audio element. The value will |
||||
* be represented by a slider. |
||||
*/ |
||||
volumeLevel: number |
||||
}; |
||||
|
||||
/** |
||||
* Component that renders the volume slider. |
||||
* |
||||
* @returns {React$Element<any>} |
||||
*/ |
||||
class VolumeSlider extends Component<Props, State> { |
||||
|
||||
/** |
||||
* Initializes a new {@code VolumeSlider} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props: Props) { |
||||
super(props); |
||||
|
||||
this.state = { |
||||
volumeLevel: (props.initialValue || 0) * VOLUME_SLIDER_SCALE |
||||
}; |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onVolumeChange = this._onVolumeChange.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { volumeLevel } = this.state; |
||||
const { palette } = this.props.theme; |
||||
|
||||
return ( |
||||
<View style = { styles.volumeSliderContainer }> |
||||
<Icon |
||||
size = { 24 } |
||||
src = { IconVolumeEmpty } |
||||
style = { styles.volumeSliderIcon } /> |
||||
<View style = { styles.sliderContainer }> |
||||
<Slider |
||||
maximumTrackTintColor = { palette.field02 } |
||||
maximumValue = { VOLUME_SLIDER_SCALE } |
||||
minimumTrackTintColor = { palette.action01 } |
||||
minimumValue = { 0 } |
||||
onValueChange = { this._onVolumeChange } |
||||
/* eslint-disable-next-line react-native/no-inline-styles */ |
||||
value = { volumeLevel } /> |
||||
</View> |
||||
</View> |
||||
|
||||
); |
||||
} |
||||
|
||||
_onVolumeChange: (Object) => void; |
||||
|
||||
/** |
||||
* Sets the internal state of the volume level for the volume slider. |
||||
* Invokes the prop onVolumeChange to notify of volume changes. |
||||
* |
||||
* @param {number} volumeLevel - Selected volume on slider. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onVolumeChange(volumeLevel) { |
||||
this.setState({ volumeLevel }); |
||||
} |
||||
} |
||||
|
||||
export default withTheme(VolumeSlider); |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
// @flow
|
||||
|
||||
/** |
||||
* Used to modify initialValue, which is expected to be a decimal value between |
||||
* 0 and 1, and converts it to a number representable by an input slider, which |
||||
* recognizes whole numbers. |
||||
*/ |
||||
export const VOLUME_SLIDER_SCALE = 100; |
||||
Loading…
Reference in new issue