From a5f9ff08cb93e81c95e80ee0e5d3e73f9d1c058a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 May 2021 21:41:07 -0500
Subject: [PATCH] Don't close media modal unless you really click outside

---
 app/soapbox/features/ui/components/media_modal.js | 9 ++++++++-
 app/styles/components/modal.scss                  | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index 9ae762586..c6d07db6a 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -119,6 +119,13 @@ class MediaModal extends ImmutablePureComponent {
     }
   }
 
+  handleCloserClick = e => {
+    const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]');
+    if (e.target === activeSlide || !activeSlide.contains(e.target)) {
+      this.props.onClose();
+    }
+  }
+
   render() {
     const { media, status, account, intl, onClose } = this.props;
     const { navigationHidden } = this.state;
@@ -236,7 +243,7 @@ class MediaModal extends ImmutablePureComponent {
         <div
           className='media-modal__closer'
           role='presentation'
-          onClick={onClose}
+          onClick={this.handleCloserClick}
         >
           <ReactSwipeableViews
             style={swipeableViewsStyle}
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 015b7c294..845dc2697 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -63,6 +63,11 @@
     justify-content: center;
   }
 
+  .audio-player {
+    max-width: 80vw;
+    max-height: 80vh;
+  }
+
   .extended-video-player {
     width: 100%;
     height: 100%;