From e2b84b45bf7b7a060ad8f3e3c24188cc0818d3c0 Mon Sep 17 00:00:00 2001
From: Christian Smith Mantas <casm202@gmail.com>
Date: Mon, 4 Dec 2023 23:09:58 +0100
Subject: [PATCH] Update: bump version and enhance touch interactions for swipe
 up on stories

---
 package.json                        |  2 +-
 src/App.tsx                         |  2 +-
 src/components/ReactStory/index.tsx | 11 ++++++++++-
 src/global.scss                     |  1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 536b148..334e899 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@casm101/react-stories",
   "description": "Simple and dynamic Metainspired story component in React!",
   "private": false,
-  "version": "0.0.2-beta",
+  "version": "0.0.3-beta",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
diff --git a/src/App.tsx b/src/App.tsx
index dc610db..b66ab8d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,7 +20,7 @@ function App() {
             seeMore: {
               type: 'custom',
               content: <p>Custom see more component →</p>,
-              action: () => console.log('This is a custom see more action')
+              action: () => alert('This is a custom see more action')
             },
             story: () => (
               <div className='custom-story'>
diff --git a/src/components/ReactStory/index.tsx b/src/components/ReactStory/index.tsx
index 1c50b14..285a018 100644
--- a/src/components/ReactStory/index.tsx
+++ b/src/components/ReactStory/index.tsx
@@ -54,6 +54,7 @@ export const ReactStory = ({
 
     // Declaration of local refrences
     const mousedownId = useRef<number>();
+    const startYRef = useRef<number>(0);
     const videoRef = useRef<HTMLVideoElement | null>(null);
 
     // ***** Usage of hooks ***** //
@@ -87,6 +88,7 @@ export const ReactStory = ({
     // Function to toggle overlay visibility (on mouse down event)
     const mouseDownAction = (e: React.MouseEvent | React.TouchEvent) => {
         e.preventDefault();
+        startYRef.current = (e as React.TouchEvent).touches[0].clientY;
         mousedownId.current = setTimeout(() => {
             setPause(true);
         }, 200);
@@ -96,7 +98,14 @@ export const ReactStory = ({
     const mouseUpAction = (action: 'prev' | 'next') => (e: React.MouseEvent | React.TouchEvent) => {
         e.preventDefault();
         mousedownId.current && clearTimeout(mousedownId.current);
-        if (pause) {
+
+        const endY = (e as React.TouchEvent).changedTouches[0].clientY;
+        const deltaY = startYRef.current - endY;
+        const minSwipeDistance = 50;
+
+        if (deltaY > minSwipeDistance) {
+            stories[currentStory]?.seeMore?.action()
+        } else if (pause) {
             setPause(false);
         } else {
             if (action == 'prev') prevStory();
diff --git a/src/global.scss b/src/global.scss
index e2a4783..ca30298 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -5,6 +5,7 @@ body {
   padding: 0;
   margin: 0;
 
+  // Dissables pull-to-refres on mobile devices
   overflow: hidden;
 }