From a48dbc78f829874190ba062635881a7444d1e5f9 Mon Sep 17 00:00:00 2001
From: Thibaut Girka <thib@sitedethib.com>
Date: Wed, 4 Nov 2020 15:12:06 +0100
Subject: [PATCH] Fix hiding video breaking playback

Also make the video player code closer to upstream
---
 .../flavours/glitch/features/video/index.js   | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index d22bc1d56a..8708128569 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -281,9 +281,9 @@ class Video extends React.PureComponent {
 
   togglePlay = () => {
     if (this.state.paused) {
-      this.video.play();
+      this.setState({ paused: false }, () => this.video.play());
     } else {
-      this.video.pause();
+      this.setState({ paused: true }, () => this.video.pause());
     }
   }
 
@@ -381,13 +381,16 @@ class Video extends React.PureComponent {
   }
 
   toggleMute = () => {
-    this.video.muted = !this.video.muted;
-    this.setState({ muted: this.video.muted });
+    const muted = !this.video.muted;
+
+    this.setState({ muted }, () => {
+      this.video.muted = muted;
+    });
   }
 
   toggleReveal = () => {
     if (this.state.revealed) {
-      this.video.pause();
+      this.setState({ paused: true });
     }
 
     if (this.props.onToggleVisibility) {
@@ -475,13 +478,6 @@ class Video extends React.PureComponent {
       return (<div className={computedClass} ref={this.setPlayerRef} tabindex={0}></div>);
     }
 
-    let warning;
-    if (sensitive) {
-      warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
-    } else {
-      warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
-    }
-
     let preload;
 
     if (this.props.currentTime || fullscreen || dragging) {
@@ -492,6 +488,14 @@ class Video extends React.PureComponent {
       preload = 'none';
     }
 
+    let warning;
+
+    if (sensitive) {
+      warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
+    } else {
+      warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
+    }
+
     return (
       <div
         className={computedClass}