From dd5f653fcf7d6865073ee60bb6509859e1523278 Mon Sep 17 00:00:00 2001
From: buttle <chris@gatopelao.org>
Date: Sun, 4 Apr 2021 11:14:03 +0200
Subject: [PATCH] add video preview

---
 src/Site/BlockLayout/PanoramaViewer.php       |  3 ++
 .../common/block-layout/panorama-viewer.phtml | 43 ++++++++-----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/Site/BlockLayout/PanoramaViewer.php b/src/Site/BlockLayout/PanoramaViewer.php
index a7e801b..2cf5d59 100644
--- a/src/Site/BlockLayout/PanoramaViewer.php
+++ b/src/Site/BlockLayout/PanoramaViewer.php
@@ -73,6 +73,7 @@ class PanoramaViewer extends AbstractBlockLayout
 
 		$urls = [];
     $media_types = [];
+    $thumbnails = [];
     $panorama_type = $block->dataValue('panorama_type');
 		static $id = 0;
 
@@ -88,6 +89,7 @@ class PanoramaViewer extends AbstractBlockLayout
         } elseif (strpos($mediaType, 'image/') !== false){
           array_push($urls, $media->originalUrl());
         }
+        array_push($thumbnails, $media->thumbnailUrls());
 			}
 		}
     $width = $block->dataValue('width');
@@ -101,6 +103,7 @@ class PanoramaViewer extends AbstractBlockLayout
 			'urls' => $urls,
       'id' => 'pv-' . ++$id,
       'mediaTypes' => $media_types,
+      'thumbnails' => $thumbnails,
 		]);
 	}
 }
diff --git a/view/common/block-layout/panorama-viewer.phtml b/view/common/block-layout/panorama-viewer.phtml
index 1d85a57..ac4ab7d 100644
--- a/view/common/block-layout/panorama-viewer.phtml
+++ b/view/common/block-layout/panorama-viewer.phtml
@@ -1,4 +1,4 @@
-<div style="position:relative;">
+<div class="pannemmul-wrap" style="position:relative;">
 
 	<?php
 		$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css',
@@ -28,32 +28,27 @@
 		}
 	</style>
 
-<?php if ($panorama_type == "video") { ?>
-
-	<video 	id="<?= $id ?>"
-					class="video-js vjs-default-skin vjs-big-play-centered"
-	  			controls preload="none"
-					style="width:<?= $width ?>px; height: <?= $height ?>px;"
-	  			poster="/images/video/jfk-poster.jpg"
-					crossorigin="anonymous">
-				<?php for($i = 0; $i < count($urls); ++$i) { ?>
-					<source src="<?= $urls[$i] ?>" type="<?= $mediaTypes[$i] ?>"/>
-				<?php } ?>
-	    <p class="vjs-no-js">
-	        To view this video please enable JavaScript, and consider upgrading to
-	        a web browser that <a href="http://videojs.com/html5-video-support/"
-	        target="_blank">supports HTML5 video</a>
-	    </p>
-	</video>
-
-<?php } else { ?>
-
-	<div class="pannellum">
+	<div class="pannellum-wrap">
+	<?php if ($panorama_type == "video") { ?>
+		<video 	id="<?= $id ?>"
+						class="video-js vjs-default-skin vjs-big-play-centered"
+		  			controls preload="none"
+		  			poster="<?= $thumbnails[0]['medium'] ?>"
+						crossorigin="anonymous">
+					<?php for($i = 0; $i < count($urls); ++$i) { ?>
+						<source src="<?= $urls[$i] ?>" type="<?= $mediaTypes[$i] ?>"/>
+					<?php } ?>
+		   <p class="vjs-no-js">
+		       To view this video please enable JavaScript, and consider upgrading to
+		       a web browser that <a href="http://videojs.com/html5-video-support/"
+		       target="_blank">supports HTML5 video</a>
+		   </p>
+		</video>
+	<?php } else { ?>
 		<div id="<?= $id ?>" class="panorama-viewer"></div>
+	<?php } ?>
 	</div>
 
-<?php } ?>
-
 	<script>
 
 	<?php if ($panorama_type == "equirectangular") { ?>