add basic "room timer" page

pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css

@@ -10,6 +10,7 @@ body {
     background-color: black;
 }
 
+/* room info *********************************************/
 #broadcast_tools_room_info {
     display: flex;
     flex-flow: column;
@@ -52,6 +53,7 @@ body {
     margin-top: 1em;
 }
 
+/* lower thirds ******************************************/
 #broadcast_tools_lower_thirds_box {
     width: 1020px;
 
@@ -79,3 +81,37 @@ body {
     font-size: 1.8vh;
     text-align: right;
 }
+
+/* room timer ********************************************/
+#broadcast_tools_room_timer_header {
+    padding: 2em;
+    text-align: center;
+}
+
+#broadcast_tools_room_timer_title {
+    font-size: 8vh;
+    margin-bottom: 0.2em;
+    font-weight: bold;
+}
+
+#broadcast_tools_room_timer_speaker {
+    font-size: 6vh;
+    font-weight: normal;
+}
+
+#broadcast_tools_room_timer_scheduledata {
+    font-size: 3vh;
+    font-weight: normal;
+}
+
+#broadcast_tools_room_timer_timeleft {
+    font-size: 20vh;
+    text-align: center;
+}
+
+#broadcast_tools_room_timer_progressbar {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    height: 2em;
+}

pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js

