nicolo/caprigis
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Support videos

Browse Source
This commit is contained in:
Nicolò P
2024-11-30 18:37:01 +01:00
parent c895894b0d
commit 1393b779ff
8 changed files with 92 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
webgis/js/ui.js
View File

@@ -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;
sitePhotos.siteData = photos[0] ?? undefined;
images.innerHTML += photos[0] ? sitePhotos.render() : '';
let siteMedia = new SiteMedia;
siteMedia.siteData = photos[0] ?? undefined;
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({
src: `img/${img.filename}`,
let mediaObj = {
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', () => {