seatPositionStyle: setTogetherModeSeatPositionStyle()

in packages/react-components/src/components/TogetherModeOverlay.tsx [114:173]
51 lines of code
7 McCabe index (conditional complexity)

            seatPositionStyle: setTogetherModeSeatPositionStyle(seatingPosition)
          };
        }
      }

      // This is used to remove the participants bounding box from the DOM when they are no longer in the stream
      const participantsNotInTogetherModeStream = Object.keys(togetherModeParticipantStatus).filter(
        (id) => !updatedSignals[id]
      );

      const newSignals = { ...togetherModeParticipantStatus, ...updatedSignals };

      participantsNotInTogetherModeStream.forEach((id) => {
        delete newSignals[id];
      });

      const hasSignalingChange = Object.keys(newSignals).some(
        (key) => JSON.stringify(newSignals[key]) !== JSON.stringify(togetherModeParticipantStatus[key])
      );

      const updateTogetherModeParticipantStatusState =
        hasSignalingChange || Object.keys(newSignals).length !== Object.keys(togetherModeParticipantStatus).length;
      return updateTogetherModeParticipantStatusState ? newSignals : togetherModeParticipantStatus;
    }, [
      remoteParticipants,
      localParticipant,
      togetherModeParticipantStatus,
      togetherModeSeatPositions,
      reactionResources,
      locale.strings.videoGallery.displayNamePlaceholder,
      hoveredParticipantID
    ]);

    useEffect(() => {
      if (hoveredParticipantID && !updatedParticipantStatus[hoveredParticipantID]) {
        setHoveredParticipantID('');
      }

      setTogetherModeParticipantStatus(updatedParticipantStatus);
    }, [hoveredParticipantID, updatedParticipantStatus]);

    return (
      <div style={{ position: 'absolute', width: '100%', height: '100%', overflow: 'hidden' }}>
        {Object.values(togetherModeParticipantStatus).map(
          (participantStatus) =>
            participantStatus.id && (
              <div
                key={participantStatus.id}
                data-ui-id={`together-mode-participant-${participantStatus.id}`}
                style={{
                  ...getTogetherModeParticipantOverlayStyle(participantStatus.seatPositionStyle)
                }}
                onMouseEnter={() => setHoveredParticipantID(participantStatus.id)}
                onMouseLeave={() => setHoveredParticipantID('')}
              >
                <div>
                  {participantStatus.showDisplayName && (
                    <div style={{ ...participantStatusTransitionStyle }}>
                      <div
                        style={{