New video details

Shared/Player/Controls/PlayerControls.swift

@@ -212,7 +212,11 @@ struct PlayerControls: View {
 
     var detailsHeight: Double {
         guard let player, player.playerSize.height.isFinite else { return 200 }
-        return [player.playerSize.height, 500].min()!
+        var inset = 0.0
+        #if os(iOS)
+            inset = SafeArea.insets.bottom
+        #endif
+        return [player.playerSize.height - inset, 500].min()!
     }
 
     @ViewBuilder var controlsBackground: some View {

Shared/Player/Controls/VideoDetailsOverlay.swift

@@ -5,8 +5,7 @@ struct VideoDetailsOverlay: View {
     @EnvironmentObject<PlayerControlsModel> private var controls
 
     var body: some View {
-        VideoDetails(sidebarQueue: false, fullScreen: fullScreenBinding)
-            .modifier(ControlBackgroundModifier())
+        VideoDetails(sidebarQueue: .constant(false), fullScreen: fullScreenBinding)
             .clipShape(RoundedRectangle(cornerRadius: 4))
     }
 

Shared/Player/PlayerQueueRow.swift

@@ -29,9 +29,12 @@ struct PlayerQueueRow: View {
 
     var body: some View {
         Button {
+            guard let video = item.video else {
+                return
+            }
             #if os(iOS)
-                guard !item.video.localStreamIsDirectory else {
-                    if let url = item.video?.localStream?.localURL {
+                guard !video.localStreamIsDirectory else {
+                    if let url = video.localStream?.localURL {
                         withAnimation {
                             DocumentsModel.shared.goToURL(url)
                         }
@@ -40,7 +43,7 @@ struct PlayerQueueRow: View {
                 }
             #endif
 
-            if item.video.localStreamIsFile, let url = item.video.localStream?.localURL {
+            if video.localStreamIsFile, let url = video.localStream?.localURL {
                 URLBookmarkModel.shared.saveBookmark(url)
             }
 
@@ -48,7 +51,7 @@ struct PlayerQueueRow: View {
 
             player.avPlayerBackend.startPictureInPictureOnPlay = player.playingInPictureInPicture
 
-            player.videoBeingOpened = item.video
+            player.videoBeingOpened = video
 
             let playItem = {
                 if history {

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/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/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/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"
+    }
+}

Shared/Player/VideoDetails.swift

@@ -1,396 +0,0 @@
-import Defaults
-import Foundation
-import SDWebImageSwiftUI
-import SwiftUI
-import SwiftUIPager
-
-struct VideoDetails: View {
-    enum DetailsPage: String, CaseIterable, Defaults.Serializable {
-        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
-    @Binding var fullScreen: Bool
-
-    @State private var subscribed = false
-    @State private var subscriptionToggleButtonDisabled = false
-
-    @StateObject private var page: Page = .first()
-
-    @Environment(\.navigationStyle) private var navigationStyle
-    #if os(iOS)
-        @Environment(\.verticalSizeClass) private var verticalSizeClass
-    #endif
-
-    @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
-
-    var currentPage: DetailsPage {
-        DetailsPage.allCases.first { $0.index == page.index } ?? .info
-    }
-
-    var video: Video? {
-        player.currentVideo
-    }
-
-    var body: some View {
-        if #available(iOS 15, macOS 12, *) {
-            Self._printChanges()
-        }
-
-        return VStack(alignment: .leading, spacing: 0) {
-            ControlsBar(
-                fullScreen: $fullScreen,
-                presentingControls: false,
-                backgroundEnabled: false,
-                borderTop: false,
-                detailsTogglePlayer: false,
-                detailsToggleFullScreen: true
-            )
-
-            HStack(spacing: 4) {
-                pageButton(
-                    "Info".localized(),
-                    "info.circle", .info, !video.isNil
-                )
-                if let video, !video.isLocal {
-                    pageButton(
-                        "Chapters".localized(),
-                        "bookmark", .chapters, !video.chapters.isEmpty && !video.isLocal
-                    )
-                    pageButton(
-                        "Comments".localized(),
-                        "text.bubble", .comments, !video.isLocal
-                    ) { comments.load() }
-                    pageButton(
-                        "Related".localized(),
-                        "rectangle.stack.fill", .related, !video.isLocal
-                    )
-                }
-                pageButton(
-                    "Queue".localized(),
-                    "list.number", .queue, !player.queue.isEmpty
-                )
-            }
-            .onChange(of: player.currentItem) { _ in
-                page.update(.moveToFirst)
-            }
-            .padding(.horizontal)
-            .padding(.vertical, 6)
-
-            Pager(page: page, data: DetailsPage.allCases, id: \.self) {
-                if !player.currentItem.isNil || page.index == DetailsPage.queue.index {
-                    detailsByPage($0)
-                    #if os(iOS)
-                        .padding(.bottom, SafeArea.insets.bottom)
-                    #else
-                        .padding(.bottom, 6)
-                    #endif
-                } else {
-                    VStack {}
-                }
-            }
-
-            .onPageWillChange { pageIndex in
-                if pageIndex == DetailsPage.comments.index {
-                    comments.load()
-                }
-            }
-            .frame(maxWidth: detailsSize.width)
-        }
-        .onAppear {
-            page.update(.moveToFirst)
-
-            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)
-            }
-        }
-        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
-        .overlay(GeometryReader { proxy in
-            Color.clear
-                .onAppear {
-                    detailsSize = proxy.size
-                }
-                .onChange(of: proxy.size) { newSize in
-                    detailsSize = newSize
-                }
-        })
-    }
-
-    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)
-                    }
-                }
-            }
-        }
-    }
-
-    private var contentItem: ContentItem {
-        ContentItem(video: player.currentVideo)
-    }
-
-    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()
-
-                HStack(spacing: 4) {
-                    Image(systemName: symbolName)
-
-                    if playerDetailsPageButtonLabelStyle.text && player.playerSize.width > 450 {
-                        Text(label)
-                    }
-                }
-                .frame(minHeight: 15)
-                .lineLimit(1)
-                .padding(.vertical, 4)
-                .foregroundColor(currentPage == destination ? .white : (active ? Color.accentColor : .gray))
-
-                Spacer()
-            }
-            .contentShape(Rectangle())
-        }
-        .background(currentPage == destination ? (active ? Color.accentColor : .gray) : .clear)
-        .buttonStyle(.plain)
-        .font(.system(size: 10).bold())
-        .overlay(
-            RoundedRectangle(cornerRadius: 2)
-                .stroke(active ? Color.accentColor : .gray, lineWidth: 1.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()
-
-            case .comments:
-                CommentsView(embedInScrollView: true)
-
-            case .related:
-                RelatedView()
-
-            case .queue:
-                PlayerQueueView(sidebarQueue: sidebarQueue, fullScreen: $fullScreen)
-            }
-        }
-        .contentShape(Rectangle())
-    }
-
-    @State private var detailsSize = CGSize.zero
-
-    var detailsPage: some View {
-        VStack(alignment: .leading, spacing: 0) {
-            if let video {
-                if !video.isLocal {
-                    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: 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)
-                    }
-                }
-
-                VStack(spacing: 4) {
-                    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(.bottom, 6)
-            }
-        }
-        .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)
-    }
-
-    @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)
-    }
-
-    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)
-    }
-}
-
-struct VideoDetails_Previews: PreviewProvider {
-    static var previews: some View {
-        VideoDetails(sidebarQueue: true, fullScreen: .constant(false))
-            .injectFixtureEnvironmentObjects()
-    }
-}

