New video details

Shared/Player/Video Details/ChapterView.swift

@@ -0,0 +1,63 @@
+import Foundation
+import SDWebImageSwiftUI
+import SwiftUI
+
+struct ChapterView: View {
+    var chapter: Chapter
+
+    @EnvironmentObject<PlayerModel> private var player
+
+    var body: some View {
+        Button {
+            player.backend.seek(to: chapter.start, seekType: .userInteracted)
+        } label: {
+            HStack(spacing: 12) {
+                if !chapter.image.isNil {
+                    smallImage(chapter)
+                }
+
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(chapter.title)
+                        .font(.headline)
+                    Text(chapter.start.formattedAsPlaybackTime(allowZero: true) ?? "")
+                        .font(.system(.subheadline).monospacedDigit())
+                        .foregroundColor(.secondary)
+                }
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .contentShape(Rectangle())
+        }
+        .buttonStyle(.plain)
+    }
+
+    @ViewBuilder func smallImage(_ chapter: Chapter) -> some View {
+        WebImage(url: chapter.image, options: [.lowPriority])
+            .resizable()
+            .placeholder {
+                ProgressView()
+            }
+            .indicator(.activity)
+        #if os(tvOS)
+            .frame(width: thumbnailWidth, height: 140)
+            .mask(RoundedRectangle(cornerRadius: 12))
+        #else
+            .frame(width: thumbnailWidth, height: 60)
+            .mask(RoundedRectangle(cornerRadius: 6))
+        #endif
+    }
+
+    private var thumbnailWidth: Double {
+        #if os(tvOS)
+            250
+        #else
+            100
+        #endif
+    }
+}
+
+struct ChapterView_Preview: PreviewProvider {
+    static var previews: some View {
+        ChapterView(chapter: .init(title: "Chapter", start: 30))
+            .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/ChaptersView.swift

@@ -0,0 +1,38 @@
+import Foundation
+import SDWebImageSwiftUI
+import SwiftUI
+
+struct ChaptersView: View {
+    @EnvironmentObject<PlayerModel> private var player
+
+    var body: some View {
+        if let chapters = player.currentVideo?.chapters, !chapters.isEmpty {
+            List {
+                Section(header: Text("Chapters")) {
+                    ForEach(chapters) { chapter in
+                        ChapterView(chapter: chapter)
+                    }
+                }
+                .listRowBackground(Color.clear)
+            }
+            #if os(macOS)
+            .listStyle(.inset)
+            #elseif os(iOS)
+            .listStyle(.grouped)
+            .backport
+            .scrollContentBackground(false)
+            #else
+            .listStyle(.plain)
+            #endif
+        } else {
+            NoCommentsView(text: "No chapters information available".localized(), systemImage: "xmark.circle.fill")
+        }
+    }
+}
+
+struct ChaptersView_Previews: PreviewProvider {
+    static var previews: some View {
+        ChaptersView()
+            .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/CommentView.swift

@@ -0,0 +1,275 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+struct CommentView: View {
+    let comment: Comment
+    @Binding var repliesID: Comment.ID?
+
+    @State private var subscribed = false
+
+    #if os(iOS)
+        @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+    #endif
+
+    @Environment(\.colorScheme) private var colorScheme
+    @Environment(\.navigationStyle) private var navigationStyle
+
+    @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
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            HStack(alignment: .center, spacing: 10) {
+                HStack(spacing: 10) {
+                    ZStack(alignment: .bottomTrailing) {
+                        authorAvatar
+
+                        if subscribed {
+                            Image(systemName: "star.circle.fill")
+                            #if os(tvOS)
+                                .background(Color.background(scheme: colorScheme))
+                            #else
+                                .background(Color.background)
+                            #endif
+                                .clipShape(Circle())
+                                .foregroundColor(.secondary)
+                        }
+                    }
+                    .onAppear {
+                        subscribed = subscriptions.isSubscribing(comment.channel.id)
+                    }
+
+                    authorAndTime
+                }
+                .contextMenu {
+                    Button(action: openChannelAction) {
+                        Label("\(comment.channel.name) Channel", systemImage: "rectangle.stack.fill.badge.person.crop")
+                    }
+                }
+
+                Spacer()
+
+                Group {
+                    #if os(iOS)
+                        if horizontalSizeClass == .regular {
+                            Group {
+                                statusIcons
+                                likes
+                            }
+                        } else {
+                            VStack(alignment: .trailing, spacing: 8) {
+                                likes
+                                statusIcons
+                            }
+                        }
+                    #else
+                        statusIcons
+                        likes
+                    #endif
+                }
+            }
+            #if os(tvOS)
+            .font(.system(size: 25).bold())
+            #else
+            .font(.system(size: 15))
+            #endif
+
+            Group {
+                commentText
+
+                if comment.hasReplies {
+                    HStack(spacing: repliesButtonStackSpacing) {
+                        repliesButton
+
+                        ProgressView()
+                            .scaleEffect(progressViewScale, anchor: .center)
+                            .opacity(repliesID == comment.id && !comments.repliesLoaded ? 1 : 0)
+                            .frame(maxHeight: 0)
+                    }
+
+                    if comment.id == repliesID {
+                        repliesList
+                    }
+                }
+            }
+        }
+        #if os(tvOS)
+        .padding(.horizontal, 20)
+        #endif
+        .padding(.bottom, 10)
+    }
+
+    private var authorAvatar: some View {
+        WebImage(url: URL(string: comment.authorAvatarURL)!, options: [.lowPriority])
+            .resizable()
+            .placeholder {
+                Rectangle().fill(Color("PlaceholderColor"))
+            }
+            .retryOnAppear(true)
+            .indicator(.activity)
+            .mask(RoundedRectangle(cornerRadius: 60))
+        #if os(tvOS)
+            .frame(width: 80, height: 80, alignment: .leading)
+            .focusable()
+        #else
+            .frame(width: 45, height: 45, alignment: .leading)
+        #endif
+    }
+
+    private var authorAndTime: some View {
+        VStack(alignment: .leading) {
+            Text(comment.author)
+            #if os(tvOS)
+                .font(.system(size: 30).bold())
+            #else
+                .font(.system(size: 14).bold())
+            #endif
+
+            Text(comment.time)
+                .font(.caption2)
+                .foregroundColor(.secondary)
+        }
+        .lineLimit(1)
+    }
+
+    private var statusIcons: some View {
+        HStack(spacing: 15) {
+            if comment.pinned {
+                Image(systemName: "pin.fill")
+            }
+            if comment.hearted {
+                Image(systemName: "heart.fill")
+            }
+        }
+        #if !os(tvOS)
+        .font(.system(size: 12))
+        #endif
+        .foregroundColor(.secondary)
+    }
+
+    private var likes: some View {
+        Group {
+            if comment.likeCount > 0 {
+                HStack(spacing: 5) {
+                    Image(systemName: "hand.thumbsup")
+                    Text("\(comment.likeCount.formattedAsAbbreviation())")
+                }
+                #if !os(tvOS)
+                .font(.system(size: 12))
+                #endif
+            }
+        }
+        .foregroundColor(.secondary)
+    }
+
+    private var repliesButton: some View {
+        Button {
+            repliesID = repliesID == comment.id ? nil : comment.id
+
+            guard !repliesID.isNil, !comment.repliesPage.isNil else {
+                return
+            }
+
+            comments.loadReplies(page: comment.repliesPage!)
+        } label: {
+            HStack(spacing: 5) {
+                Image(systemName: repliesID == comment.id ? "arrow.turn.left.up" : "arrow.turn.right.down")
+                Text("Replies")
+            }
+            #if os(tvOS)
+            .padding(10)
+            #endif
+        }
+        .buttonStyle(.plain)
+        .padding(.vertical, 2)
+        #if os(tvOS)
+            .padding(.leading, 5)
+        #else
+            .font(.system(size: 13))
+            .foregroundColor(.secondary)
+        #endif
+    }
+
+    private var repliesButtonStackSpacing: Double {
+        #if os(tvOS)
+            24
+        #elseif os(iOS)
+            4
+        #else
+            2
+        #endif
+    }
+
+    private var progressViewScale: Double {
+        #if os(macOS)
+            0.4
+        #else
+            0.6
+        #endif
+    }
+
+    private var repliesList: some View {
+        Group {
+            let last = comments.replies.last
+            ForEach(comments.replies) { comment in
+                CommentView(comment: comment, repliesID: $repliesID)
+                #if os(tvOS)
+                    .focusable()
+                #endif
+
+                if comment != last {
+                    Divider()
+                        .padding(.vertical, 5)
+                }
+            }
+        }
+        .padding(.leading, 22)
+    }
+
+    private var commentText: some View {
+        Group {
+            let text = Text(comment.text)
+            #if os(macOS)
+                .font(.system(size: 14))
+            #elseif os(iOS)
+                .font(.system(size: 15))
+            #endif
+                .lineSpacing(3)
+                .fixedSize(horizontal: false, vertical: true)
+
+            if #available(iOS 15.0, macOS 12.0, *) {
+                text
+                #if !os(tvOS)
+                .textSelection(.enabled)
+                #endif
+            } else {
+                text
+            }
+        }
+    }
+
+    private func openChannelAction() {
+        NavigationModel.openChannel(
+            comment.channel,
+            player: player,
+            recents: recents,
+            navigation: navigation,
+            navigationStyle: navigationStyle
+        )
+    }
+}
+
+struct CommentView_Previews: PreviewProvider {
+    static var fixture: Comment {
+        Comment.fixture
+    }
+
+    static var previews: some View {
+        CommentView(comment: fixture, repliesID: .constant(fixture.id))
+            .environmentObject(SubscriptionsModel())
+            .padding(5)
+    }
+}

Shared/Player/Video Details/CommentsView.swift

@@ -0,0 +1,53 @@
+import SwiftUI
+
+struct CommentsView: View {
+    var embedInScrollView = false
+    @State private var repliesID: Comment.ID?
+
+    @EnvironmentObject<CommentsModel> private var comments
+
+    var body: some View {
+        Group {
+            if comments.disabled {
+                NoCommentsView(text: "Comments are disabled".localized(), systemImage: "xmark.circle.fill")
+            } else if comments.loaded && comments.all.isEmpty {
+                NoCommentsView(text: "No comments".localized(), systemImage: "0.circle.fill")
+            } else if !comments.loaded {
+                PlaceholderProgressView()
+            } else {
+                let last = comments.all.last
+                let commentsStack = LazyVStack {
+                    ForEach(comments.all) { comment in
+                        CommentView(comment: comment, repliesID: $repliesID)
+                            .onAppear {
+                                comments.loadNextPageIfNeeded(current: comment)
+                            }
+                            .borderBottom(height: comment != last ? 0.5 : 0, color: Color("ControlsBorderColor"))
+                    }
+                }
+
+                if embedInScrollView {
+                    ScrollView(.vertical, showsIndicators: false) {
+                        commentsStack
+                    }
+                } else {
+                    commentsStack
+                }
+            }
+        }
+        .padding(.horizontal)
+    }
+}
+
+struct CommentsView_Previews: PreviewProvider {
+    static var previews: some View {
+        if #available(iOS 15.0, macOS 12.0, tvOS 15.0, *) {
+            CommentsView()
+                .previewInterfaceOrientation(.landscapeRight)
+                .injectFixtureEnvironmentObjects()
+        }
+
+        CommentsView()
+            .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/InspectorView.swift

@@ -0,0 +1,85 @@
+import SwiftUI
+
+struct InspectorView: View {
+    var video: Video?
+
+    @EnvironmentObject<PlayerModel> private var player
+
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 4) {
+                if let video {
+                    Group {
+                        if player.activeBackend == .mpv, player.mpvBackend.videoFormat != "unknown" {
+                            videoDetailGroupHeading("Video")
+
+                            videoDetailRow("Format", value: player.mpvBackend.videoFormat)
+                            videoDetailRow("Codec", value: player.mpvBackend.videoCodec)
+                            videoDetailRow("Hardware Decoder", value: player.mpvBackend.hwDecoder)
+                            videoDetailRow("Driver", value: player.mpvBackend.currentVo)
+                            videoDetailRow("Size", value: player.formattedSize)
+                            videoDetailRow("FPS", value: player.mpvBackend.formattedOutputFps)
+                        } else if player.activeBackend == .appleAVPlayer, let width = player.backend.videoWidth, width > 0 {
+                            videoDetailGroupHeading("Video")
+                            videoDetailRow("Size", value: player.formattedSize)
+                        }
+                    }
+
+                    if player.activeBackend == .mpv, player.mpvBackend.audioFormat != "unknown" {
+                        Group {
+                            videoDetailGroupHeading("Audio")
+                            videoDetailRow("Format", value: player.mpvBackend.audioFormat)
+                            videoDetailRow("Codec", value: player.mpvBackend.audioCodec)
+                            videoDetailRow("Driver", value: player.mpvBackend.currentAo)
+                            videoDetailRow("Channels", value: player.mpvBackend.audioChannels)
+                            videoDetailRow("Sample Rate", value: player.mpvBackend.audioSampleRate)
+                        }
+                    }
+
+                    if video.localStream != nil || video.localStreamFileExtension != nil {
+                        videoDetailGroupHeading("File")
+                    }
+
+                    if let fileExtension = video.localStreamFileExtension {
+                        videoDetailRow("File Extension", value: fileExtension)
+                    }
+
+                    if let url = video.localStream?.localURL, video.localStreamIsRemoteURL {
+                        videoDetailRow("URL", value: url.absoluteString)
+                    }
+                }
+            }
+        }
+        .padding(.horizontal)
+    }
+
+    @ViewBuilder func videoDetailGroupHeading(_ heading: String) -> some View {
+        Text(heading.uppercased())
+            .font(.footnote)
+            .foregroundColor(.secondary)
+    }
+
+    @ViewBuilder func videoDetailRow(_ detail: String, value: String) -> some View {
+        HStack {
+            Text(detail)
+                .foregroundColor(.secondary)
+            Spacer()
+            let value = Text(value)
+            if #available(iOS 15.0, macOS 12.0, *) {
+                value
+                #if !os(tvOS)
+                .textSelection(.enabled)
+                #endif
+            } else {
+                value
+            }
+        }
+        .font(.caption)
+    }
+}
+
+struct InspectorView_Previews: PreviewProvider {
+    static var previews: some View {
+        InspectorView(video: .fixture)
+    }
+}

