Widget:Twitch

Carregando streamers ativos...

<script>

 const clientId = '3cqgn6bg1ts9bm3pahx51aiivs2u3d'; // Seu Client ID
 const accessToken = 'v86kvw6tyfvrzv8hkti27ddt21ydjf'; // Seu Access Token
 const streamers = ['sayurimei', 'apolotfg', 'Yoshimitsuccs']; // Lista dos streamers

 async function fetchActiveStreamers() {
   try {
     const headers = {
       'Client-ID': clientId,
       'Authorization': `Bearer ${accessToken}`
     };

     // Fazer requisições para todos os streamers
     const streamerRequests = streamers.map(async (streamer) => {
       const response = await fetch(`https://api.twitch.tv/helix/streams?user_login=${streamer}`, { headers });
       const data = await response.json();
       return data.data.length > 0 ? data.data[0] : null; // Retorna o streamer se estiver ativo
     });

     // Aguarda todas as requisições serem concluídas
     const results = await Promise.all(streamerRequests);
     const activeStreamers = results
       .filter((stream) => stream !== null) // Filtra apenas os streamers ativos
       .filter((stream) => /GLA/i.test(stream.title)); // Verifica se o título contém "GLA" (case insensitive)

     // Atualiza o HTML com os streamers ativos que têm "GLA" no título
     const container = document.getElementById('streamers-ativos');
     if (activeStreamers.length > 0) {
       container.innerHTML = activeStreamers.map((stream) => `

${stream.user_name}

${stream.title}

           <iframe
             src="https://player.twitch.tv/?channel=${stream.user_name}&parent=wiki.gla.com.br"
             height="300"
             width="400"
             frameborder="0"
             scrolling="no"
             allowfullscreen="true">
           </iframe>

       `).join();
     } else {

container.innerHTML = '

Nenhum streamer ativo com "GLA" no título no momento.

';

     }
   } catch (error) {
     console.error('Erro ao buscar streamers:', error);

document.getElementById('streamers-ativos').innerHTML = '

Erro ao carregar streamers. Tente novamente mais tarde.

';

   }
 }

 fetchActiveStreamers();

</script>

<style>

 #streamers-ativos {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
 }
 .streamer {
   border: 1px solid #ccc;
   padding: 10px;
   background: #f9f9f9;
   border-radius: 5px;
   text-align: center;
 }
 .streamer h3 {
   margin: 0 0 10px;
 }
 .streamer p {
   margin: 0 0 10px;
   color: #666;
 }

</style>