Make tvOS details panel use full screen

This commit is contained in:
Arkadiusz Fal
2026-04-15 04:35:19 +02:00
parent f2c2a86d47
commit 4837fc6548

View File

@@ -40,12 +40,6 @@ struct TVDetailsPanel: View {
var body: some View {
VStack(spacing: 0) {
// Drag indicator
Capsule()
.fill(.white.opacity(0.4))
.frame(width: 80, height: 6)
.padding(.top, 20)
// Tab picker (hidden when description scroll is locked)
if !isDescriptionScrollLocked {
Picker("", selection: $selectedTab) {
@@ -56,7 +50,7 @@ struct TVDetailsPanel: View {
}
.pickerStyle(.segmented)
.padding(.horizontal, 120)
.padding(.top, 24)
.padding(.top, 60)
.padding(.bottom, 20)
.focused($focusedItem, equals: .tabPicker)
.transition(.opacity.combined(with: .move(edge: .top)))
@@ -72,17 +66,14 @@ struct TVDetailsPanel: View {
}
}
.padding(.horizontal, 88)
Spacer()
.frame(maxHeight: .infinity)
}
.frame(maxWidth: .infinity)
.frame(height: UIScreen.main.bounds.height * 0.65)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(
RoundedRectangle(cornerRadius: 32, style: .continuous)
Rectangle()
.fill(.ultraThinMaterial)
.ignoresSafeArea(edges: .bottom)
.ignoresSafeArea()
)
.frame(maxHeight: .infinity, alignment: .bottom)
.onExitCommand {
// If description scroll is locked, unlock it first
if isDescriptionScrollLocked {
@@ -120,7 +111,6 @@ struct TVDetailsPanel: View {
VStack(spacing: 0) {
// Top section with title, channel, stats (hidden when description expanded)
if !isDescriptionScrollLocked {
ScrollView {
VStack(alignment: .leading, spacing: 24) {
// Video title
Text(video?.title ?? "")
@@ -136,8 +126,7 @@ struct TVDetailsPanel: View {
statsRow
}
.padding(.vertical, 16)
}
.frame(height: 180)
.fixedSize(horizontal: false, vertical: true)
.transition(.opacity.combined(with: .move(edge: .top)))
}
@@ -151,9 +140,6 @@ struct TVDetailsPanel: View {
.padding(.top, isDescriptionScrollLocked ? 24 : 8)
}
if isDescriptionScrollLocked {
Spacer()
}
}
.animation(.easeInOut(duration: 0.25), value: isDescriptionScrollLocked)
}
@@ -334,11 +320,6 @@ struct TVScrollableDescription: View {
private let scrollStep: CGFloat = 80
private let maxScroll: CGFloat = 5000
/// Height of description area - expands when locked
private var descriptionHeight: CGFloat {
isScrollLocked ? 500 : 200
}
private var isFocused: Bool {
focusedItem == .description
}
@@ -400,7 +381,13 @@ struct TVScrollableDescription: View {
}
}
// Clipped container for scrollable text
// Clipped container for scrollable text. The Rectangle owns the
// layout size (fills available space) so the Text's intrinsic
// height from .fixedSize doesn't push parents.
Rectangle()
.fill(Color.clear)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.overlay(alignment: .topLeading) {
Text(description)
.font(.body)
.foregroundStyle(.white.opacity(0.9))
@@ -409,7 +396,7 @@ struct TVScrollableDescription: View {
.multilineTextAlignment(.leading)
.frame(maxWidth: .infinity, alignment: .topLeading)
.offset(y: -scrollOffset)
.frame(height: descriptionHeight, alignment: .top)
}
.clipped()
}
.frame(maxWidth: .infinity, alignment: .leading)