Shared/Player/Video Details/NoCommentsView.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+
+struct NoCommentsView: View {
+    var text: String
+    var systemImage: String
+
+    var body: some View {
+        VStack(alignment: .center, spacing: 10) {
+            Image(systemName: systemImage)
+                .font(.system(size: 36))
+
+            Text(text)
+            #if !os(tvOS)
+                .font(.system(size: 12))
+            #endif
+        }
+        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: .infinity)
+        #if !os(tvOS)
+            .foregroundColor(.secondary)
+        #endif
+    }
+}
+
+struct NoCommentsView_Previews: PreviewProvider {
+    static var previews: some View {
+        NoCommentsView(text: "No comments", systemImage: "xmark.circle.fill")
+    }
+}

Shared/Player/Video Details/PlayerQueueView.swift

@@ -0,0 +1,146 @@
+import Defaults
+import Foundation
+import SwiftUI
+
+struct PlayerQueueView: View {
+    var sidebarQueue: Bool
+    @Binding var fullScreen: Bool
+
+    @FetchRequest(sortDescriptors: [.init(key: "watchedAt", ascending: false)])
+    var watches: FetchedResults<Watch>
+
+    @EnvironmentObject<AccountsModel> private var accounts
+    @EnvironmentObject<NavigationModel> private var navigation
+    @EnvironmentObject<PlaylistsModel> private var playlists
+    @EnvironmentObject<PlayerModel> private var player
+
+    @Default(.saveHistory) private var saveHistory
+
+    var body: some View {
+        List {
+            Group {
+                if player.playbackMode == .related {
+                    autoplaying
+                }
+                playingNext
+                if sidebarQueue {
+                    related
+                }
+            }
+            .listRowBackground(Color.clear)
+            #if !os(iOS)
+                .padding(.vertical, 5)
+                .listRowInsets(EdgeInsets())
+            #endif
+        }
+        #if os(macOS)
+        .listStyle(.inset)
+        #elseif os(iOS)
+        .listStyle(.grouped)
+        .backport
+        .scrollContentBackground(false)
+        #else
+        .listStyle(.plain)
+        #endif
+    }
+
+    @ViewBuilder var autoplaying: some View {
+        Section(header: autoplayingHeader) {
+            if let item = player.autoplayItem {
+                PlayerQueueRow(item: item, autoplay: true)
+            } else {
+                Group {
+                    if player.currentItem.isNil {
+                        Text("Not Playing")
+                    } else {
+                        Text("Finding something to play...")
+                    }
+                }
+                .foregroundColor(.secondary)
+            }
+        }
+    }
+
+    var autoplayingHeader: some View {
+        HStack {
+            Text("Autoplaying Next")
+            Spacer()
+            Button {
+                player.setRelatedAutoplayItem()
+            } label: {
+                Label("Find Other", systemImage: "arrow.triangle.2.circlepath.circle")
+                    .labelStyle(.iconOnly)
+            }
+            .disabled(player.currentItem.isNil)
+            .buttonStyle(.plain)
+        }
+    }
+
+    var playingNext: some View {
+        Section(header: Text("Queue")) {
+            if player.queue.isEmpty {
+                Text("Queue is empty")
+                    .foregroundColor(.secondary)
+            }
+
+            ForEach(player.queue) { item in
+                PlayerQueueRow(item: item, fullScreen: $fullScreen)
+                    .onAppear {
+                        player.loadQueueVideoDetails(item)
+                    }
+                    .contextMenu {
+                        removeButton(item)
+                        removeAllButton()
+
+                        if let video = item.video {
+                            VideoContextMenuView(video: video)
+                        }
+                    }
+            }
+        }
+    }
+
+    private var visibleWatches: [Watch] {
+        watches.filter { $0.videoID != player.currentVideo?.videoID }
+    }
+
+    @ViewBuilder private var related: some View {
+        if let related = player.currentVideo?.related, !related.isEmpty {
+            Section(header: Text("Related")) {
+                ForEach(related) { video in
+                    PlayerQueueRow(item: PlayerQueueItem(video), fullScreen: $fullScreen)
+                        .contextMenu {
+                            VideoContextMenuView(video: video)
+                        }
+                        .id(video.videoID)
+                }
+            }
+            .transaction { t in t.disablesAnimations = true }
+        }
+    }
+
+    private func removeButton(_ item: PlayerQueueItem) -> some View {
+        Button {
+            player.remove(item)
+        } label: {
+            Label("Remove from the queue", systemImage: "trash")
+        }
+    }
+
+    private func removeAllButton() -> some View {
+        Button {
+            player.removeQueueItems()
+        } label: {
+            Label("Clear the queue", systemImage: "trash.fill")
+        }
+    }
+}
+
+struct PlayerQueueView_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack {
+            PlayerQueueView(sidebarQueue: true, fullScreen: .constant(true))
+        }
+        .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/VideoActions.swift

