Fix single teamview with full scree widget positions

icpc · Dec 2, 2024 · 59cd898 · 59cd898
1 parent 44a4b4c
commit 59cd898
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/frontend/overlay/src/components/organisms/widgets/TeamView.tsx b/src/frontend/overlay/src/components/organisms/widgets/TeamView.tsx
@@ -64,12 +64,12 @@ const AchievementWrapper = styled(PrimaryMediaWrapper)`
     z-index: 2;
 `;
 
-const TeamViewGrid = styled.div<{ $achievementY: number }>`
+const TeamViewGrid = styled.div<{ $secondaryY: number; $achievementY: number }>`
     width: 100%;
     height: 100%;
     display: grid;
-    grid-template-columns: 1fr ${props => props.$achievementY * 2 / 9 * 16}px;
-    grid-template-rows: 1fr ${props => props.$achievementY}px ${props => props.$achievementY}px ${props => props.$achievementY}px;
+    grid-template-columns: 1fr ${props => props.$secondaryY * 2 / 9 * 16}px;
+    grid-template-rows: 1fr ${props => props.$secondaryY}px ${props => props.$secondaryY}px ${props => props.$achievementY}px;
     z-index: 3;
     border-radius: ${c.GLOBAL_BORDER_RADIUS};
 `;
@@ -109,6 +109,7 @@ const teamViewVariant = (position: TeamViewPosition | undefined) => {
 
 const SingleContent = ({ teamId, primary, setPrimaryLoaded, secondary, setSecondaryLoaded, achievement, setAchievementLoaded, showTaskStatus, showTimeLine, location }: CommonContentProps) => {
     const achievementY = location.sizeY - location.sizeX / 16 * 9;
+    const secondaryY = achievementY > 0 ? achievementY : (location.sizeY * c.TEAMVIEW_FULLSCREEN_SECONDARY_FACTOR / 2);
     return (
         <>
             {primary && (
@@ -121,7 +122,7 @@ const SingleContent = ({ teamId, primary, setPrimaryLoaded, secondary, setSecond
                     <TeamMediaHolder media={achievement} onLoadStatus={setAchievementLoaded} />
                 </AchievementWrapper>
             )}
-            <TeamViewGrid $achievementY={achievementY}>
+            <TeamViewGrid $secondaryY={secondaryY} $achievementY={achievementY}>
                 {secondary && (
                     <SecondaryMediaWrapper withAchievement={!!achievement}>
                         <RoundedTeamMediaHolder media={secondary} onLoadStatus={setSecondaryLoaded} />
@@ -257,7 +258,7 @@ const SplitContent = ({ teamId, primary, setPrimaryLoaded, secondary, setSeconda
                     <RoundedTeamMediaHolder media={primary} onLoadStatus={setPrimaryLoaded} />
                 </PrimaryMediaWrapper>
             )}
-            <SplitScreenGrid $secondaryY={location.sizeY * 0.39}>
+            <SplitScreenGrid $secondaryY={location.sizeY * c.SPLITSCREEN_SECONDARY_FACTOR}>
                 {secondary && (
                     <SecondaryMediaWrapper withAchievement={false}>
                         <RoundedTeamMediaHolder media={secondary} onLoadStatus={setSecondaryLoaded} />

diff --git a/src/frontend/overlay/src/config.ts b/src/frontend/overlay/src/config.ts
@@ -232,6 +232,8 @@ config.TIMELINE_REAL_WIDTH = 0.97;
 config.TIMELINE_PADDING = 0;
 config.TIMELINE_LEFT_TIME_PADDING = 1.37;
 
+config.TEAMVIEW_FULLSCREEN_SECONDARY_FACTOR = 0.39;
+config.SPLITSCREEN_SECONDARY_FACTOR = config.TEAMVIEW_FULLSCREEN_SECONDARY_FACTOR;
 
 // config.PVP_OPACITY = 0.95;
 // config.TEAM_VIEW_OPACITY = 0.95;