Update: bump version and enhance touch interactions for swipe up on s…

…tories

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",

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'>

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();

src/global.scss

@@ -5,6 +5,7 @@ body {
   padding: 0;
   margin: 0;
 
+  // Dissables pull-to-refres on mobile devices
   overflow: hidden;
 }