@@ -0,0 +1,142 @@
+import Defaults
+import SwiftUI
+
+struct VideoActions: View {
+    @EnvironmentObject<AccountsModel> private var accounts
+    @EnvironmentObject<NavigationModel> private var navigation
+    @EnvironmentObject<SubscriptionsModel> private var subscriptions
+    @EnvironmentObject<PlayerModel> private var player
+
+    var video: Video?
+
+    var body: some View {
+        HStack {
+            if let video {
+                ShareButton(contentItem: .init(video: video)) {
+                    actionButton("Share", systemImage: "square.and.arrow.up")
+                }
+
+                Spacer()
+
+                actionButton("Add", systemImage: "text.badge.plus") {
+                    navigation.presentAddToPlaylist(video)
+                }
+                if accounts.app.supportsSubscriptions, accounts.signedIn {
+                    Spacer()
+                    if subscriptions.isSubscribing(video.channel.id) {
+                        actionButton("Unsubscribe", systemImage: "xmark.circle") {
+                            #if os(tvOS)
+                                subscriptions.unsubscribe(video.channel.id)
+                            #else
+                                navigation.presentUnsubscribeAlert(video.channel, subscriptions: subscriptions)
+                            #endif
+                        }
+                    } else {
+                        actionButton("Subscribe", systemImage: "star.circle") {
+                            subscriptions.subscribe(video.channel.id) {
+                                navigation.sidebarSectionChanged.toggle()
+                            }
+                        }
+                    }
+                }
+            }
+            Spacer()
+
+            actionButton("Hide", systemImage: "chevron.down") {
+                player.hide(animate: true)
+            }
+            if player.currentItem != nil {
+                Spacer()
+                actionButton("Close", systemImage: "xmark") {
+                    player.closeCurrentItem()
+                }
+            }
+        }
+        .padding(.horizontal)
+        .borderBottom(height: 0.4, color: Color("ControlsBorderColor"))
+        .multilineTextAlignment(.center)
+        .frame(maxWidth: .infinity)
+        .frame(height: 50)
+        .foregroundColor(.accentColor)
+    }
+
+    func actionButton(
+        _ name: String,
+        systemImage: String,
+        action: @escaping () -> Void = {}
+    ) -> some View {
+        Button(action: action) {
+            VStack(spacing: 3) {
+                Image(systemName: systemImage)
+                    .frame(width: 20, height: 20)
+                Text(name)
+                    .foregroundColor(.secondary)
+                    .font(.caption2)
+            }
+            .padding(.horizontal, 10)
+            .padding(.vertical, 5)
+            .contentShape(Rectangle())
+        }
+        .buttonStyle(.plain)
+        .accessibilityLabel(Text(name))
+    }
+
+    @ViewBuilder var videoProperties: some View {
+        HStack(spacing: 2) {
+            publishedDateSection
+
+            Spacer()
+
+            HStack(spacing: 4) {
+                Image(systemName: "eye")
+
+                if let views = video?.viewsCount, player.videoBeingOpened.isNil {
+                    Text(views)
+                } else {
+                    Text("1,234M").redacted(reason: .placeholder)
+                }
+
+                Image(systemName: "hand.thumbsup")
+
+                if let likes = video?.likesCount, player.videoBeingOpened.isNil {
+                    Text(likes)
+                } else {
+                    Text("1,234M").redacted(reason: .placeholder)
+                }
+
+                if Defaults[.enableReturnYouTubeDislike] {
+                    Image(systemName: "hand.thumbsdown")
+
+                    if let dislikes = video?.dislikesCount, player.videoBeingOpened.isNil {
+                        Text(dislikes)
+                    } else {
+                        Text("1,234M").redacted(reason: .placeholder)
+                    }
+                }
+            }
+        }
+        .font(.system(size: 12))
+        .foregroundColor(.secondary)
+    }
+
+    var publishedDateSection: some View {
+        Group {
+            if let video {
+                HStack(spacing: 4) {
+                    if let published = video.publishedDate {
+                        Text(published)
+                    } else {
+                        Text("1 century ago").redacted(reason: .placeholder)
+                    }
+                }
+            }
+        }
+    }
+}
+
+struct VideoActions_Previews: PreviewProvider {
+    static var previews: some View {
+        VideoActions()
+            .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/VideoDescription.swift

@@ -0,0 +1,163 @@
+#if os(iOS)
+    import ActiveLabel
+#endif
+import Defaults
+import Foundation
+import SwiftUI
+
+struct VideoDescription: View {
+    @EnvironmentObject<NavigationModel> private var navigation
+    @EnvironmentObject<PlayerModel> private var player
+    @EnvironmentObject<RecentsModel> private var recents
+    @EnvironmentObject<SearchModel> private var search
+    @Default(.showKeywords) private var showKeywords
+
+    var video: Video
+    var detailsSize: CGSize?
+
+    var description: String {
+        video.description ?? ""
+    }
+
+    var body: some View {
+        VStack {
+            #if os(iOS)
+                ActiveLabelDescriptionRepresentable(description: description, detailsSize: detailsSize)
+            #else
+                textDescription
+            #endif
+
+            keywords
+        }
+    }
+
+    @ViewBuilder var textDescription: some View {
+        #if !os(iOS)
+            Group {
+                if #available(macOS 12, *) {
+                    Text(description)
+                    #if !os(tvOS)
+                        .textSelection(.enabled)
+                    #endif
+                } else {
+                    Text(description)
+                }
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .font(.system(size: 14))
+            .lineSpacing(3)
+        #endif
+    }
+
+    @ViewBuilder var keywords: some View {
+        if showKeywords {
+            ScrollView(.horizontal, showsIndicators: showScrollIndicators) {
+                HStack {
+                    ForEach(video.keywords, id: \.self) { keyword in
+                        Button {
+                            NavigationModel.openSearchQuery(keyword, player: player, recents: recents, navigation: navigation, search: search)
+                        } label: {
+                            HStack(alignment: .center, spacing: 0) {
+                                Text("#")
+                                    .font(.system(size: 14).bold())
+
+                                Text(keyword)
+                                    .frame(maxWidth: 500)
+                            }
+                            .font(.caption)
+                            .foregroundColor(.white)
+                            .padding(.vertical, 4)
+                            .padding(.horizontal, 8)
+                            .background(Color("KeywordBackgroundColor"))
+                            .mask(RoundedRectangle(cornerRadius: 3))
+                        }
+                        .buttonStyle(.plain)
+                    }
+                }
+            }
+        }
+    }
+
+    var showScrollIndicators: Bool {
+        #if os(macOS)
+            false
+        #else
+            true
+        #endif
+    }
+}
+
+#if os(iOS)
+    struct ActiveLabelDescriptionRepresentable: UIViewRepresentable {
+        var description: String
+        var detailsSize: CGSize?
+
+        @State private var label = ActiveLabel()
+
+        @Environment(\.openURL) private var openURL
+        @EnvironmentObject<PlayerModel> private var player
+
+        func makeUIView(context _: Context) -> some UIView {
+            customizeLabel()
+            return label
+        }
+
+        func updateUIView(_: UIViewType, context _: Context) {
+            updatePreferredMaxLayoutWidth()
+        }
+
+        func customizeLabel() {
+            label.customize { label in
+                label.enabledTypes = [.url, .timestamp]
+                label.numberOfLines = 0
+                label.text = description
+                label.contentMode = .scaleAspectFill
+                label.font = .systemFont(ofSize: 14)
+                label.lineSpacing = 3
+                label.preferredMaxLayoutWidth = (detailsSize?.width ?? 330) - 30
+                label.URLColor = UIColor(Color.accentColor)
+                label.timestampColor = UIColor(Color.accentColor)
+                label.handleURLTap(urlTapHandler(_:))
+                label.handleTimestampTap(timestampTapHandler(_:))
+            }
+        }
+
+        func updatePreferredMaxLayoutWidth() {
+            label.preferredMaxLayoutWidth = (detailsSize?.width ?? 330) - 30
+        }
+
+        func urlTapHandler(_ url: URL) {
+            var urlToOpen = url
+
+            if var components = URLComponents(url: url, resolvingAgainstBaseURL: false) {
+                components.scheme = "yattee"
+                if let yatteeURL = components.url {
+                    let parser = URLParser(url: urlToOpen)
+                    let destination = parser.destination
+                    if destination == .video,
+                       parser.videoID == player.currentVideo?.videoID,
+                       let time = parser.time
+                    {
+                        player.backend.seek(to: Double(time), seekType: .userInteracted)
+                        return
+                    } else if destination != nil {
+                        urlToOpen = yatteeURL
+                    }
+                }
+            }
+
+            openURL(urlToOpen)
+        }
+
+        func timestampTapHandler(_ timestamp: Timestamp) {
+            player.backend.seek(to: timestamp.timeInterval, seekType: .userInteracted)
+        }
+    }
+#endif
+
+struct VideoDescription_Previews: PreviewProvider {
+    static var previews: some View {
+        VideoDescription(video: .fixture)
+            .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/VideoDetails.swift

@@ -0,0 +1,177 @@
+import Defaults
+import Foundation
+import SDWebImageSwiftUI
+import SwiftUI
+
+struct VideoDetails: View {
+    enum DetailsPage: String, CaseIterable, Defaults.Serializable {
+        case info, inspector, chapters, comments, related, queue
+    }
+
+    @Binding var sidebarQueue: Bool
+    @Binding var fullScreen: Bool
+    var bottomPadding = false
+
+    @State private var subscribed = false
+    @State private var subscriptionToggleButtonDisabled = false
+
+    @State private var page = DetailsPage.queue
+
+    @Environment(\.navigationStyle) private var navigationStyle
+    #if os(iOS)
+        @Environment(\.verticalSizeClass) private var verticalSizeClass
+    #endif
+
+    @Environment(\.colorScheme) private var colorScheme
+
+    @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(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
+    @Default(.playerSidebar) private var playerSidebar
+
+    var video: Video? {
+        player.currentVideo
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            ControlsBar(
+                fullScreen: $fullScreen,
+                presentingControls: false,
+                backgroundEnabled: false,
+                borderTop: false,
+                detailsTogglePlayer: false,
+                detailsToggleFullScreen: true
+            )
+
+            VideoActions(video: video)
+
+            ZStack(alignment: .bottom) {
+                currentPage
+                    .transition(.fade)
+
+                HStack(alignment: .center) {
+                    Spacer()
+                    VideoDetailsToolbar(video: video, page: $page, sidebarQueue: sidebarQueue)
+                    Spacer()
+                }
+                #if os(iOS)
+                .offset(y: bottomPadding ? -SafeArea.insets.bottom : 0)
+                #endif
+            }
+            .onChange(of: player.currentItem) { newItem in
+                guard let newItem else {
+                    page = sidebarQueue ? .inspector : .queue
+                    return
+                }
+
+                if let video = newItem.video {
+                    page = video.isLocal ? .inspector : .info
+                } else {
+                    page = sidebarQueue ? .inspector : .queue
+                }
+            }
+        }
+        .onAppear {
+            page = sidebarQueue ? .inspector : .queue
+
+            guard video != nil, accounts.app.supportsSubscriptions else {
+                subscribed = false
+                return
+            }
+        }
+        .onChange(of: sidebarQueue) { queue in
+            if queue {
+                if page == .related || page == .queue {
+                    page = video.isNil || video!.isLocal ? .inspector : .info
+                }
+            } else if video.isNil {
+                page = .inspector
+            }
+        }
+        .overlay(GeometryReader { proxy in
+            Color.clear
+                .onAppear {
+                    detailsSize = proxy.size
+                }
+                .onChange(of: proxy.size) { newSize in
+                    detailsSize = newSize
+                }
+        })
+        .background(colorScheme == .dark ? Color.black : .white)
+    }
+
+    private var contentItem: ContentItem {
+        ContentItem(video: player.currentVideo)
+    }
+
+    var currentPage: some View {
+        VStack {
+            switch page {
+            case .info:
+                detailsPage
+
+            case .inspector:
+                InspectorView(video: video)
+
+            case .chapters:
+                ChaptersView()
+
+            case .comments:
+                CommentsView(embedInScrollView: true)
+                    .onAppear {
+                        comments.loadIfNeeded()
+                    }
+
+            case .related:
+                RelatedView()
+
+            case .queue:
+                PlayerQueueView(sidebarQueue: sidebarQueue, fullScreen: $fullScreen)
+            }
+        }
+        .contentShape(Rectangle())
+    }
+
+    @State private var detailsSize = CGSize.zero
+
+    var detailsPage: some View {
+        ScrollView(.vertical, showsIndicators: false) {
+            if let video {
+                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: 2 ... 5), id: \.self) { _ in
+                                Text(String(repeating: Video.fixture.description ?? "", count: Int.random(in: 1 ... 4)))
+                            }
+                        }
+                        .redacted(reason: .placeholder)
+                    } else if video.description != nil, !video.description!.isEmpty {
+                        VideoDescription(video: video, detailsSize: detailsSize)
+                        #if os(iOS)
+                            .padding(.bottom, player.playingFullScreen ? 10 : SafeArea.insets.bottom)
+                        #endif
+                    } else if !video.isLocal {
+                        Text("No description")
+                            .foregroundColor(.secondary)
+                    }
+                }
+                .padding(.top, 10)
+                .padding(.bottom, 60)
+            }
+        }
+        .padding(.horizontal)
+    }
+}
+
+struct VideoDetails_Previews: PreviewProvider {
+    static var previews: some View {
+        VideoDetails(sidebarQueue: .constant(true), fullScreen: .constant(false))
+            .injectFixtureEnvironmentObjects()
+    }
+}

