room_timer: address some design suggestions

Kunsi · Nov 4, 2024 · aba2ab7 · aba2ab7
1 parent f63603d
commit aba2ab7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css
@@ -105,13 +105,21 @@ body {
 }
 
 #broadcast_tools_room_timer_timeleft {
-    font-size: 20vh;
+    font-size: 6vh;
     text-align: center;
 }
 
-#broadcast_tools_room_timer_progressbar {
+#broadcast_tools_room_timer_timeleft_timer {
+    font-size: 20vh;
+}
+
+#broadcast_tools_room_timer_progressbar, #broadcast_tools_room_timer_progressbar_bar {
     position: fixed;
     left: 0;
     bottom: 0;
     height: 2em;
 }
+
+#broadcast_tools_room_timer_progressbar {
+    right: 0;
+}
diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js
@@ -11,8 +11,9 @@ function update_room_info() {
     title = document.getElementById('broadcast_tools_room_timer_title');
     speaker = document.getElementById('broadcast_tools_room_timer_speaker');
     scheduledata = document.getElementById('broadcast_tools_room_timer_scheduledata');
-    timeleft = document.getElementById('broadcast_tools_room_timer_timeleft');
-    progressbar = document.getElementById('broadcast_tools_room_timer_progressbar');
+    timeleft = document.getElementById('broadcast_tools_room_timer_timeleft_timer');
+    progressbar= document.getElementById('broadcast_tools_room_timer_progressbar');
+    progressbar_bar = document.getElementById('broadcast_tools_room_timer_progressbar_bar');
 
     box.style.backgroundColor = event_info['color'];
 
@@ -47,9 +48,12 @@ function update_room_info() {
         scheduled_start = new Date(current_talk['start']);
         scheduled_end = new Date(current_talk['end']);
 
-        if (scheduled_start > now || scheduled_end < now) {
+        if (scheduled_start > now) {
             timeleft.innerHTML = '';
-            progressbar.style.width = '0';
+            progressbar_bar.style.width = '0';
+        } else if (scheduled_end < now) {
+            timeleft.innerHTML = '0sec';
+            progressbar_bar.style.width = '100vw';
         } else {
             diff = scheduled_end - now;
             let diff_s = Math.floor(Math.floor(diff / 1000) % 60/10);
@@ -58,22 +62,24 @@ function update_room_info() {
             timeleft.innerHTML = diff_m + 'min ' + diff_s + '0sec';
 
             total_time = scheduled_end - scheduled_start;
-            progressbar.style.width = (((diff/total_time)*100)-100)*-1 + 'vw';
+            progressbar_bar.style.width = (((diff/total_time)*100)-100)*-1 + 'vw';
         }
 
         if (current_talk['track']) {
             header.style.backgroundColor = current_talk['track']['color'];
-            progressbar.style.backgroundColor = current_talk['track']['color'];
+            progressbar.style.borderTop = '2px solid ' + current_talk['track']['color'];
+            progressbar_bar.style.backgroundColor = current_talk['track']['color'];
         } else {
             header.style.backgroundColor = null;
-            progressbar.style.backgroundColor = event_info['color'];
+            progressbar.style.borderTop = '2px solid white';
+            progressbar_bar.style.backgroundColor = 'white';
         }
     } else {
         title.innerHTML = room_name;
         speaker.innerHTML = 'Break';
-        scheduledata.innerHTML = '';
         timeleft.innerHTML = '';
-        progressbar.style.width = '0';
+        progressbar.style.borderTop = 'none';
+        progressbar_bar.style.width = '0';
 
         if (next_talk) {
             scheduledata.innerHTML = format_time_from_pretalx(next_talk['start']) + ' ' + next_talk['title'];
@@ -84,7 +90,7 @@ function update_room_info() {
                 header.style.backgroundColor = null;
             }
         } else {
-            speaker.innerHTML = '';
+            scheduledata.innerHTML = '';
         }
     }
 }

diff --git a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html
@@ -19,7 +19,12 @@ <h2 id="broadcast_tools_room_timer_title">Loading ...</h2>
             <h3 id="broadcast_tools_room_timer_speaker">Content should appear soon. If not, please verify you have Javascript enabled.</h3>
             <p id="broadcast_tools_room_timer_scheduledata"></p>
         </div>
-        <p id="broadcast_tools_room_timer_timeleft"></p>
-        <p id="broadcast_tools_room_timer_progressbar">&nbsp;</p>
+        <div id="broadcast_tools_room_timer_timeleft">
+            <p id="broadcast_tools_room_timer_timeleft_timer"></p>
+            <p id="broadcast_tools_room_timer_timeleft_hint">time left in this talk</p>
+        </div>
+        <div id="broadcast_tools_room_timer_progressbar">
+            <p id="broadcast_tools_room_timer_progressbar_bar">&nbsp;</p>
+        </div>
     </body>
 </html>