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

pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css

@@ -2,6 +2,43 @@
     margin: 0;
     padding: 0;
     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 {
@@ -11,9 +48,6 @@
     bottom: 80px;
     left: 50%;
     margin-left: -510px;
-
-    color: white;
-    font-family: "Muli","Open Sans","OpenSans","Helvetica Neue",Helvetica,Arial,sans-serif;
     padding: 15px;
 
     box-shadow: 5px 5px 10px 0px rgba(50, 50, 50, 0.75);

pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js

@@ -1,42 +1,11 @@
 schedule = null;
-room_name = null;
 event_info = null;
 
-$(function() {
-    $('#l3speaker').text('Content will appear soon.');
-});
+function get_current_talk() {
+    room_name = get_room_name();
 
-function update_lower_third() {
-    try {
-        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
+    if (!room_name) {
+        return null;
     }
 
     current_talk = null;
@@ -67,29 +36,23 @@ function update_lower_third() {
         }
     }
 
-    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');
-    }
+    return current_talk;
+}
+
+function get_room_name() {
+    room_name = null;
+    try {
+        hash = decodeURIComponent(window.location.hash.substring(1));
+        room_name = hash;
+    } catch (e) {
+        console.error(e);
+    }
+    return room_name;
 }
-window.setInterval(update_lower_third, 1000);
 
 function update_schedule() {
     $.getJSON('../event.json', function(data) {
         event_info = data;
-
-        $('#l3box').css('background-color', data['color']);
     });
     $.getJSON('../schedule.json', function(data) {
         if ('error' in data) {

pretalx_broadcast_tools/static/pretalx_broadcast_tools/lower_thirds.js

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

pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_info.js

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

pretalx_broadcast_tools/templates/pretalx_broadcast_tools/lower_thirds.html

@@ -8,7 +8,8 @@
         {% compress js %}
             <script src="{% static "vendored/jquery-3.1.1.js" %}"></script>
         {% 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" %}" />
         {% if request.event and request.event.custom_css %}
             <link rel="stylesheet" type="text/css" href="{{ request.event.custom_css.url }}"/>

pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html

@@ -6,6 +6,41 @@
     <form method="post">
         {% 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>
             <legend>
                 {% translate "Lower thirds" %}
@@ -17,15 +52,6 @@
                 lower third. If you set it to an empty string, it will automatically
                 hide itself.
             </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>
             <legend>
@@ -37,20 +63,6 @@
             {% bootstrap_field form.broadcast_tools_pdf_additional_content layout='event' %}
         </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">
                 <span></span>
                 <span class="d-flex flex-row-reverse">

pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_info.html

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

pretalx_broadcast_tools/urls.py

@@ -14,6 +14,16 @@ urlpatterns = [
         views.BroadcastToolsEventInfoView.as_view(),
         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(
         f"^(?P<event>[{SLUG_CHARS}]+)/p/broadcast-tools/schedule.json$",
         views.BroadcastToolsScheduleView.as_view(),

pretalx_broadcast_tools/views.py

@@ -6,6 +6,7 @@ import qrcode
 import qrcode.image.svg
 from django.conf import settings
 from django.http import HttpResponse, JsonResponse
+from django.urls import reverse
 from django.utils.safestring import mark_safe
 from django.views import View
 from django.views.generic import FormView
@@ -22,6 +23,14 @@ class BroadcastToolsLowerThirdsView(TemplateView):
     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):
     form_class = BroadcastToolsSettingsForm
     permission_required = "orga.change_settings"
@@ -70,7 +79,7 @@ class BroadcastToolsEventInfoView(View):
         )
 
 
-class BroadcastToolsFeedbackQrCode(View):
+class BroadcastToolsFeedbackQrCodeSvg(View):
     def get(self, request, *args, **kwargs):
         talk = self.request.event.submissions.filter(id=kwargs["talk"]).first()
         domain = request.event.custom_domain or settings.SITE_URL
@@ -124,6 +133,13 @@ class BroadcastToolsScheduleView(EventPermissionRequired, ScheduleMixin, View):
                             else None,
                             "room": room["name"].localize(schedule.event.locale),
                             "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 room in day["rooms"]