Hoy vamos a intentar hacer un clon de Spotify, empezarlo, a ver hasta donde llegamos
Me he basado en un repo que os voy a recomendar, ¿vale? Para que lo veáis
Y os voy a enseñar la demo, pero os voy a enseñar, os voy a explicar lo que vamos a hacer además, ¿vale?
Esto es un clon como de Spotify que hay, que está bastante chulo
Y fijaos que tiene unas animaciones bastante re chulonas, así, pam, pam
Que se mueve la imagen hacia arriba, hacia abajo, y que tiene el hover y todo esto
Y además va cambiando la ruta, pero no tiene play, no tiene play
Le das aquí y no tiene play, no tiene ningún tipo de play
La verdad es que le falta un poco la vida si no tiene play
Pero bueno, está muy muy bien visualmente este clon de Spotify
Lo podéis ver, es totalmente de código abierto
Y de hecho ya os digo que para ir rápidos, seguramente algún CSS nos vamos a copiar
¿Por qué? Porque, hombre, una vez que hagamos este CSS que es muy parecido al que hay aquí
Pues seguramente en lugar de estar repitiendo constantemente
Pues de una lo reutilizaremos y ya está
Pero bueno, que está muy chulo, sobre todo por las animaciones
Y porque, aunque no lo veáis, tiene otra cosa que no se ve, pero es muy interesante
Y es que también tiene componentes de Svelte
Creo que no tiene de React, pero nosotros vamos a utilizar
Componentes HTML normales y corrientes
Segundo, componentes de Svelte, que son muy fáciles de entender
Pero para que veas cómo los podéis utilizar
Y componentes de React
Y para hacer esto, tan increíble que está muy chulo
Vamos a utilizar Astro
Si no sabes qué es Astro, no te preocupes
Porque es un framework web que puedes aprender siempre desde cero
Porque es que es muy parecido a HTML
Y si sabes React, es muy parecido a React
Entonces, lo vas a ir entendiendo sobre la marcha
No te preocupes
Y las cosas que sean un poquito especiales
Yo te comentaré
Oye, esto es así, esto es así
Nos vamos a basar en esto
Se va a parecer, pero bueno, nosotros le vamos a hacer unos cuantos cambios
¿Vale?
Porque hay cositas que quiero añadir
Como por ejemplo lo del Player
¿Ok?
Y además, porque el Player
Mira, esto es Spotify
Spotify tiene este diseño
Que está bastante chulo
¿Vale?
¿Veis?
Tenemos aquí una Site
Tenemos aquí el Player
Que el Player se queda aquí
O sea, tú vas navegando
Y fíjate que el Player se queda abajo
Bueno, no estáis viendo el Player
Porque está...
Vale, ahí veis el Player
¿Veis el Player aquí?
Se queda siempre abajo
Y aunque tú vayas navegando
Mantiene el estado
Pues eso lo vamos a hacer hoy también
Vamos a hacer navegaciones entre páginas con animaciones
Y vamos a conseguir tener un reproductor
Que va a mantener el estado
Se va a persistir conforme el usuario va navegando
Lo cual es impresionante
Porque te va a volar la cabeza
Vas a decir
Esto es magia arcana
Es increíble
Para mi Astro
Que al final lo puedes utilizar sin nada
O sea, puede ser HTML y CSS puro
O puedes utilizar React, Vue, Preact, Svel, Lit, Tailwind, Solid
Puedes utilizar todo lo que queráis
Y a la vez
Y hoy lo vamos a hacer en este proyecto
Para que veáis la potencia que tiene
Cómo podéis utilizar React y Svelte a la vez
Y cómo se integra súper bien
Y además cómo utilizar Tailwind
Y todo este tipo de cosas
Así que nada
Vamos a querer empezar nuestro proyecto
Yo voy a utilizar
Podéis hacerlo de diferentes formas
Si vais aquí, ¿veis?
Podéis hacer
NPM Create Astrolites
¿Vale?
Y ejecutando esto
Ya lo tendríais funcionando perfectamente
Y ya está
Pero ¿Qué pasa?
Que en mi caso
Yo utilizo BAN
BAN es una alternativa a Node
Que va bastante más rápida
Y a mí me gusta más
Pero bueno
Podéis ejecutar esto
Si tenéis Node y NPM
Y si tienes BAN
Pues puedes ejecutar BAN X
Y poner Create Astro Arroba Latest
¿Qué pasa aquí?
Arroba Latest
¿Vale?
Y esto es exactamente lo mismo que lo otro
Solo que va más rápido
Pero bueno
Puedes utilizar el que tú prefieras
¿Eh?
Cualquiera de los dos
El resultado es el mismo
Aquí nos va a hacer unas cuantas preguntas
Vamos a decirle
Yo que sé
Spotify
Twitch
Clone
¿Vale?
Y le decimos
Que nos incluya los archivos por defecto
Los recomendados
¿Vale?
Nos está copiando ya el template
Instala dependencias
Le vamos a decir que sí
Y quiero pensar
¿Ves?
Utiliza BAN
Aquí si lo has hecho con NPM
Pues pondrá que utiliza NPM
Que va a tardar un poquito más
Pero bueno
Tampoco pasa nada
Si planeamos escribir TypeScript
Le voy a decir que sí
Porque la verdad es que sí
Que lo vamos a intentar utilizar
Vamos a decir que es strict
Y vamos a inicializar el repositorio de Git
Porque lo voy a estar compartiendo
Para que podáis seguirlo
¿Vale?
Muy bien
Pues ya estamos aquí
Vamos a levantar este proyectito
Y también por acá
Vamos a poner un BAN
RANDEP
¿Vale?
Esto es para inicializar
Nuestro proyecto
En modo desarrollo
Lo mismo
Puedes hacerlo con NPM
NPM RANDEP
Sería lo mismo
Pero con BAN
La verdad es que se nota que va
Bastante más rápido
Así que lo vamos a utilizar así
Localhost
4
3
2
1
4
3
2
1
Y despegamos
¿Vale?
Por ahora lo tenemos así por defecto
No es que tenga mucha cosa
Voy a limpiar un poco la historia
¿No?
Porque ahora nos ha generado
Todos los ficheros aquí
Con nuestros componentes
Unos componentes para inicializar
Nos ha puesto aquí un layout
O nos ha puesto aquí unas páginas
Pero todo esto no lo vamos a utilizar
Ahora lo vamos a limpiar
Pero antes de eso
Una cosa muy importante
Como vamos a utilizar Astro
En las extensiones
¿Vale?
Fíjate
Tienes que tener Astro instalada
¿Por qué?
Porque si no
Los archivos de los componentes de Astro
No los vas a ver con colorines
Así que instalate la extensión de Astro
La oficial
Por favor
La que tiene verificado
Y así vas a poder ver
Los colores
Vas a tener tipado
Vas a tener un montón de cosas
Ahora
En el layout
Vamos a empezar por el layout
Porque es como lo más
Yo creo lo más importante
Bueno
En el index
Primero el index
Que aquí el index
Es todo esto que podéis ver aquí
Lo que vamos a hacer es limpiarlo
¿Vale?
Voy a quitar todo este main
Voy a quitarlo todo
Voy a quitarlo todo
¿Vale?
Voy a quitarlo todo
Para limpiarlo
Para que empecemos de cero
Porque al final
Lo que queremos es empezar de cero
¿Vale?
Lo dejamos limpio
Ya se ha quedado así
Todo vacío
No hay absolutamente nada
Vamos a poner que esto es el
Spotify clone
Vamos a quitar este import
Que no lo necesitamos
Los archivos de Astro
Son un poquito especiales
Si no sabes Astro
Y luego lo quieres repasar
Que sepas
Que puede ser a midulife
Astro
Curso
Tenemos un curso de Astro
Desde cero
Que lo pusimos hace un mes
Aproximadamente
Y donde hacíamos una página
Muy sencilla
Donde te explicaba
Como funciona Astro
Que se tiene que hacer
Y todo esto
Para que sepas
Aquí es donde iría
El javascript
Que está envuelto
Por estos tres guiones
Y luego aquí
Tendríamos lo que sería
La plantilla
Con el html
Que no es un html exactamente
Parece jsx
Pero tampoco jsx
Pero es una forma
Bastante fácil
De crear la parte visual
Es muy parecida a html
De hecho
Es el 90%
Es html
¿Vale?
Vamos a ir con el layout
Pero antes de ponerme
Con el layout
Lo primero que voy a hacer
Es instalar Tailwind
Así que nos vamos
A la terminal
Y aquí lo mismo
Van x
Astro
Add
¿Vale?
Esto está súper chulo
Porque a ver
No sé si puedo utilizar
Help
Pero hay un montón
De frameworks
Adaptadores
Bibliotecas de terceros
Que podéis añadir
Con un solo comando
En este caso
Si queréis utilizar Tailwind
Solo tenéis que ejecutar
Van x
O npx
¿Vale?
O el que utilicéis
Yo en mi caso
He utilizado
Van
Van x
Astro
Add
Tailwind
Y esto es maravilloso
Porque ya te hace todo
Te lo hace todo
O sea
Esto lo que te va a hacer
Es toda la configuración
¿Vale?
Aquí le decimos que sí
Que quiero continuar
Te instala las dependencias
Que necesitas
¿Ves?
Te va a generar
El tailwind.conf
Vale, perfecto
Le decimos que sí
La integración de tailwind
Perfecto
Y ya está
O sea le he dicho sí
Sí, sí, sí
Y lo único que me ha hecho
Es crearme estos archivos
De configuración
Que yo no me he tenido
Que preocupar
Lo ha hecho de una
Y ya está
¿Vale?
Así que perfecto
Lo único que tengo que decirle
Sí, sí, sí
Quiero añadir tailwind
Y ya está
Para crear el layout
Mira
Hay muchas formas
De crear el layout
Muy complicadas
Enrevesadas
Y tal
Pero
Estás de enhorabuena
No sé si sabes
Si conoces grid
¿Vale?
Grid es una forma
De hacer grillas
Con CSS
Y si miras fríamente
El diseño de Spotify
Podríamos ver
Que es una grilla
O sea
Tenemos aquí
Pues esta parte de aquí
Sería como una columna
Aquí tenemos
Otra columna
¿Vale?
Y tenemos el player
Que está utilizando
Las dos columnas
Y además luego
Si lo miras por filas
Tendríamos que en esta fila
En esta fila de aquí
¿Vale?
Pues tenemos
Estas tres partes
Esta
Esta de abajo
Y esta de aquí
Y luego abajo
Tendríamos un
El player
Que estaría ocupando
Toda la fila
Pues una cosa que me gusta mucho
Justamente de grid
Es que lo que podemos hacer
A ver si soy capaz
Creo que lo podría poner
Aquí ¿No?
El is global
Directamente
Vale
Lo voy a poner aquí
Ah no
Lo puedo poner aquí
Mira
A style
¿Vale?
Que esto está muy chulo
Porque además es con scope
¿Vale?
Lo que vamos a hacer en el layout
Vamos a envolver
Vamos a poner aquí
Un dip
¿Vale?
Dip
Id
App
Que en realidad
La id esta no es necesaria
Pero bueno
La vamos a dejar
Vamos a empezar a utilizar ya
Un poquito de tailwind
Pero ahora vamos a arreglar esto
Porque ya verás
Vamos a poner que sea relativo
Que ocupe todo el alto de la pantalla
Porque así es como está Spotify
Le ponemos un padding
Porque fíjate que aquí
Ves aquí
Bueno no sé si se ve
Pero ves aquí que hay una separación
Bueno pues esa separación
Se la ponemos con el padding
Y luego le decimos
Que deje una separación
Entre las columnas
También de dos
Le vamos a poner de dos
¿Vale?
Una separación entre eso
Y que esto sea
Le vamos a dejar
Vale
Vamos a dejar que esto sea flex
Y un items stretch
Stretch
¿Vale?
Bueno
Esto va a ser como toda la aplicación
Lo que envuelve toda nuestra aplicación
Pero luego
Lo que podemos hacer aquí
En el app
Es indicarle
Cómo tiene que funcionar
Estoy pensando
Si tiene sentido que ponga el flex
Estoy pensando
Estoy pensando
Porque si le voy a poner display grid
Yo creo que no
No tiene sentido que hagamos esto
Ahora lo probamos
Le voy a poner display grid
¿Vale?
Le voy a poner display grid
Lo vamos a hacer aquí
Mira
Vamos a poner
Lab
Y vamos a decirle
Que sea display grid
Y le vamos a poner
Cómo deberían ser
Las columnas
¿Vale?
Grid
Template
Áreas
Las áreas
Esto es muy interesante en CSS
Porque es muy visual
Le vamos a indicar
Las áreas
Que va a tener nuestra grid
Así que se las vamos
Como a
Como a describir
Y le vamos a decir
Oye mira
Si te fijas
Aquí vamos a tener
Arriba a la izquierda
Vamos a tener el aside
En el medio
Vamos a tener el main
El main
¿Vale?
Y luego abajo
Vamos a tener el player
El player
Y el player
Esto a lo mejor
Dices
Ay que complicado es
Pero bueno
Imagínate
Que esto fuese
Como el dibujo
Y fíjate
Que es exactamente así
Este sería
El aside
¿Vale?
Esta parte de aquí
Sería el aside
Esta parte de aquí
Sería el main
Que si te fijas
Está como
Ocupando
Los dos espacios
Que ya está ocupando
O sea
Imagínate que fuesen
Tres columnas
Mira
Vamos a hacerlo
De una forma
Para que lo veas
Más claro
Mira
Imagínate esto
¿Vale?
¿Qué pasa aquí?
Pues imagínate
Que tenemos aquí
Una
A ver si le podemos poner
Verde
¿Vale?
Esto sería
Pues una
¿Vale?
Aquí
Visual
Imagínate que fuese algo así
¿Vale?
Dos
Algo así
¿Vale?
Estos son tres columnas
Tendríamos aquí
Una columna
Esta de aquí
Esto sería una columna
Esta sería
Otra columna
¿Vale?
Y además las columnas
No tienen por qué
Tener el mismo ancho
¿Vale?
O sea que tampoco te vuelve
La cabeza eso
Pues no es necesario
Que tenga el mismo ancho
Podríamos hacer que una columna
Tenga menos ancho que las otras
Y viceversa
¿Vale?
Entonces aquí tendríamos
Como son las columnas
Que son tres
Y eso es justamente
Lo que hemos hecho
¿No?
Hemos dicho que tenemos
Tres columnas
Y arriba
A la izquierda
Tenemos el aside
Que sería justamente
Esta parte de aquí
¿No?
Aquí tendríamos el aside
Vamos a poner estas tres columnas aquí
Estas tres columnas aquí
¿Vale?
Y entonces tendríamos esto
Pero ¿Qué pasa?
Que aquí tendríamos otra columna
Esta de aquí
Que la vamos a poner de otro color
La vamos a poner rojo
¿Vale?
Que esta columna
Si te fijas
Es el main
Este sería el main
Este sería el aside
¿Vale?
Le vamos a poner como verde
Y luego tendríamos el player
Que sería este de aquí
Este de aquí
¿Vale?
Este de aquí
Sería el player
Vamos a ponerlo amarillo
Así que así es como quedaría
Este es el aside
Aside
¿Vale?
Aside
Bueno, no se ve mucho el nombre
No se ve mucho
Pero es que tampoco
Me dan muchas opciones
Bueno, este sería el aside
El main
Y abajo el player
Y esto es básicamente
Lo que le hemos indicado aquí
Ahora
Lo que tenemos que decirle
Es cómo van a ser
Los anchos de nuestra columna
Y podemos hacerlo
De un montón de formas
Para simplificar
Vamos a decirle
Que la primera columna
Vamos a decirle
Que template columns
La primera columna
Tiene que ocupar
350 píxeles
Y así vamos a conseguir
Esto un poco
Que hace Spotify
Que esto ya tiene
Como un ancho mínimo
Y luego el resto
Lo utiliza para lo demás
Y lo demás le ponemos
Que es una fracción
¿Vale?
Y luego le decimos
Grid template rows
Y hacemos lo mismo
Pero decimos
Una fracción
Y luego que sea automático
Así lo que vamos a conseguir
Es que sepa
Qué espacio
Tiene que utilizar
En cada una de las columnas
Y las filas
Y al decirle
Una fracción
Y que sea auto
Lo que estamos haciendo
Justamente es decirle
Oye
Tienes que quedarte
A ver si encuentro aquí
Tienes que quedarte
Esto
Esto sea una fracción
Y esta
La altura
Que se tiene que quedar
El player
Que sea automático
¿Vale?
Y ya con esto
Lo tendríamos
Con esto
Ya deberíamos tener
Más o menos
Ahora todavía nos quedan
Unas cosas
¿Vale?
En lo que sería la grilla
¿Qué necesitamos hacer ahora
Que tenemos el template areas?
Le tendríamos que indicar
En cada uno
De los sitios
Aquí dentro del
Del div
Le tendríamos que decir
Dónde están estas áreas
Por ejemplo
El aside
Sería
Aquí tendríamos que decir
Que es class
Y en Tailwind
No hay un estilo
Claro
No hay forma
Como esto es el nombre
Que le hemos dado a nosotros
Tailwind no tiene una clase
Pero puedes utilizar corchetes
Para utilizar el CSS
Que tú quieras en Tailwind
Entonces le pones
Grid area aside
¿Vale?
Y ahora ya con esto
Lo que podemos decir
Es estilar este
Flex call
Flex
Overflow
Y auto
¿Vale?
Para que esto tenga
Y aquí lo que vamos a poner
Son el aside
¿Vale?
Vamos a poner aside
Por ahora lo dejo así
Solo para quedarme con el nombre
¿Vale?
Tendríamos el aside
Luego tendríamos el main
¿Vale?
El main sería lo principal
Que justamente es lo que hemos visto
Que tendríamos en esta parte de aquí
¿Vale?
Y en el footer
Vamos a tener aquí
El player
Por ahora vamos a hacerlo así
¿Vale?
Y así vamos a poner class
Y aquí lo mismo
Grid area
¡Ay no!
Grid area
Sí, grid area
Este sería el main
Y grid area
¿Vale?
Grid area
Y este sería el player
Creo que lo he llamado
A ver abajo
Main aside player
¿Vale?
Con esto
Más o menos
Deberíamos ver
Vale
No se ve
No se ve exactamente
Porque sí que se ven los nombres
Vamos a hacer una cosa
Voy a ponerle un color a cada uno
Para que lo veas
Claramente
Vamos a ponerle aquí
Un blue
Por ahora
Luego esto ya
Lo quitaremos
Y lo pondremos en el color correcto
Pero para que lo veas
Más o menos
De cómo ha quedado
Exactamente
Y este le vamos a poner
Un white
¿Vale?
Y pum
Ya está
Ya hemos terminado nuestro spotify
No, pero
Fíjate que ya hemos logrado
Un poco
Lo que serían
Las columnas
Como es en spotify
Luego obviamente
¿Qué vamos a hacer?
Bueno
El player
No va a tener un fondo
Por ahora le vamos a poner
Que tenga un ancho
Un alto mínimo
¿Vale?
Para que tenga este espacio
¿Vale?
Le voy a quitar lo de player
Porque no tiene sentido
Y además
El estilo del color
Que veo por aquí
Que tiene este color
Yo creo que es negro
Y si no es negro
Debe ser casi negro
Este background size
No lo vamos a quitar
Voy a quitar todos estos estilos
Que hay por aquí
¿Vale?
Que esto no lo necesitamos
Y ya está
Creo que es negro
Es spotify
Si no alguien me lo dice después
¿Vale?
¿Vale?
Y aquí tenemos white
A ver estos colores
Que tenemos por aquí
Accent gradient
Vale, todo esto
Tampoco necesitamos
Por ahora
Lo dejamos así
¿Vale?
Entonces el player
Quedará ahí
Y ahora lo que podemos hacer
En cada uno
En cada uno
De los que tenemos aquí
El main
Pues nada
Lo podemos estilar
Y el aside
Es donde vamos a empezar
A estilar nuestro spotify
Con la de main esta
Lo que podemos hacer
Es ya ponerle el rounded
Le podemos poner el color de fondo
Para que se diferencie
Vamos a hacer que ocupe todo el espacio
Bueno, creo que esto no haría falta
Así que lo vamos a quitar
Y sí que le vamos a poner
El overflow y auto
¿Vale?
Para que haga el scroll
Eso sí
Ah, esto lo vamos a poner
En el main
¿Ok?
Y por ahora
En este
En el footer
En el footer
No sé si necesitamos algo
Yo creo que no
¿Vale?
Esto lo vamos a quitar
Y ya quitamos esto
Y empezamos aquí
En el aside
Que sería la información
Que tenemos al lado
Vamos a poner ya
Todos los primeros componentes
Que tenemos que hacer
Y todo esto
Así que vamos a crear aquí
Un aside
O aside
Menu
Uy
¿Por qué me está estilando?
Ahora
Aside
Menu
La madre que lo parió
¿Habéis visto?
Se vuelve loco
El
Se vuelve loco
Medita lo de abajo
Cuando no debería
Se vuelve loco
El
Ahora
Todo porque
El nombre es el mismo
Y se vuelve loco
Vamos a crear un componente
Así que vamos a irnos aquí
Components
Y creamos
Aside
Menu
Punto
Astro
¿Vale?
Y esto
Lo vamos a importar
Aquí
Hacemos un
Import
Aside
Menu
From
Y esto vamos a
Components
Aside
Menu
¿Vale?
Y este componente
Es el que tiene que estilar
La parte de la izquierda
Así que
Aquí podríamos hacerlo
De muchas formas
Yo
Ya me he sacado
Todos los
Los iconos
Estos de aquí
¿Vale?
Ya los he sacado
Y ya los tengo
Creados
Entonces
No voy a empezar
A sacarlos otra vez
Pero te puedo enseñar
Cómo saco uno de ellos
Para que lo veas
Yo me he ido a la web
De Spotify Web
¿Vale?
He iniciado sesión
Obviamente
Espero que no me dé ningún problema
¿Vale?
Le das aquí
Botón derecho
Bueno
O abre las herramientas
De desarrollo
Inspeccionas aquí
Y como buen ladrón
Que somos
Vamos aquí
Editar
Como HTML
¿Veis todo esto?
Pues esto
Me lo he copiado
Me he ido aquí
Y aquí he creado
Una carpeta
Que le he llamado
Icons
¿Vale?
Y aquí he puesto
Library.astro
¿Vale?
Me lo he pegado
Esto
Cuando lo he visto
He dicho
Vale
Esto
No lo necesito
Esto tampoco
Lo he borrado
Y ya está
Ya tengo el SVG
¿Y para qué sirve este SVG?
Bueno
Pues para importarlo
Justamente aquí
Aquí hacemos
Un input
De
Library.icon
From
Barra barra
Components
Barra
¿No?
¿Dónde están los icons?
Ah
Aquí
Icons
Y library.astro
¿Vale?
Y lo que he hecho aquí
Es poner library icon
Y ya está
Entonces esto
No lo voy a repetir
Para todos los iconos
Porque seguramente
Pues vamos a estar
Un buen rato
Ya lo he hecho
Ya me he sacado
Todos los iconos
De Spotify
Y lo que voy a hacer
Es copiarlos
¿Vale?
Porque los tengo aquí
Preparados
Y voy a hacer así
¿Vale?
Pero todos he hecho
Exactamente lo mismo
Que has visto
Solo que lo tendría que hacer ahora
Mano a mano
Y no tiene mucho sentido
De hecho hay algunos
Que ni siquiera
Los he limpiado del todo
Este por ejemplo
Veo aquí
Que esto no lo he limpiado
Pero bueno
¿Qué es lo que he hecho?
Que me los he copiado
Los he robado
Que me detengan
Ahora
Lo que vamos a hacer es
Crear
La parte esta de la izquierda
¿Vale?
Esta parte de aquí
Con los iconitos
Y todo esto
Vámonos aquí
Nuestro icono
¿Ves?
Aquí
Nuestro icono maravilloso
Voy a quitarle
El color
Este color de
VG blue
Que he puesto
Ahora veré
Claro
Este no tiene que tener color
Porque lo tenemos que hacer aquí
Como esto
Se supone que es una navegación
Vamos a poner
Nap
Class
Y aquí pues nada
Flex
Flex call
Porque es en columnas
Flex 1
Y gap 2
Gap 2
Ya verás que esto rato
La misma separación
Que vamos a utilizar
En nuestro
Spotify
Porque si hemos utilizado
Gap 2
Para que todo quede bien
No podemos ir inventando
¿Vale?
Dentro del nap
¿Vale?
Vamos a crear aquí un div
Aquí un ul
Y por ahora
Voy a dejar por aquí el iconito
Aquí arriba
Debería ir
La parte
Bueno ahora no se ve nada
Pero no os preocupéis
Debería ir esta parte
De aquí
¿Vale?
Entonces
En este div
Que tenemos
Le vamos a poner
Un color
Un gris
Un poquito más claro
Para que se note
¿Vale?
Lo redondeamos
Y le ponemos la separación
Y dentro
Es donde vamos a tener que
Poner
Nuestros iconos
Junto al lado de cada cosa
Los iconos
Si no me acuerdo
Es la home
Y el search
Vale
Pues vamos a traernos
Vamos a traernos
Import
Home
Icon
Oye que es raro
Que no me funciona
Aquí HacoPilot
¿Verdad?
Ah estos que me hicieron
Desactivarlo
Estos que me hicieron
Desactivarlo
Para el Tetris
Y veo que no me funciona
Claro que así
También tardamos más
A ver ahora
Ah amigo
Muy bien
Muy bien
Vale vale
Muy bien
Muy bien
Eso es lo que quiero
Eso es lo que quiero
Porque si no
Vamos a tardar demasiado
En hacer las cosas
A ver
Aquí podríamos crear
Un componente
La verdad
Vamos a crear el componente
Un componente
Para cada uno
De los casos
Vamos a llamarle
Site
Menú
Item
Punto
Astro
¿Vale?
Porque básicamente
Si no
Tenemos que repetir
El código
Y no está bien
Así que
Vamos a tener esto
Y así te enseño aquí
Cómo se puede hacer
El tema de
Tipar las props
Las props
Es lo que se le pasa
A los componentes
Y las podemos tipar
Podemos decirle que
Va a recibir un href
¿Vale?
Que esto va a ser
Una cadena de texto
Y le podemos decir
Que tiene
Ya está
Un href
Le vamos a pasar un href
Y ya está
Vamos a simplificarlo
El href
Es con la dirección
A la que tenemos
Que viajar
Y aquí pues nada
Le vamos a poner
El item
El a
Href
Aquí le ponemos
Le pasamos el href
¿Vale?
Y aquí directamente
Utilizamos
Lo que se le llama
Slot
Que si ya sabe
React
Pues es parecido
Al children
Y si no sabe
React
Es lo que envuelve
Este componente
Que ahora verás
Lo que es
¿Vale?
Así que por ahora
Esto
Nos faltarían
Lo que serían
Todos los estilos
Vamos a poner
Flex
Aquí una separación
¿Ves que es una separación
Más grande de dos?
Pues le ponemos de cuatro
El texto
Un poquito así
Texting
Vamos a hacer aquí
Think
100
¿Vale?
Para que quede
Un poquito más clarito
Por ahora vamos a dejarlo así
Podríamos ponerle
Que sea
Flex
Item center
Para que se centre
¿Vale?
Y por ahora
Ahora lo estilamos del todo
¿Vale?
Lee
No, Lee no hace falta
Vamos a traer el site
Menú
Item
Href
Esto se supone que es la home
Y le ponemos aquí
El home icon
¿Vale?
Y bueno
Esto no hace falta
Esta separación que me ha puesto
Esto no hace falta
Y aquí vamos a tener la búsqueda
Que si el día de mañana
Pues queremos
Pues podemos hacer más cosas
Así que
Search
A ver
Por ahora lo voy a dejar así
Más que nada
Para que no pete
Cuando le demos al botón
¿Vale?
Esto sea search
Y esto sería el search icon
¿Vale?
Vamos a ver cómo va quedando esto
Bueno
Un poquito
Un poquito
Le queda poco
Le queda poco
Ya esto
Lo bueno es que lo vamos a estar reutilizando
O sea que no nos tenemos que preocupar
Porque esto al final
3.3
Vamos a poner 3
Porque esto al final
Lo vamos a reutilizar
Más de una vez
¿Vale?
Vamos a ponerle
Phone Medium
Y voy a cargar
Es verdad
Voy a cargar
Ahora me he acordado
Voy a cargar
La fuente
De Spotify
Que creo que ya
Que la he robado también
La podemos añadir
¿Vale?
Bueno
Pues con esto
Ya estamos empezando
No queda exactamente igual
¿Por qué?
Porque yo creo
Que vamos a intentar
Que se parezca más
A Spotify
¿No?
¿Veis que se parece
Más que el clon este?
Yo creo
Que se parece un peli más
Igual le falta un poco
De separación
Pero a ver
No lo voy a hacer
Pixel Perfect
Porque estaríamos aquí
Todo el día
¿Vale?
Pero bueno
Si vamos a intentar
Que se parezca
¿Se puede hacer como
Enxbelt?
Red
¿En vez de red
Igual red?
No
No se puede
Por desgracia
No se puede
Pero bueno
Por ahora ya tendríamos
Esta parte
¿Vale?
Que sería exactamente esta
Y ahora aquí abajo
Pues podríamos hacer otra vez
Lo mismo
Más o menos
Así que vamos a poner aquí
Otro div
¿Vale?
Vamos a poner aquí
Esto
Con tu biblioteca
Y esto en realidad
Lo podríamos poner
En un UL
Pero no sé si vale la pena
Que lo pongamos en un UL
No lo sé
No sé si lo pondremos en un UL
Vamos a copiarnos por ahora
Esto
Porque esto es exactamente igual
¿Vale?
Lo que envuelve
Para que se vea
Esto así
Y aquí
En el library icon
Vamos a ponerlo en un UL
Vamos a hacer exactamente lo mismo
Y así lo reutilizamos de verdad
¿Vale?
Porque se supone
Entiendo
Que en Spotify
Sí que te puedes ir a tu biblioteca
A ver tus canciones
Así que
Vamos a poner por ahora esto
Y luego más adelante
Ya veremos lo que hacemos
¿Vale?
Por ahora
Tenemos esto así
¿Vale?
No está mal
Obviamente nos faltaría el tema
De que llega hasta abajo
Bueno
Pues eso lo deberíamos poder arreglar
Poniendo un flex 1
Aquí
¿Vale?
Y ves
Ya tenemos que va hasta abajo
En flex 1
Lo que estamos diciendo es
Toma todo el espacio que puedas
Y deja
Y deja
O sea
No dejes nada
Lo que pasa es que aquí abajo
¿Qué es lo que pasa?
Que aquí abajo está el player
O sea que es normal
¿Vale?
Que no llegue hasta abajo
Abajo
¿Vale?
Así está
Ahí está bien
¿Cómo lo hace para arrastrar una línea
Desde el teclado?
Con alt
Dejo el alt pulsado
Y ahí lo tengo
Muy bien
Entonces
Ahora
¿Qué es lo que necesitamos?
Lo que tendríamos que hacer
Es esta parte de aquí
Y es interesante que la hagamos
Porque esto lo vamos a reutilizar
Más de una vez
Así que
¿Qué he hecho?
Para no tener que tirar de APIs
Y todo esto
Porque si no estaríamos aquí
Todo el día
¿Vale?
Tirando de APIs
Lo que he hecho
Es como crear
Un mock
Un mock
En el que tengo
Un montón de información
¿Vale?
Y me he basado
Justamente en el proyecto
Que os decía
Que era de código abierto
Que lo habían hecho
Le he cambiado unas cuantas cosas
Y entonces lo voy a traer aquí
Vamos a ponerle
Le he puesto más información
Le he puesto canciones
Y lo vamos a utilizar
Le voy a llamar
Data.ts
Que además tiene los tipos
Pero esto es como un mock
¿Vale?
Esto no es que
Esto al final es información
Con todo el JSON
Y todo que tenemos
Por ejemplo
De las canciones
Y tal
Porque no me daría tiempo
Ahora
Hacer llamadas a Spotify
Y lo que hacemos con esto
Simplemente es decir
Bueno
Ya tengo aquí
Todas las canciones
Todas las playlists
Y lo único que tengo que hacer
Es importarlo
Cuando lo quiera utilizar
Más adelante
Y además
Pues ya sabéis
Que va a ser de código abierto
Le podéis dar cañita
Lo que vamos a hacer
Es que realmente
Venga de la API
Si no de Spotify
Porque a lo mejor
Spotify no te deja
Reproducir las canciones
Lo tengo que mirar
Pues al menos
De otra API
Pero algo haremos
Y aquí en colores
¿Ves?
Tengo aquí un objeto
Que es de colores
Donde tengo rojo
Y tenemos la parte oscura
Y acentuada
¿Vale?
El naranja
El amarillo
Y tal
Esto me lo he copiado
Tal cual del otro proyecto
Porque esto
Lo que nos va a permitir
Es jugar con los colores
Cuando te pongas encima
De un álbum
Y vais a ver
Que aquí
Cada uno
¿Ves?
Tiene un color
Y dice
Este álbum
Es de color amarillo
Entonces va a utilizar
Ese color amarillo
Para así mostrarlo
En la UI
¿Vale?
Entonces tendríamos
Todas las listas
De reproducciones
Todas las canciones
Con sus duraciones
Con sus imágenes
Y aquí tendríamos
Los colores
Que corresponden
A cada álbum
Además
Para tener las canciones
Claro
Y no inventarnoslas
Me he descargado
Un montón de canciones
Que son de código abierto
¿Vale?
Que las tengo aquí
Que las voy a copiar
¿Vale?
Aquí en public
Music
Y ya está
Como todo ordenado
Por álbum
Y cada uno
De los tracks
¿Vale?
Esto sería el álbum 1
El 2
El 3
Y estos son canciones mp3
Que ya me he descargado antes
Para no tener que descargarlas
Ahora uno a uno
Y además de esto
Otra cosa que he hecho
Es robarle la fuente
A Spotify
¿Vale?
¿Veis estas fuentes
Que tenemos aquí?
Pues estas fuentes
Son justo las que están
Utilizando en Spotify
Es circular
No es que se la he robado
Y que sea
Este prohibido
Sino que
Lo que he hecho
Para verlo
He venido aquí
Y he mirado
Cual era la fuente
Que estaban utilizando
Me he venido para acá
En computed
He hecho
Phone family
No sé si lo veis
Family
¿Vale?
¿Se ve?
Sí se ve
Ahí
¿Vale?
¿Veis?
Circular SP
Y aquí lo que he hecho
Pues es decir
Vale
Y este circular SP
¿De dónde sale?
Y he buscado
Circular SP
Font
¿Vale?
Y por ahí
Mira
Circular Spotify
Text from download
Bueno
Pues algo así he hecho
¿Vale?
No sé de dónde la he descargado
No tengo ni idea
No tengo ni idea
Pero la he descargado
Me la he robado
Me la he robado
Y ya está
¿De tanto robo
Nos van a denunciar?
Bueno a ver
Espero que no
Espero que no
Al final
Lo único que he hecho
Es descargar la fuente
Y para usarla
Pero no
No es que la estoy utilizando
Un proyecto mío comercial
¿Vale?
Así que
Para el tema de la fuente
No os voy a explicar hoy
Pero en el curso de CSS
Os lo explicaré
Con más tiempo
Vamos a tener que utilizar aquí
El phone face
¿Vale?
Phone face
Es la forma que utilizamos
Para cargar fuentes
Así que tenemos que poner
Phone face
Le tendríamos que decir
Phone family
¿Vale?
Y aquí le diríamos
Circular
El nombre que tú quieras
Aquí le puedes llamar
Como tú quieras
En el caso de Spotify
Le han llamado
Circular STD
Todo junto
Aquí además le diríamos
Pues el source
De donde tiene que salir
¿Vale?
Esto sería URL
Aquí
Y luego tendríamos aquí
El phone wave
Y tal ¿No?
Para no tener que hacerlo
Todo a mano
Porque son unas cuantas fuentes
Ya también me lo he preparado
¿Vale?
Tengo aquí un montón
De fuentes hechas
Pero básicamente
Es lo que os he comentado
¿Vale?
Solo que
Todas las he llamado igual
Aquí tenemos el source
Que encaja
Este barra fonts
Va aquí
Barra fonts
Y a la fuente
Y luego tendríamos
Cada uno de los anchos
Y el estilo
Porque también puedes tener
Itálicas
Y esta sería la forma
En la que se cargan
Esto lo comentaremos más
En el curso de CSS
Pero esta sería la forma
En la que se cargan
Las fuentes
¿Vale?
Así que
Ya teníamos con esto
El phone face
Las fuentes cargadas
Pero para decirle
Que la utilice
Aquí en el phone family
Tenemos que decir
Vale
Pues utiliza
Circular STD
¿Vale?
Y le ponemos la primera esta
Y luego como fallback
Utilizaría esta
O sea
Si no encuentra esta de aquí
Utilizaría esta
Y si no
Utilizaría esta
Y ahora
Guardando estos cambios
Pues ya podemos ver
Que sí que es la misma fuente
¿Vale?
Ahora sí que podéis ver
Que le falta un detallito
Ahí un poquito
Alguna cosa más oscura
Degrada o lo que sea
Pero más o menos
Tampoco espero hacerlo
Exactamente igual
Exactamente
Exactamente igual
Lo que sí que es verdad
Que aquí
Yo creo que es este
Es como más oscuro
De hecho parece negro
De verdad
Yo diría que es negro
O sea
Parece negro
Parece bastante
Bastante negro
O sea
En Spotify digo
Este color de aquí
Parece negro
Yo diría que es negro
Que me habéis dicho que no
Pero yo diría que es negro
No sé
No sé
No sé si poner
Algo así
Pero a mí me da la sensación
Creo que la site
Englobó todo el continuo
En el layout
Al crear el componente
Del aside menu
A ver
Me dicen que
El aside menu
El aside
El aside
En el layout
El aside
No, no
Está bien
Aside
Esto está
Ah no
Tienes razón
Tienes razón
Esto está mal
Esto está mal
Esto debería ser aquí
Y el slot este
Bien visto
El slot
Tendría que ir
Aquí
¿Vale?
Aquí
Y ahora sí que
Estaría bien
Bueno
Voy a poner por ahora
Player aquí
Solo para que la gente sepa
Que es lo que va en este hueco
Porque a lo mejor
La gente no
No lo entiende
Y también
Voy a poner que por defecto
El color sea white
No por nada
Sino porque así
Este tipo de cosas
Pues saldrán mejor
¿Vale?
Venga
Vamos con los estilos
Del side menu
Menú
Ay
Basta
Que no me sale
Side menu
Aside menu
¿Vale?
Aquí
Tendríamos que poner
Tendríamos que cargar
Toda la playlist
Toda la playlist
Que esto lo tenemos en data
¿Vale?
En data
Aquí
Deberíamos tener
Como la playlist
¿Vale?
¿Ves?
Export const playlist
Pues esta playlist
Es la que vamos a utilizar
Esta playlist
Vamos a cargarla aquí
Import
Playlist
From
Y aquí
A ver
Esto me da bastante
Me da bastante palo
El hecho de que
Estamos constantemente
Con el punto punto
Voy a arreglar esto
¿Vale?
Si no os importa
Porque si no
Vamos a estar con
Punto punto
Punto punto
Y es un poco rollo
Lo que voy a hacer
Esto se le llama
Un alias
¿Vale?
Aquí
Que tenemos
Extens
Y todo esto
Podemos utilizar
El compiler
Options
¿Vale?
Y aquí le añadimos
Base URL
Que le ponemos
Un punto
Y le podemos poner
Como alias
Yo con este
Ya soy feliz
Pero le podéis poner
Tantos como queráis
Por ejemplo
Tener un alias
Para los componentes
Para los iconos
Y lo que sea
O sea
Por ejemplo
Para los iconos
Podrías hacer
Barra components
Y aquí
Lo único que tenéis que poner
Source
Barra components
No sé qué
Y hacer lo mismo
Para los iconos
Está bastante chulo
O sea
Está muy bien
Porque al final
Ya no te tenéis que preocupar más
Por ejemplo
¿Veis este punto punto
Barra no sé qué?
Pues ya
Esto lo podéis cambiar
Por barra
Icons
Así
Y ya detecta
Donde está
Porque le hemos dicho aquí
Oye
Cuando pongas
Arroba icons
Tienes que ir a
Source
Icons
No sé qué
No sé cuánto
Y está bastante bien
Y esto es lo mismo
Ahora
Lo de data
Que también tenía por aquí
He hecho barra
Data
No sé si era data
Source data
Y aquí podríamos tener
Bueno
Le he llamado lib
En realidad
O sea que vamos a ponerle
Lib
Lib
Y data
O sea que sería
Arroba
Lib
Barra
¿Ves?
Data
Y así ya lo tienes
Mucho más fácil
Y así ya te olvidas
Totalmente
De
De carpetas relativas
Y lo que sea
Que es un rollazo
¿Vale?
Es bastante rollo
Entonces
Muy bien
Ya tenemos esto aquí
Vamos a
De los playlists
Hacemos un map
Y para cada playlists
Vamos a renderizar
El
Side
Side
Side
Menu
Card
¿Vale?
Lo vamos a marcar
Le pasamos la playlist
¿Vale?
Con toda la información
Y ahora aquí
Creamos
Tenemos que crear el componente
Así que
Side
Side
Menu
Card
¿Vale?
Y creamos este componente
Igual que hemos hecho
Con el de antes
Side
Menu
Card
Punto
Astro
¿Ok?
Aquí lo mismo
Vamos a tener esto
Podemos tipar
Podemos importar
El tipo
De la playlist
Que lo teníamos
En el
LibData
¿Vale?
Aquí fíjate que además
De toda la información
Que dice aquí
Que esto no es un módulo
Colors
No es un módulo
A ver
Y este export
¿Qué es?
¿Cómo que no es un módulo?
No me engañes
Sí que es un módulo
No me engañes
No sé por qué me está diciendo eso
Porque sí que es un módulo
Bueno
Tenemos la interfaz
De los tipos
Esto si sabes TypeScript
Si no
Pues no te preocupes de esto
Pero básicamente
Lo que tenemos sería
El contrato
De cómo son
Los objetos
Con los que estamos trabajando
Que la ID es un string
Que el álbum ID es un number
Que tiene un título
Un color
Que no sé qué
Y esto pues nos ayuda
¿No?
Y aquí pues ya le podemos decir
Oye
La interfaz
De las props
Es que le tiene que llegar
Una prop llamada playlist
Que es del tipo playlist
Y esto nos ayuda
A la hora de trabajar
En el astro.props
Y ahora por ejemplo
Si queremos
Pues destructurar
Lo que viene en playlist
Vamos a tener aquí
Un autocomplete maravilloso
Para decirle
Vale
Quiero la ID
Quiero el cover
Quiero el title
Quiero los artist
Quiero el color
¿Vale?
Y esto ya funciona
Y nos dice el tipo
De cada cosa
¿Vale?
¿No peta en astro
Por no agregarlo
También los alias
En la configuración?
En byte
Hay que añadirlo
En config
Y en la config
Pues en principio
No
Al menos
El modo desarrollo
Funciona
El modo desarrollo
Funciona
Luego veremos
A lo mejor
Si lo desplegamos
Bueno
Voy a poner
Las listas
Porque veis aquí
Que aparecen
Bueno aquí no aparece tanto
Aquí pone como artista
Y ya está
Pero es verdad
Que aquí sí que parecen
Como los artistas
Bueno
Vamos a poner los artistas
Y ya está
En un string
Lo he utilizado con un join
No sería lo más correcto
No os voy a engañar
Lo más correcto
Sería utilizar
La internacionalización
Con el last list item
O sea
Intel.listformat
Este
Esta sería la forma correcta
¿Vale?
De hacerlo
¿Por qué?
Porque al final
Puedes tener más de un idioma
Según el idioma
En unos van con coma
Otros no van con coma
Y es importante
Que lo hagamos bien
Pero bueno
Solo para que lo sepas
¿Vale?
¿Vale?
Playlist ID
Esto no le gusta
Por no sé por qué motivo
¿Vale?
Vamos a ponerle ya
El href
Para que el playlist
Pues vaya al sitio correcto
No sé si estos estilos
Que me está poniendo aquí
Tienen sentido
Yo creo que no
Así que voy a
Voy a utilizar los buenos
Lo primero
Voy a ponerle ya
Una clase
A este elemento
Porque más adelante
Nos va a interesar
Poder escuchar
Cuando el cursor está encima
Para cambiar unos colores
¿Vale?
Vamos a utilizar
Que sea flex
Relativo
También le ponemos el padding
Overflow hidden
Yo creo que esto
No sería necesario
Pero bueno
El round de tampoco
Item center
Le dejamos una separación
Creo que hemos puesto
De 4 antes
O de 5
No me acuerdo
Y nada
Sí que lo vamos a
Hacer esto
Y le vamos a poner también
El hover
¿Vale?
Porque este
Este no tiene hover
Pero estos sí que tienen
Un hover así de fondo
El de arriba no
Pero el otro sí
Así que le ponemos
Think
Y 50
50 no
¿No?
Tendrá que ser mucho más
Yo que sé
500
Algo así
¿Vale?
Venga
Ahora aquí
Lo que vamos a hacer
Es pues poner la imagen
Cargarla
Y todo esto
Picture
Class
Lo hacemos chiquitito
12
Flex
Que no
Vale
Vamos a dejar así
No creo que haya ningún problema
El picture es un elemento
Justamente para envolver imágenes
¿Vale?
Que muchas veces
Ah el picture no sé qué
Pues para ahí lo tenéis
Para esto puede servir
Y aquí
¿Vale?
Cover of title
Esto tiene buena pinta
Object cover
El cover
Lo hemos sacado de la playlist
Y es la imagen justamente
De la canción
Bueno en este caso
De la lista de reproducción
Así que lo tenemos que mostrar por aquí
¿Vale?
Vamos a ver
¿Vale?
Ya empieza a verse
Vale me he pasado aquí un poquito
Con el color este
¿Vale?
Pues algo así
¿Vale?
Ya tenemos las imágenes
Y ahora el lado del picture
Lo que vamos a poner es
Por un lado
Vamos a poner un dip
¿Vale?
Un dip
Que no pasa nada
Se pueden poner dips
Que luego la gente
Ah que ha puesto un dip
Que no sé qué
Vale
Flex auto
Flex call
Y truncamos
Vamos a poner truncate
Por si el título
Es demasiado largo
Para que ponga puntos suspensivos
¿Vale?
Si no
Esto lo que haría
Es que se perdería el título
Y esto lo que hace
Es que si no cabe el título
Pone puntos suspensivos
¿Vale?
Vamos a utilizar un h4
Aquí teníamos el title
Y aquí abajo
Le vamos a poner un span
Y aquí vamos a poner
Los autores
¿Vale?
Bueno
Esto más o menos
Obviamente ahora
Vamos a estilar un poquito mejor
Por ejemplo
Vamos a poner que esto sea
Negrita
Que sea un poquito más
No sé si poner que sea un poquito más grande
LG
A ver
¿Cómo quedaría esto?
No
No es tan grande
No es tan grande
Vamos a poner semivolt
Vamos a poner
Tex LG
Tampoco tanto
O sea
El base
Es el normal
Y luego viene el LG
Ostras
Pues es que es muy grande
Bueno
Pues lo vamos a dejar sin nada
¿Vale?
Y le vamos a poner esto así
Me sigue pareciendo como demasiado
Demasiado negrita
¿No?
No sé si
¿Cuál es el que viene?
Medium
¿Puede ser que sea medium?
Es que me parece como demasiado
Yo creo que a lo mejor no tiene negrita
Me da la sensación
Lo que sí que puede ser
Es que sea blanco
Y por eso me da la sensación
Y además puede ser que sea un pelín pequeño
O es cosa mía
¿Sabes?
Igual lo que pasa aquí
Es que esto es un text S
XS
O sea que es un poquito más pequeño
Pues un text base
Es que me parece que
No hay uno ahí
Ah el SM
Vale
El SM
Ese es el que estoy buscando
Yo creo que es el SM
Y este sí que será el XS
¿No?
Text XS
Y este es un poquito
Este sí que es como más
Más oscurito
No sé si
Nos vamos a pasar con esto
Bueno
Algo así
Más o menos
¿Vale?
Más o menos
De nuevo
Esto luego ya lo arreglaremos más
Lo llevaremos a otro nivel
Pero más o menos
Para que tengamos esto
Ahora cuando le damos click
404
Esto es lo que ahora
Vamos a querer arreglar
Aparte de estilar el main
¿Vale?
Pero al menos ya tenemos
Esta parte aquí
Ya tenemos un poquito aquí
Los estilos
Y vamos a crear
El index
Porque es el index
Es lo que vamos a mostrar aquí
Justamente nos interesa
¿Vale?
¿Cómo va la cosa?
Mi lado de la tan dice
Clona la maquetación
Y pasa a los next S
No hombre
Pero es complicado
Necesito un curso de Tailwind
Pues lo vamos a hacer también
¿Puedes esconder la terminal?
Me da cosa verla ahí
Es que el problema
De la terminal
Es que como nos pete algo
La vamos a echar de menos
Cuando nos peta algo
No voy a ver el problema
Y me va a decir
¿Qué cosas se pueden copiar
Y cuáles no a la hora
De hacer una página
Siguiendo de ejemplo
Una que ya existe?
Hombre
A ver
Si quieres practicar
Depende ¿no?
Si quieres practicar
Pues estaría bien
Que intentas
Es copiar lo mínimo posible
Si tienes prisa
Y quieres practicar
Por ejemplo
Javascript
Pues cópiate
Todo el CSS que puedas
Y luego le das cañita
Al Javascript
¿No?
O sea
Sí al Javascript
O sea que depende
Depende de lo que quieras hacer
Bueno
Vamos con este
Vamos aquí con el layout
Que aquí pues viene
Una cosa bastante interesante
Porque aquí es donde
Vamos a tener
Un contenedor
Le voy a poner
Playlist container
Para tenerlo aquí
Bastante bien definido
¿Vale?
Y este contenedor es clave
Porque este contenedor
Es donde van a ocurrir
Un montón de transiciones
Voy a ponerle aquí
Transition
Duration
Vamos a ponerle
Un segundo
Que sean todas las transiciones
Y vamos a poner
Que el fondo sea verde
Por ahora ¿eh?
No os preocupéis
Que ahora lo arreglaremos
Y veréis que
Que queda más Spotify
Que lo que vamos a ver ahora
Entonces por ahora
Ponemos esto
Luego
Aquí
Tendríamos que poner
Un page header
¿Vale?
Que es como
La navegación
Que se ve arriba
Si os fijáis
Esta navegación
Está aquí
Y además
Conforme tú vas navegando
Se queda ahí
La navegación
Esa la vamos a hacer después
¿Vale?
Que ya he robado
Los iconos para hacerlo
Eso sería el page header
Luego además
Cuando entras
También tienes esto de
Bueno ahora me sale
Escuchado recientemente
Pero esta mañana
No me salía eso
Me salía lo de
Buenos días
A ver
Escuchado recientemente
A veces te sale
Buenos días
Y tal
Que aquí se lo han copiado
Ves que pone
Good night
Eso lo deberíamos poner
También lo vamos a hacer
Y lo vamos a hacer
Justamente aquí abajo
¿Vale?
Aquí pondríamos
Deep class
Vamos a poner un
Relative
Vamos a hacer que esto
Se quede
Más tanto
Aquí
Y aquí es donde
Deberíamos poner el
Greetings
¿Vale?
Lo vamos a hacer así
Con el greetings
Y aquí ahora ya
Voy a estilar directamente
Los
Las cosas estas
Estas cosas
Estas cajitas
Bueno en este caso
Ves que son como cajitas así
Podríamos hacer solo esta cajita
Porque total veo que solo es la cajita
La que
¿Cómo he visto yo esta cajita entonces?
Porque esta cajita la he llegado a ver
Y he dicho
Ah pues sí que se parece
Pero aquí veo que solo tienen esta cajita
No sé
¿Qué hacemos?
Porque al final la cajita está fácil
Esta cajita es fácil
Porque es muy parecida a esta
¿Cuál hacemos?
¿Cuál queréis que hagamos?
Venga
Vosotros decidís
Si eso sale segundo el tiempo
Apreta inicio
A mí me sale
Ah apreta inicio
Vale vale
Aquí
Ah no
¿Veis?
No me sale ahora
Hacemos la cuadrada
¿Queréis que hagamos la cuadrada?
La cuadrada al final es muy parecida a esta
Si hacemos
Yo más que hacer ambas
Voy a intentar hacer la cuadrada
¿Vale?
Porque me parece más interesante
Y porque al final se parece bastante
A la que ya
A la que realmente necesitamos
¿Vale?
Entonces voy a hacer la cuadrada
Pero antes de hacer la cuadrada
Voy a ver cómo va quedando esto
Si guardo los cambios
Vale
Esto
Espérate
Porque esto no me está
Bueno
Porque no tiene nada
Que renderizar
Me lo está dejando aquí
Vale
Espérate
Que la he liado
¿No?
Con algo del layout
La hemos liado con algo del layout
Porque
¿Veis que me lo está dejando aquí?
No sé
¿Qué he hecho aquí?
Con el crash relative
No sé qué
En el main
A ver
Esto debería funcionar
Si antes ha funcionado
¿Qué hemos hecho?
Que lo hemos roto
A ver
¿Qué ha pasado?
¿Qué ha pasado?
Tenemos el aside
Ah
¿Ves?
Es que esto
Me lo sigue poniendo mal
Es que
Ah
Pensaba que lo había arreglado
Y me ha dejado el aside todavía ahí
La madre que lo parió
Ahora sí
Vale
Ahora sí
Ahora sí
Menos mal
Estaba ya alucinando
Digo joder
Con lo que cuesta el tema del layout
Y lo hemos hecho bien
Solo faltaba
Que no esté
Vale
Entonces
Primero
Antes de hacer estas cosas
Claro
Arriba van
Los greetings
Voy a poner aquí
Buenos días
Vamos a hacer que esto sea
Rollo
No sé
Un h1
Que esto no debería ser un h1
Pero bueno
Para que lo tengamos
Quito esto
Vamos a poner aquí
Class
Text xl
Vale
Buenos días
2 xl
Sí
4 xl
Bueno
No sé cómo es el buenos días
Luego lo miramos
No es importante esto
Ahora
Lo importante ahora
Es lo de los greetings
Justo debajo
Justo debajo
Vamos a hacer
Que tengamos
Todos los playlists
Así que vamos a importar
Los playlists
Playlist
Aquí
Y los vamos a iterar
¿Vale?
Porque justamente
Vamos a crear todas las cards
Playlist.map
Y para cada playlist
Vamos a renderizar
Un playlist
Item
Card
Que le pasamos el playlist
Con toda la información
¿Vale?
Esto
Debería cerrarse automáticamente aquí
Este es el componente
Que vamos a crear ahora
Así que nada
Volvemos aquí a componentes
Esto es así todo el rato
¿Eh?
Crear componentes
Punto astro
¿Vale?
Lo bueno es que
Esta card
La
Ya
Bueno
Sería como la más importante
Que vamos a tener
Así que
La importamos
Import
Playlist
From
Components
¿Vale?
Utilizando el alias
Playlist
Cards
¿Vale?
De layouts
No tenemos alias
Así que no
No lo podemos utilizar
Y aquí
Pues vamos a
Vamos a empezar a
Estilar el
Playlist
Item
Card
¿Vale?
Muy bien
Vámonos por aquí
Importamos
El type
De playlist
Para saber
Que es lo que le llega
Interface
Props
Props
Playlist
¿Vale?
Traemos playlist
Esto es muy parecido
A lo que hemos hecho antes
La verdad es que
Se parece
Bastante
Solo que cambia el diseño
O sea que igual
Me lo puedo copiar
¿Sabes?
Me puedo copiar todo esto
Que es lo que hemos hecho antes
Me lo puedo copiar
Y lo que puedo hacer
Es cambiar un poco
Algunas cositas
Que obviamente
Pues por ejemplo
El flex
Va a ser diferente
O sea este
Playlist
Item
Lo dejamos
El flex
El relative
Y todo esto
Esto sí
Transition
No faltaría
La transición
Transition
All
La duración
También
¿Vale?
El overflow
Hidden
Por si acaso
Overflow
Hidden
¿Vale?
Todo esto lo podemos quitar
Ah ya tenía
Item center
Eso lo tengo también
Lo único que necesitamos
El gap
Lo tenemos
El rounded
Lo tenemos
Tendríamos que tener
El shadow
¿Vale?
Y necesitaríamos también
Cuando hacemos hover
Que el shadow sea más grande
Y cuando hacemos hover
A ver
¿Vale?
Ahora
Lo del fondo
No os asustéis
Que eso lo arreglamos ahora
Y también necesitaríamos
El vg
¿No?
Es el vg
Think
500
Le ponemos una
Cosita así
¿Vale?
Vamos a arreglar
Lo del fondo
Antes de que la gente
Se me ponga nerviosa
Porque igual el fondo
Dicen
Ostras es que el fondo
Está roto
Y tal
Lo que pasa
Es que lo que hace
Spotify
Es como un degradado
En el fondo
Entonces
Aquí
Que es donde estamos
Aquí en este page
Vale
Aquí
Justamente
Page header
Dif y tal
Aquí vamos a poner
Una clase absoluta
Esto es muy típico
El degradado este
Es súper típico
Que haces un gradiente
Que va hacia arriba
Y lo que haces es
Que vaya desde
Por ejemplo
Un think 900
Ya va desde
Un momento
O sea
Ya empieza
Bastante oscuro
Y entonces
Al final
Lo que hace es tener
Como
Un
Más oscuro todavía
Pero con opacidad
¿Vale?
Y con esto
Así
Y si no se me ha olvidado
El relative
Deberíamos tener
¿Ves?
Algo más así
Ahora
Aún así
Claro
Como esto queda
Bastante arriba
Tiene ese
Esa sensación
Pero claro
Veis aquí
Que en realidad
Sí que es como
Transparente
Porque
Lo que pasa es que
Sí que tiene
Como un color de más
Lo que pasa es que
Queda más abajo
Y aquí no lo tienen
Claro
Es que aquí no lo tienen
En ellos
Ellos sí que lo hacen
Y por eso aquí
No se le ve tanto
Porque está mucho más abajo
Pero realmente
Si lo quitamos
Le pasaría algo parecido
¿No?
Así que
Igual lo podríamos
Tunear un poco
Pero bueno
Luego lo tuneamos
Si hace falta
Lo importante
Lo importante es que
En el
En el playlist este
Lo que vamos a hacer
En este playlist tal
¿Vale?
Vamos a
Vamos a
Hacer un
Class
Flex
Flex
Grab
¿Vale?
Con un
Le damos más separación
Y que se separen
Estas cositas
¿Vale?
Y dentro
Vamos a hacer esto
Que sea
Como más
Podemos hacer que tenga
Un ancho concreto
Creo que tiene sentido
Porque si no
Al final puede ser
Un poco complicado
Primero la imagen
Es más grande
¿Vale?
Podemos hacer
Que esto sea
Con un aspect ratio
Que sea cuadrado
Ponemos esto
Esto tiene que ser
Tal cual
Y aquí le vamos a poner
Que tenga
No sé cuánto será
Vamos a ver
¿Vale?
Ya se va apareciendo
Un poquito más
A ver cuánto
Lo ponen aquí
170
170
Bueno
Casi
Casi
176
Vete a saber si utilizan
Tailway
Porque es como muy cuadrado
Vale
Al menos ya tendríamos
Un poquito esto
Y ahora lo que faltaría
Es poner abajo
Justo la información
Que necesitamos
El picture
Lo ponemos aquí
¿Vale?
¿Y por qué no se...?
Vale, el truncate este
Bueno, puede ser que
Sí que sea necesario
Pero ¿Por qué no me aparece...?
Ah, no me aparece
Porque esto tiene que ser
FlexCall
¿Verdad?
Vale
Ahora sí
Ya tendríamos
Empezaríamos a tener esto
¿Qué más?
¿Qué más tendríamos por aquí?
El FlexCall
¿Vale?
Esto no estaría alineado
O sea que esto tiene que ser
A la izquierda
Por lo tanto
ItemsCenter
O sea, esto que está centrando
¿Esto sería FlexStart?
¿O ItemsStart?
¿Por qué me está centrando esto?
A ver, que no pasa nada
Lo puedo quitar de aquí
Pero me gustaría entender
¿Por qué?
¿Sabes?
Al final esto lo puedo poner aquí
Le puedo poner el padding
Y ya está
Pero no entiendo
Porque cuando hay un Flex
Dentro de otro Flex
Me lo está haciendo
Mmm...
Bueno, no pasa nada
Lo importante
Es que esto lo podemos quitar de aquí
Esto de acá
Y aquí le podemos dar
El mismo
Algo
Una cosa así
Pero más solo de la X
¿Vale?
X
Algo así
¿Vale?
Estamos contentos más o menos
Con...
Bueno, tiene como demasiado espacio
Por arriba
Tiene demasiado espacio
Por arriba
Que eso lo tendríamos que quitar
Pero eso es por culpa del gap
Que claro
El gap no es tan bestia aquí
Y sí que tiene más espacio
Por abajo
Que eso
Lo podríamos arreglar
Aquí
¿No?
Aquí
Tiene como más espacio por abajo
No sé por qué
Ah, claro
Porque hay algunos que caben
Y otros que no
Hostia
Esto es complicado
Esto se podría hacer
Con el truncate
Pero tendrían que tener
Todos exactamente
La misma
La misma
El mismo ancho
Y el mismo alto
Pero bueno
No sería imposible
Pero bueno
Por ahora lo vamos a dejar así
Porque lo que queremos es
Enfocarnos más
En el tema de la navegación
¿Vale?
Vamos a hacer
Este buenos días
Vamos a ponerle aquí
MT4
¿Vale?
MT4
¿Vale?
Por aquí
Vamos a ponerle un poco más bestia
¿Vale?
Bueno
Más o menos
Esto debería ser un font
Volt
Y al menos
Más o menos
Ya empieza a tener más sentido
¿Vale?
Ya tenemos la cara
¿Qué tal?
¿Cómo va la cosa?
¿Cómo estáis?
¿Mi duelpad en x no debería ser px?
Puede ser
Puede ser que la he liado yo
Ahí con
Utilizando
P guión
Vale
Px
¿Vale?
Vamos a hacer la otra página
Para hacer justamente la animación esta
Para al menos
Tener la imagen
Y todo esto
Una cosa importante de la imagen
Ojo
Una cosa importante de la imagen
Claro
Para poder hacer esta animación
Es que
La imagen
La tenemos que
De alguna forma
Que crear un nexo
Entonces aquí
Le vamos a tener que poner
Transition
Y el nombre
De la transición
Que identifica
A esta imagen
¿Vale?
Entonces le vamos a poner
Playlist
Vamos a utilizar la id
Que en este caso
Sería por la id
Que la tenemos arriba
Vamos a poner esto por aquí
Esto por acá
Id
Y podemos poner
Que sea image
Y esto
Al final lo que va a lograr
Es que identifiquemos
Que esta imagen
Se tiene que transicionar
A la siguiente página
¿Vale?
Eso es lo que vamos a hacer
Transition name
Con esto
Vamos a transicionar
A la siguiente página
Playlist
Id
Image
¿Vale?
Y así
Veréis
Vamos a crear
La siguiente página
Para cuando naveguemos
Pages
¿Vale?
Id
Punto
Astro
Esto es muy parecido
A las rutas
Que se hacen
En Next.js
Lo que estamos haciendo aquí
Ah bueno
Espérate
Que esto es
Playlist
Y esto
Metemos dentro
Esto lo que estamos haciendo
Es que cuando naveguemos
A barra
Playlist
Barra
La id
Entonces iremos directamente
A esta página de aquí
¿Vale?
Vamos a copiarnos
Un poco
A lo que ya habíamos hecho aquí
Me lo voy a copiar tal cual
Pero voy a empezar a eliminar
Cosas que no
No tienen mucho sentido
Claro
Por ejemplo
Aquí
En realidad
Vale
Esto no lo encuentra
Porque es punto
Punto barra
¿Ves por qué es importante
El tema de los aliases?
Porque tiene estas cosas
Que
Te ponen un poco de los nervios
¿Qué podemos hacer aquí?
A ver
Cuando entramos a la id
Tendríamos que detectar
A través de la id
Qué playlist
Es la que tenemos que cargar
Entonces
Cargamos todas las playlists
Vamos a hacer
Todas las playlists
Y todas las canciones
Que van a ser
Las que tenemos que mostrar
¿Vale?
Y esto
Aquí lo que tenemos que hacer
Es traernos las playlists
A ver
Casi
No es esto
No es esto
A ver
Primero tenemos que saber
Qué playlist es la que estamos cargando
Entonces
De todas las playlists
Que al final
Esto es un array
Tenemos que buscar
Esa playlist
Que la playlist
Punto id
Sea la misma
Que la id
¿Y de dónde sacamos la id?
De la ruta
Y la ruta
La tenemos
La tenemos en
Aquí
Id
Astro
Punto
Params
¿Vale?
Esta id que veis aquí
Esto viene
De esta id de aquí
Y es lo que vamos a tener
En la url
Esto no es magia potagia
Sino que si a esta página
Llamamos
Por ejemplo
Playlist id
Aquí tendríamos que llamarle
Playlist id
¿Vale?
Por eso se llama id
Porque le hemos puesto este nombre al archivo
Y lo que vamos a hacer es capturar esa parte
Cuando
Cuando naveguemos a esta página
Entonces aquí ya tendríamos
La playlist
Que lo he escrito mal
¿Vale?
Seguro que me la habéis dicho en el chat
Seguro
A ver
Me la habéis dicho en el chat
¿Podemos usar el nombre más tarde?
¿No?
Si te molesta que pregunte
No respondas y ya
Coño
¿Me preguntas a mí?
¿Me lo has dicho a mí?
Si yo no he dicho nada
Eh
Magia
¿Podemos usar el nombre más tarde?
No
Sí
No
Me refiero a que se carga mucho
Javascript a veces desde la carga inicial de la app
Bueno
Pero ahora mismo no estamos cargando mucho
¿Eh?
No os peleéis en el chat
No os peleéis
Por curiosidad
¿Conoces el framework backstage de Spotify?
No lo conozco
O sea
Sé cuál es
Pero no lo he utilizado nunca
No lo he utilizado nunca
Eh
Hay que hacer un get static path
De hecho se nos va a quejar ahora
¿Eh?
Cuando lo hagamos
Ahora cuando lo hagamos
Nos va a decir
Oye
Que tienes que hacer un get static path
Porque no sé qué
Y ahora os explico un poco
Qué es esto del get static path
Pero por ahora vamos a conseguir las canciones
Playlist songs
Y para eso buscamos de todas las canciones
Vamos a filtrar las canciones
Que el álbum
Que tiene
Sea el mismo que la ID
Que estamos utilizando
Que el playlist punto
Album ID
¿Vale?
Y aquí deberíamos tener todas las canciones
Pero si intentamos mirar esto
Fijaos que si intentamos mirar esto
Y vamos a una página
Se me está quejando por el get static path
Aquí hay dos opciones
Una, hacer que nuestra página
Funcione por servidor
Que la verdad que en este caso
Tendría sentido
¿Vale?
Tendría sentido
Porque
Y esto lo podemos arreglar
En la configuración de Astro
Config
¿Vale?
Podríamos decirle aquí
Que el output
Output
Sea
De servidor
¿Vale?
Y esto lo que haría entonces
Es que se ejecutaría directamente
En el servidor
Bueno, todavía me falta
Alguna cosita ahí
Ahora lo miramos
Playlist
Bueno, porque esto no lo vamos a necesitar aquí
¿Vale?
Esto es normal
Voy a dejar esto vacío
Para que ahora mismo no nos moleste más
¿Vale?
Esto lo dejo vacío
Y ahora lo miramos
¡Hostia!
Espérate
Ahora
Vale
Esto tiene más sentido
Vale
Por ahora
Esta sea la página
No aparece absolutamente nada
Pero ahora
Mostraremos la imagen
Y haremos que vaya de una página a la otra
Con una animación
¿No?
Pero lo importante
Es que ahora sí que funciona
Y la verdad es que tiene sentido
Que sea en el servidor
¿Por qué hemos puesto en el servidor?
Esto lo que está haciendo
Es que las páginas
Se rendericen en el servidor
Y la verdad es que en Spotify
Tiene sentido
Porque sería imposible
Generar de forma estática
Todas las páginas
Que tiene Spotify
Porque tiene álbumes infinitos
Así que tiene todo sentido
En el mundo
Que sea servidor
¿Vale?
Por eso vamos a dejar servidor
Si no tendrías que hacer algo así
Para que
Por si tenéis curiosidad
De cómo arreglarlo
Sería algo así
Teníamos que exportar una función
Poner getStaticPath
Y generar todas las páginas estáticas
Para todas las playlists
En nuestro caso
Nuestra demo funcionaría
Pero no tendría mucho sentido
En la vida real
Porque al final
Las páginas a generar
Serían infinitas
Y cada vez que desplegas Spotify
No se podrían generar
Todas las páginas
Para todas y cada una
De las canciones
Álbumes
Y todo esto
¿No?
Muy bien
Entonces
Vamos a ver
Vamos a continuar aquí
Con el playlist y tal
Tengo por aquí
Que esto es importante
El transition
¿Vale?
Una cosa
Ya podríamos empezar a ver
Una transición
Si no me equivoco
Y lo hacemos en un momento
O sea
Podríamos ir aquí a playlist
Y cuando le damos click
¿Vale?
Ahora no hace ninguna transición
Necesitamos dos cosas
Una
Decirle que
Esta caja
Que estamos en la página ID
Esta caja de aquí
Este div
Vamos a ponerle un transition name
¿Vale?
Y le vamos a poner
Que específicamente
Esto es el playlist
Le utilizamos la ID
Otra vez
Para identificar
Porque es súper importante
Que todas las transiciones
Tengan una ID
Que realmente sepa
A lo que se refiere
Porque si no
No va a saber hacer
La animación
¿Vale?
Y esta transición aquí
¿Vale?
Playlist
Con la ID tal
La caja
Esta transición
La tendríamos que copiar
La tendríamos que utilizar
En el mismo sitio
Donde le damos click
Por ejemplo aquí
Y aquí
Lo tendríamos que poner
Aquí
¿Vale?
Aquí
Cuando le damos
A este anchor
Tenemos que tener
Esta transición
Y así es donde está
Ocurriendo ese nexo
Entre dos páginas distintas
Ahora lo vamos a ver
Aunque ahora vais a ver
Que no funciona
Yo voy a explicar por qué
¿Vale?
¿Veis que todavía no funciona?
Es porque tenemos que cargar
El view transitions
Nos tenemos que ir al layout
Importar aquí
El view transitions
De astro transitions
Y aquí
Vamos a utilizar
View transitions
Fallback
Y le vamos a poner
None
Para que utilice
El que es por defecto
Vamos a ver si ahora
Esto funciona
¿Vale?
Todavía la animación
No es para allá
¿No?
La animación que está haciendo
No es del todo
Muy buena
¿No?
Porque está haciendo algo
Ahí un poquito raro
Pero al menos
Ya tenemos una animación
Que funciona
Que se nota
Que está yendo a un sitio
O al otro
Esto luego lo iremos arreglando
Porque fíjate que el título
Se va a la conchinchina
Eso lo arreglaremos
Porque haremos que el título
Vaya a donde tenga que ir
La imagen también
Los autores también
Tenemos que seguir creando
Esos nexos
Para que la animación
Que hace
Sea realmente la correcta
¿Vale?
Ahora mismo la animación
Que hace
Es un poco regular
No está mal
Pero no es exactamente
La que queremos
¿Vale?
Entonces esto lo tenemos
Que arreglar
Y lo arreglaremos
Cuando modificamos
Unas cuantas cositas
¿Vale?
Ahora que tenemos esto
Vamos a continuar
Con el ID
Y le vamos a seguir
Poniendo información
Para que realmente
Podamos hacer esa transición
Y que realmente
Quede bien
¿No?
Por ejemplo
Todo lo que teníamos aquí
Este VG green y tal
Esto aquí no tiene tanto sentido
Aquí le vamos a poner
Que sea más
Think 900
Vamos a poner
Relative
Flex
Flex call
¿Vale?
Que tenga todo el alto
Transition all
Esto no hace falta
Que lo ponga por aquí
¿Vale?
Le ponemos esto
Y
Que esto
Tenga un overflow
X hidden
Porque lo importante
Es que podamos scrollar
De arriba a abajo
¿Vale?
Tenemos el page header
Que esto lo haremos después
Que esto va a ser
Un componente de
Svel
Que está bastante interesante
Y aquí
A ver
Podríamos empezar
A hacer
Pero voy a utilizar
Un header
Y vamos a poner aquí
La información
Tanto del title
Y todo esto
Porque al final
Necesitamos que la picture
Me lo voy a copiar también
¿Veis este picture de aquí?
Que habíamos hecho antes
Me lo voy a copiar aquí
Tal cual
Solo que esto
Que tenemos
Playlist
Punto
Y aquí tendríamos el cover
Playlist
Punto
Y aquí
Ay
Porque aquí no me sale
Playlist
Punto
Y no me sale
El autocomplete
Deberíamos tener
El title
Si no me equivoco
Y esto
No hace falta
Vamos a poner esto así
¿Vale?
Esto lo vamos a tener que hacer
Un poquito más grande
Esto antes lo habíamos hecho
No me acuerdo
Cuánto habíamos hecho
Pero vamos a hacerlo
52
52
Para que quede más grande
Y súper importante
Que pongamos también
La transición
¿Veis aquí que habíamos puesto
Playlist
No sé qué
ID image
Pues esto
Ah mira
Ya lo había puesto aquí
Claro
Si me lo he copiado
Playlist
Punto
ID
¿Vale?
Y hacemos esto
Y ya está
Entonces ahora
Con esto
Al menos con esto
Deberíamos ver
Que va a hacer una transición
Entre lo de antes
Y lo de después
La imagen
¿Vale?
Deberíamos ver
Como la imagen
Se mueve
Hacia
Hacia el sitio
Que le corresponde
¿Vale?
Vamos a hacer esto
Y vamos a poner
Que tenga
Un gap
Y una
Poquito de píxeles
Aquí
Vale
Vale
Obviamente todavía
No está bien estilado
Todo
Pero sí que podemos ver
Que al menos la imagen
Se está moviendo
De un sitio al otro
¿Veis?
Que tenemos aquí
Y le doy click
Y no está en el sitio
Correcto
Todavía le queda
Pero al menos
Sí que estamos viendo
De hecho este item center
Que he puesto por aquí
A ver
Item center
Este item center
Lo vamos a quitar
Y ahora lo arreglamos
¿Vale?
Pero porque así queda
Un poquito más natural
Y aquí tendríamos
Ya la transición
La transición que hace
Que es parecida ya
Pues a esta de aquí
Solo que aquí
Pues tendría más cositas
Que ahora lo vamos a añadir
¿Vale?
Y tendríamos la transición
Fijaos que la transición
Para hacer esta transición
Entre dos páginas distintas
Lo único que hemos tenido que hacer
Es
Que las dos imágenes
Que están en dos páginas
Totalmente distintas
Nos tenemos que asegurar
Que tengan el mismo
Nombre de transición
¿Vale?
Transition name
Tiene que ser playlist
Con un identificador único
Porque no puede haber
Un elemento
O sea
Imaginad que hacemos
Una transición
Y que hay dos elementos
Que se llaman igual
Entonces
Si desde una página
Quiere hacer la transición
A la otra
Y se encuentra
Que hay cuatro elementos
Que se llaman igual
¿Hacia dónde tiene que ir?
¿Sabes?
No va a entenderlo
No va a saber
Dónde tiene que ir
Así que es importante
Que solo haya
Una transición
Para un elemento
De la siguiente página
¿Vale?
No puede haber más de uno
Si no
No te va a hacer la transición
Si al final
No utilizamos
Este ID
¿Vale?
El problema que vamos a tener
Es que
Claro
Como playlist item
Imagínate
Sin la ID
¿No?
Para no identificar
La transición
Lo que va a ocurrir aquí
¿Vale?
¿Ves?
Es que no sabe
Hacia dónde tiene que ir
Y por lo tanto
No va a funcionar
Así que si alguna vez
No te funciona
Una transición
Entre una página y otra
Ten en cuenta eso
Que seguramente
El problema que estás teniendo
Es que no es única
La transición
Que estás haciendo
¿Vale?
Que te ha faltado alguna cosa
En algún sitio
Se te ha perdido algo
Pero no estás haciendo
Que realmente
Las transiciones
Sean únicas
Que es súper importante
Entonces
Vale
Aquí tenemos el picture
Vamos a poner
Para
Como quiero adelantar un poco
Estoy por copiarme
Esta parte
¿Vale?
Me voy a copiar un trozo
Y os lo explico
Por encima
Pero es que si no
Vamos a estar aquí
Todo el día
Y al final
Vamos a tardar
Un montón
Y al final
Es algo muy parecido
A lo que hemos hecho
Y lo que me interesaría
Es poder crear
Un componente de React
Y que lo veáis
Entonces
Aquí en el header
Lo que vamos a hacer
Es utilizar
Toda esta información
Que tenemos aquí
¿Vale?
Esta información
Tenemos en un componente
De una forma muy parecida
Porque ya lo hemos hecho
Lo voy a poner justo al lado
¿Vale?
Vamos a poner todo esto
Y esto
Me lo voy a cambiar
Y vamos a poner
Un span
Con esto
Para los artists
Y ahora os explico
Un poco
Lo que tiene esto
Esto es muy parecido
A lo que hemos hecho antes
¿Eh?
¿Qué es lo que he copiado?
Lo que he copiado
Es toda esta parte
¿Vale?
Esta parte al final
Pues tiene un div
Con el título
Aquí tendríamos también
El título de la playlist
Donde va a estar en grande
Y fíjate
Que también el título
De la playlist
También le hemos puesto
Un transition name
Tenemos un transition name
Tanto en el título
Como también en los
Artistas
¿Por qué?
Porque así lo que hacemos
Es que en lugar
De que se va todo
A cualquier sitio
Hacemos que la imagen
Vaya a su sitio
Que el título
Vaya a su sitio
Que los artistas
Vayan a su sitio
Y volvemos a hacer lo mismo
Nos aseguramos
Que cada uno
Tenga un identificador
Único
Para navegar
Entre un sitio y otro
¿Vale?
Entonces
Cuando vayamos aquí
Ahora
¿Vale?
Bueno
Todavía
Vale
Es normal
Y os voy a explicar
Por qué es normal
Puede ser normal
Porque
No hemos hecho bien
Lo de la transición
Lo hemos hecho aquí
Aquí parece que tiene muy buena pinta
Pero ¿Qué pasa?
Que esto que he añadido aquí
De nuevo
Nos tenemos que asegurar
Que en la página anterior
Exista esa transición
Seguramente aquí
Cuando he creado esa transición
¿Veis?
Este h4
Este h4
Este h4
Que he creado aquí
No tiene la transición
Así que aquí
Tendríamos que asegurarnos
Que añadimos la transición
¿Vale?
Y lo mismo
Pasaría con
El
Con este de aquí
Este de los artistas
Que hemos utilizado aquí
Transition name
Pasa exactamente lo mismo
Este de los artistas
Lo tendríamos que poner aquí
Para asegurarnos
Que está haciendo
Correctamente
La transición
¿Vale?
Y ahora
Vale
Ahora sí que parece
Que está mejor
¿Vale?
Aunque es verdad
Que no sé por qué
Pensaba que a lo mejor
Los estilos se les iba a pillar
De que no sale grande
Y todo esto
Vamos a ver aquí
El playlist
Vamos a ver esto
Playlist
Playlist es chiquitito
Pero por ejemplo
El título este
Que aquí tenemos
Un title clamp
A este debería ser
Bastante grande
Debería ser 3XL
Por lo menos
¿No?
Algo así
3XL
Además esto
Esto debería ser
El picture
Flex call
Esto en realidad
Debería ser
Flex row
¿No?
Porque está uno
Al lado del otro
Esto todavía
Podría ser
Más grande
Vamos a ponerlo
Todavía más grande
El title este
5XL
Algo así
¿Vale?
Esto empieza a tener
Mejor pinta
Además tendría que ser
Como de color blanco
Porque llama bastante
La atención
De hecho
Sigue sin ser blanco
Vamos a ver
Playlist
Title
Title clamp
Este lo podemos quitar
Y todavía sigue
Sin ser blanco
No sé si es que
Le he dejado
Alguna opacidad
Por ahí
O alguna cosa
Pero bueno
Si no lo miraremos
Mi sensación
No sé si lo
Seguramente vosotros
Lo veis blanco
Y a lo mejor soy yo
A lo mejor es porque
Le falta lo del fondo
Y ahora sí
Lo que le faltaría
Sobre todo
Es el tema de
Vamos a quitar aquí
El round
Este
Que lo habíamos puesto
Aquí
Este
Solo podemos quitar
Y lo que tenemos que poner
Es un shadow
Que eso sí que es lo que tiene
Y le vamos a poner aquí
Un margen
Necesitamos que haya
Una separación aquí
Bastante más bestia
Pones aquí
Un margen 10
Vale
Vamos a poner un poquito más
20
No
Nos hemos pasado
Nos hemos pasado
Vale
Pues por aquí irían un poco los tiros
Si volvemos para atrás
Vale
Además podemos ver
Que el tema de la animación
Además
Fíjate
Que se queda ahí la imagen
Tal cual
En el sitio que necesita
Pam
Y ya está
Vale
Creo que ya sé lo que pasa
Lo que pasa es el absolute
Lo que pasa es el absolute este
Habíamos puesto aquí un absolute
Y me da la sensación
Que esto está quedando
Está quedando por debajo
¿Ves?
Ya está
Ese es el problema
Que estaba quedando por encima
Y por eso no lo veía blanco
Porque estaba quedándose por encima
Vale, vale
Ya decía yo
Digo que está pasando con esto
Bueno pero al menos
Ya estamos viendo
La transición
Que se está moviendo el título
Y todo esto
Podríamos mejorar el tema
Del background
Porque el background
Como es claro
Pues hace ese efecto
Un poco raro
Eso lo podríamos arreglar
Separando el fondo
De la animación
Por ahora no vamos a hacer
Porque va a ser
Sería un poquito complicado
Pero al menos
Ya podemos mostrar las canciones
Línea 42
Te faltó el playlist
A ver
Línea 42
Línea 42
Me faltó el playlist
Pues tienes toda la razón
Playlist
Tienes toda la razón
Y seguramente eso puede hacer
Aunque
Debería funcionar igual
Porque la idea al final
Es correcta
O sea que debería funcionar igual
Y de hecho sí que se ve
Que se mueve correctamente
Que se mueve
Hacia donde tiene que ir
¿Veis este buenos días?
Este buenos días
Es un componente
Que tenemos aquí
¿Vale?
Que es un poco tonto
Vamos a buscarlo
Buenos días
Pero voy a enseñar una cosa
Por lo que Astro
Es increíble
Y lo vamos a hacer
Más de una vez
Lo vamos a hacer
Con Svelte
Y lo vamos a hacer
También con React
Entonces
¿Qué es lo que vamos a hacer?
Astro una cosa que tiene
Es que es un
Framework web
Que es totalmente
Agnóstico
A la tecnología
Que queráis utilizar
A diferencia de NXIE
Es que
Solo podéis utilizar React
Lo bueno de Astro
Es que podéis utilizar
Nada
O React
Vue
Preact
Svelte
Lo que queráis
¿No?
Entonces
¿Cómo lo hacemos?
Imaginad
Que queremos tener aquí
Este componente
Vamos a empezar
Con uno sencillo
El de greetings
Y luego hacemos el page header
¿Vale?
¿Veis este de buenos días?
Vale
Pues vamos a
Ejecutar
Bunex
Astro
Add
Svelte
Y si no
NPX
¿Vale?
Lo que prefiráis
Yo utilizo BNX
Pero si tenéis
NPM
Pues NPX
Y esto lo que voy a hacer
Es añadir
Todo lo que necesitáis
Para utilizar Svelte
En vuestro proyecto
Le decimos que sí
Esto nos instala
Todas las dependencias
Y ahora nos dirá
Oye voy a cambiar esto
De la configuración
¿Te parece bien?
Le vamos a decir que sí
¿Vale?
Sí
Añádeme esta configuración
Y ya podemos utilizar
En nuestro proyecto de Astro
Componentes de Svelte
Vamos a verlo en un momento
Por ejemplo
Aquí en components
Podemos ahora crear
Un componente
Que sea
Greeting.Svelte
¿Vale?
Fíjate
Ahí en medio
Y aquí pues podemos hacer
Algo así
Como LANG.TS
Importante
Tenéis que tener
La extensión activada
Que no es mi caso
¿Vale?
Svelte
¿Vale?
Y esta extensión de aquí
Es la que tenéis que tener
Activada
La voy a activar
Para el área de trabajo
Yo es que tengo
Desactivadas un montón
De extensiones
Y solo las activo
Cuando las necesito
¿Vale?
En este caso
Pues en este sí que lo necesito
Podemos tener
El tiempo actual
New date
Y lo comparamos
Bueno
La hora actual también
Y dependiendo
De la hora actual
¿Vale?
Vamos a decir
¿Vale?
Pues ¿Cuál es el saludo?
Bueno
Ya me lo está diciendo aquí
¿No?
Bueno
Vamos a empezar
Que sea vacío
Y luego a partir de aquí
Pues mira
Si la current hour
Es menor de 12
Ponemos buenos días
¿Vale?
Buenos días
Buenas tardes
Buenas tardes
Buenas noches
Esto parece una tontería
¿Vale?
Es el primer ejemplo
No os preocupéis
Ahora iremos a poner un poco
Más complicado
Pero lo interesante de esto
Es la mezcla
Que podéis hacer
Muy fácilmente
Para que realmente
Funcionen componentes
De Svelte
De React
Con vuestro proyecto de Astro
¿Cómo lo utilizáis?
Bueno
Ya tenemos
Este sería nuestro
Nuestro componente
De Svelte
¿Vale?
Este componente de Svelte
Te vas a Astro
Y aquí ves que había puesto
Que íbamos a poner
El greetings
¿Vale?
Con el font ball
Vamos a quitar el que teníamos
Y simplemente ahora
Vamos a utilizar
Este componente
Greeting
¿Vale?
Greeting
Lo tenemos que importar
Así que vamos aquí
Import
Greeting
From
Barra
Components
Barra
Y cargamos el
Componente de Svelte
En este caso
No sé por qué me dice
No es un módulo
Ah
¿Por qué he puesto?
Ah
No hace falta poner
Ah pues no sé
No sé
No sé
No sé si es que no me ha pillado
La configuración
A ver
Vamos a refrescar
Yo creo que es que no me ha pillado
La configuración
Cuando la he actualizado
Ah pues
No sé
Esto creo que debería funcionar
Es que me está mirando
.tsx
¿Ves?
Me dice
Está instalando
Está instalado
Astro.js Svelte
¿Lo he instalado en el sitio correcto?
Sí
Lo he instalado en el sitio correcto
A ver
A ver si está la configuración en Astro
Sí
Sí
Ok
No sé si es un rollo que se ha ido
Vamos a probarlo directamente
A ver si
A ver
Parece que esto
Igual puede ser también
Que tengamos que
Reiniciar el servidor
Para que no dé problemas
Bueno
Vamos a verlo
Vamos a ver aquí
Vale
Ya podéis ver que al menos
Salir sale
Lo que pasa es que está dando algún problema
¿No?
O sea
Salir sale
Pero
Ah
Ojo
Ojo lo que me ha hecho aquí
La madre que lo trajo
Es que me ha hecho
Me han vuelto ahí
Lo que le he dado la gana
Vale
Ahora sí que estaría bien
Me ha pasado otra vez esto
No sé por qué
Esto debe ser que he cambiado algo del
De cómo estaban
Los greetings y todo
Vale
Vamos a poner esto aquí
Page header
Vale
Y ahora está bien el degradado
¿Vale?
Pero ves
Ahora parece buenas noches
El tema es que
Esto
Que
No te das cuenta
Pero realmente ahora ya
Estamos utilizando
Un componente de Svelte
Ahí en medio
Pero podríamos hacer
Exactamente lo mismo
Con un componente
También de React
Por ejemplo
Podríamos hacer
La parte esta de arriba
O podemos hacer el player
Todavía no me falta
Félix Caza
Hay gente que me dice
Te falta la directiva
Pero no me falta la directiva
Porque en este caso
La directiva
No es necesaria
Y esto luego lo vamos a explicar
¿Vale?
Ahora lo explicaremos
El tema de que son las directivas
Pero en este caso
Como este componente
Podríamos querer que se renderice una vez
Pues ya está
Se renderiza una vez
En el servidor
Y ya tenemos aquí
El output
Pero imaginad
Que tuviese algún tipo
De evento
Es como los React Server Components
Ahora estaría funcionando
Como un React Server Component
Pero si queremos
Que también funcione
En el cliente
Y que tenga eventos
Que puedas hacer click
Que puedas hacer
Escuchar efectos
Y esto
Tendríamos que hacer
Que esto sea client
E indicarle
Cuando en el cliente
Tiene que cargar esto
Y hay una que es muy interesante
Que es visible
Porque así puedes cargar
De forma con lazy load
¿Vale?
De forma deferida
Puedes cargar
Un montón de bibliotecas
Que a lo mejor no se ven
Y le pones eso
Y entonces solo carga
Ese componente
Cuando lo necesita
Vamos a hacer el player
Con React
Y vamos a ver otra vez
Como lo haríamos
¿Vale?
Pues está muy fácil
Van x
Astro
Add React
Y esto lo que va a hacer
Es que estamos añadiendo
React
Para poder utilizarlo
En nuestro proyecto
De Astro
Nos instala
Todas estas dependencias
Le decimos que sí
Y nos dice
Vale voy a añadir esto
Perfecto
Me parece muy bien
También te voy a añadir esto
En el TypeScript
Porque puedes utilizarlo
Con TypeScript
¿Vale?
Pues ya está
Ya lo tenemos
Y vamos a nuestro
Voy a cerrar todo esto
¿Vale?
Para no nos liemos
Nos vamos a nuestro layout
Y habíamos dicho
Que aquí justamente
Íbamos a añadir el player
¿No?
Aquí vamos a poner el player
¿Vale?
Pues vamos a ponerlo
Vamos a crear aquí un componente
Que le vamos a llamar
Player.jx
Para que no me ligue
Con el TypeScript
Le doy al botón derecho
Voy al icono que quiero
Y aquí este es vg
Editar hdml
Copiar y pegar
Ya está
Así me lo robo
Es exactamente ese componente
No he hecho nada más
Solo que lo he envuelto
En un play y un post
Pues para tenerlo
Y ya está
Ahora
Vamos con el
Vamos con el player
Vamos a tener aquí
Export function player
¿Vale?
Primero va a ser
Bastante
Polémico
¿Vale?
Nuestro player
No vamos a hacer algo
Increíblemente bonito
Porque es que si no
Va a ser una cosa muy loca
¿Eh?
Pero vamos a hacer al menos
Que tenga un justify between
Porque vamos a tener
Como tres partes
Donde vamos a tener
Mira lo podemos ver aquí
¿No?
Aquí en el player
Podemos ver que tenemos
Como tres partes
Tendríamos la información
De la canción
Tendríamos el reproductor
Con el play y todo esto
Y aquí tendríamos el volumen
¿Vale?
Muy bien
Pues lo que vamos a hacer
Es justificar el espacio
Entre esos tres elementos
Porque conforme se van
Haciendo más pequeños
Pues ese espacio
Que tienen entre los elementos
Irá reduciéndose
Pero cada uno
Pero cada uno está separado
Al máximo posible
Así que que ocupe todo el espacio
Le hacemos que tenga una separación
Por los lados
¿Vale?
Y que por un tema
De Z-index
Para que se quede siempre arriba
Vamos a hacer que se quede aquí
Esto por ahora
Voy a poner aquí
Un current song
¿Vale?
Para que básicamente aquí
Luego pongamos la imagen
Y todo esto
Aquí tendríamos
La parte
Del reproductor
Y aquí tendríamos
La parte
Del volumen
¿Vale?
Así que guardamos aquí
Los cambios
Y vamos a utilizar ya
Nuestro player
A ver si aparece
Ah, he puesto platter
Player
¿Vale?
Ahí lo tenemos
Player
¿Vale?
¡Uh!
Hemos encontrado referencia
De un código público
En una sugestión
¡Ojo con esto!
A ver qué dice
¿De dónde has encontrado esto?
Código similar
Código similar
Esto es nuevo, ¿eh?
Ah, y no se puede entrar
Pero eso es nuevo, ¿eh?
De iHackoPilot
Que ahora te dice
Cuando ha encontrado
Un código
De donde te lo has copiado
¿Habéis visto eso?
Yo es la primera vez que lo veo
¿Lo habéis visto antes?
Esto
De que te dice
He encontrado código similar
Con seis tipos de licencias diferentes
Vamos a ver
O sea, seis tipos de licencias diferentes
O sea, va a ser increíblemente difícil
Poderte copiar algo
A ver, yo me imagino
Me imagino
Aunque no lo puedo ver
Me da la sensación
Que estamos hablando
Del layout este
Que debe ser muy parecido
En todos los proyectos de Astro
¿Sabes?
Entonces yo me imagino
Que lo ha detectado automáticamente
Pero claro
Esto es bastante problemático
Porque al final esto lo que va a pasar
Es que te está dando aquí
Una advertencia
De algo que te va a pasar siempre
Porque muchas veces
Proyectos que se inicializan con Astro
Y que tienen el mismo tipo
Y que lo suban a GitHub
Entonces
No sé
No me parece muy útil
La verdad
Sinceramente
No me parece muy útil
Pero bueno
En fin
Ahí lo tenemos
Bueno
Hemos creado el player
Con React
Importante
Todavía no estoy utilizando
El play y el post
Llegó la hora de pagar
Por los SVGS
Jaja
¿Te imaginas que ha detectado eso?
Sería buenísimo
Sería buenísimo
Bueno
Volvemos a nuestro proyecto
¿Vale?
Y bueno
Como podéis ver
Tenemos aquí
Current zone
Reproductor
Volumen
Podría
Vamos a continuar
¿No?
De tener
Sobre todo la parte de en medio
Que es la que más me interesa
De tener el botón
¿Vale?
Entonces
Esto lo que voy a hacer
Es utilizar un grid
Place content center
Para tenerlo todo centrado
Y no liarme
El flex
Yo creo que no será necesario
Ah bueno
Puede ser
¿No?
Porque si
Si puede ser
Puede ser
Yo esto
Yo estoy aquí pensando
Puede ser que lo necesitemos
Porque el padre
Si que es
Si que es
Si que es
Un flex
Vamos a poner esto
Y este reproductor
Le vamos a poner aquí un botón
Con un class name
Con un color blanco
¿Vale?
Esto más o menos
Me lo estoy imaginando con esto
¿Vale?
Estoy haciendo ese botón
Solo voy a hacer ese por ahora
Para tener el más importante
Rounded fill
P2
¿Vale?
Y aquí
Dependiendo del estado
Vamos a hacer algo
Vamos a hacer aquí
Pam pam pam pam
Vamos a tener un estado aquí
Vamos a poner
Is playing
Set is playing
Use state
Que sea false
Y cuando le demos a este botón
¿Vale?
Vamos a cambiar este estado
Por ahora vamos a hacer esto
¿Vale?
Set is playing
No se que le pasa a mi Hacopilot
Que no me está ayudando nada
¿Eh?
O sea
Está en modo
Está en modo
Yo no trabajo
O sea
Menuda rata de Hacopilot
Tío
O sea
Menuda rata
A lo mejor es que se ha dado cuenta
Que he robado contenido
Y por eso no me quiero ayudar
Bueno
Si está reproduciendo
Ponemos la pausa
Y si no
Ponemos el play
Bueno
Y esto nos debería dejar
Vale
No he importado el use state
Importante
Vamos a importar
Es que no tengo el linter aquí instalado
Y por eso podréis ver
Que habría cosas que
Vale
Ya tengo aquí
Pero fíjate
Que si le doy click
¿Vale?
Si le doy click
No está arreglando
O sea
No está funcionando
Fíjate que le doy click
Y no funciona
Esto es súper importante
Aunque puedes utilizar
Los componentes de Svelte
De React
De Vue
Y de lo que tú quieras
Lo que está pasando
Es que si vamos aquí al layout
Mi player
Ahora mismo
Lo único que ocurre
Es que este player
No tiene interactividad
¿Vale?
Es como que es un React Server Component
¿Vale?
Solo está funcionando
En el servidor
Y lo que necesitamos
Es que también
Lo carguen el cliente
Y para que veáis muy bien
La diferencia
Y esto es muy importante
Que lo entendáis
Porque esta es la clave de Astro
Si miramos en las dependencias
En el network
¿Vale?
Fijaos en el network
Y yo recargo
¿Vale?
Vais a ver aquí
Que carga un montón de cosas
Carga un montón de cosas
Y encima estamos en modo desarrollo
Pero si buscáis aquí
Si buscáis aquí
Algún tipo de información
Sobre el player
¿Vale?
Si buscáis aquí player
Vais a ver que no hay nada
¿Vale?
No está ahí el player
Ni nada
¿Vale?
Pero
Si ahora ponemos
Oye, el player
Creo que lo cargues en el cliente
Y aquí tenemos diferentes estrategias
Para cargarlo
Idel
Es cuando no esté cargando más recursos
Lo que vamos a hacer
Es cargar este componente
Esto es bueno para temas de rendimiento
Porque a lo mejor queremos que cargue
Cosas más importantes
Más prioritarias
Y esto no es tan prioritario
En nuestro caso
El reproductor sí que es prioritario
Por lo tanto
No vamos a poner un Idel
El load
Es básicamente
Cuando se carga la página
Carga este componente
En este caso
Es el que vamos a querer
El client
Client media
Lo que vamos a hacer
Es que podríamos cargar esto
Dependiendo
De
El viewport
¿No?
Como una media query
Podríamos decirle
Bueno, pues carga este componente
Solo para móviles
Para que tengan este ancho
En este caso
Siempre lo vamos a querer cargar
Así que no nos interesa
Client only
Esto sería para componentes
Que solo queremos
Que se rendericen el cliente
En este caso
No nos interesa
Porque entonces
Podría haber un flasheo
Queremos que se cargue
Que visualmente se vea
Y que el usuario
En el cliente
Pueda interactuar
Pero no queremos
Que se cargue eso
En el cliente
Si no podríamos llegar a ver
De hecho lo voy a intentar
Para que veáis
¿Vale?
Astro needs a hint
To use the color renderer
Vale, pues nada
Lo malo es que
Cuando decía
Client only
El problema es que
Le tenemos que decir
Que es lo que tiene que utilizar
En este caso
Le tenemos que decir
No, es React
Tienes que utilizar React
Es un poco tonto
Pero fíjate
Que al principio
Está vacío
¿Vale?
¿Veis que hay un flasheo?
Eso es porque
No está renderizando
El componente
En el servidor
Y solo lo está
Renderizando en el cliente
Esto tampoco es lo que nos interesa
Y entonces tendríamos
El visible
El visible
Lo que hace es
Lo renderiza en el cliente
Solo cuando sea visible
Pero lo que sí que vamos a tener
Es que se renderiza en el servidor
Se renderiza en el servidor
Y en el cliente lo carga
Solo cuando sea visible
Pero claro
No tiene sentido en este caso
Porque este componente
Siempre está visible
Por lo tanto
No es el que queremos
Pero este es muy
Muy bueno
Y muy importante
Por ejemplo
Para cosas que no están
En el viewport
Para cosas que queréis
Hacer con una carga diferida
¿Vale?
Entonces vamos a hacer aquí
Client
Dos puntos
Y vamos a poner load
Porque queremos que se cargue
Cuando se carga la página
¿Vale?
Entonces no flashea
Visualmente se ve
Y fíjate que ahora
Si busco aquí
Player
Ahora sí
Está cargando
El contenido
Del JSX
De este componente
Y esto es lo que lo hace
Increíble
Porque lo que está pasando
Es que si no necesitas
Un componente de React
En el cliente
Lo puedes quitar
Y fíjate
Que entonces
Buscando Player
No tenemos
Ningún JavaScript
Esto es para que entiendas
Porque cuando aquí
Hablan de rendimiento
Y aquí pone
Full Speed
Y se compara con Gatsby
Con Next.js
Y tal
Esto por ejemplo
Es como son las páginas
Que utilizan Astro
Como van de rápidas
Y todo esto
Y es que lo bueno
Que tiene Astro
Es que por defecto
Es rapidísimo
Porque no carga Javascript
O carga un Javascript
Bueno
Que no carga Javascript
Lo que pasa es que
Si utilizáis React
Aswell
Algo de Javascript
Va a tener que cargar
Pero al final
Sois vosotros
Los que vais a tener
La responsabilidad
De que cargue o no cargue
¿Vale?
En este caso
Lo vamos a editar
Client load
¿Vale?
Para que ahora sí
¿Vale?
Veo que tampoco
A ver que ha pasado
Vale
La he liado
Pero la he liado
Por algún nombre
¿Vale?
Porque he puesto
Playing is not defined
Y aquí me he equivocado
Porque esto es
Is playing
¿Vale?
Esto es
Aquí
Is playing
¿Vale?
Pero ahora sí que veremos
Que al menos
¿Ves?
Ahora sí
Funciona la interactividad
Pero de nuevo
La diferencia
Cargarlo en el cliente
Le añade interactividad
En el cliente
Si no lo cargas en el cliente
No tienes ningún tipo
De interactividad
Voy a poner aquí
Voy a crear unos componentes
A ver
El tema es
Que si
Si me pongo
Con los componentes
De volumen y tal
Que son muy interesantes
Podemos
Podemos estar ahí
Un buen rato
Pero os quiero enseñar
Como os quiero enseñar
El tema de
Del audio
¿Vale?
Vamos a hacer una cosa
Os quiero enseñar
El tema de persistencia
Porque me gustaría
Terminarlo
Y hacer muchas más cosas
Que quede bastante bonito
¿Vale?
Pero sí que vamos a ejecutar
Y quiero enseñaros
El tema de la persistencia
De cómo podéis tener
Un reproductor
Y que persista
Básicamente
El estado
Mientras navegas
En diferentes páginas
Sin tú hacer
Ningún tipo de cosa
Entonces
Vamos a tener aquí
El audio ref este
¿Vale?
Audio ref
Vamos a ponerlo por aquí
Y vamos a poner aquí
El current song
Vamos a hacer el reproductor
Que reproduzca música
Current song
¿Vale?
Use state
Vamos a hacer que esto sea
Null por defecto
Vamos a tener audio ref
Una referencia
¿Vale?
Y vamos a poner
Bueno lo dejamos así
Vamos a poner un handle click
Lo haremos más adelante
Eso
Lo hacemos mañana
Para que funcionen
Todas las canciones
Y listar todas las canciones
Lo que vamos a hacer aquí
Es que cuando le demos click
¿Vale?
Esto que habíamos hecho aquí
Lo vamos a hacer aquí
Handle click
Entonces
Handle click
Cuando hagamos un click
Vamos a ejecutar
Vamos a hacer un audio ref
Punto current
Punto source
¿Vale?
Y vamos a reproducir
Una música
Ahora no será la música
Justo del álbum
¿Vale?
Pero vamos a poner una en concreto
MP3
¿Vale?
Cuando hagamos el click
Si
Vamos a decir
Si está
Si está playing
Hacemos la pausa
Pausamos la música
¿Vale?
Y si no está playing
Vale
Vamos a hacer
Si no está
Bueno
Podemos hacer un return
Bueno
Un return no
Porque así hacemos
Vamos a hacer un if
No soy muy fan
Pero lo vamos a hacer
Porque así solo hago el set is playing una vez
Set is playing una vez
Is playing
Y tal
¿No?
Entonces
Vamos a hacer
Audio ref
Punto play
Punto current
Punto play
¿Vale?
Punto play
Para reproducir la música
Y vamos a hacer set playing
Esto correcto
El current song
Lo haremos más adelante
¿Vale?
Para recuperar toda la información
Pero con esto al menos
Ahora cuando reproduzcamos aquí
Vale
Está muy fuerte la música
Vamos a cambiarle el volumen
Esto
Mañana haremos un volumen
¿Vale?
Haremos nosotros un volumen
De cómo cambiarlo y todo esto
¿Vale?
Como escucháis
Se escucha la música
Pero ¿Qué pasa?
Si yo me voy a otra página
Se reinicia
¿No?
Y esto no es como funciona
Spotify
¿No?
O sea
Cuando nosotros le damos
Fijaos
Tenemos la música
Cuando vamos a otra página
Se para
Y esto
No es lo que queremos
Fíjate que cuando tú estás en Spotify
Bueno
Que lo estáis viendo
Tú vas reproduciendo otros sitios
Te vas a otros sitios
Te vas moviendo
Y la música sigue
¿Vale?
¿De dónde sale el play?
Os explico
Aquí lo que he hecho
Es crear un elemento audio
¿Vale?
Que podría haberlo hecho otra forma
Podríamos haber hecho un new audio
O sea
Aquí al final podemos hacer
New audio
Si no me equivoco
Y no necesitamos el elemento
Y tal
¿Vale?
Si no me equivoco
Si no me equivoco
Si no
Vale
New audio is not defined
Si no me equivoco
Se podría hacer
Pero bueno
Ah no me acuerdo
Y como me acordaba del elemento
Lo miraré
¿Vale?
Para hacerlo sin elemento
Al final el elemento
No se ve
Así que no
No hay ningún problema
Pero el tema es
Que cuando le damos
Se reproduce
Pero al
Al movernos
Se para
Esto no es la experiencia de usuario
Que justamente necesitamos tener
En nuestras páginas
¿No?
Lo que necesitamos realmente
Es que
Conforme nos vamos moviendo
Se pueda
Persistir
O sea
Se quede el estado
Quieto
No ocurra nada
Que diga
Ah no
Esto ahora
Desaparece
¿Qué es lo que vamos a hacer?
Lo que vamos a hacer es persistir
Este componente
Y le vamos a decir
A Astro
Que este componente
Que le vamos a tener que poner un nombre
Tiene que persistir
O sea
Le vamos a decir
Transition name
¿Vale?
Hay que ponerle un nombre
Y le decimos
Media player
¿Vale?
Reproductor
Y le decimos
Que este componente
De React
Tiene que persistir
¿Vale?
Persistir
Esto
Es magia
Porque entonces
Esto lo que va a hacer
Es que
Vamos a nuestra página
Reproducimos
Y cuando
Navegamos
Como podéis ver
La música
Sigue ejecutando
Sigue reproduciéndose
Y cualquier cosa
Que a partir de ahora
Hagamos en nuestro reproductor
Se va a quedar ahí
Su estado
Ya sea el volumen
Ya sea la información
Que tenemos en el estado
Cualquier cosa
Estamos
Le hemos dado la vuelta
Como a los estados globales
¿No?
Porque muchas veces
Necesitamos estado global
Estado global
Y aquí es al revés
Es
No
Lo que quiero es que este componente
De alguna forma
Sea global
Y persista
Entre las navegaciones
Que hacemos en diferentes páginas
Y así
Ya tenemos
Esta
Esta funcionalidad
Tan chula
Que tiene Spotify
En la que tú
Das un play
Escuchas la canción
Y al final
Te vas a otra página
Y sigue la canción
Y aquí podríamos cambiar
A otra canción
¿Vale?
Y entonces
Podríamos ir navegando
Podríamos ir escuchando
Y esto
Que normalmente
Era bastante complicado
Si vuelves a dar play
Continúa donde quedó
O vuelve a empezar
En este caso
Continúa donde dejó
Mira, por ejemplo
Bueno, en este caso
Claro, en este caso no
Porque lo he hecho
Lo he hecho regulín
Esto
Esto es porque
Estoy haciendo esto
¿Vale?
Estoy haciendo esto
Y esto al final
No lo tendríamos que hacer aquí
Lo tendríamos que hacer
En un use effect
O lo tendríamos que
Sí, lo tendríamos que hacer
En un use effect
Tu, tu, tu, tu, tu, tu, tu, tu
Tendríamos que hacer esto
¿Vale?
¿Ves?
Ahora sí
Ahora sí que funciona bien
El tema es que estaba machacando
Otra vez la URL
Esto
¿Ves?
Ahora lo pausas
Y continúa
De donde lo hemos dejado
Esto ahora funciona correctamente
¿No?
¿Cómo es que funciona?
¿Es parte de Astro?
¿El ref o com?
A ver
Lo que hemos hecho con el ref
Es simplemente
Recuperar el elemento audio
¿Vale?
Hemos recuperado el elemento audio
Para
Para manipularlo
Y lo que estamos haciendo
Es decirle
El audio
Pues si no sabéis
El elemento audio
Audio
HTML
MDN
Es un elemento
Que lo que te permite
Reproducir música
¿Vale?
Y puedes tener incluso
La parte visual
Puedes poner la parte visual
Y que ahí puedas ponerle
Los controles
De hecho si ponemos
Controls
Lo voy a poner
Para que lo veáis
Mira
Controls
No es
No es lo que queréis ver
¿Vale?
No es lo más bonito del mundo
Pero lo voy a poner aquí
Igualmente
Para que lo veáis visualmente
¿Vale?
¿Vale?
¿Veis?
No es así
Esto lo podemos modificar
Pero si pones controls
Se ve visualmente
¿Veis?
Y yo le das play aquí
Y se reproduce este audio
O sea que es un elemento
Que puedes cargar audios
Entonces
¿Qué estamos haciendo?
Lo que estamos haciendo
Es
Quitamos el controls
Pero el elemento
Sigue existiendo
Guardamos en una referencia
Que apunte
A este elemento audio
¿Vale?
Y aquí lo que hacemos
Es simplemente manipular
Y decir
Bueno
Cuando le doy a un botón
Quiero que este elemento audio
Empiece a reproducirse
Entonces le doy al play
Le he cambiado el volumen
Esto básicamente lo he hecho yo
Para que no nos moleste
Y que cuando le den click
Otra vez
Si está en marcha
Que se pause el audio
Eso lo estamos aprendiendo
Con el red
Pero
La magia
De al navegar entre páginas
Que se mantenga
Eso es un tema
De astro
De astro
Y de las view transitions API
¿Vale?
Que es una cosa
De la plataforma web
Y eso lo hemos hecho
Simplemente
Haciendo esto
Aquí tenemos el componente player
Y lo que hemos hecho aquí
Es decirle
Le hemos puesto un transition name
Que es media player
Y le hemos dicho
Cuando haga una transición
Entre páginas
Quiero que persistas
Este componente
Entonces lo que va a hacer
En lugar de volver
A renderizar este componente
En páginas diferentes
Lo que va a hacer
Es mantener el mismo
Con todo su estado
Su renderizado actual
Y todo esto
Entonces aquí tenemos
La diferencia
Si yo le quito esto
Y vamos a nuestra página
¿Vale?
Y le doy aquí al play
Y navego
Se pausa
¿Por qué?
Porque entre diferentes páginas
Lo que está haciendo
Es volver a renderizarse
Desde el principio
Pero al añadir
Estas dos directivas
Que son de astro
Pero por debajo
Utiliza el view transitions API
Que es la plataforma web
Lo que vamos a conseguir
Es decirle
No
Este componente
Que es el player
Este componente
Quiero que cuando navegues
De una página a otra
Quiero que se persista
Por lo tanto
Cuando yo le doy
Reproducir aquí
Cuando vaya a otra página
Quiero que persista
Y por lo tanto
Lo que pasa
Es que todo su estado
Todo como funcionaba
Se queda exactamente igual
Y no se vuelve
A re-renderizar
¿Vale?
Así que ahí es donde está la magia
Vamos a arreglar unas cuantas cosas
Vamos a
A echarle un vistazo
A como lo habíamos dejado
¿Vale?
Voy a abrir aquí
El editor
Vamos por aquí
Hostia
49 archivos
Ah
Por el output
Vale
Voy a ponerlo en el gitignore
El output
Tu tu tu
Tu tu tu
Punto oversell
Creo que así
Y esto debería desaparecer
Vale
Pues ya está
Ponemos en el gitignore
¿Por qué me ha cambiado la configuración?
Ah
Porque esto lo he puesto aquí
Y esto por aquí
Vale
Voy a quitar todos los carrots
Que ya sabéis que no me gustan los carrots
Y ya está
Muy bien
Pues este era nuestro proyecto
Del clon de Spotify
Que habíamos conseguido tener reproductor
Y todo esto
Mirando el Spotify
Spotify web player
Hay una cosa que creo que está bastante chula
¿Vale?
Que deberíamos hacer
Y es por donde vamos a empezar
Lo que vamos a empezar es
Tu tu tu
Veis esto de hecho para mi do dev
Y veis aquí que cuando haces hover
Aparece este play
Y entonces claro
Pues se reproduce esa canción
Pues eso vamos a hacer ahora
¿Vale?
Vamos a empezar por aquí
Porque ahora mismo no tenemos esto
Uy
¿Qué ha pasado?
Ha petado
Ah
Porque he cerrado el entorno de desarrollo
¿Vale?
Pues vamos a empezar por ahí
Vamos a poner ese play
Y lo que vamos a conseguir
Es que al darle play
Se ejecute esa lista de reproducción
Aquí en nuestro reproductor
El reproductor hoy lo vamos a hacer
Ya con la duración de la canción
Que podamos cambiarle el volumen
Y todo esto
¿Vale?
Pero al principio
Quiero que hagamos como un estado global
Que al darle play aquí
Podamos reproducir la canción aquí
Y que podamos seguir reproduciendo la canción
Mientras navega
¿Vale?
Mientras navegamos
Pues ya está
Y voy a arreglar este error
¿Veis que hay un error así de el efecto?
Eso lo voy a arreglar también
¿Vale?
Así que nada
Vamos a ello
Nos vamos por aquí
Y vamos a empezar
Por el principio
Por el item cart
Por este de aquí
A ver
Lo primero que voy a hacer
Lo primero es envolver este anchor
En un article
¿Por qué?
Porque vamos a necesitar
Poner ahí un position absolute
¿Vale?
Entonces voy a traerme aquí
En el class
Class
Y aquí vamos a poner
Que esto tenga un group
Y vamos a poner un relative
Y vamos a poner justo aquí
El botón del play
Y esto es muy interesante
Porque vamos a mezclar
Por un lado
Astro
Y por otro lado
Vamos a tener
Todavía también React
Y vamos a crear un estado global
Que lo podríamos leer
Desde cualquier sitio
Que eso es lo que es realmente
Impresionante
A ver
Creo que se puede hacer así
Vamos a poner aquí
El absolute
Lo vamos a poner right
Vamos a poner bottom 10
Ahora lo ajusto un poquito
No sé exactamente
Por dónde quedará esto
¿Vale?
Lo que voy a poner aquí dentro
Va a ser el
El play button
El cart
Play button
Le vamos a pasar la idea
Directamente
De la playlist
Que tiene que ejecutar
Y este componente
Lo vamos a crear aquí
Cart
Play button
Punto
JSX
¿Vale?
Export
Function
Cart
Play button
Y por ahora
Vamos a poner play
Y ya está
Ahora lo arreglamos
¿Vale?
Vale
Vamos a seguir aquí
Con los estilos
Porque vamos a ponerle
Una transición
Voy a intentar hacer
Exactamente como lo hace
Spotify
Si os fijáis
Lo que hace
Cuando te pones encima
Ves que aparece de abajo
Y con un fade in
Fade out
¿Vale?
Y voy a ver si soy capaz
De hacerle el hover también
Pero bueno
Al menos que cuando nos ponemos así
¿Vale?
Ves que aparezca así
Pues eso es lo que quiero
Lo que quiero conseguir
Para hacer eso
Voy a poner un transition all
Le ponemos una duración
De 500
¿Vale?
Y que empiece con la opacidad
A cero
Ahora
Cuando
Pones el group aquí
Lo bueno de poner un group
Es que lo que puedes conseguir
Es agrupar
Que cuando se haga hover
En un elemento
O sea
Tú cuando hagas hover aquí
Le puedes decir
Vale
Cuando se haga hover
En el group
Y le podemos decir aquí
Group
Hover
Entonces
Vamos a mover hacia arriba
El elemento
Ves que aquí he puesto
Translate
Y cuatro
¿Vale?
Pues vamos a poner
Translate
Y cero
Para que
Lo que haga es
De abajo arriba
¿Vale?
Cuando hago hover
Que suba
Aquí lo que estamos haciendo
Es empujando para abajo
Y esto lo que haría
Empujarlo para arriba
Y lo mismo haríamos
Pero para la opacidad
Mira ahí sí que me lo está poniendo bien
¿Vale?
Entonces ya tendríamos esto
Vamos a hacer que quede
Por encima de esto
¿Vale?
Le ponemos 10
Y solo nos quedaría
El carplay button
¿Vale?
Vamos a traernos este
Este que acabo de crear
Ah mira
Me lo ponía por ahí
Ahí está
Agregar importación
Este de aquí
¿Vale?
Y le teníamos que pasar
La ID
Esto va a ser un tema
Lo de la ID
Va a ser bastante interesante
Pero por ahora
Al menos quiero ver
Que visualmente se ve bien
¿Vale?
Para verlo visualmente
Vamos a ir a Player
¿Veis que teníamos aquí
Dos iconos?
El de la pausa
Y el play
Los voy a exportar
Para reutilizarlos
Aquí también
Y aquí me los voy a traer
¿Vale?
Voy a traerme
El pause
Y el play
¿Vale?
Y por ahora
Voy a poner directamente
El play
Luego dependiendo
Claro una cosa muy chula
Es que vais a ver que
Se aprende un montón
Con esto
Porque lo que vamos a hacer
Fijaos
Que cuando estáis aquí
En Spotify
Si vosotros estáis reproduciendo
Claro aquí no sale
No tengo
No tengo una lista
Aquí
¿Veis?
Si se está reproduciendo
Exactamente ese
¿Vale?
Lo que vais a ver aquí
Es que aparece como
La pausa
Entonces hay un estado global
Que se tiene que sincronizar
En todos los sitios
¿No?
¿Es posible crear un estado global
Agnóstico
Leerlo desde Ria que es Bell?
Si
Y de hecho lo vamos a hacer
¿Vale?
Vamos a hacer uno
Totalmente agnóstico
Que lo vamos a poder utilizar
Desde cualquier sitio
Y vas a ver
Porque va a estar súper chulo
Ahora mismo
Lo que me gustaría
Vale
Ojo
Ojo
Que ya está ahí
Ojo
Que ya está ahí
No está del todo bien
¿Sabes?
O sea
Quiero decir
No está
Tendríamos que subirlo un poco
Y sobre todo aquí
Tenemos que poner
Rounded
Full
BG
Green
No sé
500
P4
¿Vale?
Y ojo
Ojo
Ya está casi
Ya está casi
O sea
Está bastante parecido
Es un poquito más grande
Pero bueno
Tampoco pasa nada
Más o menos
Tampoco voy a hacer
Pixel Perfect
Ya lo dije
Y a ver
Que me faltaría
Moverlo aquí
Porque aquí
Si os fijáis
Tendríamos
Aquí le he puesto
Voy a poner 20
Y esto ya
Ya está
Perfecto
Ya hemos terminado el clon
Ya hemos terminado el clon
No hombre no
No pero al menos
Ya sí que tenemos
El botoncito
¿Vale?
Ya tenemos el botoncito
Y esto
Para utilizar el botoncito
A ver
Lo que voy a hacer
Es crear un estado global
Que podamos utilizar
En toda nuestra aplicación
Para eso
Lo que voy a hacer
Es un van install
Y vamos a instalar
Zustan
¿Vale?
Zustan
Zustan
Para el que no lo sepa
Uy
Van install
Zustan
Le he puesto la menos
Y eso no le gusta
Vale
Esto lo que hace
Zustan
Es un estado global
Que podéis utilizar
Y es independiente
Totalmente
De donde lo queráis utilizar
Se puede utilizar
En React
Pero también lo podríais
Utilizar en Vue
En Svelte
Y donde queráis
Y podéis leer los valores
Sin ningún tipo de problema
Así que está súper chulo
Justamente por eso
Porque podríais utilizar esto
Por ejemplo
Podéis poner
Zustan
Svelte
Y usando
Zustan
Con Svelte
¿Vale?
Y aquí
Pues podríais leerlo
Bueno aquí no
Está comentando esto
Aquí está diciendo como
No utilices Zustan
No pero yo quiero Zustan
¿Vale?
Vale pues veis
Zustan
To Svelte
O sea podéis transformarlo
A Svelte
Y este
Counter Score
Lo podríais leer
Sin ningún tipo de problema
Al final
Una vez que construís esto
Lo podéis leer
Desde Vue
Desde Vanilla
Javascript
Desde React
Y tal
Y tenéis un mismo
Estado
Que lo podéis leer
Desde toda vuestra aplicación
Y esto es clave
Porque necesitamos
Que lo que reproduzcamos aquí
Se reproduzca aquí
Aparezca aquí
Todo se tiene que sincronizar
¿Vale?
Así que vamos a ello
Para crear nuestro estado
Para crear nuestro estado
Vamos a ir aquí
Y vamos a crear
Teníamos componentes
Icons
Layouts
Pages y tal
Vamos a crear aquí
Una Store
Y le voy a llamar
Music Store
No sé cómo llamarle
Music
Player
Player Store
¿Vale?
Player Store
¿Vale?
Aquí importamos
Create
Lo hacemos de Zustan
Export
Const
Use Player Store
Perfecto
¿Vale?
Tenemos que saber
Si está
Si se está reproduciendo
Vamos a poner que no
Vamos a ejecutar
¿Qué podríamos hacer?
La Current
Current Music
¿Vale?
Current Music
No solo es Song
Porque más adelante
Vamos a querer hacer
Para adelante y para atrás
Entonces en Current Music
Necesitamos
La Playlist
O el álbum
Que estamos escuchando
La canción actual
¿Vale?
Que va a ser NUR
Por defecto
Y todas las canciones
Que realmente se puede ejecutar
La Playlist va a tener
Información como del álbum
Cuántos tags tiene
La portada
Este tipo de cosas
Y la Song
Será la lista de canciones
Que podríamos tener
Y esto pues nada
Set Is Playing
Para actualizar esto
Y Set Current Music
Para actualizar esto
Y ya tendríamos aquí
¿Vale?
Que es lo que no le gusta
Le falta esto
Ya tendríamos aquí
Nuestro estado global
¿Vale?
Tan sencillo como esto
Fácil y rápido
Sin ningún tipo de problemas
¿No?
Store State
En realidad esto es una Store
Le llaman Store
Si lo podemos mirar
En Zustand Store
Le llaman Store
Le llaman Store
Tiene sentido
Tiene sentido ¿No?
Pero es
Creando tu Store
Pues ahí lo pone
Para el estado
No se puede usar
La API Context de React
Se podría utilizar
Pero es que no hace falta
Y es mucho mejor esto
Y al final
El contexto
No está tan pensado
No está tan pensado
Para esto
¿Y no sirve usar
La Persistencia
Por Default de Astro?
No
Porque son dos cosas
Totalmente diferentes
¿Por qué?
Porque la Persistencia
Es para persistir
No para comunicar
¿No?
Es algo totalmente diferente
O sea
Si yo le doy play aquí
Y se tiene que reproducir
Una nueva canción
Eso no es Persistencia
Eso es comunicación de estado
¿Vale?
Muy bien
Ya tenemos la Store
Vamos a utilizar la Store
Aquí en el CarPlay este
Y la vamos a utilizar
Aquí
Vamos a utilizar
Lo único que tenéis que hacer
Para utilizar la Store en React
Fijaos que no necesitas
Ni siquiera
Envolver vuestra aplicación
Lo que ya lo hace
¿Ves?
Como la Context API
O Redux
Tenéis que envolver
Toda vuestra aplicación de React
Y por eso me gusta mucho
Zustan
Porque no necesitáis
Envolver toda vuestra aplicación
Con nada
Y simplemente
Creáis este archivo
Y directamente vais
A vuestro componente
Por ejemplo este
¿Vale?
Vamos aquí
Barra
Store
Si me equivoco
Y Player Store
¿Vale?
Y ya está
Ya podéis leer
Ese estado global
Y aquí le podéis decir
Mira aquí ya me lo ha sacado
Todo entero
¿Vale?
Y esto lo podemos sacar
De State
State
Esto es importante
Porque hay que decirle
Dónde lo tiene que sacar
¿Vale?
Y fíjate
O sea
Con estas dos líneas
Ya tenemos aquí
Esto
Y ahora
Aquí le ponemos
Si isPlaying
Entonces ponemos
La pausa
¿Vale?
Y si no
Ponemos el Play
Solo con esto
Solo con esto
Ya estamos leyendo
El estado global
Si volvemos
A nuestro reproductor
Que lo teníamos aquí
¿Ves?
Teníamos un estado local
Para el isPlaying
Que de hecho funcionaba
¿Eh?
Le dabas
¿Ves?
Funcionaba ¿No?
Pero ahora
Que tenemos un estado global
Vamos a poder
Sincronizar
Cuando le demos al Play
A uno y otro
O sea que
Esto lo podemos quitar
Y podremos decirle
Use
Player Store
Esto de State
Y aquí sacamos
El isPlaying
Ahora mismo
Esto
¿Por qué es
State
De aquí en realidad
Deberíamos sacar
Exactamente
Que es lo que queremos
¿Vale?
State
Punto
IsPlaying
Pero como vamos a estar
Cambiando esto
Constantemente
Lo que voy a hacer es
Directamente sacarlo todo
Y más adelante
Y más adelante
Ya haremos la optimización
¿Vale?
No hagamos optimizaciones
Prematuras
Así que nos quitamos
El estado local
Que teníamos aquí
De la reproducción
Y ahora
Lo podemos tener aquí
También podemos sacar
Incluso el
Set isPlaying
¿Vale?
O sea que ya podríamos
Tener un estado global
De cuando esté reproduciendo
La canción
O no esté reproduciendo
De hecho
Ay a ver
Use read
¿Qué le pasa a este?
Use
Use
Use
¿Qué?
Use ref
No puede leer
De null
De use ref
¿Y esto?
A ver
¿Ha petado en alguna cosa?
O no sé si
Porque ves que pone
No puede leer la propiedad
InvalidHunt
Solo puede ser llamado
BodyFunction
This is going to happen
No sé qué
No sé cuánto
No sé si eso es
Un error que me ha salido una vez
O que realmente es algo importante
Bueno
Por ahora vamos a ignorar
Y a ver qué tal
A ver
Esto sigue funcionando
Ahora ves que si le doy click
No pasa nada
¿Vale?
Ves que si le doy click
No pasa nada aquí
Eso es porque
No hemos hecho que nuestro
Componente sea interactivo
Cuando hemos utilizado aquí
El componente
Fíjate que esto es importante
Que lo comentamos
En la clase de ayer
Los componentes
En Astro por defecto
Los componentes
De Astro por defecto
Son estáticos
O sea
No se renderizan
En el cliente
O sea
Se renderiza en el cliente
Pero no le da interactividad
Es algo parecido
A lo que pasa
Con los React Server Components
Así que si queremos
Que realmente en el cliente
Se cargue
Aquí tendríamos que ponerle
Client
Y le podríamos poner
Load
Bueno
Le podríamos poner
Visible
¿Vale?
Para que cuando sea visible
Realmente este componente
Pues ahí sí que funcione
Y sea interactivo
¿Vale?
Ahora se lo he puesto
Pero igualmente
No funciona
¿Por qué?
Ah, porque aquí se me ha olvidado
Aquí se me ha olvidado
Esto vamos a hacer
Que sea un botón
¿Vale?
Y vamos a ponerle
Un on click
Handle click
Claro, que tampoco funciona
Pues esto
Porque no hemos hecho
Nada del evento
No hemos hecho nada del evento
Amigos
Así que aquí
Set is playing
Y le pasamos
El is playing
Al revés
Y a ver ahora
Vale
Obviamente ahora
La música no se ejecuta
¿Vale?
Pero sí que podéis ver
Que cuando le doy un click aquí
¿Veis que cambia aquí?
Y también cambia aquí
También cambia aquí
O sea
Ya estamos sincronizando
Fijaos
Que ya estamos sincronizando
El estado
De nuestra card
Con el de abajo
Todavía la música no está
¿Vale?
Paciencia
Paciencia
Vamos paso a paso
Pero ya estamos viendo ahí
Una cosa bastante interesante
En la que estamos
Sincronizando
Estado
Entre dos componentes
Totalmente separados
Dentro de Astro
¿Vale?
Que al final Astro
No es un framework de React
Y lo más interesante
Como os decía
Es que esto que hemos hecho aquí
Esto para leer el estado global
¿Vale?
Este estado global
Lo podríais leer
Desde un archivo de Vue
Desde un archivo de Svel
Desde un archivo
¿Sabes?
O sea
Es increíblemente potente esto
Es muy muy muy chulo
Así que
Ahora que ya tenemos esto
Podemos pasar
A decir
Bueno
Vamos a complicar
El car play button
Porque hasta ahora
Lo único que hemos hecho aquí
Es
Si es playing
Set is playing
Vale
Tenemos el current song
Pero no estamos enviándole
La información
Correcta
Que le deberíamos pasar
De cuál es la canción
Que se está ejecutando
Para que se escuche
¿Vale?
Entonces
Cosas que tendríamos que hacer aquí
¿Veis que le estoy pasando una idea?
Esta idea
Justamente se la paso
Porque es la idea
De cada uno de los playlists
¿No?
O sea
Aquí sería
Uno
Dos
Tres
Entonces cada botón sabe
Cuál es la playlist que tiene que ejecutar
Lo que es interesante de esto
Una cosa que podríamos hacer
Es que fíjate
Que cuando doy play
¿Vale?
¿Ves que todos tienen al post?
Esto está mal
O sea
Ahora todos
Están como sincronizados igual
Porque se creen que todos
Están ejecutando
Y esto no es correcto
En lugar de utilizar
Si el reproductor
Está sonando
Lo que debería hacer
Es decir
A ver
Is playing
Playlist
¿No?
Playlist
Y tendríamos que decir
Si está el reproductor
Se está sonando
Y
La
Current song
¿Vale?
La
Claro
Current song
No es current song
Le he puesto current song
Current music
¿Vale?
Vale
Es current music
Current music
Set current music
Ya decía yo
Que ese nombre no me sonaba
¿Vale?
Si el current music
Actual
Si la música actual
La playlist
Que suena
La playlist
Que suena
La id
Es igual a la id
De este botón
Entonces sí
Vamos a hacer
Que aparezca
Que está en pausa
¿Vale?
Ahora es como que
Estaríamos sincronizando mejor
Vale
Ahora ha petado directamente
No sé por qué ha petado
Ahora lo veremos
Por qué ha petado
Pero al menos
Al menos algo diferente hace
¿Veis?
Que le doy
Y peta
¿Por qué ha petado esto?
Ah
Porque dice que no puede leer
Bueno igual estoy haciendo
Ah porque el current music
No lo estoy seteando
Vale
Importante también
¿Vale?
Es normal
No estoy seteando
Set current music
Todavía no lo estoy utilizando
Vamos a hacer
En el current music este
Vamos a hacer
Claro
Voy a hacerlo
O sea fácil
Ahora
Simplemente para que veamos
Que funciona
Que sería hacer
Set current music
Le pasamos la playlist
La id
¿Vale?
Porque es lo que estamos esperando
Así como un objeto
Y aquí en este null
Es donde vamos a tener
El objeto de la id
De la playlist
Entonces por ahora hago esto
Vamos a ver si ahora
¿Vale?
Vale
Y ahora sí que lo tenemos bien
¿Ok?
Ahora sí que lo tenemos bien
Fijaos que ahora sí que detecta
En cada uno
Cuál es el que está reproduciendo
Ahora sí que detecta
Que estamos reproduciendo este
Y en el segundo no
Pero si le doy click a este
¿Vale?
Fíjate que este ha pasado
A no sé qué
A no sé cuánto
A ver
Hay una cosa rara
Me parece
Ah no
Vale
Yo no digo
Pensaba había
Que había una cosa rara
Sí que hay una cosa rara
Porque hay veces
Que le doy
Y no funciona
Pero no sé si es
Que soy yo
Que le doy tarde
Y tal
Lo miraré
Porque no sé si soy yo
Que la estoy liando
O es el estado
Que está yendo un poco lento
Pero bueno
Ahora sí que veis
Que está funcionando correctamente
Y que sí que detecta
Cada uno
Que está ejecutando
Y esto es súper importante
Claro
Obviamente
Así que
Ahora lo que necesitamos
Es reproducir la música
Esto
Esto es súper interesante
Esto es muy interesante
¿Vale?
Está quedando chulo
La verdad es que sí
Ah y espérate
Que vamos a arreglar
Una cosa antes de seguir
Porque fijaos
¿Veis ahí que hay un error?
Hay un error con el fondo
Lo que podemos hacer
Para arreglar este error del fondo
Voy a explicar cuál es el error
De la animación
Estos son dos páginas diferentes
Que utilizando el
ViewTransitions API
Que vimos en la clase anterior
Se anima
¿No?
Y mueve la imagen
Y no sé qué
Y esto lo estamos haciendo
Súper fácil
Pero fíjate que el fondo
Queda mal
Mira
Lo que podemos hacer
Es
En el
Aquí
Claro
El fondo
Lo habíamos puesto aquí
Lo habíamos puesto aquí
¿Vale?
Esto
Lo que podemos hacer es
Todo esto del shadow
Todo esto del hover
Todo esto
Lo podemos mover
Y lo podremos poner aquí
Y con esto
Lo que vamos a conseguir
Es esto
Que queda mucho mejor
¿Vale?
Fíjate
Que queda mucho mejor
Lo único que nos faltaría
El round de test
Lo deberíamos poner también
Yo creo que aquí
Y ya está
Porque lo que estamos haciendo
Es mover el elemento
Que realmente lo necesita
Y ya está
Ahora sí que queda bien
¿No?
Ahora mucho mejor
Lo único que hemos hecho
Es que el fondo ahora
Bueno que de hecho
No le he puesto la transition
Pero transition
Transition
¿Vale?
Duration 300
¿Sabes?
¿Vale?
Vale
Ya está
¿Vale?
Para que tenga el hover
Correctamente
Y esto
¿Vale?
Lo único que hemos hecho
Es quitarle el fondo
A la parte que es animada
Para que no se lo lleve
A la siguiente página
¿Vale?
Lo que animamos
Lo tenemos en una sola línea
Que es este
El transition name
Playlist box
Y así evitamos
Que se lleve el fondo
Y lo arrastre
A la siguiente página
Que no tiene tanto sentido
Lo ponemos en el elemento
Que es lo que lo están volviendo
Que este no es el que se anima
Y así
Nos queda mucho más natural
La animación
Entre una página y otra
Vamos con más temas interesantes
Y es que
Una cosa que tiene Astro
Por si no lo sabéis
Astro que es el framework
Que estamos utilizando
Que es agnóstico
Así utilizar React
Svel, Vue
Y todo esto
Es que también podéis crear
Endpoints
Y de hecho
Vamos a crear un endpoint
Porque lo vamos a necesitar
Aquí
Nos vamos a ir aquí
A pages
Y esto es igual
Si sabes next
Es algo parecido
Puedes crear una carpeta
API
Y aquí directamente
Podríamos poner
Yo que sé
¿Cómo le llamo?
Get info
Playlist
.json
.js
¿Vale?
Y aquí puedes ya crear
Puedes decir
Export
Async
Function
Get
Y aquí recibes
Por un lado
Los parámetros
Y la request
¿Vale?
Y aquí es donde vamos a hacer
La magia
Para que sea el servidor
El que me pase las canciones
¿Vale?
¿Por qué?
Porque si lo hacemos en el cliente
El problema que vamos a tener aquí
Es que tendríamos que cargar
Todo el javascript
Con todas las canciones
Y esto no es realista
En Spotify
No cargan de forma estática
En un json
Todas las canciones
Lo que hacen es
Pedirle a una API
Las canciones
Pues esto mismo
Es lo que vamos a hacer aquí
O sea
Lo que vamos a hacer aquí
Cuando hagamos el handle click
Será algo así
¿Vale?
Para que lo veamos
¿Qué vamos a hacer aquí?
Vamos a
Ah ya sé por qué esto
Vale
Lo que deberíamos hacer aquí es
Mira
Primero
Si está
Si está el playing list
Playing playlist
Si esta es la canción
O sea si esta es la playlist
Que se está ejecutando
Esto lo voy a mover aquí
¿Vale?
Si estamos ejecutando
Esta lista de reproducción
Lo primero que vamos a hacer
Es decir
Vale
Pues vamos a dejar
Vamos a ponerle false
Y vamos a devolver esto
¿Vale?
Esto es básicamente
Para parar la canción
Para pausarla
Entonces
Si no es esta la lista de reproducción
Lo que vamos a hacer
Voy a quitar esto aquí
Vamos a hacer un fetch
Un fetch
¿Vale?
A
API
Barra
Get
Info
Barra
Playlist
Voy a utilizar el punto json
Es un poco raro
Pero
En Astro he visto que lo utilizan mucho
Se puede utilizar una url con punto
No hay ningún problema
Me imagino que así puedes tener diferentes
.json
.xml y tal
Y lo voy a hacer así
Le vamos a pasar la id
Como query param
Pues el día de mañana
Le pasamos más id
O sea más
Si queremos filtrar
O lo que sea
El fetch
Le pasamos aquí la url
Donde queremos hacer el fetching de datos
El fetch
Devuelve una promesa
Y para resolverla
Lo que hacemos es
Añadir el .den
Podríamos hacerlo con async away también
¿Vale?
Y aquí
Recibimos la respuesta
Pero lo recibimos como
Esto creo que es el objeto response
Y el objeto response aquí
Como queremos recuperar el json
Tenemos que llamar
Res.json
Esto vuelve a devolver una promesa
Y aquí ahora sí
Tendríamos los datos
En los datos
Vamos a sacar
Las canciones
Y la información de la playlist
¿Vale?
Y aquí ahora pues
Vamos a poner
El set is playing
Lo pondríamos a true
Y el set
Current music
Aquí le podríamos pasar
Tanto las songs
La playlist
Y como hemos visto
Antes en la store
¿Veis que tendríamos también
La song?
Lo que vamos a hacer en este caso
Es reproducir la primera canción
¿Vale?
Así que le vamos a poner el cero
Ahora
¿De dónde sacamos estos datos?
De la API
¿No?
Y la API
Nos queda por hacer
Así que vamos a nuestra API
Vamos aquí al
Get info playlist
Y vamos a hacer nuestra
Querida API
Lo que vamos a hacer con la API
Obviamente
Esto tendríamos que llamar
A una base de datos
Pero no tengo una base de datos
Sí que tengo un archivo
Donde tengo todas las playlists
Y todo esto
Así que vamos a importar
Todas las playlists
Y todas las canciones
Esto después
Más adelante
Con una base de datos
Lo podríamos arreglar
Y hacer una llamada
A base de datos
Pidiendo esta información
Y todo esto
Pero como no tengo
Base de datos
Ahora mismo
Pues lo hacemos de aquí
¿Vale?
Más adelante quizás
Pues podríamos hacer otras cosas
¿Cuál es la diferencia
Entre sync y fetch?
No sé qué es sync
Me imagino que quieres decir
Async
Y async
No es que fetch
Es que puedes hacer
Async await
Así
Puedes hacer una await
¿Vale?
Y aquí tendrías
El response
Que es exactamente lo mismo
Os lo voy a escribir
Porque
Sé que algunos
No sabéis esto
Pero
Lo hemos visto ya
Un montón de veces
O sea
Podéis hacerlo así
O así
¿Vale?
Con el await del fetch
Y le podrías copiar
Todo esto
Await fetch
Aquí tendrías
La respuesta
La response
Luego aquí tendríamos
El JSON
Bueno
El data
Y ya está
O sea
Esto sería
Con async await
Async await
Y esto sería
Con promesas
Podéis utilizar
El que queráis
¿Vale?
No empecéis ahora
Con
Al final
La fetch
Devuelve una promesa
Y por lo tanto
Podéis utilizar
Cualquiera de los dos
Y aquí ya
Podríais hacer esto
Y ya está
Lo tendríais así
¿Vale?
Así que podéis utilizar
El que queráis
¿Ok?
Muy bien
¿Se puede compartir
El estado
Entre server side rendering
Y el cliente?
Se puede compartir
El estado inicial
En el server side rendering
Deberías poder tener
Un estado inicial
Y lo podrías llegar
A inicializar
Pero
No puedes compartirlo
Si lo cambias
En el cliente
No se va
A
A
Sincronizar
Automáticamente
Con el de servidor
¿Entiendes?
O sea
No funciona así
¿Qué crack?
Hasta miedo da
Pasarme al front
No tiene sentido
¿Vale?
Shadow
No tiene sentido
Que te compares conmigo
Que tengo 15 años
De experiencia
Desarrollando web
Si encima me dices
Que tienes
Que te vas a pasar al front
Significa que
Ni siquiera has tocado al front
Mucho
O sea
Que comparativa
Te vas a hacer tú
En tu cabeza
Es como si yo
Digo
Ay me da miedo
Pasarme al fútbol
Y me voy a comparar
Con Leo Messi
Yo que sé
Que lleva 20 años
Jugando a fútbol
No tiene sentido
Así que no te compares
Y simplemente aprende
Y di
Guau
Cuánto me queda por aprender
Que es lo que yo sigo pensando
Cuando veo a mucha gente
O sea que
No te preocupes
Muy bien
Pues ahí lo tendríamos
¿Parecido tienes?
No
Que no tengo ningún parecido
La verdad
Muy bien
Pues vamos aquí con la API
Que esto es súper
Súper interesante
¿Vale?
Lo primero que hacemos
Es recuperar la idea
Esto es súper chulo
Esto de recuperar la idea
Get the idea
From the URL
¿Vale?
Porque
Una cosa que tiene
Muy buena Astro
Que esto lo vais a ver
En Dino
En Next.js
Ahora también
En BAN
Y tal
Es que
Ya no
Ya no está tan de moda
Utilizar
Cosas raras
Del framework
Que te tienes que aprender
Sino utilizar
La plataforma web
En este caso
Por ejemplo
En la request
Vamos a tener
La URL
¿Vale?
Porque esta request
Que nos llega aquí
Esto en realidad
Es la request
De
O sea
De la interfaz
De la API
¿Ves?
La request
Que es de la API fetch
Por cierto
Que todo el mundo se cree
Que fetch
Simplemente es
El método
Pero fetch
En realidad
Es un conjunto
De APIs
Métodos
Objetos
Y tal
Que te permite
Hacer estas llamadas
Asíncronas
Y que tienes
La request
Y la response
Y en este caso
Este request
Nos llega aquí
Y por lo tanto
Podemos acceder
A la URL
De la request
¿Ves?
URL
Es una de las propiedades
Y esto es genial
Porque significa
Que ya no vais a tener
Que reaprender
Como hacíamos con Express
Toda la API de Express
Para tratar
Bueno
Express.js
Para saber
Cómo recuperar la URL
Sino que simplemente
Podréis ir a MDN
Y entenderlo
Y en este caso
Por recuperar
Miramos
La URL así
Que hay veces
Que en Express
Sería igual
Pero eso es casualidad
Y podemos crear
Un objeto
Search params
Utilizando el
New URL
Search params
Y podemos hacer esto
URL.split
Y lo que hacemos
Es quedarnos
En la primera parte
¿Vale?
Para tener
El query string
Vamos a poner aquí
Query string
Query
O mira
Lo podemos hacer así
Y así no
No hay que hacerlo así
Queda maponico
El primero
Lo dejamos vacío
Porque no nos interesa
Y nos quedamos
Con la segunda parte
Porque al hacerles
El split
Con el interrogante
Nos queremos quedar
Con la segunda parte
De la URL
Esto lo podéis ver
Más fácil
Si
Mira
Voy a abrir el
Run.js
Y os lo explico
Para que lo entendáis
Porque está bastante chulo
Mira
Voy a copiar
Esta parte
De aquí
¿Vale?
Imaginad
Que tenemos
Esta URL
¿Vale?
Si hacemos
Un URL.split
De interrogante
Lo que va a hacer esto
Es dividirnos
Esto en dos partes
¿No?
Una
La parte
Que está
Antes de interrogante
Y luego
La parte
Que está
Después de interrogante
Así que tenemos
Dos posiciones
Pero lo que nos interesa
Es justamente
Esta parte de aquí
Porque lo que queremos
Es recuperar
Lo que es el query string
Así que podemos hacer esto
Y aquí ahora
Ya hacemos
New
New
URL
Search params
¿Vale?
Le pasamos
La segunda parte
Y para recuperar
La segunda parte
Podemos hacer dos formas
¿Vale?
La query string
La tendríamos en la posición 1
Como hemos visto
Pero esto lo puedes hacer así
Y esto funcionaría
¿Vale?
Si ponemos query string
¿Ves?
Que tenemos así
Pero también puedes hacer
La parte
Bueno
Polémica
Que sería hacer una desestructuración
Porque
Ay
Me ha dejado fatal
Ah
Porque habría que quitar esto
Puedes hacer una desestructuración
Porque
No necesitarías acceder a la posición
Sino que
Desestructurando
Le dices
Bueno
La primera posición aquí
No la necesito
¿Vale?
Si lo puedes dejar vacío
Y la segunda posición
Lo guardo en query string
No sé si conocíais esta forma
De hacer este tipo de cosas
Pero la verdad es que
A veces está bastante
Bastante chula
A mí me gusta
Y así ya teníamos la query string
Ahora
La query string
Que en este caso
Bastante sencillo
Hay gente que haría regex
Y cosas así
Pero lo mejor
Sería utilizar
El new url search params
Esto es una cosa
Que es de la plataforma web
Que es súper interesante
De conocer
Porque lo vais a utilizar
Un montón de veces
En vuestro día a día
Y aquí ya tendríais
La query
Y en la query
Ya podríais acceder
Por ejemplo
Get
Id
Y aquí tendríamos
El valor de la id
Y ya no tenéis
Que hacer absolutamente más
O sea
No tenéis que hacer regex
Ni cosas raras
Esto es nativo
Funciona ya
En todas las versiones
Y ya lo tendríamos
¿Vale?
Con el url search params
Una alternativa
Que también se puede hacer
A esta
Sería
Si tenéis la url completa
Que creo que es el caso
Una cosa que podéis hacer
¿Vale?
Sería
Imaginar que quitamos esto
Y lo que podemos hacer aquí
Sería
Imagínate que está
La request url
Podríamos crear la url
Utilizando la request url
Le pasamos todo
Y ahora aquí
Ya tendríamos
Directamente
El search params
Que tampoco
Está nada mal
Y ya podríamos
Esto es súper bonito
O sea
Esto es genial
Porque teniendo una url completa
Lo que puedes hacer
Directamente es
Crear un objeto url
Esto de insisto
Esto es de la plataforma web
Y recuperar
La query string
Sin bibliotecas
Independencias
Sin nada raro
Y además se entiende bastante
Y de hecho
Vamos a hacer este
Vamos a hacer este
Porque no sé
Porque no necesitamos hacer este
Así que
Vamos a poner url object
New url
Le pasamos la url
Y tendríamos la idea
En url object
Punto search params
Get id
Y ya está
Y así podríamos recuperar la idea
Todo con la plataforma web
¿Has visto?
Maravilloso
Ahora vamos a recuperar
La información de la playlist
Para eso
Lo encontramos en el all playlist
Ponemos playlist
All playlist
Con el find
¿Vale?
Buscamos la playlist
Que tenga la misma idea
Y ahora vamos a recuperar
También las canciones
De todas las canciones
Vamos a filtrar
Aquellas canciones
Que el album id
Sea igual
Al playlist
Album id
¿Vale?
Y ya con esto
Devolvemos una respuesta
Que sea
Con json stringify
¿Vale?
Y creo que ya está
No hace falta más
Porque si es 200
No
A ver
Aquí le podríamos pasar
Los headers
¿Vale?
Con el content type
Y todo esto
¿Veis?
Application json y tal
Pero yo creo que no es necesario
Porque si ya lo estamos transformando
En json
Ya funcionaría
Pero bueno
El primer parámetro
Sería lo que queremos devolver
La información que queremos devolver
La tenemos que pasar como string
¿Vale?
O sea que json stringify
Playlist
Y songs
Y el segundo parámetro
Tendríamos las cabeceras
De respuesta
Y con esto
Pues ya hemos creado una API
Pues en un momentito
Esto le vamos a cambiar el nombre aquí
As as
All songs
¿Vale?
Para recuperarlo aquí
Y aquí ya tendríamos las canciones
Que vamos a poder
Preguntar
Aquí
Y estas son las canciones
Que nos llegan aquí
Aquí la playlist
Y ya está
¿Vale?
Pues este fetch
Debería funcionar
Pero para ver que todo funciona bien
Voy a poner aquí un console log
¿Vale?
Con las songs y playlists
Al menos para asegurarme
Vamos a volver a nuestra aplicación
¿Vale?
Le vamos a dar aquí
Obviamente ejecutar
No se ejecuta
Pero vemos aquí
Que el console log
Si que se ha ejecutado
¿Vale?
Y que tengo información guardada
Con la playlist
Con toda la información de la playlist
La cover y tal
Lo que vamos a hacer con esto
Es seguir con el player
O sea, ya tenemos en el estado global
La información de esa playlist
Con todas sus canciones
Así que
Lo que podemos hacer ahora
Es actualizar el player
Vamos a actualizar el player
Vamos a quitar este
Esta es la API que hemos hecho
Y el player es el reproductor
El reproductor
Aquí
Este es el reproductor
¿Veis que teníamos aquí
Current song
Set current song
Y todo esto?
Esto ya no lo necesitamos
Lo que vamos a sacar de aquí
Es la información
Del current music
Este de aquí
Current music
¿Vale?
Y este current song
Nos lo vamos a petar
Este está muy chulo
Porque aquí vamos a poner
Un montón de cosas
En...
A la vez
¿Vale?
Vamos a utilizar
React
Vamos a utilizar cosas
Que vienen en una store global
Y tal
Lo primero que vamos a hacer
Sería cambiar
Poner un use effect
Un use effect
Vamos a poner un use effect
De forma que
Claro, aquí es donde tenemos
El reproductor de música
Entonces cada vez
Que se cambie
El use playing
Lo que vamos a hacer es
¿Vale?
Si el use playing
Ahora está reproduciendo
¿Vale?
Pues vamos a reproducir la canción
Y si no
Lo vamos a pausar
Y esto
Lo vamos a sacar de aquí
Porque ahora
Este use playing
No vamos a...
No vamos a hacer
Que esto ocurra
A nivel de componente
Porque ahora podemos
Reproducir música
De cualquier sitio
Así que lo que vamos a hacer
Es
Simplemente
Escuchar el estado global
Y cuando el estado global
Cambie
Lo que vamos a decir es
Vale, pues ahora
Reproduzco la música
No la reproduzco
Pero eso me viene de fuera
Yo puedo cambiar el estado
Pero el valor
Lo escucho
Y cambio
Si la música
Se está ejecutando
O no se está ejecutando
¿Vale?
Eso por un lado
Eso sería un efecto
Y ya estaría
Ahora
Vamos a hacer
Otro segundo efecto
Otro segundo efecto
Porque cada vez
Que cambien la música
En este caso
El curing music
¿Vale?
Vamos a tener que
Cambiar la canción
Tiene que cambiar
La canción que está sonando
No tendría sentido
Así que vamos a sacar
De aquí
El song
El playlist
Y el songs
De curing music
¿Vale?
Y vamos a crear
La url
Si tenemos una canción
Si realmente está
Escuchando la canción
Vamos a crear
Un source
Y esto va a ser
De
Barra music
Espérate
No
Barra music
Barra
A ver
Lo tengo aquí
Barra music
Barra
Playlist
Punto id
¿Vale?
Importante
Esto podemos hacer así
Con optimal chaining
Barra
La id de la canción
Que en este caso
Debería ser
Bueno
Ese cero es un poco pirata
Pero es verdad
Que no tenemos
Ninguna que tenga una id
Que no sea cero
¿Vale?
Y las id sí que están mal
Podríamos
Tendríamos que hacerlo
De otra forma
Pero por ahora
Vamos a dejar así
Punto mp3
O sea
Estamos creando
A través de la id
De la playlist
Y de la canción
El source
Del audio
Que tiene que ejecutar
Y ahora
Audio.ref.curren.source
Le ponemos este source
Y cada vez que cambiamos de canción
Se tiene que ejecutar
Porque
O sea
Se tiene que poner play
Se tiene que reproducir la música
Le ponemos el play
¿Vale?
Si tenemos una canción
Hacemos esto
Y con esto
Al menos
Deberíamos ver
Que se ejecuta
O sea
Deberíamos escucharla
A ver
Voy a quitar Spotify
Un momento
Y a ver
¿Vale?
¿Y ves?
Vale
Lo malo
Es que cada vez que le doy
A ver
Tiene sentido
Vale
Fíjate que aquí abajo
Sigue la música
Donde se quedó
¿Vale?
Arriba no
Pero
Y entonces
Podemos cambiar de canción
Y le podemos dar
Pause
Y seguir
Continuando
O sea
Lo que hemos hecho
Ya estamos haciendo
El reproductor
Que ya empiece a funcionar
Correctamente
¿Vale?
O sea
Ya al menos
Se está reproduciendo
La música
Como esperemos
Que la reproduzca
Y todo esto
¿Vale?
Lo que
Para darle un poquito
Más de entidad
Vamos a mostrar
Si os parece
El current song
Este lo voy a hacer
En un momentito
Voy a crear aquí
Un componente
Le vamos a llamar
Current song
Para que aparezca también
Que sepamos
Cuál es la
La que se está ejecutando
Así que ponemos esto
Por aquí
Current song
Y vamos a ver
No sé si fiarme
No me fío
No me fío
Porque no veo un picture
Y no me fío
No me fío
Que vaya a salir algo
A ver
Podría ser una buena idea
Para empezar con algo
Pero
Da igual
Me la voy a jugar
Un poquito así
Es un poco parecido
A lo que ya teníamos antes
Tengo por aquí
El componente
Que habíamos hecho ya
Y lo hacemos un poco parecido
Y yo creo que con esto ya está
A ver
Vamos a hacer que sea flex
Centramos esto
Y lo separamos
Con un gap de 5
Hacemos un
Bueno
No hace falta esto
Vamos a poner un relative
Porque es que creo que
No vamos a hacer
Ni siquiera ningún
Hover ni nada
Así que le vamos a quitar
Transiciones y todo esto
Simplemente ponemos
Un overflow hidden
Por si no cabe
Y la picture aquí
Vamos a poner la imagen
Vale
La imagen
Y aquí vamos a
Estilar el picture
El picture
Vamos a ponerlo
Que sea
16
16
Voy a reproducir música
Mientras
Mientras no tengamos
Nuestro spotify
Pues vamos a tener que
Todavía utilizar
El de verdad
Vale
Vamos a
Redondear un poco
La imagen
Le ponemos una
Un poquito de sombra
Y
Overflow hidden
La imagen
Vale
La imagen
Vale
La vamos a dejar igual
Y esto
Vamos a poner el h3
Con el title
Classname
Font
Volt
Block
Y no sé si
Subirle esto
Pero por ahora
Lo vamos a dejar así
Esto lo vamos a poner aquí
En este current song
Y le vamos a pasar
Toda la información
De la música actual
Vamos a ver
Vale
Ahora es normal
Que aparezca vacío
Y lo que no es normal
Es que no aparezca
No aparezca nada
Cuando le damos
Vale
¿Por qué no aparece nada
Cuando le damos?
Vamos a ver aquí
Si ponemos
Uy
¿Esto qué le ha pasado?
Vamos a poner aquí un console
Image
Y title
El current music
Image
Undefined
Undefined
¿Vale?
Eso es normal
Pero sigue siendo
Undefined
Ah
Porque no es current music
Es current music
Punto song
Es la canción actual
¿Vale?
Ahora sí que
Vale
Ahora sí que veis
¿No?
Que al menos sí que aparece
Y es importante
Que
Que
El
El título
Que aparece
Es el título
De la canción
No del álbum
Es el de la canción
¿Vale?
Entonces
Pero al menos
Ahora sí que vemos eso
Así que
Bueno
Por ahora vamos a dejar así
No sé
¿Qué le supone que sale aquí?
El autor
O sea
Aquí sale
Un corazoncito
Que bueno
Esto sería fácil
De hecho
Esto lo haremos
Seguro
Un corazoncito
Y el autor
Vale
Veo que es un poquito
Más pequeña
Y que no es un font vault
Vamos a arreglar esto
Semi vault
Y vamos a poner
Text
Base
No sé si base
Base demasiado grande
Sí
Base demasiado grande
SM
¿Vale?
Y algo así
Y justo debajo
Se supone que está
El autor
Creo
No sé si es el autor
O el álbum
A ver
No sé si es el autor
O el álbum
16 BL
Es el artista
Vale
Pues vamos a poner
Justo debajo
Picture
No sé qué
Esto será
Picture
Vamos a poner este
Un dip aquí
Un dip acá
Esto lo ponemos aquí
Y esto
Si no me equivoco
Si vamos aquí
A la información
Que tienen las canciones
¿Ves?
Tenemos los artistas
Vale
Pues vamos aquí
Y ponemos
Artist
.join
Y le ponemos esta separación
Vamos a poner un span
Para ponerle un poquito
De estilo
¿Vale?
Y aquí ponemos el artist
Que esto le debería llegar
Hacemos el span
Le ponemos un poquito
De opacidad
Creo que esto debería ser
Un pelín más pequeño
Le ponemos un poquito
De opacidad
Al menos para que
Parezca
Parezca el mismo
¿Vale?
Esto debería quedar
Más o menos así
Vale
Join
Porque artist
Dice que no le llega
Mmm
Porque
Porque
Son
Artists
Lo he puesto bien
¿No?
Lo he puesto con
A ver
Puede ser
Claro
Puede ser
Que al principio
Claro
Al principio es null
Entonces cuando no estamos
Reproduciendo nada
Es normal
¿Ves?
Ahora sí
Ahora sí que
Lo tenemos ahí
No está
Lo deberíamos pegar
Un poquito más
O sea
Que a lo mejor
El gap este que he puesto
Aquí ha sido un poco exagerado
¿Vale?
No
No me sigue
T-t-t-t-t-t
Block
Ah es que
Aquí
Esto debería ser
Flex
Y
Gap
Dos
O sea
Este gap
Estaba bien
Porque es el de izquierda
A derecha
¿Vale?
Y le ponemos aquí
Flex
Call
¿Vale?
Hostia
¿Qué pasa ahí?
O sea
Hay como una
Una separación de más
Que no sé por qué
¿Por qué es este
Este gap
Que hay aquí?
Gap
Ah porque dos es demasiado
Vale
O sea que
En realidad no debería tener gap
Directamente
Parece que no debería tener gap
Vale
Pues ya está
Ese es el problema
Que me he pasado
Me parecía
Me parecía que iba a ser menos
Pero
Vale
Pues más o menos
Al menos tenemos esto
¿Veis que el reproductor
Es demasiado grande
También?
Es verdad
Que no he puesto
Ah sí que lo he puesto
No
No pasa nada
¿Qué pasa con el picture?
Y siguen sin ver el picture
Ah he puesto picutre
Picutre
Picutre
Que grande
Solo funciona conmigo
El picutre
¿Os ha gustado el picutre?
El picutre es el nuevo elemento de HTML
Donde las fotos son una mierda
Que bueno
¿Os parece con el slider del volumen?
Porque me da bastante coraje
Que el volumen es bastante alto siempre
Entonces
El volumen
¿Qué podemos hacer con el volumen?
A ver
No voy a hacer un slider desde cero
Porque es bastante rollo
Si lo tuviese que hacer
Utilizaría el input range
Y lo malo del input range
Que es un HTML
Pero sería algo así
Lo bueno es que esto
Sí que se puede estilar
Pero bueno
Con CSS es un poco rollo
Tenemos que escuchar el evento
De cambiar el tal
No sé qué
Pero por suerte
ShadCN
Tiene un slider
De hecho lo recomiendo bastante
Porque está bastante bien
ShadCN
Que tiene un montón de componentes
Tiene uno
Que es un slider
Un slider
Se llama slider a esto
A este tipo de range slider
Tiene uno
Que nos funciona bastante bien
Y que se parece
Lo suficiente al de Spotify
Que es este de aquí
Bueno no sé si lo veis
Pero es este
Este de aquí
Y que además
Vamos a reutilizar
También aquí
O sea es importante
Que lo reutilicemos
En los dos sitios
Así que
Vamos a traernos
Ese componente
De ShadCN
Que al final
Podéis darle aquí
Instalación
Lo podéis hacer
Automáticamente
Lo podéis hacer manual
De hecho yo
Voy a hacerlo manual
Y ya está
Vamos a hacer el
Van de esto
Vamos a hacer un
Van
Install
De ShadCN
De esto
Y también me voy a llevar
TLSX
Porque sé que es una dependencia
Que necesita
Y que si no
No le va a gustar
¿Vale?
Así que
Vamos con ello
Luego
El slider
Me lo voy a traer
Para aquí
Componentes
Slider.jsx
¿Vale?
Lo tenemos por ahí
No sé por qué
Me da algún error ahí
Ah, porque no es JSX
Esto debe ser
Perdón, perdón
Esto debe ser TSX
Que seguramente
Como me podía imaginar
Como componente JSX
Este tipo
Como que
Bueno, porque no he traído
Toda la configuración
De
Si no tendría que hacer
Todo esto
El init
Y todo esto
Y no te lo ganas
¿Vale?
Entonces
Lo que voy a hacer
Aquí tendría
Es lo que tenéis que ejecutar
Copiar
El slider
Y tenéis que actualizar
Los import pass
Y tal
Lo bueno
Lo mejor que podéis hacer
Es el init
Para que os haga
Toda la configuración
Y tal
Pero a mí me da bastante palo
Porque te cambia un montón
De configuraciones
Te añade un montón de cosas
Y en este caso
Como vamos a utilizar
Solo el slider
Creo que no vamos a tener
Ningún problema
Lo vamos a dejar tal cual
Y ya está
Lo vamos a utilizar
Y que nos deje tranquilos
Que no queremos
No queremos problemas
Así que nos traemos
El slider
De este que tenemos aquí
El slider
Y vamos a utilizar
El slider
Para el volumen
Lo vamos a poner acá
Slider
¿Vale?
Y ahora
El slider
Vamos con el slider
Vamos a ponerle
Valores por defecto
Default value
Vamos a ponerle
Que sea 100
Porque tiene que estar
Al máximo el volumen
Máximo
Que sea 100
El mínimo
Que sea 0
¿Vale?
Porque lo podemos bajar
Hasta abajo
Del todo
Luego
Le vamos a poner
Un class name
Para que tenga
Un ancho
Asegurado
Vamos a ponerle
100 píxeles
No sé cuánto será
El de
A ver
Cuánto es el de
Un momento
¡Chum!
¡Ay!
Cuando se hace muy pequeño
Desaparece el report
¿Cuánto es esto?
Bueno
95
Venga
Vamos a apurar
Ahí justo
Lo que tiene
¿Vale?
95 píxeles
De ancho
Y lo que hacemos
Es que cuando
Cambie el valor
El valor
¿Vale?
Vamos a
Vamos a
Cambiar el audio
Ref.current.volume
Y le ponemos
El valor que tengamos
El primer valor
Value
Vamos a poner aquí
New volume
Value
Y aquí ponemos
El nuevo volumen
Entre 100
¿Vale?
Porque el valor
Del volumen
Se tiene que poner
De 0 a 1
De 0 a 1
¿Vale?
Entonces nosotros
Lo dividimos entre 100
Y así ya lo tendríamos
Y esto
Si ha ido todo bien
Y no tiene ningún problema
Vale
Bueno
Ha quedado mal
¿No?
Ya tendríamos aquí
La cosita esta
¿Vale?
¡Chu!
Y ya tendríamos aquí
El slider
Obviamente
Todavía no se está ejecutando nada
Vamos a intentar
Bueno
Al menos ya funciona el volumen
Ya funciona el volumen
Aunque es verdad
Que hay un error
No es grave
No pasa nada
Pero
Pero hay un pequeño error
¿No?
El inicio
Si al inicio
Claro
Si al inicio
El volumen es 1
Lo que podríamos hacer
Es tenerlo en un estado
Ahí
Podríamos tenerlo en un estado
Lo que pasa es que estoy pensando
Que si lo ponemos en un estado
El valor este
¿Sabes?
No sé si
Yo entiendo que sí
Que podríamos tener un value
Este es el problema muchas veces
De
Que no llega al máximo volumen
No, no
Sí, eso sí
Eso sí que existe
Al máximo volumen
No, no
No es eso
Es el volumen inicial
El volumen inicial
Al iniciar el volumen
El problema es
Que claro
Tú haces el on value change
Pero al iniciar
El
A ver
Lo que puedo hacer es
Que guapo estás Midu
Pero ¿Dónde están los lentes?
Cuida esos ojitos
A esos ojitos
Buenísimos
Gracias
Vale, ya sé lo que vamos a hacer
Vamos a hacer esto
Vamos a hacer
Cuando le cambiamos esto
Current.volume
Volume.ref.current
No vamos a utilizar un estado
Porque no tiene sentido
Que se vuelva a renderizar
¿Vale?
Entonces lo que vamos a hacer
Es cambiar esto
Y aquí le vamos a poner
El nuevo volumen
¿Vale?
Volume
Volume value
¿Vale?
Hacemos aquí una vez el
No, esto no
New volume
Entre 100
Y así
Lo reutilizamos
¿Vale?
Volume
Vale
¿Vale?
Y ya está
Vamos a hacer esto
Y ahora entiendo
Que si lo pongo aquí
A ver
¿Y esto aquí?
Vale, ahora tiene sentido
Bueno
Que no está mal
Hemos hecho un volumen
En un momento
¿Esto qué?
¿Esto lo aprendéis
En cualquier sitio o no?
Ah, ah, ah
Eh, eh
No está mal
No está mal
Cabe la leche
Sería muy complejo
Para que el volumen inicial
Fuera
Fuera creciente
Hombre
No sería muy complejo
Lo podríamos hacer
Pero tardaríamos un momento
¿Queréis que os vuele la cabeza más todavía?
¿Queréis que
Vayamos a
Todavía al siguiente nivel?
Bueno
Para empezar
Voy a arreglar una cosa
Vamos a arreglar una cosa
Voy a quitar el min
Este
Para que quede mejor
¿Vale?
Ahora veis que queda mejor
Voy a hacer otra cosa
Vamos a robar
Vamos a robarle
A la gente de Spotify
Hostia
Qué chulo este detalle
No me jodas
Qué cabrones
Aquí hay un detalle
Que mola mucho, tío
Aquí hay un detalle
Que mola mucho
Que esto
Es diferente
Conforme
Dependiendo del volumen
Que tengamos
Buah, eso lo haré
Eso lo haré
Porque me parece
Me parece muy chulo, eh
Pero ahora no lo voy a hacer
Porque no me da tiempo
Pero lo voy a hacer
Voy a hacer que el volumen
Cambie
O sea, el icono
Cambie según el volumen
Que haya
¿Vale?
Lo haremos
Por ahora lo que voy a hacer
Es robarle el SVG
Eso es lo que voy a hacer
Voy a robar el SVG
A ver cómo lo hacen
Me imagino que tendrá
Ah, pues no
Es que cambian totalmente el icono
La madre que los parió, tío
Cambian el icono completo
Porque al final
Claro, al final tienen tres iconos
Tienen tres iconos
No es difícil
Lo que pasa es que me da palo
Tener que copiármelo tres veces
Me do in the house
Me do DJ
Gracias por cada proyecto que compartes
Gracias a ti
Export
Const
Volume
Volume
Volume
Volume
Volume
Volume
Claro, entiendo que cuando no hay volumen
¡Oh, qué chulo!
Joder, es que me está dando rabia no hacerlo, tío
Voy a intentar hacer
Solo que tengamos dos iconos
De esto
¿Vale?
Le robamos este
Volume
Silence
¿Vale?
Pa, pa, pa
Esto por aquí
Volume
Silence
Lo que pasa es que, claro
Vamos a necesitar un estado
Entonces sí
¿No?
Entiendo
Aunque, bueno
Estoy pensando
Estoy pensando en voz alta
Y aquí
Volume
Vamos a poner
Lo malo es que voy a apretar un momento
Un momento, ¿eh?
Que es que tengo que
Ah, bueno
Lo puedo pausar
También es verdad
Tonto de mí
Lo puedo pausar
Y robarles el icono igual
¿Vale?
Y este
Es muy raro
Es muy raro
Cómo lo hacen
Me sorprende
¿Sabes?
Que al final
No están reutilizando
Realmente
Todo el tema
Del icono
Y están utilizando
Como
Dos iconos diferentes
O eso parece
Eso parece
A ver
Porque no creo
Que cambien el path
De forma
¿Sabes?
O sea, como que tienen
Dos iconos diferentes
Y lo están cambiando
Ahí con un estado
Sí, sí
No, claramente
Porque veis
Este path
Y este son diferentes
Así que no
Claramente
Claramente
Vale
¿Sería bueno evitar el SVG?
Nah, yo creo que con esto
Ya está
A ver
Lo ideal sería
Dentro del SVG
Cambiar lo mínimo necesario
Pero bueno
Ya ves
Spotify
Legal Team
Ha entrado al chat
Ya te digo
Vale
Lo malo de esto
Y esto sí que es una cosa
Que me preocupa
Es que tendríamos
Entonces
Entiendo que necesitaríamos
Un estado
A ver
No hay un problema
Por necesitar un estado
Pero
A ver
Ah, ya sé lo que voy a hacer
Claro, mejor
Muy bien, Miguel
Es que es una buena práctica
Vamos a poner el volumen control
En un sitio aparte
Claro
Es que claro
Estoy pensando
Pero esto es
Tonto de mí
Que muchas veces nos pasa
Que estamos enfrascados
Todo el rato
En hacerlo todo
En el mismo componente
Y no
Lo podemos sacar aquí
A otro componente
Vale
Igual aquí
Podremos intentar
Poner lo del volumen
El audio ref
El audio ref
A ver
El audio ref
¿Cómo le cambiamos aquí?
Audio
Audio
Claro
Ah, claro
El problema es
Que el audio ref
Lo tenemos a este nivel
Claro
Es que el audio ref
Bueno, a ver
No pasa nada
El problema está aquí
Podríamos hacer un estado global también
Podría
A ver
Tiene sentido
Tener aquí
Volume
Volume
100
¿Vale?
Set Volume
Y aquí lo hacemos
Volume
Set Volume
No sé qué
No sé cuánto
Tiene sentido
Porque al final
A ver
Un momento
Vamos a poner la primera
Vamos a bajar esto
Vale
Tiene sentido
Porque al final
Quién sabe
Esto al final
Lo podemos cambiar
De más de un sitio
Y nos lo quitamos
Y nos olvidamos un poco
Del componente
Y todo esto
Así que ponemos aquí
El Volume
Control
¿Vale?
Le pasamos esto
Vamos a poner
La referencia del audio
No sé si es necesario
La referencia del audio
Creo que no
¿Vale?
Porque al final
Lo que podemos hacer aquí
Es que cuando cambie
El volumen
¿Vale?
New Volume
Volume Value
¿Vale?
Esto
Bueno, voy a probar
¿Vale?
A ver cómo
Set Volume
Y esto
Vamos a poner aquí
Un Deep
Que esto tiene que ser
Un Flex
Y vamos a ponerlo
Justify Center
Gap X2
Esto lo ponemos
Aquí dentro
¿Vale?
Y aquí es donde
Vamos a necesitar
Vamos a poner
Use Player Store
State
State.
Music
¿Cómo lo hemos puesto?
Volume
Volume
¿Vale?
Volume
Y Set Value
Claro, esto normalmente
State.Volume
Esto realmente
Para no crear siempre
El mismo objeto
Teníamos que hacer algo así
Pero bueno
Set Volume
Y Set Volume
¿Vale?
Vale
Entonces
Ahora que tenemos esto
Que es lo único que necesitamos aquí
Aquí
Si el Volume
Es menor
De
0.1
Bueno es que no sé
0.1
Volume Silence
¿Vale?
Y si no
Vamos a poner
A ver
Vamos a poner una ternaria
Es que estaba pensando ya
En cómo lo vamos a hacer
Más adelante
¿Vale?
Pero lo voy a hacer
Con una ternaria
Que tiene sentido
¿Vale?
Entonces
Al menos así
Ya tendíamos aquí
Los dos iconitos
¿Vale?
Ahí se ve el iconito
Y si le bajo
¿Vale?
Veis que se ve
Bueno, no se ve una mierda
Os estoy engañando
Que os he dicho
¿Veis que se ve?
No se ve
Mentira
No se ve
Ahora sé que
Ah, no
No se ve
Porque
Tenemos que ponerle aquí
Que el color
Que tiene que tomar
Fill
Igual
Current
Color
¿Vale?
El color actual
Del texto
Y ahora sí
¿Vale?
Vale
Esto lo podríamos llevar
Más allá
Podríamos tener
Todos los iconos
Que queremos
¿Vale?
Y lo podríamos hacer
Correctamente
Pero al menos
Ya tendríamos aquí
Esto así
¿Vale?
Ya lo tenemos aquí
¿Vale?
Entonces
Ahora
Me tengo que asegurar
Ahora sí
Me tengo que asegurar
Ojo, cuidado
Que tenemos que
Actualizar el volumen
O sea
Cuando aquí ponemos
Set Volume
Este sería el Volume Value
Ah, pues eso no estaba bien
Lo que he hecho ahí
No estaba bien del todo
A ver ahora
Ah, vale
Ahora sí
No sé
Set Volume
El tema es
Vale
Cuando hacemos el Set Volume
Esto se vuelve a renderizar
Este volumen
No necesitamos ponerlo aquí
O sea
Este volumen
En realidad
No lo tenemos que poner aquí
Sino que aquí
Tendríamos que poner
El Volume
Y este Volume
Es importante
Porque es el que utilizaríamos
Por un lado
Aquí
Y también
También
Tendríamos que tener
Este es el rollo
De
De trabajar con el DOM
Esto lo podríamos arreglar
Grapeándolo todo
En un componente
Pero bueno
Claro
Cada vez que cambiamos
El volumen
Tenemos que cambiar
El volumen
De el audio
¿Vale?
Punto Volume
Punto
Y esto al final
Por desgracia
Lo tenemos que hacer
Un poquito así
Volume is not defined
Volume is not defined
¿Por qué no me gusta este?
Espérate
Player
Que no está definido
Este Volume
Ahí
Aquí me he equivocado
¿Vale?
Volume
Vale
Esto por aquí
Vale
A ver ahora
Ops
¿Me lo he cargado?
Espérate
Me lo he cargado
Algo roto
Hostia
Vale
Failure to set
The Volume property
On HTML Media Element
Porque está fuera del rango
O sea que
El volumen
Ah
Porque este
Que he puesto 100
Esto debería ser 1
¿Vale?
He puesto 100
Y no es un valor válido
¿Vale?
Vale
Todavía sigue petando
Algo no he hecho
Todavía bien del todo
Vamos a ver
¿Qué le pasa?
Vale
Aquí lo que dice
Set Volume is not defined
Set Volume is not defined
Set Volume
Ah
Joder
La madre que me parió dos veces
La madre que me parió dos veces
Claro
Es que
Es que he quitado cosas
Que se necesitan
Vale
Ahora sí que parece
Vamos a ver
Vale
Perfecto
Ya lo tenemos
¿Vale?
Ya lo tenemos
¿Qué os parece?
No
No hay que dividir entre 100
Ya lo he hecho
Lo de dividir entre 100
Lo hago aquí
Antes justamente de guardarlo
¿Vale?
Pero lo importante
Es que la obtenemos
Y una cosa que está muy chula
Es que claro
Una vez que tienes este
Volume silence
Por ejemplo aquí
Ahora ya lo que puedes hacer
Highland click
O sea
Lo que puedes hacer aquí
Es volume 0
Handle click silence
No
Volume
Y handle click silence
A ver como lo hace Spotify
O sea
Cuando tú estás aquí
Y le damos un click
¿Ves?
Hostia
Se guarda la anterior
¿Vale?
Pues vamos a poner
Previous volume
Ref
Madre mía
Madre mía
Lo que voy a hacer aquí
Madre mía
Madre mía
Lo que voy a hacer aquí
A ver
Vamos a hacer
Vamos a hacer
Volume
¿Qué es lo que voy a hacer?
Como podéis ver
Lo que está haciendo aquí
Gente
¿Todo esto se puede hacer
Con solo Python?
Sí
Sí
Se puede hacer con Python
Venga
Empieza
Empieza
Hacer un Spotify
Con Python
O sea
Madre mía
El otro día
Me preguntó alguien
Por Reflex
Me dijo
Ostras
¿Has visto Reflex y tal?
Y digo
Sí
Y Reflex
Es como un framework
De Python
Que tiene muy buena pinta
O sea
Lo que pasa es que
La gente se vuelve un poco loca
Con algunas cosas
Reflex
Tiene muy muy buena pinta
Pero lo que la gente no sabe
Es que Reflex
Por debajo
En realidad
Está utilizando Next.js
Lo cual es bastante impresionante
¿No?
Pero en realidad
Reflex
Por detrás
Utiliza Next.js
Y utiliza React
Y o sea
Utiliza React
Que tiene todo
Tiene Next.js
Por debajo
A ver
Es interesante
La verdad
O sea
Está bastante interesante
Pero que al final
Todo te lo compila
En Next.js
Es una cosa un poco
Polémica
La verdad
Polémica
Pero bueno
Yo la verdad
Es que este tipo de cosas
Sí que me parece interesante
Para una persona
Que no quiera aprender
O no sepa nunca
O no vaya nunca a aprender
JavaScript
Y quiera hacer algún tipo
De página
Pero
Pero un Spotify
No le veo sentido
Spotify seguramente
Utilizaría Next.js
Directamente
Utilizaría JavaScript
Directamente
Porque este tipo de cosas
Que al final
Lo que hacen
Es compilar
A JavaScript
Pues no
No lo van a utilizar
O sea
No
Pero bueno
Que se podría lograr
Si al final
Haciendo algún tipo
De transpilación
Que realmente
Todo el código que haces
Lo hace en JavaScript
Y CSS
Pues al final
Lo podrías conseguir
¿Perderías rendimiento
Por trabajar con otras cosas
Por debajo?
Por supuesto
No solo rendimiento
Sino que muchas veces
Oportunidades
Y que
Optimizaciones
Que se quedan por el medio
Obviamente
Claro
Normal
No pasa nada
¿Para hacerlo
App de escritorio
Lo hacen llevándose
Lo mismo en la web?
Sí
Lo hacen
¿Cuándo con COBOL?
También
Con COBOL
Bueno
Vamos a continuar
Que esto está
Mira
Hay una cosa
Una funcionalidad
Que es muy tonta
Pero muy interesante
De Spotify
Que cuando
En el volumen
Tú le das
¿Ves?
Te lo deja en silenciar
O no silenciar
¿Vale?
¿Ves que hace esto?
Está muy chulo
Eso es bastante fácil
Lo vamos a añadir
En un momentito
Y
Entonces ahora
Haremos esta parte de aquí
¿Vale?
Lo de la canción
Que está muy chulo
Lo de hacer lo de la canción
Entonces
Lo que vamos a hacer es
Handle click
Silence
¿Vale?
¿Y qué hacemos?
Que cuando silenciamos
Lo que hacemos
Es poner el volumen
Anterior
O sea
Cuando le damos
Al de silenciar
Que es este
Con click
Vamos a poner
El volumen
Que teníamos antes
Y cuando le damos
Al del volumen
Lo que vamos a hacer
Es silenciar
Pero antes
Vamos a guardar
El valor anterior
Que teníamos
Del volumen
¿Vale?
Y lo ponemos a cero
Y entonces esto ya
Tendríamos la
La cosa
A ver
Si vamos aquí
No funciona
No funciona
Porque se me ha olvidado
El handle click aquí
On click
Handle click
Volume
De hecho
Esto no es del todo
Correcto
No me gusta mucho
Lo que he hecho
Porque esto tendría
Que estar en un botón
Entonces vamos a poner
El botón aquí
Botón
Botón
Ta ta ta
Vamos a poner aquí
En un on click
Vamos a poner
Handle volume
Solo
Y lo que vamos a hacer
Aquí directamente
Es que si el volumen
Vamos a poner
Aquí
Is volume silenced
Vamos a preguntar
Volume 01
Entonces
Si el volumen
Está silenciado
Entonces
Hacemos una cosa
Y si no
Pues hacemos otra
Entonces
Si el volumen
Está silenciado
Hacemos esto
Y si no está silenciado
Hacemos esto
Y con esto
Además
Al hacer este cálculo
Aquí
Está muy bien
Porque lo podemos poner aquí
Esto lo ponemos
En un botoncito
Y peta
Porque esto es
Handle clip volume
Esto lo quitamos
Esto tampoco lo necesitamos
Esto lo ponemos aquí
Guardamos
Oh
Oh
Cambia el icono
Pero no cambia esto
Eso es porque
Claro
Es que esto
Esto está complicado aquí
No sé si esto funcionará
No
Ah
Si
Si que puede funcionar
Lo que pasa es que
Hay que ponerlo en una red
Ya pero veis
Ahora no funciona
De forma nativa
Esto es un tema
Polémico
Esto es un tema polémico
Porque
Claro
Esto es un tema polémico
Me voy a quedar con las ganas
De hacerlo
Porque esto es un tema polémico
El tema que está pasando aquí
¿Veis que ahora no funciona
De forma nativa?
Esto es porque
No funciona
Porque ahora
Lo que está
Entendiendo
Es que estás controlando
Tú el estado
Y no lo estás haciendo
De forma interna
Entonces tendríamos que cambiar
El funcionamiento
Para que esto funcione
Es un poco rollo
La verdad
Entonces por ahora
Lo voy a dejar
Y lo revisaré
A ver cómo lo podemos hacer
Entonces para dejar
Que esto funcione
Y nada
Esto pues mira
No queda visualmente bien
Pero al menos
Para que lo tengamos
Pero al menos
Que tengamos el icono
De las dos formas
Y vamos a hacer
La reproducción de la música
Que está bastante interesante
Pero no tienes ya
El volumen seteando
Cada vez que haces el change
Solo tienes que multiplicarlo
Por 100
Ah claro
Igual puede ser eso
Claro
Tienes razón
O sea
Igual es el value
Que
Tienes razón
Tienes razón
Que igual es esto
Tienes razón
Igual la he liado
O sea
Igual me he equivocado
Y es por esto
Igual tienes razón
O sea
Puede ser
Puede ser
Puede ser
Esto tiene que ser un array
Tienes razón
Tienes razón
Amigo
Tienes razón
Tienes razón
Tienes razón
Tienes razón
Muy bien
Muy bien
Tenías razón
Tenías razón
A ver
Vamos a ver si funciona
Perdón
Menos mal que os tengo
Para lamerlo
Para lamerlo amigos
Para lamerlo está esto
Para lamerlo
Vale a ver una cosa
Vale
Vale
He visto un detallito
Simplemente un detallito
Y ya
Class name
Opacity
70
Hover
Opacity
100
Y le ponemos aquí
Un transition
Y todos felices
Y vamos a hacer
El song control
Vale
Vamos a reproducir música
Mientras
Y vamos con el song control
Song control
Vale
Song control
¿Qué vamos a hacer
Con el song control?
Pues básicamente
Lo mismo
Lo que pasa
Es que aquí
Me voy a pasarle el audio
Para tenerlo
Por ahí
Le vamos a pasar
La referencia
Directamente
Y ya está
Player
No sé qué
Supongo que a lo mejor
El chico que me dice
Guárdalo en estado
Para que lo guarde
En estado global
Básicamente para lo que estoy haciendo
Que lo estoy pasando por props
Y a lo mejor
No pasarle la referencia
Igual tiene sentido
Igual puede ser
Pero
Es que ahora mismo
No me apetece
Tiene que guardarlo
Estate
Y todo esto
Pero puede ser
A lo mejor tenía razón
Y tenía sentido
Ya os digo que
No me cuesta
Reconocer
Que tenéis razón
A ver
Vamos a ver
Aquí le estamos pasando
Este no lo necesito
En el volumen
Este tampoco lo necesito
En el export player
No sé qué
Sound control
Vale
En el sound control
Una cosa
Buah
Este es muy divertido
Este es muy divertido
Porque hay que formatear
Este está muy chulo
Lo primero que se me ocurre
Es que vamos a necesitar
Un current time
Vale
Vamos a hacer ahora
Os voy a enseñar
Lo que vamos a hacer
Vamos a hacer
Esta parte de aquí
Vale
Veis aquí
Esta parte de aquí abajo
Veis que aquí aparece
Un contador
Aquí pone
La duración completa
Y además
Tú le das aquí
¿No?
Y va saltando
Claro
Que está interesante
Y además
Mira también puedes hacer esto
Que está bastante chulo
Entonces
Lo que vamos a hacer
Es tener el current time
Porque aquí
Vamos a tener que ir enseñando
Cuál es el tiempo actual
Y esto es bastante interesante
Porque
Si no lo sabías
El elemento del audio
Tiene un evento
De cuando se actualiza
El tiempo de reproducción
Que es el que vamos a tener que escuchar
Por ejemplo
Aquí vamos a tener que poner
Audio current
Punto
Add event listener
¿Vale?
Y vamos a escuchar
El time update
Y cada vez
Que se esté
Actualizando el tiempo
Pues hacemos
Handle time update
Y vamos a limpiar
Este efecto
Aquí
Audio
Punto
Current
Punto
Remove
Event listener
Time update
¿Vale?
Y handle
Time update
Este handle time update
Lo podemos poner aquí abajo
Handle
Time update
Y básicamente lo que hacemos es
Set current time
Y aquí
Audio punto
Current punto
Current time
¿Vale?
Cada vez que va cambiando
El time update
Vamos a sincronizar el estado
Para saber en qué punto
Se encuentra
¿Vale?
Handle time update
Set current time
¿Vale?
Lo ponemos por aquí
Perfecto
Ahora
Vamos a renderizar
La barra
Y todo esto
Vamos a poner
Deep
Y dentro del deep
Vamos a necesitar aquí
Un span
Que vamos a poner
0, 0, 0
Esto por ahora
Aquí otra
Que será la duración total
0, 0, 0
Y aquí en medio
Tenemos que poner el slider
Vamos a poner el mismo slider
Que tenemos en el volume control este
Aunque le vamos a tener que cambiar
Algunas cosas
¿Vale?
Pero lo ponemos aquí
¿Vale?
Y aquí viene el percal
A ver
Aquí viene el percal
En diferentes cosas
¿No?
Por ejemplo
El default value
El default value
No lo necesitamos
Porque no sabemos
¿Cuál es el valor?
O sea
Bueno
Default value
Debería ser 0
Pero lo importante
Es el valor
Y el valor
Siempre debería ser
El current time
O sea
El tiempo actual
Porque
La flecha
O sea
El progreso
Se va actualizando
Si te fijas
¿Ves que va avanzando?
Eso es porque
Vamos a hacer
Que el current time
Que es el tiempo
Que nos devuelve el audio
Que además
Nos lo hace
En segundos
¿Vale?
Este current time
Nos va a decir
148
Que van a ser segundos
Que tendríamos que transformar
A 228
¿Vale?
O sea
Nosotros vamos a tener que hacer
Esta transformación
Pero lo que vamos a decirles
Es
Vale
El mínimo
Es 0
Y el máximo
Es
El máximo
Va a ser
El audio
Current
Duration
La duración
Completa
O sea
La duración
De la canción
Que a lo mejor son
300 segundos
Sería el valor máximo
El mínimo
0
De 0
A 300
¿Vale?
El class name este
No tiene mucho sentido
Porque me imagino
Que será mucho más grande
Vamos a ponerle 500
Para que pille espacio
Y cuando hacemos
El on value change este
Lo que vamos a hacer
Audio.current.currenttime
Y actualizamos con el valor
Que aquí
Pues a lo mejor
Si le damos click
En no sé qué
Pues 32
Entonces le cambiamos el valor
El current time
A 32
Cuando cambie el current time
Justamente pasará
A este
Atmen listener
Y ya actualizará
El estado
¿Vale?
No tenemos que actualizar
El estado nosotros
Sino que
Solo tenemos
Una fuente de la verdad
De donde actualizamos
El estado
Que va a ser
Con el handle time
Ahora
Lo complicado
Bueno complicado no
Pero ahora
No complicado
Pero si lo rebuscado
Porque si yo aquí
¿Vale?
Si yo aquí
Le digo
Ponme el
El current time
¿Vale?
A ver
Voy a recuperar
La duración
De audio
Current duration 0
¿Vale?
Y aquí le pongo
La duración
Vais a ver
Que no queda bien del todo
Vamos a ver esto
¿Vale?
¿Vale?
¿Por qué no sale nada?
Porque no estoy utilizando
El componente
Pero
No tengan miedo
Que lo vamos a utilizar
Aquí
¿Vale?
A ver cómo sale esto
Use state is not defined
No estamos utilizando
No estamos utilizando un
Use state
En ningún sitio
Dios mío
Sin estado
Ni nada
¿Vale?
¿Y por qué ahora
No sale tampoco nada?
Reading current
¿Vale?
Porque no le estamos
Pasando el audio
¿Vale?
Entonces aquí
Le vamos a pasar el audio
Que esto sea el audio
Rep
Y ya
¿Vale?
¿Vale?
Y vale
Y este
El problema
Obviamente
Es que esto
Tendría que ser
Flex call
Más o menos
Item center
A ver
Item center
Eso otro
¿Vale?
Y aquí además
El sound control
Que hemos puesto aquí
Los spans
Esto se
Flex
Flex
No
Esto está bien
¿No?
No
Esto está bien
No
Esto
Esto debería funcionar
Ay no
Esto es el volumen
Vale
Esto es el volumen
Perdón
Claro
Esto debería estar aquí
Vale
Vale
Ya decía yo
Que digo
Esto debería funcionar
Vale
Gap x
5
Menos
2
3
Vale
Pero claro
Ahí está el problema
¿No?
El problema es que
El
El número
Que nos está dando
No tiene mucho sentido
O sea
Es
Es como muy raro
La duración es
177,36
Estos son
177 segundos
Y esto es
La reproducción
Es 1,6 segundos
Y esto es lo que
Tenemos que transformar
¿Vale?
Entonces
Vamos a ver
Unas cuantas cositas
Aquí
¿Ves?
Me faltaría
Los siguientes
Y tal
Pero bueno
Vamos
Chino chano
¿Vale?
Chino chano
Primero
Text
XS
Y aquí
Vamos a ponerle
Opacidad
50
Vamos a ver
Cómo se ve esto
¿Vale?
Tiene buena pinta
Esto se pone
No
Vale
Pues esto
Me lo traigo aquí
¿Vale?
Y ya al menos esto
Lo tenemos
Ahora vamos a formatear
El numerito
¿Vale?
Vamos a formatear el numerito
Más o menos se parece
Igual le falta
Un poquito de separación
De la parte de arriba
A ver
Tu tu tu tu tu
Esta parte
Esta parte
A ver
Esto es
Esto soy yo
Que no sé por qué
Quiero hacer estas cosas
O sea
No sé por qué
Quiero hacer que quede
Más parecido
Ah no
Esto no va aquí
Esto va
Ah
Son control
Vale
Aquí
Pero es que me hace ilusión
Que se parezca
Un poquito más
Vale
Igual nos falta un poco
De separación
En el
En el player
Porque veis ahí
Que hay un hueco
Bastante grande
Y nosotros no lo tenemos
¿Veis?
Que está muy pegado
Luego lo arreglamos
No pasa nada
Luego lo arreglamos
El tema es
Vamos a formatear
Formatear
Formatear
Y le pasamos aquí
El tiempo
Vale
Para formatear
El tiempo
Aquí hay unas cuantas
Cosas interesantes
Primero que si es nul
Vamos a devolver
0 0
Básicamente por si
Está empezando
O el audio todavía
No ha arrancado
O lo que sea
Pues le ponemos 0 0
Los segundos
Vamos a tener que hacer
Math floor
Ya está
Que hack of pilot
Sin la hostia
Vale
¿Por qué hay que hacer esto?
Esto es muy interesante
O sea
Los segundos
Esto es un
Esto es un poco matemático
¿Vale?
Pero el tema
Hola
¿Qué tal?
W more
No deberías usar
El dependencias
Del use effect
No sé si es una pregunta
Es una afirmación
Pero sí
Sí y no
Es interesante
O sea
Sí
Pero la verdad
Es que
React
En este caso
Es raro
Porque
Recomienda no hacerlo
O sea
Recomienda no poner dependencias
Entonces funcionaría
De las dos formas
No habría ningún problema
Pero es verdad
Es verdad
O sea
React
Y Dan Abramov
Recomienda esto
Pero sí
Tienes razón
Yo creo que sería mejor
Hacerlo así directamente
Y que eso se escuche una vez
Y ya está
Pero ¿Qué pasa?
Porque esto es correcto
Porque lo que pasa
Es que cada vez que cambie
Pues nada
Se limpiará el evento
Y se volverá a crear
Y tal
Y decían que era como
Como una buena práctica
Porque no tiene un coste
Muy importante
Que yo creo
No sé
Que si te lo puedes evitar mejor
Y porque al final
Lo que estás haciendo
Es limpiar constantemente
El evento
Y no utilizar siempre el mismo
Pero de verdad
Os lo juro
Que lo he llegado a ver
Pero bueno
Tiene sentido que hagamos esto
Y ya está
Vale
Ahora me habéis roto el
Ah sí esto
Mira
Esto es un trucazo
¿Vale?
Porque por ejemplo
Imaginad que algo dura
110 segundos
Esto es un truco de la vida
El formatear el tiempo
Imaginad que tenemos segundos
Tenemos 80
Claro
Aquí queremos hacer
Un minuto
20 segundos
Pero ¿Cómo consigo
¿Cómo consigues
Sacar los segundos
De 80?
Pues para eso
Es que tienes esto
Porque al hacer esto
Tú lo que le dices es
80 es not a function
Ah bueno
Porque esto es el
Esto es el result
¿Vale?
Vale
Lo que le estamos diciendo
¿Ves?
Esto da 20
Porque lo que estamos haciendo aquí
Es quedarnos con el módulo
El módulo
Es el resto de la división
Entonces
Si tú divides
80 entre 60
¿Qué es lo que pasa?
80 entre 60
Esto sería 1
Pero cuánto de
Si hiciésemos la
O sea
Si lo hiciésemos sin decimales
Imagínate que lo hacemos sin decimales
¿No?
Por lo que estaríamos haciendo aquí
Es que 80 entre 60
El divisor
Más cercano
Sería 1
Pero el resto
Sería 20
¿Sabes?
Entonces esto
Sé que es un truco matemático
Pero esto
Funciona siempre
Súper bien
Por ejemplo
Si tienes 100
Debería dar 40
¿Ves?
Si damos 120
Debería ser 0
Porque el 2
Sí que dividiría
Entre 60
Perfectamente
Luego
130
10
Tendríamos el 2
Y el resto sería 10
Esto es el
Truco del almendruco
Y lo mismo
Claro
Ahora que ya tendríamos
Esto con los segundos
Lo mismo
Podríamos hacer con los minutos
Lo que pasa es que
Obviamente sería diferente
¿Qué es lo que tendríamos que hacer?
Si estos serían los segundos
¿No?
Si estos serían los segundos
Voy a poner aquí una S
¿Vale?
Si esto sería
Duration
Vamos a poner Duration
Si esto es Duration
Pues con los minutos
Lo que necesitamos es hacer
La división
Hacemos un math floor
Porque no nos interesa
Los decimales
Y lo único que tenemos que hacer
Es la división
Y así
Ya lo tendríamos
Esta sería formatearlo
Y habéis aprendido
A formatear el tiempo
Y ya está
¿Vale?
Y ya tendríamos
Minutes
Hacemos minutos
Por un lado
Segundos
Por otro
Y me ha dejado fatal
¿Por qué?
¿Por qué?
¿Por qué?
Si lo tenemos aquí
Minutes
Dice
No puede acceder
Antes de la inicialización
Pero si no estoy inicializando
A ver
¿Qué se me ha escapado aquí?
Ah
Esto soy yo
Porque
Porque aquí va un consuelo
¿Vale?
Y ya está
Lo tendríamos así
Lo tendríamos así
Lo tendríamos así
El único
Vale
El 0 también lo tendríamos
Vale
Pues ya está
Con esto ya tendríamos el formateo
Con esto ya tendríamos el formateo
¿Qué?
¿Os sabíais este truco?
¿Os sabíais este truco?
Si es menos de 60
Pues no pasa nada
¿No?
Porque al final
Tendríamos lo mismo
El más cercano sería 0
Y el resto
¿No?
Tendríamos el resto
Y ya está
Sería 0, algo
¿No?
Por lo tanto
No habría ningún problema
Y ahora veremos el resto
¿No?
Ahora veremos
Cómo hacemos
Lo demás
Vamos a poner esto por aquí
Tu tu tu
El time
Lo ponemos aquí
Time
Time
Time
Y ahora veremos
Que hay algún problema
¿Vale?
Porque los segundos
Tendremos de un solo dígito
Y lo arreglaremos
¿Vale?
Formatearemos
Calma
Pueblo
Calma
Cálmense
Cálmense
Que ya sé
Que os ponéis ahí
No
Pero esto
Pero cómo harías esto
Que no sé qué
Que no sé cuánto
Pero te he olvidado
No me he olvidado
Pero las cosas
O sea
Hay que hacerlas paso a paso
No tiene sentido
Si todavía no estoy devolviendo
Ni siquiera he visto si funciona
¿Vale?
O sea que vamos a ver
Si esto funciona
Vale
Duración
Cero
Dice si tiempo es nul
Ah claro
Tiempo es nul
Pero nunca es nul
Porque siempre le estamos pasando algo
¿No?
O sea el format time este
Ah no, no
Es que no estamos formateando todavía
Lo que tenemos que hacer
El current time este
Formatear el tiempo este
Y aquí el format time
Lo pasamos aquí también
¿Vale?
Y ya tendríamos
Cero
¿Vale?
Cero, cero
No está bien del todo
Pero ahora lo arreglamos
Lo importante
Es que si le damos aquí
Vale
Aquí tenemos bien la duración
Pero aquí fijaos
Que tenemos mal los segundos
Que queda un poco raro
Lo que para arreglar los segundos
Es bastante sencillo también
Lo que vamos a hacer aquí
Este seconds
Lo vamos a transformar
En un string
To string
Y una vez que tenemos el string
Le decimos
Path start
¿Qué tiene que ser?
Path start es un método
Que le podemos decir
¿Cuántos huecos?
O sea
¿Cuál es la longitud
Que tiene que tener
El string como mínimo?
En este caso
Ya hemos visto
Que podemos tener
Una longitud de uno
Pero queremos tener
Como mínimo dos
Y le podemos decir
¿Cuál es el carácter
Que lo tiene que rellenar?
En este caso
El cero
Lo que estamos haciendo
Es decirle
Bueno
Si por lo que sea
Tengo el uno
Me lo tienes que convertir
En cero uno
¿Vale?
Si tienes el once
Entonces me dejas el once
¿Por qué?
Porque te he dicho
Que las cadenas de texto
Tienen que ser
De dos espacios
Y por lo tanto
No hace falta
Que le pongas también
Un cero delante
Y con esto
Pues ya lo tendríamos
Y ahora sí que tenemos
Es así
Si le damos aquí
Vale
Bajamos el volumen
Ahí empieza
¿Vale?
No funciona
No funciona
El on change
No funciona
El on value change
Este
No funciona
O sea
Pero esto ¿Por qué?
¿Por qué?
¿Por qué?
El current time
Vale
El value es el current time
Claro
Si es el current time
Tendríamos que cambiar
Aquí el set current time
O sea
¿Tendríamos que hacerlo así?
¿Tendríamos que cambiar
Y también forzarlo?
¿Sabes?
O sea
¿Tendríamos que hacer las dos cosas?
A ver
No
Tampoco está funcionando
Value
Tenemos el current time
Y esto
O sea
Es raro ¿No?
Porque
On value change
Puede ser que el default
A ver
El default value
No va a ser muy útil
Pero
Set current time
Value current time
Current time
Esto se reiniciará
Esto
¿Debería?
Debería
Debería
A ver
A ver si esto
Claro
A lo mejor esto
Tampoco se está ejecutando
On value change
Yo creo que eso es
Correcto
No me lo está haciendo
A ver
A ver si se está ejecutando
Array 1
Ah
Vale
Ya está
Ya está
Es que
Mira que lo he dicho antes
Es que sería
New current time
Vale
Esto es un array
Esto es un array
Amigos
Entonces tenemos que sacar
Del array
Porque un range slider
Puede tener más de un punto
¿Vale?
Pero bueno
Nada que no arregle
Un console lock
Pues sigue sin ir
Sigue sin ir
Sigue sin ir
Os voy a leer
A ver que pasa
Falta una T
Coño de la madre
No me lo puedo creer
Coño de la madre
No me lo puedo creer
Que sea eso
La madre que me parió
No sé
Pero esto está
Esto está muy chulo
Esto está
Está bien
Está bien
Esto está
Mira
Mira
Esto está
Chulo
Esto está muy chulo
¿Por qué vibran los números?
Vale
Pues eso se puede arreglar
Bueno a ver
Tiene sentido ¿no?
O sea no pasa nada
Que vibre
No sé
A ver aquí
A ver
Aquí
También no
También le pasa
O sea
Macho
Estamos haciendo Spotify
O sea
Es exactamente lo mismo ¿no?
No
Veo que vibra
Porque cuando se mueve
Hacia arriba y hacia adelante
Le pasa lo mismo
O sea estamos haciendo lo mismo
Ah
Lo que pasa
Es esto ¿no?
Que dices
Ah
La barra no se mueve
Esto es muy interesante
Y seguramente lo vamos a poder arreglar
Hostia Space
Tío
Joder
Gracias otra vez por las suscripciones amigo
Muchas gracias
Muchas gracias
Muchas gracias
Muchas gracias
Gracias hombre
Gracias a Space de W
Porque gracias a eso
Me dan ganas de
De seguir haciendo estos proyectos tan chulos
Y que me parece espectacular lo que estamos haciendo
Y mirad
Que maravilla
Que estás aquí
Le das al play
Bajamos el volumen
¿Ves?
Lo bajamos
Me he pasado aquí con el
¿Ves?
Pero bajamos el volumen
Podemos navegar
Sigue ejecutándose
Vamos para atrás
Vamos para adelante
Vamos al inicio
Y todo se sigue ejecutando
Y esto me parece increíble
Me parece la hostia
Es que está tremendo
Bueno
No pasa nada
Vamos a arreglar
El tema de
De los números ¿no?
Que me comentáis que se mueve y tal
Vale
Puede ser
Gracias Space
Gracias a ti
Estamos haciendo estas cosas
Y a todos los que os suscribís también
Muchas gracias a todos
Os quiero un montón
Se ve un nan al empezar a reproducir
Bueno
Eso lo podemos arreglar
Porque seguramente
Es que al formatear
Al formatear
En algún momento
A ver
Al empezar a reproducir
En algún momento
Bueno
Y también hay como unos cuantos saltos
Y tal
Ah mira
El nan
De la duración
¿No?
Vale
Lo que vamos a poner aquí
Es que si no tenemos duración
No sé qué
Pues esto aquí
Y ya está
¿Vale?
Y
Ah
Este es el error típico
El error típico
Bueno
Ya está
Vale
Aunque
Estoy pensando
Que esto estaría bien
Que sí
Que se
O sea
Que esto está bien
Que siempre esté ahí
Esto está bien
Que siempre esté ahí
Y de hecho
De hecho
Una cosa
Se puede hacer de diferentes formas
Pero yo creo que lo mejor
Es como que le dejemos un espacio
¿No?
O sea
Como que siempre tenga un espacio
No sé qué sería correcto
A ver
Vamos a ver aquí
Estos serían
50 píxels
Más o menos
Entonces
Yo qué sé
Podemos hacer algo así
Un 12
Y esto lo mismo
Esto vamos a decirle
Que ocupa 12
Y
Vamos a poner esto para acá
Lo que pasa es que esto
Hay que alinearlo
A la derecha
¿Vale?
Y ya está
Vale
Esto es normal
Porque eso no lo hemos arreglado
Hay que darle al play
A alguna canción
Vale
Y esto también
Lo tendríamos que arreglar
¿Veis esta parte de aquí?
Que debería ocupar un espacio
También lo vamos a hacer
Que sea el espacio
Que justamente
Ocupaba
Si no lo acordamos
En el layout
Teníamos aquí
El
El assign menu
¿No?
Me lo he imaginado
Ah no
Es que está en el layout
Aquí
En el width
350
Bueno
Por ahora voy a poner así
Más que nada
Para que quede siempre alineado
Porque si no
Porque si no da estos saltos raros
Que no tienen mucho sentido
O sea
Por ejemplo
Ahora
¿Veis?
Ahora tiene más sentido
¿Ves?
Ahora no da el salto
Es verdad que igual
Debería estar un poquito más
A la izquierda
Porque claro
Este 350
Igual es un poco exagerado
¿No?
O sea
Claro
Está alineado
Pero está alineado
Con esto
No está alineado
Con lo otro
Y aquí
Lo alinear
Claro
Es que no está alineado
Tampoco
Bueno
Sí que parece
Que está alineado
A ver
Estos son 608
Y estos 1200
O sea
Sí que está alineado
Bueno
Lo miraremos
Para alinearlo bien
Pese a esto
¿Crees que el problema de esto?
O a lo mejor
Es que lo hacen menos
Claro
Es que a lo mejor
Yo me he pasado un poco
350 es un poco exagerado
Y a lo mejor
Ya con la separación
Con que
Claro
Haciendo que esto
Esto de aquí
Ocupe lo mismo de la derecha
Que seguramente
Será algo similar
O sea
Que esto
Ocupe lo mismo
Que lo que tienen aquí
Que seguramente será el caso
Entonces ya lo tendría
Si lo tendría centrado
Me imagino que irán por ahí
Los tiros
Pero bueno
Lo importante
No sé si he hecho demasiado
Sí
Yo creo que he hecho demasiado
Grande la barra también
Vamos a Sound Control
He hecho esta barra de 500
Creo que me he pasado un poco
Vamos a ponerla
Un poquito más pequeñita
¿Vale?
Y me parece
Que es
No sé si es un poquito
Más gordita
Me parece que sí
Pero bueno
Más o menos
Lo importante ahora
Es que esto
¿Vale?
Ya no da los saltos
Se queda fijo
Maravilloso
Lo pausamos
Podemos irnos aquí
Le damos al play
Nos vamos para acá
Vamos cambiando las canciones
Y chin chan
Chin chan
Vale
Vamos a arreglar el tema
De que al empezar
La canción
Aparece el none
¿Vale?
Que está la gente ahí
Nerviosa
Básicamente aquí
Lo que vamos a hacer
Es que si tenemos duration
Si tenemos la duración
Le ponemos esto
Y si no
Le ponemos el null
Y con esto al principio
Al menos hasta que no
¿Ves?
Hasta que no vea la duración
Pues no aparecerá
Y ya está
De hecho le podemos poner aquí
Cero
Cero
Cero
No sé lo que hace
Claro
Es que aquí no
Como no
Es que no sé
No está nunca en null
No sé cómo hacer
Que se ponga null esto
Porque ahora que está así
¿Sabes?
Si refresco o lo que sea
Ya siempre me aparece
Me aparece el reproductor
Entonces no sé
Cómo lo podríamos hacer
Que no reproduzca nada
No sé qué puedo hacer
No sé qué puedo hacer
Solo puedo pausar
Y darle y ya está
¿Vale?
Ah, pero mira
Fíjate qué bonito esto
¿Ves?
Que le das al play
Y entonces esto aparece así
Esto también lo tenemos nosotros
Fíjate que lo doy aquí
Y entonces
Está
Está
Lo que pasa es que la sincronización
Aquí va más allá
Porque cuando está
En play
Claro
Aparece ahí
Lo podemos hacer
También lo podemos hacer
Bueno
Borrar caché
Hostia, borrar caché
Pero es que tengo que iniciar sesión
Y tal
Eso es un poco rollo
Un poco rollo
La imagen que está a la izquierda
Del reproductor
Tiene mucho margen
Tiene mucho margen
Sí, tiene mucho margen
Porque yo
Lo he alineado mal
Lo he alineado a estos
Y como se ve ahí
En realidad
Está alineado más a la izquierda
Pero a ver
No seamos tampoco pejigueros
No seamos pejigueros
No seamos pejigueros ahora
Mira esto
¿Cuánto es?
De
80
O sea
El footer
O el footer
Footer
Vamos a ver si encontramos
Footer
Footer
Esto es de 80
Lo voy a dejar fijo
Hay de 80
Pero no así
Sino de pixels
¿Vale?
80 pixels
Y luego
Y luego
A ver
El current song
Que teníamos por aquí
Esto
Habíamos dicho
Que la imagen
Current song
Current song
Esto lo deberíamos separar
En diferentes archivos
Pero para ir rápido
Current song
¿Dónde está el current song?
¿Dónde he hecho este componente?
Aquí
Ah, es que lo he hecho pequeño
Vale, perdón
Aquí hay algún tip
¿Dónde está el margen?
No sé dónde está el margen
En algún sitio he puesto ese margen
Ese margen de la izquierda
Pero no lo encuentro
¿Dónde lo he puesto esto?
Este margen
Ese
Aquí
Una cosa que me gusta de Tailwind
Es poder buscar elementos
Con los classnames
Es un truco del amendruco
Ajá
Es por esto
Igual
Debería ser así
Un poquito
No
Debería ser de cero
O sea, así
No, tampoco exactamente
¿No?
Porque
O sea, debería ser algo
Algo sí que hay
Al menos en el otro
Hay un poquito
O sea, debería ser más bien
Así
Algo así
Que estoy viendo otro error
Es que hay muchas cosas
Que arreglar
Pero bueno
Pero bueno
Así sí que tiene pinta
¿No?
Uy
Ah, es que este no tiene canciones
Esta es la lista de reproducción
Todavía no tiene canciones
Y por eso pasa eso
Bueno
Ahora hacemos más cosicas
Mira, como ya lo sacan
Como ustedes
Al ser muy meticulosos
Después
Tanta tabla que le das
En los portafolios
Review
Bueno, ojalá
Ojalá eso quiera decir
Lo del scratch
Es cuando suena el adelantar
Y reobinar
Que se supone que no debería
Ah, es verdad
Vale, vale
Sí, tienes razón
¿No?
Que
Cuando hacemos esto
No debería hacer esto
No debería hacer eso
¿No?
Tenéis razón
No debería hacer eso
Hostia
Eso puede ser
Un poquito más complicado
Arreglarlo
¿Eh?
Se podría hacer
Pero va
¿Vas a implementar anuncios?
No, no, no
No voy a implementar anuncios
No voy a implementar anuncios
¿Que el nula aparece?
El nula aparece
No sé qué
No sé cuántos
No lo he visto
¿Cuándo?
Podemos hacer la tabla
¿No?
O sea, la tabla esta
Que tenemos por aquí
Esta tabla
Cuando tú entras a un sitio
Todas estas tablas
Esto es una tabla
De toda la vida
De HTML
Podríamos intentar
Al menos hacerla
A ver
No es muy difícil
¿La hacemos o qué?
Porque es que así
Nos queda
Nos queda
Nos queda
Ya
Hacer el degradado
Hacer la navegación
Y tendríamos
Bueno
Necesitaríamos
Arreglarlo también
Pero al menos
Poner la tabla
Con los sonidos
O sea, con todas las canciones
Para que queden ahí
Todas las canciones
Yo creo que eso quedaría
Re chulón
Entonces
Vamos a crear
Un componente
Que le vamos a llamar
Music Stable
¿Vale?
Music Stable
¿Y dónde vamos a dejar
El Music Stable?
Lo voy a hacer regulín
O sea
Que todo se puede hacer mejor
Llamando a la app
Y todo esto
Pero lo que voy a hacer
Por ahora
Para enseñar esto
Playlist
Id
Vamos a hacer esto aquí
¿Vale?
Y voy a hacer
Al menos la parte visual
Para que la podamos ver
Vamos a poner aquí
Music Stable
Punto Astro
¿Vale?
Entonces
Music Stable
Lo podemos hacer
De diferentes formas
Ya os digo
Que podemos hacerlo mejor
Peor
No sé qué
Tengo por ejemplo
Tenía por aquí
Los iconos
Ya me había
Me robé el tiempo
Porque si os fijáis
Aquí hay un icono
¿Vale?
Pues este
Me lo voy a importar
El del time
Time from
Barra icons
Barra time
¿Vale?
Y vamos a traernos
El type song
¿Vale?
Porque esto va a ser
Una lista de canciones
Lo que necesitamos estilar
Entonces
Barra lib
Barra data
¿Vale?
Export
Interface
Props
Props
Creo que no es necesario
Exportarla
Yo creo que poniendo
Props ya lo tendremos
Songs
Y esto va a ser
Un array de songs
¿Vale?
Y nos traemos
Las songs
De astro.props
Esto lo correcto
Lo correcto sería
Hacer otra cosa
Seguramente
Llamar una API
Y todo esto
Por ahora vamos a utilizar
Directamente
Vamos a utilizar
Lo que ya tenemos
Y luego ya nos preocuparemos
De hacerlo correctamente
Vamos a utilizar
El table auto
Que esto es la vida
Table layout auto
Que nos ayude a
Espaciar correctamente
Las cosas
El texto
En la izquierda
¿Vale?
Que como mínimo
Utilice todo el ancho
La división
Que sea
De dos
¿Vale?
Y
Y la división
No tiene división
Bueno, claro
Podemos
Bueno, vamos a
A ponerle una división
Divide
Por
Gray
No
Divide
Gray
Y le ponemos a poner
Algo así
¿Vale?
Tendríamos
La cabeza
Le voy a poner
La clase vacía
Por si luego
La tenemos que utilizar
Tbody
¿Vale?
Que divertido
El Tbody
Lo vamos a pasar
Bien
El Tbody
Esto, por cierto
Esto está bien
Utilizar
Tablas
Tiene sentido
En programación
O sea
Lo que pasa es que
Solo se tiene que utilizar
Cuando tengáis tablas
Y aquí
Tiene sentido
Que utilicéis tablas
Vale
Perfecto
Me encanta
Title
Bueno
Vamos a utilizar bien esto
Vamos a poner la almohadilla
Vamos a ponerlos todos
Vamos a poner la almohadilla
Vamos a ponerlo en español
Título
Artistas
Ah no
Album
Album
Fecha en la que se añadió
No creo que
No tenemos esta información
Vamos a poner aquí
El time
Y ya está
Ahora
Lo que pasa
Es que este TR
Para que
Tenga así un estilo
Vamos a poner
El color como gris
No sé si pone gris
O una opacidad
Vamos probando
¿Vale?
Y vamos a poner que el texto
Sea más pequeño
Esto por aquí
Esto ahora lo arreglamos
En un momento
Sí que parece que es
Un poco pequeño
No sé si pone aquí
Un font light
Para que sea como más
Y lo que sí que deberíamos poner
En cada uno
Bueno
Da igual
Lo dejamos así
Px4
No sé qué
No sé cuánto
Vale
Y en el body
Lo que vamos a hacer es
Simplemente
Songs.map
Song
Y
Vale
Vamos aquí
También con todas las
Vale
Bueno
No es
.track
Vamos a mirar el data
Cómo son las canciones
Tenemos la id
La imagen
O sea que necesitamos
Vale
Esto va a ser un poco complicado
Esto va a ser un poco complicado
No va a ser tan fácil
Como parece esto
Esto va a ser tan fácil
No va a ser tan fácil
A ver
¿Por qué?
Porque cada uno
Tenemos como pequeños
El más fácil es este
Que esto es index más uno
O sea que aquí sacamos
A ver
Esto entiendo que sería el índice
Más que la id
Así que aquí podemos poner
Index más uno
Este es fácil
Pero este
Aquí necesitamos tener
Como un div
Y otra vez repetir
Una cosa que ya hemos hecho antes
O sea
Tenemos que poner div
Con el picture
Y todo esto
No sé si sacarlo
De algún sitio
Porque seguramente
Nos quedará bien
Picture
Y esto tendría que ser un flex
Me imagino
Flex
Gap3
Picture
Aquí la imagen
Source
Song.cover
Eso
Cópiatelo
A ver qué estás haciendo ahí
Vale
Yo creo que esto
Podríamos ponerle picture
Song.cover
No
Esto es song.image
Vale
Song.image
Vale
Y debajo
Tendríamos
Por un lado
Tendríamos aquí
El título
Esto pondríamos
Song.title
Vale
Y aquí tendríamos otra vez
Un span
Song.artist
.join
Con la coma
No sé qué
Con la coma
El espacio
Y esto debería ser small
Pero bueno
Ya iremos viendo
Cómo queda
Lo que está claro
Es que esto
Tiene un flex
Y esto debería ser
Esto sí
Y esto
También tendría que tener
Un flex
Y que fuese
De columna
Vale
Uh uh uh
Bueno
Los demás son más fáciles
Al menos
Este es el más difícil
Aquí tendríamos
El nombre del álbum
Y aquí tendríamos
La duración
Vamos a ver
Cómo ha quedado todo esto
Ahora iremos apurando
Un poquito
Vale
Tenemos que utilizar
El componente
¿Dónde utilizamos
El componente?
Pues el componente
Esto lo quitamos
Y lo vamos a utilizar
Music
Stable
Music
Stable
Vale
Y le tenemos que pasar
Las canciones
Las canciones
Las vamos a sacar
De aquí
Mira ya tenemos aquí
Esto lo hicimos el otro día
Playlist songs
Bueno
Bueno
No está mal
No está mal
Vale
Vale
No está mal
A ver
No es exactamente igual
No es exactamente igual
Pero
Ya ha pintado
Pinta algo
Pinta algo
Ya ha pintado algo
Ya pinta algo
Y me gusta
Claro
Ese no tiene canciones
Bueno
No está mal
Bueno
Nos faltan muchas cosas
Nos falta el hover
Por ejemplo
Esto debería tener un hover
En algún sitio
Deberíamos hacer un hover group
Me entiendo
O no
O sea
Este header
No
Music Stable
En cada tr
Esto
Si no me equivoco
Debería ser
Hover
Bueno es que veo
Que me ha hecho
El font light
En demasiados sitios
Pero se parece
¿No?
El divider este
También debería ser
Más
Más pequeño
Que le he puesto dos
Y esto debería ser uno
No existe
El uno
Es este
Luego también le falta
Como un padding
Que no sé si esto
Funcionará aquí
No
Aquí no
No debería
O sea
Lo vamos a tener que poner
Más bien aquí
Esto tiene que envolver
Como no sé
Podemos ponerle section
Esto por aquí
Y esto por acá
Esto por aquí
Pam pum pum
Pam pam pam
Y class
Y le ponemos un padding
Aquí más
Más
No sé si es tan
Se supone que
Va alineado con esto
O sea que debería ser
6
Vale
Algo así
Título
Album
Es verdad que el título
Como que ocupa demasiado
Pero también puede ser
Y que no está alineado esto
Pero bueno
Poco a poco
Poco a poco
Aquí por ahora
Vamos a hacer el hover
Que tiene sentido
Vale
Vamos al tr
Hacemos el hover
Y cuando hacemos hover
Vamos a hacer el
Vg black
10
No
Es white
En realidad
Como más clarito
Me parece
Si es más clarito
Así que así
Y hacemos que esto sea rounded
Vale
Rounded
Porque no es rounded
Overflow hidden
Hola
¿Por qué no me está
Haciendo este rounded?
¿Sabes?
¿Por qué no me está
Redondeando esto?
¿Por qué no me está
Redondeando?
¿Es porque es una tabla?
¿Podría ser?
¿Por qué es una tabla?
¿Qué creéis?
¿Es porque es una tabla?
¿Quién me está haciendo esto?
¿Que no me lo está
Redondeando?
A ver
¿Qué creéis?
Td
Td
Td
No
Td no
Esto debería ser en el tr
El td
¿Qué le pasa al td?
Pero está bien el tr
¿Dónde está el td?
¿Qué me está diciendo el td?
Cosa de las tales
¿Se pones un div?
No
¿Con qué extensión mido la matrícula que no me ha llegado?
¿Para si has alineado?
Nada
Td class está vacía
Nada
La th que es tv vacía
Eso está bien
Pero el td tiene la esquina recta
Ah
Pero el td tiene la esquina recta
Pero no debería pasar nada
Pero no debería pasar nada
Sí, ya iremos arreglando
También
A ver, por ejemplo
El divider este
Le vamos a quitar un poquito más esto
¿Vale?
Luego
El tgt este
El problema que tiene esto
Esto es complicado
Porque realmente
La separación que hay entre uno y otro
Este no es muy fácil
Porque si aquí le ponemos
Cuatro
Me parece
¿Ves?
Que no funciona
Tampoco podemos hacer un bloque
Porque entonces lo rompemos
Y si hacemos que sea full
Tampoco
Esto es un poco más complicado
Porque cuando trabajamos con tablas
Se pone la cosa complicada
Eh
Eh
Eh
Eh
Eh
Eh
Eh
Eh
Eh
Eh
Eh
Eh
Eh
O sea
No se le puede poner un margen
Creo que tampoco se le puede poner un padding
Aquí en medio
¿Vale?
Para hacer la separación
Se puede
Pero no
No sé si
Debería
Es que las tablas son una mierda
No sé si tendría que hacer un TR vacío
Eh
Imagínate
Imagínate
Como para
Que esto tenga una separación
O sea
Solo se me ocurre esto ahora
Seguro que se puede hacer de otra forma
Pero
Pero es que con las tablas
En cuanto pones alguna cosilla ahí
Loca
Se vuelve
Se vuelve
Tarumba
Así que
Alguna cosa así
Se me ocurre al menos ahora
Para
Para hacer la separación
Vale
Ahora lo del rounded
No se usa en spam medida
Tienes el TH
Dentro del T-Body
El T-Body está mal
¿El TH está mal del T-Body?
Ah
Es verdad
Tienes razón
Pero
No debería pasar nada
Con esto
O sea
Esto debería funcionar exactamente igual
Más que nada
Porque es bastante tolerante
Este tipo de cosas
Quizás te es mejor en grid
No
No
Porque esto tiene sentido
Realmente que sea con una tabla
O sea
Tiene sentido
O sea
Que eso no es
Tienes el TH
Va eso arreglado
Transfer translate
No
Pero con translate
Ya lo hemos arreglado
Lo que me da rabia es el rounded
A ver
El rounded
Overflow hidden
Rounded
O sea
¿Cómo no voy a poder hacer esto?
Y esto no lo puedes envolver en un div
Ni nada
Esto no funciona así
¿Cómo no vamos a poder hacer esto?
No tiene sentido que no podamos hacer esto
A ver
Lo único que se me ocurre
A ver
Voy a probar un momento esto
Si hacemos esto
Y le decimos que el espacio
No
No sé cómo hacerlo
Y es que
A ver
Estoy seguro que Spotify
Porque alguien dirá
Pero si Spotify lo ha hecho
¿Cómo tú no lo haces?
Porque Spotify no está utilizando una tabla
Lo sabe Dios
Lo sabe Dios
Míralo
Ahí con sus dips
Y efectivamente
Ellos están utilizando
Display Grid
Pero me da un poco de rabia
Porque este es un caso de uso
Concreto
Donde utilizar tablas
Y claro
Deep
Deep
Deep
Deep
Y sí
Que tiene muchos
Arial roll y tal
Lo que tú quieras
Pero
A ver
Si no a las malas
Pues utilizaremos
Lo haremos así
A ver
Lo que ahora sería interesante
Sería el tema
De hacer que se reproduzca
¿No?
O sea que cuando le demos a la canción
Que se reproduzca aquí
Porque ahora mismo
Sí que es verdad
Que cuando le damos aquí
Se reproduce la canción
Pero cuando le damos aquí
Ni siquiera tenemos el play
Y no tenemos nada
Y aquí cuando entramos
Aquí tenemos el play
Y tenemos estos tres puntos
Que no sé ni para qué son
Entonces vamos a poner
El play grande ese
Ya me preocuparé un poco
De hacer el rounded
Que seguro que se puede hacer
De alguna forma
Puedes hacer tablas responsive
Se puede hacer de todo
Con las tablas
Lo complicado es decir
Para redondear los tebes
Tuve que usar
Borded Collapse Separate
Ajá
A ver
Vamos a probarlo
Para redondear
Dice que
Utilizando
Border
Border
Collapse
Separate
Collapse
Separate
Y border
Spacing
Cero
Ojo
A ver
No
Demasiado bonito
Para ser verdad
Demasiado bonito
Para ser verdad
Aunque
No es que
Está aquí
Está aquí
Está aquí
No no
Nada que no
Que no lo hace
Que no me gusta
Que no me gusta
El buen stack overflow
A ver
A ver que dice stack overflow
First child
La madre que lo parió
A ver
Esto lo puedo hacer
Esto lo podemos hacer
O sea
Podríamos
Aquí
Podríamos decir
Rounded
Rounded
Top
Left
No sé cómo es
Top
Left
TL
XL
¿Vale?
Rounded
Top
No
Top
No
Bottom
Left
XL
Que piratas
Tío
Que piratas
Que piratas
A ver
Vamos a poner otra cosa
Que esté demasiado
Este no necesitamos
Pero funcionar funciona
Funcionar funciona
Es muy pirata
Pero bueno
Tampoco me parece
Que no sea pirata
Por ejemplo
El hecho de utilizar
Dips
Para esto
La verdad
Bueno
Mira ya está
Ahí está
Ahí está
Muy bien
Transition
Duration
300
¿Vale?
Ya está
Mucho mejor
¿Vale?
Ahora para hacer esto
Todavía mejor
El title
Class
Text
Textwide
Text
Base
O LG
No sé
Es que esto tiene como
Es como un poquito más gordito
No sé
Vale
Pues al menos
Ahí lo tendríamos
Y la imagen
Que yo le he puesto a esto
Que sea rounded
Esto en realidad
Ni es rounded
Y esto
Son de 40 píxels
Que en realidad
Son
40 y algo
O sea que
Vamos a poner 41
¿Vale?
1 a 1
Y tal
O sea que sería
Algo más parecido a esto
Luego
Además
Esto
También tiene que tener
Como
Algo
Más fijo
Porque no ocupa
Tanto espacio
¿Vale?
Entonces ya empieza
Ahí a aparecerse
Todavía más
Yo creo que podemos bajar
Tampoco parece que
Vale
Ya teníamos un poquito mejor
La parte del
Techhead
Esta
Que yo la veo
Puesta
Un text gray
Pero yo no veo
A ver
4
Y este phone light
¿Por qué no me lo está pillando?
Esto puede ser que
No me lo esté pillando
Porque tenga que estar
Dentro de cada uno
Y no lo está
Ahora mejor
Ahora mejor
No me convence el color
O sea es como un gray
Un poco más diferente
Yo creo que este un poco mejor
Aunque no es exactamente light
Pero bueno
Ya es que eso es
Rizar mucho el rizo
¿Eh?
Me parece
Es muy rizar el rizo
Pero bueno
Ya empieza a quedar
Un poquito mejor
¿Vale?
¿Qué os parece?
¿Guay?
¿Bien?
¿Bien?
Vale
Pues esto empieza
A tener buena pinta
Voy a ponerle ahí
Un play grande
Ostras
Estoy pensando
Estoy pensando
Que tenemos
El
Tenemos un player
No un player
El play
Tenemos el carplay button
Estoy pensando
Ah claro
Pero es que esto
Tiene demasiado
Que lástima
Es que claro
Es que es exactamente
Es esto lo que necesitamos
Pero claro
A ver
Playlist
Play button
Claro es que ya tendríamos
La información
Pero a ver
En realidad
Si que lo podríamos utilizar
Que estoy pensando
Estoy pensando
Porque al final
Lo que cambia es
Como de grande es
Y esto utiliza exactamente
Lo mismo
O sea
Esto se supone
¿Dónde debería ir?
Esto va justo debajo
¿Vale?
Nos falta el degradado
Que eso lo haremos
¿Vale?
Tenemos el picture
Debajo del picture
Debajo de todo esto
Justo después de las canciones
Que eso también
Aquí que pone 50 canciones
Aquí deberíamos poner
Playlist songs
Punto length
¿Vale?
Lo de las 3 horas
Eso lo deberíamos calcular
Eso ya sería un poco más complicado
Pero
Aquí
Si ponemos esto
Oye
¿Por qué no me
¿Por qué no me lo pillas?
O sea
¿Por qué no me puedes importar
El componente amigo?
¿Por qué no me lo puedes importar?
Todos siendo felices
Ahí
Con imports
Pero no
Me tienes que hacer trabajar
Me tienes que
Ay
Vale
Obviamente
Este no es el botón
Que queremos
No queremos que
Se vea así
A ver
Lo único que necesitaríamos
Realmente
De alguna forma
Es hacer este botón
Más grande
¿No?
Y también
Que sea más grande
O sea
Tendríamos que pasarle
También un size
Vamos a poner que por defecto
Sea small
Para no romper la compatibilidad
Y vamos a tener
Que sea small
Y que sea grande
Entonces
Porque entiendo
Que es exactamente lo mismo
Además
Vamos a hacer aquí
Un hover
Vamos a hacer un hover
Con una escala
Que veo que es un poco
Lo que hace
Con un transition
Y que con el hover
El background
Sea un poquito
Más clarito
¿Vale?
Vale
Me he pasado con el scale
Tiene que ser un poquito
Más pequeño
Vale
105
Joder
Es que es demasiado grande
Es demasiado grande
A ver
Vamos a poner
1.0.2
Es que muy
Muy sutil
Es muy sutil
Vale
Es algo así
Yo creo que sí
Que tiene sentido
El 105
Lo que pasa es que
Vale
Pero veis que eso
También pasa aquí
¿Veis que hace ahí
Como el
Vale
Vale
Entonces aquí
Esto para hacerlo así
Lo que tenemos que hacer es
Que en realidad
Este envuelto
Porque obviamente
Aquí está pillando
Demasiada cosa
Pillamos esto por aquí
Esto por acá
La ID
La tenemos
La ID es que la tenemos
Es que esto es perfecto
Porque ya tengo la ID
¿Vale?
Ya esto empieza mejor
Lo que no funciona
Es el play
Porque no le hemos puesto
La directiva
Y le vamos a decir
Que cuando
Se cargue el cliente
Vale
Esto tiene buena pinta
O sea
Ya tenemos aquí el botón
Obviamente no es en la posición
Que queremos
De hecho
Este header
Creo que nos podría servir
Aquí esto
No
Porque me lo está poniendo
La conchinchina
¿Por qué me está poniendo
Esta la conchinchina?
Porque tenemos playlist
En el header
Header
Header
Este
Flex row
Pero esto tiene sentido
Que sea flex row
Sí que tiene sentido
Que sea flex row
A ver
Lo voy a hacer un poco pirata
Porque si no voy a estar ahí un rato
Pero lo correcto sería
Que empecemos otra vez
A hacer a lo mejor
Como una grilla ahí
Que tenga sentido
Pero lo vamos a alinear ahí
Vamos a
Tirarlo así
Que es un poquito
Como está
Se supone aquí
¿Vale?
Que está ahí como separado
¿Vale?
Ahora tenemos otra vez esto
Ya está funcionando
Esto correctamente
Debería
Verse aquí también
O sea
Habría que sincronizar más cosas
También lo haremos
Pero por ahora
Voy a hacer que sea un pelín más grande
Para hacer que sea un pelín más grande
Vamos a tener que cambiar
Diferentes cosas
Primero
Aquí vamos a ponerle
Size
Y vamos a poner Large
¿Vale?
Y este Size Large
Cuando llega aquí
Tienen que pasar cosas
Lo primero
Que aquí también
Le vamos a pasar el Size
¿Vale?
A los iconos
El Size
Podríamos hacer dos cosas
O pasarle el Size
O un ClassName
Creo que le voy a pasar un ClassName
ClassName
Vamos a hacer
¿Qué?
Const
Icon
ClassName
Vamos a hacer que
Si el Size
Es Small
Pues tal
¿Vale?
5
5
5
¿Vale?
5
5 ¿Cuánto es?
Porque no se tiene que romperle antes
5 es 20 píxels
Si entramos a los iconos
Si entramos a los iconos
Vamos a ver que es 16
Por lo tanto
No es el correcto
Para que no se rompa nada
Y que todo siga viéndose exactamente igual
Tenemos que utilizar el de 4
Así que
Vamos a poner
4
4
Y este
El de 8
Vamos a ver
Que me da la sensación que aquí también es un poquito más grande
Tampoco mucho más grande
Así que vamos a poner 6
Para no liarla
¿Vale?
Y vamos a pasarle aquí
ClassName
Pa pa pa
Hostia
Estoy pensando que esto
Igual no cuela
Este tipo de ClassName
Es que esto es un rollo de Tailwind
Bueno, igual sí que cuela
Lo vamos a dejar
Es que es un poco rollo de Tailwind
De que si no detecta
Que está utilizando el ClassName
Pero en este caso sí que lo va a detectar
Vamos a pasar aquí
ClassName
Y aquí también el ClassName
Esto normalmente los iconos
Es bastante recomendable
El hecho de
Poder pasarle el ClassName
Para hacer que sean más grandes
Más pequeños
Y hacerlos como quieras
¿Vale?
Ya lo tenemos ahí un poquito más grande
Me he pasado
Me he pasado porque
Es que es muy sutil
O sea
No es mucho más grande
Te quiero mucho, Midu
Estoy programando una Pokédex
Mientras tu programa
Siempre me inspiras
A seguir mejorando
Ahí está
Muchas gracias, amigos
Gracias
Te quiero mucho
Yo también te quiero un montón
También te quiero
¿Me puedes explicar la directiva
Que le diste al botón de Play?
Sí
Eso es que no has estado
En todo el directo
Y no viniste ayer
Lo que hemos hecho aquí
La directiva
Que le hemos pasado
En la IDE
Esto básicamente es
Porque por defecto
Astro
No carga
El JavaScript
De los componentes de React
Y una vez que
Si tú quieres que
Se funcione la interactividad
De ese componente
En el cliente
Le tenemos que decir
Cómo se tiene que comportar
En el cliente
Por defecto
No se comporta
En el cliente
O sea
Es estático
Y por lo tanto
No carga ese JavaScript
Ahora
Si quieres que tenga interactividad
Pues tenemos que decirle
Oye
En el cliente
Y aquí tienes diferentes estrategias
Pues le vamos a decir
Cuando se cargue el cliente
O sea
Cuando cargue estos recursos
Carga este componente
Pero también le puedes decir
Que lo cargue
Cuando no tiene nada
Otro que cargar
Cuando es visible
Este componente
Para una media query
En concreto
Cosas así
En este caso
Le hicimos client load
Y ahora sí
Ya tendríamos esto
Vale
Cosas que nos faltarían
Pues aquí hacer
Que detecte
Cuando
En cada canción
Podría detectar
Que realmente
Estamos reproduciendo
La canción
Y que también
O sea
Fíjate que aquí
Detecta
No solo esto
Que esto también
Esto también lo podemos hacer
Esto también lo podríamos hacer
Pero no solo detecta esto
Sino que detecta aquí
La canción
¿Veis que está en verde?
Esto también lo vamos a hacer
¿Vale?
Para que lo podamos hacer
También reproducir las canciones
Que al darle al play
O sea
Al darle a la canción
Se reproduzca
Darla aquí
¿No?
Que se reproduzca
Eso también lo haremos
Lo que pasa es que
Pues tiene unas cuantas cosas
Y esto también lo podríamos hacer
De hecho
Nos falta la navegación
Esta navegación
La haremos
Y haremos lo del color
Que también nos ha faltado
Lo del color
Pero
Hombre
Va pillando bastante
Buena pinta
Y además que se vaya
Reproduciendo la música
No está nada mal
Por ahora
Os dejo todo esto
Por aquí
El
AdCode
Of Spotify
Clone
La verdad es que ha quedado
De lujo
Muchas gracias a todos
Y a todas por pasaros
Os lo agradezco de infinito
Si os gusta este contenido
Darle cariño
Está muy bien
Hacer cursos desde cero
Pero hay que hacer
Proyectos prácticos
Y yo creo que esto
Joder
Ha quedado bastante bien
¿Podría salir por encima
De cómo se podrían replicar
Los tooltips?
Tendríamos que mirarlo
Pero hay un montón
De
Hay un montón
De pequeñas librerías
Y tal
A lo mejor se podría intentar
Incluso hacerlo
De alguna forma nativa
Para que no fuese
Para no tener que cargar
Una biblioteca
Pero bueno
Yo te doy cariño
Gracias Gaburra
Gracias
Muchas gracias
Gracias a todos
Por pasarlo
Gracias Dartiles
Y felicidades
Por esos
Dos pedazos de años
Por suscribirte
Te agradezco un montón
Tu apoyo
Eres muy crack
Y te quiero mucho
Gracias a todos
Borja
Pestanaca
Gracias Lord of Irons
A Mendoza
Space
Muchas gracias
Por regalar 20 subs
Bueno
Espero que os haya gustado
Porque hemos estado
Programando un montón
Que sepáis
Que tenéis
Disponible
Todo el código
De lo que hemos hecho
Por si lo queréis probar
Os vais aquí
Ahora os paso el repositorio
Spotify
Twitch Clone
Le podéis dejar una estrellita
Si queréis
Mira
Alguien ha hecho una pull request
Update
Readme
Mira
A ver que ha hecho este chico
Podéis empezar a hacer
Ah mira
Se ha trabajado aquí
Dios mío
Este proyecto está bajando
Muy bien
Muy bien
Podéis echarle un vistazo
Si veis algún fix y tal
A lo mejor
No lo mergeo
Y lo comento
Pero os daré créditos
De que lo habéis hecho
Vale
Pero así lo hacemos en directo
Para que la gente lo vea
Pero mira
Muchas gracias
Que pedazo de
Que pedazo de
Rimmis ha trabajado aquí
Bueno
Aquí tenéis todo el código
Disfrutadlo
Dejadle una estrellita
Y sobre todo
Pues nada
Comentadle a la gente
Lo bien que lo habéis pasado aquí
Todo lo que habéis aprendido
Y como os ha volado la cabeza
Ha quedado increíble o no
Es que estoy muy contento tío
Estoy muy contento
De lo que estamos haciendo
Sé que
A ver
Es que ahora cuando lo ves
Dice
Ah que tonto
Es que se ve muy sencillo
Y esto has tardado 4 horas
En hacerlo
Porque hemos tardado 4 horas
En hacerlo
Bueno
A lo mejor un poquito
Si 4 horas llevamos
Más o menos
4 horas desarrollando
Y la verdad es que si
Porque mira
Mira que bonito
Encima que tiene las animaciones
Le das play aquí
Puedes quitarle volumen
Puedes navegar
Mientras se reproduce la música
Puedes adelantar esto
Darle la pausa
Entonces entrar aquí
Darle el play aquí
Todo está sincronizado
Porque esto es programación web
Esto es desarrollo
Y esto es lo mejor
Así que muchas gracias a todos
Y nos vemos la semana que viene
¡Gracias!
¡Gracias!