Main Stage: Agenda Updater for UpNext / Live
The following script can be included on a main stage to automate the live now functionality.
1
<script src="https://front-end-repo.s3.amazonaws.com/mainstageLive.js"></script>
This script adds specific classes to main stage agenda items based on their start/end times and the user's device time. The classes added are:
- upNext - This agenda item is the next item that has not occured yet
- live - This agenda item is currently live
- expired - This agenda item has finished
Some example css below:
1
.agenda-item, .item {display:none}
2
.agenda-item.live, .agenda-item.upNext, .item.live, .item.upNext, {display:block;}
_____
Source below:
1
function checkTimes() {
2
let now = moment().format('YYYY-MM-DD HH:mm:ss');
3
4
$('.agenda-item, .item').each(function() {
5
let timeStart = ""
6
let timeEnd = ""
7
let date = ""
8
let itemStart = ""
9
let itemEnd = ""
10
11
//New agenda plugin uses this format
12
if ( $(this).hasClass('agenda-item') ) {
13
timeStart = $(this).attr('data-start')
14
timeEnd = $(this).attr('data-end')
15
date = $(this).attr('data-date')
16
itemStart = moment(date + ' ' + timeStart).format('YYYY-MM-DD HH:mm:ss');
17
itemEnd = moment(date + ' ' + timeEnd).format('YYYY-MM-DD HH:mm:ss');
18
}
19
20
//Old schedule script uses this format
21
if ( $(this).hasClass('item') ) {
22
timeStart = $(this).attr('data-date-start')
23
timeEnd = $(this).attr('data-date-end')
24
itemStart = moment(timeStart).format('YYYY-MM-DD HH:mm:ss');
25
itemEnd = moment(timeEnd).format('YYYY-MM-DD HH:mm:ss');
26
}
27
28
// Check if end time is before start time - if so the this item crosses midnight so we add one day to the end time
29
if ( moment(itemEnd,"YYYY-MM-DD HH:mm:ss").isBefore(moment(itemStart,"YYYY-MM-DD HH:mm:ss")) ) {
30
itemEnd = moment(itemEnd,'YYYY-MM-DD HH:mm:ss').add(1, 'days').format('YYYY-MM-DD HH:mm:ss');
31
}
32
33
//Start and end times have both passed, this item is now over
34
if ( moment(now,"YYYY-MM-DD HH:mm:ss").isAfter(itemStart) && moment(now,"YYYY-MM-DD HH:mm:ss").isAfter(itemEnd) ) {
35
$(this).addClass('expired').removeClass('live upNext');
36
}
37
38
//Start time has passed but end time has not, this item is currently live
39
if ( moment(now,"YYYY-MM-DD HH:mm:ss").isAfter(itemStart) && moment(now,"YYYY-MM-DD HH:mm:ss").isBefore(itemEnd) ) {
40
$(this).addClass('live');
41
}
42
43
//Set the next agenda item as up next
44
$(".agenda-item:not(.expired):eq(0)").addClass('upNext');
45
$(".item:not(.expired):eq(0), .item:not(.expired):eq(1)").addClass('upNext');
46
}
47
48
$(function () {
49
setInterval(checkTimes, 1000); //Run every XXXX ms
50
});