Ver código fonte

Got alerts working. Still needs tuning

deadtom 1 semana atrás
pai
commit
413cb11f20

+ 2 - 0
ownchatbot/defaults/alerts.py

@@ -0,0 +1,2 @@
+ALERTS = {}  # Will populate as the streamer configures alerts
+

+ 89 - 0
ownchatbot/templates/donation.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Polls the check_donations route every three seconds. When a new donation is found,
+the alert is displayed for ten seconds. -->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>New Donation Alert</title>
+    <style>
+        body {
+            background-color: transparent;
+            position: relative; /* Ensure relative positioning for absolute children */
+        }
+
+        #alertVid {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning with top, left, etc. */
+            z-index: 1; /* Ensure it's below textBox */
+        }
+
+        #alertImg {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning */
+            z-index: 1; /* Ensure it's below textBox */
+        }
+
+        #textBox {
+            display: none;
+            position: absolute;
+            top: 20%; /* Adjust as needed */
+            left: 50%; /* Center horizontally */
+            transform: translateX(-50%); /* Center */
+            color: black;
+            z-index: 2; /* Ensure it appears above alertImg and alertVid */
+            font-size: 20px; /* Adjust as needed */
+        }
+    </style>
+</head>
+<body>
+    {% if not alert_name %}
+        <div id="alertVid"></div>
+        <div id="alertImg"></div>
+    {% elif "webm" in alert_name %}
+        <video id="alertVid" autoplay>
+            <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
+        </video>
+        <div id="alertImg"></div>
+    {% else %}
+        <div id="alertVid"></div>
+        <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
+    {% endif %}
+
+    <div id="textBox"></div>
+
+    <script>
+        setInterval(function() {
+            fetch('/checkDonations')
+                .then(response => response.json())
+                .then(data => {
+                    if (data) {
+                        const alertVid = document.getElementById('alertVid');
+                        const alertImg = document.getElementById('alertImg');
+                        const textBox = document.getElementById('textBox');
+
+                        const donationName = data.name;
+                        const donationAmount = data.amount;
+
+                        textBox.innerHTML = `
+                            ${donationName}<br>
+                            $${donationAmount}
+                        `;
+                        textBox.style.display = 'block';
+
+                        alertVid.style.display = 'block';
+                        alertImg.style.display = 'block';
+
+                        setTimeout(() => {
+                            alertVid.style.display = 'none';
+                            alertImg.style.display = 'none';
+                            textBox.style.display = 'none';
+                        }, 10000); // Visible for 10 seconds
+                    }
+                });
+        }, 3000); // Check for new donations every 3 seconds
+    </script>
+</body>
+</html>

+ 87 - 0
ownchatbot/templates/follower.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Polls the check_followers route every three seconds. When a new follower is found,
+the alert is displayed for ten seconds. -->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>New Follower Alert</title>
+    <style>
+        body {
+            background-color: transparent;
+            position: relative; /* Ensure relative positioning for absolute children */
+        }
+
+        #alertVid {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning with top, left, etc. */
+            z-index: 1; /* Ensure it's below nameBox */
+        }
+
+        #alertImg {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning */
+            z-index: 1; /* Ensure it's below nameBox */
+        }
+
+        #nameBox {
+            display: none;
+            position: absolute;
+            top: 20%; /* Adjust as needed */
+            left: 50%; /* Center horizontally */
+            transform: translateX(-50%); /* Center */
+            color: black;
+            z-index: 2; /* Ensure it appears above alertImg and alertVid */
+            font-size: 20px; /* Adjust as needed */
+        }
+    </style>
+</head>
+<body>
+    {% if not alert_name %}
+        <div id="alertVid"></div>
+        <div id="alertImg"></div>
+    {% elif "webm" in alert_name %}
+        <video id="alertVid" autoplay>
+            <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
+        </video>
+        <div id="alertImg"></div>
+    {% else %}
+        <div id="alertVid"></div>
+        <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
+    {% endif %}
+
+    <div id="nameBox"></div>
+
+    <script>
+        setInterval(function() {
+            fetch('/checkFollows')
+                .then(response => response.json())
+                .then(data => {
+                    if (data) {
+                        const alertVid = document.getElementById('alertVid');
+                        const alertImg = document.getElementById('alertImg');
+                        const nameBox = document.getElementById('nameBox');
+
+                        const followerName = data.eventData.name;
+
+                        nameBox.innerHTML = `
+                            ${followerName}
+                        `;
+                        nameBox.style.display = 'block';
+
+                        alertVid.style.display = 'block';
+                        alertImg.style.display = 'block';
+
+                        setTimeout(() => {
+                            alertVid.style.display = 'none';
+                            alertImg.style.display = 'none';
+                            nameBox.style.display = 'none';
+                        }, 10000); // Visible for 10 seconds
+                    }
+                });
+        }, 3000); // Check for new followers every 3 seconds
+    </script>
+</body>
+</html>

