diff --git a/packages/desktop/src/components/lines/lineRow.tsx/index.tsx b/packages/desktop/src/components/lines/lineRow.tsx/index.tsx index 3b5d1e6..b75298f 100644 --- a/packages/desktop/src/components/lines/lineRow.tsx/index.tsx +++ b/packages/desktop/src/components/lines/lineRow.tsx/index.tsx @@ -1,10 +1,9 @@ -import { $desktopMode, $selectedLineId } from "../../../controller/recoil"; import { useCallback, useMemo } from "react"; import { useRecoilState, useSetRecoilState } from "recoil"; +import { $selectedLineId } from "../../../controller/recoil"; import { Avatar } from "antd"; import { FiSun } from "react-icons/fi"; -import { ILineDetails } from "../../../pages/router/index"; import LineIcon from "../lineIcon"; import MasterLineData from "@nirvana/core/models/masterLineData.model"; import { useGetUserDetails } from "../../../controller/index"; @@ -20,13 +19,10 @@ export default function LineRow({ const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId); const { data: userData } = useGetUserDetails(); - const setDesktopMode = useSetRecoilState($desktopMode); - /** show user line details */ const handleSelectLine = useCallback(() => { setSelectedLineId(masterLineData.lineDetails._id.toString()); - setDesktopMode("terminalDetails"); - }, [setSelectedLineId, setDesktopMode, masterLineData]); + }, [setSelectedLineId, masterLineData]); /** * TODO: slowly add to this and fix based on added features diff --git a/packages/desktop/src/pages/lineDetailsTerminal/index.tsx b/packages/desktop/src/pages/lineDetailsTerminal/index.tsx index 3021b93..03b6151 100644 --- a/packages/desktop/src/pages/lineDetailsTerminal/index.tsx +++ b/packages/desktop/src/pages/lineDetailsTerminal/index.tsx @@ -1,34 +1,31 @@ import { ILineDetails } from "../router"; import LineIcon from "../../components/lines/lineIcon/index"; -export default function LineDetailsTerminal({ - selectedLine, -}: { - selectedLine: ILineDetails; -}) { +export default function LineDetailsTerminal() { return ( -
- {/* line overview header */} -
- + <> + //
+ // {/* line overview header */} + //
+ // - -

- {selectedLine.name} -

+ // + //

+ // {selectedLine.name} + //

- - {`${selectedLine.numberMembers} members`} - -
-
-
+ // + // {`${selectedLine.numberMembers} members`} + // + // + //
+ //
); } diff --git a/packages/desktop/src/pages/overlay/index.tsx b/packages/desktop/src/pages/overlay/index.tsx index c3e141a..1013735 100644 --- a/packages/desktop/src/pages/overlay/index.tsx +++ b/packages/desktop/src/pages/overlay/index.tsx @@ -66,9 +66,6 @@ export default function Overlay() { // initially, have these set to default useEffect(() => { - setNumActiveLines(1); - setMaxNumActiveStreams(1); - // POC: nirvana all connected users call // send signal to all peers through ws diff --git a/packages/desktop/src/pages/router/index.tsx b/packages/desktop/src/pages/router/index.tsx index 09636b0..c33757c 100644 --- a/packages/desktop/src/pages/router/index.tsx +++ b/packages/desktop/src/pages/router/index.tsx @@ -227,55 +227,32 @@ export default function NirvanaRouter() { const numberOfOverlayColumns = useRecoilValue($numberActiveLines); const numberOfOverlayRows = useRecoilValue($maxNumberActiveStreams); - // on window blur, put app in overlay only mode - useEffect(() => { - window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => { - console.log( - "window blurring now, should be always on top and then ill tell main process to change dimensions" - ); - // TODO: testing mode - // setDesktopMode("overlayOnly"); - }); - }, [setDesktopMode]); - // handle all window resizing logic useEffect(() => { - // always have overlay so need to calculate that - const overlayDimensions: Dimensions = { - height: 40 + numberOfOverlayRows * 200, - width: 360 * numberOfOverlayColumns, - }; - const setAlwaysOnTop = - desktopMode === "overlayOnly" || desktopMode === "flowState"; - // add dimensions if it's not overlay only mode let finalDimensions: Dimensions = { height: 0, width: 0 }; let finalPosition; + const setAlwaysOnTop = + desktopMode === "overlayOnly" || desktopMode === "flowState"; + + // go hunting for which dimensions to have if (desktopMode === "terminal") { - finalPosition = "center"; finalDimensions = { height: 675, width: 400 }; } - if (desktopMode === "terminalDetails") { - finalPosition = "center"; finalDimensions = { height: 675, width: 800 }; } - if (desktopMode === "flowState") { finalPosition = "topRight"; - finalDimensions = { height: 40, width: 360 }; + finalDimensions = { height: 68, width: 360 }; } - - // add overlay for all variants except flow state - if (desktopMode !== "flowState") - finalDimensions = { - width: finalDimensions.width + overlayDimensions.width, - height: Math.max(finalDimensions.height, overlayDimensions.height), - }; - if (desktopMode === "overlayOnly") { finalPosition = "topRight"; + finalDimensions = { + height: 68 + numberOfOverlayRows * 200, + width: 360 + 360 * numberOfOverlayColumns, + }; } console.log( @@ -283,7 +260,6 @@ export default function NirvanaRouter() { desktopMode, numberOfOverlayColumns, numberOfOverlayRows, - overlayDimensions, finalDimensions, setAlwaysOnTop ); @@ -300,21 +276,35 @@ export default function NirvanaRouter() { }); }, [desktopMode, numberOfOverlayColumns, numberOfOverlayRows]); + // on window blur, put app in overlay only mode + // get rid of selected line from terminal if we had any... + + useEffect(() => { + window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => { + console.log( + "window blurring now, should be always on top and then ill tell main process to change dimensions" + ); + // TODO: testing mode + setDesktopMode("overlayOnly"); + + // todo: make sure that if I am toggle broadcasted into a line, then don't deselect selected line + // the overlay should be showing selected line if I am broadcasting toggled into it as well as of course all other toggle tuned ones + setSelectedLineId(null); + }); + }, [setDesktopMode, setSelectedLineId]); + + // handling desktop mode switch on change of selected line + useEffect(() => { + if (selectedLineId && desktopMode === "terminal") { + console.log("selected line right now", selectedLineId); + setDesktopMode("terminalDetails"); + } + }, [selectedLineId, desktopMode, setDesktopMode]); + const handleToggleFlowState = useCallback(() => { setDesktopMode("flowState"); }, [setDesktopMode]); - const selectedLine = useMemo( - () => testLines.find((line) => line.lineId === selectedLineId), - [testLines, selectedLineId] - ); - - const overlayView = useMemo(() => { - if (desktopMode === "overlayOnly") return ; - - return <>; - }, [desktopMode]); - return (
setDesktopMode("terminal")} /> @@ -324,11 +314,9 @@ export default function NirvanaRouter() { )} - {desktopMode === "terminalDetails" && selectedLine && ( - - )} + {desktopMode === "terminalDetails" && } - {overlayView} + {desktopMode === "overlayOnly" && }
);