slide stream (basic form)

assets/css/lustige-styles.css

@@ -5556,6 +5556,8 @@ a.inverted {
   padding: 32px 0; }
 .room.audio .player-wrap {
   padding: 64px 32px; }
+.room.slides .player-wrap .slide-audio {
+  padding: 32px 32px; }
 .room .click-to-irc {
   background-image: url(../img/irc-soft.png);
   height: 376px;

assets/css/src/lustige-styles.scss

@@ -349,6 +349,10 @@ a.inverted {
     padding: 64px 32px;
   }
 
+  &.slides .player-wrap .slide-audio {
+    padding: 32px 32px;
+  }
+
   .click-to-irc {
     background-image: url(../img/irc-soft.png);
     height: 376px;

assets/js/lustiges-script.js

@@ -1,5 +1,5 @@
+// mediaelement-player
 $(function() {
-
 	$('video').mediaelementplayer({
 		mode: 'auto_plugin',
 		usePluginFullScreen: true,
@@ -9,7 +9,11 @@ $(function() {
 		features: ['playpause', 'volume','fullscreen']
 	});
 	$('audio').mediaelementplayer();
+});
 
+
+// tabs
+$(function() {
 	// activate tab via hash and default to video
 	function setTabToHash() {
 		var activeTab = $('.nav-tabs a[href=' + window.location.hash + ']').tab('show');
@@ -22,8 +26,11 @@ $(function() {
 
 	// adjust tabs when hash changes
 	$(window).on('hashchange', setTabToHash).trigger('hashchange');
+});
 
-	// click-to-irc
+
+// click-to-irc
+$(function() {
 	$('.click-to-irc').on('click', function(e) {
 		if($(this).hasClass('activating'))
 			return;
@@ -133,3 +140,24 @@ $(function() {
 		interval(true);
 	});
 });
+
+// slide-stream
+$(function() {
+	var
+		updateTimer = 5000, /* reload slide image 2 seconds after the previous image was loaded */
+		$template = $('img.slide.template').clone().detach();
+
+	function updateSlideImage() {console.log('updateSlideImage');
+		// no way around breaking the cache hard in FF
+		// -> https://bugzilla.mozilla.org/show_bug.cgi?id=295942
+		$template
+			.clone()
+			.on('load', function() {
+				$(this).replaceAll($('img.slide'));
+				setTimeout(updateSlideImage, updateTimer);
+			})
+			.attr('src', $template.data('src')+'?'+Date.now());
+	}
+
+	updateSlideImage();
+});

lib/helper.php

@@ -32,6 +32,9 @@ function link_stream($protocol, $room, $format, $translated = false)
 
 		case 'icecast':
 			return 'http://webm.streaming.media.ccc.de:8000/'.rawurlencode($room).'_'.rawurlencode($language).'.'.rawurlencode($format);
+
+		case 'slide':
+			return 'http://localhost/~peter/slide-stream-test/'.rawurlencode($room).'/current.png';
 	}
 
 	return '#';

template/assemblies/player/slides.phtml

@@ -1,39 +1,13 @@
-<pre><?=print_r(array(
-	'file' => basename(__FILE__),
-	'room' => $room,
-	'language' => $language,
-	'format' => $format
-), true)?></pre>
+<img
+	width="1024"
+	height="576"
 
-<?/*
-<video
-	autoplay="autoplay"
-	controls="controls"
-	id="video-tag"
-	preload="auto"
-	width="<?=h($width)?>"
-	height="<?=h($height)?>"
->
-	<source
-		data-plugin-type="flash"
-		src="rtmp://rtmp.streaming.media.ccc.de:1935/stream/<?=h($room)?>_<?=h($language)?>_<?=h($format)?>"
-		title="h.H264 (RTMP)"
-		type="video/rtmp"
-	/>
-	<source
-		data-plugin-type="native"
-		src="http://hls.streaming.media.ccc.de/hls/<?=h($room)?>_<?=h($language)?>_<?=h($format)?>.m3u8"
-		title="h.264 (HLS)"
-		type="application/vnd.apple.mpegURL"
-	/>
+	data-src="<?=h(link_stream('slide', $room, null, $translated))?>"
 
-	<object
-		data="static/flashmediaelement.swf"
-		type="application/x-shockwave-flash"
-		width="<?=h($width)?>"
-		height="<?=h($height)?>"
-	>
-		<param name="allowFullScreen" value="true">
-	</object>
-</video>
-*/?>
+	alt="<?=h($title)?>"
+	class="slide template"
+/>
+
+<div class="slide-audio">
+	<? include('audio.phtml') ?>
+</div>