jekyll-theme-conference 2.4.1 → 2.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b4a68d1ce4697568c8582882600a0373e99ffc2f2fb71200d1cbaee33a8850c
-  data.tar.gz: 6abbc6c552d5df4a1bf0f126c9c01573887e101904fd9321e17000ecf68a8fd8
+  metadata.gz: 85035d6385b1339b58d26c9aa7656bb63c390e82e59b995a954b032bda281b61
+  data.tar.gz: 6cde36017cc9d2b667ea921edcb6ed8938fea8cf63b87169f2ea8399b0e42b53
 SHA512:
-  metadata.gz: 11dc593b0689b0834a22c61c28735ed343d5bc17e0663ed7269b1ebf435a9895642be0d25d3f95944048e290d23cfffdac0cd72f0c674e5b311fa2bba10cf8ff
-  data.tar.gz: 4914fca74c4dac1b34ae4e764716a91a6256da5d02e78463d5769ff47221a6a6ecee4219c09ea806461cccbe5215be7b35c3908927b0e7f25d7c528278714a6c
+  metadata.gz: 6ee86daa817de1f8ce650b73c8a1116a28293307da1cfe10abd775331251d88af1a33e6dbc425011cf5d4358e89978e2601cf5eaf35c22874222715f170c0a88
+  data.tar.gz: 93606208e131a2d476732a828248cbdc7d58cf28ed0e6e678a585d677e18b6939721a6ca099a1f7805e0b431e2585989168aed5e45f009f7d35780b498d615ba

data/README.md

@@ -185,7 +185,8 @@ The navigation bar is located at the top and visible on every site. On the right
 
 Additionally, a navigation bar 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 (see the _Content_ > _Links_ section).
+- `menu` containing another list of links. This creates a dropdown menu of multiple sublinks. The sublinks have the same properties as regular links (see the _Content_ > _Links_ section), 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_ below).
 
 Example:
 
@@ -195,6 +196,7 @@ conference:
     links:
       - name: Program
         relative_url: /program/
+      - live: true
       - name: Previous Editions
         menu:
           - name: 2020 (current)
@@ -224,7 +226,7 @@ conference:
 
 The main landing page is shown at the root of the website to greet new visitors. In order to show it you need to create a `index.md` file in the root of your website's folder and specify its layout as `layout: main`. The remaining customizations are specified in the `_config.yml` file.
 
-The main page states your site's title (`site.title`) or a logo instead. The logo can be configured through the `logo` property under the `main` property containing:
+The main page states your site's title (`site.title`) or a logo instead. The logo can be configured through the `logo` property under the `main` property containing
 
 - a `img` property specifying the path to the image file relative to the `/assets/images/` folder.
 
@@ -286,7 +288,31 @@ conference:
         Try again next year.
 ```
 
-### Talk Settings: Main Categories and Icons
+### Live Indications & Streaming
+
+In order to help users navigating the program during the congress, a _Live_ indication can be shown next to talks which are currently taking place. A small JavaScript functions keeps the site automatically up-to-date (without the need to refresh) showing the indication as soon as the talk has started and hiding it once it is over (according to the timetable indicated in the `_data/program.yml` file).
+
+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
+
+- 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
+- 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
+    streaming:
+      start_early: 15  # in minutes
+      end_late:     0  # in minutes
+    demo: false
+```
+
+### Talk Settings
 
 Each talk can have one or multiple categories associated via FrontMatter (see the _Individual Pages: Talks_ section below for more details). Some of these categories can be elevated to so called main categories". These are used to color group the talks across the entire website, particularly in the program. In order to do so add the `main_categories` property under the `talks` property. It consists of a list of all main categories. Each main category consists of:
 
@@ -314,11 +340,12 @@ conference:
         color: info
       - name: Cat B
         color: success
+
     # Hide icons on talk overview page
     hide_icons: false
 ```
 
-### Speaker Settings: First name
+### Speaker Settings
 
 In the program as well as the speaker's overview the speaker's first name can be abbreviated to its first letter. Of course, you also have the option to not specify a first name for each speaker in the first place. In order to shorten the first name add the `show_firstname: true` setting (default: `false`) to the `speakers` property.
 
@@ -330,7 +357,7 @@ conference:
     show_firstname: false
 ```
 
-### Location Settings: Hide all and configure map
+### Location Settings
 
 In case the location of your rooms is obvious (e.g. on a campus) you can decide to disable the location page and links to all the rooms. You still need to create the different rooms as files in the `_rooms/` directory, since they are needed as a reference. But there will not be any link pointing to it (effectively hiding them).
 In order to hide all rooms add the `hide: true` setting (default: `false`) to the `location` property.
