From de8065cf22ec2197deb02329862a72751479891a Mon Sep 17 00:00:00 2001 From: Franziska Kunsmann Date: Tue, 28 Feb 2023 09:51:07 +0100 Subject: [PATCH] add "room info" url to show on room info screens --- .../pretalx_broadcast_tools/frontend.css | 40 ++++++++++- .../{update.js => generic.js} | 69 +++++-------------- .../pretalx_broadcast_tools/lower_thirds.js | 45 ++++++++++++ .../pretalx_broadcast_tools/room_info.js | 51 ++++++++++++++ .../pretalx_broadcast_tools/lower_thirds.html | 3 +- .../pretalx_broadcast_tools/orga.html | 58 +++++++++------- .../pretalx_broadcast_tools/room_info.html | 25 +++++++ pretalx_broadcast_tools/urls.py | 10 +++ pretalx_broadcast_tools/views.py | 18 ++++- 9 files changed, 238 insertions(+), 81 deletions(-) rename pretalx_broadcast_tools/static/pretalx_broadcast_tools/{update.js => generic.js} (50%) create mode 100644 pretalx_broadcast_tools/static/pretalx_broadcast_tools/lower_thirds.js create mode 100644 pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_info.js create mode 100644 pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_info.html diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css index a939923..e1d0c47 100644 --- a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css +++ b/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); diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/update.js b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js similarity index 50% rename from pretalx_broadcast_tools/static/pretalx_broadcast_tools/update.js rename to pretalx_broadcast_tools/static/pretalx_broadcast_tools/generic.js index 22a6acf..1f0d06f 100644 --- a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/update.js +++ b/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('
')); - $('#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) { diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/lower_thirds.js b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/lower_thirds.js new file mode 100644 index 0000000..7e66bf9 --- /dev/null +++ b/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('
')); + $('#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); diff --git a/pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_info.js b/pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_info.js new file mode 100644 index 0000000..1609bd9 --- /dev/null +++ b/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('
')); + $('#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('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); diff --git a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/lower_thirds.html b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/lower_thirds.html index 68c3b41..a6d8d6e 100644 --- a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/lower_thirds.html +++ b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/lower_thirds.html @@ -8,7 +8,8 @@ {% compress js %} {% endcompress %} - + + {% if request.event and request.event.custom_css %} diff --git a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html index cb20693..15077ff 100644 --- a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html +++ b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/orga.html @@ -6,6 +6,41 @@
{% csrf_token %} + {% if localized_rooms %} + + + + + + + + + {% for room in localized_rooms %} + + + + + + {% endfor %} + +
{% trans "room list" %}Feature
{{ room }}Lower ThirdsRoom Info
+ {% endif %} + +

+ pretalx will automatically replace some placeholders in your custom + content: +

+
+
{CODE}
+
Use to embed the talk code (MUX9U3 for example).
+ +
{EVENT_SLUG}
+
Use to embed the event slug.
+ +
{TALK_SLUG}
+
Use to embed the talk slug.
+
+
{% translate "Lower thirds" %} @@ -17,15 +52,6 @@ lower third. If you set it to an empty string, it will automatically hide itself.

- - {% if localized_rooms %} -

{% trans "room list" %}

-
    - {% for room in localized_rooms %} -
  • {{ room }}
    • - {% endfor %} -
- {% endif %}
@@ -37,20 +63,6 @@ {% bootstrap_field form.broadcast_tools_pdf_additional_content layout='event' %}
-

- pretalx will automatically replace some placeholders in your custom - content: -

-
-
{CODE}
-
Use to embed the talk code (MUX9U3 for example).
- -
{EVENT_SLUG}
-
Use to embed the event slug.
- -
{TALK_SLUG}
-
Use to embed the talk slug.
-
diff --git a/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_info.html b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_info.html new file mode 100644 index 0000000..6154c99 --- /dev/null +++ b/pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_info.html @@ -0,0 +1,25 @@ +{% load static %} +{% load compress %} + + + + + {{ request.event.name }} lower thirds + {% compress js %} + + {% endcompress %} + + + + {% 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 8445b01..1ca3ee1 100644 --- a/pretalx_broadcast_tools/urls.py +++ b/pretalx_broadcast_tools/urls.py @@ -14,6 +14,16 @@ urlpatterns = [ views.BroadcastToolsEventInfoView.as_view(), name="event_info", ), + re_path( + f"^(?P[{SLUG_CHARS}]+)/p/broadcast-tools/feedback-qr/(?P[0-9]+).svg$", + views.BroadcastToolsFeedbackQrCodeSvg.as_view(), + name="feedback_qr_id", + ), + re_path( + f"^(?P[{SLUG_CHARS}]+)/p/broadcast-tools/room-info/$", + views.BroadcastToolsRoomInfoView.as_view(), + name="room_info", + ), re_path( f"^(?P[{SLUG_CHARS}]+)/p/broadcast-tools/schedule.json$", views.BroadcastToolsScheduleView.as_view(), diff --git a/pretalx_broadcast_tools/views.py b/pretalx_broadcast_tools/views.py index 2c76d2e..0d71408 100644 --- a/pretalx_broadcast_tools/views.py +++ b/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"]