From 3addc8b19ee86ffadd775fc9582d9be4e3d0a1bf Mon Sep 17 00:00:00 2001
From: Franziska Kunsmann <franziska.kunsmann@seibert.group>
Date: Mon, 4 Nov 2024 15:38:59 +0100
Subject: [PATCH] room_timer: address some design suggestions

---
 .../pretalx_broadcast_tools/frontend.css      | 12 +++++--
 .../pretalx_broadcast_tools/room_timer.js     | 33 ++++++++++++-------
 .../pretalx_broadcast_tools/room_timer.html   |  9 +++--
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css
index bb8408c..0681be3 100644
--- 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
index 168e3a6..eff31a7 100644
--- 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,10 @@ 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');
+    timehint = document.getElementById('broadcast_tools_room_timer_timeleft_hint');
+    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 +49,14 @@ 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';
+            timehint.innerHTML = '';
+        } else if (scheduled_end < now) {
+            timeleft.innerHTML = '0sec';
+            progressbar_bar.style.width = '100vw';
+            timehint.innerHTML = 'talk has ended';
         } else {
             diff = scheduled_end - now;
             let diff_s = Math.floor(Math.floor(diff / 1000) % 60/10);
@@ -58,22 +65,26 @@ 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';
+            timehint.innerHTML = 'left in this talk';
         }
 
         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;
+        progressbar.style.borderTop = 'none';
+        progressbar_bar.style.width = '0';
         speaker.innerHTML = 'Break';
-        scheduledata.innerHTML = '';
+        timehint.innerHTML = '';
         timeleft.innerHTML = '';
-        progressbar.style.width = '0';
+        title.innerHTML = room_name;
 
         if (next_talk) {
             scheduledata.innerHTML = format_time_from_pretalx(next_talk['start']) + ' ' + next_talk['title'];
@@ -84,7 +95,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
index 50447db..ace6fe8 100644
--- 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 @@
             <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"></p>
+        </div>
+        <div id="broadcast_tools_room_timer_progressbar">
+            <p id="broadcast_tools_room_timer_progressbar_bar">&nbsp;</p>
+        </div>
     </body>
 </html>