kunsi/pretalx-plugin-broadcast-tools
1
0
Fork 0
mirror of https://github.com/Kunsi/pretalx-plugin-broadcast-tools synced 2024-11-22 00:51:01 +00:00
Code Releases Activity

room_timer: address some design suggestions

Browse source
This commit is contained in:
Franziska Kunsmann 2024-11-04 15:38:59 +01:00
parent f63603d6de
commit 3addc8b19e
3 changed files with 39 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
pretalx_broadcast_tools/static/pretalx_broadcast_tools/frontend.css
View file

@ -105,13 +105,21 @@ body {
} }
#broadcast_tools_room_timer_timeleft { #broadcast_tools_room_timer_timeleft {
font-size: 20vh; font-size: 6vh;
text-align: center; text-align: center;
} }
#broadcast_tools_room_timer_progressbar { #broadcast_tools_room_timer_timeleft_timer {
font-size: 20vh;
}
#broadcast_tools_room_timer_progressbar, #broadcast_tools_room_timer_progressbar_bar {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 2em; height: 2em;
} }
#broadcast_tools_room_timer_progressbar {
right: 0;
}

31
pretalx_broadcast_tools/static/pretalx_broadcast_tools/room_timer.js
View file

@ -11,8 +11,10 @@ function update_room_info() {
title = document.getElementById('broadcast_tools_room_timer_title'); title = document.getElementById('broadcast_tools_room_timer_title');
speaker = document.getElementById('broadcast_tools_room_timer_speaker'); speaker = document.getElementById('broadcast_tools_room_timer_speaker');
scheduledata = document.getElementById('broadcast_tools_room_timer_scheduledata'); scheduledata = document.getElementById('broadcast_tools_room_timer_scheduledata');
timeleft = document.getElementById('broadcast_tools_room_timer_timeleft'); timeleft = document.getElementById('broadcast_tools_room_timer_timeleft_timer');
timehint = document.getElementById('broadcast_tools_room_timer_timeleft_hint');
progressbar= document.getElementById('broadcast_tools_room_timer_progressbar'); progressbar= document.getElementById('broadcast_tools_room_timer_progressbar');
progressbar_bar = document.getElementById('broadcast_tools_room_timer_progressbar_bar');
box.style.backgroundColor = event_info['color']; box.style.backgroundColor = event_info['color'];
@ -47,9 +49,14 @@ function update_room_info() {
scheduled_start = new Date(current_talk['start']); scheduled_start = new Date(current_talk['start']);
scheduled_end = new Date(current_talk['end']); scheduled_end = new Date(current_talk['end']);
if (scheduled_start > now || scheduled_end < now) { if (scheduled_start > now) {
timeleft.innerHTML = ''; timeleft.innerHTML = '';
progressbar.style.width = '0'; progressbar_bar.style.width = '0';
timehint.innerHTML = '';
} else if (scheduled_end < now) {
timeleft.innerHTML = '0sec';
progressbar_bar.style.width = '100vw';
timehint.innerHTML = 'talk has ended';
} else { } else {
diff = scheduled_end - now; diff = scheduled_end - now;
let diff_s = Math.floor(Math.floor(diff / 1000) % 60/10); let diff_s = Math.floor(Math.floor(diff / 1000) % 60/10);
@ -58,22 +65,26 @@ function update_room_info() {
timeleft.innerHTML = diff_m + 'min ' + diff_s + '0sec'; timeleft.innerHTML = diff_m + 'min ' + diff_s + '0sec';
total_time = scheduled_end - scheduled_start; total_time = scheduled_end - scheduled_start;
progressbar.style.width = (((diff/total_time)*100)-100)*-1 + 'vw'; progressbar_bar.style.width = (((diff/total_time)*100)-100)*-1 + 'vw';
timehint.innerHTML = 'left in this talk';
} }
if (current_talk['track']) { if (current_talk['track']) {
header.style.backgroundColor = current_talk['track']['color']; header.style.backgroundColor = current_talk['track']['color'];
progressbar.style.backgroundColor = current_talk['track']['color']; progressbar.style.borderTop = '2px solid ' + current_talk['track']['color'];
progressbar_bar.style.backgroundColor = current_talk['track']['color'];
} else { } else {
header.style.backgroundColor = null; header.style.backgroundColor = null;
progressbar.style.backgroundColor = event_info['color']; progressbar.style.borderTop = '2px solid white';
progressbar_bar.style.backgroundColor = 'white';
} }
} else { } else {
title.innerHTML = room_name; progressbar.style.borderTop = 'none';
progressbar_bar.style.width = '0';
speaker.innerHTML = 'Break'; speaker.innerHTML = 'Break';
scheduledata.innerHTML = ''; timehint.innerHTML = '';
timeleft.innerHTML = ''; timeleft.innerHTML = '';
progressbar.style.width = '0'; title.innerHTML = room_name;
if (next_talk) { if (next_talk) {
scheduledata.innerHTML = format_time_from_pretalx(next_talk['start']) + ' ' + next_talk['title']; scheduledata.innerHTML = format_time_from_pretalx(next_talk['start']) + ' ' + next_talk['title'];
@ -84,7 +95,7 @@ function update_room_info() {
header.style.backgroundColor = null; header.style.backgroundColor = null;
} }
} else { } else {
speaker.innerHTML = ''; scheduledata.innerHTML = '';
} }
} }
} }

9
pretalx_broadcast_tools/templates/pretalx_broadcast_tools/room_timer.html
View file

@ -19,7 +19,12 @@
<h3 id="broadcast_tools_room_timer_speaker">Content should appear soon. If not, please verify you have Javascript enabled.</h3> <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> <p id="broadcast_tools_room_timer_scheduledata"></p>
</div> </div>
<p id="broadcast_tools_room_timer_timeleft"></p> <div id="broadcast_tools_room_timer_timeleft">
<p id="broadcast_tools_room_timer_progressbar">&nbsp;</p> <p id="broadcast_tools_room_timer_timeleft_timer"></p>
<p id="broadcast_tools_room_timer_timeleft_hint"></p>
</div>
<div id="broadcast_tools_room_timer_progressbar">
<p id="broadcast_tools_room_timer_progressbar_bar">&nbsp;</p>
</div>
</body> </body>
</html> </html>