[Glitch] Add expand/compress image button on image view box

Port 6a2db10f767879b9072b6c020ebadac4f985ed34 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

1 files changed, 21 insertions, 3 deletions

diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.js b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
index aa6554107..e37df7208 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.js
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.js
@@ -35,23 +35,39 @@ class MediaModal extends ImmutablePureComponent {
   state = {
     index: null,
     navigationHidden: false,
+    zoomButtonHidden: false,
   };
 
   handleSwipe = (index) => {
     this.setState({ index: index % this.props.media.size });
   }
 
+  handleTransitionEnd = () => {
+    this.setState({
+      zoomButtonHidden: false,
+    });
+  }
+
   handleNextClick = () => {
-    this.setState({ index: (this.getIndex() + 1) % this.props.media.size });
+    this.setState({
+      index: (this.getIndex() + 1) % this.props.media.size,
+      zoomButtonHidden: true,
+    });
   }
 
   handlePrevClick = () => {
-    this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size });
+    this.setState({
+      index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size,
+      zoomButtonHidden: true,
+    });
   }
 
   handleChangeIndex = (e) => {
     const index = Number(e.currentTarget.getAttribute('data-index'));
-    this.setState({ index: index % this.props.media.size });
+    this.setState({
+      index: index % this.props.media.size,
+      zoomButtonHidden: true,
+    });
   }
 
   handleKeyDown = (e) => {
@@ -128,6 +144,7 @@ class MediaModal extends ImmutablePureComponent {
             alt={image.get('description')}
             key={image.get('url')}
             onClick={this.toggleNavigation}
+            zoomButtonHidden={this.state.zoomButtonHidden}
           />
         );
       } else if (image.get('type') === 'video') {
@@ -191,6 +208,7 @@ class MediaModal extends ImmutablePureComponent {
             style={swipeableViewsStyle}
             containerStyle={containerStyle}
             onChangeIndex={this.handleSwipe}
+            onTransitionEnd={this.handleTransitionEnd}
             index={index}
           >
             {content}