Video details layout fixes

This commit is contained in:
Arkadiusz Fal 2022-11-13 22:50:42 +01:00
parent b6067a3f67
commit 7cc3cd950b
4 changed files with 88 additions and 67 deletions

View File

@ -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)

View File

@ -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)
}
}
}
}

View File

@ -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:

View File

@ -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 {
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
VStack {
HStack(spacing: 12) {
ForEach($tools) { $tool in
if $tool.wrappedValue.isAvailable(for: video, sidebarQueue: sidebarQueue) {
ToolView(tool: $tool)
.padding(.vertical, 10)
}
}
}
.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)) {
opacity = hovering ? 1 : 0.1
}
hovering ? resetOpacity(0.2) : lowerOpacity(0.2)
}
}
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)