Add poster image to live stream players

4 files changed, 13 insertions, 6 deletions

diff --git a/model/Stream.php b/model/Stream.php
index 718ed98..d577df6 100644
--- a/model/Stream.php
+++ b/model/Stream.php
@@ -264,4 +264,7 @@ class Stream
 			'opus' => 'Opus',
 		);
 	}
+	public function getPoster() {
+		return joinpath(['/', 'thumbs', rawurlencode($this->getRoom()->getStream()).'-poster.png']);
+	}
 }
diff --git a/template/assemblies/player/audio.phtml b/template/assemblies/player/audio.phtml
index 087b61c..0713f20 100644
--- a/template/assemblies/player/audio.phtml
+++ b/template/assemblies/player/audio.phtml
@@ -1,8 +1,9 @@
-<audio
-	autoplay="autoplay"
+<video
 	preload="auto"
-	style="width: 300px;"
-	class="mejs"
+	controls="controls"
+	autoplay="autoplay"
+	style="height: 400px; display: block; margin: auto;"
+	poster="<?=h($stream->getPoster())?>"
 >
 	<source
 		src="<?=h($stream->getAudioUrl('mp3'))?>"
@@ -12,4 +13,4 @@
 		src="<?=h($stream->getAudioUrl('opus'))?>"
 		type="audio/opus"
 	/>
-</audio>
+</video>
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index 8e43864..7cc1e38 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -2,7 +2,8 @@
 <script type="text/javascript" src="<?=h($assets)?>clapprio/level-selector.min.js"></script>
 <script type="text/javascript" src="<?=h($assets)?>clapprio/audio-selector.min.js"></script>
 
-<div class="dashContainer">
+
+<div class="dashContainer" style="min-height: 100px" >
 	<div id="player"></div>
 </div>
 
@@ -44,6 +45,7 @@
 		return new Clappr.Player({
 			sources: sources,
 			width: "100%",
+			poster: "<?=h($stream->getPoster())?>",
 			plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
 			shakaConfiguration: {
 				abr: {
diff --git a/template/assemblies/player/video.phtml b/template/assemblies/player/video.phtml
index ff5039b..3eae170 100644
--- a/template/assemblies/player/video.phtml
+++ b/template/assemblies/player/video.phtml
@@ -10,6 +10,7 @@
 		preload="auto"
 		width="<?=h($stream->getVideoWidth())?>"
 		height="<?=h($stream->getVideoHeight())?>"
+		poster="<?=h($stream->getPoster())?>"
 		style="width: 100%; height: 100%;"
 		class="mejs"
 	>