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

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