good progress on the tree although everything broken, more structure and really should just start fresh

2022-05-13 07:19:04 -05:00
parent fc9efed3e2
commit 5daeeb5e92
9 changed files with 1486 additions and 90 deletions
@@ -0,0 +1,387 @@
+import { Avatar, Skeleton, Tooltip } from 'antd';
+import React, { useCallback, useMemo, useState } from 'react';
+import useRealTimeRooms from '../../../providers/RealTimeRoomProvider';
+import useElectron from '../../../providers/ElectronProvider';
+import useAuth from '../../../providers/AuthProvider';
+import NavBar from './navbar/Navbar';
+import { FiActivity, FiHeadphones, FiSettings, FiSun } from 'react-icons/fi';
+import { LineMemberState } from '@nirvana/core/models/line.model';
+import MasterLineData from '@nirvana/core/models/masterLineData.model';
+import LineRow from './lines/lineRow.tsx';
+import useRooms from '../../../providers/RoomsProvider';
+import toast from 'react-hot-toast';
+import { FaPlus } from 'react-icons/fa';
+import LineIcon from './lines/lineIcon';
+
+export default function Terminal() {
+  const { rooms: initialRoomsState } = useRooms();
+  const { roomsMap } = useRealTimeRooms();
+  const { desktopMode } = useElectron();
+
+  const { user } = useAuth();
+
+  const [selectedLine, setSelectedLine] = useState<MasterLineData>();
+
+  const allLines: MasterLineData[] = useMemo(() => {
+    const masterLines: MasterLineData[] = Object.values(roomsMap);
+
+    // TODO: sort based on the audio blocks and currentMember lastActiveDate
+
+    return masterLines.filter(
+      (masterLine) => masterLine.currentUserMember.state === LineMemberState.INBOX,
+    );
+  }, [roomsMap]);
+
+  const toggleTunedLines = useMemo(() => {
+    const masterLines: MasterLineData[] = Object.values(roomsMap);
+
+    return masterLines.filter(
+      (masterLine) => masterLine.currentUserMember.state === LineMemberState.TUNED,
+    );
+  }, [roomsMap]);
+
+  /** show user line details on click of one line */
+  const handleSelectLine = useCallback(
+    (newLineIdToSelect: string) => {
+      toast('selecting line!! NOT IMPLEMENTED');
+    },
+    [setSelectedLine],
+  );
+
+  return (
+    <div className="flex flex-col flex-1">
+      <NavBar />
+
+      <div className="flex flex-row flex-1">
+        <div className="flex flex-col bg-white w-[400px] relative group">
+          {/* 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={() => {
+                    console.log('asdf');
+                  }}
+                />
+              ))}
+            </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'}>
+            {initialRoomsState.loading ? (
+              <Skeleton />
+            ) : (
+              allLines.map((masterLineData) => (
+                <LineRow
+                  key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
+                  masterLineData={masterLineData}
+                  handleSelectLine={handleSelectLine}
+                />
+              ))
+            )}
+          </div>
+
+          <div
+            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 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 ${user.givenName}!`}</span>
+            <span className="text-md text-gray-400">{"You're all set!"}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function LineDetailsTerminal({ selectedLine }: { selectedLine: MasterLineData }) {
+  const { user } = useAuth();
+
+  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(user._id.toString()),
+    [user, 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 === user._id.toString()) {
+        pictureSources.push();
+
+        pictureSources.push({
+          name: user.givenName,
+          pictureSrc: 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, user]);
+
+  // 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, user]);
+
+  // TODO get from realtime provider to do this action
+
+  const handleToggleTuneToLine = () => toast('NOT IMPLEMENTATED: toggle tuning');
+
+  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() : handleToggleTuneToLine()
+            }
+          >
+            <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
+              key={`yesterdayLineHistory-${otherUser._id}`}
+              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={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
+              key={`todayLineHistory-${otherUser._id}`}
+              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
+              key={`rightNowLineHistory-${otherUser._id}`}
+              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>
+  );
+}