Add poster images to streams list page as previews

nginx/www/stream/stat.xsl

@@ -24,6 +24,7 @@
 	.main{width:100%;height:100%;display:flex;align-items:center;max-height: calc(100vh - 100px);}
 	#footer{margin-top:auto;padding:10px;width:100%;margin-bottom:auto;}
 	video{max-width:100%;max-height:100%;display:flex;margin:0 auto;}
+	td{vertical-align: middle}
 	a,a:visited {color:unset;}
 	@media only screen and (max-width:600px) {
 		.main{flex-direction: column;}
@@ -34,7 +35,7 @@
 		table td:nth-child(3), table th:nth-child(3),
 		table td:nth-child(18), table th:nth-child(12) {display:unset;}
 		table tr:nth-of-type(2) {display:none;}
-		tr {display: flex; justify-content: space-between;}
+		tr {display: flex; justify-content: space-between;align-items: center;}
 	}
 			</style>
 		</head>
@@ -127,11 +128,16 @@
 			<b><xsl:value-of select="name"/></b>
 		</td>
 		<td>
-			<a target="_blank">
+			<a target="_blank" style="flex-direction: column;display: flex;margin: 0 auto;align-items: center;">
 				<xsl:attribute name="href">
 					/hls.html?<xsl:value-of select="name"/>
 				</xsl:attribute>
 				/hls.html?<xsl:value-of select="name"/>
+				<img width="320" height="180">
+					<xsl:attribute name="src">
+						/posters/<xsl:value-of select="name"/>.jpg
+					</xsl:attribute>
+				</img>
 			</a>
 		</td>
 		<td align="middle"> <xsl:value-of select="nclients"/> </td>