From 9dde2400d0b79cb81e658f23e8c1864172928418 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 27 Nov 2020 15:41:58 +0100
Subject: [PATCH] [Glitch] Fix media modal regression on public pages

Port e1a6526c8dccec4464667b422cc2336b28504d2c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/containers/media_container.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js
index a483510b07..ab5f68770c 100644
--- a/app/javascript/flavours/glitch/containers/media_container.js
+++ b/app/javascript/flavours/glitch/containers/media_container.js
@@ -30,6 +30,7 @@ export default class MediaContainer extends PureComponent {
     media: null,
     index: null,
     time: null,
+    backgroundColor: null,
   };
 
   handleOpenMedia = (media, index) => {
@@ -52,7 +53,16 @@ export default class MediaContainer extends PureComponent {
     document.body.classList.remove('with-modals--active');
     document.documentElement.style.marginRight = 0;
 
-    this.setState({ media: null, index: null, time: null });
+    this.setState({
+      media: null,
+      index: null,
+      time: null,
+      backgroundColor: null,
+    });
+  }
+
+  setBackgroundColor = color => {
+    this.setState({ backgroundColor: color });
   }
 
   render () {
@@ -85,13 +95,14 @@ export default class MediaContainer extends PureComponent {
             );
           })}
 
-          <ModalRoot onClose={this.handleCloseMedia}>
+          <ModalRoot backgroundColor={this.state.backgroundColor} onClose={this.handleCloseMedia}>
             {this.state.media && (
               <MediaModal
                 media={this.state.media}
                 index={this.state.index || 0}
                 time={this.state.time}
                 onClose={this.handleCloseMedia}
+                onChangeBackgroundColor={this.setBackgroundColor}
               />
             )}
           </ModalRoot>