yattee/Shared/Player/Controls/TimelineView.swift

392 lines
13 KiB
Swift
Raw Normal View History

2022-02-16 20:23:11 +00:00
import SwiftUI
struct TimelineView: View {
enum Context {
case controls
case player
}
private var duration: Double {
playerTime.duration.seconds
}
private var current: Double {
get {
playerTime.currentTime.seconds
}
set(value) {
playerTime.currentTime = .secondsInDefaultTimescale(value)
}
}
2022-02-16 20:23:11 +00:00
@State private var size = CGSize.zero
@State private var tooltipSize = CGSize.zero
@State private var dragging = false { didSet {
if dragging {
player.backend.stopControlsUpdates()
} else {
player.backend.startControlsUpdates()
}
}}
2022-02-16 20:23:11 +00:00
@State private var dragOffset: Double = 0
@State private var draggedFrom: Double = 0
private var start: Double = 0.0
private var height = 8.0
2022-02-16 20:23:11 +00:00
var cornerRadius: Double
var thumbAreaWidth: Double = 40
var context: Context
2022-02-16 20:23:11 +00:00
@EnvironmentObject<PlayerModel> private var player
@EnvironmentObject<PlayerControlsModel> private var controls
@EnvironmentObject<PlayerTimeModel> private var playerTime
var chapters: [Chapter] {
player.currentVideo?.chapters ?? []
}
2022-02-16 20:23:11 +00:00
init(
cornerRadius: Double = 10.0,
context: Context = .controls
) {
2022-02-16 20:23:11 +00:00
self.cornerRadius = cornerRadius
self.context = context
2022-02-16 20:23:11 +00:00
}
var body: some View {
VStack {
Group {
VStack(spacing: 3) {
if dragging {
if let segment = projectedSegment,
let description = SponsorBlockAPI.categoryDescription(segment.category)
{
Text(description)
.font(.system(size: 8))
.fixedSize()
.lineLimit(1)
.foregroundColor(Color("AppRedColor"))
}
if let chapter = projectedChapter {
Text(chapter.title)
.lineLimit(3)
.font(.system(size: 11).bold())
.frame(maxWidth: 250)
.fixedSize()
}
}
Text((dragging ? projectedValue : current).formattedAsPlaybackTime(allowZero: true) ?? PlayerTimeModel.timePlaceholder)
.font(.system(size: 11).monospacedDigit())
}
2022-02-16 20:23:11 +00:00
.padding(.vertical, 3)
.padding(.horizontal, 8)
.background(
RoundedRectangle(cornerRadius: 3)
.foregroundColor(.black)
)
2022-02-16 20:23:11 +00:00
.foregroundColor(.white)
}
.animation(.easeInOut(duration: 0.2))
.frame(maxHeight: 300, alignment: .bottom)
.offset(x: thumbTooltipOffset)
.overlay(GeometryReader { proxy in
Color.clear
.onAppear {
tooltipSize = proxy.size
}
.onChange(of: proxy.size) { _ in
tooltipSize = proxy.size
}
})
.frame(height: 80)
.opacity(dragging ? 1 : 0)
.animation(.easeOut, value: thumbTooltipOffset)
HStack(spacing: 4) {
Text((dragging ? projectedValue : nil)?.formattedAsPlaybackTime(allowZero: true) ?? playerTime.currentPlaybackTime)
2022-07-21 22:44:21 +00:00
.opacity(player.liveStreamInAVPlayer ? 0 : 1)
.frame(minWidth: 35)
2022-06-26 12:55:23 +00:00
#if os(tvOS)
.font(.system(size: 20))
#endif
ZStack(alignment: .center) {
ZStack(alignment: .leading) {
ZStack(alignment: .leading) {
Rectangle()
2022-06-24 23:39:29 +00:00
.fill(Color.white.opacity(0.2))
.frame(maxHeight: height)
2022-06-24 23:39:29 +00:00
.offset(x: current * oneUnitWidth)
.zIndex(1)
Rectangle()
2022-06-24 23:39:29 +00:00
.fill(Color.white.opacity(0.6))
.frame(maxHeight: height)
.frame(width: current * oneUnitWidth)
.zIndex(1)
segmentsLayers
.zIndex(2)
}
.clipShape(RoundedRectangle(cornerRadius: cornerRadius))
chaptersLayers
.zIndex(3)
}
2022-08-09 17:28:16 +00:00
Rectangle()
.contentShape(Rectangle())
2022-08-09 17:28:16 +00:00
.foregroundColor(Color.clear)
.overlay(
ZStack {
Circle()
.fill(dragging ? .white : .gray)
2022-08-09 17:28:16 +00:00
.frame(width: 13)
Circle()
.fill(dragging ? .gray : .white)
2022-08-09 17:28:16 +00:00
.frame(width: 11)
2022-02-16 20:23:11 +00:00
}
)
.offset(x: thumbOffset)
2022-08-09 17:28:16 +00:00
.frame(width: thumbAreaWidth, height: thumbAreaWidth)
#if !os(tvOS)
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
if !dragging {
controls.removeTimer()
draggedFrom = current
}
dragging = true
let drag = value.translation.width
let change = (drag / size.width) * units
let changedCurrent = current + change
guard changedCurrent >= start, changedCurrent <= duration else {
return
}
withAnimation(Animation.linear(duration: 0.2)) {
dragOffset = drag
}
}
.onEnded { _ in
if abs(dragOffset) > 0 {
playerTime.currentTime = .secondsInDefaultTimescale(projectedValue)
player.backend.seek(to: projectedValue)
}
dragging = false
dragOffset = 0.0
draggedFrom = 0.0
controls.resetTimer()
}
)
#endif
}
2022-07-21 22:44:21 +00:00
.opacity(player.liveStreamInAVPlayer ? 0 : 1)
2022-06-24 23:39:29 +00:00
.overlay(GeometryReader { proxy in
Color.clear
.onAppear {
self.size = proxy.size
2022-02-16 20:23:11 +00:00
}
.onChange(of: proxy.size) { size in
self.size = size
2022-02-16 20:23:11 +00:00
}
})
.frame(maxHeight: 20)
#if !os(tvOS)
.gesture(DragGesture(minimumDistance: 0).onEnded { value in
let target = (value.location.x / size.width) * units
self.playerTime.currentTime = .secondsInDefaultTimescale(target)
player.backend.seek(to: target)
})
#endif
2022-07-21 22:44:21 +00:00
durationView
.frame(minWidth: 30, alignment: .trailing)
}
.clipShape(RoundedRectangle(cornerRadius: 3))
.font(.system(size: 9).monospacedDigit())
.zIndex(2)
}
}
2022-02-16 20:23:11 +00:00
2022-07-21 22:44:21 +00:00
@ViewBuilder var durationView: some View {
if player.live {
if player.playingLive || player.activeBackend == .appleAVPlayer {
Text("LIVE")
.fontWeight(.bold)
.padding(2)
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 2).foregroundColor(.red))
} else {
Button {
if let duration = player.videoDuration {
player.backend.seek(to: duration - 5)
}
} label: {
Text("LIVE")
.fontWeight(.bold)
.padding(2)
.foregroundColor(.primary)
.background(RoundedRectangle(cornerRadius: 2).strokeBorder(.red, lineWidth: 1).foregroundColor(.white))
}
}
} else {
Text(dragging ? playerTime.durationPlaybackTime : playerTime.withoutSegmentsPlaybackTime)
.clipShape(RoundedRectangle(cornerRadius: 3))
.frame(minWidth: 35)
#if os(tvOS)
.font(.system(size: 20))
#endif
}
}
var tooltipVeritcalOffset: Double {
var offset = -20.0
2022-02-16 20:23:11 +00:00
if !projectedChapter.isNil {
offset -= 8.0
2022-02-16 20:23:11 +00:00
}
if !projectedSegment.isNil {
offset -= 6.5
}
return offset
2022-02-16 20:23:11 +00:00
}
var projectedValue: Double {
let change = (dragOffset / size.width) * units
let projected = draggedFrom + change
guard projected.isFinite && projected >= 0 && projected <= duration else {
return 0.0
}
return projected.clamped(to: 0 ... duration)
2022-02-16 20:23:11 +00:00
}
var thumbOffset: Double {
let offset = dragging ? draggedThumbHorizontalOffset : thumbHorizontalOffset
2022-02-16 20:23:11 +00:00
return offset.isFinite ? offset : thumbLeadingOffset
}
var thumbTooltipOffset: Double {
2022-08-08 17:28:25 +00:00
let leadingOffset = abs(size.width / 2 - (tooltipSize.width / 2))
let offsetForThumb = thumbOffset - thumbLeadingOffset
2022-02-16 20:23:11 +00:00
guard offsetForThumb > tooltipSize.width / 2 else {
return -leadingOffset
}
return thumbOffset.clamped(to: -leadingOffset ... leadingOffset)
2022-02-16 20:23:11 +00:00
}
var minThumbTooltipOffset: Double {
60
}
2022-02-16 20:23:11 +00:00
var maxThumbTooltipOffset: Double {
max(minThumbTooltipOffset, units * oneUnitWidth)
}
var segments: [Segment] {
player.sponsorBlock.segments
2022-02-16 20:23:11 +00:00
}
var segmentsLayers: some View {
ForEach(segments, id: \.uuid) { segment in
Rectangle()
2022-02-16 20:23:11 +00:00
.offset(x: segmentLayerHorizontalOffset(segment))
.foregroundColor(Color("AppRedColor"))
2022-02-16 20:23:11 +00:00
.frame(maxHeight: height)
.frame(width: segmentLayerWidth(segment))
}
}
var projectedSegment: Segment? {
segments.first { $0.timeInSegment(.secondsInDefaultTimescale(projectedValue)) }
}
var projectedChapter: Chapter? {
chapters.last { $0.start <= projectedValue }
}
var chaptersLayers: some View {
ForEach(chapters) { chapter in
RoundedRectangle(cornerRadius: 4)
2022-06-24 23:39:29 +00:00
.fill(Color.orange)
.frame(maxWidth: 2, maxHeight: 12)
.offset(x: (chapter.start * oneUnitWidth) - 1)
}
}
2022-02-16 20:23:11 +00:00
func segmentLayerHorizontalOffset(_ segment: Segment) -> Double {
segment.start * oneUnitWidth
}
func segmentLayerWidth(_ segment: Segment) -> Double {
let width = segment.duration * oneUnitWidth
return width.isFinite ? width : 1
2022-02-16 20:23:11 +00:00
}
var draggedThumbHorizontalOffset: Double {
thumbLeadingOffset + (draggedFrom * oneUnitWidth) + dragOffset
2022-02-16 20:23:11 +00:00
}
var thumbHorizontalOffset: Double {
thumbLeadingOffset + (current * oneUnitWidth)
}
var thumbLeadingOffset: Double {
-size.width / 2
2022-02-16 20:23:11 +00:00
}
var oneUnitWidth: Double {
let one = size.width / units
return one.isFinite ? one : 0
}
var units: Double {
duration - start
}
}
struct TimelineView_Previews: PreviewProvider {
static var duration = 100.0
static var current = 0.0
static var durationBinding: Binding<Double> = .init(
get: { duration },
set: { value in duration = value }
)
static var currentBinding = Binding<Double>(
get: { current },
set: { value in current = value }
)
2022-02-16 20:23:11 +00:00
static var previews: some View {
let playerModel = PlayerModel()
playerModel.currentItem = .init(Video.fixture)
let playerTimeModel = PlayerTimeModel()
playerTimeModel.player = playerModel
playerTimeModel.currentTime = .secondsInDefaultTimescale(33)
playerTimeModel.duration = .secondsInDefaultTimescale(100)
return VStack(spacing: 40) {
TimelineView()
2022-02-16 20:23:11 +00:00
}
.environmentObject(playerModel)
.environmentObject(playerTimeModel)
.environmentObject(PlayerControlsModel())
2022-02-16 20:23:11 +00:00
.padding()
}
}