adds video support

README.md

@@ -5,6 +5,15 @@ a lightweight, free, and open source panorama viewer for the web.
 Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free.
 
 
+## Install
+
+```
+cd ./modules
+https://git.hangar.org/arcHIVE-tech/PanoramaViewer/archive/main.zip
+unzip main.zip
+mv panoramaviewer/ PanoramaViewer
+```
+
 ## LISENCE
 The module is released under the [MIT] License.
 

asset/vendor/pannellum/videojs-pannellum-plugin.js

@@ -0,0 +1,55 @@
+/*
+ * Video.js plugin for Pannellum
+ * Copyright (c) 2015-2018 Matthew Petroff
+ * MIT License
+ */
+
+(function(document, videojs, pannellum) {
+'use strict';
+
+var registerPlugin = videojs.registerPlugin || videojs.plugin;  // Use registerPlugin for Video.js >= 6
+registerPlugin('pannellum', function(config) {
+    // Create Pannellum instance
+    var player = this;
+    var container = player.el();
+    var vid = container.getElementsByTagName('video')[0],
+        pnlmContainer = document.createElement('div');
+    pnlmContainer.style.zIndex = '0';
+    config = config || {};
+    config.type = 'equirectangular';
+    config.dynamic = true;
+    config.showZoomCtrl = false;
+    config.showFullscreenCtrl = false;
+    config.autoLoad = true;
+    config.panorama = vid;
+    pnlmContainer.style.visibility = 'hidden';
+    player.pnlmViewer = pannellum.viewer(pnlmContainer, config);
+    container.insertBefore(pnlmContainer, container.firstChild);
+    vid.style.display = 'none';
+
+    // Handle update settings
+    player.on('play', function() {
+        if (vid.readyState > 1)
+            player.pnlmViewer.setUpdate(true);
+    });
+    player.on('canplay', function() {
+        if (!player.paused())
+            player.pnlmViewer.setUpdate(true);
+    });
+    player.on('pause', function() {
+        player.pnlmViewer.setUpdate(false);
+    });
+    player.on('loadeddata', function() {
+        pnlmContainer.style.visibility = 'visible';
+    });
+    player.on('seeking', function() {
+        if (player.paused())
+            player.pnlmViewer.setUpdate(true);
+    });
+    player.on('seeked', function() {
+        if (player.paused())
+            player.pnlmViewer.setUpdate(false);
+    });
+});
+
+})(document, videojs, pannellum);

asset/vendor/video.js/LICENSE

@@ -0,0 +1,13 @@
+Copyright Brightcove, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

asset/vendor/video.js/README.md

@@ -0,0 +1,5 @@
+# video.js 7.11.4
+
+https://github.com/videojs/video.js
+
+

src/Site/BlockLayout/PanoramaViewer.php

@@ -72,6 +72,8 @@ class PanoramaViewer extends AbstractBlockLayout
 		}
 
 		$urls = [];
+    $media_types = [];
+    $panorama_type = $block->dataValue('panorama_type');
 		static $id = 0;
 
 		foreach ($attachments as $attachment)
@@ -80,7 +82,10 @@ class PanoramaViewer extends AbstractBlockLayout
 			{
 				$mediaType = $media->mediaType();
 				$mediaRenderer = $media->renderer();
-				if (strpos($mediaType, 'image/') !== false) {
+        if ($panorama_type == "video" && strpos($mediaType, 'video/') !== false){
+          array_push($urls, $media->originalUrl());
+					array_push($media_types, $mediaType);
+        } elseif (strpos($mediaType, 'image/') !== false){
           array_push($urls, $media->originalUrl());
         }
 			}
@@ -88,13 +93,14 @@ class PanoramaViewer extends AbstractBlockLayout
     $width = $block->dataValue('width');
     $height = $width / $block->dataValue('ratio');
 		return $view->partial('common/block-layout/panorama-viewer', [
-			'panorama_type' => $block->dataValue('panorama_type'),
+			'panorama_type' => $panorama_type,
 			'title' => $block->dataValue('title'),
 			'width' => $width,
 			'height' => $height,
       'autoLoad' => $block->dataValue('autoLoad'),
 			'urls' => $urls,
       'id' => 'pv-' . ++$id,
+      'mediaTypes' => $media_types,
 		]);
 	}
 }

view/common/block-layout/panorama-viewer.phtml

@@ -1,14 +1,24 @@
 <div style="position:relative;">
-	<?php
-		$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css', 'PanoramaViewer'));
-		$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js', 'PanoramaViewer'));
 
+	<?php
+		$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css',
+																												'PanoramaViewer'));
+		$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js',
+																										'PanoramaViewer'));
+
+		if ($panorama_type == "video") {
+			$this->headLink()->appendStylesheet($this->assetUrl('vendor/video.js/video-js.css',
+																													'PanoramaViewer'));
+			$this->headScript()->appendFile($this->assetUrl('vendor/video.js/video.js',
+																											'PanoramaViewer'));
+			$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/videojs-pannellum-plugin.js',
+																											'PanoramaViewer'));
+		}
 		if ($title !== false && $title !== "") {
 			$title = sprintf('<p id="panorama-viewer-title">%s</p>', $title);
 		} else {
 			$title = false;
 		}
-
 	?>
 
 	<style>
@@ -18,10 +28,32 @@
 		}
 	</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 id="<?= $id ?>" class="panorama-viewer"></div>
 	</div>
 
+<?php } ?>
+
 	<script>
 
 	<?php if ($panorama_type == "equirectangular") { ?>
@@ -38,6 +70,23 @@
 						cubeMap: <?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>,
 			});
 	<?php } ?>
+	<?php	if ($panorama_type == "partial") { ?>
+			pannellum.viewer("<?= $id ?>", {
+				type: "equirectangular",
+				autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
+				panorama: "<?= $urls[0]; ?>",
+				haov: 149.87,
+		    vaov: 54.15,
+		    vOffset: 1.17
+			});
+	<?php	} ?>
+	<?php	if ($panorama_type == "video") { ?>
+		videojs("<?= $id ?>", {
+		   plugins: {
+		      pannellum: {}
+		   }
+		});
+	<?php	} ?>
 
 	<?php if ($title !== false): ?>
 		$('#pannellum-ui').append('<?= $title ?>');