kikobar/mastodon
1
0
Fork 0
mirror of https://github.com/kikobar/mastodon.git synced 2024-11-05 17:31:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make <Audio> to handle volume change (#23187)

Browse source
This commit is contained in:
Mina Her 2023-01-25 00:24:46 +09:00 committed by GitHub
parent 624d7ae51d
commit 3cf60ba267
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/javascript/mastodon/features/audio/index.js
View file

@ -59,7 +59,7 @@ class Audio extends React.PureComponent {
duration: null, duration: null,
paused: true, paused: true,
muted: false, muted: false,
volume: 0.5, volume: 1,
dragging: false, dragging: false,
revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'), revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
}; };
@ -80,8 +80,8 @@ class Audio extends React.PureComponent {
_pack() { _pack() {
return { return {
src: this.props.src, src: this.props.src,
volume: this.audio.volume, volume: this.state.volume,
muted: this.audio.muted, muted: this.state.muted,
currentTime: this.audio.currentTime, currentTime: this.audio.currentTime,
poster: this.props.poster, poster: this.props.poster,
backgroundColor: this.props.backgroundColor, backgroundColor: this.props.backgroundColor,
@ -115,7 +115,8 @@ class Audio extends React.PureComponent {
this.audio = c; this.audio = c;
if (this.audio) { if (this.audio) {
this.setState({ volume: this.audio.volume, muted: this.audio.muted }); this.audio.volume = 1;
this.audio.muted = false;
} }
} }
@ -202,7 +203,9 @@ class Audio extends React.PureComponent {
const muted = !this.state.muted; const muted = !this.state.muted;
this.setState({ muted }, () => { this.setState({ muted }, () => {
this.audio.muted = muted; if (this.gainNode) {
this.gainNode.gain.value = muted ? 0 : this.state.volume;
}
}); });
} }
@ -280,7 +283,9 @@ class Audio extends React.PureComponent {
if(!isNaN(x)) { if(!isNaN(x)) {
this.setState({ volume: x }, () => { this.setState({ volume: x }, () => {
this.audio.volume = x; if (this.gainNode) {
this.gainNode.gain.value = this.state.muted ? 0 : x;
}
}); });
} }
}, 15); }, 15);
@ -313,20 +318,12 @@ class Audio extends React.PureComponent {
} }
handleLoadedData = () => { handleLoadedData = () => {
const { autoPlay, currentTime, volume, muted } = this.props; const { autoPlay, currentTime } = this.props;
if (currentTime) { if (currentTime) {
this.audio.currentTime = currentTime; this.audio.currentTime = currentTime;
} }
if (volume !== undefined) {
this.audio.volume = volume;
}
if (muted !== undefined) {
this.audio.muted = muted;
}
if (autoPlay) { if (autoPlay) {
this.togglePlay(); this.togglePlay();
} }
@ -336,11 +333,16 @@ class Audio extends React.PureComponent {
const AudioContext = window.AudioContext || window.webkitAudioContext; const AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext(); const context = new AudioContext();
const source = context.createMediaElementSource(this.audio); const source = context.createMediaElementSource(this.audio);
const gainNode = context.createGain();
gainNode.gain.value = this.state.muted ? 0 : this.state.volume;
this.visualizer.setAudioContext(context, source); this.visualizer.setAudioContext(context, source);
source.connect(context.destination); source.connect(gainNode);
gainNode.connect(context.destination);
this.audioContext = context; this.audioContext = context;
this.gainNode = gainNode;
} }
handleDownload = () => { handleDownload = () => {