mirror of
https://github.com/voc/streaming-website
synced 2024-11-10 06:34:17 +00:00
show program teaser on the startpage
This commit is contained in:
MaZderMind
parent
2ad3b1c61c
commit
91837b1646
7 changed files with 114 additions and 33 deletions
|
|
@ -5519,7 +5519,7 @@ a.inverted {
|
|||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
|
||||
|
||||
.rooms .room-group {
|
||||
background-color: #333333;
|
||||
background-color: #222222;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em; }
|
||||
.rooms .room-group h2 {
|
||||
|
|
@ -5529,29 +5529,35 @@ a.inverted {
|
|||
margin: 0;
|
||||
padding: 0; }
|
||||
.rooms .room-group li {
|
||||
background-color: #333333;
|
||||
list-style-type: none;
|
||||
width: 49%;
|
||||
width: 49.5%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 1%;
|
||||
height: 6em;
|
||||
float: left; }
|
||||
.rooms .room-group li.wide {
|
||||
width: 100%; }
|
||||
.rooms .room-group li .title {
|
||||
font-size: 1.75em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px; }
|
||||
.rooms .room-group li a {
|
||||
color: white;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 3.4em;
|
||||
font-size: 1.75em;
|
||||
font-weight: bold;
|
||||
padding: 2em;
|
||||
text-align: center; }
|
||||
.rooms .room-group li a:hover {
|
||||
background-color: #1a1a1a;
|
||||
text-decoration: none; }
|
||||
.rooms .room-group li:nth-child(2n+1) {
|
||||
margin-right: 1%; }
|
||||
.rooms .program-teaser {
|
||||
color: #eeeeee;
|
||||
text-align: center; }
|
||||
.rooms .program-teaser .hidden {
|
||||
visibility: hidden; }
|
||||
|
||||
.room.lq .player-wrap {
|
||||
padding: 32px 0; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -290,7 +290,7 @@ a.inverted {
|
|||
|
||||
.rooms {
|
||||
.room-group {
|
||||
background-color: $gray-dark;
|
||||
background-color: $gray-darker;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2em;
|
||||
|
||||
|
|
@ -305,25 +305,29 @@ a.inverted {
|
|||
}
|
||||
|
||||
li {
|
||||
background-color: $gray-dark;
|
||||
list-style-type: none;
|
||||
width: 49%;
|
||||
width: 49.5%;
|
||||
&.wide { width: 100%; }
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-top: 1%;
|
||||
height: 6em;
|
||||
float: left;
|
||||
|
||||
.title {
|
||||
font-size: 1.75em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 3.4em;
|
||||
font-size: 1.75em;
|
||||
font-weight: bold;
|
||||
padding: 2em;
|
||||
text-align: center;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
|
|
@ -336,6 +340,13 @@ a.inverted {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.program-teaser {
|
||||
color: $gray-lighter;
|
||||
text-align: center;
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
}
|
||||
}
|
||||
|
||||
.room {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ $(function() {
|
|||
});
|
||||
|
||||
// program now-marker & scrolling
|
||||
function updateProgramView(initial) {console.log('updateProgramView');
|
||||
function updateProgramView(initial) {
|
||||
var
|
||||
// offset to the browsers realtime (for simulation
|
||||
offset = $('.program').data('offset'),
|
||||
|
|
@ -165,10 +165,10 @@ $(function() {
|
|||
// slide-stream
|
||||
$(function() {
|
||||
var
|
||||
updateTimer = 5000, /* reload slide image 2 seconds after the previous image was loaded */
|
||||
updateTimer = 5000, /* reload slide image 5 seconds after the previous image was loaded */
|
||||
$template = $('img.slide.template').clone().detach();
|
||||
|
||||
function updateSlideImage() {console.log('updateSlideImage');
|
||||
function updateSlideImage() {
|
||||
// no way around breaking the cache hard in FF
|
||||
// -> https://bugzilla.mozilla.org/show_bug.cgi?id=295942
|
||||
$template
|
||||
|
|
@ -186,21 +186,20 @@ $(function() {
|
|||
// startpage program teaser
|
||||
$(function() {
|
||||
var
|
||||
updateTimer = 5000, /* update display every 5 seconds */
|
||||
refetchTimer = 5*60*1000, /* re-request current / upcoming program every 5 minutes */
|
||||
updateTimer = 5*1000, /* update display every 5 seconds */
|
||||
refetchTimer = 10*60*1000, /* re-request current / upcoming program every 10 minutes */
|
||||
programData = {},
|
||||
$rooms = $('.rooms .lecture li');
|
||||
$lecture = $('.rooms .lecture');
|
||||
|
||||
if($rooms.length == 0)
|
||||
|
||||
if($lecture.length == 0)
|
||||
return;
|
||||
|
||||
function fetchProgram() {
|
||||
console.log('fetchProgram');
|
||||
$.ajax({
|
||||
url: 'program.json',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
console.log('fetchProgram returned');
|
||||
programData = data;
|
||||
updateProgtamTeaser();
|
||||
},
|
||||
|
|
@ -213,7 +212,41 @@ $(function() {
|
|||
}
|
||||
|
||||
function updateProgtamTeaser() {
|
||||
console.log('updateProgtamTeaser');
|
||||
var
|
||||
// offset to the browsers realtime (for simulation
|
||||
offset = $lecture.data('offset'),
|
||||
|
||||
// corrected "now" timestamp in unix-counting (seconds, not microseconds)
|
||||
now = (Date.now() / 1000) - offset;
|
||||
|
||||
$.each(programData, function(room, talks) {
|
||||
var currentTalk, nextTalk;
|
||||
|
||||
$.each(talks, function(room, talk) {
|
||||
|
||||
if(talk.start < now)
|
||||
currentTalk = talk;
|
||||
|
||||
if(!nextTalk && !talk.special && talk.start > now)
|
||||
nextTalk = talk;
|
||||
|
||||
});
|
||||
|
||||
$lecture.find('.'+room)
|
||||
.find('.current-talk')
|
||||
.removeClass('hidden')
|
||||
.find('.t')
|
||||
.text(currentTalk.special ? 'none' : currentTalk.title)
|
||||
.end()
|
||||
.end()
|
||||
.find('.next-talk')
|
||||
.toggleClass('hidden', !nextTalk || nextTalk.special || (nextTalk.start - now > 60*60))
|
||||
.find('.t')
|
||||
.text(nextTalk ? nextTalk.title : '')
|
||||
.end()
|
||||
.end();
|
||||
});
|
||||
|
||||
setTimeout(updateProgtamTeaser, updateTimer);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,3 +29,10 @@ $GLOBALS['CONFIG']['FORMATS'] = array(
|
|||
'audio' => 'Audio',
|
||||
'slides' => 'Slide-Images',
|
||||
);
|
||||
|
||||
// various room-name nappings
|
||||
$GLOBALS['CONFIG']['FAHRPLAN_ROOM_MAPPING'] = array(
|
||||
'Grossbaustelle BER' => 'saal1',
|
||||
'Tiefbaustelle S21' => 'saal2',
|
||||
'Hochbaustelle Elbphilharmonie' => 'saal6',
|
||||
);
|
||||
|
|
|
|||
|
|
@ -46,8 +46,10 @@ function program()
|
|||
foreach($day->room as $room)
|
||||
{
|
||||
$roomidx++;
|
||||
$name = (string)$room['name'];
|
||||
$lastend = false;
|
||||
$name = (string)$room['name'];
|
||||
if(isset($GLOBALS['CONFIG']['FAHRPLAN_ROOM_MAPPING'][$name]))
|
||||
$name = $GLOBALS['CONFIG']['FAHRPLAN_ROOM_MAPPING'][$name];
|
||||
|
||||
foreach($room->event as $event)
|
||||
{
|
||||
|
|
@ -85,8 +87,13 @@ function program()
|
|||
);
|
||||
}
|
||||
|
||||
$program[$name][] = array(
|
||||
$personnames = array();
|
||||
foreach($event->persons->person as $person)
|
||||
$personnames[] = (string)$person;
|
||||
|
||||
$program[$name][] = array(
|
||||
'title' => (string)$event->title,
|
||||
'speaker' => implode(', ', $personnames),
|
||||
|
||||
'fstart' => date('c', $start),
|
||||
'fend' => date('c', $end),
|
||||
|
|
|
|||
|
|
@ -3,13 +3,30 @@
|
|||
<div class="container-fluid rooms">
|
||||
<h1>Live-Streams</h1>
|
||||
|
||||
<div class="room-group lecture">
|
||||
<div class="room-group lecture" data-offset="<?=h($GLOBALS['CONFIG']['SCHEDULE_OFFSET'])?>">
|
||||
<h2>Lecture Rooms</h2>
|
||||
|
||||
<ul>
|
||||
<? foreach(array('saal1', 'saal2', 'saalg', 'saal6') as $room): ?>
|
||||
<li class="<?=h($room)?>">
|
||||
<a href="<?=h(link_room($room))?>"><?=h($rooms[$room])?></a>
|
||||
<a href="<?=h(link_room($room))?>">
|
||||
<div class="title"><?=h($rooms[$room])?></div>
|
||||
|
||||
<div class="program-teaser">
|
||||
|
||||
<span class="current-talk hidden">
|
||||
<strong>Current Talk:</strong>
|
||||
<span class="t">none</span>
|
||||
</span>
|
||||
|
||||
<br />
|
||||
|
||||
<span class="next-talk hidden">
|
||||
<strong>Next Talk:</strong>
|
||||
<span class="t">none</span>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<? endforeach ?>
|
||||
</ul>
|
||||
|
|
@ -22,7 +39,7 @@
|
|||
<ul>
|
||||
<? foreach(array('lounge', 'ambient') as $room): ?>
|
||||
<li class="<?=h($room)?>">
|
||||
<a href="<?=h(link_room($room))?>"><?=h($rooms[$room])?></a>
|
||||
<a href="<?=h(link_room($room))?>" class="title"><?=h($rooms[$room])?></a>
|
||||
</li>
|
||||
<? endforeach ?>
|
||||
</ul>
|
||||
|
|
@ -35,7 +52,7 @@
|
|||
<ul>
|
||||
<? foreach(array('sendezentrum') as $room): ?>
|
||||
<li class="<?=h($room)?> wide">
|
||||
<a href="<?=h(link_room($room))?>"><?=h($rooms[$room])?></a>
|
||||
<a href="<?=h(link_room($room))?>" class="title"><?=h($rooms[$room])?></a>
|
||||
</li>
|
||||
<? endforeach ?>
|
||||
</ul>
|
||||
|
|
@ -48,7 +65,7 @@
|
|||
|
||||
<ul>
|
||||
<li class="recordings wide">
|
||||
<a href="//media.ccc.de/browse/congress/2014/index.html">Recordings</a>
|
||||
<a href="//media.ccc.de/browse/congress/2014/index.html" class="title">Recordings</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue