jekyll-theme-conference 2.5.4 → 3.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbbe3c769ff41772597a229dc226732d868691b98d006c4767a569a4ef0b4d14
-  data.tar.gz: ffd668e698af13d076e91823355b69550a0e0486cee4b0be54c0db7f5c1a5916
+  metadata.gz: d6b3c4e4f2dd3a6f1d5964ff2dfccad58d737a96c58a4d34c7ee506d8ed50a07
+  data.tar.gz: a2f1f59ff4abbe070bc95702001270fc56e6abdb3e3e8fc274705d1bf9a4661c
 SHA512:
-  metadata.gz: 54b43f0628ab99bf3c509bb75f7fab9d9bd390f41c1ac377f29e1f2f6a46f456b2281c74368fd6fad970e3d0f6a9043bb3831ffaeef4744177343006119427d5
-  data.tar.gz: 8b109d80ee5ae3810cacb223840414953c757b91e50dac38b7c66d840277a937a263cfb4e2b72bb0dcd541223b24500418e461b859274849bb41af9025e22907
+  metadata.gz: b3424868268f6ff9003ae4a913f4d7985413db330bc2b8b4a4d94a15d39d496d5c21083e94e29d3242c56ae4f536d366b306cb7a2d80e5aedc3376c84b8332f6
+  data.tar.gz: 387fa9c0e9a183949314c800397a56c1e41f231301dfed0396751257f036ab4e2be319f98f67f06ea56897b0f72b54facb590664775822a6c280632008d48081

data/README.md

@@ -2,17 +2,16 @@
 
 ![Screenshot](screenshot.png)
 
