Fix lightbox multi-loading

src/components/project.vue

@@ -107,7 +107,7 @@ export default {
 			if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]);
 		},
 		quit() {
-			this.lightbox?.end();
+			this.lightbox.end();
 			this.$refs.feedSimpleBar.scrollElement.removeEventListener('scroll', this.onFeedScroll);
 			this.setFeedUpdateTimer(-1);
 			this.map.remove();
@@ -121,6 +121,7 @@ export default {
 			this.baseMaps = {};
 		},
 		initLightbox() {
+			if(!this.lightbox) {
 				this.lightbox = new Lightbox({
 					alwaysShowNavOnTouchDevices: true,
 					albumLabel: 'Media %1 / %2',
@@ -135,6 +136,7 @@ export default {
 					},
 					onClosing: () => {this.hash.items = [this.hash.items[0]];}
 				});
+			}
 		},
 		async initFeed() {
 			//Simplebar event

src/components/projectPost.vue

@@ -56,7 +56,7 @@
 				return this.mouseOverDrill?'drill-message':'marker';
 			},
 			anchorLink() {
-				return '#'+[this.hash.page, this.hash.items[0], this.options.type, this.options.id].join(this.consts.hash_sep);
+				return '#'+[this.hash.page, this.project.currProject.codename, this.options.type, this.options.id].join(this.consts.hash_sep);
 			},
 			modeHisto() {
 				return (this.project.currProject.mode == this.consts.modes.histo);
@@ -104,7 +104,7 @@
 				this.popupRequested = true;
 
 				if(this.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
-				this.hash.items = [this.hash.items[0], this.options.type, this.options.id];
+				this.hash.items = [this.project.currProject.codename, this.options.type, this.options.id];
 
 				return this.map.panToBetweenPanels(this.relatedMarkerLatLng, this.focusZoomLevel, iAnimDuration).then(() => {
 					this.openMarkerPopup(false);

src/scripts/lightbox.js

@@ -41,12 +41,12 @@ export default class Lightbox {
 	init() {
 		if (document.readyState === 'loading') {
 			document.addEventListener('DOMContentLoaded', () => {
-				this.enable();
 				this.build();
+				this.enable();
 			}, { once: true });
 		} else {
-			this.enable();
 			this.build();
+			this.enable();
 		}
 	}
 
@@ -66,8 +66,7 @@ export default class Lightbox {
 	}
 
 	build() {
-		if (document.getElementById('lightbox')) return;
+		if (!document.getElementById('lightbox')) {
-
 			const wrapper = document.createElement('div');
 			wrapper.innerHTML = `
 				<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
@@ -75,6 +74,7 @@ export default class Lightbox {
 					<div class="lb-outerContainer">
 						<div class="lb-container">
 							<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
+							<video class="lb-video" controls autoplay></video>
 							<div class="lb-nav">
 								<div class="lb-prev-area">
 									<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
@@ -101,6 +101,7 @@ export default class Lightbox {
 				</div>
 			`;
 			document.body.append(...wrapper.children);
+		}
 
 		this.overlay = document.getElementById('lightboxOverlay');
 		this.lightbox = document.getElementById('lightbox');
@@ -114,11 +115,7 @@ export default class Lightbox {
 		this.dataContainer = this.lightbox.querySelector('.lb-dataContainer');
 		this.prev = this.lightbox.querySelector('.lb-prev');
 		this.next = this.lightbox.querySelector('.lb-next');
-		this.video = document.createElement('video');
+		this.video = this.lightbox.querySelector('.lb-video');
-		this.video.className = 'lb-video';
-		this.video.controls = true;
-		this.video.autoplay = true;
-		this.image.insertAdjacentElement('afterend', this.video);
 
 		this.setVisible(this.overlay, false);
 		this.setVisible(this.lightbox, false);
@@ -538,6 +535,7 @@ export default class Lightbox {
 	}
 
 	setImageTransform(transform) {
+		if (!this.image) return;
 		this.image.style.setProperty('--scale', String(transform.scale));
 		this.image.style.setProperty('--translate-x', `${transform.translateX}px`);
 		this.image.style.setProperty('--translate-y', `${transform.translateY}px`);
@@ -580,8 +578,8 @@ export default class Lightbox {
 
 	end() {
 		this.disableKeyboardNav();
-		this.video.pause();
+		this.video?.pause();
-		this.video.removeAttribute('src');
+		this.video?.removeAttribute('src');
 		this.container.classList.remove('lb-video-nav', 'moveable', 'moving');
 		window.removeEventListener('resize', this.boundOnResize);
 		window.removeEventListener('mousemove', this.boundOnDragMove);