mirror of
https://github.com/yattee/yattee.git
synced 2026-10-24 13:42:54 +00:00
b1625afb4a
Overdragging the side column's resize grabber past its minimum width now slides the column off the trailing edge (the video grows with it), and a swipe in from the trailing screen edge brings it back following the finger. The seek pan skips that edge strip while the column is collapsed. Showing the panel again restores every region hidden by its own drag handle. Swiping the below-video panel back up right after hiding it showed the video clipped to a short centered box that sprang back to full size. The hide flipped to the hidden layout in a `.logicallyComplete` completion while the slide spring was still registered on the SwiftUI host of the mpv render view; a reveal drag interrupting it made the release spring start from a bogus shrunken rect. All slide-off completions now wait for `.removed` and bail if a new drag took over. The visibility-keyed `.animation` modifiers key on a toggle generation bumped only by the animated show/hide paths, so drag flips never start the toggle easing. The partnerless `matchedGeometryEffect` on the widescreen video frame is dropped.
756 lines
42 KiB
Swift
756 lines
42 KiB
Swift
//
|
|
// CornerPlayerLayout.swift
|
|
// Yattee
|
|
//
|
|
// Corner player layout for iPad/macOS: video in the top-left, the portrait-
|
|
// style info panel below it, and a resizable side column on the right with
|
|
// tabs for the remaining pages (related/chapters/queue/comments) —
|
|
// YouTube-style. The layout resolver in ExpandedPlayerSheet falls back to
|
|
// the stacked layout when the window is too narrow.
|
|
//
|
|
|
|
import SwiftUI
|
|
|
|
#if os(iOS) || os(macOS)
|
|
|
|
struct CornerPlayerLayout<PlayerContent: View>: View {
|
|
@Environment(\.appEnvironment) private var appEnvironment
|
|
|
|
let playerControlsLayout: PlayerControlsLayout
|
|
|
|
/// Video + controls area builder, sized by the layout.
|
|
@ViewBuilder let playerContent: (
|
|
_ onTogglePanel: @escaping () -> Void,
|
|
_ isPanelVisible: Bool,
|
|
_ width: CGFloat,
|
|
_ height: CGFloat
|
|
) -> PlayerContent
|
|
|
|
let onChannelTap: (() -> Void)?
|
|
var onFullscreen: (() -> Void)? = nil
|
|
|
|
/// Seed the panel visibility BEFORE the first frame — applying the
|
|
/// preset's default visibility via onAppear/onChange animates the panels
|
|
/// popping in over an initially full-screen video on player expand
|
|
/// (same trap the portrait panel hit, fixed by init-time seeding).
|
|
init(
|
|
playerControlsLayout: PlayerControlsLayout,
|
|
initialPanelVisible: Bool = true,
|
|
initialColumnWidth: CGFloat? = nil,
|
|
@ViewBuilder playerContent: @escaping (
|
|
_ onTogglePanel: @escaping () -> Void,
|
|
_ isPanelVisible: Bool,
|
|
_ width: CGFloat,
|
|
_ height: CGFloat
|
|
) -> PlayerContent,
|
|
onChannelTap: (() -> Void)?,
|
|
onFullscreen: (() -> Void)? = nil
|
|
) {
|
|
self.playerControlsLayout = playerControlsLayout
|
|
self.playerContent = playerContent
|
|
self.onChannelTap = onChannelTap
|
|
self.onFullscreen = onFullscreen
|
|
_isPanelVisible = State(initialValue: initialPanelVisible)
|
|
if let initialColumnWidth, initialColumnWidth > 0 {
|
|
_columnWidth = State(initialValue: initialColumnWidth)
|
|
}
|
|
}
|
|
|
|
// MARK: - Layout Constants
|
|
|
|
/// Side column width bounds.
|
|
static var minColumnWidth: CGFloat { 280 }
|
|
|
|
/// Resize grabber strip on the side column's leading edge — narrow,
|
|
/// matching the panel drag handle look.
|
|
static var grabberWidth: CGFloat { 12 }
|
|
static var maxColumnWidthCap: CGFloat { 560 }
|
|
/// Minimum width kept for the video column.
|
|
static var minVideoColumnWidth: CGFloat { 480 }
|
|
/// Maximum fraction of the window height the video area may take when a
|
|
/// below-video region needs space.
|
|
static var maxVideoHeightFraction: CGFloat { 0.72 }
|
|
|
|
// MARK: - State
|
|
|
|
@State private var isPanelVisible = true
|
|
@State private var columnWidth: CGFloat = SettingsManager.defaultCornerPanelColumnWidth
|
|
@State private var primaryPage: PanelPageType = .related
|
|
@State private var isGrabberActive = false
|
|
@State private var isBelowPanelVisible = true
|
|
@State private var belowPanelDragOffset: CGFloat = 0
|
|
@State private var isBelowPanelExpanded = false
|
|
@State private var belowPanelExpandOffset: CGFloat = 0
|
|
/// Swipe-up-on-video reveal in progress: the panel renders in the shown
|
|
/// layout, positioned by `belowPanelDragOffset` counting down from full
|
|
/// hide travel so it follows the finger.
|
|
@State private var isRevealDragActive = false
|
|
/// Side column collapsed by overdragging its resize grabber past the
|
|
/// minimum width — independent of `isPanelVisible`, like the below panel.
|
|
@State private var isSideColumnVisible = true
|
|
/// Overdrag travel of the side column toward the trailing edge (0 = home).
|
|
@State private var sideColumnDragOffset: CGFloat = 0
|
|
@State private var isSideColumnOverdragActive = false
|
|
/// Edge-swipe reveal in progress: the column renders in the shown layout,
|
|
/// positioned by `sideColumnDragOffset` counting down from full travel.
|
|
@State private var isSideColumnRevealDragActive = false
|
|
/// Bumped by the animated show/hide paths (toggle button, settings sync).
|
|
/// The visibility-driven `.animation` modifiers key on this instead of the
|
|
/// visibility flags themselves: drag hide/reveal flips those flags in a
|
|
/// disabled transaction, but `.animation(_:value:)` ignores that and would
|
|
/// still animate the frame height — an animation a quick follow-up swipe
|
|
/// then interrupts, leaving the video clipped to a shrunken box that
|
|
/// springs back (the "fast swipe" reveal glitch).
|
|
@State private var panelToggleGeneration = 0
|
|
|
|
/// Trailing screen-edge strip that starts the reveal swipe while the
|
|
/// column is collapsed; drags from anywhere else keep seeking.
|
|
static var sideColumnEdgeRevealInset: CGFloat { 20 }
|
|
|
|
private var settingsManager: SettingsManager? { appEnvironment?.settingsManager }
|
|
/// Suppresses the leaf-level .animation modifiers while a panel drag
|
|
/// tracks the finger (the host sheet strips withAnimation transactions,
|
|
/// so these modifiers are what actually animate releases — like portrait).
|
|
private var isPanelDragActive: Bool { appEnvironment?.navigationCoordinator.isPanelDragging ?? false }
|
|
private var playerState: PlayerState? { appEnvironment?.playerService.state }
|
|
private var video: Video? { playerState?.currentVideo }
|
|
private var accentColor: Color { settingsManager?.resolvedAccentColor ?? .accentColor }
|
|
|
|
private var panelSettings: PanelSettings {
|
|
playerControlsLayout.effectivePanelSettings
|
|
}
|
|
|
|
/// Whether the info page is assigned to (and enabled in) the below-video
|
|
/// region — the below panel only exists to host it.
|
|
private var hasBelowVideoInfo: Bool {
|
|
guard let info = panelSettings.configuration(for: .info) else { return false }
|
|
return info.isEnabled && info.region == .belowVideo
|
|
}
|
|
|
|
/// Comments assigned below the video render as the portrait panel's
|
|
/// comments pill (iOS only, and only while the info panel is below —
|
|
/// the pill lives inside it). Everything else falls back to the column.
|
|
private var hasBelowVideoComments: Bool {
|
|
#if os(iOS)
|
|
guard hasBelowVideoInfo,
|
|
let comments = panelSettings.configuration(for: .comments) else { return false }
|
|
return comments.isEnabled && comments.region == .belowVideo
|
|
#else
|
|
return false
|
|
#endif
|
|
}
|
|
|
|
/// Pages the below-video host actually renders. Enabled pages assigned
|
|
/// `.belowVideo` that it can't host (chapters/related/queue/tracks, or
|
|
/// comments without the info panel) fall back to the side column instead
|
|
/// of disappearing.
|
|
private var belowVideoPageTypes: Set<PanelPageType> {
|
|
var types: Set<PanelPageType> = []
|
|
if hasBelowVideoInfo { types.insert(.info) }
|
|
if hasBelowVideoComments { types.insert(.comments) }
|
|
return types
|
|
}
|
|
|
|
/// Column emptiness is decided at the config level: runtime-empty pages
|
|
/// (no chapters, no related yet) are hidden inside the panel content, not
|
|
/// by collapsing the column — layout jumps during loading would be jarring.
|
|
private var hasSideColumn: Bool {
|
|
panelSettings.enabledPages().contains { !belowVideoPageTypes.contains($0.pageType) }
|
|
}
|
|
|
|
/// The info page config drives the below-video panel's element settings.
|
|
private var infoPageSettings: InfoPageSettings {
|
|
panelSettings.pages.first { $0.pageType == .info }?.infoSettings ?? InfoPageSettings()
|
|
}
|
|
|
|
private var panelBackgroundColor: Color {
|
|
#if os(iOS)
|
|
Color(uiColor: .systemBackground)
|
|
#else
|
|
Color(nsColor: .windowBackgroundColor)
|
|
#endif
|
|
}
|
|
|
|
private func clampColumnWidth(_ width: CGFloat, availableWidth: CGFloat) -> CGFloat {
|
|
let maxWidth = max(
|
|
Self.minColumnWidth,
|
|
min(Self.maxColumnWidthCap, availableWidth * 0.45, availableWidth - Self.minVideoColumnWidth)
|
|
)
|
|
return min(max(width, Self.minColumnWidth), maxWidth)
|
|
}
|
|
|
|
// MARK: - Body
|
|
|
|
var body: some View {
|
|
GeometryReader { geometry in
|
|
let width = max(1, geometry.size.width)
|
|
let height = max(1, geometry.size.height)
|
|
|
|
let showsSideColumn = isPanelVisible && isSideColumnVisible && hasSideColumn
|
|
let isSideColumnCollapsed = isPanelVisible && !isSideColumnVisible && hasSideColumn
|
|
// Reveal drag renders the shown layout so the column can follow
|
|
// the finger while `isSideColumnVisible` is still false.
|
|
let showsSideColumnLayout = showsSideColumn || (isSideColumnCollapsed && isSideColumnRevealDragActive)
|
|
let showsBelowVideo = isPanelVisible && isBelowPanelVisible && hasBelowVideoInfo
|
|
// What the player actually sees: every region can be dragged
|
|
// away on its own while the panel stays nominally visible.
|
|
let showsAnyRegion = showsSideColumn || showsBelowVideo
|
|
|
|
let effectiveColumnWidth = clampColumnWidth(columnWidth, availableWidth: width)
|
|
// Grabber sits on the column's leading edge, inside the column
|
|
// background — narrow strip matching the panel drag handle look.
|
|
let grabberWidth = Self.grabberWidth
|
|
let totalColumnWidth = effectiveColumnWidth + grabberWidth
|
|
|
|
// Grabber overdrag past the minimum width slides the column off
|
|
// the trailing edge; the video grows with the slide so the offset
|
|
// layout at full travel matches the collapsed layout exactly (the
|
|
// state flips after the animation without a visible jump).
|
|
let sideColumnHideTravel = totalColumnWidth + geometry.safeAreaInsets.trailing
|
|
let sideColumnSlide = showsSideColumnLayout ? min(sideColumnHideTravel, max(0, sideColumnDragOffset)) : 0
|
|
let videoWidth = showsSideColumnLayout
|
|
? max(1, width - totalColumnWidth + min(totalColumnWidth, sideColumnSlide))
|
|
: width
|
|
let shownVideoHeight: CGFloat = {
|
|
let rawAspectRatio = playerState?.displayAspectRatio ?? (16.0 / 9.0)
|
|
let aspectRatio = rawAspectRatio > 0 ? rawAspectRatio : (16.0 / 9.0)
|
|
return max(1, min(videoWidth / aspectRatio, height * Self.maxVideoHeightFraction))
|
|
}()
|
|
// Reveal drag renders the shown layout so the panel can follow
|
|
// the finger while `isBelowPanelVisible` is still false.
|
|
let showsPanelLayout = showsBelowVideo || (isPanelVisible && isRevealDragActive)
|
|
|
|
// Panel travel needed to fully clear the screen (incl. bottom
|
|
// safe area + the player window's extra PiP inset), and the video
|
|
// recenter offset that follows the drag — like the portrait
|
|
// layout's videoYOffset. At full travel the offset video matches
|
|
// the centered full-height layout exactly, so the state flips
|
|
// after the hide/reveal animations cause no visible jump.
|
|
let bottomInset = geometry.safeAreaInsets.bottom
|
|
let fullColumnHeight = height + bottomInset
|
|
// With the below panel hidden the video (and its bottom controls)
|
|
// extends to the physical bottom edge, not the safe-area line.
|
|
let videoHeight = showsPanelLayout ? shownVideoHeight : fullColumnHeight
|
|
let normalPanelHeight = max(1, fullColumnHeight - shownVideoHeight)
|
|
let panelHideTravel = normalPanelHeight
|
|
|
|
// One shared duration for the whole panel toggle — both panels
|
|
// and both video dimensions animate in lockstep so the video
|
|
// corner grows diagonally and everything finishes together.
|
|
// Scaled to the larger travel so the speed stays reasonable.
|
|
let panelExitSpeed: CGFloat = 1400
|
|
let panelToggleDuration = Double(min(max(max(totalColumnWidth, normalPanelHeight) / panelExitSpeed, 0.25), 0.45))
|
|
let videoDragProgress = showsPanelLayout
|
|
? min(1.0, max(0, belowPanelDragOffset) / panelHideTravel)
|
|
: 0
|
|
let videoDragYOffset = (fullColumnHeight - shownVideoHeight) / 2 * videoDragProgress
|
|
|
|
// Portrait-style expand: dragging up grows the panel over the
|
|
// video (expandOffset is negative while dragging up; when
|
|
// expanded, positive while dragging down to collapse).
|
|
let panelHeight: CGFloat = {
|
|
if isBelowPanelExpanded {
|
|
return max(normalPanelHeight, fullColumnHeight - belowPanelExpandOffset)
|
|
}
|
|
return min(fullColumnHeight, normalPanelHeight - belowPanelExpandOffset)
|
|
}()
|
|
let panelSpacerHeight: CGFloat = {
|
|
if isBelowPanelExpanded {
|
|
return min(videoHeight, belowPanelExpandOffset)
|
|
}
|
|
return max(0, videoHeight + belowPanelExpandOffset)
|
|
}()
|
|
|
|
ZStack {
|
|
Color.black.ignoresSafeArea(.all)
|
|
|
|
HStack(spacing: 0) {
|
|
ZStack(alignment: .top) {
|
|
// Sized from the live (animated) geometry, not the
|
|
// target values — during panel toggles the video then
|
|
// resizes smoothly through every animation frame
|
|
// instead of snapping to the final size.
|
|
GeometryReader { videoProxy in
|
|
playerContent(
|
|
togglePanel,
|
|
showsAnyRegion,
|
|
max(1, videoProxy.size.width),
|
|
max(1, videoProxy.size.height)
|
|
)
|
|
}
|
|
// Height animates with the below-panel timing, width
|
|
// with the side-column timing — the inner .animation
|
|
// scopes only the height frame. Keyed to gesture/
|
|
// visibility state, NOT to derived geometry — appear
|
|
// settling must not animate.
|
|
.frame(height: videoHeight)
|
|
.animation(isPanelDragActive ? nil : .easeInOut(duration: panelToggleDuration), value: panelToggleGeneration)
|
|
.frame(width: videoWidth)
|
|
.animation(isPanelDragActive ? nil : .easeInOut(duration: panelToggleDuration), value: panelToggleGeneration)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: sideColumnDragOffset)
|
|
.clipped()
|
|
.offset(y: videoDragYOffset)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: videoDragYOffset)
|
|
// Aspect ratio changes (new video, stream switch)
|
|
// resize the video/panel split — animate them
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: playerState?.displayAspectRatio)
|
|
// Swipe up on the video to bring the panel back —
|
|
// the panel follows the finger (like the portrait
|
|
// reveal) via belowPanelDragOffset counting down
|
|
// from full hide travel.
|
|
.simultaneousGesture(
|
|
(isPanelVisible && !isBelowPanelVisible && hasBelowVideoInfo)
|
|
? DragGesture()
|
|
.onChanged { value in
|
|
guard appEnvironment?.navigationCoordinator.isAdjustingPlayerSliders != true else { return }
|
|
guard value.translation.height < 0 || isRevealDragActive else { return }
|
|
if appEnvironment?.navigationCoordinator.isPanelDragging != true {
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = true
|
|
}
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isRevealDragActive = true
|
|
belowPanelDragOffset = min(panelHideTravel, max(0, panelHideTravel + value.translation.height))
|
|
}
|
|
}
|
|
.onEnded { value in
|
|
guard isRevealDragActive else { return }
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = false
|
|
if value.translation.height < -80 || value.predictedEndTranslation.height < -160 {
|
|
// Revealing: flip to visible at the
|
|
// current position, then animate home
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isBelowPanelVisible = true
|
|
isRevealDragActive = false
|
|
}
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0)) {
|
|
belowPanelDragOffset = 0
|
|
}
|
|
} else {
|
|
// Snap back off-screen, then drop the
|
|
// reveal layout without animation
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0), completionCriteria: .removed) {
|
|
belowPanelDragOffset = panelHideTravel
|
|
} completion: {
|
|
// A new reveal drag may have taken over
|
|
guard isRevealDragActive, belowPanelDragOffset == panelHideTravel,
|
|
appEnvironment?.navigationCoordinator.isPanelDragging != true else { return }
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isRevealDragActive = false
|
|
belowPanelDragOffset = 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
: nil
|
|
)
|
|
// Swipe in from the trailing screen edge to bring a
|
|
// collapsed side column back — the column follows
|
|
// the finger via sideColumnDragOffset counting down
|
|
// from full travel. Only the edge strip: the seek
|
|
// pan is told to skip it, everywhere else seeks.
|
|
.simultaneousGesture(
|
|
isSideColumnCollapsed
|
|
? DragGesture(coordinateSpace: .local)
|
|
.onChanged { value in
|
|
guard appEnvironment?.navigationCoordinator.isAdjustingPlayerSliders != true else { return }
|
|
guard isSideColumnRevealDragActive
|
|
|| (value.startLocation.x >= videoWidth - Self.sideColumnEdgeRevealInset
|
|
&& value.translation.width < 0) else { return }
|
|
if appEnvironment?.navigationCoordinator.isPanelDragging != true {
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = true
|
|
}
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isSideColumnRevealDragActive = true
|
|
sideColumnDragOffset = min(sideColumnHideTravel, max(0, sideColumnHideTravel + value.translation.width))
|
|
}
|
|
}
|
|
.onEnded { value in
|
|
guard isSideColumnRevealDragActive else { return }
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = false
|
|
if value.translation.width < -80 || value.predictedEndTranslation.width < -160 {
|
|
// Revealing: flip to visible at the
|
|
// current position, then animate home
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isSideColumnVisible = true
|
|
isSideColumnRevealDragActive = false
|
|
}
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0)) {
|
|
sideColumnDragOffset = 0
|
|
}
|
|
} else {
|
|
// Snap back off-screen, then drop the
|
|
// reveal layout without animation
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0), completionCriteria: .removed) {
|
|
sideColumnDragOffset = sideColumnHideTravel
|
|
} completion: {
|
|
// A new reveal drag may have taken over
|
|
guard isSideColumnRevealDragActive, sideColumnDragOffset == sideColumnHideTravel,
|
|
appEnvironment?.navigationCoordinator.isPanelDragging != true else { return }
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isSideColumnRevealDragActive = false
|
|
sideColumnDragOffset = 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
: nil
|
|
)
|
|
.frame(maxHeight: .infinity, alignment: .top)
|
|
|
|
if showsPanelLayout, let video {
|
|
VStack(spacing: 0) {
|
|
Spacer(minLength: 0)
|
|
.frame(height: panelSpacerHeight)
|
|
|
|
belowVideoInfoPanel(video: video, hideTravel: panelHideTravel)
|
|
.frame(width: videoWidth)
|
|
.frame(height: panelHeight)
|
|
.offset(y: belowPanelDragOffset)
|
|
}
|
|
.frame(maxHeight: .infinity, alignment: .top)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: belowPanelDragOffset)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 0.8), value: isBelowPanelExpanded)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 0.8), value: belowPanelExpandOffset)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: playerState?.displayAspectRatio)
|
|
.animation(isPanelDragActive ? nil : .easeInOut(duration: panelToggleDuration), value: panelToggleGeneration)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: sideColumnDragOffset)
|
|
// Pure slide, no fade — with a fade the panel
|
|
// seems to vanish before the side column and the
|
|
// video resize, breaking the one-transition feel
|
|
.transition(.move(edge: .bottom).animation(.easeInOut(duration: panelToggleDuration)))
|
|
}
|
|
}
|
|
.frame(width: videoWidth)
|
|
.frame(maxHeight: .infinity, alignment: .top)
|
|
// Extend into the bottom safe area (incl. the player
|
|
// window's extra PiP inset) so the panel and its pills
|
|
// reach the true bottom edge
|
|
.ignoresSafeArea(edges: .bottom)
|
|
|
|
if showsSideColumnLayout, let video {
|
|
HStack(spacing: 0) {
|
|
PanelResizeGrabber(
|
|
panelWidth: $columnWidth,
|
|
minWidth: Self.minColumnWidth,
|
|
maxWidth: clampColumnWidth(.infinity, availableWidth: width),
|
|
panelSide: .right,
|
|
isPinned: true,
|
|
isDragActive: $isGrabberActive,
|
|
hitWidth: grabberWidth,
|
|
onOverdragChanged: { overshoot in
|
|
guard overshoot > 0 || isSideColumnOverdragActive else { return }
|
|
if appEnvironment?.navigationCoordinator.isPanelDragging != true {
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = true
|
|
}
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isSideColumnOverdragActive = true
|
|
sideColumnDragOffset = min(sideColumnHideTravel, overshoot)
|
|
}
|
|
},
|
|
onOverdragEnded: { overshoot, predicted in
|
|
guard isSideColumnOverdragActive else { return }
|
|
isSideColumnOverdragActive = false
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = false
|
|
if overshoot > 80 || predicted > 160 {
|
|
// Slide fully off (video grows with
|
|
// it), then flip the collapsed state
|
|
// without animation — like the
|
|
// below panel's hide. `.removed`, not
|
|
// `.logicallyComplete`: flipping while
|
|
// the spring is still registered on the
|
|
// video frame leaves a stale animation
|
|
// that a quick follow-up reveal swipe
|
|
// interrupts, and the release spring
|
|
// then starts from a bogus shrunken
|
|
// rect (video clipped, growing back).
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0), completionCriteria: .removed) {
|
|
sideColumnDragOffset = sideColumnHideTravel
|
|
} completion: {
|
|
// The grabber may have been picked up again
|
|
guard isSideColumnVisible, !isSideColumnOverdragActive,
|
|
sideColumnDragOffset == sideColumnHideTravel else { return }
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isSideColumnVisible = false
|
|
sideColumnDragOffset = 0
|
|
}
|
|
}
|
|
} else {
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
|
|
sideColumnDragOffset = 0
|
|
}
|
|
}
|
|
}
|
|
)
|
|
|
|
sideColumnPanel(video: video)
|
|
.frame(width: effectiveColumnWidth)
|
|
}
|
|
// Bottom only — the background must not run under
|
|
// the system status bar at the top
|
|
.background(panelBackgroundColor.ignoresSafeArea(edges: .bottom))
|
|
// Overdrag slide: the column keeps its size while its
|
|
// layout slot shrinks from the trailing side, so its
|
|
// leading edge tracks the growing video; travel into
|
|
// the trailing safe area continues as a plain offset.
|
|
.offset(x: max(0, sideColumnSlide - totalColumnWidth))
|
|
.frame(width: max(0, totalColumnWidth - sideColumnSlide), alignment: .leading)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: sideColumnDragOffset)
|
|
.transition(.move(edge: .trailing).animation(.easeInOut(duration: panelToggleDuration)))
|
|
}
|
|
}
|
|
// Container-level animation so panel insert/remove and the
|
|
// video-area resize play as one transition (the host sheet
|
|
// strips withAnimation transactions, so key it here)
|
|
.animation(isPanelDragActive ? nil : .easeInOut(duration: panelToggleDuration), value: panelToggleGeneration)
|
|
.animation(isPanelDragActive ? nil : .spring(response: 0.3, dampingFraction: 1.0), value: sideColumnDragOffset)
|
|
}
|
|
.onChange(of: isSideColumnCollapsed, initial: true) { _, collapsed in
|
|
appEnvironment?.navigationCoordinator.cornerSideColumnEdgeRevealInset = collapsed ? Self.sideColumnEdgeRevealInset : 0
|
|
}
|
|
.onChange(of: width) { _, newWidth in
|
|
// Re-clamp when the window shrinks (still above the corner
|
|
// threshold — below it the resolver switches layouts).
|
|
columnWidth = clampColumnWidth(columnWidth, availableWidth: newWidth)
|
|
}
|
|
}
|
|
.onDisappear {
|
|
appEnvironment?.navigationCoordinator.cornerSideColumnEdgeRevealInset = 0
|
|
}
|
|
.onAppear {
|
|
// Only sync from the setting once the session's default
|
|
// visibility was applied — before that the setting is stale
|
|
// (the init seed already resolved the correct initial value).
|
|
if appEnvironment?.navigationCoordinator.hasAppliedPanelDefaultVisibility == true,
|
|
let visible = settingsManager?.landscapeDetailsPanelVisible {
|
|
isPanelVisible = visible
|
|
}
|
|
// Default the side column to the first configured page (skipping
|
|
// pages hosted below the video).
|
|
if let first = panelSettings.enabledPages().first(where: { !belowVideoPageTypes.contains($0.pageType) })?.pageType {
|
|
primaryPage = first
|
|
}
|
|
}
|
|
.onChange(of: columnWidth) { _, newWidth in
|
|
settingsManager?.cornerPanelColumnWidth = newWidth
|
|
}
|
|
.onChange(of: settingsManager?.landscapeDetailsPanelVisible) { _, newValue in
|
|
// External writes (preset default visibility, other layout hosts)
|
|
// must reach the local state too.
|
|
guard let newValue, newValue != isPanelVisible else { return }
|
|
withAnimation(.easeInOut(duration: 0.25)) {
|
|
if newValue { restoreDraggedAwayRegions() }
|
|
isPanelVisible = newValue
|
|
panelToggleGeneration += 1
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Panels
|
|
|
|
/// Portrait-style panel below the video: the actual PortraitDetailsPanel
|
|
/// (drag handle, player pill, collapsible description) with the comments
|
|
/// pill hidden and no inline chapters/related — those live in the side
|
|
/// column tabs.
|
|
@ViewBuilder
|
|
private func belowVideoInfoPanel(video: Video, hideTravel: CGFloat) -> some View {
|
|
Group {
|
|
#if os(iOS)
|
|
PortraitDetailsPanel(
|
|
onChannelTap: onChannelTap,
|
|
playerControlsLayout: playerControlsLayout,
|
|
onFullscreen: onFullscreen,
|
|
pillsOverlayOpacity: 1,
|
|
hidesCommentsPill: !hasBelowVideoComments,
|
|
inlineInfoSections: false,
|
|
panelCornerRadius: 0,
|
|
onDragChanged: { offset in
|
|
if appEnvironment?.navigationCoordinator.isPanelDragging != true {
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = true
|
|
}
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
if isBelowPanelExpanded {
|
|
// When expanded, only track drag down to collapse
|
|
belowPanelExpandOffset = max(0, offset)
|
|
} else if offset < 0 {
|
|
// Dragging UP - expand panel over the video
|
|
belowPanelExpandOffset = offset
|
|
belowPanelDragOffset = 0
|
|
} else {
|
|
// Dragging DOWN - dismiss tracking
|
|
belowPanelDragOffset = offset
|
|
belowPanelExpandOffset = 0
|
|
}
|
|
}
|
|
},
|
|
onDragEnded: { offset, predicted in
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = false
|
|
if isBelowPanelExpanded {
|
|
if offset > 80 || predicted > 160 {
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0)) {
|
|
isBelowPanelExpanded = false
|
|
belowPanelExpandOffset = 0
|
|
}
|
|
} else {
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
|
|
belowPanelExpandOffset = 0
|
|
}
|
|
}
|
|
} else if offset < -80 || predicted < -160 {
|
|
// Expand panel to cover the video
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0)) {
|
|
isBelowPanelExpanded = true
|
|
belowPanelExpandOffset = 0
|
|
belowPanelDragOffset = 0
|
|
}
|
|
} else if offset > 80 || predicted > 160 {
|
|
// Slide the panel fully off (video recenters via the
|
|
// drag-progress offset), then flip the hidden state
|
|
// without animation — the offset layout at full
|
|
// travel matches the hidden layout exactly. Must wait
|
|
// for `.removed`: flipping at `.logicallyComplete`
|
|
// leaves the spring registered on the video frame, and
|
|
// a quick follow-up reveal swipe that interrupts it
|
|
// makes the release spring start from a bogus shrunken
|
|
// rect (video clipped to a short box, growing back).
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 1.0), completionCriteria: .removed) {
|
|
belowPanelDragOffset = hideTravel
|
|
} completion: {
|
|
// The panel may have been grabbed again meanwhile
|
|
guard isBelowPanelVisible, belowPanelDragOffset == hideTravel,
|
|
appEnvironment?.navigationCoordinator.isPanelDragging != true else { return }
|
|
var transaction = Transaction()
|
|
transaction.disablesAnimations = true
|
|
withTransaction(transaction) {
|
|
isBelowPanelVisible = false
|
|
isBelowPanelExpanded = false
|
|
belowPanelDragOffset = 0
|
|
}
|
|
}
|
|
} else {
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
|
|
belowPanelDragOffset = 0
|
|
belowPanelExpandOffset = 0
|
|
}
|
|
}
|
|
},
|
|
onDragCancelled: {
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = false
|
|
withAnimation(.spring(response: 0.3, dampingFraction: 0.8)) {
|
|
belowPanelDragOffset = 0
|
|
belowPanelExpandOffset = 0
|
|
}
|
|
}
|
|
)
|
|
#else
|
|
// macOS: static info panel, no drag-to-hide
|
|
InfoPanelPage(
|
|
context: PanelPageContext(
|
|
appEnvironment: appEnvironment,
|
|
video: video,
|
|
accentColor: accentColor,
|
|
onChannelTap: onChannelTap
|
|
),
|
|
settings: infoPageSettings,
|
|
scrollConfig: PanelScrollConfig(
|
|
topInset: 4,
|
|
bottomInset: 16
|
|
)
|
|
)
|
|
.background(panelBackgroundColor.ignoresSafeArea(edges: .vertical))
|
|
#endif
|
|
}
|
|
// Publish the panel frame so the window-level dismiss pan gesture
|
|
// doesn't begin from touches inside this panel (drag handle conflict)
|
|
.background {
|
|
GeometryReader { proxy in
|
|
Color.clear
|
|
.onChange(of: proxy.frame(in: .global), initial: true) { _, frame in
|
|
appEnvironment?.navigationCoordinator.cornerBelowPanelFrame = frame
|
|
}
|
|
.onDisappear {
|
|
appEnvironment?.navigationCoordinator.cornerBelowPanelFrame = .zero
|
|
appEnvironment?.navigationCoordinator.isPanelDragging = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Side column with tabs for every enabled page the below-video host
|
|
/// doesn't render.
|
|
@ViewBuilder
|
|
private func sideColumnPanel(video: Video) -> some View {
|
|
PlayerPanelContentView(
|
|
panelSettings: panelSettings,
|
|
selectedPage: $primaryPage,
|
|
context: PanelPageContext(
|
|
appEnvironment: appEnvironment,
|
|
video: video,
|
|
accentColor: accentColor,
|
|
onChannelTap: onChannelTap
|
|
),
|
|
scrollConfig: PanelScrollConfig(
|
|
topInset: 4,
|
|
bottomInset: 16
|
|
),
|
|
pageBarTopPadding: 8,
|
|
excludedPages: belowVideoPageTypes
|
|
)
|
|
// The grabber strip already separates the column from the video;
|
|
// trim the leading inset so content sits 16pt from the column's
|
|
// outer edge on both sides instead of grabber + 16 on the left.
|
|
.environment(\.panelHorizontalInsets, PanelHorizontalInsets(
|
|
leading: max(0, PanelHorizontalInsets.standard - Self.grabberWidth),
|
|
trailing: PanelHorizontalInsets.standard
|
|
))
|
|
.background(panelBackgroundColor.ignoresSafeArea(edges: .bottom))
|
|
}
|
|
|
|
// MARK: - Actions
|
|
|
|
private func togglePanel() {
|
|
// Regions dragged away on their own leave the panel nominally
|
|
// visible — once nothing is left on screen the toggle shows
|
|
// everything again instead of "hiding" an empty panel.
|
|
let showsAnyRegion = isPanelVisible
|
|
&& ((isSideColumnVisible && hasSideColumn) || (isBelowPanelVisible && hasBelowVideoInfo))
|
|
let show = !showsAnyRegion
|
|
withAnimation(.easeInOut(duration: 0.25)) {
|
|
if show { restoreDraggedAwayRegions() }
|
|
isPanelVisible = show
|
|
panelToggleGeneration += 1
|
|
settingsManager?.landscapeDetailsPanelVisible = show
|
|
settingsManager?.detailsPanelLastVisible = show
|
|
}
|
|
}
|
|
|
|
/// Showing the panel brings back every region hidden by its own drag
|
|
/// handle (the portrait layout shares one flag for both, so this keeps
|
|
/// the toggle's meaning the same across layouts).
|
|
private func restoreDraggedAwayRegions() {
|
|
isSideColumnVisible = true
|
|
sideColumnDragOffset = 0
|
|
isBelowPanelVisible = true
|
|
belowPanelDragOffset = 0
|
|
}
|
|
}
|
|
|
|
#endif
|