feat: 大致流程over

This commit is contained in:
jinyaqiu 2025-08-27 20:19:25 +08:00
parent c6eb0639d1
commit 4153f0470a
5 changed files with 244 additions and 216 deletions

View File

@ -7,7 +7,7 @@ enum AppRoute: Hashable {
case feedbackView case feedbackView
case feedbackDetail(type: FeedbackView.FeedbackType) case feedbackDetail(type: FeedbackView.FeedbackType)
case mediaUpload case mediaUpload
case blindBox case blindBox(mediaType: BlindBoxView.BlindBoxMediaType)
case blindOutcome(media: MediaType) case blindOutcome(media: MediaType)
@ViewBuilder @ViewBuilder
@ -23,8 +23,8 @@ enum AppRoute: Hashable {
FeedbackDetailView(feedbackType: type) FeedbackDetailView(feedbackType: type)
case .mediaUpload: case .mediaUpload:
MediaUploadView() MediaUploadView()
case .blindBox: case .blindBox(let mediaType):
BlindBoxView() BlindBoxView(mediaType: mediaType)
case .blindOutcome(let media): case .blindOutcome(let media):
BlindOutcomeView(media: media) BlindOutcomeView(media: media)
} }

View File

@ -2,6 +2,12 @@ import SwiftUI
import SwiftData import SwiftData
import AVKit import AVKit
// MARK: - Constants
private enum MediaURLs {
static let videoURL = "https://minio-dev.memorywake.com:31274/memo/users/7363409620351717377/files/7366438998098710529/65273FCE-963F-4AA9-B0EB-C5C4ACE76655.mov?x-amz-signature=aa9e1f9c4a3682d1b74fdc090bc49be6870dbaa14e00c5add6483a529667f0f2&x-amz-signedheaders=host&x-amz-date=20250827T120711Z&x-amz-expires=360000&x-amz-algorithm=AWS4-HMAC-SHA256&x-amz-credential=minio%2F20250827%2Fus-east-1%2Fs3%2Faws4_request"
static let imageURL = "https://cdn.fairclip.cn/files/7343228671693557760/20250604-164000.jpg"
}
extension Notification.Name { extension Notification.Name {
static let navigateToMediaViewer = Notification.Name("navigateToMediaViewer") static let navigateToMediaViewer = Notification.Name("navigateToMediaViewer")
} }
@ -56,206 +62,233 @@ struct AVPlayerController: UIViewControllerRepresentable {
} }
struct BlindBoxView: View { struct BlindBoxView: View {
@State private var showLottieAnimation = true // Lottie enum BlindBoxMediaType {
case video
case image
}
let mediaType: BlindBoxMediaType
@State private var showLottieAnimation = true
@State private var showScalingOverlay = false @State private var showScalingOverlay = false
@State private var scale: CGFloat = 0.1 @State private var scale: CGFloat = 0.1
@State private var mediaToShow: MediaType?
@State private var videoPlayer: AVPlayer? @State private var videoPlayer: AVPlayer?
@State private var showControls = false // Add this line for controlling visibility @State private var showControls = false
@State private var aspectRatio: CGFloat = 1.0 @State private var aspectRatio: CGFloat = 1.0
@State private var isPortraitVideo: Bool = false @State private var isPortrait: Bool = false
@State private var displayImage: UIImage?
init(mediaType: BlindBoxMediaType) {
self.mediaType = mediaType
}
private func startScalingAnimation() { private func loadMedia() {
// Start from 10% size switch mediaType {
self.scale = 0.1 case .video:
self.showScalingOverlay = true loadVideo()
case .image:
// Slower animation with spring effect loadImage()
withAnimation(.spring(response: 2.0, dampingFraction: 0.5, blendDuration: 0.8)) {
self.scale = 1.0 // Scale enough to cover the screen
} }
} }
private func loadImage() {
guard let url = URL(string: MediaURLs.imageURL) else { return }
URLSession.shared.dataTask(with: url) { data, _, _ in
if let data = data, let image = UIImage(data: data) {
DispatchQueue.main.async {
self.displayImage = image
self.aspectRatio = image.size.width / image.size.height
self.isPortrait = image.size.height > image.size.width
}
}
}.resume()
}
private func loadVideo() { private func loadVideo() {
guard let url = URL(string: "https://cdn.fairclip.cn/files/7329556154558844929/doubao-seedance-1-0-lite-i2v-2100199406-02174750234303300000000000000000000ffffac15403eacd2fe.mp4") else { return } guard let url = URL(string: MediaURLs.videoURL) else { return }
let asset = AVAsset(url: url) let asset = AVAsset(url: url)
let playerItem = AVPlayerItem(asset: asset) let playerItem = AVPlayerItem(asset: asset)
let player = AVPlayer(playerItem: playerItem) let player = AVPlayer(playerItem: playerItem)
//
let videoTracks = asset.tracks(withMediaType: .video) let videoTracks = asset.tracks(withMediaType: .video)
if let videoTrack = videoTracks.first { if let videoTrack = videoTracks.first {
let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform) let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform)
let width = abs(size.width) let width = abs(size.width)
let height = abs(size.height) let height = abs(size.height)
//
aspectRatio = width / height aspectRatio = width / height
isPortraitVideo = height > width isPortrait = height > width
} }
player.isMuted = true player.isMuted = true
self.videoPlayer = player self.videoPlayer = player
} }
private func startScalingAnimation() {
self.scale = 0.1
self.showScalingOverlay = true
withAnimation(.spring(response: 2.0, dampingFraction: 0.5, blendDuration: 0.8)) {
self.scale = 1.0
}
}
var body: some View { var body: some View {
ZStack { ZStack {
//
Color.themeTextWhiteSecondary.ignoresSafeArea() Color.themeTextWhiteSecondary.ignoresSafeArea()
//
VStack {
VStack(spacing: 20) {
//
VStack(alignment: .leading, spacing: 4) {
Text("Hi! Click And")
Text("Open Your First Box~")
}
.font(Typography.font(for: .smallLargeTitle))
.fontWeight(.bold)
.foregroundColor(Color.themeTextMessageMain)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal)
.opacity(showScalingOverlay ? 0 : 1)
.offset(y: showScalingOverlay ? -UIScreen.main.bounds.height * 0.2 : 0)
.animation(.easeInOut(duration: 0.5), value: showScalingOverlay)
//
ZStack {
// 1. SVG
if !showScalingOverlay {
SVGImage(svgName: "BlindBg")
.frame(
width: UIScreen.main.bounds.width * 1.8,
height: UIScreen.main.bounds.height * 0.85
)
.position(x: UIScreen.main.bounds.width / 2,
y: UIScreen.main.bounds.height * 0.325)
.opacity(showScalingOverlay ? 0 : 1)
.animation(.easeOut(duration: 1.5), value: showScalingOverlay)
}
if !showScalingOverlay {
LottieView(name: "data", loopMode: .loop)
.frame(width: 200, height: 200)
.position(x: UIScreen.main.bounds.width / 2,
y: UIScreen.main.bounds.height * 0.325)
.opacity(showScalingOverlay ? 0 : 1)
.animation(.easeOut(duration: 0.5), value: showScalingOverlay)
}
}
.frame(
maxWidth: .infinity,
maxHeight: UIScreen.main.bounds.height * 0.65
)
.opacity(showScalingOverlay ? 0 : 1)
.animation(.easeOut(duration: 1.5), value: showScalingOverlay)
.offset(y: showScalingOverlay ? -100 : 0)
.animation(.easeInOut(duration: 1.5), value: showScalingOverlay)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.themeTextWhiteSecondary)
.edgesIgnoringSafeArea(.all)
}
// Scaling Overlay
if showScalingOverlay { if showScalingOverlay {
ZStack { ZStack {
// Frosted glass background with custom transparency
VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterialLight)) VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterialLight))
.edgesIgnoringSafeArea(.all) .edgesIgnoringSafeArea(.all)
// Video Player Group {
if let player = videoPlayer { if mediaType == .video, let player = videoPlayer {
ZStack(alignment: .topLeading) { // Video Player
AVPlayerController(player: $videoPlayer) AVPlayerController(player: $videoPlayer)
.frame( .frame(
width: isPortraitVideo ? width: isPortrait ?
UIScreen.main.bounds.height * scale * 1/aspectRatio : UIScreen.main.bounds.height * scale * 1/aspectRatio :
UIScreen.main.bounds.width * scale, UIScreen.main.bounds.width * scale,
height: isPortraitVideo ? height: isPortrait ?
UIScreen.main.bounds.height * scale : UIScreen.main.bounds.height * scale :
UIScreen.main.bounds.width * scale * 1/aspectRatio UIScreen.main.bounds.width * scale * 1/aspectRatio
) )
.opacity(scale == 1 ? 1 : 0.7) .opacity(scale == 1 ? 1 : 0.7)
.onTapGesture { .onAppear { player.play() }
withAnimation(.easeInOut(duration: 0.1)) {
showControls.toggle() } else if mediaType == .image, let image = displayImage {
} // Image View
} Image(uiImage: image)
.resizable()
// Back Button - Always on top .scaledToFit()
if showControls { .frame(
width: isPortrait ?
UIScreen.main.bounds.height * scale * 1/aspectRatio :
UIScreen.main.bounds.width * scale,
height: isPortrait ?
UIScreen.main.bounds.height * scale :
UIScreen.main.bounds.width * scale * 1/aspectRatio
)
.opacity(scale == 1 ? 1 : 0.7)
}
}
.onTapGesture {
withAnimation(.easeInOut(duration: 0.1)) {
showControls.toggle()
}
}
//
if showControls {
VStack {
HStack {
Button(action: { Button(action: {
if let media = mediaToShow { // BlindOutcomeView
if let url = URL(string: "https://cdn.fairclip.cn/files/7348219809961742336/c5ca6151-91d3-483e-b7e7-c37f2cb69dc0.png") { if mediaType == .video, let videoURL = URL(string: MediaURLs.videoURL) {
URLSession.shared.dataTask(with: url) { data, response, error in Router.shared.navigate(to: .blindOutcome(media: .video(videoURL, nil)))
if let data = data, let image = UIImage(data: data) { } else if mediaType == .image, let image = displayImage {
let media = MediaType.image(image) Router.shared.navigate(to: .blindOutcome(media: .image(image)))
DispatchQueue.main.async {
Router.shared.navigate(to: .blindOutcome(media: media))
}
}
}.resume()
}
} }
}) { }) {
Image(systemName: "chevron.left.circle.fill") Image(systemName: "chevron.left.circle.fill")
.font(.system(size: 36)) .font(.system(size: 36))
.foregroundColor(.white) .foregroundColor(.white)
.padding(12) .padding(12)
.background(Color.black.opacity(0.5))
.clipShape(Circle()) .clipShape(Circle())
} }
.padding(.top, 50) Spacer()
.padding(.leading, 20) }
.zIndex(1000) // Ensure it's on top Spacer()
.transition(.opacity) }
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(.top, 50)
.padding(.leading, 20)
.zIndex(1000)
.transition(.opacity)
.onAppear {
// 1
DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
withAnimation(.easeInOut(duration: 0.3)) {
showControls = true
}
} }
} }
} else {
// Fallback color in case video fails to load
Color.red
.frame(width: UIScreen.main.bounds.width * scale,
height: UIScreen.main.bounds.height * scale)
} }
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxWidth: .infinity, maxHeight: .infinity)
.animation(.easeInOut(duration: 1.0), value: scale) .animation(.easeInOut(duration: 1.0), value: scale)
.ignoresSafeArea() .ignoresSafeArea()
.onTapGesture {
withAnimation(.easeInOut(duration: 0.1)) {
showControls.toggle()
}
}
.onAppear { .onAppear {
// Start animation after a small delay to ensure view is loaded
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) { DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
withAnimation(.spring(response: 2.5, dampingFraction: 0.6, blendDuration: 1.0)) { withAnimation(.spring(response: 2.5, dampingFraction: 0.6, blendDuration: 1.0)) {
self.scale = 1.0 self.scale = 1.0
} }
} }
} }
} else {
// Original content
VStack {
VStack(spacing: 20) {
//
VStack(alignment: .leading, spacing: 4) {
Text("Hi! Click And")
Text("Open Your First Box~")
}
.font(Typography.font(for: .smallLargeTitle))
.fontWeight(.bold)
.foregroundColor(Color.themeTextMessageMain)
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal)
.opacity(showScalingOverlay ? 0 : 1)
.offset(y: showScalingOverlay ? -UIScreen.main.bounds.height * 0.2 : 0)
.animation(.easeInOut(duration: 0.5), value: showScalingOverlay)
//
ZStack {
// 1. SVG
if !showScalingOverlay {
SVGImage(svgName: "BlindBg")
.frame(
width: UIScreen.main.bounds.width * 1.8,
height: UIScreen.main.bounds.height * 0.85
)
.position(x: UIScreen.main.bounds.width / 2,
y: UIScreen.main.bounds.height * 0.325)
.opacity(showScalingOverlay ? 0 : 1)
.animation(.easeOut(duration: 1.5), value: showScalingOverlay)
}
if !showScalingOverlay {
LottieView(name: "data", loopMode: .loop)
.frame(width: 200, height: 200)
.position(x: UIScreen.main.bounds.width / 2,
y: UIScreen.main.bounds.height * 0.325)
.opacity(showScalingOverlay ? 0 : 1)
.animation(.easeOut(duration: 0.5), value: showScalingOverlay)
}
}
.frame(
maxWidth: .infinity,
maxHeight: UIScreen.main.bounds.height * 0.65
)
.opacity(showScalingOverlay ? 0 : 1)
.animation(.easeOut(duration: 1.5), value: showScalingOverlay)
.offset(y: showScalingOverlay ? -100 : 0)
.animation(.easeInOut(duration: 1.5), value: showScalingOverlay)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.themeTextWhiteSecondary)
.edgesIgnoringSafeArea(.all)
}
} }
} }
.navigationBarBackButtonHidden(true) .navigationBarBackButtonHidden(true)
.onAppear { .onAppear {
// Load video first self.loadMedia()
self.loadVideo() // Start animation after media is loaded
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
// Then load image self.startScalingAnimation()
if let url = URL(string: "https://cdn.fairclip.cn/files/7348219809961742336/c5ca6151-91d3-483e-b7e7-c37f2cb69dc0.png") {
URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data, let image = UIImage(data: data) {
let media = MediaType.image(image)
self.mediaToShow = media
// Start scaling animation after 5 seconds
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
self.startScalingAnimation()
}
}
}.resume()
} }
} }
} }
@ -263,5 +296,5 @@ struct BlindBoxView: View {
// MARK: - // MARK: -
#Preview { #Preview {
BlindBoxView() BlindBoxView(mediaType: .video)
} }

