2021-11-03 23:14:09 +00:00
|
|
|
import Defaults
|
2021-08-22 19:13:33 +00:00
|
|
|
import Foundation
|
2021-12-17 20:01:05 +00:00
|
|
|
import SDWebImageSwiftUI
|
2021-08-22 19:13:33 +00:00
|
|
|
import SwiftUI
|
2022-06-18 12:39:49 +00:00
|
|
|
import SwiftUIPager
|
2021-08-22 19:13:33 +00:00
|
|
|
|
|
|
|
struct VideoDetails: View {
|
2022-06-18 12:39:49 +00:00
|
|
|
enum DetailsPage: CaseIterable {
|
|
|
|
case info, chapters, comments, related, queue
|
|
|
|
|
|
|
|
var index: Int {
|
|
|
|
switch self {
|
|
|
|
case .info:
|
|
|
|
return 0
|
|
|
|
case .chapters:
|
|
|
|
return 1
|
|
|
|
case .comments:
|
|
|
|
return 2
|
|
|
|
case .related:
|
|
|
|
return 3
|
|
|
|
case .queue:
|
|
|
|
return 4
|
|
|
|
}
|
|
|
|
}
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
var sidebarQueue: Bool
|
2022-06-25 16:33:35 +00:00
|
|
|
@Binding var fullScreen: Bool
|
2021-08-25 22:12:59 +00:00
|
|
|
|
|
|
|
@State private var subscribed = false
|
2022-03-26 18:01:38 +00:00
|
|
|
@State private var subscriptionToggleButtonDisabled = false
|
2021-08-25 22:12:59 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
@StateObject private var page: Page = .first()
|
2021-10-05 20:20:09 +00:00
|
|
|
|
2021-12-17 20:01:05 +00:00
|
|
|
@Environment(\.navigationStyle) private var navigationStyle
|
2021-10-05 20:20:09 +00:00
|
|
|
|
2021-10-20 22:21:50 +00:00
|
|
|
@EnvironmentObject<AccountsModel> private var accounts
|
2022-06-18 12:39:49 +00:00
|
|
|
@EnvironmentObject<CommentsModel> private var comments
|
2021-12-17 20:01:05 +00:00
|
|
|
@EnvironmentObject<NavigationModel> private var navigation
|
2021-10-05 20:20:09 +00:00
|
|
|
@EnvironmentObject<PlayerModel> private var player
|
2021-12-17 20:01:05 +00:00
|
|
|
@EnvironmentObject<RecentsModel> private var recents
|
2021-10-05 20:20:09 +00:00
|
|
|
@EnvironmentObject<SubscriptionsModel> private var subscriptions
|
|
|
|
|
2021-11-03 23:14:09 +00:00
|
|
|
@Default(.showKeywords) private var showKeywords
|
2022-06-18 12:39:49 +00:00
|
|
|
@Default(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
|
2021-11-03 23:14:09 +00:00
|
|
|
|
2022-06-18 12:39:49 +00:00
|
|
|
var currentPage: DetailsPage {
|
|
|
|
DetailsPage.allCases.first { $0.index == page.index } ?? .info
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var video: Video? {
|
2021-12-26 21:14:46 +00:00
|
|
|
player.currentVideo
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
2021-08-22 19:13:33 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
var body: some View {
|
|
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
|
|
ControlsBar(
|
2022-06-30 08:05:32 +00:00
|
|
|
fullScreen: $fullScreen,
|
2022-06-24 23:39:29 +00:00
|
|
|
presentingControls: false,
|
|
|
|
backgroundEnabled: false,
|
|
|
|
borderTop: false,
|
2022-06-25 16:33:35 +00:00
|
|
|
detailsTogglePlayer: false,
|
2022-06-30 08:05:32 +00:00
|
|
|
detailsToggleFullScreen: true
|
2022-06-24 23:39:29 +00:00
|
|
|
)
|
2021-11-02 23:02:02 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
HStack(spacing: 4) {
|
|
|
|
pageButton("Info", "info.circle", .info, !video.isNil)
|
|
|
|
pageButton("Chapters", "bookmark", .chapters, !(video?.chapters.isEmpty ?? true))
|
|
|
|
pageButton("Comments", "text.bubble", .comments, !video.isNil) { comments.load() }
|
|
|
|
pageButton("Related", "rectangle.stack.fill", .related, !video.isNil)
|
2022-06-26 11:31:14 +00:00
|
|
|
pageButton("Queue", "list.number", .queue, !player.queue.isEmpty)
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
2022-06-24 23:39:29 +00:00
|
|
|
.onChange(of: player.currentItem) { _ in
|
|
|
|
page.update(.moveToFirst)
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
2022-06-24 23:39:29 +00:00
|
|
|
.padding(.horizontal)
|
|
|
|
.padding(.vertical, 6)
|
2022-06-18 12:39:49 +00:00
|
|
|
|
|
|
|
Pager(page: page, data: DetailsPage.allCases, id: \.self) {
|
2022-06-26 11:31:14 +00:00
|
|
|
if !player.currentItem.isNil || page.index == DetailsPage.queue.index {
|
|
|
|
detailsByPage($0)
|
|
|
|
} else {
|
|
|
|
VStack {}
|
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
|
|
|
.onPageWillChange { pageIndex in
|
|
|
|
if pageIndex == DetailsPage.comments.index {
|
|
|
|
comments.load()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-10-05 20:20:09 +00:00
|
|
|
.onAppear {
|
2021-11-05 19:57:22 +00:00
|
|
|
if video.isNil && !sidebarQueue {
|
2022-06-18 12:39:49 +00:00
|
|
|
page.update(.new(index: DetailsPage.queue.index))
|
2021-11-03 23:00:17 +00:00
|
|
|
}
|
2021-10-23 10:13:05 +00:00
|
|
|
|
2021-10-20 22:21:50 +00:00
|
|
|
guard video != nil, accounts.app.supportsSubscriptions else {
|
|
|
|
subscribed = false
|
2021-10-05 20:20:09 +00:00
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
2021-10-23 10:13:05 +00:00
|
|
|
.onChange(of: sidebarQueue) { queue in
|
2021-11-03 23:00:17 +00:00
|
|
|
if queue {
|
2022-01-09 15:11:03 +00:00
|
|
|
if currentPage == .related || currentPage == .queue {
|
2022-06-18 12:39:49 +00:00
|
|
|
page.update(.moveToFirst)
|
2021-10-23 10:13:05 +00:00
|
|
|
}
|
2021-11-03 23:00:17 +00:00
|
|
|
} else if video.isNil {
|
2022-06-18 12:39:49 +00:00
|
|
|
page.update(.moveToLast)
|
2021-11-03 23:00:17 +00:00
|
|
|
}
|
2021-10-23 10:13:05 +00:00
|
|
|
}
|
2022-01-05 17:51:19 +00:00
|
|
|
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var publishedDateSection: some View {
|
|
|
|
Group {
|
2021-10-22 20:49:31 +00:00
|
|
|
if let video = player.currentVideo {
|
2021-10-05 20:20:09 +00:00
|
|
|
HStack(spacing: 4) {
|
|
|
|
if let published = video.publishedDate {
|
|
|
|
Text(published)
|
2022-07-11 17:44:25 +00:00
|
|
|
} else {
|
|
|
|
Text("1 century ago").redacted(reason: .placeholder)
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
2021-08-22 19:13:33 +00:00
|
|
|
}
|
|
|
|
}
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-22 19:13:33 +00:00
|
|
|
|
2021-10-26 22:59:59 +00:00
|
|
|
private var contentItem: ContentItem {
|
|
|
|
ContentItem(video: player.currentVideo!)
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
2021-08-25 22:12:59 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
func pageButton(
|
|
|
|
_ label: String,
|
|
|
|
_ symbolName: String,
|
|
|
|
_ destination: DetailsPage,
|
|
|
|
_ active: Bool = true,
|
|
|
|
pageChangeAction: (() -> Void)? = nil
|
|
|
|
) -> some View {
|
|
|
|
Button(action: {
|
|
|
|
page.update(.new(index: destination.index))
|
|
|
|
pageChangeAction?()
|
|
|
|
}) {
|
|
|
|
HStack {
|
|
|
|
Spacer()
|
2022-06-18 12:39:49 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
HStack(spacing: 4) {
|
|
|
|
Image(systemName: symbolName)
|
2022-06-18 12:39:49 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
if playerDetailsPageButtonLabelStyle.text && player.playerSize.width > 450 {
|
|
|
|
Text(label)
|
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
2022-06-24 23:39:29 +00:00
|
|
|
.frame(minHeight: 15)
|
|
|
|
.lineLimit(1)
|
|
|
|
.padding(.vertical, 4)
|
|
|
|
.foregroundColor(currentPage == destination ? .white : (active ? Color.accentColor : .gray))
|
2022-06-18 12:39:49 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
Spacer()
|
|
|
|
}
|
|
|
|
.contentShape(Rectangle())
|
|
|
|
}
|
|
|
|
.background(currentPage == destination ? (active ? Color.accentColor : .gray) : .clear)
|
|
|
|
.buttonStyle(.plain)
|
|
|
|
.font(.system(size: 10).bold())
|
|
|
|
.overlay(
|
|
|
|
RoundedRectangle(cornerRadius: 2)
|
2022-06-26 11:12:32 +00:00
|
|
|
.stroke(active ? Color.accentColor : .gray, lineWidth: 1.2)
|
2022-06-24 23:39:29 +00:00
|
|
|
.foregroundColor(.clear)
|
|
|
|
)
|
|
|
|
.frame(maxWidth: .infinity)
|
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
@ViewBuilder func detailsByPage(_ page: DetailsPage) -> some View {
|
|
|
|
Group {
|
|
|
|
switch page {
|
|
|
|
case .info:
|
|
|
|
ScrollView(.vertical, showsIndicators: false) {
|
|
|
|
detailsPage
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
2022-06-24 23:39:29 +00:00
|
|
|
case .chapters:
|
|
|
|
ChaptersView()
|
2022-06-18 12:39:49 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
case .queue:
|
2022-06-25 16:33:35 +00:00
|
|
|
PlayerQueueView(sidebarQueue: sidebarQueue, fullScreen: $fullScreen)
|
2022-06-18 12:39:49 +00:00
|
|
|
|
2022-06-24 23:39:29 +00:00
|
|
|
case .related:
|
|
|
|
RelatedView()
|
|
|
|
case .comments:
|
|
|
|
CommentsView(embedInScrollView: true)
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
|
|
|
}
|
2022-06-24 23:39:29 +00:00
|
|
|
.contentShape(Rectangle())
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
|
|
|
|
2021-10-05 20:20:09 +00:00
|
|
|
var detailsPage: some View {
|
|
|
|
Group {
|
2022-05-29 13:35:16 +00:00
|
|
|
VStack(alignment: .leading, spacing: 0) {
|
2021-12-26 21:14:46 +00:00
|
|
|
if let video = player.currentVideo {
|
2022-01-05 17:51:19 +00:00
|
|
|
VStack(spacing: 6) {
|
2022-06-18 12:39:49 +00:00
|
|
|
videoProperties
|
2021-08-22 19:13:33 +00:00
|
|
|
|
2022-01-05 17:51:19 +00:00
|
|
|
Divider()
|
|
|
|
}
|
2022-05-29 13:35:16 +00:00
|
|
|
.padding(.bottom, 6)
|
2021-08-22 19:13:33 +00:00
|
|
|
|
2021-12-06 18:11:19 +00:00
|
|
|
VStack(alignment: .leading, spacing: 10) {
|
2022-06-18 12:39:49 +00:00
|
|
|
if !player.videoBeingOpened.isNil && (video.description.isNil || video.description!.isEmpty) {
|
|
|
|
VStack(alignment: .leading, spacing: 0) {
|
2022-07-11 17:44:25 +00:00
|
|
|
ForEach(1 ... Int.random(in: 2 ... 5), id: \.self) { _ in
|
|
|
|
Text(String(repeating: Video.fixture.description ?? "", count: Int.random(in: 1 ... 4)))
|
2022-07-11 11:28:38 +00:00
|
|
|
}
|
2022-06-18 12:39:49 +00:00
|
|
|
}
|
2022-07-11 17:44:25 +00:00
|
|
|
.redacted(reason: .placeholder)
|
2022-06-18 12:39:49 +00:00
|
|
|
} else if let description = video.description {
|
2021-12-06 18:11:19 +00:00
|
|
|
Group {
|
|
|
|
if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
|
|
|
|
Text(description)
|
2022-07-10 17:51:46 +00:00
|
|
|
#if !os(tvOS)
|
2021-12-06 18:11:19 +00:00
|
|
|
.textSelection(.enabled)
|
2022-07-10 17:51:46 +00:00
|
|
|
#endif
|
2021-12-06 18:11:19 +00:00
|
|
|
} else {
|
|
|
|
Text(description)
|
|
|
|
}
|
2021-11-28 14:37:55 +00:00
|
|
|
}
|
2021-12-06 18:11:19 +00:00
|
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
|
|
.font(.system(size: 14))
|
|
|
|
.lineSpacing(3)
|
|
|
|
} else {
|
|
|
|
Text("No description")
|
|
|
|
.foregroundColor(.secondary)
|
2021-11-28 14:37:55 +00:00
|
|
|
}
|
2021-08-22 19:13:33 +00:00
|
|
|
|
2021-12-06 18:11:19 +00:00
|
|
|
if showKeywords {
|
|
|
|
ScrollView(.horizontal, showsIndicators: showScrollIndicators) {
|
|
|
|
HStack {
|
|
|
|
ForEach(video.keywords, id: \.self) { keyword in
|
|
|
|
HStack(alignment: .center, spacing: 0) {
|
|
|
|
Text("#")
|
|
|
|
.font(.system(size: 11).bold())
|
|
|
|
|
|
|
|
Text(keyword)
|
|
|
|
.frame(maxWidth: 500)
|
|
|
|
}
|
|
|
|
.font(.caption)
|
|
|
|
.foregroundColor(.white)
|
|
|
|
.padding(.vertical, 4)
|
|
|
|
.padding(.horizontal, 8)
|
2021-12-29 18:40:25 +00:00
|
|
|
.background(Color("KeywordBackgroundColor"))
|
2021-12-06 18:11:19 +00:00
|
|
|
.mask(RoundedRectangle(cornerRadius: 3))
|
2021-11-03 23:14:09 +00:00
|
|
|
}
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
2021-12-06 18:11:19 +00:00
|
|
|
.padding(.bottom, 10)
|
2021-10-05 20:20:09 +00:00
|
|
|
}
|
|
|
|
}
|
2021-08-22 19:13:33 +00:00
|
|
|
}
|
|
|
|
}
|
2021-12-06 18:11:19 +00:00
|
|
|
}
|
|
|
|
.padding(.horizontal)
|
2021-08-22 19:13:33 +00:00
|
|
|
}
|
2021-08-25 22:12:59 +00:00
|
|
|
}
|
|
|
|
|
2022-07-05 17:21:13 +00:00
|
|
|
@ViewBuilder var videoProperties: some View {
|
2022-07-11 17:44:25 +00:00
|
|
|
HStack(spacing: 2) {
|
|
|
|
publishedDateSection
|
2022-07-05 17:21:13 +00:00
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
Spacer()
|
2022-06-24 23:39:29 +00:00
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
HStack(spacing: 4) {
|
|
|
|
Image(systemName: "eye")
|
2022-06-24 23:39:29 +00:00
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
if let views = video?.viewsCount, player.videoBeingOpened.isNil {
|
|
|
|
Text(views)
|
|
|
|
} else {
|
|
|
|
Text("1,234M").redacted(reason: .placeholder)
|
2022-06-24 23:39:29 +00:00
|
|
|
}
|
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
Image(systemName: "hand.thumbsup")
|
2022-06-24 23:39:29 +00:00
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
if let likes = video?.likesCount, player.videoBeingOpened.isNil {
|
|
|
|
Text(likes)
|
|
|
|
} else {
|
|
|
|
Text("1,234M").redacted(reason: .placeholder)
|
|
|
|
}
|
2022-07-05 17:21:13 +00:00
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
if Defaults[.enableReturnYouTubeDislike] {
|
|
|
|
Image(systemName: "hand.thumbsdown")
|
2022-07-05 17:21:13 +00:00
|
|
|
|
2022-07-11 17:44:25 +00:00
|
|
|
if let dislikes = video?.dislikesCount, player.videoBeingOpened.isNil {
|
|
|
|
Text(dislikes)
|
|
|
|
} else {
|
|
|
|
Text("1,234M").redacted(reason: .placeholder)
|
2022-07-05 17:21:13 +00:00
|
|
|
}
|
2022-06-24 23:39:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.font(.system(size: 12))
|
|
|
|
.foregroundColor(.secondary)
|
|
|
|
}
|
|
|
|
|
2021-08-25 22:12:59 +00:00
|
|
|
func videoDetail(label: String, value: String, symbol: String) -> some View {
|
|
|
|
VStack(spacing: 4) {
|
|
|
|
HStack(spacing: 2) {
|
|
|
|
Image(systemName: symbol)
|
|
|
|
|
|
|
|
Text(label.uppercased())
|
|
|
|
}
|
|
|
|
.font(.system(size: 9))
|
|
|
|
.opacity(0.6)
|
|
|
|
|
|
|
|
Text(value)
|
|
|
|
}
|
|
|
|
|
|
|
|
.frame(maxWidth: 100)
|
2021-08-22 19:13:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
var showScrollIndicators: Bool {
|
|
|
|
#if os(macOS)
|
|
|
|
false
|
|
|
|
#else
|
|
|
|
true
|
|
|
|
#endif
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-25 22:12:59 +00:00
|
|
|
struct VideoDetails_Previews: PreviewProvider {
|
|
|
|
static var previews: some View {
|
2022-06-25 16:33:35 +00:00
|
|
|
VideoDetails(sidebarQueue: true, fullScreen: .constant(false))
|
2021-09-29 11:45:00 +00:00
|
|
|
.injectFixtureEnvironmentObjects()
|
2021-08-22 19:13:33 +00:00
|
|
|
}
|
|
|
|
}
|