From 9d92add0672f7cbb2a03395187a49540c6eeb833 Mon Sep 17 00:00:00 2001 From: Franziska Kunsmann Date: Sun, 3 Nov 2024 14:44:12 +0100 Subject: [PATCH] add basic "room timer" page --- .../pretalx_broadcast_tools/frontend.css | 36 ++++++++ .../static/pretalx_broadcast_tools/generic.js | 4 +- .../pretalx_broadcast_tools/room_timer.js | 90 +++++++++++++++++++ .../pretalx_broadcast_tools/orga.html | 3 +- .../pretalx_broadcast_tools/room_timer.html | 25 ++++++ pretalx_broadcast_tools/urls.py | 11 ++- pretalx_broadcast_tools/views/static_html.py | 4 + 7 files changed, 169 insertions(+), 4 deletions(-) create mode 100644 pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js create mode 100644 pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css index cefc820..bb8408c 100644 --- a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css +++ b/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; +} diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js index b1d5976..7cd3808 100644 --- a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js +++ b/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']); diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js new file mode 100644 index 0000000..bc55b77 --- /dev/null +++ b/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('
'); + 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); diff --git a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html index a184c51..7cebcbf 100644 --- a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html +++ b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html @@ -11,7 +11,7 @@ {% translate "room" %} - {% translate "Feature" %} + {% translate "Feature" %} @@ -20,6 +20,7 @@ {{ room.name }} {% translate "Lower Thirds" %} {% translate "Room Info" %} + {% translate "Room Timer" %} {% endfor %} diff --git a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html new file mode 100644 index 0000000..50447db --- /dev/null +++ b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html @@ -0,0 +1,25 @@ +{% load static %} +{% load compress %} + + + + + + {{ request.event.name }} room timer + + + + {% if request.event and request.event.custom_css %} + + {% endif %} + + +
+

Loading ...

+

Content should appear soon. If not, please verify you have Javascript enabled.

+

+
+

+

 

+ + diff --git a/pretalx_broadcast_tools/urls.py b/pretalx_broadcast_tools/urls.py index 1d68954..b77b3dc 100644 --- a/pretalx_broadcast_tools/urls.py +++ b/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", + ), ], ), ), diff --git a/pretalx_broadcast_tools/views/static_html.py b/pretalx_broadcast_tools/views/static_html.py index 49d6c0b..d52efd7 100644 --- a/pretalx_broadcast_tools/views/static_html.py +++ b/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"