Construir un reproductor de video que cargue contenido de forma dinámica desde un servidor es una de las funcionalidades más valiosas en cualquier app moderna. En esta lección se programa paso a paso el módulo del reproductor y la sección de información del videojuego, utilizando SwiftUI, AVKit y buenas prácticas de modularización.
¿Cómo crear el módulo del reproductor de video con AVKit?
El punto de partida es la pantalla Game Screen, donde se identifican dos bloques principales: el reproductor de video en la parte superior y la información del videojuego debajo de él. Para mantener el código limpio, cada bloque se construye como un módulo independiente en lugar de escribir todo dentro de un mismo VStack [0:30].
El primer módulo se llama Video y recibe como argumento una URL de tipo String, que proviene de la pantalla anterior. Se le asigna un frame con un height de 300 puntos para controlar su altura [1:00].
swift
struct Video: View {
var url: String
var body: some View {
VideoPlayer(player: AVPlayer(url: URL(string: url)!))
.ignoresSafeArea()
}
}
Para que VideoPlayer esté disponible es necesario importar la librería AVKit en la parte superior del archivo con import AVKit [2:15]. El reproductor se inicializa con un AVPlayer que recibe la URL convertida desde String. El modificador .ignoresSafeArea() permite que el video ocupe toda la parte superior de la pantalla, ignorando el safe area y logrando una experiencia visual completa [2:45].
Al ejecutar la app en el simulador, el flujo funciona así: se inicia sesión, se navega a la pantalla de juegos donde se muestran dinámicamente todos los títulos, se selecciona uno —por ejemplo Cuphead— y el reproductor carga y reproduce el video correspondiente. También es posible dar doble clic para activar la pantalla completa [3:30].
¿Cómo estructurar la información del videojuego con Video Info?
Debajo del reproductor se coloca un ScrollView con un frame cuyo maxWidth es .infinity, de modo que se adapte al ancho completo de la pantalla [4:00]. Dentro de él se crea el segundo módulo llamado VideoInfo, que recibe múltiples parámetros:
- Título del videojuego.
- Estudio desarrollador.
- Calificación.
- Año de publicación.
- Descripción.
- Tags como arreglo de strings.
La estructura interna de VideoInfo utiliza un VStack con alignment: .leading y un frame con maxWidth: .infinity y alignment: .leading para que todo el contenido se alinee a la izquierda [5:20].
¿Qué modificadores se aplican a cada elemento visual?
El título usa .font(.largeTitle), color blanco con .foregroundColor(.white) y un padding(.leading) [6:00]. Una ventaja del canvas de Xcode es que permite verificar en tiempo real cómo lucen los datos de prueba —por ejemplo, "Sonic" aparece como título porque es el valor de entrada del preview [6:30].
Para el estudio, la calificación y el año de publicación, se agrupan en un HStack. Cada uno emplea .font(.subheadline) en lugar de .largeTitle, con un padding(.top, 5) y padding(.leading) para separación adecuada [7:10].
¿Cómo iterar los tags del videojuego con ForEach?
La descripción se muestra como texto con .font(.subtitle) y los mismos modificadores de color y padding. Para los tags se crea un HStack adicional que contiene un ForEach iterando sobre el arreglo [9:00]:
swift
ForEach(tags, id: .self) { tag in
Text("#(tag)")
.foregroundColor(.white)
.font(.subheadline)
.padding(.top, 4)
.padding(.leading)
}
Cada etiqueta se muestra con el símbolo # seguido del nombre del tag, manteniendo consistencia visual con el resto de la interfaz.
¿Cuál es el resultado final del módulo completo?
Al compilar y ejecutar la aplicación, el flujo completo queda funcional: inicio de sesión, listado dinámico de juegos, selección de un título y visualización del reproductor de video junto con toda la información del videojuego —título, estudio, calificación, año, descripción y tags— tal como se planteó en las pantallas de diseño [10:20].
La modularización con estructuras separadas (Video y VideoInfo) facilita el mantenimiento y la reutilización del código. Cada módulo cumple con el protocolo View y recibe únicamente los datos que necesita, lo que representa una práctica sólida de arquitectura en SwiftUI.
Si has seguido el proceso y tu reproductor ya funciona, comparte en los comentarios qué videojuego seleccionaste para tu primera prueba.