View File

@ -15,108 +15,112 @@ struct BlindOutcomeView: View {
Color.themeTextWhiteSecondary.ignoresSafeArea() Color.themeTextWhiteSecondary.ignoresSafeArea()
VStack(spacing: 0) { VStack(spacing: 0) {
// Custom navigation header //
HStack { HStack {
Button(action: { Button(action: {
// Pop two view controllers to go back two levels //
if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene, presentationMode.wrappedValue.dismiss()
let window = windowScene.windows.first,
let rootVC = window.rootViewController as? UINavigationController {
let viewControllers = rootVC.viewControllers
if viewControllers.count > 2 {
let destinationVC = viewControllers[viewControllers.count - 3]
rootVC.popToViewController(destinationVC, animated: true)
} else {
presentationMode.wrappedValue.dismiss()
}
} else {
presentationMode.wrappedValue.dismiss()
}
}) { }) {
Image(systemName: "chevron.left") HStack(spacing: 4) {
.font(.headline) Image(systemName: "chevron.left")
.foregroundColor(Color.themeTextMessageMain) .font(.headline)
}
.foregroundColor(Color.themeTextMessageMain)
} }
.padding(.leading, 16)
Spacer() Spacer()
Text("Blind Box") Text("Blind Box")
.font(.headline) .font(.headline)
.foregroundColor(Color.themeTextMessageMain) .foregroundColor(Color.themeTextMessageMain)
Spacer() Spacer()
// Invisible spacer to balance the layout
//
HStack(spacing: 4) { HStack(spacing: 4) {
Image(systemName: "chevron.left") Image(systemName: "chevron.left")
.opacity(0) .opacity(0)
Text("Back")
.opacity(0)
} }
.padding(.trailing, 8) .padding(.trailing, 16)
} }
.padding(.vertical, 8) .padding(.vertical, 12)
.background(Color.themeTextWhiteSecondary) .background(Color.themeTextWhiteSecondary)
.overlay( .zIndex(1) //
Rectangle()
.frame(height: 1)
.foregroundColor(Color.gray.opacity(0.3)),
alignment: .bottom
)
Spacer() Spacer()
.frame(height: 30)
// Media content // Media content
ZStack { GeometryReader { geometry in
switch media { ZStack {
case .image(let uiImage): //
Image(uiImage: uiImage) RoundedRectangle(cornerRadius: 12)
.resizable() .fill(Color.white)
.scaledToFit() .shadow(color: Color.black.opacity(0.1), radius: 8, x: 0, y: 2)
.onTapGesture {
withAnimation {
isFullscreen.toggle()
}
}
case .video(let url, _): switch media {
// Create an AVPlayer with the video URL case .image(let uiImage):
let player = AVPlayer(url: url) Image(uiImage: uiImage)
VideoPlayer(player: player) .resizable()
.onAppear { .scaledToFit()
player.play() .cornerRadius(10)
isPlaying = true .padding(4)
} .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.onDisappear { .onTapGesture {
player.pause() withAnimation {
isPlaying = false isFullscreen.toggle()
} }
}
case .video(let url, _):
// Create an AVPlayer with the video URL
let player = AVPlayer(url: url)
VideoPlayer(player: player)
.cornerRadius(10)
.padding(4)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.onAppear {
player.play()
isPlaying = true
}
.onDisappear {
player.pause()
isPlaying = false
}
}
} }
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
.padding(.bottom, 20)
} }
.frame(maxWidth: .infinity) .frame(height: UIScreen.main.bounds.height / 2)
.frame(height: UIScreen.main.bounds.height * 0.4) // Takes 40% of screen height .padding(.horizontal)
.background(Color.black)
.padding() // Add some space below navigation bar
Spacer() Spacer()
// Button below media // Button below media
VStack(spacing: 16) { VStack(spacing: 16) {
Button(action: { Button(action: {
// Navigate to the desired view // videocontentview
// Replace with your navigation logic if case .video = media {
// print("Button tapped!") // Router.shared.navigate(to: .mediaUpload)
Router.shared.navigate(to: .mediaUpload) } else {
Router.shared.navigate(to: .mediaUpload)
}
}) { }) {
Text("Go to Next View") Text("Continue")
.font(.headline) .font(.headline)
.foregroundColor(.white) .foregroundColor(.themeTextMessageMain)
.frame(maxWidth: .infinity) .frame(maxWidth: .infinity)
.padding() .padding()
.background(Color.blue) .background(Color.themePrimary)
.cornerRadius(10) .cornerRadius(26)
} }
.padding(.horizontal, 40) .padding()
.padding(.top, 30)
Spacer() // Push everything to the top
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxWidth: .infinity, maxHeight: .infinity)
} }
} }
.navigationBarBackButtonHidden(true) .navigationBarHidden(true) //
.navigationBarBackButtonHidden(true) //
.statusBar(hidden: isFullscreen) .statusBar(hidden: isFullscreen)
.fullScreenCover(isPresented: $isFullscreen) { .fullScreenCover(isPresented: $isFullscreen) {
if case .video(let url, _) = media { if case .video(let url, _) = media {
@ -127,6 +131,8 @@ struct BlindOutcomeView: View {
} }
} }
} }
.navigationViewStyle(StackNavigationViewStyle()) // iPad
.navigationBarHidden(true) //
} }
} }

