Support videos

.gitignore

@@ -7,6 +7,7 @@
 *.zip
 *.pdf
 *.tif
+*.mp4
 vendor/
 progetto_QGIS/
 conf.json

webgis/js/components/SiteMedia.js

@@ -0,0 +1,46 @@
+/**
+ * Component to render data for site media (photos and videos)
+ * @class SiteMedia
+ */
+export class SiteMedia {
+    /**
+     * @param {object} data
+     */
+    set siteData(data) {
+        this._siteData = data;
+    }
+
+    renderPhotos() {
+		return `
+			<div class="content has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3">Fotografie</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
+					<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
+						<img src="img/${this._siteData.filename}" width="300"/>
+						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+							<i class="is-flex fa fa-2x fa-play-circle"></i>
+						</div>
+					</figure>
+				</div>
+			</div>
+		`;
+    }
+
+    renderVideos() {
+		return `
+			<div class="content has-text-centered mb-5 pb-5">
+				<p class="is-size-5 mt-3">Video</p>
+				<div style="max-width: 70%; margin: 0 auto">
+					<p class="is-size-6 has-text-centered">Gallery video</p>
+					<figure class="is-relative is-clickable has-text-centered" id="gallery-video">
+						<img src="video/${this._siteData.filename.replace('mp4', 'png')}" width="300"/>
+						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+							<i class="is-flex fa fa-2x fa-play-circle"></i>
+						</div>
+					</figure>
+				</div>
+			</div>
+		`;
+    }
+}

webgis/js/components/SitePhotos.js

@@ -1,31 +0,0 @@
-/**
- * Component to render data for site photos
- * @class SitePhotos
- */
-export class SitePhotos {
-    /**
-     * @param {object} data
-     */
-    set siteData(data) {
-        this._siteData = data;
-    }
-
-    render() {
-		let content = `<div class="content has-text-centered">
-			<p class="is-size-5 mt-3">Fotografie</p>`;
-		content += `
-			<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
-				<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
-					<img src="img/${this._siteData.filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
-						<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
-				</figure>
-			</div>
-		</div>
-		`;
-
-        return content;
-    }
-}

webgis/js/components/SiteSurveys.js

@@ -11,21 +11,19 @@ export class SiteSurveys {
     }
 
     render() {
-		let content = `<div class="has-text-centered has-bottom-border mb-5 pb-5">
+		return `
-			<p class="is-size-5 mt-3">Rilievi CNR-ISPC, elaborazioni grafiche</p>`;
+			<div class="has-text-centered mb-5 pb-5">
-		content += `
+				<p class="is-size-5 mt-3">Rilievi CNR-ISPC, elaborazioni grafiche</p>
-			<div style="max-width: 70%; margin: 0 auto">
+				<div style="max-width: 70%; margin: 0 auto">
-				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
+					<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
-				<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
+					<figure class="is-relative has-text-centered is-clickable" id="gallery-1">
-					<img src="img/${this._siteData.filename}" width="300"/>
+						<img src="img/${this._siteData.filename}" width="300"/>
-					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
-						<i class="is-flex fa fa-2x fa-play-circle"></i>
+							<i class="is-flex fa fa-2x fa-play-circle"></i>
-					</div>
+						</div>
-				</figure>
+					</figure>
+				</div>
 			</div>
-		</div>
 		`;
-
-        return content;
     }
 }

webgis/js/gis.js

@@ -144,6 +144,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
     };
+    // TEMP!! Remove point for Lo Pozzo...
+    sitesGroup.removeLayer(sitesGroup.customGetLayer('lopozzo'));
 
     markersGroup.addTo(map);
     sitesGroup.addTo(map);
@@ -152,9 +154,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     L.control.layers(baseMap, archeo).addTo(map);
 
-    // TEMP!! Remove point for Lo Pozzo...
-    map.removeLayer(sitesGroup.customGetLayer('lopozzo'));
-
     return map;
 }
 /**

webgis/js/ui.js

@@ -4,7 +4,7 @@ import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
 import { SiteSheet } from './components/SiteSheet.js';
 import { SiteDocuments } from './components/SiteDocuments.js';
 import { SiteSurveys } from './components/SiteSurveys.js';
-import { SitePhotos } from './components/SitePhotos.js';
+import { SiteMedia } from './components/SiteMedia.js';
 import { NotConservedSheet } from './components/NotConservedSheet.js';
 import GIS from './gis.js';
 import { Finding } from './components/Finding.js';
@@ -116,30 +116,42 @@ UI.openSiteModal = async function (data, selector) {
 	}
 
 	let images = modal.querySelector('#photos');
+	let docs = modal.querySelector('#documents');
 
 	if (data.documents?.length) {
 		let siteDocs = new SiteDocuments;
 		siteDocs.siteData = data;
-		modal.querySelector('#documents').innerHTML = siteDocs.render();
+		docs.innerHTML = siteDocs.render();
+	} else {
+		docs.innerHTML = '<p class="has-text-centered">Nessun documento disponibile</p>'
 	}
 
 	let surveys = data.images.filter(i => i.type === 'Survey');
 	let photos = data.images.filter(i => i.type === 'Photo');
+	let videos = data.images.filter(i => i.type === 'Video');
+
+	if (surveys.length === 0 && photos.length === 0 && videos.length === 0) {
+		images.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
+	}
 
 	if (images.innerHTML.length === 0) {
 		let siteSurveys = new SiteSurveys;
 		siteSurveys.siteData = surveys[0] ?? undefined;
 		images.innerHTML += surveys[0] ? siteSurveys.render() : '';
 
-		let sitePhotos = new SitePhotos;
+		let siteMedia = new SiteMedia;
-		sitePhotos.siteData = photos[0] ?? undefined;
+		siteMedia.siteData = photos[0] ?? undefined;
-		images.innerHTML += photos[0] ? sitePhotos.render() : '';
+		images.innerHTML += photos[0] ? siteMedia.renderPhotos() : '';
+
+		siteMedia.siteData = videos[0] ?? undefined;
+		images.innerHTML += videos[0] ? siteMedia.renderVideos() : '';
 	}
 
 	modal.classList.add('is-active');
 
 	this.imageGallery('gallery-1', surveys);
 	this.imageGallery('gallery-2', photos);
+	this.imageGallery('gallery-video', videos, true);
 }
 /**
  * @param {object} data The data retrieved from the DB to display as modal content
@@ -220,17 +232,27 @@ UI.sitesMenu = function (menuListSel, map, sites) {
  * Open Spotlight gallery
  * @param {string} galleryId The id of the trigger element
  * @param {Array<Object>} images Array of image objects from DB 
+ * @param {boolean} video Is this a video gallery?
  */
-UI.imageGallery = function (galleryId, images) {
+UI.imageGallery = function (galleryId, images, video = false) {
 	const element = document.querySelector(`#${galleryId}`);
 
 	if (element) {
 		let gallery = [];
 		for (let img of images) {
-			gallery.push({
+			let mediaObj = {
-				src: `img/${img.filename}`,
 				description: `${img.caption} (${img.author})`
-			});
+			};
+
+			if (video) {
+				mediaObj.media = 'video';
+				mediaObj["src-mp4"] = `video/${img.filename}`;
+				mediaObj.poster = `video/${img.filename.replace('mp4', 'png')}`;
+			} else {
+				mediaObj.src = `img/${img.filename}`;
+			}
+
+			gallery.push(mediaObj);
 		}
 
 		document.querySelector(`#${galleryId}`).addEventListener('click', () => {