lower thirds: change css selectors to be similar to the others

This commit is contained in:
Franzi 2023-03-29 10:33:07 +02:00
parent 6c058cca1f
commit ab42dade2b
Signed by: kunsi
GPG Key ID: 12E3D2136B818350
4 changed files with 32 additions and 25 deletions

View File

@ -3,6 +3,13 @@
* room info page can now show more content on the lower half of the view
* **BREAKING:** The option to select which content should be shown
is now a ChoiceField, the old setting will be ignored.
* **BREAKING:** lower thirds now use css selectors using the same rules
as the other css selectors
* `#l3box` is now `#broadcast_tools_lower_thirds_box`
* `#l3info_line` is now `#broadcast_tools_lower_thirds_infoline`
* `#l3speaker` is now `#broadcast_tools_lower_thirds_speaker`
* `#l3title` is now `#broadcast_tools_lower_thirds_title`
* `.lower3rd` is now `broadcast_tools_lower_thirds`
# 1.1.0

View File

@ -52,7 +52,7 @@ body {
margin-top: 1em;
}
#l3box {
#broadcast_tools_lower_thirds_box {
width: 1020px;
position: absolute;
@ -65,17 +65,17 @@ body {
background-color: #3aa57c;
}
#l3title {
#broadcast_tools_lower_thirds_title {
font-size: 30px;
font-weight: 500;
margin-bottom: 15px;
}
#l3speaker {
#broadcast_tools_lower_thirds_speaker {
font-size: 20px;
}
#l3info_line {
#broadcast_tools_lower_thirds_infoline {
font-size: 16px;
text-align: right;
}

View File

@ -6,42 +6,42 @@ function update_lower_third() {
return
}
$('#l3box').css('background-color', event_info['color']);
$('#broadcast_tools_lower_thirds_box').css('background-color', event_info['color']);
if (!schedule) {
$('#l3title').text('Waiting for schedule ...')
$('#broadcast_tools_lower_thirds_title').text('Waiting for schedule ...')
return
}
if ('error' in schedule) {
$('#l3title').text('Error')
$('#l3speaker').html(schedule['error'].join('<br>'));
$('#l3info_line').text('');
$('#broadcast_tools_lower_thirds_title').text('Error')
$('#broadcast_tools_lower_thirds_speaker').html(schedule['error'].join('<br>'));
$('#broadcast_tools_lower_thirds_infoline').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('');
$('#broadcast_tools_lower_thirds_title').text('Error')
$('#broadcast_tools_lower_thirds_speaker').text('Invalid room_name. Valid names: ' + schedule['rooms'].join(', '));
$('#broadcast_tools_lower_thirds_infoline').text('');
return
}
current_talk = get_current_talk(5);
if (current_talk) {
$('#l3title').text(current_talk['title']);
$('#l3speaker').text(current_talk['persons'].join(', '));
$('#l3info_line').text(current_talk['infoline']);
$('#broadcast_tools_lower_thirds_title').text(current_talk['title']);
$('#broadcast_tools_lower_thirds_speaker').text(current_talk['persons'].join(', '));
$('#broadcast_tools_lower_thirds_infoline').text(current_talk['infoline']);
} else {
$('#l3title').text(event_info['no_talk']);
$('#l3speaker').text('');
$('#l3info_line').text('');
$('#broadcast_tools_lower_thirds_title').text(event_info['no_talk']);
$('#broadcast_tools_lower_thirds_speaker').text('');
$('#broadcast_tools_lower_thirds_infoline').text('');
}
if (current_talk && current_talk['track']) {
$('#l3box').css('border-bottom', '10px solid ' + current_talk['track']['color']);
$('#broadcast_tools_lower_thirds_box').css('border-bottom', '10px solid ' + current_talk['track']['color']);
} else {
$('#l3box').css('border-bottom', 'none');
$('#broadcast_tools_lower_thirds_box').css('border-bottom', 'none');
}
}
window.setInterval(update_lower_third, 1000);

View File

@ -16,11 +16,11 @@
<link rel="stylesheet" type="text/css" href="{{ request.event.custom_css.url }}"/>
{% endif %}
</head>
<body class="lower3rd">
<div id="l3box">
<p id="l3title">Loading ...</p>
<p id="l3speaker">Content should appear soon. If not, please verify you have Javascript enabled.</p>
<p id="l3info_line"></p>
<body id="broadcast_tools_lower_thirds">
<div id="broadcast_tools_lower_thirds_box">
<p id="broadcast_tools_lower_thirds_title">Loading ...</p>
<p id="broadcast_tools_lower_thirds_speaker">Content should appear soon. If not, please verify you have Javascript enabled.</p>
<p id="broadcast_tools_lower_thirds_infoline"></p>
</div>
</body>
</html>