diff --git a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx index 3c68db6..4b22ad1 100644 --- a/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx +++ b/packages/desktop/src/tree/protected/terminal/line/LineRow.tsx @@ -45,10 +45,44 @@ export default React.memo(function LineRow({ // if (isUserToggleTuned) handleActivateLine(); handleActivateLine(); - }, [isUserToggleTuned, handleActivateLine]); + }, [handleActivateLine]); useKeyPressEvent((index + 1).toString(), hotkeyActivateLine); + const profilePictures = useMemo(() => { + const allMembers: 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); + + 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, + }; + }, [line, user]); + const renderRightActivity = useMemo(() => { if (isSelected) { return ( @@ -59,11 +93,10 @@ export default React.memo(function LineRow({ ); } - // TODO: get the profile pictures of the broadcasters - if (line.currentBroadcastersUserIds?.length > 0) + + if (profilePictures.broadcastMembers.length > 0) return ( - {line.otherUserObjects?.map((otherUser, index) => ( + {profilePictures.broadcastMembers.map((pictureSrc, index) => ( @@ -86,19 +119,14 @@ export default React.memo(function LineRow({ ); - // if there is someone or me broadcasting here - if (line.currentBroadcastersUserIds?.length > 0) + if (profilePictures.tunedMembers.length > 0) return ; - if (isUserTunedIn) return ; - // if there is new activity blocks for me if (line.currentUserMember.lastVisitDate) return ; - // if there is new activity/black dot, then show relative time as little bolder? or too much? - - // TODO: compare last visit date to latest audio block + // TODO: compare last visit date to latest content block if (line.currentUserMember) return ( @@ -111,20 +139,7 @@ export default React.memo(function LineRow({ {moment(line.currentUserMember.lastVisitDate).fromNow(true)} ); - }, [line, isSelected]); - - 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); - - line.otherUserObjects?.forEach((otherUser) => { - if (otherUser.picture) pictureSources.push(otherUser.picture); - }); - - return pictureSources; - }, [line, user]); + }, [line, isSelected, profilePictures]); // 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 @@ -140,7 +155,14 @@ export default React.memo(function LineRow({ {/* channel picture */} {profilePictures && ( - + 0 + ? profilePictures.tunedMembers + : profilePictures.allMembers + } + /> )}