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

View File

@ -2,6 +2,12 @@ import SwiftUI
import SwiftData
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 {
static let navigateToMediaViewer = Notification.Name("navigateToMediaViewer")
}
@ -56,206 +62,233 @@ struct AVPlayerController: UIViewControllerRepresentable {
}
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 scale: CGFloat = 0.1
@State private var mediaToShow: MediaType?
@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 isPortraitVideo: Bool = false
@State private var isPortrait: Bool = false
@State private var displayImage: UIImage?
init(mediaType: BlindBoxMediaType) {
self.mediaType = mediaType
}
private func startScalingAnimation() {
// Start from 10% size
self.scale = 0.1
self.showScalingOverlay = true
// Slower animation with spring effect
withAnimation(.spring(response: 2.0, dampingFraction: 0.5, blendDuration: 0.8)) {
self.scale = 1.0 // Scale enough to cover the screen
private func loadMedia() {
switch mediaType {
case .video:
loadVideo()
case .image:
loadImage()
}
}
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() {
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 playerItem = AVPlayerItem(asset: asset)
let player = AVPlayer(playerItem: playerItem)
//
let videoTracks = asset.tracks(withMediaType: .video)
if let videoTrack = videoTracks.first {
let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform)
let width = abs(size.width)
let height = abs(size.height)
//
aspectRatio = width / height
isPortraitVideo = height > width
isPortrait = height > width
}
player.isMuted = true
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 {
ZStack {
//
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 {
ZStack {
// Frosted glass background with custom transparency
VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterialLight))
.edgesIgnoringSafeArea(.all)
// Video Player
if let player = videoPlayer {
ZStack(alignment: .topLeading) {
Group {
if mediaType == .video, let player = videoPlayer {
// Video Player
AVPlayerController(player: $videoPlayer)
.frame(
width: isPortraitVideo ?
width: isPortrait ?
UIScreen.main.bounds.height * scale * 1/aspectRatio :
UIScreen.main.bounds.width * scale,
height: isPortraitVideo ?
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()
}
}
// Back Button - Always on top
if showControls {
.onAppear { player.play() }
} else if mediaType == .image, let image = displayImage {
// Image View
Image(uiImage: image)
.resizable()
.scaledToFit()
.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: {
if let media = mediaToShow {
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)
DispatchQueue.main.async {
Router.shared.navigate(to: .blindOutcome(media: media))
}
}
}.resume()
}
// BlindOutcomeView
if mediaType == .video, let videoURL = URL(string: MediaURLs.videoURL) {
Router.shared.navigate(to: .blindOutcome(media: .video(videoURL, nil)))
} else if mediaType == .image, let image = displayImage {
Router.shared.navigate(to: .blindOutcome(media: .image(image)))
}
}) {
Image(systemName: "chevron.left.circle.fill")
.font(.system(size: 36))
.foregroundColor(.white)
.padding(12)
.background(Color.black.opacity(0.5))
.clipShape(Circle())
}
.padding(.top, 50)
.padding(.leading, 20)
.zIndex(1000) // Ensure it's on top
.transition(.opacity)
Spacer()
}
Spacer()
}
.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)
.animation(.easeInOut(duration: 1.0), value: scale)
.ignoresSafeArea()
.onTapGesture {
withAnimation(.easeInOut(duration: 0.1)) {
showControls.toggle()
}
}
.onAppear {
// Start animation after a small delay to ensure view is loaded
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
withAnimation(.spring(response: 2.5, dampingFraction: 0.6, blendDuration: 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)
.onAppear {
// Load video first
self.loadVideo()
// Then load image
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()
self.loadMedia()
// Start animation after media is loaded
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
self.startScalingAnimation()
}
}
}
@ -263,5 +296,5 @@ struct BlindBoxView: View {
// MARK: -
#Preview {
BlindBoxView()
BlindBoxView(mediaType: .video)
}

View File

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

View File

@ -115,18 +115,7 @@ struct MediaUploadView: View {
private var continueButton: some View {
Button(action: {
//
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)
// 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()
}
Router.shared.navigate(to: .blindBox(mediaType: .video))
}) {
Text("Continue")
.font(.headline)