feat(client): added double-tap seek feature for mobile users

re #6
will-moss · Sep 13, 2024 · 7e70d6f · 7e70d6f
1 parent 198495e
commit 7e70d6f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/components/VideoCard/index.jsx b/src/components/VideoCard/index.jsx
@@ -4,13 +4,30 @@ import { useCallback, useRef } from "react";
 // Assets
 import "./index.css";
 
-const VideoCard = ({ index, url, isLoaded, refForwarder }) => {
+const VideoCard = ({ index, url, isLoaded, refForwarder, onDoubleClick }) => {
   const videoRef = useRef(null);
 
-  // Toggle play/pause on click
-  const togglePause = () => {
-    if (videoRef.current.paused) videoRef.current.play();
-    else videoRef.current.pause();
+  // Handle click
+  // - Play / Pause on single click
+  // - Seek forward / backward on double click
+  const _doubleClickDelay = 200;
+  let _preventSingleClickAction = false;
+  let _timer = null;
+
+  const handleClick = (e) => {
+    _timer = setTimeout(function () {
+      if (!_preventSingleClickAction) {
+        if (videoRef.current.paused) videoRef.current.play();
+        else videoRef.current.pause();
+      }
+      _preventSingleClickAction = false;
+    }, _doubleClickDelay);
+  };
+
+  const handleDoubleClick = (e) => {
+    clearTimeout(_timer);
+    _preventSingleClickAction = true;
+    onDoubleClick(e);
   };
 
   const forward = useCallback((_ref) => {
@@ -25,7 +42,8 @@ const VideoCard = ({ index, url, isLoaded, refForwarder }) => {
         data-index={index}
         src={isLoaded ? url : null}
         ref={forward}
-        onClick={togglePause}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
         playsInline={true}
         muted={true}
         preload="auto"

diff --git a/src/components/VideoFeed/index.jsx b/src/components/VideoFeed/index.jsx
@@ -182,6 +182,12 @@ const VideoFeed = ({
   const seekVideoBackward = () => {
     currentVideoElement.current.currentTime -= 5;
   };
+  const handleVideoTapToSeek = (e) => {
+    const halfWidth = e.target.offsetWidth / 2;
+
+    if (e.clientX > halfWidth) seekVideoForward();
+    else seekVideoBackward();
+  };
   useEffect(() => {
     document.addEventListener("keydown", handleKeyboardSeeking);
     return () => document.removeEventListener("keydown", handleKeyboardSeeking);
@@ -197,6 +203,7 @@ const VideoFeed = ({
           key={k}
           index={k + initialIndex}
           url={videos[k + initialIndex] ? videos[k + initialIndex].url : ""}
+          onDoubleClick={handleVideoTapToSeek}
           isLoaded={true}
           refForwarder={saveVideoRef(k)}
         />