yattee/Shared/Player/Controls/PlayerControls.swift

449 lines
15 KiB
Swift
Raw Normal View History

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
2022-08-14 17:06:22 +00:00
case settings
case close
2022-03-27 19:22:13 +00:00
}
@FocusState private var focusedField: Field?
2022-02-27 20:31:17 +00:00
#endif
2022-02-16 20:23:11 +00:00
#if !os(macOS)
@Default(.closePlayerOnItemClose) private var closePlayerOnItemClose
#endif
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-08-21 22:57:01 +00:00
ZStack(alignment: .center) {
VStack {
ZStack(alignment: .center) {
OpeningStream()
NetworkState()
2022-02-16 20:23:11 +00:00
2022-08-08 17:31:13 +00:00
if model.presentingControls && !model.presentingOverlays {
VStack(spacing: 4) {
2022-08-14 17:06:22 +00:00
#if !os(tvOS)
buttonsBar
HStack {
if !player.currentVideo.isNil, fullScreenLayout {
Button {
withAnimation(Self.animation) {
model.presentingDetailsOverlay = true
}
} label: {
ControlsBar(fullScreen: $model.presentingDetailsOverlay, presentingControls: false, detailsTogglePlayer: false, detailsToggleFullScreen: false)
.clipShape(RoundedRectangle(cornerRadius: 4))
.frame(maxWidth: 300, alignment: .leading)
2022-07-10 17:51:46 +00:00
}
2022-08-14 17:06:22 +00:00
.buttonStyle(.plain)
2022-07-10 17:51:46 +00:00
}
2022-08-14 17:06:22 +00:00
Spacer()
}
2022-08-14 17:06:22 +00:00
#endif
2022-05-27 23:23:50 +00:00
Spacer()
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
}
.padding(.top, 2)
.padding(.horizontal, 2)
2022-08-08 17:31:13 +00:00
.transition(.opacity)
}
2022-02-16 20:23:11 +00:00
}
2022-08-08 17:31:13 +00:00
.frame(maxHeight: .infinity)
2022-02-16 20:23:11 +00:00
}
2022-08-20 21:05:40 +00:00
.frame(maxWidth: .infinity, maxHeight: .infinity)
#if os(tvOS)
2022-08-20 21:05:40 +00:00
.onChange(of: model.presentingControls) { newValue in
if newValue { focusedField = .play }
}
.onChange(of: focusedField) { _ in model.resetTimer() }
#else
2022-08-20 21:05:40 +00:00
.background(PlayerGestures())
.background(controlsBackground)
#endif
2022-08-08 17:31:13 +00:00
if model.presentingDetailsOverlay {
2022-08-21 22:57:01 +00:00
Section {
VideoDetailsOverlay()
.frame(maxWidth: detailsWidth, maxHeight: detailsHeight)
.transition(.opacity)
}
.frame(maxHeight: .infinity, alignment: .top)
2022-08-08 17:31:13 +00:00
}
if !model.presentingControls,
2022-08-14 17:06:22 +00:00
!model.presentingOverlays,
2022-08-08 17:31:13 +00:00
let segment = player.lastSkipped
{
Button {
player.restoreLastSkippedSegment()
} label: {
HStack(spacing: 10) {
Image(systemName: "arrow.counterclockwise")
Text("Skipped \(segment.durationText) seconds of \(SponsorBlockAPI.categoryDescription(segment.category)?.lowercased() ?? "segment")")
.frame(alignment: .bottomLeading)
}
2022-08-08 17:31:13 +00:00
.padding(.vertical, 4)
.padding(.horizontal, 5)
.font(.system(size: 10))
.foregroundColor(.secondary)
.modifier(ControlBackgroundModifier())
.clipShape(RoundedRectangle(cornerRadius: 2))
}
2022-08-21 22:57:01 +00:00
.frame(maxHeight: .infinity, alignment: .top)
2022-08-08 17:31:13 +00:00
.buttonStyle(.plain)
.transition(.opacity)
}
}
2022-08-14 17:06:22 +00:00
.onChange(of: model.presentingOverlays) { newValue in
2022-08-08 17:31:13 +00:00
if newValue {
2022-08-23 21:14:13 +00:00
model.hide()
}
2022-03-27 19:22:13 +00:00
}
2022-08-14 17:06:22 +00:00
#if os(tvOS)
.onReceive(model.reporter) { value in
if value == "swipe down", !model.presentingControls, !model.presentingOverlays {
withAnimation(Self.animation) {
model.presentingControlsOverlay = true
}
} else {
model.show()
}
2022-08-14 17:06:22 +00:00
model.resetTimer()
}
#endif
2022-07-10 17:51:46 +00:00
}
var detailsWidth: Double {
guard let player = player, player.playerSize.width.isFinite else { return 200 }
return [player.playerSize.width, 600].min()!
2022-07-05 17:20:25 +00:00
}
2022-07-11 16:43:23 +00:00
var detailsHeight: Double {
guard let player = player, player.playerSize.height.isFinite else { return 200 }
return [player.playerSize.height, 500].min()!
}
2022-06-07 21:27:48 +00:00
@ViewBuilder var controlsBackground: some View {
if player.musicMode,
let item = self.player.currentItem,
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-08-20 21:05:40 +00:00
.frame(maxWidth: .infinity, maxHeight: .infinity)
2022-06-07 21:27:48 +00:00
}
}
2022-02-16 20:23:11 +00:00
var timeline: some View {
TimelineView(context: .player).foregroundColor(.primary)
2022-02-16 20:23:11 +00:00
}
private var hidePlayerButton: some View {
button("Hide", systemImage: "chevron.down") {
2022-02-16 20:23:11 +00:00
player.hide()
}
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 {
HStack(spacing: 20) {
2022-08-14 17:06:22 +00:00
fullscreenButton
2022-04-16 20:50:37 +00:00
2022-08-18 22:40:46 +00:00
pipButton
2022-08-14 17:06:22 +00:00
#if os(iOS)
lockOrientationButton
#endif
2022-06-07 21:27:48 +00:00
2022-08-14 17:06:22 +00:00
Spacer()
2022-06-07 22:05:16 +00:00
2022-08-14 17:06:22 +00:00
settingsButton
closeVideoButton
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-08-14 17:06:22 +00:00
private var settingsButton: some View {
button("settings", systemImage: "gearshape", active: model.presentingControlsOverlay) {
withAnimation(Self.animation) {
model.presentingControlsOverlay.toggle()
}
}
#if os(tvOS)
.focused($focusedField, equals: .settings)
#endif
}
private var closeVideoButton: some View {
button("Close", systemImage: "xmark") {
player.closeCurrentItem()
}
2022-08-14 17:06:22 +00:00
#if os(tvOS)
.focused($focusedField, equals: .close)
#endif
}
2022-06-07 22:05:16 +00:00
private var musicModeButton: some View {
button("Music Mode", systemImage: "music.note", background: false, active: player.musicMode, action: player.toggleMusicMode)
2022-06-07 22:05:16 +00:00
}
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-07-10 23:26:35 +00:00
#if os(iOS)
private var lockOrientationButton: some View {
button("Lock Rotation", systemImage: player.lockedOrientation.isNil ? "lock.rotation.open" : "lock.rotation", active: !player.lockedOrientation.isNil) {
if player.lockedOrientation.isNil {
let orientationMask = OrientationTracker.shared.currentInterfaceOrientationMask
player.lockedOrientation = orientationMask
Orientation.lockOrientation(orientationMask)
} else {
player.lockedOrientation = nil
Orientation.lockOrientation(.allButUpsideDown, andRotateTo: OrientationTracker.shared.currentInterfaceOrientation)
}
}
}
#endif
var floatingControls: some View {
2022-02-16 20:23:11 +00:00
HStack {
HStack(spacing: 20) {
togglePlayButton
seekBackwardButton
seekForwardButton
2022-02-16 20:23:11 +00:00
}
.frame(maxWidth: .infinity, alignment: .leading)
2022-02-16 20:23:11 +00:00
Spacer()
HStack(spacing: 20) {
2022-07-10 22:24:56 +00:00
playbackModeButton
restartVideoButton
advanceToNextItemButton
2022-06-26 12:55:23 +00:00
#if !os(tvOS)
musicModeButton
2022-08-14 17:06:22 +00:00
#else
settingsButton
closeVideoButton
2022-06-26 12:55:23 +00:00
#endif
}
.frame(maxWidth: .infinity, alignment: .trailing)
2022-02-16 20:23:11 +00:00
}
.font(.system(size: 20))
2022-02-16 20:23:11 +00:00
}
2022-07-10 22:24:56 +00:00
var playbackModeButton: some View {
button("Playback Mode", systemImage: player.playbackMode.systemImage, background: false) {
player.playbackMode = player.playbackMode.next()
model.objectWillChange.send()
2022-07-10 22:24:56 +00:00
}
}
var seekBackwardButton: some View {
button("Seek Backward", systemImage: "gobackward.10", size: 25, cornerRadius: 5, background: false) {
player.backend.seek(relative: .secondsInDefaultTimescale(-10))
}
2022-07-21 22:44:21 +00:00
.disabled(player.liveStreamInAVPlayer)
#if os(tvOS)
2022-07-21 22:44:21 +00:00
.focused($focusedField, equals: .backward)
#else
2022-07-21 22:44:21 +00:00
.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))
}
2022-07-21 22:44:21 +00:00
.disabled(player.liveStreamInAVPlayer)
#if os(tvOS)
2022-07-21 22:44:21 +00:00
.focused($focusedField, equals: .forward)
#else
2022-07-21 22:44:21 +00:00
.keyboardShortcut("l", modifiers: [])
.keyboardShortcut(KeyEquivalent.rightArrow, modifiers: [])
#endif
}
private var restartVideoButton: some View {
button("Restart video", systemImage: "backward.end.fill", size: 25, cornerRadius: 5, background: false) {
player.backend.seek(to: 0.0)
}
}
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()
}
#if os(tvOS)
.focused($focusedField, equals: .play)
#else
.keyboardShortcut("p")
.keyboardShortcut(.space)
#endif
.disabled(model.isLoadingVideo)
}
2022-02-16 20:23:11 +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-07-10 22:24:56 +00:00
.disabled(!player.isAdvanceToNextItemAvailable)
2022-02-16 20:23:11 +00:00
}
func button(
_ label: String,
2022-06-14 22:41:49 +00:00
systemImage: String? = nil,
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,
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 {
2022-08-14 17:06:22 +00:00
#if os(tvOS)
let useBackground = false
#else
let useBackground = background
#endif
return Button {
2022-02-16 20:23:11 +00:00
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
}
.font(.system(size: 13))
2022-02-27 20:31:17 +00:00
.buttonStyle(.plain)
.foregroundColor(active ? Color("AppRedColor") : .primary)
2022-06-14 22:41:49 +00:00
.frame(width: width ?? size, height: height ?? size)
2022-08-14 17:06:22 +00:00
.modifier(ControlBackgroundModifier(enabled: useBackground))
.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)
player.playingFullScreen || verticalSizeClass == .compact
2022-02-27 20:31:17 +00:00
#else
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 {
ZStack {
2022-05-27 23:23:50 +00:00
Color.gray
2022-06-07 21:27:48 +00:00
PlayerControls(player: PlayerModel(), thumbnails: ThumbnailsModel())
.injectFixtureEnvironmentObjects()
}
2022-02-16 20:23:11 +00:00
}
}