2022-06-17 10:27:01 +00:00
|
|
|
import Defaults
|
2022-02-16 20:23:11 +00:00
|
|
|
import Foundation
|
2022-06-07 21:27:48 +00:00
|
|
|
import SDWebImageSwiftUI
|
2022-02-16 20:23:11 +00:00
|
|
|
import SwiftUI
|
|
|
|
|
|
|
|
struct PlayerControls: View {
|
2022-02-21 20:57:12 +00:00
|
|
|
static let animation = Animation.easeInOut(duration: 0.2)
|
2022-02-16 20:23:11 +00:00
|
|
|
|
|
|
|
private var player: PlayerModel!
|
2022-06-07 21:27:48 +00:00
|
|
|
private var thumbnails: ThumbnailsModel!
|
2022-02-16 21:51:37 +00:00
|
|
|
|
2022-02-16 20:23:11 +00:00
|
|
|
@EnvironmentObject<PlayerControlsModel> private var model
|
|
|
|
|
2022-02-27 20:31:17 +00:00
|
|
|
#if os(iOS)
|
|
|
|
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
2022-03-27 19:22:13 +00:00
|
|
|
#elseif os(tvOS)
|
|
|
|
enum Field: Hashable {
|
|
|
|
case play
|
|
|
|
case backward
|
|
|
|
case forward
|
|
|
|
}
|
|
|
|
|
|
|
|
@FocusState private var focusedField: Field?
|
2022-02-27 20:31:17 +00:00
|
|
|
#endif
|
2022-02-16 20:23:11 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
@Default(.controlsBarInPlayer) private var controlsBarInPlayer
|
2022-06-17 10:27:01 +00:00
|
|
|
|
2022-06-07 21:27:48 +00:00
|
|
|
init(player: PlayerModel, thumbnails: ThumbnailsModel) {
|
2022-02-16 20:23:11 +00:00
|
|
|
self.player = player
|
2022-06-07 21:27:48 +00:00
|
|
|
self.thumbnails = thumbnails
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var body: some View {
|
2022-06-18 12:39:49 +00:00
|
|
|
ZStack(alignment: .topTrailing) {
|
|
|
|
VStack {
|
|
|
|
ZStack(alignment: .center) {
|
|
|
|
OpeningStream()
|
|
|
|
NetworkState()
|
2022-02-16 20:23:11 +00:00
|
|
|
|
2022-05-27 22:59:35 +00:00
|
|
|
Group {
|
2022-06-18 12:39:49 +00:00
|
|
|
VStack(spacing: 4) {
|
|
|
|
buttonsBar
|
|
|
|
|
|
|
|
if let video = player.currentVideo, player.playingFullScreen {
|
|
|
|
// if let video = Video.fixture {
|
|
|
|
VStack(alignment: .leading, spacing: 8) {
|
|
|
|
Text(video.title)
|
|
|
|
.font(.title2.bold())
|
|
|
|
|
|
|
|
Text(video.author)
|
|
|
|
.font(.title3)
|
|
|
|
.foregroundColor(.secondary)
|
|
|
|
}
|
|
|
|
.padding(12)
|
|
|
|
.modifier(ControlBackgroundModifier())
|
|
|
|
.clipShape(RoundedRectangle(cornerRadius: 3))
|
|
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
|
|
}
|
2022-05-27 22:59:35 +00:00
|
|
|
|
2022-05-27 23:23:50 +00:00
|
|
|
Spacer()
|
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
Group {
|
|
|
|
ZStack(alignment: .bottom) {
|
|
|
|
floatingControls
|
|
|
|
.padding(.top, 20)
|
|
|
|
.padding(4)
|
|
|
|
.modifier(ControlBackgroundModifier())
|
|
|
|
.clipShape(RoundedRectangle(cornerRadius: 4))
|
|
|
|
|
|
|
|
timeline
|
|
|
|
.padding(4)
|
|
|
|
.offset(y: -25)
|
|
|
|
.zIndex(1)
|
|
|
|
}
|
|
|
|
.frame(maxWidth: 500)
|
|
|
|
.padding(.bottom, 2)
|
|
|
|
}
|
2022-05-27 23:23:50 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
.padding(.top, 2)
|
|
|
|
.padding(.horizontal, 2)
|
2022-05-27 22:59:35 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
.opacity(model.presentingControlsOverlay ? 1 : model.presentingControls ? 1 : 0)
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
#if os(tvOS)
|
|
|
|
.onChange(of: model.presentingControls) { _ in
|
|
|
|
if model.presentingControls {
|
|
|
|
focusedField = .play
|
|
|
|
}
|
2022-03-27 19:22:13 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
.onChange(of: focusedField) { _ in
|
|
|
|
model.resetTimer()
|
|
|
|
}
|
|
|
|
#else
|
|
|
|
.background(PlayerGestures())
|
|
|
|
.background(controlsBackground)
|
|
|
|
#endif
|
|
|
|
|
|
|
|
ControlsOverlay()
|
|
|
|
.padding()
|
|
|
|
.modifier(ControlBackgroundModifier(enabled: true))
|
|
|
|
.clipShape(RoundedRectangle(cornerRadius: 4))
|
|
|
|
.offset(x: -2, y: 40)
|
|
|
|
.opacity(model.presentingControlsOverlay ? 1 : 0)
|
|
|
|
|
|
|
|
Button {
|
|
|
|
player.restoreLastSkippedSegment()
|
|
|
|
} label: {
|
|
|
|
HStack(spacing: 10) {
|
|
|
|
if let segment = player.lastSkipped {
|
|
|
|
Image(systemName: "arrow.counterclockwise")
|
|
|
|
|
|
|
|
Text("Skipped \(segment.durationText) seconds of \(SponsorBlockAPI.categoryDescription(segment.category)?.lowercased() ?? "segment")")
|
|
|
|
.frame(alignment: .bottomLeading)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.padding(.vertical, 4)
|
|
|
|
.padding(.horizontal, 5)
|
|
|
|
.font(.system(size: 10))
|
|
|
|
.foregroundColor(.secondary)
|
|
|
|
.modifier(ControlBackgroundModifier())
|
|
|
|
.clipShape(RoundedRectangle(cornerRadius: 2))
|
|
|
|
.offset(x: -2, y: -2)
|
|
|
|
}
|
|
|
|
.buttonStyle(.plain)
|
|
|
|
.opacity(model.presentingControls ? 0 : player.lastSkipped.isNil ? 0 : 1)
|
2022-03-27 19:22:13 +00:00
|
|
|
}
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
2022-06-07 21:27:48 +00:00
|
|
|
@ViewBuilder var controlsBackground: some View {
|
|
|
|
if player.musicMode,
|
|
|
|
let item = self.player.currentItem,
|
2022-06-18 12:39:49 +00:00
|
|
|
let video = item.video,
|
|
|
|
let url = thumbnails.best(video)
|
2022-06-07 21:27:48 +00:00
|
|
|
{
|
|
|
|
WebImage(url: url)
|
|
|
|
.resizable()
|
|
|
|
.placeholder {
|
|
|
|
Rectangle().fill(Color("PlaceholderColor"))
|
|
|
|
}
|
|
|
|
.retryOnAppear(true)
|
|
|
|
.indicator(.activity)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-02-16 20:23:11 +00:00
|
|
|
var timeline: some View {
|
2022-06-18 12:39:49 +00:00
|
|
|
TimelineView(context: .player).foregroundColor(.primary)
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
private var hidePlayerButton: some View {
|
2022-05-27 22:59:35 +00:00
|
|
|
button("Hide", systemImage: "chevron.down") {
|
2022-02-16 20:23:11 +00:00
|
|
|
player.hide()
|
|
|
|
}
|
2022-05-27 22:59:35 +00:00
|
|
|
|
2022-03-27 19:22:13 +00:00
|
|
|
#if !os(tvOS)
|
2022-02-16 23:01:48 +00:00
|
|
|
.keyboardShortcut(.cancelAction)
|
2022-03-27 19:22:13 +00:00
|
|
|
#endif
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
private var playbackStatus: String {
|
|
|
|
if player.live {
|
|
|
|
return "LIVE"
|
|
|
|
}
|
|
|
|
|
|
|
|
guard !player.isLoadingVideo else {
|
|
|
|
return "loading..."
|
|
|
|
}
|
|
|
|
|
|
|
|
let videoLengthAtRate = (player.currentVideo?.length ?? 0) / Double(player.currentRate)
|
|
|
|
let remainingSeconds = videoLengthAtRate - (player.time?.seconds ?? 0)
|
|
|
|
|
|
|
|
if remainingSeconds < 60 {
|
|
|
|
return "less than a minute"
|
|
|
|
}
|
|
|
|
|
|
|
|
let timeFinishAt = Date().addingTimeInterval(remainingSeconds)
|
|
|
|
|
|
|
|
return "ends at \(formattedTimeFinishAt(timeFinishAt))"
|
|
|
|
}
|
|
|
|
|
|
|
|
private func formattedTimeFinishAt(_ date: Date) -> String {
|
|
|
|
let dateFormatter = DateFormatter()
|
|
|
|
|
|
|
|
dateFormatter.dateStyle = .none
|
|
|
|
dateFormatter.timeStyle = .short
|
|
|
|
|
|
|
|
return dateFormatter.string(from: date)
|
|
|
|
}
|
|
|
|
|
|
|
|
var buttonsBar: some View {
|
2022-06-18 12:39:49 +00:00
|
|
|
HStack(spacing: 20) {
|
2022-03-27 19:22:13 +00:00
|
|
|
#if !os(tvOS)
|
|
|
|
fullscreenButton
|
2022-06-18 12:39:49 +00:00
|
|
|
pipButton
|
2022-04-16 20:50:37 +00:00
|
|
|
|
2022-06-07 22:05:16 +00:00
|
|
|
Spacer()
|
2022-05-27 22:59:35 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
button("overlay", systemImage: "info.circle") {}
|
2022-06-07 21:27:48 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
button("settings", systemImage: "gearshape", active: model.presentingControlsOverlay) {
|
|
|
|
withAnimation(Self.animation) {
|
|
|
|
model.presentingControlsOverlay.toggle()
|
|
|
|
}
|
|
|
|
}
|
2022-06-07 22:05:16 +00:00
|
|
|
|
|
|
|
closeVideoButton
|
2022-03-27 19:22:13 +00:00
|
|
|
#endif
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var fullscreenButton: some View {
|
|
|
|
button(
|
|
|
|
"Fullscreen",
|
|
|
|
systemImage: fullScreenLayout ? "arrow.down.right.and.arrow.up.left" : "arrow.up.left.and.arrow.down.right"
|
|
|
|
) {
|
2022-04-03 12:23:42 +00:00
|
|
|
player.toggleFullscreen(fullScreenLayout)
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
2022-03-27 19:22:13 +00:00
|
|
|
#if !os(tvOS)
|
2022-02-16 20:23:11 +00:00
|
|
|
.keyboardShortcut(fullScreenLayout ? .cancelAction : .defaultAction)
|
2022-03-27 19:22:13 +00:00
|
|
|
#endif
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
2022-05-27 22:59:35 +00:00
|
|
|
private var closeVideoButton: some View {
|
|
|
|
button("Close", systemImage: "xmark") {
|
|
|
|
player.pause()
|
|
|
|
|
|
|
|
player.hide()
|
|
|
|
player.closePiP()
|
|
|
|
|
2022-05-28 21:41:23 +00:00
|
|
|
var delay = 0.2
|
2022-05-27 23:23:50 +00:00
|
|
|
#if os(macOS)
|
|
|
|
delay = 0.0
|
|
|
|
#endif
|
|
|
|
DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
|
2022-05-27 22:59:35 +00:00
|
|
|
player.closeCurrentItem()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-07 22:05:16 +00:00
|
|
|
private var musicModeButton: some View {
|
2022-06-18 12:39:49 +00:00
|
|
|
button("Music Mode", systemImage: "music.note", background: false, active: player.musicMode, action: player.toggleMusicMode)
|
2022-06-07 22:05:16 +00:00
|
|
|
.disabled(player.activeBackend == .appleAVPlayer)
|
|
|
|
}
|
|
|
|
|
2022-05-20 21:23:14 +00:00
|
|
|
private var pipButton: some View {
|
|
|
|
button("PiP", systemImage: "pip") {
|
2022-05-29 14:38:37 +00:00
|
|
|
model.startPiP()
|
2022-05-20 21:23:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
var floatingControls: some View {
|
2022-02-16 20:23:11 +00:00
|
|
|
HStack {
|
2022-06-18 12:39:49 +00:00
|
|
|
HStack(spacing: 20) {
|
|
|
|
togglePlayButton
|
|
|
|
seekBackwardButton
|
|
|
|
seekForwardButton
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
2022-02-16 20:23:11 +00:00
|
|
|
|
|
|
|
Spacer()
|
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
HStack(spacing: 20) {
|
|
|
|
restartVideoButton
|
2022-05-29 15:50:54 +00:00
|
|
|
advanceToNextItemButton
|
2022-06-18 12:39:49 +00:00
|
|
|
musicModeButton
|
|
|
|
}
|
|
|
|
.frame(maxWidth: .infinity, alignment: .trailing)
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
2022-05-27 22:59:35 +00:00
|
|
|
.font(.system(size: 20))
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
2022-05-29 15:50:54 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
var seekBackwardButton: some View {
|
|
|
|
button("Seek Backward", systemImage: "gobackward.10", size: 25, cornerRadius: 5, background: false) {
|
|
|
|
player.backend.seek(relative: .secondsInDefaultTimescale(-10))
|
|
|
|
}
|
|
|
|
#if os(tvOS)
|
|
|
|
.focused($focusedField, equals: .backward)
|
|
|
|
#else
|
|
|
|
.keyboardShortcut("k", modifiers: [])
|
|
|
|
.keyboardShortcut(KeyEquivalent.leftArrow, modifiers: [])
|
|
|
|
#endif
|
|
|
|
}
|
|
|
|
|
|
|
|
var seekForwardButton: some View {
|
|
|
|
button("Seek Forward", systemImage: "goforward.10", size: 25, cornerRadius: 5, background: false) {
|
|
|
|
player.backend.seek(relative: .secondsInDefaultTimescale(10))
|
|
|
|
}
|
|
|
|
#if os(tvOS)
|
|
|
|
.focused($focusedField, equals: .forward)
|
|
|
|
#else
|
|
|
|
.keyboardShortcut("l", modifiers: [])
|
|
|
|
.keyboardShortcut(KeyEquivalent.rightArrow, modifiers: [])
|
|
|
|
#endif
|
|
|
|
}
|
|
|
|
|
2022-05-29 15:50:54 +00:00
|
|
|
private var restartVideoButton: some View {
|
2022-06-18 12:39:49 +00:00
|
|
|
button("Restart video", systemImage: "backward.end.fill", size: 25, cornerRadius: 5, background: false) {
|
2022-05-29 15:50:54 +00:00
|
|
|
player.backend.seek(to: 0.0)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
private var togglePlayButton: some View {
|
|
|
|
button(
|
|
|
|
model.isPlaying ? "Pause" : "Play",
|
|
|
|
systemImage: model.isPlaying ? "pause.fill" : "play.fill",
|
|
|
|
size: 25, cornerRadius: 5, background: false
|
|
|
|
) {
|
|
|
|
player.backend.togglePlay()
|
2022-05-29 15:50:54 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
#if os(tvOS)
|
|
|
|
.focused($focusedField, equals: .play)
|
|
|
|
#else
|
|
|
|
.keyboardShortcut("p")
|
|
|
|
.keyboardShortcut(.space)
|
|
|
|
#endif
|
|
|
|
.disabled(model.isLoadingVideo)
|
2022-05-29 15:50:54 +00:00
|
|
|
}
|
2022-02-16 20:23:11 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
private var advanceToNextItemButton: some View {
|
|
|
|
button("Next", systemImage: "forward.fill", size: 25, cornerRadius: 5, background: false) {
|
|
|
|
player.advanceToNextItem()
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
.disabled(player.queue.isEmpty)
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
func button(
|
|
|
|
_ label: String,
|
2022-06-14 22:41:49 +00:00
|
|
|
systemImage: String? = nil,
|
2022-06-18 12:39:49 +00:00
|
|
|
size: Double = 25,
|
2022-06-14 22:41:49 +00:00
|
|
|
width: Double? = nil,
|
|
|
|
height: Double? = nil,
|
2022-02-16 20:23:11 +00:00
|
|
|
cornerRadius: Double = 3,
|
2022-06-18 12:39:49 +00:00
|
|
|
background: Bool = true,
|
2022-06-07 21:27:48 +00:00
|
|
|
active: Bool = false,
|
2022-02-16 20:23:11 +00:00
|
|
|
action: @escaping () -> Void = {}
|
|
|
|
) -> some View {
|
|
|
|
Button {
|
|
|
|
action()
|
|
|
|
model.resetTimer()
|
|
|
|
} label: {
|
2022-06-14 22:41:49 +00:00
|
|
|
Group {
|
|
|
|
if let image = systemImage {
|
|
|
|
Label(label, systemImage: image)
|
|
|
|
.labelStyle(.iconOnly)
|
|
|
|
} else {
|
|
|
|
Label(label, systemImage: "")
|
|
|
|
.labelStyle(.titleOnly)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.padding()
|
|
|
|
.contentShape(Rectangle())
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
.font(.system(size: 13))
|
2022-02-27 20:31:17 +00:00
|
|
|
.buttonStyle(.plain)
|
2022-06-18 12:39:49 +00:00
|
|
|
.foregroundColor(active ? Color("AppRedColor") : .primary)
|
2022-06-14 22:41:49 +00:00
|
|
|
.frame(width: width ?? size, height: height ?? size)
|
2022-06-18 12:39:49 +00:00
|
|
|
.modifier(ControlBackgroundModifier(enabled: background))
|
|
|
|
.clipShape(RoundedRectangle(cornerRadius: cornerRadius))
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var fullScreenLayout: Bool {
|
2022-03-27 19:22:13 +00:00
|
|
|
#if os(iOS)
|
2022-06-18 12:39:49 +00:00
|
|
|
player.playingFullScreen || verticalSizeClass == .compact
|
2022-02-27 20:31:17 +00:00
|
|
|
#else
|
2022-06-18 12:39:49 +00:00
|
|
|
player.playingFullScreen
|
2022-02-27 20:31:17 +00:00
|
|
|
#endif
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
struct PlayerControls_Previews: PreviewProvider {
|
|
|
|
static var previews: some View {
|
2022-06-18 12:39:49 +00:00
|
|
|
ZStack {
|
2022-05-27 23:23:50 +00:00
|
|
|
Color.gray
|
2022-05-27 22:59:35 +00:00
|
|
|
|
2022-06-07 21:27:48 +00:00
|
|
|
PlayerControls(player: PlayerModel(), thumbnails: ThumbnailsModel())
|
2022-05-27 22:59:35 +00:00
|
|
|
.injectFixtureEnvironmentObjects()
|
|
|
|
}
|
2022-02-16 20:23:11 +00:00
|
|
|
}
|
|
|
|
}
|