View File

@ -160,7 +160,7 @@ struct UserInfo: View {
self.userName = userData.username self.userName = userData.username
} }
// Navigate using router // Navigate using router
router.navigate(to: .blindBox) Router.shared.navigate(to: .blindBox(mediaType: .image))
case .failure(let error): case .failure(let error):
print("❌ 用户信息更新失败: \(error.localizedDescription)") print("❌ 用户信息更新失败: \(error.localizedDescription)")

View File

@ -115,18 +115,7 @@ struct MediaUploadView: View {
private var continueButton: some View { private var continueButton: some View {
Button(action: { Button(action: {
// //
if let url = URL(string: "https://cdn.fairclip.cn/files/7348219809961742336/c5ca6151-91d3-483e-b7e7-c37f2cb69dc0.png") { Router.shared.navigate(to: .blindBox(mediaType: .video))
URLSession.shared.dataTask(with: url) { data, response, error in
if let data = data, let image = UIImage(data: data) {
let media = MediaType.image(image)
// Add 5-second delay before navigating
DispatchQueue.main.async {
// Navigate to the outcome view using router after delay
Router.shared.navigate(to: .blindOutcome(media: media))
}
}
}.resume()
}
}) { }) {
Text("Continue") Text("Continue")
.font(.headline) .font(.headline)