Merge pull request #1 from PrinceBaghel258025/rendering_comp

Enhancements
PrinceBaghel258025 · Sep 27, 2024 · 3c0822d · 3c0822d
2 parents 7e30fa1 + 27f36d0
commit 3c0822d
Show file tree

Hide file tree

Showing 7 changed files with 347 additions and 215 deletions.
diff --git a/src/components/CarouselComponent.jsx b/src/components/CarouselComponent.jsx
@@ -51,10 +51,10 @@ const CarouselComponent = ({ productData, defaultSheetData }) => {
       sliderRef.current.slickPrev();
     }
   };
-  console.log("state carousel", productData)
+  console.log("state carousel", productData);
 
   return (
-    <Stack position={"relative"} overflow={"hidden"} maxH={"80dvh"}>
+    <Stack position={"relative"} overflow={"hidden"}>
       <Slider ref={sliderRef} {...settings}>
         {productData?.map((dataset) => {
           return (

diff --git a/src/components/Scene.jsx b/src/components/Scene.jsx
@@ -14,23 +14,29 @@ import { HeroSection } from "./HeroSection";
 import MediaContentIn360 from "./MediaContentIn360";
 import { SplashScreen } from "./generic/SplashScreen";
 import ScreenInfoCard from "./generic/ScreenInfoCard";
-import { useInView } from 'react-intersection-observer';
+import { useInView } from "react-intersection-observer";
 import { RiLoader4Fill } from "react-icons/ri";
 
 export const LoadingBox = () => (
-  <Box height={"100dvh"} width={"100dvw"} display={'flex'} justifyContent={'center'} borderWidth={4} alignItems={'center'}>
-    <Box className="animate-pulse" >
+  <Box
+    height={"100dvh"}
+    width={"100dvw"}
+    display={"flex"}
+    justifyContent={"center"}
+    borderWidth={4}
+    alignItems={"center"}
+  >
+    <Box className="animate-pulse">
       <Spinner
-        thickness='4px'
-        speed='0.65s'
-        emptyColor='gray.200'
-        color='blue.500'
-        size='xl'
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="blue.500"
+        size="xl"
       />
     </Box>
   </Box>
-)
-
+);
 
 function Loading() {
   return (
@@ -40,7 +46,6 @@ function Loading() {
   );
 }
 
-
 const ImageSphere = ({
   data,
   image_url,
@@ -114,7 +119,6 @@ const VideoSphere = ({
   let videoTexture = useVideoTexture(image_url);
   const meshRef = useRef();
 
-
   // const [rotated, setRotated] = useState(false);
   // useFrame(() => {
   //   if (meshRef.current && !rotated) {
@@ -183,21 +187,30 @@ const VideoSphere = ({
   );
 };
 
-const Sphere = ({ data, setIsInteracting, isBottomSheetOpen, targetRotation }) => {
+const Sphere = ({
+  data,
+  setIsInteracting,
+  isBottomSheetOpen,
+  targetRotation,
+}) => {
   const image_360 = data?.find((info) => info?.type === "360_image");
   const video_360 = data?.find((info) => info?.type === "360_video");
   if (image_360) {
     return (
-      image_360?.image_url && <ImageSphere targetRotation={targetRotation}
-        data={image_360}
-        setIsInteracting={setIsInteracting}
-        image_url={image_360?.image_url}
-        isBottomSheetOpen={isBottomSheetOpen}
-      />
+      image_360?.image_url && (
+        <ImageSphere
+          targetRotation={targetRotation}
+          data={image_360}
+          setIsInteracting={setIsInteracting}
+          image_url={image_360?.image_url}
+          isBottomSheetOpen={isBottomSheetOpen}
+        />
+      )
     );
   } else if (video_360) {
     return (
-      <VideoSphere targetRotation={targetRotation}
+      <VideoSphere
+        targetRotation={targetRotation}
         data={video_360}
         setIsInteracting={setIsInteracting}
         image_url={video_360?.image_url}
@@ -214,10 +227,18 @@ const FrameUpdater = ({ setIsInsideSphere }) => {
   return null;
 };
 
-export const Scene = ({ data, isBottomSheetOpen, setIsBottomSheetOpen, setIsInteracting, header, fov, targetRotation, zoom = 1 }) => {
+export const Scene = ({
+  data,
+  isBottomSheetOpen,
+  setIsBottomSheetOpen,
+  setIsInteracting,
+  header,
+  fov,
+  targetRotation,
+  zoom = 1,
+}) => {
   const [isInsideSphere, setIsInsideSphere] = useState(true);
 
-
   // const { ref, inView } = useInView({
   //   threshold: 0.6, onChange: (inView, entry) => {
   //     console.log("value of changing view", header, inView, entry)
@@ -228,28 +249,33 @@ export const Scene = ({ data, isBottomSheetOpen, setIsBottomSheetOpen, setIsInte
   // console.log("value of inView", header, inView)
   return (
     // <Box ref={ref} w={"100dvw"} h={"100dvh"}>
-    <Box w={"50dvw"} h={"80dvh"} borderWidth={2} borderColor={"red"}>
+    <Box w={"50dvw"} h={"80dvh"}>
       {/* {inView ? */}
-      <><Canvas camera={{ position: [0, 0, 0.001], fov: 70, zoom: [zoom] }}>
-        <ambientLight intensity={1} />
-        <Suspense fallback={Loading}>
-          {data && (
-            <Sphere
-              targetRotation={targetRotation}
-              setIsInteracting={setIsInteracting}
-              data={data}
-              isBottomSheetOpen={isBottomSheetOpen}
-            />
-          )}
-        </Suspense>
-        <OrbitControls enableRotate={true} enableZoom={false} />
-        <FrameUpdater setIsInsideSphere={setIsInsideSphere} />
-      </Canvas>
+      <>
+        <Canvas camera={{ position: [0, 0, 0.001], fov: 70, zoom: [zoom] }}>
+          <ambientLight intensity={1} />
+          <Suspense fallback={Loading}>
+            {data && (
+              <Sphere
+                targetRotation={targetRotation}
+                setIsInteracting={setIsInteracting}
+                data={data}
+                isBottomSheetOpen={isBottomSheetOpen}
+              />
+            )}
+          </Suspense>
+          <OrbitControls enableRotate={true} enableZoom={false} />
+          <FrameUpdater setIsInsideSphere={setIsInsideSphere} />
+        </Canvas>
         {isInsideSphere && (
           <>
-            <HeroSection header={header}
+            <HeroSection
+              header={header}
               data={data}
-              setIsBottomSheetOpen={(val) => { setIsBottomSheetOpen(val); setIsInteracting(!val) }}
+              setIsBottomSheetOpen={(val) => {
+                setIsBottomSheetOpen(val);
+                setIsInteracting(!val);
+              }}
             />
           </>
         )}

diff --git a/src/components/generic/DraggableDrawer.jsx b/src/components/generic/DraggableDrawer.jsx
@@ -28,7 +28,7 @@ export default function DraggableDrawer({
 }) {
   const { height } = useWindowSize();
   const level = React.useMemo(
-    () => [0, -(height - 80), -(height - 80)],
+    () => [0, -(height - 160), -(height - 160)],
     [height]
   );
 

diff --git a/src/components/top-level/AddContentButton.jsx b/src/components/top-level/AddContentButton.jsx
@@ -1,17 +1,15 @@
-/* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import React from "react";
 import {
   IconButton,
   Menu,
   MenuButton,
   MenuList,
   MenuItem,
-} from '@chakra-ui/react';
-import { AddIcon } from '@chakra-ui/icons';
+  Tag,
+} from "@chakra-ui/react";
+import { AddIcon } from "@chakra-ui/icons";
 
-
-
-const AddContentButton= ({ onAdd }) => {
+const AddContentButton = ({ onAdd, contents }) => {
   return (
     <Menu>
       <MenuButton
@@ -23,13 +21,27 @@ const AddContentButton= ({ onAdd }) => {
         isRound
       />
       <MenuList>
-        <MenuItem onClick={() => onAdd('360_image')}>360° Image</MenuItem>
-        <MenuItem onClick={() => onAdd('360_video')}>360° Video</MenuItem>
-        <MenuItem onClick={() => onAdd('Header')}>Header</MenuItem>
-        <MenuItem onClick={() => onAdd('Media Content')}>Media Content</MenuItem>
+        <MenuItem onClick={() => onAdd("360_image")} gap={2}>
+          360° Image<Tag borderRadius={10}>Carousel</Tag>
+        </MenuItem>
+        <MenuItem onClick={() => onAdd("360_video")} gap={2}>
+          360° Video<Tag borderRadius={10}>Carousel</Tag>
+        </MenuItem>
+        <MenuItem onClick={() => onAdd("banner")} gap={2}>
+          Banner <Tag borderRadius={10}>Sheet</Tag>
+        </MenuItem>
+        <MenuItem onClick={() => onAdd("header")} gap={2}>
+          Header <Tag borderRadius={10}>Sheet</Tag>
+        </MenuItem>
+        <MenuItem onClick={() => onAdd("text_content")} gap={2}>
+          Text Content <Tag borderRadius={10}>Sheet</Tag>
+        </MenuItem>
+        <MenuItem onClick={() => onAdd("media_content")} gap={2}>
+          Media Content <Tag borderRadius={10}>Sheet</Tag>
+        </MenuItem>
       </MenuList>
     </Menu>
   );
 };
 
-export default AddContentButton;
+export default AddContentButton;