From 6119bc88b107de432a7fbddf934db522948501a7 Mon Sep 17 00:00:00 2001 From: pratikAgspert Date: Thu, 26 Sep 2024 15:43:34 +0530 Subject: [PATCH 1/5] Fix: Mobile screen --- src/components/Scene.jsx | 106 +++++--- src/components/top-level/ContentBuilder.jsx | 268 ++++++++++--------- src/components/top-level/content-builder.jsx | 10 +- 3 files changed, 217 insertions(+), 167 deletions(-) diff --git a/src/components/Scene.jsx b/src/components/Scene.jsx index 5fac4a9..91184de 100644 --- 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 = () => ( - - + + -) - +); 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 && + image_360?.image_url && ( + + ) ); } else if (video_360) { return ( - { 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 ( // - + {/* {inView ? */} - <> - - - {data && ( - - )} - - - - + <> + + + + {data && ( + + )} + + + + {isInsideSphere && ( <> - { setIsBottomSheetOpen(val); setIsInteracting(!val) }} + setIsBottomSheetOpen={(val) => { + setIsBottomSheetOpen(val); + setIsInteracting(!val); + }} /> )} diff --git a/src/components/top-level/ContentBuilder.jsx b/src/components/top-level/ContentBuilder.jsx index e83c61d..5b0dfb3 100644 --- a/src/components/top-level/ContentBuilder.jsx +++ b/src/components/top-level/ContentBuilder.jsx @@ -1,107 +1,109 @@ import React, { useState } from "react"; -import { VStack, Box } from "@chakra-ui/react"; +import { VStack, Box, Stack } from "@chakra-ui/react"; import ContentCard from "./ContentCard"; import AddContentButton from "./AddContentButton"; import { nanoid } from "nanoid"; import CarouselComponent from "../CarouselComponent"; -const defaultSheetData = [{ - id: 2, - type: "text_content", - text_content: { - name: "Wondering what you just saw?", - content: - "You can see the exact tea garden from where the box in your hand was processed! That is how transparent we are about our minimally hand processed tea!", +const defaultSheetData = [ + { + id: 2, + type: "text_content", + text_content: { + name: "Wondering what you just saw?", + content: + "You can see the exact tea garden from where the box in your hand was processed! That is how transparent we are about our minimally hand processed tea!", + }, }, -}, -{ - id: 3, - type: "image_content", - image_urls: [ - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(1).jpeg", - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(2).jpeg", - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(3).jpeg", - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(5).jpeg", - ], -}, -{ - id: 4, - type: "text_content", - text_content: { - name: "What makes the tea box in your hand so special?", - content: - "Woolah TrueDips is nothing like you have ever tasted or experienced. Woolah TrueDips is the World’s First Bagless Tea, which in the shape of a tablet locks in the most authentic and exotic Assam tea flavours you have ever tasted.", + { + id: 3, + type: "image_content", + image_urls: [ + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(1).jpeg", + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(2).jpeg", + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(3).jpeg", + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(5).jpeg", + ], }, -}, -{ - id: 5, - type: "video_content", - video_urls: [ - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/videos/WOOLAH+TEA+FEATURE_+THE+PLATE+-+upamanyu+borkakoty.mp4", - ], -}, -{ - id: 6, - type: "text_content", - text_content: { - name: "‘Source transparency’ for you, the consumer:", - content: - "In the heart of Woolah is a meticulously curated value chain which provides gainful earning sources to organically grown micro tea farm owners, tea workers, packaging specialists. It has also delegated women workers to participate and earn a livelihood for themselves. \n Woolah also contributes towards funding quality education for the children of tea workers. The idea is to empower our smallholder tea growers with more visibility, while keeping our sourcing 100% transparent for our consumers!\n ", + { + id: 4, + type: "text_content", + text_content: { + name: "What makes the tea box in your hand so special?", + content: + "Woolah TrueDips is nothing like you have ever tasted or experienced. Woolah TrueDips is the World’s First Bagless Tea, which in the shape of a tablet locks in the most authentic and exotic Assam tea flavours you have ever tasted.", + }, }, -}, -{ - id: 7, - type: "header", - header_text: "Our Team", -}, -{ - id: 8, - type: "image_content", - image_urls: [ - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(4).jpeg", - ], -}, -{ - type: "brand_banner", - brand_banner: - "https://360-images-v1.s3.ap-south-1.amazonaws.com/Woolah_banner2.webp", -}, -{ - link: { - url: "https://woolahtea.com/products/rare-assam-green-tea", - label: "View Product", + { + id: 5, + type: "video_content", + video_urls: [ + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/videos/WOOLAH+TEA+FEATURE_+THE+PLATE+-+upamanyu+borkakoty.mp4", + ], }, - type: "redirect_url", -}, -{ - type: "social_links", - social_links: [ - { - url: "https://www.youtube.com/@woolahtea", - label: "Youtube", - thumbnail: - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/social_icons/youtube.png", - }, - { - url: "https://www.facebook.com/WoolahTea/", - label: "Facebook", - thumbnail: - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/social_icons/facebook.png", + { + id: 6, + type: "text_content", + text_content: { + name: "‘Source transparency’ for you, the consumer:", + content: + "In the heart of Woolah is a meticulously curated value chain which provides gainful earning sources to organically grown micro tea farm owners, tea workers, packaging specialists. It has also delegated women workers to participate and earn a livelihood for themselves. \n Woolah also contributes towards funding quality education for the children of tea workers. The idea is to empower our smallholder tea growers with more visibility, while keeping our sourcing 100% transparent for our consumers!\n ", }, - { - url: "https://www.instagram.com/be_woolah/", - label: "Instagram", - thumbnail: - "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/social_icons/instagram.png", + }, + { + id: 7, + type: "header", + header_text: "Our Team", + }, + { + id: 8, + type: "image_content", + image_urls: [ + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/images/Woolah+farm+(4).jpeg", + ], + }, + { + type: "brand_banner", + brand_banner: + "https://360-images-v1.s3.ap-south-1.amazonaws.com/Woolah_banner2.webp", + }, + { + link: { + url: "https://woolahtea.com/products/rare-assam-green-tea", + label: "View Product", }, - ], -}] + type: "redirect_url", + }, + { + type: "social_links", + social_links: [ + { + url: "https://www.youtube.com/@woolahtea", + label: "Youtube", + thumbnail: + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/social_icons/youtube.png", + }, + { + url: "https://www.facebook.com/WoolahTea/", + label: "Facebook", + thumbnail: + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/social_icons/facebook.png", + }, + { + url: "https://www.instagram.com/be_woolah/", + label: "Instagram", + thumbnail: + "https://360-images-v1.s3.ap-south-1.amazonaws.com/consumer_app/social_icons/instagram.png", + }, + ], + }, +]; const datasets = [ { id: 1, type: "360_video", - header: 'Plucking', + header: "Plucking", data: [ { id: 1, @@ -134,14 +136,14 @@ const datasets = [ }, ], }, - ...defaultSheetData + ...defaultSheetData, ], }, { id: 2, type: "2d_video", - header: 'Withering', + header: "Withering", data: [ { id: 1, @@ -154,14 +156,14 @@ const datasets = [ info: "Unlike mass-produced commodity teas, we follow traditional and natural withering processes in small batches. It helps in controlled dehydration or moisture reduction of the leaves and helps in flavour development. Fresh oxygen comes in contact with the leaves to do the magic.", }, }, - ...defaultSheetData + ...defaultSheetData, ], }, { id: 3, type: "360_video", - header: 'Tea Crafting', + header: "Tea Crafting", data: [ { id: 1, @@ -177,14 +179,14 @@ const datasets = [ }, ], }, - ...defaultSheetData + ...defaultSheetData, ], }, { id: 4, type: "360_video", - header: 'Sachet Making', + header: "Sachet Making", data: [ { id: 1, @@ -192,56 +194,64 @@ const datasets = [ image_url: "https://360-images-v1.s3.ap-south-1.amazonaws.com/Sachet_packing.mp4", }, - ...defaultSheetData + ...defaultSheetData, ], }, ]; const datasets2 = [ { - "id": "dTcuL2iE_wS3NnO9EhYjL", - "type": "360_Image", - "header": "", - "data": [ + id: "dTcuL2iE_wS3NnO9EhYjL", + type: "360_Image", + header: "", + data: [ { - "id": "Der7d5eSBAjWC8jEFNG6X", - "type": "360_Image", - "image_url": "blob:http://localhost:5173/155af97b-2477-457f-b4ed-3341d3b8c3e9" - } - ] - } -] + id: "Der7d5eSBAjWC8jEFNG6X", + type: "360_Image", + image_url: + "blob:http://localhost:5173/155af97b-2477-457f-b4ed-3341d3b8c3e9", + }, + ], + }, +]; const ContentBuilder = () => { const [contents, setContents] = useState([]); const addContent = (type) => { - setContents([...contents, { - id: nanoid(), - type, - header: "", - data: [{ + setContents([ + ...contents, + { id: nanoid(), type, - image_url: "", - }] - }]); + header: "", + data: [ + { + id: nanoid(), + type, + image_url: "", + }, + ], + }, + ]); }; const updateContent = (id, newData) => { - setContents(contents.map(content => - content.id === id ? { ...content, ...newData } : content - )); + setContents( + contents.map((content) => + content.id === id ? { ...content, ...newData } : content + ) + ); }; - console.log("state", contents) + console.log("state", contents); const deleteContent = (id) => { - setContents(contents.filter(content => content.id !== id)); + setContents(contents.filter((content) => content.id !== id)); }; return ( - + @@ -256,9 +266,23 @@ const ContentBuilder = () => { ))} - - - + + + + + + ); }; diff --git a/src/components/top-level/content-builder.jsx b/src/components/top-level/content-builder.jsx index 4eedd2e..64e1273 100644 --- a/src/components/top-level/content-builder.jsx +++ b/src/components/top-level/content-builder.jsx @@ -1,13 +1,13 @@ -import React from 'react'; -import { Box } from '@chakra-ui/react'; -import ContentBuilder from './ContentBuilder'; +import React from "react"; +import { Box } from "@chakra-ui/react"; +import ContentBuilder from "./ContentBuilder"; const ContentBuilderPage = () => { return ( - + ); }; -export default ContentBuilderPage; \ No newline at end of file +export default ContentBuilderPage; From 70f6bb3d609bd974cf7d18148975c88cb48e56a7 Mon Sep 17 00:00:00 2001 From: pratikAgspert Date: Thu, 26 Sep 2024 16:31:16 +0530 Subject: [PATCH 2/5] update: ui --- src/components/CarouselComponent.jsx | 4 +- src/components/generic/DraggableDrawer.jsx | 2 +- src/components/top-level/AddContentButton.jsx | 22 ++--- src/components/top-level/ContentBuilder.jsx | 17 +++- src/components/top-level/ContentCard.jsx | 93 +++++++++++++------ src/components/top-level/content-builder.jsx | 2 +- 6 files changed, 93 insertions(+), 47 deletions(-) diff --git a/src/components/CarouselComponent.jsx b/src/components/CarouselComponent.jsx index 9c79dda..1c41b94 100644 --- 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 ( - + {productData?.map((dataset) => { return ( diff --git a/src/components/generic/DraggableDrawer.jsx b/src/components/generic/DraggableDrawer.jsx index 1355e86..89f806f 100644 --- 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 index 5c975ec..30c6413 100644 --- 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, { useState } from "react"; import { IconButton, Menu, MenuButton, MenuList, MenuItem, -} from '@chakra-ui/react'; -import { AddIcon } from '@chakra-ui/icons'; +} from "@chakra-ui/react"; +import { AddIcon } from "@chakra-ui/icons"; - - -const AddContentButton= ({ onAdd }) => { +const AddContentButton = ({ onAdd }) => { return ( { isRound /> - onAdd('360_image')}>360° Image - onAdd('360_video')}>360° Video - onAdd('Header')}>Header - onAdd('Media Content')}>Media Content + onAdd("360_image")}>360° Image + onAdd("360_video")}>360° Video + onAdd("header")}>Header + onAdd("media_content")}> + Media Content + ); }; -export default AddContentButton; \ No newline at end of file +export default AddContentButton; diff --git a/src/components/top-level/ContentBuilder.jsx b/src/components/top-level/ContentBuilder.jsx index 5b0dfb3..ffcec7a 100644 --- a/src/components/top-level/ContentBuilder.jsx +++ b/src/components/top-level/ContentBuilder.jsx @@ -251,10 +251,17 @@ const ContentBuilder = () => { return ( - - + + + {contents.map((content) => ( { - + { const handleMediaChange = (newMedia) => { onUpdate({ - data: [{ - ...data[0], - image_url: newMedia[0] - }] + data: [ + { + ...data[0], + image_url: newMedia[0], + }, + ], }); }; @@ -24,33 +33,63 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => { {type} - } size="sm" /> - onUpdate({ isActive: !data[0]?.isActive })} /> + } + size="sm" + /> + onUpdate({ isActive: !data[0]?.isActive })} + /> - - + + } + size="sm" + ml={2} + onClick={() => inputRef.current.focus()} + /> + + )} + + {type === "360_image" && ( + - } - size="sm" - ml={2} - onClick={() => inputRef.current.focus()} + )} + + {type === "360_video" && ( + + )} + + {type === "media_content" && ( + - - + )} ); }; -export default ContentCard; \ No newline at end of file +export default ContentCard; diff --git a/src/components/top-level/content-builder.jsx b/src/components/top-level/content-builder.jsx index 64e1273..5a5e54d 100644 --- a/src/components/top-level/content-builder.jsx +++ b/src/components/top-level/content-builder.jsx @@ -4,7 +4,7 @@ import ContentBuilder from "./ContentBuilder"; const ContentBuilderPage = () => { return ( - + ); From a9d82c23491870fbcc567931003448103c8c4f2f Mon Sep 17 00:00:00 2001 From: pratikAgspert Date: Thu, 26 Sep 2024 17:22:54 +0530 Subject: [PATCH 3/5] Feat: text_content --- src/components/top-level/AddContentButton.jsx | 18 ++++-- src/components/top-level/ContentBuilder.jsx | 6 +- src/components/top-level/ContentCard.jsx | 58 +++++++++++++------ 3 files changed, 57 insertions(+), 25 deletions(-) diff --git a/src/components/top-level/AddContentButton.jsx b/src/components/top-level/AddContentButton.jsx index 30c6413..4ad6026 100644 --- a/src/components/top-level/AddContentButton.jsx +++ b/src/components/top-level/AddContentButton.jsx @@ -1,5 +1,4 @@ -/* eslint-disable react/prop-types */ -import React, { useState } from "react"; +import React from "react"; import { IconButton, Menu, @@ -9,7 +8,11 @@ import { } from "@chakra-ui/react"; import { AddIcon } from "@chakra-ui/icons"; -const AddContentButton = ({ onAdd }) => { +const AddContentButton = ({ onAdd, contents }) => { + const includes360 = contents?.some( + (con) => con?.type === "360_image" || con?.type === "360_video" + ); + return ( { isRound /> - onAdd("360_image")}>360° Image - onAdd("360_video")}>360° Video + {!includes360 && ( + <> + onAdd("360_image")}>360° Image + onAdd("360_video")}>360° Video + + )} onAdd("header")}>Header + onAdd("text_content")}>Text Content onAdd("media_content")}> Media Content diff --git a/src/components/top-level/ContentBuilder.jsx b/src/components/top-level/ContentBuilder.jsx index ffcec7a..fdc0cb3 100644 --- a/src/components/top-level/ContentBuilder.jsx +++ b/src/components/top-level/ContentBuilder.jsx @@ -224,6 +224,7 @@ const ContentBuilder = () => { id: nanoid(), type, header: "", + text_content: "", data: [ { id: nanoid(), @@ -250,16 +251,17 @@ const ContentBuilder = () => { }; return ( - + - + diff --git a/src/components/top-level/ContentCard.jsx b/src/components/top-level/ContentCard.jsx index 61770dd..ebe9e1c 100644 --- a/src/components/top-level/ContentCard.jsx +++ b/src/components/top-level/ContentCard.jsx @@ -6,17 +6,31 @@ import { Heading, Switch, Input, + Textarea, } from "@chakra-ui/react"; import { DeleteIcon, EditIcon } from "@chakra-ui/icons"; import MediaPicker from "./MediaPicker"; -const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => { +const ContentCard = ({ + id, + type, + header, + data, + onUpdate, + text_content, + onDelete, +}) => { const inputRef = useRef(null); + const textContentRef = useRef(null); const handleHeaderChange = (e) => { onUpdate({ header: e.target.value }); }; + const handleTextContentChange = (e) => { + onUpdate({ text_content: e.target.value }); + }; + const handleMediaChange = (newMedia) => { onUpdate({ data: [ @@ -28,8 +42,12 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => { }); }; + const mediaTypes = ["360_image", "360_video", "media_content"]; + + const contentTypes = ["header", "text_content"]; + return ( - + {type} @@ -46,7 +64,7 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => { - {type === "header" && ( + {contentTypes.includes(type) && ( { )} - {type === "360_image" && ( - - )} - - {type === "360_video" && ( - + {type === "text_content" && ( + +