From ff785d9ed55378263bf3b130bb473c815b20b637 Mon Sep 17 00:00:00 2001
From: Florian Larysch
Date: Thu, 29 Dec 2016 00:33:22 +0100
Subject: add initial player

---
 assets/js/lustiges-script.js            | 29 ++++++++++++++---------------
 template/assemblies/player/relive.phtml | 22 +++++++---------------
 template/page.phtml                     |  1 +
 3 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 63227a3..56636b6 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -19,21 +19,20 @@ $(function() {
 		features: ['playpause', 'volume', 'current']
 	});
 
-	$('body.relive-player video.mejs').mediaelementplayer({
-		mode: 'auto_plugin',
-		plugins: ['flash'],
-		flashName: 'flashmediaelement.swf',
-		pluginPath: '../assets/mejs/',
-		enableAutosize: true,
-		success: function (mediaElement) {
-			mediaElement.addEventListener('canplay', function () {
-				// skip forward to scheduled beginning of the talk at ~ 0:14:30  (30 sec offset, if speaker starts on time)
-				if ( mediaElement.currentTime == 0 ) {
-					mediaElement.setCurrentTime(870);
-				}
-			})
-		}
-	});
+	var $relivePlayer = $('body.relive-player .video-wrap');
+	if($relivePlayer.length > 0) {
+		var player = new Clappr.Player({
+			baseUrl: 'assets/clapprio/',
+			source: $relivePlayer.data('m3u8'),
+			height: $relivePlayer.data('height'),
+			width: $relivePlayer.data('width'),
+			/*vents: {
+
+			}*/
+		});
+
+		player.attachTo($relivePlayer.get(0));
+	}
 
 	$(window).on('load', function() {
 		$(window).trigger('resize');
diff --git a/template/assemblies/player/relive.phtml b/template/assemblies/player/relive.phtml
index ae108b1..93b6c95 100644
--- a/template/assemblies/player/relive.phtml
+++ b/template/assemblies/player/relive.phtml
@@ -1,16 +1,8 @@
-<div style="max-width: <?=h($width)?>px; max-height: <?=h($height)?>px;" class="video-wrap">
-	<video
-		autoplay="autoplay"
-		preload="auto"
-		width="<?=h($width)?>"
-		height="<?=h($height)?>"
-		style="width: 100%; height: 100%;"
-		class="relive mejs"
-	>
-		<source
-			src="<?=h(forceproto($talk['playlist']))?>"
-			title="h.264 (HLS)"
-			type="application/x-mpegURL"
-		/>
-	</video>
+<div
+	style="max-width: <?=h($width)?>px; max-height: <?=h($height)?>px;"
+	class="video-wrap"
+	data-width="<?=h($width)?>"
+	data-height="<?=h($height)?>"
+	data-m3u8="<?=h(forceproto($talk['playlist']))?>"
+>
 </div>
diff --git a/template/page.phtml b/template/page.phtml
index b3bad81..508b271 100644
--- a/template/page.phtml
+++ b/template/page.phtml
@@ -55,6 +55,7 @@
 		<script type="text/javascript" src="<?=h($assets)?>js/lib/bootstrap-datepicker.min.js"></script>
 
 		<script type="text/javascript" src="<?=h($assets)?>mejs/mediaelement-and-player.min.js"></script>
+		<script type="text/javascript" src="<?=h($assets)?>clapprio/clappr.min.js"></script>
 		<script type="text/javascript" src="<?=h($assets)?>js/lustiges-script.js"></script>
 
 		<? if(isset($subtitles) && $subtitles->isEnabled()): ?>
-- 
cgit v1.2.3