515 lines
19 KiB
Swift
515 lines
19 KiB
Swift
import SwiftUI
|
|
|
|
// MARK: - Main View
|
|
@MainActor
|
|
struct MediaUploadView: View {
|
|
@StateObject private var uploadManager = MediaUploadManager()
|
|
@State private var showMediaPicker = false
|
|
@State private var selectedMedia: MediaType? = nil
|
|
@State private var selectedIndices: Set<Int> = []
|
|
|
|
var body: some View {
|
|
VStack() {
|
|
// 固定的顶部导航栏
|
|
HStack {
|
|
Button(action: {
|
|
Router.shared.pop()
|
|
}) {
|
|
Image(systemName: "chevron.left")
|
|
.font(.system(size: 17, weight: .semibold))
|
|
.foregroundColor(.themeTextMessageMain)
|
|
}
|
|
.padding(.leading, 16)
|
|
|
|
Spacer()
|
|
|
|
Text("Complete Your Profile")
|
|
.font(Typography.font(for: .title2, family: .quicksandBold))
|
|
.foregroundColor(.themeTextMessageMain)
|
|
|
|
Spacer()
|
|
|
|
// 添加一个透明的占位视图来平衡布局
|
|
Color.clear
|
|
.frame(width: 24, height: 24)
|
|
.padding(.trailing, 16)
|
|
}
|
|
.background(Color.themeTextWhiteSecondary)
|
|
.padding(.horizontal)
|
|
.padding(.bottom, -20)
|
|
.zIndex(1) // 确保导航栏在最上层
|
|
|
|
HStack() {
|
|
Text("The upload process will take approximately 2 minutes. Thank you for your patience. ")
|
|
.font(Typography.font(for: .caption))
|
|
.foregroundColor(.black)
|
|
.frame(maxWidth: .infinity, alignment: .leading)
|
|
.padding(6)
|
|
.background(
|
|
LinearGradient(
|
|
gradient: Gradient(colors: [
|
|
Color(red: 1.0, green: 0.97, blue: 0.87),
|
|
.white,
|
|
Color(red: 1.0, green: 0.97, blue: 0.84)
|
|
]),
|
|
startPoint: .topLeading,
|
|
endPoint: .bottomTrailing
|
|
)
|
|
)
|
|
}
|
|
.padding()
|
|
|
|
Spacer()
|
|
.frame(height: 20)
|
|
|
|
MainUploadArea(
|
|
uploadManager: uploadManager,
|
|
showMediaPicker: $showMediaPicker,
|
|
selectedMedia: $selectedMedia,
|
|
selectedIndices: $selectedIndices
|
|
)
|
|
.padding()
|
|
.id("mainUploadArea\(uploadManager.selectedMedia.count)")
|
|
|
|
Spacer()
|
|
|
|
// Navigation button
|
|
Button(action: {
|
|
// Router.shared.navigate(to: .avatarBox)
|
|
}) {
|
|
Text("Continue")
|
|
.font(.headline)
|
|
.foregroundColor(uploadManager.selectedMedia.isEmpty ? Color.themeTextMessage : Color.themeTextMessageMain)
|
|
.frame(maxWidth: .infinity)
|
|
.frame(height: 56)
|
|
.background(uploadManager.selectedMedia.isEmpty ? Color.white : Color.themePrimary)
|
|
.cornerRadius(28)
|
|
.padding(.horizontal, 24)
|
|
}
|
|
.buttonStyle(PlainButtonStyle())
|
|
|
|
Spacer()
|
|
}
|
|
.background(Color.themeTextWhiteSecondary)
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
.navigationBarBackButtonHidden(true)
|
|
.sheet(isPresented: $showMediaPicker) {
|
|
MediaPicker(
|
|
selectedMedia: $uploadManager.selectedMedia,
|
|
imageSelectionLimit: 20,
|
|
videoSelectionLimit: 5,
|
|
onDismiss: {
|
|
// 只处理界面相关的逻辑
|
|
showMediaPicker = false
|
|
},
|
|
onUploadProgress: { index, progress in
|
|
print("File \(index) upload progress: \(progress * 100)%")
|
|
}
|
|
)
|
|
}
|
|
.onChange(of: uploadManager.selectedMedia) { newMedia in
|
|
print("onChange1111111", uploadManager.selectedMedia)
|
|
// 在这里处理媒体变化
|
|
if !newMedia.isEmpty {
|
|
// 当有新的媒体时开始上传
|
|
uploadManager.startUpload()
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Private Methods
|
|
|
|
private func handleMediaPickerDismiss() {
|
|
self.uploadManager.startUpload()
|
|
print("handleMediaPickerDismiss1111111", uploadManager.selectedMedia)
|
|
|
|
// showMediaPicker = false
|
|
|
|
// // 确保选择器完全关闭后再开始上传
|
|
// DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
|
|
// if !self.uploadManager.selectedMedia.isEmpty {
|
|
// self.selectedMedia = self.uploadManager.selectedMedia.first
|
|
// self.selectedIndices = [0]
|
|
// // 在选择器完全关闭后再开始上传
|
|
// self.uploadManager.startUpload()
|
|
// }
|
|
// }
|
|
}
|
|
|
|
private func handleMediaChange(_ newMedia: [MediaType]) {
|
|
if newMedia.isEmpty {
|
|
selectedMedia = nil
|
|
selectedIndices = []
|
|
return
|
|
}
|
|
|
|
// 只在需要时更新
|
|
if selectedIndices.isEmpty || selectedIndices.first! >= newMedia.count {
|
|
selectedMedia = newMedia.first
|
|
selectedIndices = [0]
|
|
} else if let selectedIndex = selectedIndices.first, selectedIndex < newMedia.count {
|
|
selectedMedia = newMedia[selectedIndex]
|
|
}
|
|
|
|
// 当有新媒体时自动开始上传
|
|
if !newMedia.isEmpty && !isUploading() {
|
|
uploadManager.startUpload()
|
|
}
|
|
}
|
|
|
|
// 添加辅助方法检查上传状态
|
|
private func isUploading() -> Bool {
|
|
return uploadManager.uploadStatus.values.contains { status in
|
|
if case .uploading = status {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Main Upload Area
|
|
|
|
struct MainUploadArea: View {
|
|
@ObservedObject var uploadManager: MediaUploadManager
|
|
@Binding var showMediaPicker: Bool
|
|
@Binding var selectedMedia: MediaType?
|
|
@Binding var selectedIndices: Set<Int>
|
|
|
|
var body: some View {
|
|
VStack(spacing: 16) {
|
|
Text("Click to upload 20 images and 5 videos to generate your next blind box.")
|
|
.font(Typography.font(for: .title2, family: .quicksandBold))
|
|
.fontWeight(.bold)
|
|
.foregroundColor(.black)
|
|
.multilineTextAlignment(.center)
|
|
.padding(.horizontal)
|
|
|
|
if !uploadManager.selectedMedia.isEmpty {
|
|
// 显示媒体预览网格
|
|
ScrollView {
|
|
LazyVGrid(columns: [
|
|
GridItem(.flexible(), spacing: 16),
|
|
GridItem(.flexible(), spacing: 16)
|
|
], spacing: 16) {
|
|
ForEach(0..<uploadManager.selectedMedia.count, id: \.self) { index in
|
|
VStack(spacing: 8) {
|
|
// 媒体预览
|
|
MediaPreview(
|
|
media: uploadManager.selectedMedia[index],
|
|
uploadManager: uploadManager
|
|
)
|
|
.frame(height: 150)
|
|
.cornerRadius(12)
|
|
.shadow(radius: 2)
|
|
|
|
// 上传进度条
|
|
if let status = uploadManager.uploadStatus["\(index)"] {
|
|
switch status {
|
|
case .uploading(let progress):
|
|
VStack(alignment: .leading, spacing: 4) {
|
|
Text("Uploading: \(Int(progress * 100))%")
|
|
.font(.caption)
|
|
.foregroundColor(.gray)
|
|
ProgressView(value: progress, total: 1.0)
|
|
.progressViewStyle(LinearProgressViewStyle())
|
|
.tint(Color.themePrimary)
|
|
}
|
|
.padding(.horizontal, 8)
|
|
case .completed:
|
|
HStack {
|
|
Image(systemName: "checkmark.circle.fill")
|
|
.foregroundColor(.green)
|
|
Text("Uploaded")
|
|
.font(.caption)
|
|
.foregroundColor(.gray)
|
|
}
|
|
case .failed:
|
|
HStack {
|
|
Image(systemName: "exclamationmark.triangle.fill")
|
|
.foregroundColor(.red)
|
|
Text("Upload failed")
|
|
.font(.caption)
|
|
.foregroundColor(.red)
|
|
}
|
|
default:
|
|
EmptyView()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.padding()
|
|
}
|
|
.frame(maxHeight: 400)
|
|
} else {
|
|
// 没有选择媒体时显示上传提示
|
|
UploadPromptView(showMediaPicker: $showMediaPicker)
|
|
}
|
|
|
|
// 添加更多按钮
|
|
Button(action: { showMediaPicker = true }) {
|
|
HStack {
|
|
Image(systemName: "plus.circle.fill")
|
|
Text("Add More")
|
|
}
|
|
.font(.headline)
|
|
.foregroundColor(.white)
|
|
.padding()
|
|
.frame(maxWidth: .infinity)
|
|
.background(Color.themePrimary)
|
|
.cornerRadius(10)
|
|
.padding(.horizontal)
|
|
}
|
|
}
|
|
.background(Color.white)
|
|
.cornerRadius(16)
|
|
.padding()
|
|
}
|
|
}
|
|
|
|
// MARK: - Upload Prompt View
|
|
|
|
struct UploadPromptView: View {
|
|
@Binding var showMediaPicker: Bool
|
|
|
|
var body: some View {
|
|
Button(action: {
|
|
showMediaPicker = true
|
|
}) {
|
|
SVGImage(svgName: "IP")
|
|
.frame(width: 225, height: 225)
|
|
.contentShape(Rectangle())
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 20)
|
|
.stroke(style: StrokeStyle(
|
|
lineWidth: 5,
|
|
lineCap: .round,
|
|
dash: [12, 8]
|
|
))
|
|
.foregroundColor(Color.themePrimary)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Thumbnail Scroll View
|
|
|
|
@MainActor
|
|
struct ThumbnailScrollView: View {
|
|
@ObservedObject var uploadManager: MediaUploadManager
|
|
@Binding var selectedIndices: Set<Int>
|
|
@Binding var selectedMedia: MediaType?
|
|
|
|
// Track the currently selected index directly for faster access
|
|
@State private var selectedIndex: Int = 0
|
|
|
|
var body: some View {
|
|
ScrollView(.horizontal, showsIndicators: false) {
|
|
HStack(spacing: 12) {
|
|
ForEach(0..<uploadManager.selectedMedia.count, id: \.self) { index in
|
|
let media = uploadManager.selectedMedia[index]
|
|
ThumbnailView(
|
|
media: media,
|
|
isSelected: selectedIndex == index,
|
|
showCheckmark: true,
|
|
uploadManager: uploadManager,
|
|
onTap: {
|
|
selectedIndex = index
|
|
selectedMedia = media
|
|
selectedIndices = [index]
|
|
}
|
|
)
|
|
}
|
|
|
|
AddMoreButton(showMediaPicker: .constant(true))
|
|
}
|
|
.padding(.horizontal)
|
|
}
|
|
.frame(height: 100)
|
|
.onAppear {
|
|
// Initialize selection when view appears
|
|
if !uploadManager.selectedMedia.isEmpty {
|
|
selectedMedia = uploadManager.selectedMedia[selectedIndex]
|
|
selectedIndices = [selectedIndex]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Thumbnail View
|
|
|
|
@MainActor
|
|
struct ThumbnailView: View {
|
|
let media: MediaType
|
|
let isSelected: Bool
|
|
let showCheckmark: Bool
|
|
let uploadManager: MediaUploadManager?
|
|
let onTap: () -> Void
|
|
|
|
var body: some View {
|
|
Button(action: onTap) {
|
|
ZStack(alignment: .topTrailing) {
|
|
// Main thumbnail content
|
|
ZStack {
|
|
Group {
|
|
if let thumbnail = media.thumbnail {
|
|
Image(uiImage: thumbnail)
|
|
.resizable()
|
|
.aspectRatio(contentMode: .fill)
|
|
.frame(width: 80, height: 80)
|
|
.clipped()
|
|
} else {
|
|
Color.gray
|
|
.frame(width: 80, height: 80)
|
|
}
|
|
}
|
|
.cornerRadius(8)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 8)
|
|
.stroke(isSelected ? Color.themePrimary : Color.clear, lineWidth: 2)
|
|
)
|
|
|
|
// Upload progress border
|
|
if let uploadManager = uploadManager,
|
|
let index = uploadManager.selectedMedia.firstIndex(where: { $0 == media }) {
|
|
let status = uploadManager.uploadStatus["\(index)"]
|
|
if case .uploading(let progress) = status, progress > 0 && progress < 1 {
|
|
ZStack {
|
|
Circle()
|
|
.stroke(
|
|
Color.themePrimary.opacity(0.3),
|
|
style: StrokeStyle(lineWidth: 2, lineCap: .round)
|
|
)
|
|
.rotationEffect(.degrees(-90))
|
|
.padding(2)
|
|
|
|
Circle()
|
|
.trim(from: 0, to: progress)
|
|
.stroke(
|
|
Color.themePrimary,
|
|
style: StrokeStyle(lineWidth: 2, lineCap: .round)
|
|
)
|
|
.rotationEffect(.degrees(-90))
|
|
.animation(.linear, value: progress)
|
|
.padding(2)
|
|
}
|
|
.frame(width: 20, height: 20)
|
|
.offset(x: 30, y: -30)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Selection checkmark
|
|
if isSelected && showCheckmark {
|
|
Image(systemName: "checkmark.circle.fill")
|
|
.font(.system(size: 20))
|
|
.foregroundColor(.white)
|
|
.background(Circle().fill(Color.themePrimary))
|
|
.offset(x: 6, y: -6)
|
|
.zIndex(1)
|
|
}
|
|
|
|
// Video icon
|
|
if media.isVideo {
|
|
Image(systemName: "video.fill")
|
|
.font(.caption)
|
|
.foregroundColor(.white)
|
|
.padding(4)
|
|
.background(Color.black.opacity(0.6))
|
|
.clipShape(Circle())
|
|
.padding(4)
|
|
.offset(x: -4, y: 4)
|
|
}
|
|
}
|
|
.frame(width: 80, height: 80)
|
|
.contentShape(Rectangle())
|
|
.padding(4)
|
|
}
|
|
.buttonStyle(PlainButtonStyle())
|
|
}
|
|
}
|
|
|
|
// MARK: - Add More Button
|
|
|
|
struct AddMoreButton: View {
|
|
@Binding var showMediaPicker: Bool
|
|
|
|
var body: some View {
|
|
Button(action: { showMediaPicker = true }) {
|
|
Image(systemName: "plus")
|
|
.font(.title2)
|
|
.foregroundColor(.gray)
|
|
.frame(width: 80, height: 80)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 8)
|
|
.stroke(style: StrokeStyle(
|
|
lineWidth: 1,
|
|
dash: [5, 3]
|
|
))
|
|
.foregroundColor(.gray)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Media Preview
|
|
|
|
struct MediaPreview: View {
|
|
let media: MediaType
|
|
@ObservedObject var uploadManager: MediaUploadManager
|
|
|
|
private var uploadProgress: Double {
|
|
guard let index = uploadManager.selectedMedia.firstIndex(where: { $0 == media }),
|
|
case .uploading(let progress) = uploadManager.uploadStatus["\(index)"] else {
|
|
return 0
|
|
}
|
|
return progress
|
|
}
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
// 媒体内容
|
|
Group {
|
|
switch media {
|
|
case .image(let uiImage):
|
|
Image(uiImage: uiImage)
|
|
.resizable()
|
|
.scaledToFill()
|
|
case .video(_, let thumbnail):
|
|
if let thumbnail = thumbnail {
|
|
Image(uiImage: thumbnail)
|
|
.resizable()
|
|
.scaledToFill()
|
|
.overlay(
|
|
Image(systemName: "play.circle.fill")
|
|
.font(.system(size: 36))
|
|
.foregroundColor(.white)
|
|
.shadow(radius: 8)
|
|
)
|
|
} else {
|
|
Color.gray
|
|
}
|
|
}
|
|
}
|
|
.aspectRatio(1, contentMode: .fill)
|
|
.clipped()
|
|
.cornerRadius(8)
|
|
.overlay(
|
|
RoundedRectangle(cornerRadius: 8)
|
|
.stroke(Color.themePrimary.opacity(0.3), lineWidth: 1)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
// MARK: - Preview
|
|
|
|
struct MediaUploadView_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
NavigationView {
|
|
MediaUploadView()
|
|
}
|
|
}
|
|
}
|