Fix: resolve browser console errors and desktop functionality.

Casm101 · Dec 27, 2024 · 0d4ac69 · 0d4ac69
1 parent f47d410
commit 0d4ac69
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Stories - React Story Component</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git 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": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
 
 // Style imports
@@ -43,9 +44,6 @@ export const ProgressBar = ({
       interval = setInterval(() => {
         setProgress(oldProgress => {
           const newProgress = oldProgress + (50 / finalDuration) * 100;
-          if (newProgress >= 100) {
-            skipCallback();
-          }
           return newProgress;
         });
       }, 50);
@@ -55,7 +53,11 @@ export const ProgressBar = ({
     if (!isActive) setProgress(0);
 
     return () => clearInterval(interval);
-  }, [isActive, duration, isPaused, progress, skipCallback, finalDuration]);
+  }, [isActive, duration, isPaused, finalDuration]);
+
+  useEffect(() => {
+    if (progress > 100) skipCallback();
+  }, [progress]);
 
   return (
     <div className="progressbar-styled">

diff --git a/src/components/ReactStory/index.tsx b/src/components/ReactStory/index.tsx
@@ -49,6 +49,8 @@ export const ReactStory = ({
   const [imagesPreload, setImagesPreload] = useState<string[]>([]);
   const [videosPreload, setVideosPreload] = useState<string[]>([]);
   const [videoDuration, setVideoDuration] = useState<number>(0);
+  const currentStoryType: TStoryMedia['type'] | TStoryCustom['type'] =
+    stories[currentStory].type;
   const numStories = stories?.length;
 
   // Declaration of local refrences
@@ -92,14 +94,11 @@ export const ReactStory = ({
 
   // Function to toggle pause or video speed (on mouse down event)
   const mouseDownAction = (e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault();
+    e.cancelable && e.preventDefault();
     const speedUpStory = (e.target as HTMLElement).closest('.speed-up-story');
-
-    console.log('speedUpStory: ', speedUpStory);
-
-    startYRef.current = (e as React.TouchEvent).touches[0].clientY;
+    if (e instanceof TouchEvent) startYRef.current = e.touches[0].clientY;
     mousedownId.current = setTimeout(() => {
-      if (speedUpStory) setSpedUp(true);
+      if (speedUpStory && currentStoryType) setSpedUp(true);
       if (!speedUpStory) setPause(true);
       setHudHidden(true);
     }, 200);
@@ -108,7 +107,7 @@ export const ReactStory = ({
   // Function to toggle overlay visibility (on mouse up event)
   const mouseUpAction =
     (action: 'prev' | 'next') => (e: React.MouseEvent | React.TouchEvent) => {
-      e.preventDefault();
+      e.cancelable && e.preventDefault();
       mousedownId.current && clearTimeout(mousedownId.current);
 
       if ((e as React.TouchEvent).changedTouches) {
@@ -329,27 +328,31 @@ export const ReactStory = ({
           onTouchEnd={mouseUpAction('prev')}
           onMouseDown={mouseDownAction}
           onMouseUp={mouseUpAction('prev')}
+          onContextMenu={e => e.preventDefault()}
         />
         <div
           className="next-story"
           onTouchStart={mouseDownAction}
           onTouchEnd={mouseUpAction('next')}
           onMouseDown={mouseDownAction}
           onMouseUp={mouseUpAction('next')}
+          onContextMenu={e => e.preventDefault()}
         />
         <div
           className="speed-up-story left"
           onTouchStart={mouseDownAction}
           onTouchEnd={mouseUpAction('prev')}
           onMouseDown={mouseDownAction}
           onMouseUp={mouseUpAction('prev')}
+          onContextMenu={e => e.preventDefault()}
         />
         <div
           className="speed-up-story right"
           onTouchStart={mouseDownAction}
           onTouchEnd={mouseUpAction('next')}
           onMouseDown={mouseDownAction}
           onMouseUp={mouseUpAction('next')}
+          onContextMenu={e => e.preventDefault()}
         />
       </div>
     </div>