-This is a [Jekyll](http://jekyllrb.com) theme based on [Bootstrap 4](http://getbootstrap.com) which can be used to make a simple, responsive website for a one-day conference or workshop with parallel tracks containing:
+This is a responsive [Jekyll](http://jekyllrb.com) theme based on [Bootstrap 4](http://getbootstrap.com) for conferences. It contains
 
-- program / schedule,
-- talk and speaker descriptions with
-  + links to slides, and
-  + embedded recordings,
+- multiday program / schedule,
+- talk and speaker descriptions,
 - map for directions,
-- live indication and embedded video streaming.
+- realtime live indications during the conference, and
+- supports embedded video streaming or recordings.
 
-All components such as talks, speakers or rooms are represented as collection of files. The schedule is given is defined via a simple structure stored in a [YAML](https://en.wikipedia.org/wiki/YAML) file. There is no need for databases and once generated the website consists only of static files. A script and workflows are available for easy import, e.g. [frab](https://github.com/frab/frab/wiki/Manual#introduction) compatible schedules.
-The design is easily modifiable and is adapted for mobile uses and printing.
+All components such as talks, speakers or rooms are represented as collection of files. The schedule is given is defined via a simple structure stored in a [YAML](https://en.wikipedia.org/wiki/YAML) file. There is no need for databases and once generated the website consists only of static files. A script and workflows are available for easy import, e.g. of [frab](https://github.com/frab/frab/wiki/Manual#introduction) compatible schedules.
+The design is easily customizable and is adapted for mobile uses and printing.
 
 The theme was originally created for the yearly Winterkongress conference of the [Digital Society Switzerland](https://digitale-gesellschaft.ch/). You can see this theme in action here:
 
@@ -139,14 +138,6 @@ To get started, simply copy the desired workflow file to your repository and ada
 
 - `_tools/build.yml` -> `.github/workflows/build.yml`
 
-Hidden rooms, speakers, or talks are automatically generated in way containing no content. In order to remove these empty files simply add a file called `delete_hidden.sh` to the root with the following content. It will automatically called by the `build` workflow (if available) to delete the files.
-
-```markdown
----
-layout: delete_hidden
----
-```
-
 
 ## Configuration
 
@@ -330,21 +321,23 @@ In order to help users navigating the program during the congress, a _Live_ indi
 
 This can be further extended if some of the talks have an associated live stream: Upon clicking one of the live indications a modal will open containing the corresponding live stream embedded. The URL to the live stream has to be set via `live` property in each room (see the _Content_ > _Room_ section below).
 
-In order to activate the functionality the `live` property has to be set containing
+In order to activate the functionality, each day in the `program.yml` file must contain a `date` property (see section _Content_ > _Schedule / Program_ below) and the `live` property has to be set in the configuration file containing
 
-- the date of the day at which the conference takes place (`date`),
-- the timezone in which the conference takes place (`timezone`),
-- optionally if streaming is enabled (`streaming`) with indications how many minutes early the stream will begin and end, and
+- how long a pause between two consecutive talks has to be for the live indication to pause (`time_stop`),
+- optionally if streaming is enabled (`streaming`) with indications
+  + how many minutes the stream goes active before a talk (`time_prepend`),
+  + how many minutes the stream stays active after a talk (`time_extend`), and
+  + how long a pause between two consecutive talks has to be for the stream to pause (`time_pause`),
 - optionally a demo mode setting, whereby the JavaScript function cycles through the entire program in five minutes for demonstration purposes (`demo: true`, default: `false`).
 
 ```yaml
 conference:
   live:
-    date: 01.01.2020
-    timezone: GMT+1
+    time_stop: 240      # in minutes
     streaming:
-      start_early: 15  # in minutes
-      end_late:     0  # in minutes
+      time_pause:   60  # in minutes
+      time_prepend:  5  # in minutes
+      time_extend:   5  # in minutes
     demo: false
 ```
 
@@ -466,33 +459,52 @@ The actual schedule defining when and in which room a talk takes place is stored
 
 ### Schedule / Program
 
-The schedule of the conference linking the talks with the rooms and indicating when each talk talks place and how long it goes is set in the `_data/program.yml` file. It consists of an array of rooms each consisting of a
+The schedule of the conference linking the talks with the rooms and indicating when each talk talks place and how long it goes is set in the `_data/program.yml` file. It contains a list of days, whereby each day contains a list of rooms, whereby each room contains a list of talks.
+
+Each day consists of
+
+- a list of rooms (`rooms`) in which talks are taking place on that day
+- optionally, the day's `name`, e.g. the weekday
+- optionally, the short form of the day's name (`abbr`), and
+- optionally only if no live indications are active, a `date` in the format `YYYY-MM-DD`.
 
-- `room` name (must correspond to one of the room identifier), and
-- an array of `talks` which also can be empty `[]`.
+Each room consists of
 
-The order of the room in the file defines the order of the rooms on the website (program and room listings). Each talk in the array consists of
+- the room's `name` (must correspond to one of the room identifier), and
+- a list of talks (`talks`) which also can be empty `[]`.
+
+The order of the rooms in the list defines the order of the rooms as shown in the schedule on the program page. For the live streaming or the room overview the order of the rooms is alphabetical but can be adapted via the [main configuration file](https://jekyllrb.com/docs/collections/#sort-by-front-matter-key).
+
+Each talk consists of
 
 - a `name` (must correspond to one of the talk identifier),
 - a starting time `time_start` given as `H:M` ([`strftime`](http://www.strfti.me) formated), and
 - an end time `time_end`.
 
-The array should (manually) be ordered by time. Currently talks can only take place on the same day and multi-day conferences are not supported.
+The list of talks should (manually) be ordered by time, i.e. the first occurring talk should be listed first.
 
 Example:
 
 ```yaml
-- room: Room A
-  talks:
-    - name: Vim Impetus Placerat Cotidieque Ad
-      time_start: '12:00'
-      time_end: '12:45'
-    - name: Condimentum Vitae Sapien Pellentesque
-      time_start: '12:45'
-      time_end: '13:30'
-- room: Room B
-  talks:
-    ...
+days:
+- name: Monday
+  abbr: Mo
+  date: 2020-01-31
+  rooms:
+  - name: Room A
+    talks:
+      - name: Vim Impetus Placerat Cotidieque Ad
+        time_start: '12:00'
+        time_end: '12:45'
+      - name: Condimentum Vitae Sapien Pellentesque
+        time_start: '12:45'
+        time_end: '13:30'
+
+  - name: Room B
+    talks:
+      - name: Arcu Non Odio
+        time_start: '12:00'
+        time_end: '13:00'
 ```
 
 ### Talks
@@ -540,7 +552,7 @@ Links are used at different location throughout the theme: They can either be us
 Additionally, a navigation bar or main landing page link can also have the following properties:
 
 - `menu` containing another list of links. This creates a dropdown menu of multiple sublinks. The sublinks have the same properties as regular links, or
-- `live` making the link only visible during the conference and adds a live indication. The `name` property can be omitted. If streaming is enabled and any URL property is omitted, a click on the link will open the streaming modal (see section _Live Indications_ above).
+- `live` making the link only visible during the conference and adds a live indication. The `name` property can be omitted. Using the optional `name_inactive` property shows a placeholder text while the conference is **not** live. If streaming is enabled and any URL property is omitted, a click on the link will open the streaming modal (see section _Live Indications_ above).
 
 Using the `file:` indicator, the relative address is automatically set as well as the icon. Using the `video:` indicator, the link is automatically configured to open in an iframe with a corresponding title and the icon is set.
 

data/_includes/js/conference-live.js

@@ -1,14 +1,23 @@
-    window.conference.live = (function() {
-    {%- include partials/get_conf_time.html -%}
-    {%- assign time_start = conf_start -%}
-    {%- assign time_end = conf_end -%}
-    {%- include partials/get_timestamp.html -%}
-
-    let confStart = {{ timestamp_start }};
-    let confEnd = {{ timestamp_end }};
-    let confDur = confEnd - confStart;
+window.conference.live = (function() {
+    {% assign d = site.data.program.days | first -%}
+    {%- include partials/get_day_time.html -%}
+    {%- assign t = day_start_talk -%}
+
+    {%- include partials/get_talk_timestamp.html -%}
+    {%- assign conf_start = timestamp_start -%}
+
+    {%- assign d = site.data.program.days | last -%}
+    {%- include partials/get_day_time.html -%}
+    {%- assign t = day_end_talk -%}
 
-    let talkAnnounce = 120;  // in minutes
+    {%- include partials/get_talk_timestamp.html -%}
+    {%- assign conf_end = timestamp_end -%}
+
+    let data;
+
+    let confStart = {{ conf_start }};
+    let confEnd = {{ conf_end }};
+    let confDur = confEnd - confStart;
 
     let freezeTime = false;
     let timeFrozen = 0;
@@ -22,9 +31,19 @@
     let demoEnd = confEnd + confDur/durDemo*durPause;
 
     let liveTimer;
-    let streamTimer;
+    let streamVideoTimer;
     let streamInfoTimer;
 
+    let loadData = function () {
+        $.getJSON('{{ site.baseurl }}/assets/js/data.json', function(json) {
+            data = json;
+        });
+    };
+
+    let getData = function () {
+        return data;
+    };
+
     let mod = function (n, m) {
         return ((n % m) + m) % m;
     };
@@ -80,10 +99,22 @@
         startUpdate();
     };
 
-    let setTime = function (newTime) {
+    let setTime = function (newTime, newDay=1) {
         pauseTime();
 
-        let d = new Date(confStart * 1000);
+        let dayIdx;
+        if (Number.isInteger(newDay)) {
+            dayIdx = newDay-1;
+        }
+        else if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(newDay)) {
+            dayIdx = data.days.find(o => o.name === newDay);
+        }
+        else {
+            dayIdx = data.days.find(o => o.name === newDay);
+        }
+        newDate = data.days[dayIdx].date;
+
+        let d = new Date(newDate);
         newTime = newTime.split(':');
         d.setHours(newTime[0], newTime[1]);
 
@@ -92,12 +123,13 @@
         update();
     };
 
-    let getTime = function (tConvert = time()) {
+    let getTime = function (tConvert=time()) {
         let d = new Date(tConvert * 1000);
+        let dStr = d.toISOString().slice(0,10);
         let h = d.getHours();
         let m = d.getMinutes();
 
-        return h + ":" + (m < 10 ? "0" : "") + m;
+        return dStr +" "+ h +":"+ (m < 10 ? "0" : "") + m;
     };
 
     let timeUnit = function () {
@@ -145,32 +177,38 @@
         let livePast = document.getElementsByClassName('live-past');
 
         for (let i = 0; i < liveShow.length; i++) {
-            let tStart = liveShow[i].dataset.start;
-            let tEnd = liveShow[i].dataset.end;
+            let tStarts = liveShow[i].dataset.start.split(',');
+            let tEnds = liveShow[i].dataset.end.split(',');
 
-            if (tNow >= tStart && tNow < tEnd) {
-                // Show when active
-                liveShow[i].classList.remove('d-none');
-            }
-            else if (!liveShow[i].classList.contains('d-none')) {
-                // Hide otherwise
-                liveShow[i].classList.add('d-none');
+            for (let k = 0; k < tStarts.length; k++) {
+                if (tNow >= tStarts[k] && tNow < tEnds[k]) {
+                    // Show when active
+                    liveShow[i].classList.remove('d-none');
+                    break;
+                }
+                else if (!liveShow[i].classList.contains('d-none')) {
+                    // Hide otherwise
+                    liveShow[i].classList.add('d-none');
+                }
             }
         }
 
         for (let i = 0; i < liveHide.length; i++) {
-            let tStart = liveHide[i].dataset.start;
-            let tEnd = liveHide[i].dataset.end;
-
-            if (tNow >= tStart && tNow < tEnd) {
-                // Hide when active
-                if (!liveHide[i].classList.contains('d-none')) {
-                    liveHide[i].classList.add('d-none');
+            let tStarts = liveHide[i].dataset.start.split(',');
+            let tEnds = liveHide[i].dataset.end.split(',');
+
+            for (let k = 0; k < tStarts.length; k++) {
+                if (tNow >= tStarts[k] && tNow < tEnds[k]) {
+                    // Hide when active
+                    if (!liveHide[i].classList.contains('d-none')) {
+                        liveHide[i].classList.add('d-none');
+                        break;
+                    }
+                }
+                else {
+                    // Show otherwise
+                    liveHide[i].classList.remove('d-none');
                 }
-            }
-            else {
-                // Show otherwise
-                liveHide[i].classList.remove('d-none');
             }
         }
 
@@ -281,101 +319,150 @@
     };
 
     {% if site.conference.live.streaming -%}
-        {% include js/conference-data.js %}
+        let streamPause   = {{ site.conference.live.streaming.time_pause | default: 60 }};  // in minutes
+        let streamPrepend = {{ site.conference.live.streaming.time_prepend | default: 5 }};  // in minutes
+        let streamExtend  = {{ site.conference.live.streaming.time_extend | default: 5 }};  // in minutes
 
         let streamModal;
 
         let getRoom = function (roomName) {
-            if (roomName in rooms) {
-                return rooms[roomName];
+            if (roomName in data.rooms) {
+                return data.rooms[roomName];
             }
             else {
-                return rooms[Object.keys(rooms)[0]];
+                return data.rooms[Object.keys(data.rooms)[0]];
             }
         };
 
-        let preStartStream = function (roomName) {
-            let room = getRoom(roomName);
-
-            streamModal.find('iframe').attr('src', '');
-            streamModal.find('iframe').addClass('d-none');
-            streamModal.find('#stream-placeholder > div').text('{{ site.data.lang[site.conference.lang].live.pre_stream | default: "Live stream has not started yet." }}');
-            streamModal.find('#stream-placeholder').addClass('d-flex');
+        let getNextTalk = function (roomName) {
+            let timeNow = time();
+            let talksHere = data.talks[roomName];
 
-            if (typeof streamTimer !== "undefined") {
-                clearInterval(streamTimer);
+            if (typeof talksHere !== "undefined") {
+                if (timeNow < talksHere[talksHere.length-1].end) {
+                    for (var i = 0; i < talksHere.length; i++) {
+                        if (timeNow < talksHere[i].end) {
+                            return talksHere[i];
+                        }
+                    }
+                }
             }
-            if (!freezeTime) {
-                streamTimer = setTimeout(activeStream, delayStart(room.start) * 1000, roomName);
+            return false;
+        };
+
+        let getNextPause = function (roomName) {
+            let timeNow = time();
+            let talksHere = data.talks[roomName];
+
+            if (typeof talksHere !== "undefined") {
+                if (timeNow < talksHere[talksHere.length-1].end) {
+                    for (var i = 1; i < talksHere.length; i++) {
+                        if (timeNow < talksHere[i].start && streamPause*60 <= talksHere[i].start - talksHere[i-1].end) {
+                            return {
+                                'start': talksHere[i-1].end,
+                                'end':   talksHere[i].start,
+                            };
+                        }
+                    }
+                }
             }
+            return false;
         };
 
-        let activeStream = function (roomName) {
-            let room = getRoom(roomName);
+        let setStreamContent = function (content) {
+            streamModal.find('iframe').attr('src', '');
+            streamModal.find('iframe').addClass('d-none');
+            streamModal.find('#stream-placeholder > div').text(content);
+            streamModal.find('#stream-placeholder').addClass('d-flex');
+        };
 
-            streamModal.find('iframe').attr('src', room.href);
+        let setStreamSrc = function (href) {
+            streamModal.find('iframe').attr('src', href);
             streamModal.find('#stream-placeholder').addClass('d-none').removeClass('d-flex');
             streamModal.find('iframe').removeClass('d-none');
+        };
 
-            if (typeof streamTimer !== "undefined") {
-                clearInterval(streamTimer);
-            }
-            if (!freezeTime) {
-                streamTimer = setTimeout(postEndStream, delayStart(room.end) * 1000, roomName);
+        let setStreamVideo = function (roomName) {
+            let timeNow = time();
+
+            let talksHere = data.talks[roomName];
+            let roomStart = talksHere[0].start;
+            let roomEnd = talksHere[talksHere.length-1].end;
+
+            if (typeof streamVideoTimer !== "undefined") {
+                clearInterval(streamVideoTimer);
             }
-        };
 
-        let postEndStream = function (roomName) {
-            let room = getRoom(roomName);
+            // Conference not yet started
+            if (timeNow < roomStart - streamPrepend*60) {
+                setStreamContent('{{ site.data.lang[site.conference.lang].live.pre_stream | default: "Live stream has not started yet." }}');
 
-            streamModal.find('iframe').attr('src', '');
-            streamModal.find('iframe').addClass('d-none');
-            streamModal.find('#stream-placeholder > div').text('{{ site.data.lang[site.conference.lang].live.post_stream | default: "Live stream has ended." }}');
-            streamModal.find('#stream-placeholder').addClass('d-flex');
+                if (!freezeTime) {
+                    streamVideoTimer = setTimeout(setStreamVideo, delayStart(roomStart - streamPrepend*60) * 1000, roomName);
+                }
+            }
+
+            // Conference is over
+            else if (timeNow > roomEnd + streamExtend*60) {
+                setStreamContent('{{ site.data.lang[site.conference.lang].live.post_stream | default: "Live stream has ended." }}');
 
-            if (typeof streamTimer !== "undefined") {
-                clearInterval(streamTimer);
+                if (!freezeTime && demo) {
+                    streamVideoTimer = setTimeout(setStreamVideo, delayStart(roomEnd - streamPrepend*60) * 1000, roomName);
+                }
             }
-            if (!freezeTime && demo) {
-                streamTimer = setTimeout(preStartStream, delayStart(demoStart) * 1000, roomName);
+
+            // Conference ongoing
+            else {
+                let pauseNext = getNextPause(roomName);
+
+                // Currently stream is paused
+                if (pauseNext && timeNow >= pauseNext.start + streamExtend*60 && timeNow <= pauseNext.end - streamPrepend*60) {
+                    setStreamContent('{{ site.data.lang[site.conference.lang].live.pause_stream | default: "Live stream is currently paused." }}');
+
+                    if (!freezeTime) {
+                        streamVideoTimer = setTimeout(setStreamVideo, delayStart(pauseNext.end - streamPrepend*60) * 1000, roomName);
+                    }
+                }
+                // Currently a talk is active
+                else {
+                    let room = getRoom(roomName);
+                    setStreamSrc(room.href);
+
+                    if (!freezeTime) {
+                        if (pauseNext) {
+                            streamVideoTimer = setTimeout(setStreamVideo, delayStart(pauseNext.start + streamExtend*60) * 1000, roomName);
+                        }
+                        else {
+                            streamVideoTimer = setTimeout(setStreamVideo, delayStart(roomEnd + streamExtend*60) * 1000, roomName);
+                        }
+                    }
+                }
             }
         };
 
         let setStreamInfo = function (roomName) {
             let timeNow = time();
-            let talksHere = talks[roomName];
-            let talkNow;
+            let talkNext = getNextTalk(roomName);
 
             if (typeof streamInfoTimer !== "undefined") {
                 clearInterval(streamInfoTimer);
             }
 
-            if (typeof talksHere !== "undefined") {
-                if (timeNow < talksHere[talksHere.length-1].end) {
-                    for (var i = 0; i < talksHere.length; i++) {
-                        if (timeNow < talksHere[i].end && timeNow >= talksHere[i].start - talkAnnounce*60) {
-                            talkNow = talksHere[i];
-                            break;
-                        }
-                    }
-                }
-            }
-
-            if (typeof talkNow !== "undefined") {
-                document.getElementById('stream-info').dataset.time = talkNow.start;
-                document.getElementById('stream-info-time').dataset.time = talkNow.start;
+            if (timeNow >= talkNext.start - streamPause*60) {
+                document.getElementById('stream-info').dataset.time = talkNext.start;
+                document.getElementById('stream-info-time').dataset.time = talkNext.start;
                 updateLive();
 
                 streamModal.find('#stream-info-color').removeClass(function (index, className) {
                     return (className.match(/(^|\s)border-soft-\S+/g) || []).join(' ');
                 });
-                streamModal.find('#stream-info-color').addClass('border-soft-' + talkNow.color);
+                streamModal.find('#stream-info-color').addClass('border-soft-' + talkNext.color);
 
-                streamModal.find('#stream-info-talk').text(talkNow.name).attr('href', talkNow.href);
+                streamModal.find('#stream-info-talk').text(talkNext.name).attr('href', talkNext.href);
 
                 let speakerStr = '';
-                for (var i = 0; i < talkNow.speakers.length; i++) {
-                    let speaker = speakers[talkNow.speakers[i]];
+                for (var i = 0; i < talkNext.speakers.length; i++) {
+                    let speaker = data.speakers[talkNext.speakers[i]];
                     if (speaker.href == '') {
                         speakerStr += speaker.name +', '
                     }
@@ -389,35 +476,37 @@
                 streamModal.find('#stream-info').removeClass('d-none');
 
                 if (!freezeTime) {
-                    streamInfoTimer = setTimeout(setStreamInfo, delayStart(talkNow.end) * 1000, roomName);
+                    streamInfoTimer = setTimeout(setStreamInfo, delayStart(talkNext.end) * 1000, roomName);
                 }
             }
             else {
                 streamModal.find('#stream-info').addClass('d-none');
+
+                if (!freezeTime) {
+                    if (talkNext) {
+                        streamInfoTimer = setTimeout(setStreamInfo, delayStart(talkNext.start - streamPause*60) * 1000, roomName);
+                    }
+                    else if (demo) {
+                        let talksHere = data.talks[roomName];
+                        streamInfoTimer = setTimeout(setStreamInfo, delayStart(talksHere[0].start - streamPrepend*60) * 1000, roomName);
+                    }
+                }
             }
         };
 
         let setStream = function (roomName) {
             streamModal.find('.modal-footer .btn').removeClass('active');
-            streamModal.find('#stream-select').selectedIndex = -1;
+            streamModal.find('#stream-select').val(0);
 
+            // Recover room name in case of empty default
             let room = getRoom(roomName);
             roomName = room.name;
-            let tNow = time();
 
-            if (tNow < room.start) {
-                preStartStream(roomName);
-            }
-            else if (tNow > room.end) {
-                postEndStream(roomName);
-            }
-            else {
-                activeStream(roomName);
-            }
+            setStreamVideo(roomName);
             setStreamInfo(roomName);
 
             streamModal.find('#stream-button' + room.id).addClass('active');
-            streamModal.find('#stream-select').selectedIndex = room.id;
+            streamModal.find('#stream-select').val(room.id);
         };
 
         let updateStream = function () {
@@ -432,8 +521,8 @@
         };
 
         let stopUpdateStream = function () {
-            if (typeof streamTimer !== "undefined") {
-                clearInterval(streamTimer);
+            if (typeof streamVideoTimer !== "undefined") {
+                clearInterval(streamVideoTimer);
             }
             if (typeof streamInfoTimer !== "undefined") {
                 clearInterval(streamInfoTimer);
@@ -449,6 +538,7 @@
         let setupStream = function () {
             streamModal = $('#stream-modal');
 
+            // configure modal opening buttons
             streamModal.on('show.bs.modal', function (event) {
                 let button = $(event.relatedTarget);
                 let roomName = button.data('room');
@@ -458,6 +548,7 @@
                 hideModal(event);
             });
 
+            // configure room selection buttons in modal
             streamModal.find('.modal-footer .btn').on('click', function(event) {
                 event.preventDefault();
 
@@ -465,6 +556,7 @@
                 setStream(roomName);
             });
 
+            // configure room selection menu in modal
             streamModal.find('#stream-select').on('change', function(event) {
                 event.preventDefault();
 
@@ -474,6 +566,7 @@
         };
 
         let setup = function () {
+            loadData();
             startUpdateLive();
             setupStream();
         };
@@ -496,6 +589,7 @@
     {%- else -%}
 
         let setup = function () {
+            loadData();
             startUpdateLive();
         };
 
@@ -515,6 +609,7 @@
 
     return {
         init: setup,
+        getData: getData,
 
         pauseTime: pauseTime,
         continueTime: continueTime,