Shared/Player/VideoPlayerView.swift

@@ -28,9 +28,7 @@ struct VideoPlayerView: View {
         #endif
     }
 
-    @State private var playerSize: CGSize = .zero { didSet {
-        sidebarQueue = playerSize.width > 900 && Defaults[.playerSidebar] == .whenFits
-    }}
+    @State private var playerSize: CGSize = .zero { didSet { updateSidebarQueue() } }
     @State private var hoveringPlayer = false
     @State private var fullScreenDetails = false
     @State private var sidebarQueue = defaultSidebarQueueValue
@@ -70,6 +68,7 @@ struct VideoPlayerView: View {
     @Default(.horizontalPlayerGestureEnabled) var horizontalPlayerGestureEnabled
     @Default(.seekGestureSpeed) var seekGestureSpeed
     @Default(.seekGestureSensitivity) var seekGestureSensitivity
+    @Default(.playerSidebar) var playerSidebar
 
     @ObservedObject internal var controlsOverlayModel = ControlOverlaysModel.shared
 
@@ -87,6 +86,10 @@ struct VideoPlayerView: View {
             if player.musicMode {
                 player.backend.startControlsUpdates()
             }
+            updateSidebarQueue()
+        }
+        .onChange(of: playerSidebar) { _ in
+            updateSidebarQueue()
         }
     }
 
@@ -190,6 +193,14 @@ struct VideoPlayerView: View {
         #endif
     }
 
