Pantalla home: programación de interfaces estáticas

Les dejo acá las variables con las URLs 😄

struct SubModuloHome:View {
    @State var url = "https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4"
    @State var isPlayerActive = false
    let urlVideos:[String] = ["https://cdn.cloudflare.steamstatic.com/steam/apps/256658589/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256671638/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256720061/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256814567/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256705156/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256801252/movie480.mp4","https://cdn.cloudflare.steamstatic.com/steam/apps/256757119/movie480.mp4"]

Debajo del HStack de input de busqueda va este pedazo

...
}.padding([.top, .leading, .bottom], 11.0)
                .background(Color("Blue-Gray"))
                .clipShape(Capsule())

ScrollView(showsIndicators: false){
                SubModuloHome()
                    
                }

Porque al parecer no muestra como lo hace

No me gustó que del video 12 al 13 se saltararon una asignacion de codigo, por ejemplo, el struct llamado “SubModuloHome” y el Spacer que asignaron a la imagen y al textfield para que estos subieran, los anterior pensando en personas que quizá les sea mas dificl identificar esto que dieron por hecho

Es importante mencionar que el NavigationLink(destination:isActive:label) va ser deprecado en futuras versiones, es recomendable utilizar NavigationLink(isActive:destination:label).

Esta es la nueva url del recurso de la API: link la otra dejo de funcionar pero ya la arreglaron.

Para los que tengan problemas con el tema del Navigation, les dejo cómo lo solucione:

NavigationStack {
                ZStack {
                    Button(action: {
                        url = urlVideos[0]
                        print("URL: \(url)")
                        isPlayerActive = true
                    }, label: {
                        VStack (spacing: 0){
                            Image("The Witcher 3").resizable().scaledToFill()
                            Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                                .background(Color("Blue-Gray"))
                        }
                    })
                    
                    Image(systemName: "play.circle.fill")
                        .resizable()
                        .foregroundColor(.white)
                        .frame(width: 42, height: 42)
                    
                    
                }.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                    .padding(.vertical)
            }.navigationDestination(isPresented: $isPlayerActive) {
                VideoPlayer(player: AVPlayer(url: URL(string: url)!))
                    .frame(width: 400, height: 300)
            }

Hola. alguien tiene la resolución a este problema con la nueva versión 16.0?

Button Vs NavigationLink

Mientras sigo las clases del profesor y me doy cuenta que la forma que utiliza esta o será deprecada me toca buscar alternativas que solucionen el problema, hasta el momento he encontrado 2 formas, una es muy similar a la del profesor que seria con un Button y la otra que encontré es solo utilizar un NavigationLink:

Solución con button

ZStack {
	Button(action: {
		url = urlVideos[0]
		print("URL: \(url)")
		isPlayerActive = true
	}) {
			VStack(spacing: 0) {
			Image("thewitcher").resizable().scaledToFit()
			Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).background(Color("Blue-Gray"))
			}
		}.navigationDestination(isPresented: $isPlayerActive, destination: {
			VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
		})
	Image(systemName: "play.circle.fill").resizable().foregroundStyle(.white).frame(width: 42, height: 42)
}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center).padding(.vertical)

Como podemos observar en lugar de agregar un NavigationLink lo ponemos como un modificador del botón (esta solución la vi en un comentario de este curso)

Solución con navigationLink

NavigationLink(destination: {
	VideoPlayer(player: AVPlayer(url: URL(string: url)!)).frame(width: 400, height: 300)
 }) {
	ZStack {
		VStack(spacing: 0) {
			Image("thewitcher").resizable().scaledToFit()
			Text("The Witcher 3").frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).background(Color("Blue-Gray")).foregroundStyle(.white)
		}
		Image(systemName: "play.circle.fill").resizable().foregroundStyle(.white).frame(width: 42, height: 42)
	}.frame(minWidth: 0, maxWidth: .infinity, alignment: .center).padding(.vertical)
}

Personalmente mi favorita porque considero que el código se ve más legible, pero no se si es una buena practica así que toca escoger la que mas te guste.