https://granada-meta.gov.co/SiteAssets/GranadaMeta/assets/js/videoYoutube/youtube.js

1// Funcion auxiliar para obtener el playlistId de subidas
2function fetchYouTubeUploadsPlaylistId(channelId, apiKey, callback) {
3	let apiUrl = `https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${channelId}&key=${apiKey}`;
4	console.log('Solicitando playlistId de subidas desde:', apiUrl);
5
6	$.get(apiUrl, function (data) {
7		console.log('Datos del canal recibidos:', data);
8		if (data.items.length > 0) {
9			let uploadsPlaylistId = data.items[0].contentDetails.relatedPlaylists.uploads;
10			console.log('Playlist ID de subidas encontrado:', uploadsPlaylistId);
11			callback(uploadsPlaylistId);
12		} else {
13			console.error('No se encontr  el canal.');
14		}
15	}).fail(function (jqXHR, textStatus, errorThrown) {
16		console.error('Error al realizar la solicitud a la API:', textStatus, errorThrown);
17	});
18}
19
20// Funcion auxiliar para obtener los detalles del canal
21function fetchYouTubeChannelDetails(channelId, apiKey, callback) {
22	let apiUrl = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelId}&key=${apiKey}`;
23	console.log('Solicitando detalles del canal desde:', apiUrl);
24
25	$.get(apiUrl, function (data) {
26		console.log('Detalles del canal recibidos:', data);
27		if (data.items.length > 0) {
28			let channelDetails = data.items[0].statistics;
29			console.log('Detalles del canal encontrados:', channelDetails);
30			callback(channelDetails);
31		} else {
32			console.error('No se encontraron los detalles del canal.');
33		}
34	}).fail(function (jqXHR, textStatus, errorThrown) {
35		console.error('Error al realizar la solicitud a la API:', textStatus, errorThrown);
36	});
37}
38
39/**
40 * @funcion app run fetchYoutuneVideos
41 *
42 *  */
43function fetchYouTubeVideos() {
44	let channelId = 'UCl3og3yWga-LWmqUETAmDjQ'; // Asegerate de que no haya un espacio al inicio
45	let apiKey = 'AIzaSyDHYoNm0N9uvkWQ4LGAV5yzzcbU-naTlUU'; // Reemplaza con tu clave de API de YouTube
46
47	fetchYouTubeUploadsPlaylistId(channelId, apiKey, function (playlistId) {
48		let apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=1&playlistId=${playlistId}&key=${apiKey}`;
49		console.log('Solicitando videos desde:', apiUrl);
50
51		$.get(apiUrl, function (data) {
52			console.log('Datos recibidos de la API:', data);
53			let strHTML = '';
54			if (data.items.length > 0) {
55				let video = data.items[0];
56				const { description, title } = video.snippet;
57				const { videoId } = video.snippet.resourceId;
58				fetchYouTubeChannelDetails(channelId, apiKey, function (channelDetails) {
59					const { subscriberCount } = channelDetails;
60					strHTML += `
61							
62							<div class="text__description px-[20px] col-span-3 py-2 ">
63								<h3 class="w-fit font-extrabold my-2 text-[30px] text-[#319637] ">${title}</h3>
64								<span class="font-bold w-fit text-[15px]">${subscriberCount} suscriptores</span>
65								<p class="paragraph my-2">${description}</p>
66							</div>
67							<figure class="border-t-8 border-t-xl col-span-4 border-thirdColor h-auto w-full">
68								<lite-youtube videoid="${videoId}" class="w-full h-[400px]">
69								</lite-youtube>
70							</figure>`;
71
72					$('#contentVideos').html(strHTML);
73					console.log('HTML actualizado con los videos.');
74				});
75			} else {
76				strHTML = '<p>No se encontraron videos.</p>';
77				$('#contentVideos').html(strHTML);
78			}
79		}).fail(function (jqXHR, textStatus, errorThrown) {
80			console.error('Error al realizar la solicitud a la API:', textStatus, errorThrown);
81		});
82	});
83}
84
85document.addEventListener('DOMContentLoaded', () => {
86	fetchYouTubeVideos();
87});