1
0
Fork 0
mirror of https://github.com/Kunsi/pretalx-plugin-broadcast-tools synced 2024-11-21 14:41:25 +00:00

add basic "room timer" page

This commit is contained in:
Franzi 2024-11-03 14:44:12 +01:00
parent c0b3bdb55e
commit 9d92add067
Signed by: kunsi
GPG key ID: 12E3D2136B818350
7 changed files with 169 additions and 4 deletions

View file

@ -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;
}

View file

@ -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']);

View file

@ -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);

View file

@ -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>

View file

@ -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>

View file

@ -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",
),
],
),
),

View file

@ -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"