Merge pull request #5 from luiscarlospando/twitch-live

Agregar notificación Twitch Live (vía Twitch API)

_config.yml

@@ -14,7 +14,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 title: LuisCarlosPando.com
-version: 2.27.2
+version: 2.28.0
 author: Luis Carlos Pando
 email: hey@luiscarlospando.com
 description: >- # this means to ignore newlines until "baseurl:"

_includes/header.html

@@ -151,6 +151,24 @@
             </div>
         </header>
 
+        <section id="twitch-livestream-alert" class="container">
+            <div class="row">
+                <div class="col-12 col-md-10 offset-md-1">
+                    <div class="card last-updated text-center mt-3">
+                        <div class="card-body rounded">
+                            <p>
+                                <i id="live-icon" class="fa-solid fa-circle animated live infinite"></i>
+                                ¡Estoy <a href="/live/">en vivo</a>!
+                                <a href="/live/" data-toggle="tooltip" data-placement="top" title="Ver stream en vivo">
+                                    <img style="vertical-align: text-top;" alt="Twitch Status" src="https://img.shields.io/twitch/status/mijodido?style=flat&logo=twitch&logoColor=%23A172F7&link=https%3A%2F%2Fluiscarlospando.com%2Flive">
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <section id="m7gp-livestream-alert" class="container">
             <div class="row">
                 <div class="col-12 col-md-10 offset-md-1">

_sass/header.scss

@@ -171,6 +171,7 @@
     }
 }
 
+#twitch-livestream-alert,
 #m7gp-livestream-alert {
     opacity: 0;
 
@@ -235,6 +236,7 @@ progress::-moz-progress-bar {
     }
 }
 
+#twitch-livestream-alert,
 #m7gp-livestream,
 #btn-m7gp {
     display: none;

assets/src/app.js

@@ -15,6 +15,8 @@ import './last-updated-at';
 import './wp-api';
 import './lastfm-fetch';
 import './now';
+import './twitch-live';
+import './m7gp-live';
 import './main';
 
 /* React components */

assets/src/m7gp-live.js

@@ -0,0 +1,41 @@
+// Show/Hide Mode 7 Grand Prix Livestream
+let DateTime = luxon.DateTime; // Initialization
+let dt = DateTime.now().setZone("America/Mexico_City");
+let dayOfTheWeek = dt.weekday;
+let time = dt.toFormat('HH');
+
+const m7gpLivestreamAlert = document.getElementById("m7gp-livestream-alert");
+const m7gpLivestream = document.getElementById("m7gp-livestream");
+const btnM7GP = document.getElementById("btn-m7gp");
+
+const luisCarlosPandoLivestream = document.getElementById("luiscarlospando-livestream");
+const luisCarlosPandoChat = document.getElementById("luiscarlospando-chat");
+const btnLuisCarlosPando = document.getElementById("btn-luiscarlospando");
+
+// Twitch badges
+const badgeTwitchMijo = document.getElementById("badge-twitch-mijo");
+const badgeTwitchSkynet = document.getElementById("badge-twitch-skynet");
+
+// Display livestream and livestream alert only on Thursday nights
+if (dayOfTheWeek == 4 && (time >= 21 && time < 23)) {
+    if (m7gpLivestream && btnM7GP && luisCarlosPandoLivestream && luisCarlosPandoChat && btnLuisCarlosPando) {
+        m7gpLivestream.style.display = "block";
+        btnM7GP.style.display = "inline-block";
+        badgeTwitchSkynet.style.display = "inline-block";
+
+        luisCarlosPandoLivestream.style.display = "none";
+        luisCarlosPandoChat.style.display = "none";
+        btnLuisCarlosPando.style.display = "none";
+        badgeTwitchMijo.style.display = "none";
+    }
+
+    m7gpLivestreamAlert.style.display = "block";
+} else {
+    if (m7gpLivestream && btnM7GP) {
+        m7gpLivestream.style.display = "none";
+        btnM7GP.style.display = "none";
+        badgeTwitchSkynet.style.display = "none";
+    }
+
+    m7gpLivestreamAlert.style.display = "none";
+}

