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 ecb3294829..124f000499 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,63 +1,70 @@ -import { useState, useRef } from "react"; +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 }) { +export default function AnimatedSurveyBg({ localSurvey, handleBgChange, animationsFiles }) { const [color, setColor] = useState(localSurvey.surveyBackground?.bgColor || "#ffff"); - + const router = useRouter(); const [hoveredVideo, setHoveredVideo] = useState(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 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 animations = fs.readdirSync(animationsFiles); - // const videoRefs = animationsFiles.map(() => useRef(null)); + const handleMouseEnter = (index: number) => { + setHoveredVideo(index); + playVideo(index); + }; - // const handleMouseEnter = (index: number) => { - // setHoveredVideo(index); - // const videoRef = videoRefs[index]?.current; - // if (videoRef) { - // videoRef.play(); - // } - // }; + const handleMouseLeave = (index: number) => { + setHoveredVideo(null); + pauseVideo(index); + }; - // const handleMouseLeave = (index: number) => { - // setHoveredVideo(null); - // const videoRef = videoRefs[index]?.current; - // if (videoRef) { - // videoRef.pause(); - // } - // }; + // Function to play the video + const playVideo = (index: number) => { + const video = document.getElementById(`video-${index}`) as HTMLVideoElement; + if (video) { + video.play(); + } + }; + + // Function to pause the video + const pauseVideo = (index: number) => { + const video = document.getElementById(`video-${index}`) as HTMLVideoElement; + if (video) { + video.pause(); + } + }; const handleBg = (x: string) => { setColor(x); @@ -65,18 +72,21 @@ export default function AnimatedSurveyBg({ localSurvey, handleBgChange }) { }; return (
-
+
{animationsFiles.map((x, index) => { return (
handleMouseEnter(index)} - // onMouseLeave={() => handleMouseLeave(index)} + onMouseEnter={() => handleMouseEnter(index)} + onMouseLeave={() => handleMouseLeave(index)} onClick={() => handleBg(x)} className="cursor-pointer"> - {/*
); })} diff --git 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 index ccdefa6e3d..cb88410efa 100644 --- 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,6 +15,7 @@ interface SettingsViewProps { setLocalSurvey: (survey: TSurvey) => void; actionClasses: TActionClass[]; attributeClasses: TAttributeClass[]; + animationsFiles: string[]; responseCount: number; } @@ -23,6 +24,7 @@ export default function SettingsView({ localSurvey, setLocalSurvey, actionClasses, + animationsFiles, attributeClasses, responseCount, }: SettingsViewProps) { @@ -56,7 +58,11 @@ export default function SettingsView({ environmentId={environment.id} /> - +
); } diff --git 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 index 002707231b..b981fa0356 100644 --- 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 @@ -16,9 +16,10 @@ import { useRouter } from "next/navigation"; interface StylingCardProps { localSurvey: TSurvey; setLocalSurvey: React.Dispatch>; + animationsFiles: string[]; } -export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCardProps) { +export default function StylingCard({ localSurvey, setLocalSurvey, animationsFiles }: StylingCardProps) { const [open, setOpen] = useState(false); const [tab, setTab] = useState("image"); const router = useRouter(); @@ -195,7 +196,11 @@ export default function StylingCard({ localSurvey, setLocalSurvey }: StylingCard {tab == "image" ? ( ) : tab == "animated" ? ( - + ) : ( )} diff --git 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 index 0371c07857..790bc088d0 100644 --- 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,12 +21,14 @@ interface SurveyEditorProps { actionClasses: TActionClass[]; attributeClasses: TAttributeClass[]; responseCount: number; + animationsFiles: string[]; } export default function SurveyEditor({ survey, product, environment, + animationsFiles, actionClasses, attributeClasses, responseCount, @@ -89,6 +91,7 @@ export default function SurveyEditor({ /> ) : (
- {/*
*/} - {/* below element is use to create notch for the mobile device mockup */}
{previewType === "modal" ? ( @@ -242,7 +242,6 @@ export default function PreviewSurvey({
)} - {/*
*/} )} {previewMode === "desktop" && ( @@ -296,29 +295,18 @@ export default function PreviewSurvey({ /> ) : ( -
-
- -
- -
+ +
+
-
+ )}
)} diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx index 19606ed8d7..c5996ae77a 100644 --- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx @@ -23,7 +23,7 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) { autoPlay className="h-full w-full object-cover" style={{ width: "100%", height: "100%" }}> - + Your browser does not support the video tag. @@ -41,5 +41,15 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) {
{children}
- ) : null; + ) : ( +
+
+
{children}
+
+
+ ); } diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx new file mode 100644 index 0000000000..9bccf02567 --- /dev/null +++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx @@ -0,0 +1,42 @@ +export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }) { + return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? ( +
+
+ {children} +
+
+ ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? ( +
+
+ + {children} +
+
+ ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? ( +
+
+ {children} +
+
+ ) : ( +
+
+ {children} +
+
+ ); +} diff --git a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx index b71f6d706c..f810cfb53f 100644 --- a/apps/web/app/s/[surveyId]/components/SurveyBg.tsx +++ b/apps/web/app/s/[surveyId]/components/SurveyBg.tsx @@ -2,20 +2,34 @@ export default async function SurveyBg({ children, survey }) { const bgColour = survey.surveyBackground?.bgColor || "#ffff"; console.log("----", survey.surveyBackground); - return ( -
+ return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? ( +
+
{children}
+
+ ) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? ( +
{children}
+ ) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? ( +
+ +
{children}
+
+ ) : ( +
+
{children}
+
); } diff --git a/packages/surveys/src/components/FormbricksSignature.tsx b/packages/surveys/src/components/FormbricksSignature.tsx index 5323ec2d50..ab50fd1b65 100644 --- a/packages/surveys/src/components/FormbricksSignature.tsx +++ b/packages/surveys/src/components/FormbricksSignature.tsx @@ -4,7 +4,7 @@ export default function FormbricksSignature() { href="https://formbricks.com?utm_source=survey_branding" target="_blank" tabIndex={-1} - className="mb-5 mt-2 flex justify-center"> + className="mb-3 mt-2 flex justify-center">

Powered by{" "}