handle channel subscribe, handled mute, auto play,like dislike functionalities more efficiently,

Author: alwinantony29

src/App.js

@@ -19,15 +19,17 @@ const carouselSettings = {
 const videos = Object.values(data);
 
 function App() {
-  const sliderRef = useRef(null);
   const [currentShortsIndex, setCurrentShortsIndex] = useState(0);
+  const [isAudible, setIsAudible] = useState(false);
+  const sliderRef = useRef(null);
+
 
   const handleCarouselChange = (newIndex) => {
     setCurrentShortsIndex(newIndex);
   };
 
   return (
-    <div className="flex overflow-hidden h-[100svh] w-screen items-center justify-center bg-slate-500">
+    <div className="flex overflow-hidden h-[100svh] w-screen items-center justify-center bg-black">
       <Carousel
         {...carouselSettings}
         ref={sliderRef}
@@ -40,6 +42,8 @@ function App() {
               <Shorts
                 {...video}
                 i={i}
+                isAudible={isAudible}
+                setIsAudible={setIsAudible}
                 currentShortsIndex={currentShortsIndex}
               />
             </div>

src/components/shorts/index.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { MdOutlineArrowRight } from "react-icons/md";
 import {
   IoIosShareAlt,
   IoMdPlay as PlayIcon,
@@ -16,18 +15,29 @@ import { BsThreeDotsVertical } from "react-icons/bs";
 import { Slider } from "../ui/slider";
 import { debounce } from "../../lib/utils";
 
-const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
+const Shorts = ({
+  channel,
+  src,
+  i,
+  currentShortsIndex,
+  description,
+  isAudible,
+  setIsAudible,
+}) => {
   const [isPlaying, setIsPlaying] = useState(false);
-  const [isAudible, setIsAudible] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [isLiked, setIsLiked] = useState(false);
   const [isDisliked, setIsDisliked] = useState(false);
+  const [isSubscribed, setIsSubscribed] = useState(false);
 
   const videoRef = useRef(null);
 
   const handlePlayPause = (action) => {
     try {
-      if (videoRef.current.paused || action === "play") {
+      if (
+        (action !== "pause" && videoRef.current.paused) ||
+        action === "play"
+      ) {
         videoRef.current.play();
         setIsPlaying(true);
       } else {
@@ -40,6 +50,20 @@ const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
   };
   const debouncedHandlePlayPause = debounce(handlePlayPause, 300);
 
+  useEffect(() => {
+    try {
+      if (!videoRef.current) return;
+      if (currentShortsIndex === i) {
+        debouncedHandlePlayPause("play");
+      } else {
+        debouncedHandlePlayPause("pause");
+        videoRef.current.currentTime = 0;
+      }
+    } catch (e) {
+      console.log("video error");
+    } // eslint-disable-next-line
+  }, [currentShortsIndex, i]);
+
   const handleTimeUpdate = () => {
     setCurrentTime(videoRef.current.currentTime);
   };
@@ -56,20 +80,6 @@ const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
     [currentShortsIndex, i, handlePlayPause]
   );
 
-  useEffect(() => {
-    try {
-      if (!videoRef.current) return;
-      if (currentShortsIndex === i) {
-        debouncedHandlePlayPause("play");
-      } else {
-        debouncedHandlePlayPause("pause");
-        videoRef.current.currentTime = 0;
-      }
-    } catch (e) {
-      console.log("video error");
-    } // eslint-disable-next-line
-  }, [currentShortsIndex, i]);
-
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -81,6 +91,15 @@ const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
     };
   }, [handleKeyDown]);
 
+  const handleLike = () => {
+    if (isDisliked) setIsDisliked(false);
+    setIsLiked((prev) => !prev);
+  };
+  const handleDislike = () => {
+    if (isLiked) setIsLiked(false);
+    setIsDisliked((prev) => !prev);
+  };
+
   return (
     <div className="w-screen xs:w-full md:w-[80%] text-white h-[100svh] xs:h-full xs:rounded-md flex flex-col relative p-2  ">
       <video
@@ -93,11 +112,13 @@ const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
       />
 
       <div className="flex justify-between z-10 ">
-        {isPlaying ? (
-          <PauseIcon className="h-6 w-6" />
-        ) : (
-          <PlayIcon className="h-6 w-6" />
-        )}
+        <button onClick={handlePlayPause}>
+          {isPlaying ? (
+            <PauseIcon className="h-6 w-6" />
+          ) : (
+            <PlayIcon className="h-6 w-6" />
+          )}
+        </button>
         <button onClick={() => setIsAudible((prev) => !prev)}>
           {isAudible ? (
             <IoMdVolumeHigh className="h-6 w-6" />
@@ -117,18 +138,17 @@ const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
             }
           />
           <p>{channel.name || "@EpicPopcornReviews"}</p>
-          <button className="rounded-2xl px-2 py-0.5 bg-white">
-            <span className="opacity-80 text-black">Subscribe</span>
+          <button
+            onClick={() => setIsSubscribed((prev) => !prev)}
+            className="rounded-2xl px-2 py-0.5 bg-white"
+          >
+            <span className="opacity-80 text-black">
+              {isSubscribed ? "Subscribed" : "Subscribe"}
+            </span>
           </button>
         </div>
-        <div className="flex items-center gap-2 w-full font-semibold">
-          <MdOutlineArrowRight />
-          <p>{"MCU 4/32 - He is SUCCESSFUL in"}</p>
-        </div>
-        <div className="flex w-full font-semibold h-10 text-wrap max-w-[80%] ">
-          <p className="whitespace-normal truncate">
-            {description || ""}
-          </p>
+        <div className="flex w-[80%] xs:w-full font-semibold h-28 xs:h-10 text-wrap max-w-[80%] ">
+          <p className="whitespace-normal truncate">{description || ""}</p>
         </div>
       </div>
       <div className="absolute left-0 bottom-0 px-[1%] w-full z-20">
@@ -158,14 +178,14 @@ const Shorts = ({ channel, src, i, currentShortsIndex, description }) => {
         <button>
           <BiSolidCommentDetail className="md:bg-gray-100 md:bg-opacity-30 rounded-full p-1.5 h-11 w-11 " />
         </button>
-        <button onClick={() => setIsDisliked((prev) => !prev)}>
+        <button onClick={handleDislike}>
           <BiSolidDislike
             className={`md:bg-gray-100 md:bg-opacity-30 rounded-full h-11 w-11 p-1.5 ${
               isDisliked ? "text-blue-400" : ""
             }`}
           />
         </button>
-        <button onClick={() => setIsLiked((prev) => !prev)}>
+        <button onClick={handleLike}>
           <BiSolidLike
             className={`${
               isLiked ? "text-blue-400" : ""

src/data.json

@@ -5,7 +5,7 @@
             "name": "Channel1",
             "image": "https://cdn.pixabay.com/photo/2012/06/19/10/32/owl-50267_640.jpg"
         },
-        "description": "Experience the grace and elegance of birds soaring through the sky, capturing the beauty of flight in stunning detai"
+        "description": "Experience the grace and elegance of birds soaring through the sky, capturing the beauty of flight in stunning detail."
     },
     "2": {
         "src": "https://res.cloudinary.com/ddh0reqyx/video/upload/v1708847395/sample5_eyv44r.mp4",
@@ -31,12 +31,12 @@
         },
         "description": "Immerse yourself in the soothing sounds of crashing waves and gentle sea breeze for ultimate relaxation."
     },
-    "5":{
-        "src": "https://res.cloudinary.com/ddh0reqyx/video/upload/v1708848265/sample7_kpsxer.mp4",
+    "5": {
+        "src": "https://res.cloudinary.com/ddh0reqyx/video/upload/v1708851377/reedumqlhj0w4vixkw5m.mp4",
         "channel": {
-            "name": "Channel4",
-            "image": "https://cdn.pixabay.com/photo/2016/11/08/05/20/sunset-1807524_640.jpg"
+            "name": "Channel5",
+            "image": "https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_640.jpg"
         },
-        "description": "Immerse yourself in the soothing sounds of crashing waves and gentle sea breeze for ultimate relaxation."
+        "description": "Only this video has audio, try turning on audio"
     }
 }

tsconfig.json

@@ -1,9 +1,10 @@
 {
-    "compilerOptions": {
-      "baseUrl": ".",
-      "paths": {
-        "@/*": ["./*"]
-      }
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
     }
   }
-  
+}