fix: made changes

2025-12-30 10:19:51 -06:00 · 2023-10-30 18:42:58 +05:30
parent f39b15790b
commit c7e2e08026
15 changed files with 118 additions and 202 deletions
--- 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,44 +1,41 @@
 import { useState } from "react";
-// import fs from 'fs';
-// import {k} from '/animated-bgs/4k/1_4k'
-import { useRouter } from "next/navigation";
-export default function AnimatedSurveyBg({ localSurvey, handleBgChange, animationsFiles }) {
-  const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff");
-  const router = useRouter();
+
+export default function AnimatedSurveyBg({ localSurvey, handleBgChange }) {
+  const [color, setColor] = useState(localSurvey.surveyBackground?.bg || "#ffff");
  const [hoveredVideo, setHoveredVideo] = useState<number | null>(null);

-  // const animationsFiles = [
-  //   "http://localhost:3000/storage/clobsi16y0009kezgiea5k71o/public/1_4k.mp4",
-  //   "http://localhost:3000/storage/clobsi16y0009kezgiea5k71o/public/2_4k.mp4",
-  //   // "/animated-bgs/4K/3_4k.mp4",
-  //   // "/animated-bgs/4K/4_4k.mp4",
-  //   // "/animated-bgs/4K/5_4k.mp4",
-  //   // "/animated-bgs/4K/6_4k.mp4",
-  //   // "/animated-bgs/4K/7_4k.mp4",
-  //   // "/animated-bgs/4K/8_4k.mp4",
-  //   // "/animated-bgs/4K/9_4k.mp4",
-  //   // "/animated-bgs/4K/10_4k.mp4",
-  //   // "/animated-bgs/4K/11_4k.mp4",
-  //   // "/animated-bgs/4K/12_4k.mp4",
-  //   // "/animated-bgs/4K/13_4k.mp4",
-  //   // "/animated-bgs/4K/14_4k.mp4",
-  //   // "/animated-bgs/4K/15_4k.mp4",
-  //   // "/animated-bgs/4K/16_4k.mp4",
-  //   // "/animated-bgs/4K/17_4k.mp4",
-  //   // "/animated-bgs/4K/18_4k.mp4",
-  //   // "/animated-bgs/4K/19_4k.mp4",
-  //   // "/animated-bgs/4K/20_4k.mp4",
-  //   // "/animated-bgs/4K/21_4k.mp4",
-  //   // "/animated-bgs/4K/22_4k.mp4",
-  //   // "/animated-bgs/4K/23_4k.mp4",
-  //   // "/animated-bgs/4K/24_4k.mp4",
-  //   // "/animated-bgs/4K/25_4k.mp4",
-  //   // "/animated-bgs/4K/26_4k.mp4",
-  //   // "/animated-bgs/4K/27_4k.mp4",
-  //   // "/animated-bgs/4K/28_4k.mp4",
-  //   // "/animated-bgs/4K/29_4k.mp4",
-  //   // "/animated-bgs/4K/30_4k.mp4",
-  // ];
+  const animationFiles = {
+    "/animated-bgs/Thumbnails/1_Thumb.mp4": "/animated-bgs/4K/1_4k.mp4",
+    "/animated-bgs/Thumbnails/2_Thumb.mp4": "/animated-bgs/4K/2_4k.mp4",
+    "/animated-bgs/Thumbnails/3_Thumb.mp4": "/animated-bgs/4K/3_4k.mp4",
+    "/animated-bgs/Thumbnails/4_Thumb.mp4": "/animated-bgs/4K/4_4k.mp4",
+    "/animated-bgs/Thumbnails/5_Thumb.mp4": "/animated-bgs/4K/5_4k.mp4",
+    "/animated-bgs/Thumbnails/6_Thumb.mp4": "/animated-bgs/4K/6_4k.mp4",
+    "/animated-bgs/Thumbnails/7_Thumb.mp4": "/animated-bgs/4K/7_4k.mp4",
+    "/animated-bgs/Thumbnails/8_Thumb.mp4": "/animated-bgs/4K/8_4k.mp4",
+    "/animated-bgs/Thumbnails/9_Thumb.mp4": "/animated-bgs/4K/9_4k.mp4",
+    "/animated-bgs/Thumbnails/10_Thumb.mp4": "/animated-bgs/4K/10_4k.mp4",
+    "/animated-bgs/Thumbnails/11_Thumb.mp4": "/animated-bgs/4K/11_4k.mp4",
+    "/animated-bgs/Thumbnails/12_Thumb.mp4": "/animated-bgs/4K/12_4k.mp4",
+    "/animated-bgs/Thumbnails/13_Thumb.mp4": "/animated-bgs/4K/13_4k.mp4",
+    "/animated-bgs/Thumbnails/14_Thumb.mp4": "/animated-bgs/4K/14_4k.mp4",
+    "/animated-bgs/Thumbnails/15_Thumb.mp4": "/animated-bgs/4K/15_4k.mp4",
+    "/animated-bgs/Thumbnails/16_Thumb.mp4": "/animated-bgs/4K/16_4k.mp4",
+    "/animated-bgs/Thumbnails/17_Thumb.mp4": "/animated-bgs/4K/17_4k.mp4",
+    "/animated-bgs/Thumbnails/18_Thumb.mp4": "/animated-bgs/4K/18_4k.mp4",
+    "/animated-bgs/Thumbnails/19_Thumb.mp4": "/animated-bgs/4K/19_4k.mp4",
+    "/animated-bgs/Thumbnails/20_Thumb.mp4": "/animated-bgs/4K/20_4k.mp4",
+    "/animated-bgs/Thumbnails/21_Thumb.mp4": "/animated-bgs/4K/21_4k.mp4",
+    "/animated-bgs/Thumbnails/22_Thumb.mp4": "/animated-bgs/4K/22_4k.mp4",
+    "/animated-bgs/Thumbnails/23_Thumb.mp4": "/animated-bgs/4K/23_4k.mp4",
+    "/animated-bgs/Thumbnails/24_Thumb.mp4": "/animated-bgs/4K/24_4k.mp4",
+    "/animated-bgs/Thumbnails/25_Thumb.mp4": "/animated-bgs/4K/25_4k.mp4",
+    "/animated-bgs/Thumbnails/26_Thumb.mp4": "/animated-bgs/4K/26_4k.mp4",
+    "/animated-bgs/Thumbnails/27_Thumb.mp4": "/animated-bgs/4K/27_4k.mp4",
+    "/animated-bgs/Thumbnails/28_Thumb.mp4": "/animated-bgs/4K/28_4k.mp4",
+    "/animated-bgs/Thumbnails/29_Thumb.mp4": "/animated-bgs/4K/29_4k.mp4",
+    "/animated-bgs/Thumbnails/30_Thumb.mp4": "/animated-bgs/4K/30_4k.mp4",
+  };

  const handleMouseEnter = (index: number) => {
    setHoveredVideo(index);
@@ -73,20 +70,26 @@ export default function AnimatedSurveyBg({ localSurvey, handleBgChange, animatio
  return (
    <div>
      <div className="mt-4 grid grid-cols-6 gap-4">
-        {animationsFiles.map((x, index) => {
+        {Object.keys(animationFiles).map((key, index) => {
+          const value = animationFiles[key];
          return (
            <div
              key={index}
              onMouseEnter={() => handleMouseEnter(index)}
              onMouseLeave={() => handleMouseLeave(index)}
-              onClick={() => handleBg(x)}
-              className="cursor-pointer">
+              onClick={() => handleBg(value)}
+              className="relative cursor-pointer hover:scale-110">
              <video
                id={`video-${index}`}
                autoPlay={hoveredVideo === index}
-                className="h-46 w-96  rounded-lg">
-                <source src={`${x}`} type="video/mp4" />
+                className="h-46 w-96  rounded-lg ">
+                <source src={`${key}`} type="video/mp4" />
              </video>
+              <input
+                className="absolute right-2 top-2 h-4 w-4 rounded-sm bg-white "
+                type="checkbox"
+                checked={color === value}
+              />
            </div>
          );
        })}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
 import { Label } from "@formbricks/ui/Label";

-export default function BgColour({ localSurvey, handleBgChange }) {
+export default function ColorSurveyBg({ localSurvey, handleBgChange }) {
  const colours = [
    "#FFF2D8",
    "#EAD7BB",
@@ -30,7 +30,7 @@ export default function BgColour({ localSurvey, handleBgChange }) {
    "#CDFAD5",
  ];

-  const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff");
+  const [color, setColor] = useState(localSurvey.surveyBackground?.bg || "#ffff");

  const handleBg = (x: string) => {
    setColor(x);
@@ -48,7 +48,7 @@ export default function BgColour({ localSurvey, handleBgChange }) {
        {colours.map((x) => {
          return (
            <div
-              className={`h-16 w-16 cursor-pointer ${color === x ? "border-2 border-slate-500" : ""}`}
+              className={`h-16 w-16 cursor-pointer ${color === x ? "border-4 border-slate-500" : ""}`}
              key={x}
              style={{ backgroundColor: `${x}` }}
              onClick={() => handleBg(x)}></div>
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
@@ -1,42 +1,6 @@
-import { useState } from "react";
-import { ColorPicker } from "@formbricks/ui/ColorPicker";
-import { Label } from "@formbricks/ui/Label";
 import FileInput from "@formbricks/ui/FileInput";

 export default function ImageSurveyBg({ localSurvey, handleBgChange }) {
-  const colours = [
-    "#FFF2D8",
-    "#EAD7BB",
-    "#BCA37F",
-    "#113946",
-    "#04364A",
-    "#176B87",
-    "#64CCC5",
-    "#DAFFFB",
-    "#132043",
-    "#1F4172",
-    "#F1B4BB",
-    "#FDF0F0",
-    "#001524",
-    "#445D48",
-    "#D6CC99",
-    "#FDE5D4",
-    "#BEADFA",
-    "#D0BFFF",
-    "#DFCCFB",
-    "#FFF8C9",
-    "#FF8080",
-    "#FFCF96",
-    "#F6FDC3",
-    "#CDFAD5",
-  ];
-
-  const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff");
-
-  // const handleBg = (x: string) => {
-  //   setColor(x);
-  //   handleBgChange(x,"image");
-  // };
  return (
    <div className="mb-2 mt-4 w-full rounded-lg border bg-slate-50 p-4">
      <div className="mt-3 flex w-full items-center justify-center">
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx
@@ -15,7 +15,6 @@ interface SettingsViewProps {
  setLocalSurvey: (survey: TSurvey) => void;
  actionClasses: TActionClass[];
  attributeClasses: TAttributeClass[];
-  animationsFiles: string[];
  responseCount: number;
 }

@@ -24,7 +23,6 @@ export default function SettingsView({
  localSurvey,
  setLocalSurvey,
  actionClasses,
-  animationsFiles,
  attributeClasses,
  responseCount,
 }: SettingsViewProps) {
@@ -58,11 +56,7 @@ export default function SettingsView({
        environmentId={environment.id}
      />

-      <StylingCard
-        animationsFiles={animationsFiles}
-        localSurvey={localSurvey}
-        setLocalSurvey={setLocalSurvey}
-      />
+      <StylingCard localSurvey={localSurvey} setLocalSurvey={setLocalSurvey} />
    </div>
  );
 }
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
@@ -9,24 +9,23 @@ import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import Placement from "./Placement";
-import BgColour from "./BgColour";
+import ColorSurveyBg from "./ColorSurveyBg";
 import ImageSurveyBg from "./ImageSurveyBg";
 import AnimatedSurveyBg from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg";
-import { useRouter } from "next/navigation";
+
 interface StylingCardProps {
  localSurvey: TSurvey;
  setLocalSurvey: React.Dispatch<React.SetStateAction<TSurvey>>;
-  animationsFiles: string[];
 }

-export default function StylingCard({ localSurvey, setLocalSurvey, animationsFiles }: StylingCardProps) {
+export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCardProps) {
  const [open, setOpen] = useState(false);
-  const [tab, setTab] = useState("image");
-  const router = useRouter();
+
  const { type, productOverwrites, surveyBackground } = localSurvey;
-  // console.log(productOverwrites)
  const { brandColor, clickOutside, darkOverlay, placement, highlightBorderColor } = productOverwrites ?? {};
-  const { bgColor } = surveyBackground ?? {};
+  const { bg, bgType } = surveyBackground ?? {};
+
+  const [tab, setTab] = useState(bgType || "image");

  const togglePlacement = () => {
    setLocalSurvey({
@@ -53,10 +52,10 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil
      ...localSurvey,
      surveyBackground: {
        ...localSurvey.surveyBackground,
-        bgColor: !!bgColor ? undefined : "#ffff",
+        bg: !!bg ? undefined : "#ffff",
+        bgType: !!bg ? undefined : "color",
      },
    });
-    console.log("++++", localSurvey);
  };

  const toggleHighlightBorderColor = () => {
@@ -84,12 +83,10 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil
      ...localSurvey,
      surveyBackground: {
        ...localSurvey.surveyBackground,
-        bgColor: color,
+        bg: color,
        bgType: type,
      },
    });
-
-    console.log("++++++", localSurvey);
  };

  const handleBorderColorChange = (color: string) => {
@@ -176,7 +173,7 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil
          {/* Background */}
          <div className="p-3">
            <div className="ml-2 flex items-center space-x-1">
-              <Switch id="autoComplete" checked={!!bgColor} onCheckedChange={toggleBackgroundColor} />
+              <Switch id="autoComplete" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
              <Label htmlFor="autoComplete" className="cursor-pointer">
                <div className="ml-2">
                  <h3 className="text-sm font-semibold text-slate-700">Change Background</h3>
@@ -186,23 +183,31 @@ export default function StylingCard({ localSurvey, setLocalSurvey, animationsFil
                </div>
              </Label>
            </div>
-            {bgColor && (
-              <div className=" mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4 px-8">
-                <div className=" flex w-full items-center justify-between border bg-slate-50 px-6">
-                  <button onClick={() => setTab("image")}>Image</button>
-                  <button onClick={() => setTab("animated")}>Animated</button>
-                  <button onClick={() => setTab("color")}>Color</button>
+            {bg && (
+              <div className="mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4 px-8">
+                <div className="flex w-full items-center justify-between border bg-slate-50 px-6">
+                  <button
+                    className={tab === "image" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
+                    onClick={() => setTab("image")}>
+                    Image
+                  </button>
+                  <button
+                    className={tab === "animation" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
+                    onClick={() => setTab("animation")}>
+                    Animation
+                  </button>
+                  <button
+                    className={tab === "color" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
+                    onClick={() => setTab("color")}>
+                    Color
+                  </button>
                </div>
                {tab == "image" ? (
                  <ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
-                ) : tab == "animated" ? (
-                  <AnimatedSurveyBg
-                    localSurvey={localSurvey}
-                    animationsFiles={animationsFiles}
-                    handleBgChange={handleBgChange}
-                  />
+                ) : tab == "animation" ? (
+                  <AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
                ) : (
-                  <BgColour localSurvey={localSurvey} handleBgChange={handleBgChange} />
+                  <ColorSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
                )}
              </div>
            )}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx
@@ -21,14 +21,12 @@ interface SurveyEditorProps {
  actionClasses: TActionClass[];
  attributeClasses: TAttributeClass[];
  responseCount: number;
-  animationsFiles: string[];
 }

 export default function SurveyEditor({
  survey,
  product,
  environment,
-  animationsFiles,
  actionClasses,
  attributeClasses,
  responseCount,
@@ -61,7 +59,6 @@ export default function SurveyEditor({
    return <ErrorComponent />;
  }

-  // console.log(localSurvey)
  return (
    <>
      <div className="flex h-full flex-col">
@@ -91,7 +88,6 @@ export default function SurveyEditor({
              />
            ) : (
              <SettingsView
-                animationsFiles={animationsFiles}
                environment={environment}
                localSurvey={localSurvey}
                setLocalSurvey={setLocalSurvey}
@@ -103,7 +99,6 @@ export default function SurveyEditor({
          </main>
          <aside className="group hidden flex-1 flex-shrink-0 items-center justify-center overflow-hidden border-l border-slate-100 bg-slate-50 py-6  md:flex md:flex-col">
            <PreviewSurvey
-              animationsFiles={animationsFiles}
              survey={localSurvey}
              setActiveQuestionId={setActiveQuestionId}
              activeQuestionId={activeQuestionId}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyMenuBar.tsx
@@ -229,7 +229,6 @@ export default function SurveyMenuBar({
      return;
    }

-    console.log("++++s", strippedSurvey);
    try {
      await updateSurveyAction({ ...strippedSurvey });
      router.refresh();
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx
@@ -23,42 +23,9 @@ export default async function SurveysEditPage({ params }) {
    return <ErrorComponent />;
  }

-  const animationsFiles = [
-    "http://localhost:3000/storage/clobsi16y0009kezgiea5k71o/public/1_4k.mp4",
-    "http://localhost:3000/storage/clobsi16y0009kezgiea5k71o/public/2_4k.mp4",
-    "/animated-bgs/4K/3_4k.mp4",
-    "/animated-bgs/4K/4_4k.mp4",
-    "/animated-bgs/4K/5_4k.mp4",
-    "/animated-bgs/4K/6_4k.mp4",
-    "/animated-bgs/4K/7_4k.mp4",
-    "/animated-bgs/4K/8_4k.mp4",
-    "/animated-bgs/4K/9_4k.mp4",
-    "/animated-bgs/4K/10_4k.mp4",
-    "/animated-bgs/4K/11_4k.mp4",
-    "/animated-bgs/4K/12_4k.mp4",
-    "/animated-bgs/4K/13_4k.mp4",
-    "/animated-bgs/4K/14_4k.mp4",
-    "/animated-bgs/4K/15_4k.mp4",
-    "/animated-bgs/4K/16_4k.mp4",
-    "/animated-bgs/4K/17_4k.mp4",
-    "/animated-bgs/4K/18_4k.mp4",
-    "/animated-bgs/4K/19_4k.mp4",
-    "/animated-bgs/4K/20_4k.mp4",
-    "/animated-bgs/4K/21_4k.mp4",
-    "/animated-bgs/4K/22_4k.mp4",
-    "/animated-bgs/4K/23_4k.mp4",
-    "/animated-bgs/4K/24_4k.mp4",
-    "/animated-bgs/4K/25_4k.mp4",
-    "/animated-bgs/4K/26_4k.mp4",
-    "/animated-bgs/4K/27_4k.mp4",
-    "/animated-bgs/4K/28_4k.mp4",
-    "/animated-bgs/4K/29_4k.mp4",
-    "/animated-bgs/4K/30_4k.mp4",
-  ];
  return (
    <>
      <SurveyEditor
-        animationsFiles={animationsFiles}
        survey={survey}
        product={product}
        environment={environment}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
@@ -17,9 +17,8 @@ import {
 } from "@heroicons/react/24/solid";
 import { Variants, motion } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import SurveyBg from "@/app/s/[surveyId]/components/SurveyBg";
 import { useRouter } from "next/navigation";
-import PreviewSurveyBg from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg";
+import PreviewSurveyBgMobile from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile";
 import PreviewSurveyBgDeskstop from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop";

 type TPreviewType = "modal" | "fullwidth" | "email";
@@ -30,7 +29,6 @@ interface PreviewSurveyProps {
  activeQuestionId?: string | null;
  previewType?: TPreviewType;
  product: TProduct;
-  animationsFiles: string[];
  environment: TEnvironment;
 }

@@ -68,7 +66,6 @@ export default function PreviewSurvey({
  survey,
  previewType,
  product,
-  animationsFiles,
  environment,
 }: PreviewSurveyProps) {
  const [isModalOpen, setIsModalOpen] = useState(true);
@@ -81,10 +78,6 @@ export default function PreviewSurvey({

  const { productOverwrites } = survey || {};

-  const bgColour = survey.surveyBackground?.bgColor;
-
-  const [bgVideoUrl, setBgVideoUrl] = useState(bgColour);
-  const router = useRouter();
  const previewScreenVariants: Variants = {
    expanded: {
      right: "5%",
@@ -130,17 +123,6 @@ export default function PreviewSurvey({
  const placement = surveyPlacement || product.placement;
  const highlightBorderColor = surveyHighlightBorderColor || product.highlightBorderColor;

-  function getSourceVid(sourceVidName) {
-    return sourceVidName;
-  }
-
-  const sourceVid = getSourceVid(bgColour);
-  useEffect(() => {
-    setBgVideoUrl(bgColour);
-  }, [bgColour]);
-
-  console.log(sourceVid);
-
  useEffect(() => {
    // close modal if there are no questions left
    if (survey.type === "web" && !survey.thankYouCard.enabled) {
@@ -173,6 +155,20 @@ export default function PreviewSurvey({
    setActiveQuestionId(survey.welcomeCard.enabled ? "start" : survey?.questions[0]?.id);
  }

+  function animationTrigger() {
+    let storePreviewMode = previewMode;
+    setPreviewMode("null");
+    setTimeout(() => {
+      setPreviewMode(storePreviewMode);
+    }, 10);
+  }
+
+  useEffect(() => {
+    if (survey.surveyBackground?.bgType === "animation") {
+      animationTrigger();
+    }
+  }, [survey.surveyBackground?.bg]);
+
  useEffect(() => {
    if (environment && environment.widgetSetupCompleted) {
      setWidgetSetupCompleted(true);
@@ -212,9 +208,9 @@ export default function PreviewSurvey({
            <div className="absolute right-0 top-0 m-2">
              <ResetProgressButton resetQuestionProgress={resetQuestionProgress} />
            </div>
-            <PreviewSurveyBg survey={survey} ContentRef={ContentRef}>
+            <PreviewSurveyBgMobile survey={survey} ContentRef={ContentRef}>
              {/* below element is use to create notch for the mobile device mockup   */}
-              <div className="absolute left-1/2 right-1/2 top-0 z-20 h-4 w-1/2 -translate-x-1/2 transform rounded-b-md "></div>
+              <div className="absolute left-1/2 right-1/2 top-0 z-20 h-4 w-1/2 -translate-x-1/2 transform rounded-b-md bg-slate-500"></div>
              {previewType === "modal" ? (
                <Modal
                  isOpen={isModalOpen}
@@ -241,7 +237,7 @@ export default function PreviewSurvey({
                  />
                </div>
              )}
-            </PreviewSurveyBg>
+            </PreviewSurveyBgMobile>
          </>
        )}
        {previewMode === "desktop" && (
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
@@ -3,7 +3,7 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
    <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
      <div
        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundColor: survey.surveyBackground.bgColor || "#ffff" }}>
+        style={{ backgroundColor: survey.surveyBackground.bg || "#ffff" }}>
        {children}
      </div>
    </div>
@@ -12,11 +12,11 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
      <div
        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
        style={{
-          background: `url(${survey.surveyBackground.bgColor}) no-repeat center center fixed`,
+          background: `url(${survey.surveyBackground.bg}) no-repeat center center fixed`,
          // backgroundSize: 'cover',
        }}>
        <video muted loop autoPlay className="absolute inset-0 h-full w-full object-cover">
-          <source src={survey.surveyBackground.bgColor} type="video/mp4" />
+          <source src={survey.surveyBackground.bg} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        {children}
@@ -26,7 +26,7 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
    <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
      <div
        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{ backgroundImage: `url(${survey.surveyBackground.bgColor})` }}>
+        style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
        {children}
      </div>
    </div>
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgMobile.tsx
@@ -1,8 +1,10 @@
-export default function PreviewSurveyBg({ children, survey, ContentRef }) {
+export default function PreviewSurveyBgMobile({ children, survey, ContentRef }) {
+  console.log(survey.surveyBackground);
+
  return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
    <div
      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundColor: survey.surveyBackground.bgColor }}>
+      style={{ backgroundColor: survey.surveyBackground.bg }}>
      <div
        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
        ref={ContentRef}>
@@ -23,7 +25,7 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) {
              autoPlay
              className="h-full w-full object-cover"
              style={{ width: "100%", height: "100%" }}>
-              <source src={survey.surveyBackground.bgColor} type="video/mp4" />
+              <source src={survey.surveyBackground.bg} type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          </div>
@@ -34,7 +36,7 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) {
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
    <div
      className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
-      style={{ backgroundImage: `url(${survey.surveyBackground.bgColor})` }}>
+      style={{ backgroundImage: `url(${survey.surveyBackground.bg})` }}>
      <div
        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
        ref={ContentRef}>
--- a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
+++ b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
@@ -1,15 +1,14 @@
 export default async function SurveyBg({ children, survey }) {
-  const bgColour = survey.surveyBackground?.bgColor || "#ffff";
-
-  console.log("----", survey.surveyBackground);
  return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
-    <div className={`flex h-full items-center justify-center `} style={{ backgroundColor: `${bgColour}` }}>
+    <div
+      className={`flex h-full items-center justify-center `}
+      style={{ backgroundColor: `${survey.surveyBackground?.bg}` }}>
      <div className="h-[60%]">{children}</div>
    </div>
  ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
    <div className={`flex h-full items-center justify-center `}>
      <video muted loop autoPlay className="fixed left-0 top-0 -z-50 h-full w-full object-cover">
-        <source src="/animated-bgs/4K/1_4k.mp4" type="video/mp4" />
+        <source src={survey.surveyBackground?.bg} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <div className="h-[60%]">{children}</div>
@@ -18,13 +17,9 @@ export default async function SurveyBg({ children, survey }) {
    <div
      className={`flex h-full items-center justify-center `}
      style={{
-        backgroundImage: `url(${bgColour})`,
+        backgroundImage: `url(${survey.surveyBackground?.bg})`,
        backgroundSize: "inherit",
      }}>
-      <video muted loop autoPlay className="fixed left-0 top-0 -z-50 h-full w-full object-cover">
-        <source src="/animated-bgs/4K/1_4k.mp4" type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
      <div className="h-[60%]">{children}</div>
    </div>
  ) : (
--- a/packages/types/common.ts
+++ b/packages/types/common.ts
@@ -8,10 +8,6 @@ export const ZOptionalNumber = z.number().optional();

 export const ZColor = z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);

-export const ZBgColor =
-  z.string().regex(/storage\/[a-zA-Z0-9]+\/public\/[a-zA-Z0-9%20-]+\.png \d+ [A-Za-z.]+:\d+:\d+/) ||
-  z.string().regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);
-
 export const ZPlacement = z.enum(["bottomLeft", "bottomRight", "topLeft", "topRight", "center"]);
 export type TPlacement = z.infer<typeof ZPlacement>;

--- a/packages/types/surveys.ts
+++ b/packages/types/surveys.ts
@@ -42,7 +42,7 @@ export const ZSurveyProductOverwrites = z.object({
 });

 export const ZSurveyBackground = z.object({
-  bgColor: z.string().nullish(),
+  bg: z.string().nullish(),
  bgType: z.string().nullish(),
  // darkOverlay: z.boolean().nullish(),
 });
--- a/packages/ui/Badge/index.tsx
+++ b/packages/ui/Badge/index.tsx
@@ -19,7 +19,7 @@ export const Badge: React.FC<BadgeProps> = ({
  startIconClassName,
  className,
 }) => {
-  const bgColor = {
+  const bg = {
    warning: "bg-amber-100",
    success: "bg-green-100",
    error: "bg-red-100",
@@ -45,7 +45,7 @@ export const Badge: React.FC<BadgeProps> = ({
    <span
      className={cn(
        "inline-flex cursor-default items-center rounded-full font-medium",
-        bgColor[type],
+        bg[type],
        textColor[type],
        padding[size],
        textSize,