Add volume saving/reuse to video player (#27488)
parent
ee57bb4b44
commit
58f01a5c9a
|
@ -19,6 +19,7 @@ import { throttle } from 'lodash';
|
||||||
|
|
||||||
import { Blurhash } from 'mastodon/components/blurhash';
|
import { Blurhash } from 'mastodon/components/blurhash';
|
||||||
import { Icon } from 'mastodon/components/icon';
|
import { Icon } from 'mastodon/components/icon';
|
||||||
|
import { playerSettings } from 'mastodon/settings';
|
||||||
|
|
||||||
import { displayMedia, useBlurhash } from '../../initial_state';
|
import { displayMedia, useBlurhash } from '../../initial_state';
|
||||||
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
|
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
|
||||||
|
@ -226,8 +227,8 @@ class Video extends PureComponent {
|
||||||
|
|
||||||
if(!isNaN(x)) {
|
if(!isNaN(x)) {
|
||||||
this.setState((state) => ({ volume: x, muted: state.muted && x === 0 }), () => {
|
this.setState((state) => ({ volume: x, muted: state.muted && x === 0 }), () => {
|
||||||
this.video.volume = x;
|
this._syncVideoToVolumeState(x);
|
||||||
this.video.muted = this.state.muted;
|
this._saveVolumeState(x);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, 15);
|
}, 15);
|
||||||
|
@ -365,6 +366,8 @@ class Video extends PureComponent {
|
||||||
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
|
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
|
||||||
|
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
window.addEventListener('scroll', this.handleScroll);
|
||||||
|
|
||||||
|
this._syncVideoFromLocalStorage();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
|
@ -437,8 +440,24 @@ class Video extends PureComponent {
|
||||||
const muted = !(this.video.muted || this.state.volume === 0);
|
const muted = !(this.video.muted || this.state.volume === 0);
|
||||||
|
|
||||||
this.setState((state) => ({ muted, volume: Math.max(state.volume || 0.5, 0.05) }), () => {
|
this.setState((state) => ({ muted, volume: Math.max(state.volume || 0.5, 0.05) }), () => {
|
||||||
this.video.volume = this.state.volume;
|
this._syncVideoToVolumeState();
|
||||||
this.video.muted = this.state.muted;
|
this._saveVolumeState();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
_syncVideoToVolumeState = (volume = null, muted = null) => {
|
||||||
|
this.video.volume = volume ?? this.state.volume;
|
||||||
|
this.video.muted = muted ?? this.state.muted;
|
||||||
|
};
|
||||||
|
|
||||||
|
_saveVolumeState = (volume = null, muted = null) => {
|
||||||
|
playerSettings.set('volume', volume ?? this.state.volume);
|
||||||
|
playerSettings.set('muted', muted ?? this.state.muted);
|
||||||
|
};
|
||||||
|
|
||||||
|
_syncVideoFromLocalStorage = () => {
|
||||||
|
this.setState({ volume: playerSettings.get('volume') ?? 0.5, muted: playerSettings.get('muted') ?? false }, () => {
|
||||||
|
this._syncVideoToVolumeState();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -480,6 +499,7 @@ class Video extends PureComponent {
|
||||||
|
|
||||||
handleVolumeChange = () => {
|
handleVolumeChange = () => {
|
||||||
this.setState({ volume: this.video.volume, muted: this.video.muted });
|
this.setState({ volume: this.video.volume, muted: this.video.muted });
|
||||||
|
this._saveVolumeState(this.video.volume, this.video.muted);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleOpenVideo = () => {
|
handleOpenVideo = () => {
|
||||||
|
|
|
@ -46,4 +46,5 @@ export default class Settings {
|
||||||
export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
|
export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
|
||||||
export const tagHistory = new Settings('mastodon_tag_history');
|
export const tagHistory = new Settings('mastodon_tag_history');
|
||||||
export const bannerSettings = new Settings('mastodon_banner_settings');
|
export const bannerSettings = new Settings('mastodon_banner_settings');
|
||||||
export const searchHistory = new Settings('mastodon_search_history');
|
export const searchHistory = new Settings('mastodon_search_history');
|
||||||
|
export const playerSettings = new Settings('mastodon_player');
|
||||||
|
|
Loading…
Reference in New Issue