kunsi/pretalx-plugin-broadcast-tools
1
0
Fork 0
mirror of https://github.com/Kunsi/pretalx-plugin-broadcast-tools synced 2024-11-21 20:21:03 +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 {
font-size: 20vh;
font-size: 6vh;
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;
left: 0;
bottom: 0;
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');
speaker = document.getElementById('broadcast_tools_room_timer_speaker');
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_bar = document.getElementById('broadcast_tools_room_timer_progressbar_bar');
box.style.backgroundColor = event_info['color'];
@ -47,9 +49,14 @@ function update_room_info() {
scheduled_start = new Date(current_talk['start']);
scheduled_end = new Date(current_talk['end']);
if (scheduled_start > now || scheduled_end < now) {
if (scheduled_start > now) {
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 {
diff = scheduled_end - now;
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';
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']) {
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 {
header.style.backgroundColor = null;
progressbar.style.backgroundColor = event_info['color'];
progressbar.style.borderTop = '2px solid white';
progressbar_bar.style.backgroundColor = 'white';
}
} else {
title.innerHTML = room_name;
progressbar.style.borderTop = 'none';
progressbar_bar.style.width = '0';
speaker.innerHTML = 'Break';
scheduledata.innerHTML = '';
timehint.innerHTML = '';
timeleft.innerHTML = '';
progressbar.style.width = '0';
title.innerHTML = room_name;
if (next_talk) {
scheduledata.innerHTML = format_time_from_pretalx(next_talk['start']) + ' ' + next_talk['title'];
@ -84,7 +95,7 @@ function update_room_info() {
header.style.backgroundColor = null;
}
} 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>
<p id="broadcast_tools_room_timer_scheduledata"></p>
</div>
<p id="broadcast_tools_room_timer_timeleft"></p>
<p id="broadcast_tools_room_timer_progressbar">&nbsp;</p>
<div id="broadcast_tools_room_timer_timeleft">
<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>
</html>