@@ -353,7 +380,7 @@ conference:
       map_provider: "OpenStreetMap.Mapnik"
 ```
 
-The map is based on the JavaScript Library [Leaflet](https://leafletjs.com/) and can be customized by editing the `assets/js/main.js` file, e.g. adding additional layers with markers, text, or shapes to the map. To start, copy simply the file from this repository and make use of the initialized global variable `map` pointing to the Leaflet container.
+The map is based on the JavaScript Library [Leaflet](https://leafletjs.com/) and can be customized by editing the `assets/js/main.js` file, e.g. adding additional layers with markers, text, or shapes to the map. To start, copy simply the file from this repository and make use of the initialized global variable `window.conference.map` pointing to the Leaflet container.
 
 Example:
 
@@ -364,11 +391,13 @@ Example:
 {% include js/conference.js %}
 
 (function() {
+    let map = window.conference.map;
+
     if (typeof map !== 'undefined') {
         var main_station = L.marker([47.37785, 8.54035], {
             icon: L.divIcon({
                 className: '',
-                html: '<span class="fas fa-train"></span> Bahnhof Zürich',
+                html: '<span class="fas fa-train"></span> Main Station',
                 iconSize: [120, 56]
             })
         }).addTo(map);
@@ -454,8 +483,9 @@ Each speaker is represented by a file in the `_speakers/` directory. It must beg
 
 Each room is represented by a file in the `_rooms/` directory. It must begin with valid [YAML Front Matter](https://jekyllrb.com/docs/frontmatter/) containing
 
-- the room's `name`, and
-- optionally `hide: true` if the room's page should not be linked to.
+- the room's `name`
+- optionally `hide: true` if the room's page should not be linked to, and
+- optionally a URL pointing to a live stream for the given room during the conference (`live`, see the section _Live Indications & Streaming_ above).
 
 ### Links
 

data/_includes/js/conference-live.js

@@ -0,0 +1,307 @@
+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 freezeTime = false;
+    let timeFrozen = 0;
+    let timeOffset = 0;
+
+    let demo = {{ site.conference.live.demo | default: "false" }};
+    let durDemo  = 5*60; // in seconds
+    let durPause =   10; // in seconds
+
+    let liveTimer;
+    let liveTimerCorr;
+
+    let timeNowReal = function () {
+        // Return UNIX timestamp in seconds
+        return Math.floor(Date.now() / 1000);
+    };
+
+    let timeNowCycle = function() {
+        // Cycle time over program for a fixed duration
+        let relTime = (Math.floor(Date.now() / 1000) % durDemo - durPause) / (durDemo - 2*durPause);
+        let cycleTime = (confEnd - confStart) * relTime + confStart;
+        return cycleTime;
+    };
+
+    let timeNow = function() {
+        if (freezeTime) {
+            return timeFrozen;
+        }
+        else if (demo) {
+            return timeNowCycle() - timeOffset;
+        }
+        else {
+            return timeNowReal() - timeOffset;
+        }
+    };
+
+    let pauseTime = function () {
+        timeFrozen = timeNow();
+        freezeTime = true;
+    };
+
+    let continueTime = function () {
+        if (demo) {
+            timeOffset = timeNowCycle() - timeFrozen;
+        }
+        else {
+            timeOffset = timeNow() - timeFrozen;
+        }
+        freezeTime = false;
+    };
+
+    let resetTime = function (timeStr) {
+        continueTime();
+        timeOffset = 0;
+    };
+
+    let setTime = function (timeStr) {
+        pauseTime();
+
+        let d = new Date(timeNow() * 1000);
+        time = timeStr.split(':');
+        d.setHours(time[0], time[1]);
+
+        timeFrozen = Math.floor(d.getTime() / 1000);
+    };
+
+    let getTime = function () {
+        let d = new Date(timeNow() * 1000);
+        let h = d.getHours();
+        let m = d.getMinutes();
+
+        return h + ":" + (m < 10 ? "0" : "") + m;
+    };
+
+    let timeStart = function () {
+        let tNow = timeNow();
+        if (confStart - 60 > tNow) {
+            // Start when conference start (-60s)
+            return confStart - 60 - tNow;
+        }
+        else {
+            // Start on the minute
+            return (60 - (tNow % 60));
+        }
+    };
+
+    let updateLiveButtons = function() {
+        let tNow = timeNow();
+        let liveShow = document.getElementsByClassName('live-show');
+        let liveHide = document.getElementsByClassName('live-hide');
+
+        for (let i = 0; i < liveShow.length; i++) {
+            let tStart = liveShow[i].dataset.start;
+            let tEnd = liveShow[i].dataset.end;
+
+            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 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');
+                }
+            }
+            else {
+                // Show otherwise
+                liveHide[i].classList.remove('d-none');
+            }
+        }
+
+        if (timeNow() > confEnd && !demo) {
+            // Cancel timer after program is over
+            clearInterval(liveTimer);
+        }
+    };
+
+    let startUpdate = function () {
+        if(typeof liveTimer !== "undefined") {
+            clearInterval(liveTimer);
+        }
+        updateLiveButtons();
+
+        if (demo) {
+            liveTimerCorr = (confEnd - confStart) / (durDemo - 2*durPause);
+            liveTimer = setInterval(updateLiveButtons, 100);
+        }
+        else {
+            liveTimerCorr = 1;
+            setTimeout(function() {
+                liveTimer = setInterval(updateLiveButtons, 60*1000);
+                updateLiveButtons();
+            }, timeStart() * 1000);
+        }
+    };
+
+    let toggleDemo = function () {
+        demo = !demo;
+        timeOffset = 0;
+        startUpdate();
+    };
+
+    let demoOn = function() {
+        return demo;
+    };
+
+    {% if site.conference.live.streaming -%}
+
+        let rooms = {
+            {%- for r in site.data.program -%}
+                {%- assign room = site.rooms | where: 'name', r.room | first -%}
+                {%- if room.live -%}
+
+                    {%- assign t = r.talks | first -%}
+                    {%- include partials/get_talk_time.html -%}
+                    {%- assign time_start = talk_start -%}
+                    {%- assign time_end = talk_end -%}
+                    {%- include partials/get_timestamp.html -%}
+
+                    {%- assign offset_start = site.conference.live.streaming.start_early | default: 0 -%}
+                    {%- assign room_ts_start = offset_start | times: -60 | plus: timestamp_start -%}
+
+                    {%- assign t = r.talks | last -%}
+                    {%- include partials/get_talk_time.html -%}
+                    {%- assign time_start = talk_start -%}
+                    {%- assign time_end = talk_end -%}
+                    {%- include partials/get_timestamp.html -%}
+
+                    {%- assign offset_end = site.conference.live.streaming.end_late | default: 0 -%}
+                    {%- assign room_ts_end = offset_end | times: 60 | plus: timestamp_end -%}
+
+                    "{{ room.name }}": {
+                        "id": {{ forloop.index }},
+                        "href": "{{ room.live }}",
+                        "start": {{ room_ts_start }},
+                        "end": {{ room_ts_end }}
+                    },
+                {%- endif -%}
+            {%- endfor -%}
+        };
+
+        let streamModal;
+        let streamTimer;
+
+        let preStartStream = function(href, startTime, endTime) {
+            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');
+
+            if(typeof streamTimer !== "undefined") {
+                clearTimeout(streamTimer);
+            }
+            streamTimer = setTimeout(activeStream, (startTime - timeNow())/liveTimerCorr*1000, href, endTime);
+        }
+
+        let activeStream = function(href, endTime) {
+            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") {
+                clearTimeout(streamTimer);
+            }
+            streamTimer = setTimeout(postEndStream, (endTime - timeNow())/liveTimerCorr*1000);
+        }
+
+        let postEndStream = function() {
+            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');
+        }
+
+        let setStream = function (roomName) {
+            if (roomName in rooms) {
+                room = rooms[roomName];
+            }
+            else {
+                room = rooms[Object.keys(rooms)[0]];
+            }
+
+            streamModal.find('.modal-footer .btn').removeClass('active');
+            if (timeNow() < room.start) {
+                preStartStream(room.href, room.start, room.end);
+            }
+            else if (timeNow() > room.end) {
+                postEndStream();
+            }
+            else {
+                activeStream(room.href, room.end);
+            }
+            streamModal.find('#stream-button' + room.id).addClass('active');
+        };
+
+        let hideModal = function (event) {
+            streamModal.find('iframe').attr('src', '');
+            streamModal.find('.modal-footer .btn').removeClass('active');
+        };
+
+        let startStream = function() {
+            streamModal = $('#stream-modal');
+
+            streamModal.on('show.bs.modal', function (event) {
+                let button = $(event.relatedTarget);
+                let roomName = button.data('room');
+                setStream(roomName);
+            });
+            streamModal.on('hide.bs.modal', function (event) {
+                hideModal(event);
+            });
+
+            streamModal.find('.modal-footer .btn').on('click', function(event) {
+                event.preventDefault();
+
+                let roomName = $(this).data('room')
+                setStream(roomName);
+            });
+        };
+
+    {%- else -%}
+
+        let startStream = function() {};
+
+    {%- endif %}
+
+    let init = function () {
+        startUpdate();
+        startStream();
+    };
+
+    return {
+        init: init,
+
+        pauseTime: pauseTime,
+        continueTime: continueTime,
+        resetTime: resetTime,
+        setTime: setTime,
+        getTime: getTime,
+
+        toggleDemo: toggleDemo,
+        demoOn: demoOn,
+        durDemo: durDemo,
+        durPause: durPause
+    };
+
+})();
+
+window.conference.live.init();

data/_includes/js/conference-map.js

@@ -1,17 +1,18 @@
-var map;
+window.conference.mapConfig = (function() {
 
-(function() {
-    var map_provider = "{{ site.conference.location.map.map_provider | default: 'OpenStreetMap.Mapnik' }}";
-    var home_coord = [{{ site.conference.location.map.home_coord }}];
-    var default_zoom = {{ site.conference.location.map.default_zoom | default: 17 }};
+    let map;
 
-    if (document.getElementById('map')) {
-        map = L.map('map').setView(home_coord, default_zoom);
+    let mapProvider = "{{ site.conference.location.map.map_provider | default: 'OpenStreetMap.Mapnik' }}";
+    let homeCoord = [{{ site.conference.location.map.home_coord }}];
+    let zoomLevel = {{ site.conference.location.map.default_zoom | default: 17 }};
 
-        L.tileLayer.provider(map_provider).addTo(map);
+    let setup = function (elId) {
+        map = L.map(elId).setView(homeCoord, zoomLevel);
+
+        L.tileLayer.provider(mapProvider).addTo(map);
 
         L.easyButton('far fa-star', function(){
-            map.setView(home_coord, default_zoom);
+            map.flyTo(homeCoord, zoomLevel);
         }, '{{ site.data.lang[site.conference.lang].location.focus_conf | default: "Center map on conference location" }}').addTo(map);
 
         L.control.locate({
@@ -20,5 +21,25 @@ var map;
                 title: '{{ site.data.lang[site.conference.lang].location.focus_me | default: "Show me where I am" }}'
             }
         }).addTo(map);
-    }
+    };
+
+    let init = function () {
+        elId = 'map';
+
+        if (document.getElementById(elId)) {
+            setup(elId);
+            window.conference.map = map;
+        }
+    };
+
+    return {
+        init: init,
+        default: {
+            mapProvider: mapProvider,
+            homeCoord: homeCoord,
+            zoomLevel: zoomLevel
+        }
+    };
 })();
+
+window.conference.mapConfig.init();

data/_includes/js/conference-modal.js

@@ -1,14 +1,15 @@
-(function() {
-    $('#link-modal').on('show.bs.modal', function (event) {
-        var button = $(event.relatedTarget);
+window.conference.modal = (function () {
 
-        var href = button.data('href');
-        var header = button.data('header');
-        var title = button.data('title');
-        var footer = button.data('footer');
-        var desc = button.data('desc');
+    let show = function (el, event) {
+        let button = $(event.relatedTarget);
 
-        var modal = $(this);
+        let href = button.data('href');
+        let header = button.data('header');
+        let title = button.data('title');
+        let footer = button.data('footer');
+        let desc = button.data('desc');
+
+        let modal = $(el);
         modal.find('iframe').attr('src', href);
 
         if (header) {
@@ -18,25 +19,45 @@
             modal.find('.modal-title').text(title);
         }
         else {
-            modal.find('.modal-title').text('')
+            modal.find('.modal-title').text('');
         }
 
         if (footer) {
-            modal.find('.modal-footer').removeClass('d-none')
+            modal.find('.modal-footer').removeClass('d-none');
             modal.find('.modal-description').html(footer);
         }
         else if (desc) {
-            modal.find('.modal-footer').removeClass('d-none')
+            modal.find('.modal-footer').removeClass('d-none');
             modal.find('.modal-description').text(desc);
         }
         else {
-            modal.find('.modal-footer').addClass('d-none')
+            modal.find('.modal-footer').addClass('d-none');
         }
-    });
-    $('#link-modal').on('hide.bs.modal', function (event) {
-        var modal = $(this);
+    };
+
+    let hide = function (el, event) {
+        let modal = $(el);
+
         modal.find('.modal-title').text('');
         modal.find('iframe').attr('src', '');
         modal.find('.modal-description').html('');
-    });
+    };
+
+    let init = function() {
+        elSel = '#link-modal';
+
+        $(elSel).on('show.bs.modal', function (event) {
+            show(this, event);
+        });
+        $(elSel).on('hide.bs.modal', function (event) {
+            hide(this, event);
+        });
+    };
+
+    return {
+        init: init
+    };
+
 })();
+
+window.conference.modal.init();

data/_includes/js/conference.js

@@ -9,8 +9,11 @@
 // Vertical Scroll Sync: Syncscroll
 {% include js/syncscroll.js %}
 
+// Global app variable
+window.conference = {};
+
+// Map Display Framework: Leaflet
 {% if site.conference.location.hide != true and site.conference.location.map.enable %}
-    // Map Display Framework: Leaflet
     {% include js/leaflet.js %}
     {% include js/leaflet-easybutton.js %}
     {% include js/leaflet-locatecontrol.js %}
@@ -21,3 +24,8 @@
 
 // Bootstrap Extension: Modals
 {% include js/conference-modal.js %}
+
+// Live
+{% if site.conference.live %}
+    {% include js/conference-live.js %}
+{% endif %}

data/_includes/partials/checks.html

@@ -4,7 +4,7 @@
   {% unless site.conference.lang == "en" %}
     {% assign errors = errors | push : "The internationalization file containing different strings for this template seems to be missing. Have you copied the `_data/lang.yml` file from the [theme's repository](https://github.com/DigitaleGesellschaft/jekyll-theme-conference/blob/master/_data/lang.yml) to you local website folder?" %}
   {% endunless %}
-{% elsif site.data.lang.version < 2 %}
+{% elsif site.data.lang.version < 3 %}
   {% assign errors = errors | push : "The internationalization file in `_data/lang.yml` seems to be outdated and does not correspond to the current version of the theme. Grab the current version from the [theme's repository](https://github.com/DigitaleGesellschaft/jekyll-theme-conference/blob/master/_data/lang.yml)." %}
 {% endunless %}
 {% unless site.conference.lang == "en" or site.conference.lang == "de" or site.conference.lang == "fr" or site.conference.lang == "pt" %}
@@ -30,5 +30,5 @@
 
 {% assign main_category_size = site.conference.talks.main_categories | size %}
 {% if main_category_size == 0 %}
-  {% assign errors = errors | push : "Your `_config.yml` configuration file does not define any main category for your talks. Have you set the `conference.talks.main_categories` property? See also [Talk Settings](https://github.com/DigitaleGesellschaft/jekyll-theme-conference/#talk-settings-main-categories-and-icons) section in the theme's README file." %}
+  {% assign errors = errors | push : "Your `_config.yml` configuration file does not define any main category for your talks. Have you set the `conference.talks.main_categories` property? See also [Talk Settings](https://github.com/DigitaleGesellschaft/jekyll-theme-conference/#talk-settings) section in the theme's README file." %}
 {% endif %}

data/_includes/partials/footer.html

@@ -11,8 +11,8 @@
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
-        <div class="modal-body">
-          <iframe src="" frameborder="0" allowfullscreen></iframe>
+        <div class="modal-body embed-responsive embed-responsive-16by9">
+          <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
         </div>
         <div class="modal-footer justify-content-start">
           <p class="modal-description"></p>
@@ -21,6 +21,10 @@
     </div>
   </div>
 
+  {% if site.conference.live.streaming %}
+    {% include partials/live-modal.html %}
+  {% endif %}
+
   <script src="{{ site.baseurl }}/assets/js/main.js"></script>
 
 </body>

data/_includes/partials/get_conf_time.html

@@ -0,0 +1,54 @@
+{% for room in site.data.program %}
+  {% assign t = room.talks | first %}
+  {% include partials/get_talk_time.html %}
+
+  {% assign update_var = false %}
+
+  {% unless conf_start_hour %}
+    {% assign update_var = true %}
+  {% else %}
+    {% if talk_start_hour < conf_start_hour %}
+      {% assign update_var = true %}
+    {% elsif talk_start_hour == conf_start_hour and talk_start_min < conf_start_min %}
+      {% assign update_var = true %}
+    {% endif %}
+  {% endunless %}
+
+  {% if update_var %}
+    {% assign conf_start_hour = talk_start_hour %}
+    {% assign conf_start_min = talk_start_min %}
+  {% endif %}
+
+  {% assign t = room.talks | last %}
+  {% include partials/get_talk_time.html %}
+
+  {% assign update_var = false %}
+
+  {% unless conf_end_hour %}
+    {% assign update_var = true %}
+  {% else %}
+    {% if talk_end_hour > conf_end_hour %}
+      {% assign update_var = true %}
+    {% elsif talk_end_hour == conf_end_hour and talk_end_min > conf_end_min %}
+      {% assign update_var = true %}
+    {% endif %}
+  {% endunless %}
+
+  {% if update_var %}
+    {% assign conf_end_hour = talk_end_hour %}
+    {% assign conf_end_min = talk_end_min %}
+  {% endif %}
+{% endfor %}
+
+{% if conf_start_min < 10 %}
+  {% assign conf_start = conf_start_hour | append: ":0" | append: conf_start_min %}
+{% else %}
+  {% assign conf_start = conf_start_hour | append: ":" | append: conf_start_min %}
+{% endif %}
+{% if conf_end_min < 10 %}
+  {% assign conf_end = conf_end_hour | append: ":0" | append: conf_end_min %}
+{% else %}
+  {% assign conf_end = conf_end_hour | append: ":" | append: conf_end_min %}
+{% endif %}
+
+{% assign conf_duration_min = conf_end_hour | minus: conf_start_hour | times: 60 | minus: conf_start_min | plus: conf_end_min %}

data/_includes/partials/get_link.html

@@ -1,4 +1,5 @@
 
+{% assign link_disabled = link.disabled %}
 {% assign link_icon = link.icon %}
 {% assign link_iframe = link.iframe %}
 
@@ -59,6 +60,9 @@
 
   {% endif %}
 
+{% else %}
+  {% assign link_disabled = true %}
+
 {% endif %}
 
 {% capture link_tag -%}
@@ -85,3 +89,5 @@
 
   {%- endif -%}
 {%- endcapture %}
+
+{% assign link_styleclass = "" %}

data/_includes/partials/get_timestamp.html

@@ -0,0 +1,4 @@
+{% assign datetime_start = site.conference.live.date | append: " " | append: time_start | append: " " | append: site.conference.live.timezone %}
+{% assign timestamp_start = datetime_start | date: "%s" %}
+{% assign datetime_end = site.conference.live.date | append: " " | append: time_end | append: " " | append: site.conference.live.timezone %}
+{% assign timestamp_end = datetime_end | date: "%s" %}

data/_includes/partials/live-modal.html

@@ -0,0 +1,29 @@
+<div class="modal fade" id="stream-modal" tabindex="-1" role="dialog" aria-labelledby="link-modal-label" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">
+          {{ site.data.lang[site.conference.lang].live.streaming | default: "Live Stream" }}
+        </h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body embed-responsive embed-responsive-16by9">
+        <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
+        <div id="stream-placeholder" class="embed-responsive-item d-none justify-content-center align-items-center">
+          <div></div>
+        </div>
+      </div>
+      <div class="modal-footer justify-content-around">
+        {% for r in site.data.program %}
+          {% assign room = site.rooms | where: 'name', r.room | first %}
+
+          <a id="stream-button{{ forloop.index }}" href="#" class="btn btn-outline-primary {% unless room.live %}disabled{% endunless %}" role="button" data-room="{{ room.name }}">
+            {{ room.name }}
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/partials/live_button.html

@@ -0,0 +1,19 @@
+{% if site.conference.live %}
+  {% assign time_start = t.time_start %}
+  {% assign time_end = t.time_end %}
+  {% include partials/get_timestamp.html %}
+
+  {%- if site.conference.live.streaming -%}
+    <a title="{{ link.name }}" data-toggle="modal" data-target="#stream-modal" data-room="{{ r.room }}" class="cursor-pointer
+  {%- else -%}
+    <span class="
+  {%- endif %} live-show live-button badge badge-dark font-weight-normal text-left d-none {{ live_button_styleclass }}" data-start="{{ timestamp_start }}" data-end="{{ timestamp_end }}">
+    <object data="{{ site.baseurl }}/assets/icons/live.svg" type="image/svg+xml"></object>
+    {{ site.data.lang[site.conference.lang].live.live | default: "Live" }}
+  {%- if site.conference.live.streaming -%}
+    </a>
+  {%- else -%}
+    </span>
+  {%- endif -%}
+  {% assign live_button_styleclass = "" %}
+{% endif %}

data/_includes/partials/navbar.html

@@ -26,6 +26,36 @@
                 {% endfor %}
               </div>
             </li>
+
+          {% elsif link.live %}
+            {% include partials/get_conf_time.html %}
+            {% assign time_start = conf_start %}
+            {% assign time_end = conf_end %}
+            {% include partials/get_timestamp.html %}
+
+            {% assign offset_start = site.conference.live.streaming.start_early | default: 0 %}
+            {% assign offset_end = site.conference.live.streaming.end_late | default: 0 %}
+            {% assign timestamp_start = offset_start | times: -60 | plus: timestamp_start %}
+            {% assign timestamp_end = offset_end | times: 60 | plus: timestamp_end %}
+
+            <li class="nav-item live-show d-none" data-start="{{ timestamp_start }}" data-end="{{ timestamp_end }}">
+              {% if site.conference.live.streaming %}
+                <a class="cursor-pointer nav-link" title="{% if link.name %}{{ link.name }}{% else %}{{ site.data.lang[site.conference.lang].live.streaming | default: "Live Stream" }}{% endif %}" data-toggle="modal" data-target="#stream-modal" data-room="">
+              {% else %}
+                {% assign link_styleclass = "nav-link" %}
+                {% include partials/get_link.html %}
+                {{ link_tag }}
+              {% endif %}
+
+                {{ link.name | default: "" }}
+
+                <span class="live-button badge badge-dark font-weight-normal text-left">
+                  <object data="{{ site.baseurl }}/assets/icons/live.svg" type="image/svg+xml"></object>
+                  {{ site.data.lang[site.conference.lang].live.live | default: "Live" }}
+                </span>
+              </a>
+            </li>
+
           {% else %}
             <li class="nav-item {% if page.url contains link.relative_url %}active{% endif %}">
               {% assign link_styleclass = "nav-link" %}

data/_includes/partials/show_room.html

@@ -1,5 +1,5 @@
 {% if room.hide or site.conference.location.hide %}
-  <span class="badge badge-light font-weight-normal"><i class="far fa-square"></i> {{ room.name }}</span><!--
+  <span class="badge badge-light font-weight-normal text-left"><i class="far fa-square"></i> {{ room.name }}</span><!--
 {% else %}
   <a href="{{ room.url | prepend: site.baseurl }}" class="badge badge-light font-weight-normal"><i class="far fa-square"></i> {{ room.name }}</a><!--
 {% endif %}-->

data/_includes/partials/show_talk_duration.html

@@ -1,3 +1,3 @@
-<span class="badge badge-light font-weight-normal">
+<span class="badge badge-light font-weight-normal text-left">
   <i class="fas fa-stopwatch"></i> {{ talk_duration_min }}min
 </span>

data/_includes/partials/show_talk_time.html

@@ -1,3 +1,3 @@
-<a href="{{ site.conference.program.url | prepend: site.baseurl }}" class="badge badge-light font-weight-normal">
+<a href="{{ site.conference.program.url | prepend: site.baseurl }}" class="badge badge-light font-weight-normal text-left">
   <i class="far fa-clock"></i> {{ talk_start_hour }}:{% if talk_start_min == 0 %}0{%endif %}{{ talk_start_min }}
 </a>

data/_layouts/program.html

@@ -1,50 +1,7 @@
 {% include partials/header.html %}
 
-  {% for room in site.data.program %}
-    {% assign t = room.talks | first %}
-      {% include partials/get_talk_time.html %}
-
-    {% assign update_var = false %}
-
-    {% unless start_hour %}
-        {% assign update_var = true %}
-        {% else %}
-        {% if talk_start_hour < start_hour %}
-            {% assign update_var = true %}
-            {% elsif talk_start_hour == start_hour and talk_start_min < start_min %}
-            {% assign update_var = true %}
-            {% endif %}
-        {% endunless %}
-
-    {% if update_var %}
-        {% assign start_hour = talk_start_hour %}
-          {% assign start_min = talk_start_min %}
-        {% endif %}
-
-    {% assign t = room.talks | last %}
-      {% include partials/get_talk_time.html %}
-
-    {% assign update_var = false %}
-
-    {% unless end_hour %}
-        {% assign update_var = true %}
-        {% else %}
-        {% if talk_end_hour > end_hour %}
-            {% assign update_var = true %}
-            {% elsif talk_end_hour == end_hour and talk_end_min > end_min %}
-            {% assign update_var = true %}
-            {% endif %}
-        {% endunless %}
-
-    {% if update_var %}
-        {% assign end_hour = talk_end_hour %}
-          {% assign end_min = talk_end_min %}
-        {% endif %}
-        {% endfor %}
-
-  {% assign total_duration_min = end_hour | minus: start_hour | times: 60 | minus: start_min | plus: end_min %}
-  {% assign nbr_steps = total_duration_min | divided_by: site.conference.program.time_steps %}
-
+  {% include partials/get_conf_time.html %}
+  {% assign nbr_steps = conf_duration_min | divided_by: site.conference.program.time_steps %}
 
   <h1 class="display-5 mb-4">
     {% if page.title %}
@@ -94,8 +51,8 @@
         {% assign z-index-max = 999 %}
 
         {% for i in (1..nbr_steps) %}
-          {% assign current_hour = i | minus: 1 | times: site.conference.program.time_steps | plus: start_min | divided_by: 60 | floor | plus: start_hour | modulo: 24  %}
-          {% assign current_min = i | minus: 1 | times: site.conference.program.time_steps | plus: start_min | modulo: 60 %}
+          {% assign current_hour = i | minus: 1 | times: site.conference.program.time_steps | plus: conf_start_min | divided_by: 60 | floor | plus: conf_start_hour | modulo: 24  %}
+          {% assign current_min = i | minus: 1 | times: site.conference.program.time_steps | plus: conf_start_min | modulo: 60 %}
           {% if current_min < 10 %}
             {% assign current_time = current_hour | append: ':0' | append: current_min %}
           {% else %}
@@ -157,6 +114,9 @@
                   {% include partials/get_main_category.html %}
                   <td rowspan="{{ talk_nbr_steps }}" class="alert alert-{{ main_cat_color }} shadow-sm" style="z-index: {{ z-index-max | minus: i }}">
 
+                    {% assign live_button_styleclass = "mb-2" %}
+                    {% include partials/live_button.html %}
+
                     <p class="mb-2">
                       {% include partials/show_talk.html %}
                     </p>

data/_layouts/room.html

@@ -31,6 +31,9 @@
               <div class="flex-column">
                 {% include partials/get_talk_time.html %}
                 {% include partials/show_talk_time.html %}
+
+                {% assign live_button_styleclass = "mb-1" %}
+                {% include partials/live_button.html %}
               </div>
               <div class="flex-column ml-2 pl-2 mb-2 border-soft-{{ main_cat_color }}">
                 <p class="mb-0">

data/_layouts/speaker.html

@@ -17,7 +17,6 @@
   {% if has_icon_links %}
     <ul class="list-unstyled">
       {% for link in speaker.links %}
-        {% assign link_styleclass = "" %}
         {% include partials/get_link.html %}
 
         {% if link_icon %}
@@ -83,6 +82,9 @@
                   <div class="flex-column ml-2 pl-2 mb-2 border-soft-{{ main_cat_color }}">
                     <p class="mb-0">
                       {% include partials/show_talk.html %}
+
+                      {% assign live_button_styleclass = "ml-2" %}
+                      {% include partials/live_button.html %}
                     </p>
                   </div>
                 </li>

data/_layouts/talk-overview.html

@@ -29,6 +29,13 @@
                 {% include partials/list_speakers.html %}
               </p>
               <p class="mb-0">
+                {% for r in site.data.program %}
+                  {% for t in r.talks %}
+                    {% if talk.name == t.name %}
+                      {% include partials/live_button.html %}
+                    {% endif %}
+                  {% endfor %}
+                {% endfor %}
                 {% include partials/list_sub_categories.html %}
 
                 {% include partials/get_link_types.html %}

data/_layouts/talk.html

@@ -32,12 +32,24 @@
       {% for t in r.talks %}
         {% if talk.name == t.name %}
 
+          {% if site.conference.live %}
+            {% assign time_start = t.time_start %}
+            {% assign time_end = t.time_end %}
+            {% include partials/get_timestamp.html %}
+            <span class="live-hide" data-start="{{ timestamp_start }}" data-end="{{ timestamp_end }}">
+          {% endif %}
+
           {% include partials/get_talk_time.html %}
           <span class="d-none d-sm-inline">
             {{ site.data.lang[site.conference.lang].pronoun.at | default: "at" }}
           </span>
           {% include partials/show_talk_time.html %}
 
+          {% if site.conference.live %}
+            </span>
+            {% include partials/live_button.html %}
+          {% endif %}
+
           {% assign room = site.rooms | where: 'name', r.room | first %}
           <span class="d-none d-sm-inline ml-1">
             {{ site.data.lang[site.conference.lang].pronoun.in | default: "in" }}

data/_sass/conference.scss

@@ -67,11 +67,27 @@ $fa-font-path: '/assets/webfonts' !default;
 
 // General
 
+//   Show pointer cursor on links opening modals
+.cursor-pointer {
+  cursor: pointer;
+}
+
 //   No bottom margin on info-bar
 .alert > p:last-of-type {
   margin-bottom: 0;
 }
 
+//   Live button icon
+.live-button > object {
+  width: 0.85em;
+  height: 0.85em;
+  color: white;
+}
+//   Live button font size in navigation bar
+.nav-link .live-button {
+  font-size: 1em;
+}
+
 // Program
 
 //   Sticky header and first column
@@ -140,6 +156,10 @@ $fa-font-path: '/assets/webfonts' !default;
 //   Program per Room
 .list-program li > div.flex-column:first-of-type {
   width: 4em;
+
+  & > * {
+    width: 4.6em;
+  }
 }
 
 // Speaker
@@ -163,28 +183,6 @@ $fa-font-path: '/assets/webfonts' !default;
   }
 }
 
-// Modal Iframe
-//   Adapt iframe size to window while preserving video ratio
-.modal-body {
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 56.25%;
-
-  iframe {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-  }
-}
-
-//   Add pointer cursor to links opening modals
-.cursor-pointer {
-  cursor: pointer;
-}
-
 
 // Print
 @media print {
@@ -214,4 +212,12 @@ $fa-font-path: '/assets/webfonts' !default;
   .table  th {
     position: inherit;
   }
+
+  // Remove live buttons
+  .live-show {
+    display: none;
+  }
+  .live-hide {
+    display: inline-block !important;
+  }
 }

data/assets/icons/live.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+  Original source of icon:
+    Font Awesome Free 5.15.1 by @fontawesome
+    https://fontawesome.com/license/free
+    CC BY 4.0 https://creativecommons.org/licenses/by/4.0/
+
+  Modified as following:
+    - Original path split from one into three separate paths (for each of the visual distinctive shapes)
+    - Animation of each path
+    - Removed attributes from SVG element to pass W3 validator
+-->
+<svg
+   focusable="false"
+   role="img"
+   viewBox="0 0 448 512"
+   xmlns="http://www.w3.org/2000/svg">
+  <path
+     id="dot"
+     fill="white"
+     d="M 128.081,415.959 C 128.081,451.328 99.409,480 64.04,480 28.671,480 0,451.328 0,415.959 0,380.59 28.672,351.918 64.041,351.918 c 35.369,0 64.04,28.673 64.04,64.041 z">
+    <animate
+       id="dot_hide"
+       attributeType="CSS"
+       attributeName="opacity"
+       from="0"
+       to="0"
+       dur="0.5s"
+       begin="0s;dot_animate.end+7.35s" />
+    <animate
+       id="dot_animate"
+       attributeType="CSS"
+       attributeName="opacity"
+       from="0"
+       to="1"
+       dur="0.15s"
+       begin="dot_hide.end" />
+     </path>
+  <path
+     id="arc_small"
+     fill="white"
+     d="M 303.741,463.209 C 295.387,308.609 171.556,184.622 16.791,176.259 7.656,175.765 0,183.105 0,192.253 v 48.069 c 0,8.415 6.49,15.472 14.887,16.018 111.832,7.284 201.473,96.702 208.772,208.772 0.547,8.397 7.604,14.887 16.018,14.887 h 48.069 c 9.149,10e-4 16.489,-7.655 15.995,-16.79 z">
+    <animate
+       id="arc_small_hide"
+       attributeType="CSS"
+       attributeName="opacity"
+       from="0"
+       to="0"
+       dur="0.65s"
+       begin="dot_hide.begin" />
+    <animate
+       id="arc_small_animate"
+       attributeType="CSS"
+       attributeName="opacity"
+       from="0"
+       to="1"
+       dur="0.2s"
+       begin="arc_small_hide.end" />
+     </path>
+  <path
+     id="arc_large"
+     fill="white"
+     d="M 447.99,463.497 C 439.596,229.677 251.465,40.445 16.503,32.01 7.473,31.686 0,38.981 0,48.016 v 48.068 c 0,8.625 6.835,15.645 15.453,15.999 191.179,7.839 344.627,161.316 352.465,352.465 0.353,8.618 7.373,15.453 15.999,15.453 h 48.068 c 9.034,-10e-4 16.329,-7.474 16.005,-16.504 z">
+    <animate
+       id="arc_large_hide"
+       attributeType="CSS"
+       attributeName="opacity"
+       from="0"
+       to="0"
+       dur="0.85s"
+       begin="dot_hide.begin" />
+    <animate
+       id="arc_large_animate"
+       attributeType="CSS"
+       attributeName="opacity"
+       from="0"
+       to="1"
+       dur="0.25s"
+       begin="arc_large_hide.end" />
+     </path>
+</svg>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-conference
 version: !ruby/object:Gem::Version
-  version: 2.4.1
+  version: 2.5.0
 platform: ruby
 authors:
 - Lorenz Schmid
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-11-03 00:00:00.000000000 Z
+date: 2020-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -62,6 +62,7 @@ files:
 - LICENSE.md
 - README.md
 - _includes/js/bootstrap.js
+- _includes/js/conference-live.js
 - _includes/js/conference-map.js
 - _includes/js/conference-modal.js
 - _includes/js/conference.js
@@ -74,15 +75,19 @@ files:
 - _includes/js/syncscroll.js
 - _includes/partials/checks.html
 - _includes/partials/footer.html
+- _includes/partials/get_conf_time.html
 - _includes/partials/get_link.html
 - _includes/partials/get_link_types.html
 - _includes/partials/get_main_category.html
 - _includes/partials/get_talk_time.html
+- _includes/partials/get_timestamp.html
 - _includes/partials/header.html
 - _includes/partials/info_bar.html
 - _includes/partials/list_categories.html
 - _includes/partials/list_speakers.html
 - _includes/partials/list_sub_categories.html
+- _includes/partials/live-modal.html
+- _includes/partials/live_button.html
 - _includes/partials/navbar.html
 - _includes/partials/navbar_rooms.html
 - _includes/partials/show_room.html
@@ -230,6 +235,7 @@ files:
 - _sass/leaflet/leaflet-locatecontrol.css
 - _sass/leaflet/leaflet.css
 - assets/css/main.scss
+- assets/icons/live.svg
 - assets/js/main.js
 - assets/webfonts/fa-brands-400.eot
 - assets/webfonts/fa-brands-400.svg