diff --git a/client/src/components/PopupContainer.tsx b/client/src/components/PopupContainer.tsx index fe25491..e033e70 100644 --- a/client/src/components/PopupContainer.tsx +++ b/client/src/components/PopupContainer.tsx @@ -2,20 +2,10 @@ import { AnimatePresence, motion } from "motion/react"; import usePopupStore from "../store/popupStore"; function PopupContainer() { - const { popup, position, setPopup } = usePopupStore(); + const { popup } = usePopupStore(); const isMobile = innerWidth < 640; - function handleDragEnd( - _event: unknown, - info: { offset: { y: number }; velocity: { y: number } } - ) { - // Закрываем попап если свайпнули вниз больше чем на 100px или со скоростью > 500 - if (info.offset.y > 100 || info.velocity.y > 500) { - setPopup(null); - } - } - return ( {popup && ( @@ -24,16 +14,6 @@ function PopupContainer() { initial={{ opacity: 0, y: isMobile ? "100%" : undefined }} animate={{ opacity: 1, y: isMobile ? "0%" : undefined }} exit={{ opacity: 0, y: isMobile ? "100%" : undefined }} - drag={isMobile ? "y" : false} - dragConstraints={{ top: 0, bottom: 0 }} - dragElastic={{ top: 0, bottom: 0.5 }} - onDragEnd={isMobile ? handleDragEnd : undefined} - transition={{ bounce: 0 }} - style={ - !isMobile - ? { top: position.y, left: position.x } - : { bottom: 0, left: 0, right: 0 } - } > {popup} diff --git a/client/src/components/PopupHeader.tsx b/client/src/components/PopupHeader.tsx index 62c5533..ed5455b 100644 --- a/client/src/components/PopupHeader.tsx +++ b/client/src/components/PopupHeader.tsx @@ -6,21 +6,14 @@ import Button from "./ui/Button"; interface PopupHeaderProps { title?: string; leftButton?: React.ReactNode; - headerRef: React.RefObject; draggable?: boolean; } -function PopupHeader({ - title, - leftButton, - headerRef, - draggable, -}: PopupHeaderProps) { +function PopupHeader({ title, leftButton, draggable }: PopupHeaderProps) { const { setPopup } = usePopupStore(); return (
(null); - const headerRef = useRef(null); - - useEffect(() => { - addEventListener("mouseup", () => setMouseDown(false)); - addEventListener("touchend", () => setMouseDown(false)); - return () => { - removeEventListener("mouseup", () => setMouseDown(false)); - removeEventListener("touchend", () => setMouseDown(false)); - }; - }, []); - - function handleMove(e: MouseEvent | TouchEvent) { - if (draggable && mouseDown && wrapperRef.current) { - e.preventDefault(); - const x = "clientX" in e ? e.clientX : e.touches[0].clientX; - const y = "clientY" in e ? e.clientY : e.touches[0].clientY; - setPosition({ - x: Math.min( - Math.max(0, position.x + x - mouseDownPosition.x), - innerWidth - wrapperRef.current.clientWidth - ), - y: Math.min( - Math.max(0, position.y + y - mouseDownPosition.y), - innerHeight - wrapperRef.current.clientHeight - ), - }); - setMouseDownPosition({ x, y }); - } - } - - useEffect(() => { - addEventListener("mousemove", handleMove); - addEventListener("touchmove", handleMove); - return () => { - removeEventListener("mousemove", handleMove); - removeEventListener("touchmove", handleMove); - }; - }, [handleMove]); - - useEffect(() => { - if (headerRef.current) { - headerRef.current.addEventListener("mousedown", (e) => { - setMouseDown(true); - setMouseDownPosition({ x: e.clientX, y: e.clientY }); - }); - headerRef.current.addEventListener("touchstart", (e) => { - setMouseDown(true); - setMouseDownPosition({ - x: e.touches[0].clientX, - y: e.touches[0].clientY, - }); - }); - } - return () => { - if (headerRef.current) { - headerRef.current.removeEventListener("mousedown", (e) => { - setMouseDown(true); - setMouseDownPosition({ x: e.clientX, y: e.clientY }); - }); - headerRef.current.removeEventListener("touchstart", (e) => { - setMouseDown(true); - setMouseDownPosition({ - x: e.touches[0].clientX, - y: e.touches[0].clientY, - }); - }); - } - }; - }, []); - return ( -
{children}
-
+ ); } diff --git a/client/src/components/SessionUsersPanel2.tsx b/client/src/components/SessionUsersPanel2.tsx index 0bfc8af..5c656bb 100644 --- a/client/src/components/SessionUsersPanel2.tsx +++ b/client/src/components/SessionUsersPanel2.tsx @@ -35,7 +35,7 @@ function SessionUsersPanel2() { diff --git a/client/src/components/popups/ParticipantsPopup.tsx b/client/src/components/popups/ParticipantsPopup.tsx index d6f007f..d8b8134 100644 --- a/client/src/components/popups/ParticipantsPopup.tsx +++ b/client/src/components/popups/ParticipantsPopup.tsx @@ -15,13 +15,9 @@ export default function ParticipantsPopup() { const participants = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; return ( - -
-
    + +
    +
      {participants.map((participant, index) => ( diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx index 7134009..231af3d 100644 --- a/client/src/pages/HomePage.tsx +++ b/client/src/pages/HomePage.tsx @@ -8,7 +8,6 @@ import SettingsModal from "../components/modals/SettingsModal"; import useModalStore from "../store/modalStore"; import CogFilledIcon from "../components/icons/CogFilledIcon"; // import SessionUsersPanel from "../components/SessionUsersPanel"; -import SharePopup from "../components/popups/SharePopup"; // import { useEffect } from "react"; // import useToastsStore from "../store/toastsStore"; import ChatPopup from "../components/popups/ChatPopup"; diff --git a/client/src/pages/NewSessionPage.tsx b/client/src/pages/NewSessionPage.tsx index 9c8223a..2a013fb 100644 --- a/client/src/pages/NewSessionPage.tsx +++ b/client/src/pages/NewSessionPage.tsx @@ -25,7 +25,7 @@ import LoaderIcon from "../components/icons/LoaderIcon"; import SessionUsersPanel from "../components/SessionUsersPanel2"; function NewSessionPage() { - const { setPopup, setPosition } = usePopupStore(); + const { setPopup } = usePopupStore(); const [isFullscreen, setIsFullscreen] = useState(false); @@ -75,6 +75,18 @@ function NewSessionPage() { const session = sessionData?.session; + function handleChatOpen() { + setPopup(); + } + + function handleParticipantsOpen() { + setPopup(); + } + + function handleShareOpen() { + setPopup(); + } + // Перенаправление на тестовую страницу при завершении сессии useEffect(() => { if (session?.status === "ended") { @@ -150,13 +162,7 @@ function NewSessionPage() { { - setPosition({ - x: ((1440 - 384) / 1440) * innerWidth, - y: (200 / 1440) * innerWidth, - }); - setPopup(); - }} + onClick={handleChatOpen} >
      @@ -164,13 +170,7 @@ function NewSessionPage() { { - setPosition({ - x: ((1440 - 384) / 1440) * innerWidth, - y: (234 / 800) * innerHeight, - }); - setPopup(); - }} + onClick={handleParticipantsOpen} >
      @@ -178,11 +178,7 @@ function NewSessionPage() { - setPopup( - - ) - } + onClick={handleShareOpen} >
      diff --git a/client/src/store/popupStore.ts b/client/src/store/popupStore.ts index 1f81a27..dac1de1 100644 --- a/client/src/store/popupStore.ts +++ b/client/src/store/popupStore.ts @@ -4,15 +4,15 @@ import type { ReactNode } from "react"; interface PopupState { popup: ReactNode | null; setPopup: (popup: ReactNode | null) => void; - position: { x: number; y: number }; - setPosition: (position: { x: number; y: number }) => void; + // position: { x: number; y: number }; + // setPosition: (position: { x: number; y: number }) => void; } const usePopupStore = create()((set) => ({ popup: null, - position: { x: 0, y: 0 }, - setPosition: (position) => set({ position }), setPopup: (popup) => set({ popup }), + // position: { x: 0, y: 0 }, + // setPosition: (position) => set({ position }), })); export default usePopupStore;