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

add "room info" url to show on room info screens

This commit is contained in:
Franzi 2023-02-28 09:51:07 +01:00
parent 327981eade
commit de8065cf22
Signed by: kunsi
GPG key ID: 12E3D2136B818350
9 changed files with 238 additions and 81 deletions

View file

@ -2,6 +2,43 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 1.2em; line-height: 1.2em;
color: white;
font-family: "Muli","Open Sans","OpenSans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body {
background-color: black;
}
#broadcast_tools_room_info {
display: flex;
flex-flow: column;
height: 100vh;
}
#broadcast_tools_room_info_header, #broadcast_tools_room_info_qr {
padding: 2em;
text-align: center;
}
#broadcast_tools_room_info_title {
font-size: 6em;
margin-bottom: 0.2em;
font-weight: bold;
}
#broadcast_tools_room_info_speaker {
font-size: 3em;
font-weight: normal;
}
#broadcast_tools_room_info_qr {
flex: 1;
}
#broadcast_tools_room_info_qr img {
background-color: white;
height: 100%;
} }
#l3box { #l3box {
@ -11,9 +48,6 @@
bottom: 80px; bottom: 80px;
left: 50%; left: 50%;
margin-left: -510px; margin-left: -510px;
color: white;
font-family: "Muli","Open Sans","OpenSans","Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 15px; padding: 15px;
box-shadow: 5px 5px 10px 0px rgba(50, 50, 50, 0.75); box-shadow: 5px 5px 10px 0px rgba(50, 50, 50, 0.75);

View file

