treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Add volume saving/reuse to video player 

Port 58f01a5c9a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-new
Aleks Xhuvani 2023-11-07 19:15:38 +01:00 committed by Claire
parent b474cbbd28
commit 372c455218
2 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/javascript/flavours/glitch/features/video/index.jsx
View File

@ -11,6 +11,7 @@ import { throttle } from 'lodash';
import { Blurhash } from 'flavours/glitch/components/blurhash'; import { Blurhash } from 'flavours/glitch/components/blurhash';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import { playerSettings } from 'flavours/glitch/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';
@ -221,8 +222,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);
@ -360,6 +361,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 () {
@ -432,8 +435,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();
}); });
}; };
@ -479,6 +498,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 = () => {

1
app/javascript/flavours/glitch/settings.js
View File

@ -47,3 +47,4 @@ export const pushNotificationsSetting = new Settings('mastodon_push_notification
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');