mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-07 14:21:52 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

fix: added components

Browse Source
This commit is contained in:
anjy7
2023-10-30 14:30:10 +05:30
parent f8518fcd80
commit ca634cd798
10 changed files with 212 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx
+66 -56
View File
@@ -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<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 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<HTMLVideoElement>(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 (
<div>
<div className="grid grid-cols-6 gap-4">
<div className="mt-4 grid grid-cols-6 gap-4">
{animationsFiles.map((x, index) => {
return (
<div
key={index}
// onMouseEnter={() => handleMouseEnter(index)}
// onMouseLeave={() => handleMouseLeave(index)}
onMouseEnter={() => handleMouseEnter(index)}
onMouseLeave={() => handleMouseLeave(index)}
onClick={() => handleBg(x)}
className="cursor-pointer">
{/* <video ref={videoRefs[index]} autoPlay={hoveredVideo === index}>
<video
id={`video-${index}`}
autoPlay={hoveredVideo === index}
className="h-46 w-96 rounded-lg">
<source src={`${x}`} type="video/mp4" />
</video> */}
</video>
</div>
);
})}
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SettingsView.tsx
+7 -1
View File
@@ -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}
/>
<StylingCard localSurvey={localSurvey} setLocalSurvey={setLocalSurvey} />
<StylingCard
animationsFiles={animationsFiles}
localSurvey={localSurvey}
setLocalSurvey={setLocalSurvey}
/>
</div>
);
}
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
+7 -2
View File
@@ -16,9 +16,10 @@ import { useRouter } from "next/navigation";
interface StylingCardProps {
localSurvey: TSurvey;
setLocalSurvey: React.Dispatch<React.SetStateAction<TSurvey>>;
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" ? (
<ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
) : tab == "animated" ? (
<AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
<AnimatedSurveyBg
localSurvey={localSurvey}
animationsFiles={animationsFiles}
handleBgChange={handleBgChange}
/>
) : (
<BgColour localSurvey={localSurvey} handleBgChange={handleBgChange} />
)}
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx
+4
View File
@@ -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({
/>
) : (
<SettingsView
animationsFiles={animationsFiles}
environment={environment}
localSurvey={localSurvey}
setLocalSurvey={setLocalSurvey}
@@ -100,6 +103,7 @@ 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}
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/page.tsx
+33
View File
@@ -23,9 +23,42 @@ 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}
apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
+17 -29
View File
@@ -20,6 +20,7 @@ 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 PreviewSurveyBgDeskstop from "@/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop";
type TPreviewType = "modal" | "fullwidth" | "email";
@@ -29,6 +30,7 @@ interface PreviewSurveyProps {
activeQuestionId?: string | null;
previewType?: TPreviewType;
product: TProduct;
animationsFiles: string[];
environment: TEnvironment;
}
@@ -66,6 +68,7 @@ export default function PreviewSurvey({
survey,
previewType,
product,
animationsFiles,
environment,
}: PreviewSurveyProps) {
const [isModalOpen, setIsModalOpen] = useState(true);
@@ -132,10 +135,9 @@ export default function PreviewSurvey({
}
const sourceVid = getSourceVid(bgColour);
// useEffect(() => {
// setBgVideoUrl(bgColour)
// }, [bgColour]);
useEffect(() => {
setBgVideoUrl(bgColour);
}, [bgColour]);
console.log(sourceVid);
@@ -211,8 +213,6 @@ export default function PreviewSurvey({
<ResetProgressButton resetQuestionProgress={resetQuestionProgress} />
</div>
<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 "></div>
{previewType === "modal" ? (
@@ -242,7 +242,6 @@ export default function PreviewSurvey({
</div>
)}
</PreviewSurveyBg>
{/* </div> */}
</>
)}
{previewMode === "desktop" && (
@@ -296,29 +295,18 @@ export default function PreviewSurvey({
/>
</Modal>
) : (
<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={{
background: `url(${sourceVid}) no-repeat center center fixed`,
// backgroundSize: 'cover',
}}>
<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}
activeQuestionId={activeQuestionId || undefined}
formbricksSignature={product.formbricksSignature}
onActiveQuestionChange={setActiveQuestionId}
isRedirectDisabled={true}
/>
</div>
<PreviewSurveyBgDeskstop survey={survey} ContentRef={ContentRef}>
<div className="z-0 w-full max-w-md rounded-lg p-4">
<SurveyInline
survey={survey}
brandColor={brandColor}
activeQuestionId={activeQuestionId || undefined}
formbricksSignature={product.formbricksSignature}
onActiveQuestionChange={setActiveQuestionId}
isRedirectDisabled={true}
/>
</div>
</div>
</PreviewSurveyBgDeskstop>
)}
</div>
)}
apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBg.tsx
+12 -2
View File
@@ -23,7 +23,7 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) {
autoPlay
className="h-full w-full object-cover"
style={{ width: "100%", height: "100%" }}>
<source src="/animated-bgs/4K/1_4k.mp4" type="video/mp4" />
<source src={survey.surveyBackground.bgColor} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
@@ -41,5 +41,15 @@ export default function PreviewSurveyBg({ children, survey, ContentRef }) {
<div className="relative flex w-full flex-grow flex-col items-center justify-center">{children}</div>
</div>
</div>
) : null;
) : (
<div
className="relative h-[90%] max-h-[40rem] w-80 overflow-hidden rounded-[3rem] border-8 border-slate-500"
style={{ backgroundColor: "#ffff" }}>
<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>
);
}
apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
+42
View File
@@ -0,0 +1,42 @@
export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }) {
return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
<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" }}>
{children}
</div>
</div>
) : survey.surveyBackground && survey.surveyBackground.bgType === "animation" ? (
<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={{
background: `url(${survey.surveyBackground.bgColor}) 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" />
Your browser does not support the video tag.
</video>
{children}
</div>
</div>
) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
<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})` }}>
{children}
</div>
</div>
) : (
<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: "#ffff" }}>
{children}
</div>
</div>
);
}
apps/web/app/s/[surveyId]/components/SurveyBg.tsx
+23 -9
View File
@@ -2,20 +2,34 @@ export default async function SurveyBg({ children, survey }) {
const bgColour = survey.surveyBackground?.bgColor || "#ffff";
console.log("----", survey.surveyBackground);
return (
<div
className={`flex h-full items-center justify-center `}
// style={{ backgroundColor: `${bgColour}` }}
// style={{
// backgroundImage: `url(${bgColour})`,
// backgroundSize: "inherit"
// }}
>
return survey.surveyBackground && survey.surveyBackground.bgType === "color" ? (
<div className={`flex h-full items-center justify-center `} style={{ backgroundColor: `${bgColour}` }}>
<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" />
Your browser does not support the video tag.
</video>
<div className="h-[60%]">{children}</div>
</div>
) : survey.surveyBackground && survey.surveyBackground.bgType === "image" ? (
<div
className={`flex h-full items-center justify-center `}
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>
) : (
<div className={`flex h-full items-center justify-center `} style={{ backgroundColor: "#ffff" }}>
<div className="h-[60%]">{children}</div>
</div>
);
}
packages/surveys/src/components/FormbricksSignature.tsx
+1 -1
View File
@@ -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">
<p className="text-xs text-slate-400">
Powered by{" "}
<b>