Improve swiping (#4188)

* feat(components/columns_area): Toggle animation settings

* fix(components/media_modal): Center non-visible views

* fix(components/media_modal): Check for null

* refactor(columns_area): Better logic

2 files changed, 16 insertions, 6 deletions

diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index cbc185a7d..ef9a15522 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -32,12 +32,19 @@ export default class ColumnsArea extends ImmutablePureComponent {
     children: PropTypes.node,
   };
 
+  componentDidUpdate() {
+    this.lastIndex = getIndex(this.context.router.history.location.pathname);
+  }
+
   handleSwipe = (index) => {
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(() => {
-        this.context.router.history.push(getLink(index));
-      });
-    });
+    this.pendingIndex = index;
+  }
+
+  handleAnimationEnd = () => {
+    if (typeof this.pendingIndex === 'number') {
+      this.context.router.history.push(getLink(this.pendingIndex));
+      this.pendingIndex = null;
+    }
   }
 
   renderView = (link, index) => {
@@ -68,10 +75,11 @@ export default class ColumnsArea extends ImmutablePureComponent {
     const { columns, children, singleColumn } = this.props;
 
     const columnIndex = getIndex(this.context.router.history.location.pathname);
+    const shouldAnimate = Math.abs(this.lastIndex - columnIndex) === 1;
 
     if (singleColumn) {
       return columnIndex !== -1 ? (
-        <ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} animateTransitions={false} style={{ height: '100%' }}>
+        <ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
           {links.map(this.renderView)}
         </ReactSwipeableViews>
       ) : <div className='columns-area'>{children}</div>;
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index bcf7ba4e0..0face646d 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1312,6 +1312,8 @@
 }
 
 .react-swipeable-view-container > * {
+  display: flex;
+  align-items: center;
   height: 100%;
 }