mirror of
https://github.com/yattee/yattee.git
synced 2024-12-25 06:53:42 +00:00
421 lines
14 KiB
Swift
421 lines
14 KiB
Swift
import Defaults
|
|
import Foundation
|
|
import SDWebImageSwiftUI
|
|
import SwiftUI
|
|
import SwiftUIPager
|
|
|
|
struct VideoDetails: View {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
|
|
var sidebarQueue: Bool
|
|
var fullScreen: Bool
|
|
|
|
@State private var subscribed = false
|
|
@State private var subscriptionToggleButtonDisabled = false
|
|
|
|
@StateObject private var page: Page = .first()
|
|
|
|
@Environment(\.navigationStyle) private var navigationStyle
|
|
|
|
@EnvironmentObject<AccountsModel> private var accounts
|
|
@EnvironmentObject<CommentsModel> private var comments
|
|
@EnvironmentObject<NavigationModel> private var navigation
|
|
@EnvironmentObject<PlayerModel> private var player
|
|
@EnvironmentObject<RecentsModel> private var recents
|
|
@EnvironmentObject<SubscriptionsModel> private var subscriptions
|
|
|
|
@Default(.showKeywords) private var showKeywords
|
|
@Default(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
|
|
@Default(.controlsBarInPlayer) private var controlsBarInPlayer
|
|
|
|
var currentPage: DetailsPage {
|
|
DetailsPage.allCases.first { $0.index == page.index } ?? .info
|
|
}
|
|
|
|
var video: Video? {
|
|
player.currentVideo
|
|
}
|
|
|
|
func pageButton(
|
|
_ label: String,
|
|
_ symbolName: String,
|
|
_ destination: DetailsPage,
|
|
pageChangeAction: (() -> Void)? = nil
|
|
) -> some View {
|
|
Button(action: {
|
|
page.update(.new(index: destination.index))
|
|
pageChangeAction?()
|
|
}) {
|
|
HStack {
|
|
Spacer()
|
|
|
|
HStack(spacing: 4) {
|
|
Image(systemName: symbolName)
|
|
|
|
if playerDetailsPageButtonLabelStyle.text {
|
|
Text(label)
|
|
}
|
|
}
|
|
.frame(minHeight: 15)
|
|
.lineLimit(1)
|
|
.padding(.vertical, 4)
|
|
.foregroundColor(currentPage == destination ? .white : .accentColor)
|
|
|
|
Spacer()
|
|
}
|
|
.contentShape(Rectangle())
|
|
}
|
|
.background(currentPage == destination ? Color.accentColor : .clear)
|
|
.buttonStyle(.plain)
|
|
.font(.system(size: 10).bold())
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 2)
|
|
.stroke(Color.accentColor, lineWidth: 2)
|
|
.foregroundColor(.clear)
|
|
)
|
|
.frame(maxWidth: .infinity)
|
|
}
|
|
|
|
@ViewBuilder func detailsByPage(_ page: DetailsPage) -> some View {
|
|
Group {
|
|
switch page {
|
|
case .info:
|
|
ScrollView(.vertical, showsIndicators: false) {
|
|
detailsPage
|
|
}
|
|
case .chapters:
|
|
ChaptersView()
|
|
.edgesIgnoringSafeArea(.horizontal)
|
|
|
|
case .queue:
|
|
PlayerQueueView(sidebarQueue: sidebarQueue, fullScreen: fullScreen)
|
|
.edgesIgnoringSafeArea(.horizontal)
|
|
|
|
case .related:
|
|
RelatedView()
|
|
.edgesIgnoringSafeArea(.horizontal)
|
|
case .comments:
|
|
CommentsView(embedInScrollView: true)
|
|
.edgesIgnoringSafeArea(.horizontal)
|
|
}
|
|
}
|
|
.contentShape(Rectangle())
|
|
}
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading) {
|
|
Group {
|
|
// Group {
|
|
// subscriptionsSection
|
|
// .border(.red, width: 4)
|
|
//
|
|
// .onChange(of: video) { video in
|
|
// if let video = video {
|
|
// subscribed = subscriptions.isSubscribing(video.channel.id)
|
|
// }
|
|
// }
|
|
// }
|
|
// .padding(.top, 4)
|
|
// .padding(.horizontal)
|
|
|
|
HStack(spacing: 4) {
|
|
pageButton("Info", "info.circle", .info)
|
|
pageButton("Chapters", "bookmark", .chapters)
|
|
pageButton("Comments", "text.bubble", .comments) { comments.load() }
|
|
pageButton("Related", "rectangle.stack.fill", .related)
|
|
pageButton("Queue", "list.number", .queue)
|
|
}
|
|
.onChange(of: player.currentItem) { _ in
|
|
page.update(.moveToFirst)
|
|
}
|
|
.padding(.horizontal)
|
|
.padding(.top, 8)
|
|
}
|
|
.contentShape(Rectangle())
|
|
|
|
Pager(page: page, data: DetailsPage.allCases, id: \.self) {
|
|
detailsByPage($0)
|
|
}
|
|
.onPageWillChange { pageIndex in
|
|
if pageIndex == DetailsPage.comments.index {
|
|
comments.load()
|
|
} else {
|
|
print("comments not loading")
|
|
}
|
|
}
|
|
}
|
|
.onAppear {
|
|
if video.isNil && !sidebarQueue {
|
|
page.update(.new(index: DetailsPage.queue.index))
|
|
}
|
|
|
|
guard video != nil, accounts.app.supportsSubscriptions else {
|
|
subscribed = false
|
|
return
|
|
}
|
|
}
|
|
.onChange(of: sidebarQueue) { queue in
|
|
if queue {
|
|
if currentPage == .related || currentPage == .queue {
|
|
page.update(.moveToFirst)
|
|
}
|
|
} else if video.isNil {
|
|
page.update(.moveToLast)
|
|
}
|
|
}
|
|
.edgesIgnoringSafeArea(.horizontal)
|
|
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
|
|
}
|
|
|
|
var showAddToPlaylistButton: Bool {
|
|
accounts.app.supportsUserPlaylists && accounts.signedIn
|
|
}
|
|
|
|
var subscriptionsSection: some View {
|
|
Group {
|
|
if let video = video {
|
|
HStack(alignment: .center) {
|
|
HStack(spacing: 10) {
|
|
Group {
|
|
// ZStack(alignment: .bottomTrailing) {
|
|
// authorAvatar
|
|
//
|
|
// if subscribed {
|
|
// Image(systemName: "star.circle.fill")
|
|
// .background(Color.background)
|
|
// .clipShape(Circle())
|
|
// .foregroundColor(.secondary)
|
|
// }
|
|
// }
|
|
|
|
// VStack(alignment: .leading, spacing: 4) {
|
|
// Text(video.title)
|
|
// .font(.system(size: 11))
|
|
// .fontWeight(.bold)
|
|
//
|
|
// HStack(spacing: 4) {
|
|
// Text(video.channel.name)
|
|
//
|
|
// if let subscribers = video.channel.subscriptionsString {
|
|
// Text("•")
|
|
// .foregroundColor(.secondary)
|
|
// .opacity(0.3)
|
|
//
|
|
// Text("\(subscribers) subscribers")
|
|
// }
|
|
// }
|
|
// .foregroundColor(.secondary)
|
|
// .font(.caption2)
|
|
// }
|
|
}
|
|
}
|
|
.contentShape(RoundedRectangle(cornerRadius: 12))
|
|
.contextMenu {
|
|
if let video = video {
|
|
Button(action: {
|
|
NavigationModel.openChannel(
|
|
video.channel,
|
|
player: player,
|
|
recents: recents,
|
|
navigation: navigation
|
|
)
|
|
}) {
|
|
Label("\(video.channel.name) Channel", systemImage: "rectangle.stack.fill.badge.person.crop")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var publishedDateSection: some View {
|
|
Group {
|
|
if let video = player.currentVideo {
|
|
HStack(spacing: 4) {
|
|
if let published = video.publishedDate {
|
|
Text(published)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private var contentItem: ContentItem {
|
|
ContentItem(video: player.currentVideo!)
|
|
}
|
|
|
|
private var authorAvatar: some View {
|
|
Group {
|
|
if let video = video, let url = video.channel.thumbnailURL {
|
|
WebImage(url: url)
|
|
.resizable()
|
|
.placeholder {
|
|
Rectangle().fill(Color("PlaceholderColor"))
|
|
}
|
|
.retryOnAppear(true)
|
|
.indicator(.activity)
|
|
.clipShape(Circle())
|
|
.frame(width: 35, height: 35, alignment: .leading)
|
|
}
|
|
}
|
|
}
|
|
|
|
var videoProperties: some View {
|
|
HStack(spacing: 2) {
|
|
publishedDateSection
|
|
Spacer()
|
|
|
|
HStack(spacing: 4) {
|
|
if let views = video?.viewsCount {
|
|
Image(systemName: "eye")
|
|
|
|
Text(views)
|
|
}
|
|
|
|
if let likes = video?.likesCount {
|
|
Image(systemName: "hand.thumbsup")
|
|
|
|
Text(likes)
|
|
}
|
|
|
|
if let likes = video?.dislikesCount {
|
|
Image(systemName: "hand.thumbsdown")
|
|
|
|
Text(likes)
|
|
}
|
|
}
|
|
}
|
|
.font(.system(size: 12))
|
|
.foregroundColor(.secondary)
|
|
}
|
|
|
|
var detailsPage: some View {
|
|
Group {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
if let video = player.currentVideo {
|
|
VStack(spacing: 6) {
|
|
videoProperties
|
|
|
|
Divider()
|
|
}
|
|
.padding(.bottom, 6)
|
|
|
|
VStack(alignment: .leading, spacing: 10) {
|
|
if !player.videoBeingOpened.isNil && (video.description.isNil || video.description!.isEmpty) {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
ForEach(1 ... Int.random(in: 3 ... 5), id: \.self) { _ in
|
|
Text(String(repeating: Video.fixture.description!, count: Int.random(in: 1 ... 4)))
|
|
.redacted(reason: .placeholder)
|
|
}
|
|
}
|
|
} else if let description = video.description {
|
|
Group {
|
|
if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
|
|
Text(description)
|
|
.textSelection(.enabled)
|
|
} else {
|
|
Text(description)
|
|
}
|
|
}
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.font(.system(size: 14))
|
|
.lineSpacing(3)
|
|
} else {
|
|
Text("No description")
|
|
.foregroundColor(.secondary)
|
|
}
|
|
|
|
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)
|
|
.background(Color("KeywordBackgroundColor"))
|
|
.mask(RoundedRectangle(cornerRadius: 3))
|
|
}
|
|
}
|
|
.padding(.bottom, 10)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if !video.isNil, CommentsModel.placement == .info {
|
|
Divider()
|
|
#if os(macOS)
|
|
.padding(.bottom, 20)
|
|
#else
|
|
.padding(.vertical, 10)
|
|
#endif
|
|
}
|
|
}
|
|
.padding(.horizontal)
|
|
|
|
LazyVStack {
|
|
if !video.isNil, CommentsModel.placement == .info {
|
|
CommentsView()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
var showScrollIndicators: Bool {
|
|
#if os(macOS)
|
|
false
|
|
#else
|
|
true
|
|
#endif
|
|
}
|
|
}
|
|
|
|
struct VideoDetails_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
VideoDetails(sidebarQueue: true, fullScreen: false)
|
|
.injectFixtureEnvironmentObjects()
|
|
}
|
|
}
|