486e8e35d9
For the most part the changes are taking the "static propTypes" declaration off of components and declaring them as Flow types. Sometimes to support flow some method signatures had to be added. There are some exceptions in which more had to be done to tame the beast: - AbstractVideoTrack: put in additional truthy checks for videoTrack. - Video: add truthy checks for the _videoElement ref. - shouldRenderVideoTrack function: Some component could pass null for the videoTrack argument and Flow wanted that called out explicitly. - DisplayName: Add a truthy check for the input ref before acting on it. - NumbersList: Move array checks inline for Flow to comprehend array methods could be called. Add type checks in the Object.entries loop as the value is assumed to be a mixed type by Flow. - AbstractToolbarButton: add additional truthy check for passed in type.
112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
/* @flow */
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
const VOLUME_SLIDER_SCALE = 100;
|
|
|
|
/**
|
|
* 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
|
|
};
|
|
|
|
/**
|
|
* 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
|
|
};
|
|
|
|
/**
|
|
* Implements a React {@link Component} which displays an input slider for
|
|
* adjusting the local volume of a remote participant.
|
|
*
|
|
* @extends Component
|
|
*/
|
|
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() {
|
|
return (
|
|
<li className = 'popupmenu__item'>
|
|
<div className = 'popupmenu__contents'>
|
|
<span className = 'popupmenu__icon'>
|
|
<i className = 'icon-volume' />
|
|
</span>
|
|
<div className = 'popupmenu__slider_container'>
|
|
<input
|
|
className = 'popupmenu__slider'
|
|
max = { VOLUME_SLIDER_SCALE }
|
|
min = { 0 }
|
|
onChange = { this._onVolumeChange }
|
|
type = 'range'
|
|
value = { this.state.volumeLevel } />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
_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 {Object} event - DOM Event for slider change.
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_onVolumeChange(event) {
|
|
const volumeLevel = event.currentTarget.value;
|
|
|
|
this.props.onChange(volumeLevel / VOLUME_SLIDER_SCALE);
|
|
this.setState({ volumeLevel });
|
|
}
|
|
}
|
|
|
|
export default VolumeSlider;
|