PanoramaViewer-omeka-module/view/common/block-layout/panorama-viewer.phtml

99 lines
2.9 KiB
PHTML
Raw Normal View History

2021-06-27 16:15:17 +02:00
<?php
$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css',
'PanoramaViewer'));
$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js',
'PanoramaViewer'));
2021-04-04 10:30:25 +02:00
2021-06-27 16:15:17 +02:00
if ($panorama_type == "video") {
$this->headLink()->appendStylesheet($this->assetUrl('vendor/video.js/video-js.css',
2021-04-04 10:30:25 +02:00
'PanoramaViewer'));
2021-06-27 16:15:17 +02:00
$this->headScript()->appendFile($this->assetUrl('vendor/video.js/video.js',
2021-04-04 10:30:25 +02:00
'PanoramaViewer'));
2021-06-27 16:15:17 +02:00
$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;
}
?>
2021-04-03 18:47:20 +02:00
2021-06-27 16:15:17 +02:00
<style>
#<?= $id ?> {
height: <?= $height ?>px;
width: <?= $width ?>px;
}
</style>
<div class="pannemmul-wrap" style="position:relative;">
2021-04-03 18:47:20 +02:00
2021-06-27 16:15:17 +02:00
<?php if ($renderSourceLink) { ?>
<div class="source-link">
<a href="<?= $item_url ?>">Source</a>
</div>
<?php } ?>
2021-04-03 18:47:20 +02:00
2021-05-31 19:20:44 +02:00
<div class="archive-item pannellum-wrap">
2021-04-04 11:14:03 +02:00
<?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 { ?>
2021-04-03 18:56:54 +02:00
<div id="<?= $id ?>" class="panorama-viewer"></div>
2021-04-04 11:14:03 +02:00
<?php } ?>
2021-06-27 16:15:17 +02:00
2021-05-31 19:20:44 +02:00
<?php if ($title) { ?>
<div class="item_title">
<?= $title ?>
2021-05-17 19:32:31 +02:00
</div>
2021-05-31 19:20:44 +02:00
<?php } ?>
2021-04-03 18:47:20 +02:00
</div>
2021-06-27 16:15:17 +02:00
</div>
2021-04-03 18:47:20 +02:00
2021-06-27 16:15:17 +02:00
<script>
2021-04-03 22:13:41 +02:00
<?php if ($panorama_type == "equirectangular") { ?>
pannellum.viewer("<?= $id ?>", {
type: "equirectangular",
autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
panorama: "<?= $urls[0]; ?>",
});
<?php } ?>
<?php if ($panorama_type == "cubemap") { ?>
pannellum.viewer("<?= $id ?>", {
type: "cubemap",
autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
cubeMap: <?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>,
});
<?php } ?>
2021-04-04 10:30:25 +02:00
<?php if ($panorama_type == "partial") { ?>
pannellum.viewer("<?= $id ?>", {
type: "equirectangular",
autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
panorama: "<?= $urls[0]; ?>",
haov: 149.87,
2021-06-27 16:15:17 +02:00
vaov: 54.15,
vOffset: 1.17
2021-04-04 10:30:25 +02:00
});
<?php } ?>
<?php if ($panorama_type == "video") { ?>
videojs("<?= $id ?>", {
2021-06-27 16:15:17 +02:00
plugins: {
pannellum: {}
}
2021-04-04 10:30:25 +02:00
});
<?php } ?>
2021-06-27 16:15:17 +02:00
</script>