New: Swipe left/right to navigate authors/books on mobile

frontend/src/Components/Swipe/SwipeHeader.css

@@ -0,0 +1,14 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.content {
+  position: relative;
+  display: flex;
+  width: 300%;
+  height: 100%;
+  transition: var(--transition);
+  transform: translateX(var(--translate));
+}

frontend/src/Components/Swipe/SwipeHeader.js

@@ -0,0 +1,242 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Measure from 'Components/Measure';
+import styles from './SwipeHeader.css';
+
+function cursorPosition(event) {
+  return event.touches ? event.touches[0].clientX : event.clientX;
+}
+
+class SwipeHeader extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      containerWidth: 0,
+      touching: null,
+      translate: 0,
+      stage: 'init',
+      url: null
+    };
+  }
+
+  componentWillUnmount() {
+    this.removeEventListeners();
+  }
+
+  //
+  // Listeners
+
+  onMouseDown = (e) => {
+    if (!this.props.isSmallScreen || this.state.touching) {
+      return;
+    }
+
+    this.startTouchPosition = cursorPosition(e);
+    this.initTranslate = this.state.translate;
+
+    this.setState({
+      stage: null,
+      touching: true }, () => {
+      this.addEventListeners();
+    });
+  };
+
+  addEventListeners = () => {
+    window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('touchmove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
+    window.addEventListener('touchend', this.onMouseUp);
+  }
+
+  removeEventListeners = () => {
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('touchmove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+    window.removeEventListener('touchend', this.onMouseUp);
+  }
+
+  onMouseMove = (e) => {
+    const {
+      touching,
+      containerWidth
+    } = this.state;
+
+    if (!touching) {
+      return;
+    }
+
+    const translate = Math.max(Math.min(cursorPosition(e) - this.startTouchPosition + this.initTranslate, containerWidth), -1 * containerWidth);
+
+    this.setState({ translate });
+  };
+
+  onMouseUp = () => {
+    this.startTouchPosition = null;
+
+    const {
+      nextLink,
+      prevLink,
+      navWidth
+    } = this.props;
+
+    const {
+      containerWidth,
+      translate
+    } = this.state;
+
+    const newState = {
+      touching: false
+    };
+
+    const acceptableMove = navWidth * 0.7;
+    const showNav = Math.abs(translate) >= acceptableMove;
+    const navWithoutConfirm = Math.abs(translate) >= containerWidth * 0.5;
+
+    if (navWithoutConfirm) {
+      newState.translate = Math.sign(translate) * containerWidth;
+    }
+
+    if (!showNav) {
+      newState.translate = 0;
+      newState.stage = null;
+    }
+
+    if (showNav && !navWithoutConfirm) {
+      newState.translate = Math.sign(translate) * navWidth;
+      newState.stage = 'showNav';
+    }
+
+    this.setState(newState, () => {
+      if (navWithoutConfirm) {
+        this.onNavClick(translate < 0 ? nextLink : prevLink, Math.abs(translate) === containerWidth);
+      }
+    });
+
+    this.removeEventListeners();
+  }
+
+  onNavClick = (url, callTransition) => {
+    const {
+      containerWidth,
+      translate
+    } = this.state;
+
+    this.setState({
+      stage: 'navigating',
+      translate: Math.sign(translate) * containerWidth,
+      url
+    }, () => {
+      if (callTransition) {
+        this.onTransitionEnd();
+      }
+    });
+  }
+
+  onTransitionEnd = (e) => {
+    const {
+      stage,
+      url
+    } = this.state;
+
+    if (stage === 'navigating') {
+      this.setState({
+        stage: 'navigated',
+        translate: 0,
+        url: null
+      }, () => {
+        this.props.onGoTo(url);
+        this.setState({ stage: null });
+      });
+    }
+  }
+
+  onNext = () => {
+    this.onNavClick(this.props.nextLink);
+  }
+
+  onPrev = () => {
+    this.onNavClick(this.props.prevLink);
+  }
+
+  onContainerMeasure = ({ width }) => {
+    this.setState({ containerWidth: width });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      transitionDuration,
+      className,
+      children,
+      prevComponent,
+      currentComponent,
+      nextComponent
+    } = this.props;
+
+    const {
+      containerWidth,
+      translate,
+      touching,
+      stage
+    } = this.state;
+
+    const useTransition = !touching && stage !== 'navigated' && stage !== 'init';
+
+    const style = {
+      '--translate': `${translate - containerWidth}px`,
+      '--transition': useTransition ? `transform ${transitionDuration}ms ease-out` : undefined
+    };
+
+    console.log(`stage: ${stage} translate: ${translate} width: ${containerWidth}`);
+    console.log(style);
+
+    return (
+      <Measure
+        className={className}
+        onMeasure={this.onContainerMeasure}
+      >
+        {children}
+
+        <div
+          className={styles.content}
+          style={style}
+          onMouseDown={this.onMouseDown}
+          onTouchStart={this.onMouseDown}
+          onTransitionEnd={this.onTransitionEnd}
+        >
+          {prevComponent(containerWidth)}
+          {currentComponent(containerWidth)}
+          {nextComponent(containerWidth)}
+        </div>
+      </Measure>
+    );
+  }
+}
+
+SwipeHeader.propTypes = {
+  transitionDuration: PropTypes.number.isRequired,
+  navWidth: PropTypes.number.isRequired,
+  nextLink: PropTypes.string,
+  prevLink: PropTypes.string,
+  nextComponent: PropTypes.func.isRequired,
+  currentComponent: PropTypes.func.isRequired,
+  prevComponent: PropTypes.func.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  onGoTo: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired
+};
+
+SwipeHeader.defaultProps = {
+  transitionDuration: 250,
+  navWidth: 75
+};
+
+export default SwipeHeader;

frontend/src/Components/Swipe/SwipeHeaderConnector.js

@@ -0,0 +1,46 @@
+import { push } from 'connected-react-router';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import SwipeHeader from './SwipeHeader';
+
+function createMapStateToProps() {
+  return createSelector(
+    createDimensionsSelector(),
+    (dimensions) => {
+      return {
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onGoTo(url) {
+      dispatch(push(`${window.Readarr.urlBase}${url}`));
+    }
+  };
+}
+
+class SwipeHeaderConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SwipeHeader
+        {...this.props}
+      />
+    );
+  }
+}
+
+SwipeHeaderConnector.propTypes = {
+  onGoTo: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(SwipeHeaderConnector);