+ 83 - 0
ownchatbot/templates/ocbalert.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OwnchatBot Alert</title>
+    <style>
+        body {
+            background-color: transparent;
+            position: relative; /* Ensure relative positioning for absolute children */
+        }
+
+        #alertVid {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning with top, left, etc. */
+            z-index: 1; /* Ensure it's below textBox */
+        }
+
+        #alertImg {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning */
+            z-index: 1; /* Ensure it's below textBox */
+        }
+
+        #textBox {
+            display: none;
+            position: absolute;
+            top: 20%; /* Adjust as needed */
+            left: 50%; /* Center horizontally */
+            transform: translateX(-50%); /* Center */
+            color: black;
+            z-index: 2; /* Ensure it appears above alertImg and alertVid */
+            font-size: 20px; /* Adjust as needed */
+        }
+    </style>
+</head>
+<body>
+    {% if not alert_name %}
+        <div id="alertVid"></div>
+        <div id="alertImg"></div>
+    {% elif "webm" in alert_name %}
+        <video id="alertVid" autoplay>
+            <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
+        </video>
+        <div id="alertImg"></div>
+    {% else %}
+        <div id="alertVid"></div>
+        <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
+    {% endif %}
+
+    <div id="textBox"></div>
+
+    <script>
+        setInterval(function() {
+            fetch('/checkAlerts')
+                .then(response => response.json())
+                .then(data => {
+                    if (data) {
+                        const alertVid = document.getElementById('alertVid');
+                        const alertImg = document.getElementById('alertImg');
+                        const textBox = document.getElementById('textBox');
+
+                        textBox.innerHTML = `
+
+                        `;
+                        textBox.style.display = 'block';
+
+                        alertVid.style.display = 'block';
+                        alertImg.style.display = 'block';
+
+                        setTimeout(() => {
+                            alertVid.style.display = 'none';
+                            alertImg.style.display = 'none';
+                            textBox.style.display = 'none';
+                        }, 10000); // Visible for 10 seconds
+                    }
+                });
+        }, 3000); // Check for new subscribers every 3 seconds
+    </script>
+</body>
+</html>

+ 89 - 0
ownchatbot/templates/subscriber.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Polls the check_subscribers route every three seconds. When a new subscriber is found,
+the alert is displayed for ten seconds. -->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>New Subscriber Alert</title>
+    <style>
+        body {
+            background-color: transparent;
+            position: relative; /* Ensure relative positioning for absolute children */
+        }
+
+        #alertVid {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning with top, left, etc. */
+            z-index: 1; /* Ensure it's below textBox */
+        }
+
+        #alertImg {
+            display: none;
+            max-height: 100px;
+            position: absolute; /* Allow positioning */
+            z-index: 1; /* Ensure it's below textBox */
+        }
+
+        #textBox {
+            display: none;
+            position: absolute;
+            top: 20%; /* Adjust as needed */
+            left: 50%; /* Center horizontally */
+            transform: translateX(-50%); /* Center */
+            color: black;
+            z-index: 2; /* Ensure it appears above alertImg and alertVid */
+            font-size: 20px; /* Adjust as needed */
+        }
+    </style>
+</head>
+<body>
+    {% if not alert_name %}
+        <div id="alertVid"></div>
+        <div id="alertImg"></div>
+    {% elif "webm" in alert_name %}
+        <video id="alertVid" autoplay>
+            <source src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}" type="video/webm">
+        </video>
+        <div id="alertImg"></div>
+    {% else %}
+        <div id="alertVid"></div>
+        <img id="alertImg" src="{{ url_for('web_panels.alerts', alert_name=alert_name) }}">
+    {% endif %}
+
+    <div id="textBox"></div>
+
+    <script>
+        setInterval(function() {
+            fetch('/checkSubscribers')
+                .then(response => response.json())
+                .then(data => {
+                    if (data) {
+                        const alertVid = document.getElementById('alertVid');
+                        const alertImg = document.getElementById('alertImg');
+                        const textBox = document.getElementById('textBox');
+
+                        const subscriberName = data.name;
+                        const subscriberTier = data.tiername;
+
+                        textBox.innerHTML = `
+                            ${subscriberName}<br>
+                            ${subscriberTier} subscriber
+                        `;
+                        textBox.style.display = 'block';
+
+                        alertVid.style.display = 'block';
+                        alertImg.style.display = 'block';
+
+                        setTimeout(() => {
+                            alertVid.style.display = 'none';
+                            alertImg.style.display = 'none';
+                            textBox.style.display = 'none';
+                        }, 10000); // Visible for 10 seconds
+                    }
+                });
+        }, 3000); // Check for new subscribers every 3 seconds
+    </script>
+</body>
+</html>

+ 0 - 1
ownchatbot/templates/userpanel.html

@@ -263,7 +263,6 @@
                 </thead>
                 <tbody>
                 {% for row in queue %}
-                    {{ row[2] }}
                     {% if not row[4] %}
                     <tr>
                         <td>{{ row[1].replace(tzinfo=utc_timezone).astimezone().strftime("%H:%M") }}</td>