Constrain tvOS details panel to right half of screen

Full-screen glass overlay was excessive on 4K displays and fully hid
the video. Wrap the panel in a GeometryReader sized to half the parent
width, slide it in from the trailing edge, and tighten internal
horizontal/top padding now that the content lives in a narrower column.
This commit is contained in:
Arkadiusz Fal
2026-05-09 14:35:00 +02:00
parent 42621b8193
commit 8a3f76bb1d
2 changed files with 16 additions and 10 deletions

View File

@@ -49,8 +49,8 @@ struct TVDetailsPanel: View {
} }
} }
.pickerStyle(.segmented) .pickerStyle(.segmented)
.padding(.horizontal, 120) .padding(.horizontal, 40)
.padding(.top, 60) .padding(.top, 40)
.padding(.bottom, 20) .padding(.bottom, 20)
.focused($focusedItem, equals: .tabPicker) .focused($focusedItem, equals: .tabPicker)
.transition(.opacity.combined(with: .move(edge: .top))) .transition(.opacity.combined(with: .move(edge: .top)))
@@ -65,7 +65,7 @@ struct TVDetailsPanel: View {
commentsContent commentsContent
} }
} }
.padding(.horizontal, 88) .padding(.horizontal, 40)
.frame(maxHeight: .infinity) .frame(maxHeight: .infinity)
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxWidth: .infinity, maxHeight: .infinity)

View File

@@ -264,14 +264,20 @@ struct TVPlayerView: View {
.disabled(!shouldShowControls) .disabled(!shouldShowControls)
.animation(.easeInOut(duration: 0.25), value: shouldShowControls) .animation(.easeInOut(duration: 0.25), value: shouldShowControls)
// Swipe-up details panel // Right-side details panel (covers ~50% of screen)
if isDetailsPanelVisible { if isDetailsPanelVisible {
TVDetailsPanel( GeometryReader { geo in
video: playerState?.currentVideo, HStack(spacing: 0) {
initialTab: detailsPanelInitialTab, Spacer(minLength: 0)
onDismiss: { hideDetailsPanel() } TVDetailsPanel(
) video: playerState?.currentVideo,
.transition(.move(edge: .bottom).combined(with: .opacity)) initialTab: detailsPanelInitialTab,
onDismiss: { hideDetailsPanel() }
)
.frame(width: geo.size.width / 2)
}
}
.transition(.move(edge: .trailing).combined(with: .opacity))
} }
// Debug overlay // Debug overlay