Skip to content

Commit

Permalink
Add start/end indication to streaming modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@lorenzschmid
lorenzschmid committed Nov 8, 2020
1 parent 0908e0a commit 701507d
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 59 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
jekyll-theme-conference (2.4.1)
jekyll-theme-conference (2.5.0)
jekyll (~> 4.0)

GEM
Expand Down
25 changes: 20 additions & 5 deletions _data/lang.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ en:
for: for
overview: Overview
more_information: More Information
live: Live
streaming: Streaming
live:
live: Live
streaming: Live Stream
pre_stream: Live stream has not started yet.
post_stream: Live stream has ended.
location:
title: Location
directions: Directions
Expand All @@ -33,7 +36,11 @@ de:
for: für
overview: Übersicht
more_information: Weitere Informationen
live: Live
live:
live: Live
streaming: Live Stream
pre_stream: Der Live Stream hat noch nicht begonnen.
post_stream: Der Live Stream ist beendet.
location:
title: Örtlichkeit
directions: Anfahrt
Expand All @@ -58,7 +65,11 @@ fr:
for: pour
overview: Aperçu
more_information: Plus d'informations
live: En direct
live:
live: En direct
streaming: Diffusion en direct
pre_stream: La diffusion en direct n'a pas encore commencé.
post_stream: La diffusion en direct est terminée.
location:
title: Lieu
directions: Indications
Expand All @@ -83,7 +94,11 @@ pt:
for: por
overview: Visão geral
more_information: Mais informações
live: Ao vivo
live:
live: Ao vivo
streaming: Transmissão ao vivo
pre_stream: A transmissão ao vivo ainda não começou.
post_stream: A transmissão ao vivo terminou.
location:
title: Localização
directions: Indicações
Expand Down
160 changes: 112 additions & 48 deletions _includes/js/conference-live.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ window.conference.live = (function() {
let durDemo = 5*60; // in seconds
let durPause = 10; // in seconds

let timer;
let liveTimer;
let liveTimerCorr;

let timeNowReal = function () {
// Return UNIX timestamp in seconds
Expand Down Expand Up @@ -79,6 +80,18 @@ window.conference.live = (function() {
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');
Expand Down Expand Up @@ -114,36 +127,26 @@ window.conference.live = (function() {
}
}

if (timeNow() > confEnd) {
if (timeNow() > confEnd && !demo) {
// Cancel timer after program is over
clearInterval(timer);
}
};

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));
clearInterval(liveTimer);
}
};

let startUpdate = function () {
if(typeof timer !== "undefined") {
clearInterval(timer);
if(typeof liveTimer !== "undefined") {
clearInterval(liveTimer);
}
updateLiveButtons();

if (demo) {
timer = setInterval(updateLiveButtons, 100);
liveTimerCorr = (confEnd - confStart) / (durDemo - 2*durPause);
liveTimer = setInterval(updateLiveButtons, 100);
}
else {
liveTimerCorr = 1;
setTimeout(function() {
timer = setInterval(updateLiveButtons, 60*1000);
liveTimer = setInterval(updateLiveButtons, 60*1000);
updateLiveButtons();
}, timeStart() * 1000);
}
Expand All @@ -155,73 +158,133 @@ window.conference.live = (function() {
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 %}
{%- 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 }}"
"href": "{{ room.live }}",
"start": {{ room_ts_start }},
"end": {{ room_ts_end }}
},
{% endif %}
{% endfor %}
{%- endif -%}
{%- endfor -%}
};

let switchStream = function (modal, roomName) {
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]];
}

modal.find('.modal-footer .btn').removeClass('active');
modal.find('iframe').attr('src', room.href);
modal.find('#stream-button' + room.id).addClass('active');
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 (el, event) {
let modal = $(el);

modal.find('iframe').attr('src', '');
modal.find('.modal-footer .btn').removeClass('active');
let hideModal = function (event) {
streamModal.find('iframe').attr('src', '');
streamModal.find('.modal-footer .btn').removeClass('active');
};

let initStream = function() {
elSel = '#stream-modal';
let startStream = function() {
streamModal = $('#stream-modal');

$(elSel).on('show.bs.modal', function (event) {
let modal = $(this);
streamModal.on('show.bs.modal', function (event) {
let button = $(event.relatedTarget);
let roomName = button.data('room');

switchStream(modal, roomName);
setStream(roomName);
});
$(elSel).on('hide.bs.modal', function (event) {
hideModal(this, event);
streamModal.on('hide.bs.modal', function (event) {
hideModal(event);
});

$(elSel + ' .modal-footer .btn').on('click', function(event) {
streamModal.find('.modal-footer .btn').on('click', function(event) {
event.preventDefault();

let modal = $(elSel);
let roomName = $(this).data('room')

switchStream(modal, roomName);
setStream(roomName);
});
};

{%- else -%}

let initStream = function() {};
let startStream = function() {};

{%- endif %}

let init = function () {
startUpdate();
initStream();
startStream();
};

return {
Expand All @@ -234,6 +297,7 @@ window.conference.live = (function() {
getTime: getTime,

toggleDemo: toggleDemo,
demoOn: demoOn,
durDemo: durDemo,
durPause: durPause
};
Expand Down
5 changes: 4 additions & 1 deletion _includes/partials/live-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
{{ site.data.lang[site.conference.lang].streaming | default: "Streaming" }}
{{ 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 %}
Expand Down
2 changes: 1 addition & 1 deletion _includes/partials/live_button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<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 | default: "Live" }}
{{ site.data.lang[site.conference.lang].live.live | default: "Live" }}
{%- if site.conference.live.streaming -%}
</a>
{%- else -%}
Expand Down
4 changes: 2 additions & 2 deletions _includes/partials/navbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

<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].streaming | default: "Streaming" }}{% endif %}" data-toggle="modal" data-target="#stream-modal" data-room="">
<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 %}
Expand All @@ -51,7 +51,7 @@

<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 | default: "Live" }}
{{ site.data.lang[site.conference.lang].live.live | default: "Live" }}
</span>
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion jekyll-theme-conference.gemspec
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Gem::Specification.new do |spec|
spec.name = "jekyll-theme-conference"
spec.version = "2.4.1"
spec.version = "2.5.0"
spec.authors = ["Lorenz Schmid"]
spec.email = ["lorenzschmid@users.noreply.github.com"]

Expand Down

0 comments on commit 701507d

Please sign in to comment.