fix: animated background issue (#1884)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx

@@ -11,7 +11,7 @@ import {
   DevicePhoneMobileIcon,
 } from "@heroicons/react/24/solid";
 import { Variants, motion } from "framer-motion";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import type { TEnvironment } from "@formbricks/types/environment";
 import type { TProduct } from "@formbricks/types/product";
@@ -156,20 +156,6 @@ export default function PreviewSurvey({
     setActiveQuestionId(survey.welcomeCard.enabled ? "start" : survey?.questions[0]?.id);
   }
 
-  const animationTrigger = useCallback(() => {
-    let storePreviewMode = previewMode;
-    setPreviewMode("null");
-    setTimeout(() => {
-      setPreviewMode(storePreviewMode);
-    }, 10);
-  }, [previewMode, setPreviewMode]);
-
-  useEffect(() => {
-    if (survey.styling?.background?.bgType === "animation") {
-      animationTrigger();
-    }
-  }, [survey.styling?.background?.bg, survey.styling?.background?.bgType, animationTrigger]);
-
   useEffect(() => {
     if (environment && environment.widgetSetupCompleted) {
       setWidgetSetupCompleted(true);

apps/web/app/s/[surveyId]/components/MediaBackground.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 import { TSurvey } from "@formbricks/types/surveys";
 
@@ -19,6 +19,17 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
   isMobilePreview = false,
   ContentRef,
 }) => {
+  const animatedBackgroundRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (survey.styling?.background?.bgType === "animation") {
+      if (animatedBackgroundRef.current && survey.styling?.background?.bg) {
+        animatedBackgroundRef.current.src = survey.styling?.background?.bg;
+        animatedBackgroundRef.current.play();
+      }
+    }
+  }, [survey.styling?.background?.bg, survey.styling?.background?.bgType]);
+
   const getFilterStyle = () => {
     return survey.styling?.background?.brightness
       ? `brightness(${survey.styling?.background?.brightness}%)`
@@ -40,6 +51,7 @@ export const MediaBackground: React.FC<MediaBackgroundProps> = ({
       case "animation":
         return (
           <video
+            ref={animatedBackgroundRef}
             muted
             loop
             autoPlay