Shared/Player/Video Details/VideoDetailsPaddingModifier.swift

@@ -0,0 +1,36 @@
+import Foundation
+import SwiftUI
+
+struct VideoDetailsPaddingModifier: ViewModifier {
+    static var defaultAdditionalDetailsPadding = 0.0
+
+    let playerSize: CGSize
+    let minimumHeightLeft: Double
+    let additionalPadding: Double
+    let fullScreen: Bool
+
+    init(
+        playerSize: CGSize,
+        minimumHeightLeft: Double? = nil,
+        additionalPadding: Double? = nil,
+        fullScreen: Bool = false
+    ) {
+        self.playerSize = playerSize
+        self.minimumHeightLeft = minimumHeightLeft ?? VideoPlayerView.defaultMinimumHeightLeft
+        self.additionalPadding = additionalPadding ?? Self.defaultAdditionalDetailsPadding
+        self.fullScreen = fullScreen
+    }
+
+    var playerHeight: Double {
+        playerSize.height
+    }
+
+    var topPadding: Double {
+        fullScreen ? 0 : (playerHeight + additionalPadding)
+    }
+
+    func body(content: Content) -> some View {
+        content
+            .padding(.top, topPadding)
+    }
+}

Shared/Player/Video Details/VideoDetailsTool.swift