assets/src/main.js

@@ -181,47 +181,5 @@
         $(window).on('load', function () {
             $(".page-numbers").addClass("btn btn-primary");
         });
-
-        // Show/Hide Mode 7 Grand Prix Livestream
-        let DateTime = luxon.DateTime; // Initialization
-        let dt = DateTime.now().setZone("America/Mexico_City");
-        let dayOfTheWeek = dt.weekday;
-        let time = dt.toFormat('HH');
-
-        const m7gpLivestreamAlert = document.getElementById("m7gp-livestream-alert");
-        const m7gpLivestream = document.getElementById("m7gp-livestream");
-        const btnM7GP = document.getElementById("btn-m7gp");
-
-        const luisCarlosPandoLivestream = document.getElementById("luiscarlospando-livestream");
-        const luisCarlosPandoChat = document.getElementById("luiscarlospando-chat");
-        const btnLuisCarlosPando = document.getElementById("btn-luiscarlospando");
-
-        // Twitch badges
-        const badgeTwitchMijo = document.getElementById("badge-twitch-mijo");
-        const badgeTwitchSkynet = document.getElementById("badge-twitch-skynet");
-
-        // Display livestream and livestream alert only on Thursday nights
-        if (dayOfTheWeek == 4 && (time >= 21 && time < 23)) {
-            if (m7gpLivestream && btnM7GP && luisCarlosPandoLivestream && luisCarlosPandoChat && btnLuisCarlosPando) {
-                m7gpLivestream.style.display = "block";
-                btnM7GP.style.display = "inline-block";
-                badgeTwitchSkynet.style.display = "inline-block";
-
-                luisCarlosPandoLivestream.style.display = "none";
-                luisCarlosPandoChat.style.display = "none";
-                btnLuisCarlosPando.style.display = "none";
-                badgeTwitchMijo.style.display = "none";
-            }
-
-            m7gpLivestreamAlert.style.display = "block";
-        } else {
-            if (m7gpLivestream && btnM7GP) {
-                m7gpLivestream.style.display = "none";
-                btnM7GP.style.display = "none";
-                badgeTwitchSkynet.style.display = "none";
-            }
-
-            m7gpLivestreamAlert.style.display = "none";
-        }
     });
 })();

assets/src/twitch-live.js

@@ -0,0 +1,36 @@
+// Function to fetch live status from Twitch API
+function checkLiveStatus() {
+    const clientId = 'vfumpr4f4psz8fm5k2bs0zupvrtgge'; // Replace with your Twitch Client ID
+    const channelName = 'mijodido'; // Replace with your Twitch Channel Name
+    const twitchLivestreamAlert = document.getElementById("twitch-livestream-alert");
+
+    fetch(`https://api.twitch.tv/helix/streams?user_login=${channelName}`, {
+        headers: {
+            'Client-ID': clientId,
+            'Authorization': 'Bearer 17dobh8sk5k9jk7zhpy6epl2b0klbz' // Replace with your Twitch Access Token
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.data.length > 0) {
+            twitchLivestreamAlert.style.display = "block";
+        } else {
+            twitchLivestreamAlert.style.display = "none";
+        }
+    })
+    .catch(error => console.error('Error fetching live status:', error));
+}
+
+// Call the function after document is fully loaded
+document.addEventListener("DOMContentLoaded", function() {
+    checkLiveStatus();
+
+    // Call the function every 1 minute (or adjust the interval as needed)
+    setInterval(checkLiveStatus, 60000); // 60000 milliseconds = 1 minute
+});
+
+// Call the function initially
+checkLiveStatus();
+
+// Call the function every 1 minute (or adjust the interval as needed)
+setInterval(checkLiveStatus, 60000); // 60000 milliseconds = 1 minute

package.json

@@ -1,12 +1,12 @@
 {
   "name": "luiscarlospando.com",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "Punk dude first and foremost. Losing followers since 2007.",
   "main": "index.js",
   "scripts": {
     "start": "bundle exec jekyll serve",
     "dev": "webpack serve",
-    "build": "webpack",
+    "build": "webpack --watch",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {