Video details layout fixes

Shared/Player/Video Details/VideoActions.swift

@@ -64,7 +64,7 @@ struct VideoActions: View {
             }
         }
         .padding(.horizontal)
-        .borderBottom(height: 0.4, color: Color("ControlsBorderColor"))
+        .borderBottom(height: 0.5, color: Color("ControlsBorderColor"))
         .multilineTextAlignment(.center)
         .frame(maxWidth: .infinity)
         .frame(height: 50)

Shared/Player/Video Details/VideoDetails.swift

@@ -31,7 +31,6 @@ struct VideoDetails: View {
     @EnvironmentObject<RecentsModel> private var recents
     @EnvironmentObject<SubscriptionsModel> private var subscriptions
 
-    @Default(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
     @Default(.playerSidebar) private var playerSidebar
 
     var video: Video? {
@@ -53,6 +52,7 @@ struct VideoDetails: View {
 
             ZStack(alignment: .bottom) {
                 currentPage
+                    .frame(maxWidth: detailsSize.width)
                     .transition(.fade)
 
                 HStack(alignment: .center) {
@@ -182,7 +182,11 @@ struct VideoDetails: View {
                 if let views = video?.viewsCount, player.videoBeingOpened.isNil {
                     Text(views)
                 } else {
-                    Text("1,234M").redacted(reason: .placeholder)
+                    if player.videoBeingOpened == nil {
+                        Text("?")
+                    } else {
+                        Text("1,234M").redacted(reason: .placeholder)
+                    }
                 }
 
                 Image(systemName: "hand.thumbsup")
@@ -190,7 +194,11 @@ struct VideoDetails: View {
                 if let likes = video?.likesCount, player.videoBeingOpened.isNil {
                     Text(likes)
                 } else {
-                    Text("1,234M").redacted(reason: .placeholder)
+                    if player.videoBeingOpened == nil {
+                        Text("?")
+                    } else {
+                        Text("1,234M").redacted(reason: .placeholder)
+                    }
                 }
 
                 if Defaults[.enableReturnYouTubeDislike] {
@@ -199,7 +207,11 @@ struct VideoDetails: View {
                     if let dislikes = video?.dislikesCount, player.videoBeingOpened.isNil {
                         Text(dislikes)
                     } else {
-                        Text("1,234M").redacted(reason: .placeholder)
+                        if player.videoBeingOpened == nil {
+                            Text("?")
+                        } else {
+                            Text("1,234M").redacted(reason: .placeholder)
+                        }
                     }
                 }
             }

Shared/Player/Video Details/VideoDetailsTool.swift

@@ -18,7 +18,7 @@ struct VideoDetailsTool: Identifiable {
         case .info:
             return video != nil && !video!.isLocal
         case .inspector:
-            return true
+            return false
         case .chapters:
             return video != nil && !video!.chapters.isEmpty
         case .comments:

Shared/Player/Video Details/VideoDetailsToolbar.swift

@@ -1,6 +1,8 @@
+import Defaults
 import SwiftUI
 
 struct VideoDetailsToolbar: View {
+    static let lowOpacity = 0.33
     var video: Video?
     @Binding var page: VideoDetails.DetailsPage
     var sidebarQueue: Bool
@@ -18,76 +20,81 @@ struct VideoDetailsToolbar: View {
     @State private var startedToolPosition: CGRect = .zero
     @State private var opacity = 1.0
 
+    @EnvironmentObject<PlayerModel> private var player
+    @Default(.playerDetailsPageButtonLabelStyle) private var playerDetailsPageButtonLabelStyle
+
     var body: some View {
-        Group {
+        VStack {
-            VStack {
+            HStack(spacing: 12) {
-                HStack(spacing: 12) {
+                ForEach($tools) { $tool in
-                    ForEach($tools) { $tool in
+                    if $tool.wrappedValue.isAvailable(for: video, sidebarQueue: sidebarQueue) {
-                        if $tool.wrappedValue.isAvailable(for: video, sidebarQueue: sidebarQueue) {
+                        ToolView(tool: $tool)
-                            ToolView(tool: $tool)
+                            .padding(.vertical, 10)
-                                .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)
+            .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) {
+                            lowerOpacity()
+                        }
+                    }
+            )
         }
+        .onAppear {
+            Delay.by(2) { lowerOpacity() }
+        }
+        .opacity(opacity)
         .background(
             Rectangle()
                 .contentShape(Rectangle())
                 .foregroundColor(.clear)
         )
         .onHover { hovering in
-            withAnimation(.linear(duration: 0.1)) {
+            hovering ? resetOpacity(0.2) : lowerOpacity(0.2)
-                opacity = hovering ? 1 : 0.1
+        }
-            }
+    }
+
+    func lowerOpacity(_ duration: Double = 1.0) {
+        withAnimation(.linear(duration: duration)) {
+            opacity = Self.lowOpacity
+        }
+    }
+
+    func resetOpacity(_ duration: Double = 1.0) {
+        withAnimation(.linear(duration: duration)) {
+            opacity = 1
         }
     }
 
@@ -110,13 +117,15 @@ struct VideoDetailsToolbar: View {
                     }
                 )
 
-            if activeToolID == tool.wrappedValue.id, false {
+            if activeToolID == tool.wrappedValue.id,
+               playerDetailsPageButtonLabelStyle.text,
+               player.playerSize.width > 450
+            {
                 Text(tool.wrappedValue.name)
                     .font(.system(size: 14).bold())
                     .foregroundColor(.white)
                     .allowsTightening(true)
                     .lineLimit(1)
-                    .layoutPriority(2)
             }
         }
         .padding(.horizontal, 10)