From 265e2db307a219720802190636c0d56bed7e35ca Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 20 May 2022 07:57:39 -0500 Subject: [PATCH] more top down but not perfect and optimized --- packages/core/models/masterLineData.model.ts | 22 ++++-- .../src/providers/TerminalProvider.tsx | 49 +++++++++++- .../protected/terminal/line/LineDetails.tsx | 79 ++++++------------- .../tree/protected/terminal/line/LineRow.tsx | 71 +++-------------- 4 files changed, 101 insertions(+), 120 deletions(-) diff --git a/packages/core/models/masterLineData.model.ts b/packages/core/models/masterLineData.model.ts index 357d391..5f198be 100644 --- a/packages/core/models/masterLineData.model.ts +++ b/packages/core/models/masterLineData.model.ts @@ -1,8 +1,8 @@ -import { Line, LineMember } from "./line.model"; +import { Line, LineMember } from './line.model'; -import AudioClip from "./audioClip.model"; -import { ObjectId } from "mongodb"; -import { User } from "./user.model"; +import AudioClip from './audioClip.model'; +import { ObjectId } from 'mongodb'; +import { User } from './user.model'; // why do we have separate full objects being sent? // speed...I'm developing full stack and I just want all of the data and don't want to change this model @@ -24,6 +24,18 @@ export default class MasterLineData { // -> all connected line members be able to show this in the right activity section of the lineRow currentBroadcastersUserIds?: string[]; + profilePictures: { + allMembers: string[]; + allMembersWithoutMe: string[]; + + untunedMembers: string[]; + + tunedMembers: string[]; + broadcastMembers: string[]; + }; + isUserTunedIn: boolean = false; + isUserToggleTuned: boolean = false; + constructor( // full line object public lineDetails: Line, @@ -34,6 +46,6 @@ export default class MasterLineData { // all other members in the convo as well as their user object to see the member details public otherMembers?: LineMember[], - public otherUserObjects?: User[] /**public audioClips: AudioClip[] = [], // public media: Media[] */ + public otherUserObjects?: User[] /**public audioClips: AudioClip[] = [], // public media: Media[] */, ) {} } diff --git a/packages/desktop/src/providers/TerminalProvider.tsx b/packages/desktop/src/providers/TerminalProvider.tsx index 9efe4ea..c846299 100644 --- a/packages/desktop/src/providers/TerminalProvider.tsx +++ b/packages/desktop/src/providers/TerminalProvider.tsx @@ -54,6 +54,7 @@ type BroadcastersMap = { interface ITerminalProvider { roomsMap: LineIdToMasterLine; + allChannels: MasterLineData[]; selectedLineId?: string; @@ -363,7 +364,9 @@ export function TerminalProvider({ children }: { children: React.ReactChild }) { // todo: sort based on content blocks and my last activity date const allChannels = useMemo(() => { - let channels = Object.values(roomMap); + let channels: MasterLineData[] = Object.values(roomMap); + + channels = channels.map((currChann) => Object.assign({}, currChann, MasterLineData)); if (desktopMode === 'overlayOnly') { channels = channels.filter((currentChannel) => @@ -391,6 +394,49 @@ export function TerminalProvider({ children }: { children: React.ReactChild }) { return -1; }); + channels.forEach((currChannel) => { + currChannel.isUserTunedIn = currChannel.tunedInMemberIds?.includes(user._id.toString()) + ? true + : false; + + currChannel.isUserToggleTuned = currChannel.currentUserMember.state === LineMemberState.TUNED; + + const allMembers: string[] = []; + const allMembersWithoutMe: string[] = []; + const tunedMembers: string[] = []; + const broadcastMembers: string[] = []; + const untunedMembers: string[] = []; + + // ?don't add in my image as that's useless contextually? + if (user.picture) allMembers.push(user.picture); + + currChannel.otherUserObjects?.forEach((otherUser) => { + if (otherUser.picture) { + allMembers.push(otherUser.picture); + allMembersWithoutMe.push(otherUser.picture); + + if (currChannel.tunedInMemberIds?.includes(otherUser._id.toString())) { + tunedMembers.push(otherUser.picture); + return; + } + if (currChannel.currentBroadcastersUserIds?.includes(otherUser._id.toString())) { + broadcastMembers.push(otherUser.picture); + return; + } + + untunedMembers.push(otherUser.picture); + } + }); + + currChannel.profilePictures = { + untunedMembers, + allMembers, + tunedMembers, + broadcastMembers, + allMembersWithoutMe, + }; + }); + return channels; }, [roomMap, desktopMode, user]); @@ -402,6 +448,7 @@ export function TerminalProvider({ children }: { children: React.ReactChild }) { [allChannels], ); + // !Caution: the roommap won't have the additional properties as allChannels does return ( roomsMap[selectedLineId], [selectedLineId, roomsMap]); + const selectedLine = useMemo( + () => + allChannels.find((currChannel) => currChannel.lineDetails._id.toString() === selectedLineId), + [selectedLineId, allChannels], + ); const isUserToggleTuned = useMemo( () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED, @@ -35,56 +39,11 @@ export default function LineDetails() { const { peerMap } = useStreams(); - // 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({ - 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]); - return (
{/* line details */} @@ -92,7 +51,17 @@ export default function LineDetails() { className="p-5 z-30 titlebar flex flex-row items-center justify-end border-b-gray-200 border-b shadow-2xl group" > - {profilePictures && } + {/* channel picture */} + {selectedLine.profilePictures && ( + 0 + ? selectedLine.profilePictures.tunedMembers + : selectedLine.profilePictures.allMembersWithoutMe + } + /> + )}
@@ -110,10 +79,10 @@ export default function LineDetails() {
- {tunedProfiles.map((otherUser) => ( + {selectedLine.profilePictures?.tunedMembers?.map((pictureSrc, index) => ( | - {selectedLine.otherUserObjects.map((otherUser) => ( + {selectedLine.profilePictures.untunedMembers.map((pictureSrc, index) => ( ))} diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx index 7b8300e..fac405f 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx @@ -25,16 +25,6 @@ export default React.memo(function LineRow({ const { user } = useAuth(); const { desktopMode, isWindowFocused } = useElectron(); - const isUserTunedIn = useMemo( - () => line.tunedInMemberIds?.includes(user._id.toString()), - [line.tunedInMemberIds, user], - ); - - const isUserToggleTuned = useMemo( - () => line?.currentUserMember?.state === LineMemberState.TUNED, - [line], - ); - const handleActivateLine = useCallback(() => { handleSelectLine(line.lineDetails._id.toString()); }, [handleSelectLine, line.lineDetails, index]); @@ -49,43 +39,6 @@ export default React.memo(function LineRow({ useKeyPressEvent((index + 1).toString(), hotkeyActivateLine); - const profilePictures = useMemo(() => { - const allMembers: string[] = []; - const allMembersWithoutMe: string[] = []; - const tunedMembers: string[] = []; - const broadcastMembers: string[] = []; - const untunedMembers: string[] = []; - - // ?don't add in my image as that's useless contextually? - if (user.picture) allMembers.push(user.picture); - - line.otherUserObjects?.forEach((otherUser) => { - if (otherUser.picture) { - allMembers.push(otherUser.picture); - allMembersWithoutMe.push(otherUser.picture); - - if (line.tunedInMemberIds?.includes(otherUser._id.toString())) { - tunedMembers.push(otherUser.picture); - return; - } - if (line.currentBroadcastersUserIds?.includes(otherUser._id.toString())) { - broadcastMembers.push(otherUser.picture); - return; - } - - untunedMembers.push(otherUser.picture); - } - }); - - return { - untunedMembers, - allMembers, - tunedMembers, - broadcastMembers, - allMembersWithoutMe, - }; - }, [line, user]); - const renderRightActivity = useMemo(() => { if (isSelected) { return ( @@ -97,7 +50,7 @@ export default React.memo(function LineRow({ ); } - if (profilePictures.broadcastMembers.length > 0) + if (line.profilePictures.broadcastMembers.length > 0) return ( - {profilePictures.broadcastMembers.map((pictureSrc, index) => ( + {line.profilePictures.broadcastMembers.map((pictureSrc, index) => ( ); - if (profilePictures.tunedMembers.length > 0) + if (line.profilePictures.tunedMembers.length > 0) return ; // if there is new activity blocks for me @@ -142,7 +95,7 @@ export default React.memo(function LineRow({ {moment(line.currentUserMember.lastVisitDate).fromNow(true)} ); - }, [line, isSelected, profilePictures]); + }, [line, isSelected]); // TODO: low priority: scale the whole thing and make it pop out nad translate... // doesn't work right now because no workaround for overflow scroll for y and visible for x @@ -153,19 +106,19 @@ export default React.memo(function LineRow({ className={`flex flex-row items-center justify-start gap-2 px-4 py-4 hover:bg-gray-200 cursor-pointer transition-all relative z-50 - ${isUserToggleTuned && ' bg-gray-100'} + ${line.isUserToggleTuned && ' bg-gray-100'} - ${isUserTunedIn && isSelected && ' bg-gray-100 shadow-2xl'}`} + ${line.isUserTunedIn && isSelected && ' bg-gray-100 shadow-2xl'}`} > {/* channel picture */} - {profilePictures && ( + {line.profilePictures && ( 0 - ? profilePictures.tunedMembers - : profilePictures.allMembersWithoutMe + line.profilePictures.tunedMembers.length > 0 + ? line.profilePictures.tunedMembers + : line.profilePictures.allMembersWithoutMe } /> @@ -180,7 +133,7 @@ export default React.memo(function LineRow({ {line.lineDetails.name || line.otherUserObjects[0].givenName} - {isUserToggleTuned && isWindowFocused && ( + {line.isUserToggleTuned && isWindowFocused && ( {`${index + 1}`} )}