mirror of
				https://github.com/yattee/yattee.git
				synced 2025-10-31 20:52:04 +00:00 
			
		
		
		
	Video details layout fixes
This commit is contained in:
		| @@ -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) | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Arkadiusz Fal
					Arkadiusz Fal