talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

having new flow with windows taking out the redundancy

Browse Source
This commit is contained in:
talksik
2022-05-05 11:09:06 -05:00
parent c08697efb2
commit 7c8a9f1171
4 changed files with 61 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/components/lines/lineRow.tsx/index.tsx
+2 -6
View File
@@ -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
packages/desktop/src/pages/lineDetailsTerminal/index.tsx
+23 -26
View File
@@ -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 (
<div
id={`${selectedLine.lineId}-lineDetailsTerminal`}
className="flex flex-col bg-gray-100 w-[400px]"
>
{/* line overview header */}
<div className="flex flex-row p-3 items-center gap-1">
<LineIcon sourceImages={selectedLine.profilePictures} />
<></>
// <div
// id={`${selectedLine.lineId}-lineDetailsTerminal`}
// className="flex flex-col bg-gray-100 w-[400px]"
// >
// {/* line overview header */}
// <div className="flex flex-row p-3 items-center gap-1">
// <LineIcon sourceImages={selectedLine.profilePictures} />
<span className="flex flex-col items-start gap-1">
<h2
className={`text-inherit text-md truncate ${
selectedLine.hasNewActivity ? "font-semibold" : ""
}`}
>
{selectedLine.name}
</h2>
// <span className="flex flex-col items-start gap-1">
// <h2
// className={`text-inherit text-md truncate ${
// selectedLine.hasNewActivity ? "font-semibold" : ""
// }`}
// >
// {selectedLine.name}
// </h2>
<span className="text-xs text-gray-300">
{`${selectedLine.numberMembers} members`}
</span>
</span>
</div>
</div>
// <span className="text-xs text-gray-300">
// {`${selectedLine.numberMembers} members`}
// </span>
// </span>
// </div>
// </div>
);
}
packages/desktop/src/pages/overlay/index.tsx
-3
View File
@@ -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
packages/desktop/src/pages/router/index.tsx
+36 -48
View File
@@ -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 <Overlay />;
return <></>;
}, [desktopMode]);
return (
<div className="flex flex-col h-screen">
<NirvanaHeader onHeaderFocus={() => setDesktopMode("terminal")} />
@@ -324,11 +314,9 @@ export default function NirvanaRouter() {
<NirvanaTerminal allLines={testLines} />
)}
{desktopMode === "terminalDetails" && selectedLine && (
<LineDetailsTerminal selectedLine={selectedLine} />
)}
{desktopMode === "terminalDetails" && <LineDetailsTerminal />}
{overlayView}
{desktopMode === "overlayOnly" && <Overlay />}
</div>
</div>
);