show program teaser on the startpage

assets/css/lustige-styles.css

@@ -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%;
+      padding: 2em;
-      line-height: 3.4em;
-      font-size: 1.75em;
-      font-weight: bold;
       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; }

assets/css/src/lustige-styles.scss

@@ -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%;
+        padding: 2em;
-        line-height: 3.4em;
-        font-size: 1.75em;
-        font-weight: bold;
         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 {

assets/js/lustiges-script.js

@@ -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 */
+		updateTimer = 5*1000, /* update display every 5 seconds */
-		refetchTimer = 5*60*1000, /* re-request current / upcoming program every 5 minutes */
+		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);
 	}
 

lib/config.php

@@ -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',
+);

lib/program.php

@@ -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()
 					);
 				}
 
+			$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),

template/rooms.phtml

@@ -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>