@@ -110,11 +110,11 @@ function xhr_get(url, callback_func) {
 
 function update_schedule() {
     xhr_get('../event.json', function(text) {
-        console.log("events: " + text);
+        console.debug("events: " + text);
         event_info = JSON.parse(text);
     });
     xhr_get('../schedule.json', function(text) {
-        console.log("schedule: " + text);
+        console.debug("schedule: " + text);
         data = JSON.parse(text);
         if ('error' in data) {
             console.error(data['error']);

pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js

@@ -0,0 +1,90 @@
+function update_room_info() {
+    room_name = get_room_name();
+
+    if (!event_info)  {
+        console.warn("Waiting for event info ...");
+        return
+    }
+
+    box = document.getElementById('broadcast_tools_room_timer');
+    header = document.getElementById('broadcast_tools_room_timer_header');
+    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');
+
+    box.style.backgroundColor = event_info['color'];
+
+    if (!schedule)  {
+        speaker.innerHTML = 'Waiting for schedule ...';
+        return
+    }
+
+    if ('error' in schedule) {
+        title.innerHTML = 'Error';
+        speaker.innerHTML = schedule['error'].join('<br>');
+        return
+    }
+
+    if (schedule['rooms'].length > 1 && !schedule['rooms'].includes(room_name)) {
+        title.innerHTML = 'Error';
+        speaker.innerHTML = 'Invalid room_name. Valid names: ' + schedule['rooms'].join(', ');
+        return
+    }
+
+    current_talk = get_current_talk(60);
+    next_talk = get_next_talk();
+
+    if (current_talk) {
+        title.innerHTML = current_talk['title'];
+        speaker.innerHTML = current_talk['persons'].join(', ');
+        scheduledata.innerHTML = format_time_from_pretalx(current_talk['start']);
+        scheduledata.innerHTML += ' - ';
+        scheduledata.innerHTML += format_time_from_pretalx(current_talk['end']);
+
+        now = new Date();
+        scheduled_start = new Date(current_talk['start']);
+        scheduled_end = new Date(current_talk['end']);
+
+        if (scheduled_end < now) {
+            timeleft.innerHTML = '0';
+            progressbar.style.width = '0';
+        } else {
+            diff = scheduled_end - now;
+            let diff_s = Math.floor(Math.floor(diff / 1000) % 60/10);
+            let diff_m = Math.floor(diff / 1000 / 60) % 60;
+
+            timeleft.innerHTML = diff_m + 'min ' + diff_s + '0sec';
+
+            total_time = scheduled_end - scheduled_start;
+            progressbar.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'];
+        } else {
+            header.style.backgroundColor = null;
+            progressbar.style.backgroundColor = event_info['color'];
+        }
+    } else {
+        title.innerHTML = room_name;
+        scheduledata.innerHTML = '';
+        timeleft.innerHTML = '';
+        progressbar.style.width = '0';
+
+        if (next_talk) {
+            speaker.innerHTML = format_time_from_pretalx(next_talk['start']) + ' ' + next_talk['title'];
+
+            if (next_talk['track']) {
+                header.style.backgroundColor = next_talk['track']['color'];
+            } else {
+                header.style.backgroundColor = null;
+            }
+        } else {
+            speaker.innerHTML = '';
+        }
+    }
+}
+window.setInterval(update_room_info, 1000);

pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html

@@ -11,7 +11,7 @@
             <thead class="thead-light">
                 <tr>
                     <th scope="col">{% translate "room" %}</th>
-                    <th scope="col" colspan="2">{% translate "Feature" %}</th>
+                    <th scope="col" colspan="3">{% translate "Feature" %}</th>
                 </tr>
             </thead>
             <tbody>
@@ -20,6 +20,7 @@
                         <th scope="row">{{ room.name }}</th>
                         <td><a href="{% url 'plugins:pretalx_broadcast_tools:lowerthirds' request.event.slug %}#{{ room.uuid }}">{% translate "Lower Thirds" %}</a></td>
                         <td><a href="{% url 'plugins:pretalx_broadcast_tools:room_info' request.event.slug %}#{{ room.uuid }}">{% translate "Room Info" %}</a></td>
+                        <td><a href="{% url 'plugins:pretalx_broadcast_tools:room_timer' request.event.slug %}#{{ room.uuid }}">{% translate "Room Timer" %}</a></td>
                     </tr>
                 {% endfor %}
             </tbody>

pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html

@@ -0,0 +1,25 @@
+{% load static %}
+{% load compress %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html" charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <title>{{ request.event.name }} room timer</title>
+        <script src="{% static "pretalx_broadcast_tools/generic.js" %}"></script>
+        <script src="{% static "pretalx_broadcast_tools/room_timer.js" %}"></script>
+        <link rel="stylesheet" href="{% static "pretalx_broadcast_tools/frontend.css" %}" />
+        {% if request.event and request.event.custom_css %}
+            <link rel="stylesheet" type="text/css" href="{{ request.event.custom_css.url }}"/>
+        {% endif %}
+    </head>
+    <body id="broadcast_tools_room_timer">
+        <div id="broadcast_tools_room_timer_header">
+            <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>
+    </body>
+</html>

pretalx_broadcast_tools/urls.py

@@ -4,7 +4,11 @@ from .views.event_info import BroadcastToolsEventInfoView
 from .views.orga import BroadcastToolsOrgaView
 from .views.qr import BroadcastToolsFeedbackQrCodeSvg, BroadcastToolsPublicQrCodeSvg
 from .views.schedule import BroadcastToolsScheduleView
-from .views.static_html import BroadcastToolsLowerThirdsView, BroadcastToolsRoomInfoView
+from .views.static_html import (
+    BroadcastToolsLowerThirdsView,
+    BroadcastToolsRoomInfoView,
+    BroadcastToolsRoomTimerView,
+)
 from .views.voctomix_export import BroadcastToolsLowerThirdsVoctomixDownloadView
 
 urlpatterns = [
@@ -47,6 +51,11 @@ urlpatterns = [
                     BroadcastToolsRoomInfoView.as_view(),
                     name="room_info",
                 ),
+                path(
+                    "room-timer/",
+                    BroadcastToolsRoomTimerView.as_view(),
+                    name="room_timer",
+                ),
             ],
         ),
     ),

pretalx_broadcast_tools/views/static_html.py

@@ -7,3 +7,7 @@ class BroadcastToolsLowerThirdsView(TemplateView):
 
 class BroadcastToolsRoomInfoView(TemplateView):
     template_name = "pretalx_broadcast_tools/room_info.html"
+
+
+class BroadcastToolsRoomTimerView(TemplateView):
+    template_name = "pretalx_broadcast_tools/room_timer.html"