From 372c45521892678ec09a6f08d875da49ffd880a0 Mon Sep 17 00:00:00 2001
From: Aleks Xhuvani <34059898+thehydrogen@users.noreply.github.com>
Date: Tue, 7 Nov 2023 19:15:38 +0100
Subject: [PATCH] [Glitch] Add volume saving/reuse to video player
Port 58f01a5c9a314072d69c157ebfcf5fdd67330068 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
.../flavours/glitch/features/video/index.jsx | 28 ++++++++++++++++---
app/javascript/flavours/glitch/settings.js | 3 +-
2 files changed, 26 insertions(+), 5 deletions(-)
diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx
index 2d50f3d8eb..a3050dfa6e 100644
--- a/app/javascript/flavours/glitch/features/video/index.jsx
+++ b/app/javascript/flavours/glitch/features/video/index.jsx
@@ -11,6 +11,7 @@ import { throttle } from 'lodash';
import { Blurhash } from 'flavours/glitch/components/blurhash';
import { Icon } from 'flavours/glitch/components/icon';
+import { playerSettings } from 'flavours/glitch/settings';
import { displayMedia, useBlurhash } from '../../initial_state';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
@@ -221,8 +222,8 @@ class Video extends PureComponent {
if(!isNaN(x)) {
this.setState((state) => ({ volume: x, muted: state.muted && x === 0 }), () => {
- this.video.volume = x;
- this.video.muted = this.state.muted;
+ this._syncVideoToVolumeState(x);
+ this._saveVolumeState(x);
});
}
}, 15);
@@ -360,6 +361,8 @@ class Video extends PureComponent {
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
window.addEventListener('scroll', this.handleScroll);
+
+ this._syncVideoFromLocalStorage();
}
componentWillUnmount () {
@@ -432,8 +435,24 @@ class Video extends PureComponent {
const muted = !(this.video.muted || this.state.volume === 0);
this.setState((state) => ({ muted, volume: Math.max(state.volume || 0.5, 0.05) }), () => {
- this.video.volume = this.state.volume;
- this.video.muted = this.state.muted;
+ this._syncVideoToVolumeState();
+ 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 = () => {
this.setState({ volume: this.video.volume, muted: this.video.muted });
+ this._saveVolumeState(this.video.volume, this.video.muted);
};
handleOpenVideo = () => {
diff --git a/app/javascript/flavours/glitch/settings.js b/app/javascript/flavours/glitch/settings.js
index aefb8e0e95..f31aee0afc 100644
--- a/app/javascript/flavours/glitch/settings.js
+++ b/app/javascript/flavours/glitch/settings.js
@@ -46,4 +46,5 @@ export default class Settings {
export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
export const tagHistory = new Settings('mastodon_tag_history');
export const bannerSettings = new Settings('mastodon_banner_settings');
-export const searchHistory = new Settings('mastodon_search_history');
\ No newline at end of file
+export const searchHistory = new Settings('mastodon_search_history');
+export const playerSettings = new Settings('mastodon_player');