Remove forced gameday player expansion

frontend/src/pages/GamedayPage.tsx

@@ -55,13 +55,10 @@ export function GamedayPage() {
   const walkup = useWalkupContext();
   const [searchParams, setSearchParams] = useSearchParams();
   const [selectedGameId, setSelectedGameId] = useState(searchParams.get("gameId") ?? "");
-  const [selectedPlayerId, setSelectedPlayerId] = useState("");
   const [expandedPlayerId, setExpandedPlayerId] = useState("");
   const [playerFilter, setPlayerFilter] = useState<"players" | "nonPlayers" | "all">("players");
   const [playerFilterMenuOpen, setPlayerFilterMenuOpen] = useState(false);
-  const selectedPlayerWasManualRef = useRef(false);
   const playerFilterMenuRef = useRef<HTMLDivElement | null>(null);
-  const hasInitializedExpandedPlayerRef = useRef(false);
   const teamId = walkup.selectedTeamId;
   const {
     activeKey: playingClipKey,
@@ -86,13 +83,8 @@ export function GamedayPage() {
   useEffect(() => {
     stopClip();
     setExpandedPlayerId("");
-    hasInitializedExpandedPlayerRef.current = false;
   }, [selectedGameId, stopClip]);
 
-  useEffect(() => {
-    stopClip();
-  }, [selectedPlayerId, stopClip]);
-
   useEffect(() => {
     if (!playerFilterMenuOpen) {
       return;
@@ -155,64 +147,10 @@ export function GamedayPage() {
       ? orderedMembers
       : orderedMembers.filter((member) => (playerFilter === "players" ? isPlayerMember(member) : !isPlayerMember(member)));
 
-  useEffect(() => {
-    if (!selectedGameId || !visibleMembers.length) {
-      return;
-    }
-    if (!selectedPlayerId || !selectedPlayerWasManualRef.current) {
-      setSelectedPlayerId(String(visibleMembers[0].id));
-    }
-  }, [selectedGameId, selectedPlayerId, visibleMembers]);
-
-  useEffect(() => {
-    if (!visibleMembers.length) {
-      setExpandedPlayerId("");
-      hasInitializedExpandedPlayerRef.current = false;
-      return;
-    }
-
-    const expandedStillVisible = visibleMembers.some((member) => String(member.id) === expandedPlayerId);
-    if (!hasInitializedExpandedPlayerRef.current) {
-      setExpandedPlayerId(String(visibleMembers[0].id));
-      hasInitializedExpandedPlayerRef.current = true;
-      return;
-    }
-
-    if (expandedPlayerId && !expandedStillVisible) {
-      setExpandedPlayerId(String(visibleMembers[0].id));
-    }
-  }, [expandedPlayerId, visibleMembers]);
-
-  useEffect(() => {
-    if (!selectedPlayerId) {
-      return;
-    }
-    const selectedIsVisible = visibleMembers.some((member) => String(member.id) === selectedPlayerId);
-    if (!selectedIsVisible) {
-      selectedPlayerWasManualRef.current = false;
-      setSelectedPlayerId(visibleMembers[0] ? String(visibleMembers[0].id) : "");
-    }
-  }, [selectedPlayerId, visibleMembers]);
-
-  const selectedPlayer =
-    walkup.members.find((member) => String(member.id) === selectedPlayerId) ??
-    (selectedPlayerId ? { id: selectedPlayerId } : null);
-
-  const selectedPinnedAssignments = useMemo(
-    () => assignmentList.filter((assignment) => assignment.external_player_id === selectedPlayerId),
-    [assignmentList, selectedPlayerId],
-  );
-  const selectedPinnedAssignmentByClipId = useMemo(
-    () => new Map(selectedPinnedAssignments.map((assignment) => [String(assignment.clip_id), assignment])),
-    [selectedPinnedAssignments],
-  );
-
   const selectedGame = walkup.games.find((game) => String(game.id) === selectedGameId) ?? null;
 
   function selectGame(gameId: string) {
-    selectedPlayerWasManualRef.current = false;
     setSelectedGameId(gameId);
-    setSelectedPlayerId("");
     setExpandedPlayerId("");
     stopClip();
     setSearchParams({ gameId });
@@ -222,17 +160,6 @@ export function GamedayPage() {
     fadeOutClip(durationMs);
   }
 
-  async function playClip(clip: AudioClip) {
-    await playClipPreview({
-      key: clipKey("library", clip.id),
-      url: clip.normalized_url,
-      startMs: clip.start_ms,
-      endMs: clip.end_ms,
-      title: clip.label,
-      subtitle: formatMemberName(selectedPlayer),
-    });
-  }
-
   if (!walkup.isTeamSnap) {
     return (
       <section className="page-grid">
@@ -370,8 +297,6 @@ export function GamedayPage() {
                       isExpanded ? " btn-outline-primary" : " btn-light"
                     }`}
                     onClick={() => {
-                      selectedPlayerWasManualRef.current = true;
-                      setSelectedPlayerId(memberId);
                       setExpandedPlayerId((current) => (current === memberId ? "" : memberId));
                     }}
                     aria-expanded={isExpanded}
@@ -410,10 +335,23 @@ export function GamedayPage() {
                         <div className="list-group list-group-flush">
                           <LibraryClips
                             teamId={teamId}
-                            playerId={selectedPlayerId}
+                            playerId={memberId}
                             playingClipKey={playingClipKey}
-                            onPlayClip={playClip}
+                            onPlayClip={(clip) =>
-                            pinnedAssignmentsByClipId={selectedPinnedAssignmentByClipId}
+                              playClipPreview({
+                                key: clipKey("library", clip.id),
+                                url: clip.normalized_url,
+                                startMs: clip.start_ms,
+                                endMs: clip.end_ms,
+                                title: clip.label,
+                                subtitle: formatMemberName(member),
+                              })
+                            }
+                            pinnedAssignmentsByClipId={new Map(
+                              assignmentList
+                                .filter((assignment) => assignment.external_player_id === memberId)
+                                .map((assignment) => [String(assignment.clip_id), assignment]),
+                            )}
                           />
                         </div>
                       </div>
@@ -423,7 +361,7 @@ export function GamedayPage() {
                           <pre className="mt-2 mb-0 rounded-3 bg-body-tertiary p-3 small text-body-secondary overflow-auto">
                             {JSON.stringify(
                               {
-                                selectedPlayerId,
+                                expandedPlayerId,
                                 selectedPlayerName: formatMemberName(member),
                                 rawEventLineup: eventLineupQuery.data?.eventLineup ?? null,
                                 rawEventLineupEntries: eventLineupQuery.data?.entries ?? [],