514 lines
18 KiB
TypeScript
514 lines
18 KiB
TypeScript
import { $desktopMode, $selectedLineId } from '../../controller/recoil';
|
|
import { Avatar, Skeleton, Tooltip } from 'antd';
|
|
import { FiActivity, FiHeadphones, FiSettings, FiSun } from 'react-icons/fi';
|
|
import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
|
|
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { useGetUserDetails, useUserLines } from '../../controller/index';
|
|
import { useRecoilState, useSetRecoilState } from 'recoil';
|
|
|
|
import { FaPlus } from 'react-icons/fa';
|
|
import LineIcon from '../../components/lines/lineIcon/index';
|
|
import { LineMemberState } from '@nirvana/core/models/line.model';
|
|
import LineRow from '../../components/lines/lineRow.tsx/index';
|
|
import MasterLineData from '@nirvana/core/models/masterLineData.model';
|
|
import NewLineModal from './newLine';
|
|
import toast from 'react-hot-toast';
|
|
import { useLineDataProvider } from '../../controller/lineDataProvider';
|
|
|
|
/**
|
|
* Socket Provider
|
|
* Line Data Provider
|
|
*/
|
|
export default function NirvanaTerminal({ overlayOnly }: { overlayOnly: boolean }) {
|
|
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
|
|
|
|
const { data: userDetails } = useGetUserDetails();
|
|
const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
|
|
const [desktopMode, setDesktopMode] = useRecoilState($desktopMode);
|
|
|
|
// simply using this query for specific data on loading
|
|
// todo: add these properties in context provider value although more work down the line for control
|
|
const { isLoading: isLoadingInitialLines } = useUserLines();
|
|
const { linesMap, handleTuneToLine, handleUnTuneToLine } = useLineDataProvider();
|
|
|
|
useEffect(() => {
|
|
// console.log("change/update in lines map");
|
|
// console.log(linesMap);
|
|
}, [linesMap]);
|
|
|
|
// ! remounting when toggle tuning and untoggle tuning a line
|
|
// because it changes the list that it's in...solution 1: put everything in one list and use one sort to handle toggle tuned items to be clean
|
|
// the change in the object or the property which is specifically currentUserMember of the masterLineData sent in to line row
|
|
// causes a re-render but not a unmount and remount
|
|
|
|
const allLines: MasterLineData[] = useMemo(() => {
|
|
const masterLines: MasterLineData[] = Object.values(linesMap);
|
|
|
|
// TODO: sort based on the audio blocks and currentMember lastActiveDate
|
|
|
|
return masterLines.filter(
|
|
(masterLine) => masterLine.currentUserMember.state === LineMemberState.INBOX,
|
|
);
|
|
}, [linesMap]);
|
|
|
|
const toggleTunedLines = useMemo(() => {
|
|
const masterLines: MasterLineData[] = Object.values(linesMap);
|
|
|
|
return masterLines.filter(
|
|
(masterLine) => masterLine.currentUserMember.state === LineMemberState.TUNED,
|
|
);
|
|
}, [linesMap]);
|
|
|
|
const selectedLine: MasterLineData | undefined = useMemo(() => {
|
|
if (!selectedLineId) return undefined;
|
|
|
|
// find the line from the data provider
|
|
if (linesMap[selectedLineId]) {
|
|
// console.log("looking for selected Line in map for details section");
|
|
|
|
const foundSelectedLine = linesMap[selectedLineId];
|
|
|
|
// on mount of this, we want to temporarily tune into the line if we are not already tuned in...which would happen if we toggle tuned in
|
|
if (!foundSelectedLine.tunedInMemberIds?.includes(userDetails?.user?._id.toString())) {
|
|
handleTuneToLine(selectedLineId, false);
|
|
}
|
|
|
|
return { ...foundSelectedLine };
|
|
}
|
|
|
|
return undefined;
|
|
}, [selectedLineId, linesMap, userDetails]);
|
|
|
|
// todo: sort/order based on activity and activity date and currently broadcasting/live
|
|
|
|
const handleEscape = useCallback(() => {
|
|
console.log('deselecting line');
|
|
|
|
setSelectedLineId((prevSelectedLineId) => {
|
|
// ! only want to untune if it's a temporarily tuned line
|
|
if (selectedLine?.currentUserMember?.state === LineMemberState.INBOX)
|
|
handleUnTuneToLine(prevSelectedLineId);
|
|
|
|
return null;
|
|
});
|
|
}, [setSelectedLineId, selectedLine]);
|
|
|
|
/** show user line details on click of one line */
|
|
const handleSelectLine = useCallback(
|
|
(newLineIdToSelect: string) => {
|
|
if (newLineIdToSelect !== selectedLine?.lineDetails._id.toString()) {
|
|
setSelectedLineId((prevSelectedLineId) => {
|
|
// untune myself from the previously selected if it was a temporary one/inbox
|
|
// todo: p3: consolidate this logic as it's used in escape but different scenarios sort of so p3
|
|
if (prevSelectedLineId && selectedLine.currentUserMember?.state === LineMemberState.INBOX)
|
|
handleUnTuneToLine(prevSelectedLineId);
|
|
|
|
return newLineIdToSelect;
|
|
});
|
|
}
|
|
},
|
|
[setSelectedLineId, selectedLine],
|
|
);
|
|
|
|
const handleToggleTuneToLine = useCallback(
|
|
(lineId: string, turnToggleOn: boolean) => {
|
|
// inhibit if they are trying to turn on and already have 3 toggle tuned
|
|
if (toggleTunedLines?.length >= 3 && turnToggleOn) {
|
|
toast.error('You cannot toggle more than 3 lines!');
|
|
|
|
return;
|
|
}
|
|
|
|
handleTuneToLine(lineId, turnToggleOn);
|
|
},
|
|
[toggleTunedLines, handleTuneToLine],
|
|
);
|
|
|
|
const handleStartBroadcast = useCallback(
|
|
(lineId: string) => () => {
|
|
console.log(`starting broadcast for ${lineId}!!!`);
|
|
|
|
// todo: enable stream in this tuned in channel
|
|
|
|
// if (lineId) handleUserBroadcast(lineId, true);
|
|
},
|
|
[],
|
|
);
|
|
|
|
const handleStopBroadcast = useCallback(
|
|
(lineId: string) => () => {
|
|
console.log(`stopping broadcast for ${lineId}!!!`);
|
|
|
|
// todo: disable stream in this tuned in channel
|
|
|
|
// if (lineId) handleUserBroadcast(lineId, false);
|
|
},
|
|
[],
|
|
);
|
|
|
|
const keyMap: KeyMap = useMemo(
|
|
() => ({
|
|
DESELECT_LINE: 'esc',
|
|
START_BROADCAST: {
|
|
sequence: '`',
|
|
action: 'keydown',
|
|
},
|
|
STOP_BROADCAST: {
|
|
sequence: '`',
|
|
action: 'keyup',
|
|
},
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const handlers = useMemo(
|
|
() => ({
|
|
DESELECT_LINE: handleEscape,
|
|
START_BROADCAST: handleStartBroadcast(selectedLineId),
|
|
STOP_BROADCAST: handleStopBroadcast(selectedLineId),
|
|
}),
|
|
[selectedLineId],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
|
|
|
|
<div className="flex flex-row flex-1">
|
|
<div className="flex flex-col bg-white w-[400px] relative group">
|
|
{/* modal for creating new line */}
|
|
<NewLineModal open={isModalVisible} handleClose={() => setIsModalVisible(false)} />
|
|
|
|
{/* tuned in lines block */}
|
|
<div className="bg-gray-100 flex flex-col shadow-lg">
|
|
{/* tuned in header + general controls */}
|
|
|
|
<Tooltip placement="right" title={'These are your active rooms...'}>
|
|
<div className="flex flex-row items-center py-3 px-4 pb-0">
|
|
<span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
|
|
<FiActivity className="text-sm" />
|
|
|
|
<h2 className="text-inherit text-sm">Rooms</h2>
|
|
|
|
<p className="text-slate-300 text-xs">{`${toggleTunedLines?.length || 0}/3`}</p>
|
|
</span>
|
|
</div>
|
|
</Tooltip>
|
|
|
|
{/* list of toggle tuned lines */}
|
|
<div className="flex flex-col mt-2">
|
|
{toggleTunedLines.map((masterLineData) => (
|
|
<LineRow
|
|
key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
|
|
masterLineData={masterLineData}
|
|
handleSelectLine={handleSelectLine}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{!(allLines.length > 0) && !(toggleTunedLines.length > 0) && (
|
|
<span className="text-gray-300 text-sm my-5 text-center">
|
|
You have no lines! <br /> Create one to connect to your team instantly.
|
|
</span>
|
|
)}
|
|
|
|
{/* rest of the lines */}
|
|
<div className={'flex flex-col'}>
|
|
{isLoadingInitialLines ? (
|
|
<Skeleton />
|
|
) : (
|
|
allLines.map((masterLineData) => (
|
|
<LineRow
|
|
key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
|
|
masterLineData={masterLineData}
|
|
handleSelectLine={handleSelectLine}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setIsModalVisible(true)}
|
|
className="absolute bottom-3 right-3 z-10 scale-0
|
|
group-hover:scale-100 ease-in-out hover:transition group-hover:transition delay-100 duration-200"
|
|
>
|
|
<button
|
|
className="flex flex-row gap-2 items-center justify-evenly
|
|
shadow-xl bg-gray-800 p-2 text-white text-xs"
|
|
>
|
|
<FaPlus />
|
|
<span>New line</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedLine ? (
|
|
<LineDetailsTerminal
|
|
handleToggleTuneToLine={handleToggleTuneToLine}
|
|
selectedLine={selectedLine}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex flex-col flex-1 justify-center items-center bg-gray-100
|
|
border-l border-l-gray-200"
|
|
>
|
|
<span className="text-xl text-gray-800">{`Hi ${userDetails?.user?.givenName}!`}</span>
|
|
<span className="text-md text-gray-400">You're all set!</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function LineDetailsTerminal({
|
|
selectedLine,
|
|
handleToggleTuneToLine,
|
|
}: {
|
|
selectedLine: MasterLineData;
|
|
handleToggleTuneToLine: (lineId: string, turnToggleOn: boolean) => void;
|
|
}) {
|
|
const { data: userDetails } = useGetUserDetails();
|
|
|
|
console.log('selected line', selectedLine);
|
|
|
|
const isUserToggleTuned = useMemo(
|
|
() => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
|
|
[selectedLine],
|
|
);
|
|
|
|
// seeing if I am in the list of broadcasters
|
|
// the source of truth from the socket connections telling me if my clicking actually made a round trip
|
|
const isUserBroadcasting = useMemo(
|
|
() => selectedLine?.currentBroadcastersUserIds?.includes(userDetails?.user._id.toString()),
|
|
[userDetails, selectedLine],
|
|
);
|
|
|
|
// showing all tuned in members...they may not hear me since they might be doing something else
|
|
// but feeling of presentness
|
|
const tunedProfiles = useMemo(() => {
|
|
const pictureSources: { name: string; pictureSrc: string }[] = [];
|
|
|
|
selectedLine.tunedInMemberIds?.forEach((tunedInMemberUserId) => {
|
|
// don't want to see my own picture
|
|
// TODO: don't show myself!?
|
|
if (tunedInMemberUserId === userDetails.user._id.toString()) {
|
|
pictureSources.push();
|
|
|
|
pictureSources.push({
|
|
name: userDetails.user?.givenName,
|
|
pictureSrc: userDetails.user?.picture,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const otherUserObject = selectedLine.otherUserObjects?.find(
|
|
(userObj) => userObj._id.toString() === tunedInMemberUserId,
|
|
);
|
|
if (otherUserObject?.picture)
|
|
pictureSources.push({
|
|
name: otherUserObject.givenName,
|
|
pictureSrc: otherUserObject.picture,
|
|
});
|
|
});
|
|
|
|
return pictureSources;
|
|
}, [selectedLine, userDetails]);
|
|
|
|
// pics for the line icons
|
|
const profilePictures = useMemo(() => {
|
|
const pictureSources: string[] = [];
|
|
|
|
// ?don't add in my image as that's useless contextually?
|
|
// if (userData?.user?.picture) pictureSources.push(userData.user.picture);
|
|
|
|
selectedLine.otherUserObjects?.forEach((otherUser) => {
|
|
if (otherUser.picture) pictureSources.push(otherUser.picture);
|
|
});
|
|
|
|
return pictureSources;
|
|
}, [selectedLine, userDetails]);
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col flex-1 bg-gray-100
|
|
border-l border-l-gray-200 relative"
|
|
>
|
|
{/* line details */}
|
|
<div
|
|
className="p-4
|
|
flex flex-row items-center gap-2 justify-end border-b-gray-200 border-b"
|
|
>
|
|
{profilePictures && <LineIcon grayscale={false} sourceImages={profilePictures} />}
|
|
|
|
<div className="flex flex-col items-start mr-auto group">
|
|
<span className="flex flex-row gap-2 items-center">
|
|
<h2 className={`text-lg text-slate-800 font-semibold`}>
|
|
{selectedLine.lineDetails.name || selectedLine.otherUserObjects[0].givenName}
|
|
</h2>
|
|
|
|
<button
|
|
className={`p-1 hidden group-hover:flex justify-center items-center hover:bg-gray-300
|
|
transition-all hover:scale-105`}
|
|
>
|
|
<FiSettings className="text-gray-400 text-xs" />
|
|
</button>
|
|
</span>
|
|
|
|
<span className="flex flex-row gap-2 items-center">
|
|
<span className="text-gray-300 text-xs">{`${
|
|
selectedLine.otherMembers?.length + 1 ?? 0
|
|
} members`}</span>
|
|
<span className="h-1 w-1 bg-gray-800 rounded-full"></span>
|
|
<span className="text-teal-500 text-xs">{`${
|
|
selectedLine.tunedInMemberIds?.length ?? 0
|
|
} in this room`}</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* TODO: move to on hover of line row */}
|
|
<Tooltip
|
|
placement="left"
|
|
title={`${isUserToggleTuned ? 'click to untoggle' : 'click to stay tuned in'}`}
|
|
>
|
|
<button
|
|
className={`p-2 flex justify-center items-center shadow-lg
|
|
hover:scale-105 transition-all animate-pulse ${
|
|
isUserToggleTuned ? 'bg-gray-800 text-white' : 'text-black'
|
|
}`}
|
|
onClick={() =>
|
|
isUserToggleTuned
|
|
? handleToggleTuneToLine(selectedLine.lineDetails._id.toString(), false)
|
|
: handleToggleTuneToLine(selectedLine.lineDetails._id.toString(), true)
|
|
}
|
|
>
|
|
<FiActivity className="text-md" />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
{/* line timeline */}
|
|
<div className="flex flex-col items-center gap-2 my-2 mx-auto max-w-lg w-full">
|
|
<span className={'text-gray-300 text-sm cursor-pointer hover:underline'}>load more</span>
|
|
|
|
<span className={'text-gray-300 text-sm'}>yesterday</span>
|
|
|
|
<div className={'rounded border border-gray-200 flex flex-col w-full'}>
|
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
<div
|
|
className="flex flex-row p-2 gap-2 items-center bg-transparent
|
|
border-b border-b-gray-200 last:border-b-0"
|
|
>
|
|
<Avatar
|
|
key={`linehistory-${1}`}
|
|
src={otherUser.picture}
|
|
shape="square"
|
|
size={'default'}
|
|
// grayscale if not playing?
|
|
className={`${true && 'grayscale'}`}
|
|
/>
|
|
<span className="text-gray-500">{otherUser.givenName}</span>
|
|
|
|
<span className="ml-auto text-xs text-gray-300">{`${
|
|
Math.floor(Math.random() * 10) + 1
|
|
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
|
|
|
<span className="text-gray-400 text-md">{`${
|
|
Math.floor(Math.random() * 60) + 1
|
|
} seconds`}</span>
|
|
</div>
|
|
))}
|
|
|
|
<div
|
|
className="flex flex-row p-2 gap-2 items-center bg-transparent
|
|
border-b border-b-gray-200 last:border-b-0"
|
|
>
|
|
<Avatar
|
|
key={`linehistory-${1}`}
|
|
src={userDetails.user.picture}
|
|
shape="square"
|
|
size={'default'}
|
|
// grayscale if not playing?
|
|
className={`${true && 'grayscale'}`}
|
|
/>
|
|
<span className="text-gray-500">{'Arjun Patel'}</span>
|
|
|
|
<span className="ml-auto text-xs text-gray-300">{`${
|
|
Math.floor(Math.random() * 10) + 1
|
|
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
|
|
|
<span className="text-gray-400 text-md">{`${
|
|
Math.floor(Math.random() * 60) + 1
|
|
} seconds`}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<span className={'text-gray-300 text-sm'}>today</span>
|
|
|
|
<div className={'rounded border border-gray-400 flex flex-col w-full shadow-xl'}>
|
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
// TODO: show the shadow if it's unheard
|
|
<div
|
|
className="flex flex-row p-2 gap-2 items-center bg-transparent
|
|
border-b border-b-gray-400 last:border-b-0"
|
|
>
|
|
<Avatar
|
|
key={`linehistory-${1}`}
|
|
src={otherUser.picture}
|
|
shape="square"
|
|
size={'default'}
|
|
// grayscale if not playing?
|
|
className={`${false && 'grayscale'}`}
|
|
/>
|
|
<span className="text-gray-600 font-semibold">{otherUser.name}</span>
|
|
|
|
<span className="ml-auto text-xs text-gray-400">{`${
|
|
Math.floor(Math.random() * 10) + 1
|
|
}:${Math.floor(Math.random() * 100) + 10}pm |`}</span>
|
|
|
|
<span className="text-gray-500 text-md">{`${
|
|
Math.floor(Math.random() * 60) + 1
|
|
} seconds`}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* live broadcasters */}
|
|
<span className={'flex flex-row gap-2 items-center text-teal-500 text-sm'}>
|
|
<FiSun className="animate-ping" />
|
|
<span>right now</span>
|
|
</span>
|
|
<div className={'rounded border border-teal-500 flex flex-col w-full shadow-2xl'}>
|
|
{selectedLine.otherUserObjects.map((otherUser) => (
|
|
<div className="flex flex-row p-2 gap-2 items-center bg-transparent">
|
|
<Avatar
|
|
key={`linehistory-${1}`}
|
|
src={otherUser.picture}
|
|
shape="square"
|
|
size={'large'}
|
|
// grayscale if not playing?
|
|
className={`shadow-lg`}
|
|
/>
|
|
<span className="text-gray-600 font-semibold">{otherUser.name}</span>
|
|
|
|
<Tooltip title={'audio only'}>
|
|
<FiHeadphones className="text-gray-600 text-md ml-auto" />
|
|
</Tooltip>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
className={`p-3 absolute right-3 bottom-3 flex justify-center items-center shadow-2xl
|
|
hover:scale-105 transition-all ${
|
|
isUserBroadcasting ? 'bg-teal-800 text-white' : 'text-teal-800 border-teal-800 border'
|
|
}`}
|
|
>
|
|
<FiSun className="text-lg" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|