The component should use a service to do all the computation. Make a request to the playlist link and parse the result to get a list of all videos as { title: string, url: string, thumbnail: string }.
The component should display a row of thumbnails that'll open the respective video on click (new tab!). Important to have feedback on hover and gap between thumbnails. The video title should be used as alt-text.
O componente deve usar um serviço para fazer toda a computação. Fazer uma requisição para o link da playlist e parsear o resultado para obter uma lista de todos os vídeos no formato { title: string, url: string, thumbnail: string }.
O componente deve mostrar uma linha de thumbnails que abrirá o vídeo respectivo ao clicar (numa nova guia!). É importante ter feedback quando o cursor é posicionado acima e espaçamentos entre as thumbnails. O título do vídeo deve ser usado como alt-text.
Task description
Should receive the carousel title as well as the playlist id (e.g.: https://www.youtube.com/playlist?list=**PL_OkSoJUiZ5XF04xKXTc1gtm_HcJw0JrE**) as
props. The title should be displayed just above the carousel and be an hyperlink to the playlist.The component should use a service to do all the computation. Make a request to the playlist link and parse the result to get a list of all videos as
{ title: string, url: string, thumbnail: string }.The component should display a row of thumbnails that'll open the respective video on click (new tab!). Important to have feedback on hover and gap between thumbnails. The video title should be used as
alt-text.Portuguese 🇧🇷
Deve receber o título do carrossel, além do id da playlist (por exemplo: https://www.youtube.com/playlist?list=**PL_OkSoJUiZ5XF04xKXTc1gtm_HcJw0JrE**) como
props. O título deve ser mostrado logo abaixo do carrossel e ser um hiperlink para a playlist.O componente deve usar um serviço para fazer toda a computação. Fazer uma requisição para o link da playlist e parsear o resultado para obter uma lista de todos os vídeos no formato
{ title: string, url: string, thumbnail: string }.O componente deve mostrar uma linha de thumbnails que abrirá o vídeo respectivo ao clicar (numa nova guia!). É importante ter feedback quando o cursor é posicionado acima e espaçamentos entre as thumbnails. O título do vídeo deve ser usado como
alt-text.References
Relevant/related links:
https://valor-software.com/ngx-bootstrap/#/components/carousel?tab=overview#multilist-single-offset
https://stackoverflow.com/questions/29881052/how-to-display-youtube-thumbnail-image-from-url-with-angularjs
https://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api/2068371#2068371
https://woosterwebdesign.com/responsive-youtube-player-with-playlist/
A thumbnail's href is: