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