From e8e701c5670f7aa397ab30dddc15925776ea3231 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Wed, 17 Apr 2024 16:11:33 +0530
Subject: [PATCH] fix: The play() request was interrupted by a call to pause()
 (#2465)

---
 .../edit/components/AnimatedSurveyBg.tsx      | 34 +++++--------------
 packages/ui/TabBar/index.tsx                  |  3 +-
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
index 0466652784..7bc8db333a 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
@@ -1,3 +1,4 @@
+import { debounce } from "lodash";
 import { useState } from "react";
 
 interface AnimatedSurveyBgProps {
@@ -7,7 +8,6 @@ interface AnimatedSurveyBgProps {
 
 export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyBgProps) => {
   const [animation, setAnimation] = useState(background);
-  const [hoveredVideo, setHoveredVideo] = useState<number | null>(null);
 
   const animationFiles = {
     "/animated-bgs/Thumbnails/1_Thumb.mp4": "/animated-bgs/4K/1_4k.mp4",
@@ -42,31 +42,16 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
     "/animated-bgs/Thumbnails/30_Thumb.mp4": "/animated-bgs/4K/30_4k.mp4",
   };
 
-  const handleMouseEnter = (index: number) => {
-    setHoveredVideo(index);
-    playVideo(index);
-  };
-
-  const handleMouseLeave = (index: number) => {
-    setHoveredVideo(null);
-    pauseVideo(index);
-  };
-
-  // Function to play the video
-  const playVideo = (index: number) => {
+  const togglePlayback = (index: number, type: "play" | "pause") => {
     const video = document.getElementById(`video-${index}`) as HTMLVideoElement;
-    if (video) {
-      video.play();
+    try {
+      type === "play" ? video.play() : video.pause();
+    } catch (error) {
+      console.error(error);
     }
   };
 
-  // Function to pause the video
-  const pauseVideo = (index: number) => {
-    const video = document.getElementById(`video-${index}`) as HTMLVideoElement;
-    if (video) {
-      video.pause();
-    }
-  };
+  const debouncedManagePlayback = debounce(togglePlayback, 150);
 
   const handleBg = (x: string) => {
     setAnimation(x);
@@ -81,14 +66,13 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
           return (
             <div
               key={index}
-              onMouseEnter={() => handleMouseEnter(index)}
-              onMouseLeave={() => handleMouseLeave(index)}
+              onMouseEnter={() => debouncedManagePlayback(index, "play")}
+              onMouseLeave={() => debouncedManagePlayback(index, "pause")}
               onClick={() => handleBg(value)}
               className="relative cursor-pointer overflow-hidden rounded-lg">
               <video
                 disablePictureInPicture
                 id={`video-${index}`}
-                autoPlay={hoveredVideo === index}
                 className="h-46 w-96 origin-center scale-105 transform">
                 <source src={`${key}`} type="video/mp4" />
               </video>
diff --git a/packages/ui/TabBar/index.tsx b/packages/ui/TabBar/index.tsx
index 772398ab77..b0cfddd272 100644
--- a/packages/ui/TabBar/index.tsx
+++ b/packages/ui/TabBar/index.tsx
@@ -44,9 +44,8 @@ export const TabBar: React.FC<TabBarProps> = ({
       return (
         <nav className="flex h-full w-full flex-1 items-center space-x-4" aria-label="Tabs">
           {tabs.map((tab) => (
-            <div className="flex h-full flex-1 justify-center px-3 py-2">
+            <div className="flex h-full flex-1 justify-center px-3 py-2" key={tab.id}>
               <button
-                key={tab.id}
                 onClick={() => setActiveId(tab.id)}
                 className={cn(
                   tab.id === activeId