@ -1,42 +1,11 @@
schedule = null; schedule = null;
room_name = null;
event_info = null; event_info = null;
$(function() { function get_current_talk() {
$('#l3speaker').text('Content will appear soon.'); room_name = get_room_name();
});
function update_lower_third() { if (!room_name) {
try { return null;
hash = decodeURIComponent(window.location.hash.substring(1));
room_name = hash;
} catch (e) {
console.error(e);
return
}
if (!event_info) {
console.warn("Waiting for event info ...");
return
}
if (!schedule) {
$('#l3title').text('Waiting for schedule ...')
return
}
if ('error' in schedule) {
$('#l3title').text('Error')
$('#l3speaker').html(schedule['error'].join('<br>'));
$('#l3info_line').text('');
return
}
if (schedule['rooms'].length > 1 && !schedule['rooms'].includes(room_name)) {
$('#l3title').text('Error')
$('#l3speaker').text('Invalid room_name. Valid names: ' + schedule['rooms'].join(', '));
$('#l3info_line').text('');
return
} }
current_talk = null; current_talk = null;
@ -67,29 +36,23 @@ function update_lower_third() {
} }
} }
if (current_talk) { return current_talk;
$('#l3title').text(current_talk['title']); }
$('#l3speaker').text(current_talk['persons'].join(', '));
$('#l3info_line').text(current_talk['infoline']); function get_room_name() {
} else { room_name = null;
$('#l3title').text(event_info['no_talk']); try {
$('#l3speaker').text(''); hash = decodeURIComponent(window.location.hash.substring(1));
$('#l3info_line').text(''); room_name = hash;
} } catch (e) {
console.error(e);
if (current_talk && current_talk['track']) { }
$('#l3box').css('border-bottom', '10px solid ' + current_talk['track']['color']); return room_name;
} else {
$('#l3box').css('border-bottom', 'none');
}
} }
window.setInterval(update_lower_third, 1000);
function update_schedule() { function update_schedule() {
$.getJSON('../event.json', function(data) { $.getJSON('../event.json', function(data) {
event_info = data; event_info = data;
$('#l3box').css('background-color', data['color']);
}); });
$.getJSON('../schedule.json', function(data) { $.getJSON('../schedule.json', function(data) {
if ('error' in data) { if ('error' in data) {

View file

@ -0,0 +1,45 @@
function update_lower_third() {
room_name = get_room_name();
if (!event_info) {
console.warn("Waiting for event info ...");
return
}
if (!schedule) {
$('#l3title').text('Waiting for schedule ...')
return
}
if ('error' in schedule) {
$('#l3title').text('Error')
$('#l3speaker').html(schedule['error'].join('<br>'));
$('#l3info_line').text('');
return
}
if (schedule['rooms'].length > 1 && !schedule['rooms'].includes(room_name)) {
$('#l3title').text('Error')
$('#l3speaker').text('Invalid room_name. Valid names: ' + schedule['rooms'].join(', '));
$('#l3info_line').text('');
return
}
current_talk = get_current_talk();
if (current_talk) {
$('#l3title').text(current_talk['title']);
$('#l3speaker').text(current_talk['persons'].join(', '));
$('#l3info_line').text(current_talk['infoline']);
} else {
$('#l3title').text(event_info['no_talk']);
$('#l3speaker').text('');
$('#l3info_line').text('');
}
if (current_talk && current_talk['track']) {
$('#l3box').css('border-bottom', '10px solid ' + current_talk['track']['color']);
} else {
$('#l3box').css('border-bottom', 'none');
}
}
window.setInterval(update_lower_third, 1000);

View file

@ -0,0 +1,51 @@
$(function() {
$('#broadcast_tools_room_info_title').text('Content will appear soon.');
$('#broadcast_tools_room_info_speaker').text('');
$('#broadcast_tools_room_info_qr').text('');
});
function update_room_info() {
room_name = get_room_name();
if (!event_info) {
console.warn("Waiting for event info ...");
return
}
if (!schedule) {
$('#broadcast_tools_room_info_speaker').text('Waiting for schedule ...')
return
}
if ('error' in schedule) {
$('#broadcast_tools_room_info_title').text('Error')
$('#broadcast_tools_room_info_speaker').html(schedule['error'].join('<br>'));
$('#broadcast_tools_room_info_qr').text('');
return
}
if (schedule['rooms'].length > 1 && !schedule['rooms'].includes(room_name)) {
$('#broadcast_tools_room_info_title').text('Error')
$('#broadcast_tools_room_info_speaker').text('Invalid room_name. Valid names: ' + schedule['rooms'].join(', '));
$('#broadcast_tools_room_info_qr').text('');
return
}
current_talk = get_current_talk();
if (current_talk) {
$('#broadcast_tools_room_info_title').text(current_talk['title']);
$('#broadcast_tools_room_info_speaker').text(current_talk['persons'].join(', '));
$('#broadcast_tools_room_info_qr').html('<img src="' + current_talk['feedback_qr_url'] + '" alt="Feedback QR Code">');
} else {
$('#broadcast_tools_room_info_title').text(event_info['no_talk']);
$('#broadcast_tools_room_info_speaker').text('');
$('#broadcast_tools_room_info_qr').text('');
}
if (current_talk && current_talk['track']) {
$('#broadcast_tools_room_info').css('background-color', current_talk['track']['color']);
} else {
$('#broadcast_tools_room_info').css('background-color', event_info['color']);
}
}
window.setInterval(update_room_info, 1000);

View file

@ -8,7 +8,8 @@
{% compress js %} {% compress js %}
<script src="{% static "vendored/jquery-3.1.1.js" %}"></script> <script src="{% static "vendored/jquery-3.1.1.js" %}"></script>
{% endcompress %} {% endcompress %}
<script src="{% static "pretalx_broadcast_tools/update.js" %}"></script> <script src="{% static "pretalx_broadcast_tools/generic.js" %}"></script>
<script src="{% static "pretalx_broadcast_tools/lower_thirds.js" %}"></script>
<link rel="stylesheet" href="{% static "pretalx_broadcast_tools/frontend.css" %}" /> <link rel="stylesheet" href="{% static "pretalx_broadcast_tools/frontend.css" %}" />
{% if request.event and request.event.custom_css %} {% if request.event and request.event.custom_css %}
<link rel="stylesheet" type="text/css" href="{{ request.event.custom_css.url }}"/> <link rel="stylesheet" type="text/css" href="{{ request.event.custom_css.url }}"/>

View file

@ -6,6 +6,41 @@
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{% if localized_rooms %}
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">{% trans "room list" %}</th>
<th scope="col" colspan="2">Feature</th>
</tr>
</thead>
<tbody>
{% for room in localized_rooms %}
<tr>
<th scope="row">{{ room }}</th>
<td><a href="{% url 'plugins:pretalx_broadcast_tools:lowerthirds' request.event.slug %}#{{ room }}">Lower Thirds</a></td>
<td><a href="{% url 'plugins:pretalx_broadcast_tools:room_info' request.event.slug %}#{{ room }}">Room Info</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<p>
pretalx will automatically replace some placeholders in your custom
content:
</p>
<dl>
<dt><code>{CODE}</code></dt>
<dd>Use to embed the talk code (<code>MUX9U3</code> for example).</dd>
<dt><code>{EVENT_SLUG}</code></dt>
<dd>Use to embed the event slug.</dd>
<dt><code>{TALK_SLUG}</code></dt>
<dd>Use to embed the talk slug.</dd>
</dl>
<fieldset> <fieldset>
<legend> <legend>
{% translate "Lower thirds" %} {% translate "Lower thirds" %}
@ -17,15 +52,6 @@
lower third. If you set it to an empty string, it will automatically lower third. If you set it to an empty string, it will automatically
hide itself. hide itself.
</p> </p>
{% if localized_rooms %}
<h3>{% trans "room list" %}</h3>
<ul>
{% for room in localized_rooms %}
<li><a href="{% url 'plugins:pretalx_broadcast_tools:lowerthirds' request.event.slug %}#{{ room }}">{{ room }}</a></li>
{% endfor %}
</ul>
{% endif %}
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend> <legend>
@ -37,20 +63,6 @@
{% bootstrap_field form.broadcast_tools_pdf_additional_content layout='event' %} {% bootstrap_field form.broadcast_tools_pdf_additional_content layout='event' %}
</fieldset> </fieldset>
<fieldset> <fieldset>
<p>
pretalx will automatically replace some placeholders in your custom
content:
</p>
<dl>
<dt><code>{CODE}</code></dt>
<dd>Use to embed the talk code (<code>MUX9U3</code> for example).</dd>
<dt><code>{EVENT_SLUG}</code></dt>
<dd>Use to embed the event slug.</dd>
<dt><code>{TALK_SLUG}</code></dt>
<dd>Use to embed the talk slug.</dd>
</dl>
<div class="submit-group panel"> <div class="submit-group panel">
<span></span> <span></span>
<span class="d-flex flex-row-reverse"> <span class="d-flex flex-row-reverse">

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">
<title>{{ request.event.name }} lower thirds</title>
{% compress js %}
<script src="{% static "vendored/jquery-3.1.1.js" %}"></script>
{% endcompress %}
<script src="{% static "pretalx_broadcast_tools/generic.js" %}"></script>
<script src="{% static "pretalx_broadcast_tools/room_info.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_info">
<div id="broadcast_tools_room_info_header">
<h1 id="broadcast_tools_room_info_title">Loading ...</p>
<h2 id="broadcast_tools_room_info_speaker">Content should appear soon. If not, please verify you have Javascript enabled.</h2>
</div>
<div id="broadcast_tools_room_info_qr"></div>
</body>
</html>

View file

@ -14,6 +14,16 @@ urlpatterns = [
views.BroadcastToolsEventInfoView.as_view(), views.BroadcastToolsEventInfoView.as_view(),
name="event_info", name="event_info",
), ),
re_path(
f"^(?P<event>[{SLUG_CHARS}]+)/p/broadcast-tools/feedback-qr/(?P<talk>[0-9]+).svg$",
views.BroadcastToolsFeedbackQrCodeSvg.as_view(),
name="feedback_qr_id",
),
re_path(
f"^(?P<event>[{SLUG_CHARS}]+)/p/broadcast-tools/room-info/$",
views.BroadcastToolsRoomInfoView.as_view(),
name="room_info",
),
re_path( re_path(
f"^(?P<event>[{SLUG_CHARS}]+)/p/broadcast-tools/schedule.json$", f"^(?P<event>[{SLUG_CHARS}]+)/p/broadcast-tools/schedule.json$",
views.BroadcastToolsScheduleView.as_view(), views.BroadcastToolsScheduleView.as_view(),

View file

@ -6,6 +6,7 @@ import qrcode
import qrcode.image.svg import qrcode.image.svg
from django.conf import settings from django.conf import settings
from django.http import HttpResponse, JsonResponse from django.http import HttpResponse, JsonResponse
from django.urls import reverse
from django.utils.safestring import mark_safe from django.utils.safestring import mark_safe
from django.views import View from django.views import View
from django.views.generic import FormView from django.views.generic import FormView
@ -22,6 +23,14 @@ class BroadcastToolsLowerThirdsView(TemplateView):
template_name = "pretalx_broadcast_tools/lower_thirds.html" template_name = "pretalx_broadcast_tools/lower_thirds.html"
class BroadcastToolsRoomInfoView(TemplateView):
template_name = "pretalx_broadcast_tools/room_info.html"
class BroadcastToolsFeedbackQrCode(TemplateView):
template_name = "pretalx_broadcast_tools/feedback_qr.html"
class BroadcastToolsOrgaView(PermissionRequired, FormView): class BroadcastToolsOrgaView(PermissionRequired, FormView):
form_class = BroadcastToolsSettingsForm form_class = BroadcastToolsSettingsForm
permission_required = "orga.change_settings" permission_required = "orga.change_settings"
@ -70,7 +79,7 @@ class BroadcastToolsEventInfoView(View):
) )
class BroadcastToolsFeedbackQrCode(View): class BroadcastToolsFeedbackQrCodeSvg(View):
def get(self, request, *args, **kwargs): def get(self, request, *args, **kwargs):
talk = self.request.event.submissions.filter(id=kwargs["talk"]).first() talk = self.request.event.submissions.filter(id=kwargs["talk"]).first()
domain = request.event.custom_domain or settings.SITE_URL domain = request.event.custom_domain or settings.SITE_URL
@ -124,6 +133,13 @@ class BroadcastToolsScheduleView(EventPermissionRequired, ScheduleMixin, View):
else None, else None,
"room": room["name"].localize(schedule.event.locale), "room": room["name"].localize(schedule.event.locale),
"infoline": infoline.format(**placeholders(schedule, talk)), "infoline": infoline.format(**placeholders(schedule, talk)),
"feedback_qr_url": reverse(
"plugins:pretalx_broadcast_tools:feedback_qr_id",
kwargs={
"event": schedule.event,
"talk": talk.submission.id,
},
),
} }
for day in schedule.data for day in schedule.data
for room in day["rooms"] for room in day["rooms"]