@@ -0,0 +1,32 @@
+import Foundation
+
+struct VideoDetailsTool: Identifiable {
+    var id: String {
+        page.rawValue
+    }
+
+    var icon: String
+    var name: String
+    var toolPostion: CGRect = .zero
+    var page = VideoDetails.DetailsPage.info
+
+    func isAvailable(for video: Video?, sidebarQueue: Bool) -> Bool {
+        guard !YatteeApp.isForPreviews else {
+            return true
+        }
+        switch page {
+        case .info:
+            return video != nil && !video!.isLocal
+        case .inspector:
+            return true
+        case .chapters:
+            return video != nil && !video!.chapters.isEmpty
+        case .comments:
+            return video != nil && !video!.isLocal
+        case .related:
+            return !sidebarQueue && video != nil && !video!.isLocal
+        case .queue:
+            return !sidebarQueue
+        }
+    }
+}

Shared/Player/Video Details/VideoDetailsToolbar.swift

@@ -0,0 +1,133 @@
+import SwiftUI
+
+struct VideoDetailsToolbar: View {
+    var video: Video?
+    @Binding var page: VideoDetails.DetailsPage
+    var sidebarQueue: Bool
+
+    @State private var tools: [VideoDetailsTool] = [
+        .init(icon: "info.circle", name: "Info", page: .info),
+        .init(icon: "wand.and.stars", name: "Inspector", page: .inspector),
+        .init(icon: "bookmark", name: "Chapters", page: .chapters),
+        .init(icon: "text.bubble", name: "Comments", page: .comments),
+        .init(icon: "rectangle.stack.fill", name: "Related", page: .related),
+        .init(icon: "list.number", name: "Queue", page: .queue)
+    ]
+
+    @State private var activeTool: VideoDetailsTool?
+    @State private var startedToolPosition: CGRect = .zero
+    @State private var opacity = 1.0
+
+    var body: some View {
+        Group {
+            VStack {
+                HStack(spacing: 12) {
+                    ForEach($tools) { $tool in
+                        if $tool.wrappedValue.isAvailable(for: video, sidebarQueue: sidebarQueue) {
+                            ToolView(tool: $tool)
+                                .padding(.vertical, 10)
+                        }
+                    }
+                }
+                .onChange(of: page) { newValue in
+                    activeTool = tools.first { $0.id == newValue.rawValue }
+                }
+                .coordinateSpace(name: "toolbarArea")
+                .gesture(
+                    DragGesture(minimumDistance: 0)
+                        .onChanged { value in
+                            withAnimation(.linear(duration: 0.2)) {
+                                opacity = 1
+                            }
+
+                            guard let firstTool = tools.first else { return }
+                            if startedToolPosition == .zero {
+                                startedToolPosition = firstTool.toolPostion
+                            }
+                            let location = CGPoint(x: value.location.x, y: value.location.y)
+
+                            if let index = tools.firstIndex(where: { $0.toolPostion.contains(location) }),
+                               activeTool?.id != tools[index].id,
+                               tools[index].isAvailable(for: video, sidebarQueue: sidebarQueue)
+                            {
+                                withAnimation(.interpolatingSpring(stiffness: 230, damping: 22)) {
+                                    activeTool = tools[index]
+                                }
+                                withAnimation(.linear(duration: 0.25)) {
+                                    page = activeTool?.page ?? .info
+                                }
+                            }
+                        }
+                        .onEnded { _ in
+                            withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 1, blendDuration: 1)) {
+                                startedToolPosition = .zero
+                            }
+                            Delay.by(2) {
+                                withAnimation(.easeOut(duration: 1)) {
+                                    opacity = 0.1
+                                }
+                            }
+                        }
+                )
+            }
+            .onAppear {
+                Delay.by(2) {
+                    withAnimation(.linear(duration: 1)) {
+                        opacity = 0.1
+                    }
+                }
+            }
+            .opacity(opacity)
+        }
+        .background(
+            Rectangle()
+                .contentShape(Rectangle())
+                .foregroundColor(.clear)
+        )
+        .onHover { hovering in
+            withAnimation(.linear(duration: 0.1)) {
+                opacity = hovering ? 1 : 0.1
+            }
+        }
+    }
+
+    @ViewBuilder func ToolView(tool: Binding<VideoDetailsTool>) -> some View {
+        HStack(spacing: 0) {
+            Image(systemName: tool.wrappedValue.icon)
+                .font(.title2)
+                .foregroundColor(.white)
+                .frame(width: 30, height: 30)
+                .layoutPriority(1)
+
+                .background(
+                    GeometryReader { proxy in
+                        let frame = proxy.frame(in: .named("toolbarArea"))
+                        Color.clear
+                            .preference(key: RectKey.self, value: frame)
+                            .onPreferenceChange(RectKey.self) { rect in
+                                tool.wrappedValue.toolPostion = rect
+                            }
+                    }
+                )
+
+            if activeToolID == tool.wrappedValue.id, false {
+                Text(tool.wrappedValue.name)
+                    .font(.system(size: 14).bold())
+                    .foregroundColor(.white)
+                    .allowsTightening(true)
+                    .lineLimit(1)
+                    .layoutPriority(2)
+            }
+        }
+        .padding(.horizontal, 10)
+        .padding(.vertical, 6)
+        .background(
+            RoundedRectangle(cornerRadius: 10, style: .continuous)
+                .fill(activeToolID == tool.wrappedValue.id ? Color.accentColor : Color.secondary)
+        )
+    }
+
+    var activeToolID: VideoDetailsTool.ID {
+        activeTool?.id ?? "queue"
+    }
+}