Swipes

src/components/big_picture.tsx

@@ -6,19 +6,34 @@ import * as React from "react";
 export interface Props {
   image: Model.Image;
   onClose: () => void;
+  showNext: () => void;
+  showPrevious: () => void;
   width: number;
 }
 
-export class BigPicture extends React.PureComponent<Props, {}> {
+interface TouchStart {
+    x: number;
+    y: number;
+}
+
+export interface State {
+    touchStart?: TouchStart | null;
+}
+
+export class BigPicture extends React.PureComponent<Props, State> {
   static displayName = "BigPicture";
 
   componentDidMount() {
     window.addEventListener("keyup", this._onEscape as any);
+    window.addEventListener("touchstart", this._onTouchStart as any);
+    window.addEventListener("touchend", this._onTouchEnd as any);
     document.body.classList.add("no-scroll");
   }
 
   componentWillUnmount() {
     window.removeEventListener("keyup", this._onEscape as any);
+    window.removeEventListener("touchstart", this._onTouchStart as any);
+    window.removeEventListener("touchend", this._onTouchEnd as any);
     document.body.classList.remove("no-scroll");
   }
 
@@ -68,4 +83,27 @@ export class BigPicture extends React.PureComponent<Props, {}> {
       this.props.onClose();
     }
   };
+
+  private _onTouchStart = (e: React.TouchEvent) => {
+      const touch = e.touches[0];
+      this.setState({ touchStart: { x: touch.screenX, y: touch.screenY }});
+  }
+
+  private _onTouchEnd = (e: React.TouchEvent) => {
+      console.debug("Event", e);
+      const touch = e.changedTouches[0];
+      const touchStart = this.state.touchStart as TouchStart;
+
+      const dx = touch.screenX - touchStart.x;
+
+      if (Math.abs(dx) / window.innerWidth > 0.05) {
+          if (dx < 0) {
+              this.props.showNext();
+          } else {
+              this.props.showPrevious();
+          }
+      }
+
+      this.setState({ touchStart: null });
+  }
 }

src/components/root.tsx

@@ -121,6 +121,8 @@ export class Root extends React.PureComponent<Props, State> {
       <BigPicture
         image={this.state.selectedImage}
         onClose={this._showGrid}
+        showNext={this._showNextBigPicture}
+        showPrevious={this._showPreviousBigPicture}
         width={this.state.width}
       />
     ) : null;
@@ -189,6 +191,20 @@ export class Root extends React.PureComponent<Props, State> {
     this._onSetSelected(this.state.selectedSet as Model.ImageSet);
   };
 
+  private _showNextBigPicture = () => {
+    const images: Model.Image[] = this.state.selectedSet?.images as Model.Image[];
+    const current = images.indexOf(this.state.selectedImage as Model.Image);
+    const next = current + 1 >= images.length ? 0 : current + 1;
+    this._onImageSelected(images[next]);
+  }
+
+  private _showPreviousBigPicture = () => {
+    const images: Model.Image[] = this.state.selectedSet?.images as Model.Image[];
+    const current = images.indexOf(this.state.selectedImage as Model.Image);
+    const previous = current - 1 < 0 ? images.length - 1 : current - 1;
+    this._onImageSelected(images[previous]);
+  }
+
   private _setGridHeight = (grid: number) => (height: number) => {
     if (this.state.gridHeights[grid] === height) {
       return;