commit 007bfa63faff310133bca9c08a5e1eb58b69ada4
parent 83a119e44e0ad94bab25e1c1c1a0149477bb9a7b
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Mon, 21 Oct 2024 18:40:13 +0200
feat: make loading indicators more clear
Diffstat:
4 files changed, 63 insertions(+), 298 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -39,3 +39,13 @@ textarea[name=streams] {
min-height: 400px;
}
+.loading_indicator {
+ color: white;
+ font-size: 75%;
+}
+.loading_indicator.online {
+ color: var(--accent);
+}
+.loading_indicator.offline {
+ color: #898ea4;
+}
diff --git a/assets/css/loading.css b/assets/css/loading.css
@@ -1,283 +0,0 @@
-/* Loading Animation */
-.wrapper-loading {
- position: relative;
- margin: auto;
- width: 100%;
- aspect-ratio: 1/1;
- max-width: 400px;
- min-width: 100px;
- background-color: transparent;
- border: none;
-}
-.wrapper-loading .box-wrap {
- width: 70%;
- height: 70%;
- margin: calc((100% - 70%) / 2) calc((100% - 70%) / 2);
- position: relative;
- transform: rotate(-45deg);
-}
-.wrapper-loading .box-wrap .box {
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- background: rgba(135, 0, 0, 0.6);
- background: linear-gradient(
- to right,
- #0D47A1,
- #3D5C80,
- #6D7260,
- #9E8740,
- #CE9D20,
- #FFB300,
- #CE9D20,
- #9E8740,
- #6D7260,
- #3D5C80,
- #0D47A1
- );
- background-position: 0% 50%;
- background-size: 1000% 1000%;
- visibility: hidden;
-}
-.wrapper-loading .box-wrap .box.one {
- animation: moveGradient 15s infinite, oneMove 3.5s infinite;
-}
-.wrapper-loading .box-wrap .box.two {
- animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
-}
-.wrapper-loading .box-wrap .box.three {
- animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
-}
-.wrapper-loading .box-wrap .box.four {
- animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
-}
-.wrapper-loading .box-wrap .box.five {
- animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
-}
-.wrapper-loading .box-wrap .box.six {
- animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
-}
-
-@keyframes moveGradient {
- to {
- background-position: 100% 50%;
- }
-}
-
-@keyframes oneMove {
- 0% {
- visibility: visible;
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 14.2857% {
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 28.5714% {
- clip-path: inset(35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 42.8571% {
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 57.1428% {
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 71.4285% {
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 85.7142% {
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 100% {
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
-}
-
-@keyframes twoMove {
- 0% {
- visibility: visible;
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 14.2857% {
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 28.5714% {
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 42.8571% {
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 57.1428% {
- clip-path: inset(35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 71.4285% {
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 85.7142% {
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 100% {
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
-}
-
-@keyframes threeMove {
- 0% {
- visibility: visible;
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 14.2857% {
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 28.5714% {
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 42.8571% {
- clip-path: inset(0% 70% 70% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 57.1428% {
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 71.4285% {
- clip-path: inset(0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 85.7142% {
- clip-path: inset(35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 100% {
- clip-path: inset(35% 70% 35% 0 round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
-}
-
-@keyframes fourMove {
- 0% {
- visibility: visible;
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 14.2857% {
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 28.5714% {
- clip-path: inset(35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 42.8571% {
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 57.1428% {
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 71.4285% {
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 85.7142% {
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 100% {
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
-}
-
-@keyframes fiveMove {
- 0% {
- visibility: visible;
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 14.2857% {
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 28.5714% {
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 42.8571% {
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 57.1428% {
- clip-path: inset(35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 71.4285% {
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 85.7142% {
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 100% {
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
-}
-
-@keyframes sixMove {
- 0% {
- visibility: visible;
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 14.2857% {
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 28.5714% {
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 42.8571% {
- clip-path: inset(70% 0 0 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 57.1428% {
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 71.4285% {
- clip-path: inset(35% 0% 35% 70% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 85.7142% {
- clip-path: inset(35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
- 100% {
- clip-path: inset(70% 35% 0% 35% round 5%);
- animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
- }
-}
diff --git a/assets/js/twitch.js b/assets/js/twitch.js
@@ -56,10 +56,8 @@ async function tw2html_toggle_hidden(stream) {
}
- // Mark Loading indicator as done (unhide it)
- document.getElementById("loading_indicator_" + stream).classList.remove(
- "hidden"
- );
+ // Mark Loading indicator as done
+ tw2html_loading_indicator(stream, status);
}
@@ -176,27 +174,66 @@ function tw2html_toggle_chat(stream) {
}
+function tw2html_loading_indicator(stream, status) {
+
+ // Get loading indicator object
+ var indicator = document.getElementById("loading_indicator_" + stream);
+
+ // During Process
+ if (status == -1) {
+
+ // Unmark as online
+ indicator.classList.remove("online");
+
+ // Unmark as offline
+ indicator.classList.remove("offline");
+
+ }
+
+ // Online
+ if (status == 1) {
+
+ // Unmark as offnline
+ indicator.classList.remove("offline");
+
+ // Mark as online
+ indicator.classList.add("online");
+
+ }
+
+ // Offline
+ if (status == 0) {
+
+ // Unmark as online
+ indicator.classList.remove("online");
+
+ // Mark as offline
+ indicator.classList.add("offline");
+
+ }
+
+}
+
+
function tw2html_reload() {
// Debug output
console.log("Reloading list of online streams...")
- // Hide loading indicator (hidden means "still loading")
- document.querySelectorAll(".loading_indicator").forEach(function(x) {
- x.classList.add("hidden");
- })
-
// gather list of sections (streams)
var sections = document.querySelectorAll(".streams");
// Loop through each section
for (i = 0; i < sections.length; i++) {
- // Gather stream name
- var stream = sections[i].id.replace("stream_", "");
+ // Gather stream name
+ var stream = sections[i].id.replace("stream_", "");
+
+ // Mark as still processing
+ tw2html_loading_indicator(stream, -1)
- // check online status and untoggle hidden class asynchronously
- tw2html_toggle_hidden(stream);
+ // check online status and untoggle hidden class asynchronously
+ tw2html_toggle_hidden(stream);
}
diff --git a/index.php b/index.php
@@ -68,15 +68,16 @@
<h1>Streams</h1>
<!-- Loading Indicator -->
- <div id="loading_indicators">
+ <div id="loading_indicator">
<?php
foreach ($streams as $stream) {
?>
<span
- class="loading_indicator hidden"
+ class="loading_indicator"
id="loading_indicator_<?php echo $stream; ?>"
title="<?php echo $stream; ?>"
>
+ ■
</span>
<?php
}
