feat(client): added a dedicated play/pause button to replace the tap-…

…to-pause gesture re #10
will-moss · Oct 26, 2024 · cbcbeeb · cbcbeeb
1 parent f9049f2
commit cbcbeeb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -221,6 +221,18 @@ const App = () => {
     );
   };
 
+  // Video control - Toggle Play / Pause
+  const [isPlaying, setIsPlaying] = useState(true);
+  const togglePlayPause = () => {
+    const currentVideo = document.querySelector(`video[data-index="${currentVideoIndex}"]`);
+    if (!currentVideo) return;
+
+    if (!currentVideo.paused) currentVideo.pause();
+    else currentVideo.play();
+
+    setIsPlaying(!isPlaying);
+  };
+
   // Member - Manage blacklist UI
   const [blacklistOpen, setBlacklistOpen] = useState(false);
   const openBlacklist = () => {
@@ -373,11 +385,12 @@ const App = () => {
     });
   };
 
-  // Hook - When a new video is focused, update its muted state
+  // Hook - When a new video is focused, update its muted state, and assume it is playing internally
   useEffect(() => {
     const currentVideo = document.querySelector(`video[data-index="${currentVideoIndex}"]`);
     if (!currentVideo) return;
     currentVideo.muted = muted;
+    setIsPlaying(true);
   }, [currentVideoIndex]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Memoized component - Video Feed
@@ -532,9 +545,11 @@ const App = () => {
                   onDownload={download}
                   onToggleMute={toggleMute}
                   isMuted={muted}
+                  isPlaying={isPlaying}
                   onBlacklist={blacklist}
                   onOpenBlacklist={openBlacklist}
                   onOpenPlaylistsViewer={openPlaylistsViewer}
+                  onTogglePlayPause={togglePlayPause}
                 />
                 <BlacklistManager
                   visible={blacklistOpen}

diff --git a/src/components/BottomNavbar/index.jsx b/src/components/BottomNavbar/index.jsx
@@ -3,6 +3,8 @@ import {
   faCompactDisc,
   faDownload,
   faEyeSlash,
+  faPause,
+  faPlay,
   faVolumeMute,
   faVolumeUp,
 } from "@fortawesome/free-solid-svg-icons";
@@ -12,8 +14,10 @@ import { useLongPress } from "@uidotdev/usehooks";
 
 const BottomNavbar = ({
   isMuted,
+  isPlaying,
   onToggleMute,
   onDownload,
+  onTogglePlayPause,
   onBlacklist,
   onOpenBlacklist,
   onOpenPlaylistsViewer,
@@ -31,6 +35,10 @@ const BottomNavbar = ({
       >
         <FontAwesomeIcon icon={faEyeSlash} className="icon" />
       </button>
+      <button type="button" className="nav-item" onClick={onTogglePlayPause}>
+        {!isPlaying && <FontAwesomeIcon icon={faPlay} className="icon" />}
+        {isPlaying && <FontAwesomeIcon icon={faPause} className="icon" />}
+      </button>
       <button type="button" className="nav-item" onClick={onDownload}>
         <FontAwesomeIcon icon={faDownload} className="icon" />
       </button>

diff --git a/src/components/VideoCard/index.jsx b/src/components/VideoCard/index.jsx
@@ -8,25 +8,8 @@ const VideoCard = ({ index, url, isLoaded, refForwarder, onDoubleClick }) => {
   const videoRef = useRef(null);
 
   // 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);
   };
 
@@ -42,7 +25,6 @@ const VideoCard = ({ index, url, isLoaded, refForwarder, onDoubleClick }) => {
         data-index={index}
         src={isLoaded ? url : null}
         ref={forward}
-        onClick={handleClick}
         onDoubleClick={handleDoubleClick}
         playsInline={true}
         muted={true}