Initial commit
This commit is contained in:
Trey t
294
mlbTVOS/Views/MLBNetworkSheet.swift
Normal file
294
mlbTVOS/Views/MLBNetworkSheet.swift
Normal file
@@ -0,0 +1,294 @@
|
||||
import SwiftUI
|
||||
|
||||
struct MLBNetworkSheet: View {
|
||||
var onWatchFullScreen: () -> Void
|
||||
@Environment(GamesViewModel.self) private var viewModel
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
|
||||
private var added: Bool {
|
||||
viewModel.activeStreams.contains(where: { $0.id == "MLBN" })
|
||||
}
|
||||
|
||||
private var canToggleIntoMultiview: Bool {
|
||||
added || viewModel.activeStreams.count < 4
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
sheetBackground
|
||||
.ignoresSafeArea()
|
||||
|
||||
HStack(alignment: .top, spacing: 32) {
|
||||
networkOverview
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
|
||||
actionColumn
|
||||
.frame(width: 360, alignment: .leading)
|
||||
}
|
||||
.padding(38)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 34, style: .continuous)
|
||||
.fill(.black.opacity(0.46))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: 34, style: .continuous)
|
||||
.strokeBorder(.white.opacity(0.08), lineWidth: 1)
|
||||
}
|
||||
)
|
||||
.padding(.horizontal, 94)
|
||||
.padding(.vertical, 70)
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var networkOverview: some View {
|
||||
VStack(alignment: .leading, spacing: 28) {
|
||||
VStack(alignment: .leading, spacing: 18) {
|
||||
HStack(spacing: 12) {
|
||||
statusPill(title: "LIVE CHANNEL", color: .blue)
|
||||
|
||||
if added {
|
||||
statusPill(title: "IN MULTI-VIEW", color: .green)
|
||||
}
|
||||
}
|
||||
|
||||
HStack(alignment: .center, spacing: 22) {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 26, style: .continuous)
|
||||
.fill(.blue.opacity(0.16))
|
||||
.frame(width: 110, height: 110)
|
||||
|
||||
Image(systemName: "tv.fill")
|
||||
.font(.system(size: 46, weight: .bold))
|
||||
.foregroundStyle(
|
||||
LinearGradient(
|
||||
colors: [.white, .blue.opacity(0.88)],
|
||||
startPoint: .top,
|
||||
endPoint: .bottom
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 10) {
|
||||
Text("MLB Network")
|
||||
.font(.system(size: 46, weight: .black, design: .rounded))
|
||||
.foregroundStyle(.white)
|
||||
|
||||
Text("Live coverage, studio hits, whip-around looks, analysis, and highlights all day.")
|
||||
.font(.system(size: 20, weight: .medium))
|
||||
.foregroundStyle(.white.opacity(0.72))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HStack(spacing: 14) {
|
||||
featurePill(title: "Live Look-Ins", systemImage: "dot.radiowaves.left.and.right")
|
||||
featurePill(title: "Studio Analysis", systemImage: "waveform.path.ecg.rectangle")
|
||||
featurePill(title: "Highlights", systemImage: "sparkles.tv")
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 14) {
|
||||
Text("Best For")
|
||||
.font(.system(size: 16, weight: .bold, design: .rounded))
|
||||
.foregroundStyle(.white.opacity(0.48))
|
||||
.kerning(1.2)
|
||||
|
||||
VStack(alignment: .leading, spacing: 14) {
|
||||
overviewLine(
|
||||
icon: "rectangle.stack.badge.play.fill",
|
||||
title: "Background baseball TV",
|
||||
detail: "Keep a league-wide live channel running while you browse or build Multi-View."
|
||||
)
|
||||
overviewLine(
|
||||
icon: "sportscourt.fill",
|
||||
title: "Between-game coverage",
|
||||
detail: "Use it when you want updates, reactions, and cut-ins instead of one locked game feed."
|
||||
)
|
||||
overviewLine(
|
||||
icon: "square.grid.2x2.fill",
|
||||
title: "Multi-View filler stream",
|
||||
detail: "Drop it into an open tile to keep the board full when only one or two games matter."
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(24)
|
||||
.background(panelBackground)
|
||||
|
||||
if !canToggleIntoMultiview {
|
||||
Label(
|
||||
"Multi-View is full. Remove a stream before adding MLB Network.",
|
||||
systemImage: "rectangle.split.2x2.fill"
|
||||
)
|
||||
.font(.system(size: 16, weight: .semibold))
|
||||
.foregroundStyle(.orange)
|
||||
.padding(.horizontal, 18)
|
||||
.padding(.vertical, 16)
|
||||
.background(panelBackground)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var actionColumn: some View {
|
||||
VStack(alignment: .leading, spacing: 18) {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
Text("Actions")
|
||||
.font(.system(size: 28, weight: .bold, design: .rounded))
|
||||
.foregroundStyle(.white)
|
||||
|
||||
Text("Launch MLB Network full screen or place it in your Multi-View lineup.")
|
||||
.font(.system(size: 16, weight: .medium))
|
||||
.foregroundStyle(.white.opacity(0.68))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
.padding(24)
|
||||
.background(panelBackground)
|
||||
|
||||
actionButton(
|
||||
title: "Watch Full Screen",
|
||||
subtitle: "Open the channel in the main player",
|
||||
systemImage: "play.fill",
|
||||
fill: .blue.opacity(0.18)
|
||||
) {
|
||||
onWatchFullScreen()
|
||||
}
|
||||
|
||||
actionButton(
|
||||
title: added ? "Remove From Multi-View" : "Add to Multi-View",
|
||||
subtitle: added ? "Take MLB Network out of your active grid" : "Send MLB Network into an open tile",
|
||||
systemImage: added ? "minus.circle.fill" : "plus.circle.fill",
|
||||
fill: added ? .red.opacity(0.16) : .white.opacity(0.08),
|
||||
foreground: added ? .red : .white,
|
||||
disabled: !canToggleIntoMultiview
|
||||
) {
|
||||
if added {
|
||||
viewModel.removeStream(id: "MLBN")
|
||||
} else {
|
||||
Task { await viewModel.addMLBNetwork() }
|
||||
}
|
||||
dismiss()
|
||||
}
|
||||
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func actionButton(
|
||||
title: String,
|
||||
subtitle: String,
|
||||
systemImage: String,
|
||||
fill: Color,
|
||||
foreground: Color = .white,
|
||||
disabled: Bool = false,
|
||||
action: @escaping () -> Void
|
||||
) -> some View {
|
||||
Button(action: action) {
|
||||
HStack(alignment: .center, spacing: 16) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.system(size: 22, weight: .bold))
|
||||
.frame(width: 32)
|
||||
|
||||
VStack(alignment: .leading, spacing: 5) {
|
||||
Text(title)
|
||||
.font(.system(size: 21, weight: .bold, design: .rounded))
|
||||
|
||||
Text(subtitle)
|
||||
.font(.system(size: 14, weight: .medium))
|
||||
.foregroundStyle(foreground.opacity(0.68))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
.foregroundStyle(foreground)
|
||||
.frame(maxWidth: .infinity, minHeight: 88, alignment: .leading)
|
||||
.padding(.horizontal, 22)
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: 24, style: .continuous)
|
||||
.fill(fill)
|
||||
)
|
||||
}
|
||||
.buttonStyle(.card)
|
||||
.disabled(disabled)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func overviewLine(icon: String, title: String, detail: String) -> some View {
|
||||
HStack(alignment: .top, spacing: 14) {
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: 18, weight: .bold))
|
||||
.foregroundStyle(.blue.opacity(0.9))
|
||||
.frame(width: 26)
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(title)
|
||||
.font(.system(size: 18, weight: .bold))
|
||||
.foregroundStyle(.white)
|
||||
|
||||
Text(detail)
|
||||
.font(.system(size: 15, weight: .medium))
|
||||
.foregroundStyle(.white.opacity(0.66))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func statusPill(title: String, color: Color) -> some View {
|
||||
Text(title)
|
||||
.font(.system(size: 13, weight: .black, design: .rounded))
|
||||
.foregroundStyle(color)
|
||||
.padding(.horizontal, 13)
|
||||
.padding(.vertical, 9)
|
||||
.background(color.opacity(0.14))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func featurePill(title: String, systemImage: String) -> some View {
|
||||
Label(title, systemImage: systemImage)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
.foregroundStyle(.white.opacity(0.84))
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 12)
|
||||
.background(.white.opacity(0.06))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var panelBackground: some View {
|
||||
RoundedRectangle(cornerRadius: 28, style: .continuous)
|
||||
.fill(.black.opacity(0.24))
|
||||
.overlay {
|
||||
RoundedRectangle(cornerRadius: 28, style: .continuous)
|
||||
.strokeBorder(.white.opacity(0.08), lineWidth: 1)
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var sheetBackground: some View {
|
||||
ZStack {
|
||||
LinearGradient(
|
||||
colors: [
|
||||
Color(red: 0.04, green: 0.05, blue: 0.08),
|
||||
Color(red: 0.05, green: 0.07, blue: 0.11)
|
||||
],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
|
||||
Circle()
|
||||
.fill(.blue.opacity(0.22))
|
||||
.frame(width: 540, height: 540)
|
||||
.blur(radius: 100)
|
||||
.offset(x: -280, y: -210)
|
||||
|
||||
Circle()
|
||||
.fill(.cyan.opacity(0.14))
|
||||
.frame(width: 460, height: 460)
|
||||
.blur(radius: 100)
|
||||
.offset(x: 350, y: 180)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user