mirror of
https://github.com/yattee/yattee.git
synced 2024-11-10 00:08:21 +00:00
Video details layout fixes
This commit is contained in:
parent
b6067a3f67
commit
7cc3cd950b
@ -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)
|
||||
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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:
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user