Add poster image to live stream players

model/Stream.php

@@ -264,4 +264,7 @@ class Stream
 			'opus' => 'Opus',
 		);
 	}
+	public function getPoster() {
+		return joinpath(['/', 'thumbs', rawurlencode($this->getRoom()->getStream()).'-poster.png']);
+	}
 }

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>

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: {

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