fix: added animation

2026-02-04 10:30:00 -06:00 · 2023-10-29 20:24:27 +05:30
parent 2e2ad05367
commit f8518fcd80
10 changed files with 199 additions and 69 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,30 +1,85 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 // import fs from 'fs';
 // import {k} from '/animated-bgs/4k/1_4k'
-
-export default function AnimatedSurveyBg({ localSurvey, handleBgColorChange }) {
+import { useRouter } from "next/navigation";
+export default function AnimatedSurveyBg({ localSurvey, handleBgChange }) {
  const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff");
-  const animationsFiles = ["/animated-bgs/1_4k", "/animated-bgs/2_4k"];
+
+  const [hoveredVideo, setHoveredVideo] = useState<number | null>(null);
+
+  const animationsFiles = [
+    "/animated-bgs/4K/1_4k.mp4",
+    "/animated-bgs/4K/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 animations = fs.readdirSync(animationsFiles);
+  // const videoRefs = animationsFiles.map(() => useRef<HTMLVideoElement>(null));
+
+  // const handleMouseEnter = (index: number) => {
+  //   setHoveredVideo(index);
+  //   const videoRef = videoRefs[index]?.current;
+  //   if (videoRef) {
+  //     videoRef.play();
+  //   }
+  // };
+
+  // const handleMouseLeave = (index: number) => {
+  //   setHoveredVideo(null);
+  //   const videoRef = videoRefs[index]?.current;
+  //   if (videoRef) {
+  //     videoRef.pause();
+  //   }
+  // };

  const handleBg = (x: string) => {
    setColor(x);
-    handleBgColorChange(x);
+    handleBgChange(x, "animation");
  };
  return (
    <div>
      <div className="grid grid-cols-6 gap-4">
-        {/* {animationsFiles.map((x) => {
+        {animationsFiles.map((x, index) => {
          return (
-            <video  muted loop >         
-                <source src={x} type="video/mp4"/>       
-            </video>
+            <div
+              key={index}
+              // onMouseEnter={() => handleMouseEnter(index)}
+              // onMouseLeave={() => handleMouseLeave(index)}
+              onClick={() => handleBg(x)}
+              className="cursor-pointer">
+              {/* <video ref={videoRefs[index]} autoPlay={hoveredVideo === index}>
+                <source src={`${x}`} type="video/mp4" />
+              </video> */}
+            </div>
          );
-        })} */}
-        {/* <video  muted loop >         
-        <source src="/animated-bgs/4k/1_4k.mp4" type="video/mp4"/>     
-            </video> */}
-        <video src="/public/animated-bgs/4K/1_4k.mp4" loop muted className=""></video>
+        })}
      </div>
    </div>
  );
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/BgColour.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/BgColour.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, handleBgColorChange }) {
+export default function BgColour({ localSurvey, handleBgChange }) {
  const colours = [
    "#FFF2D8",
    "#EAD7BB",
@@ -34,7 +34,7 @@ export default function BgColour({ localSurvey, handleBgColorChange }) {

  const handleBg = (x: string) => {
    setColor(x);
-    handleBgColorChange(x);
+    handleBgChange(x, "color");
  };
  return (
    <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
@@ -3,7 +3,7 @@ import { ColorPicker } from "@formbricks/ui/ColorPicker";
 import { Label } from "@formbricks/ui/Label";
 import FileInput from "@formbricks/ui/FileInput";

-export default function ImageSurveyBg({ localSurvey, handleBgColorChange }) {
+export default function ImageSurveyBg({ localSurvey, handleBgChange }) {
  const colours = [
    "#FFF2D8",
    "#EAD7BB",
@@ -33,10 +33,10 @@ export default function ImageSurveyBg({ localSurvey, handleBgColorChange }) {

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

-  const handleBg = (x: string) => {
-    setColor(x);
-    handleBgColorChange(x);
-  };
+  // 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">
@@ -44,8 +44,7 @@ export default function ImageSurveyBg({ localSurvey, handleBgColorChange }) {
          allowedFileExtensions={["png", "jpeg", "jpg"]}
          environmentId={localSurvey.environmentId}
          onFileUpload={(url: string) => {
-            handleBgColorChange(url);
-            console.log("kk");
+            handleBgChange(url, "image");
          }}
          fileUrl={localSurvey?.welcomeCard?.fileUrl}
        />
--- 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
@@ -12,7 +12,7 @@ import Placement from "./Placement";
 import BgColour from "./BgColour";
 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>>;
@@ -21,7 +21,7 @@ interface 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 ?? {};
@@ -52,9 +52,10 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
      ...localSurvey,
      surveyBackground: {
        ...localSurvey.surveyBackground,
-        bgColor: !!bgColor ? null : "#ffff",
+        bgColor: !!bgColor ? undefined : "#ffff",
      },
    });
+    console.log("++++", localSurvey);
  };

  const toggleHighlightBorderColor = () => {
@@ -77,14 +78,17 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
    });
  };

-  const handleBgColorChange = (color: string) => {
+  const handleBgChange = (color: string, type: string) => {
    setLocalSurvey({
      ...localSurvey,
      surveyBackground: {
        ...localSurvey.surveyBackground,
        bgColor: color,
+        bgType: type,
      },
    });
+
+    console.log("++++++", localSurvey);
  };

  const handleBorderColorChange = (color: string) => {
@@ -189,11 +193,11 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard
                  <button onClick={() => setTab("color")}>Color</button>
                </div>
                {tab == "image" ? (
-                  <ImageSurveyBg localSurvey={localSurvey} handleBgColorChange={handleBgColorChange} />
+                  <ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
                ) : tab == "animated" ? (
-                  <AnimatedSurveyBg localSurvey={localSurvey} handleBgColorChange={handleBgColorChange} />
+                  <AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
                ) : (
-                  <BgColour localSurvey={localSurvey} handleBgColorChange={handleBgColorChange} />
+                  <BgColour localSurvey={localSurvey} handleBgChange={handleBgChange} />
                )}
              </div>
            )}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
@@ -18,6 +18,8 @@ import {
 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";

 type TPreviewType = "modal" | "fullwidth" | "email";

@@ -76,9 +78,10 @@ export default function PreviewSurvey({

  const { productOverwrites } = survey || {};

-  const bgColour = survey.surveyBackground?.bgColor || "#001524";
-  console.log(bgColour);
+  const bgColour = survey.surveyBackground?.bgColor;

+  const [bgVideoUrl, setBgVideoUrl] = useState(bgColour);
+  const router = useRouter();
  const previewScreenVariants: Variants = {
    expanded: {
      right: "5%",
@@ -124,6 +127,18 @@ 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) {
@@ -195,48 +210,39 @@ export default function PreviewSurvey({
            <div className="absolute right-0 top-0 m-2">
              <ResetProgressButton resetQuestionProgress={resetQuestionProgress} />
            </div>
-            <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500 bg-slate-400">
+            <PreviewSurveyBg survey={survey} ContentRef={ContentRef}>
+              {/* <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"> */}
+
              {/* 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 bg-slate-500"></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 "></div>
              {previewType === "modal" ? (
                <Modal
                  isOpen={isModalOpen}
                  placement={placement}
                  highlightBorderColor={highlightBorderColor}
                  previewMode="mobile">
-                  <SurveyBg survey={survey}>
-                    <SurveyInline
-                      survey={survey}
-                      brandColor={"#ffff"}
-                      activeQuestionId={activeQuestionId || undefined}
-                      formbricksSignature={product.formbricksSignature}
-                      onActiveQuestionChange={setActiveQuestionId}
-                      isRedirectDisabled={true}
-                    />
-                  </SurveyBg>
+                  <SurveyInline
+                    survey={survey}
+                    brandColor={brandColor}
+                    activeQuestionId={activeQuestionId || undefined}
+                    formbricksSignature={product.formbricksSignature}
+                    onActiveQuestionChange={setActiveQuestionId}
+                    isRedirectDisabled={true}
+                  />
                </Modal>
              ) : (
-                <div
-                  className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
-                  ref={ContentRef}>
-                  {/* <SurveyBg survey={survey}> */}
-                  <div
-                    className="flex w-full flex-grow flex-col items-center justify-center  py-6"
-                    style={{ backgroundImage: `${bgColour}` }}>
-                    <div className="w-full max-w-md px-4">
-                      <SurveyInline
-                        survey={survey}
-                        brandColor={"#64748b"}
-                        activeQuestionId={activeQuestionId || undefined}
-                        formbricksSignature={product.formbricksSignature}
-                        onActiveQuestionChange={setActiveQuestionId}
-                      />
-                    </div>
-                  </div>
-                  {/* </SurveyBg> */}
+                <div className="relative z-10 w-full max-w-md px-4">
+                  <SurveyInline
+                    survey={survey}
+                    brandColor={brandColor}
+                    activeQuestionId={activeQuestionId || undefined}
+                    formbricksSignature={product.formbricksSignature}
+                    onActiveQuestionChange={setActiveQuestionId}
+                  />
                </div>
              )}
-            </div>
+            </PreviewSurveyBg>
+            {/* </div> */}
          </>
        )}
        {previewMode === "desktop" && (
@@ -292,11 +298,16 @@ export default function PreviewSurvey({
            ) : (
              <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
                <div
-                  className="flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
+                  className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
                  style={{
-                    backgroundImage: `url(${bgColour})`,
+                    background: `url(${sourceVid}) no-repeat center center fixed`,
+                    // backgroundSize: 'cover',
                  }}>
-                  <div className="w-full max-w-md">
+                  <video muted loop autoPlay className="absolute inset-0 h-full w-full object-cover">
+                    <source src={sourceVid} type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </video>
+                  <div className="z-0 w-full  max-w-md rounded-lg p-4">
                    <SurveyInline
                      survey={survey}
                      brandColor={brandColor}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx
@@ -0,0 +1,45 @@
+export default function PreviewSurveyBg({ children, survey, ContentRef }) {
+  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 }}>
+      <div
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
+        ref={ContentRef}>
+        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+      </div>
+    </div>
+  ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
+    <div className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500">
+      <div
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
+        ref={ContentRef}
+        style={{ position: "relative" }}>
+        <div className="relative flex w-full flex-grow flex-col items-center justify-center">
+          <div className="absolute inset-0 h-full w-full object-cover">
+            <video
+              muted
+              loop
+              autoPlay
+              className="h-full w-full object-cover"
+              style={{ width: "100%", height: "100%" }}>
+              <source src="/animated-bgs/4K/1_4k.mp4" type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+          </div>
+          {children}
+        </div>
+      </div>
+    </div>
+  ) : 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})` }}>
+      <div
+        className="absolute top-0 z-10 flex h-full w-full flex-grow flex-col overflow-y-auto"
+        ref={ContentRef}>
+        <div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
+      </div>
+    </div>
+  ) : null;
+}
--- a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
+++ b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx
@@ -3,7 +3,18 @@ export default async function SurveyBg({ children, survey }) {

  console.log("----", survey.surveyBackground);
  return (
-    <div className={`flex h-full items-center justify-center `} style={{ backgroundColor: `${bgColour}` }}>
+    <div
+      className={`flex h-full items-center justify-center `}
+      // style={{ backgroundColor: `${bgColour}` }}
+      // style={{
+      //   backgroundImage: `url(${bgColour})`,
+      //   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/lib/survey/service.ts
+++ b/packages/lib/survey/service.ts
@@ -376,7 +376,7 @@ export async function updateSurvey(updatedSurvey: TSurvey): Promise<TSurvey> {
      attributeFilters: updatedSurvey.attributeFilters ? updatedSurvey.attributeFilters : [], // Include attributeFilters from updatedSurvey
    };

-    console.log("++++m", modifiedSurvey);
+    // console.log("++++m", modifiedSurvey);

    revalidateTag(getSurveysCacheTag(modifiedSurvey.environmentId));
    revalidateTag(getSurveyCacheTag(modifiedSurvey.id));
--- a/packages/types/common.ts
+++ b/packages/types/common.ts
@@ -8,5 +8,9 @@ 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
@@ -41,7 +41,8 @@ export const ZSurveyProductOverwrites = z.object({
 });

 export const ZSurveyBackground = z.object({
-  bgColor: ZColor.nullish(),
+  bgColor: z.string().nullish(),
+  bgType: z.string().nullish(),
  // darkOverlay: z.boolean().nullish(),
 });