+    func updateSidebarQueue() {
+        #if os(iOS)
+            sidebarQueue = playerSize.width > 900 && playerSidebar == .whenFits
+        #elseif os(macOS)
+            sidebarQueue = playerSidebar != .never
+        #endif
+    }
+
     var overlay: some View {
         VStack {
             if controlsOverlayModel.presenting {
@@ -328,11 +339,10 @@ struct VideoPlayerView: View {
 
                         #if !os(tvOS)
                             if !fullScreenPlayer {
-                                VideoDetails(sidebarQueue: sidebarQueue, fullScreen: $fullScreenDetails)
+                                VideoDetails(sidebarQueue: $sidebarQueue, fullScreen: $fullScreenDetails, bottomPadding: detailsNeedBottomPadding)
                                 #if os(iOS)
                                     .ignoresSafeArea(.all, edges: .bottom)
                                 #endif
-                                    .background(colorScheme == .dark ? Color.black : Color.white)
                                     .modifier(VideoDetailsPaddingModifier(
                                         playerSize: player.playerSize,
                                         fullScreen: fullScreenDetails
@@ -411,6 +421,14 @@ struct VideoPlayerView: View {
         #endif
     }
 
+    var detailsNeedBottomPadding: Bool {
+        #if os(iOS)
+            return true
+        #else
+            return false
+        #endif
+    }
+
     var fullScreenPlayer: Bool {
         #if os(iOS)
             player.playingFullScreen || verticalSizeClass == .compact
@@ -449,6 +467,7 @@ struct VideoPlayerView: View {
                         Image(systemName: "xmark")
                             .font(.system(size: 40))
                     }
+                    .opacity(fullScreenPlayer ? 1 : 0)
                     .buttonStyle(.plain)
                     .padding(10)
                     .foregroundColor(.gray)

Shared/PreferenceKeys.swift

@@ -0,0 +1,9 @@
+import Foundation
+import SwiftUI
+
+struct RectKey: PreferenceKey {
+    static var defaultValue: CGRect = .zero
+    static func reduce(value: inout CGRect, nextValue: () -> CGRect) {
+        value = nextValue()
+    }
+}

Shared/Views/ControlsBar.swift

@@ -137,20 +137,32 @@ struct ControlsBar: View {
     var details: some View {
         HStack {
             HStack(spacing: 8) {
-                ZStack(alignment: .bottomTrailing) {
-                    authorAvatar
+                Button {
+                    if let video = model.currentVideo, !video.isLocal {
+                        NavigationModel.openChannel(
+                            video.channel,
+                            player: model,
+                            recents: recents,
+                            navigation: navigation,
+                            navigationStyle: navigationStyle
+                        )
+                    }
+                } label: {
+                    ZStack(alignment: .bottomTrailing) {
+                        authorAvatar
 
-                    if accounts.app.supportsSubscriptions,
-                       accounts.signedIn,
-                       let video = model.currentVideo,
-                       subscriptions.isSubscribing(video.channel.id)
-                    {
-                        Image(systemName: "star.circle.fill")
-                        #if !os(tvOS)
-                            .background(Color.background)
-                        #endif
-                            .clipShape(Circle())
-                            .foregroundColor(.secondary)
+                        if accounts.app.supportsSubscriptions,
+                           accounts.signedIn,
+                           let video = model.currentVideo,
+                           subscriptions.isSubscribing(video.channel.id)
+                        {
+                            Image(systemName: "star.circle.fill")
+                            #if !os(tvOS)
+                                .background(Color.background)
+                            #endif
+                                .clipShape(Circle())
+                                .foregroundColor(.secondary)
+                        }
                     }
                 }
                 .contextMenu {

Shared/Views/ShareButton.swift

@@ -1,14 +1,22 @@
 import SwiftUI
 
-struct ShareButton: View {
+struct ShareButton<LabelView: View>: View {
     let contentItem: ContentItem
 
     @EnvironmentObject<AccountsModel> private var accounts
     @EnvironmentObject<NavigationModel> private var navigation
     @EnvironmentObject<PlayerModel> private var player
 
-    init(contentItem: ContentItem) {
+    let label: LabelView?
+
+    init(
+        contentItem: ContentItem,
+        @ViewBuilder label: @escaping () -> LabelView? = {
+            Label("Share...", systemImage: "square.and.arrow.up")
+        }
+    ) {
         self.contentItem = contentItem
+        self.label = label()
     }
 
     @ViewBuilder var body: some View {
@@ -24,11 +32,11 @@ struct ShareButton: View {
                     }
                 }
             } label: {
-                Label("Share...", systemImage: "square.and.arrow.up")
+                label
             }
             .menuStyle(.borderlessButton)
             #if os(macOS)
-                .frame(maxWidth: 35)
+                .frame(maxWidth: 60)
             #endif
         }
     }

Shared/Views/VideoContextMenuView.swift

@@ -90,7 +90,10 @@ struct VideoContextMenuView: View {
         }
 
         #if os(iOS)
-            if video.isLocal, let url = video.localStream?.localURL, DocumentsModel.shared.isDocument(url) {
+            if video.isLocal,
+               let url = video.localStream?.localURL,
+               DocumentsModel.shared.isDocument(url)
+            {
                 Section {
                     removeDocumentButton
                 }