Flatten lightbox comment into a vue component

src/components/Lightbox.vue

@@ -1,24 +1,26 @@
 <script>
 import AppIcon from '@components/AppIcon';
+import ProjectRelTime from '@components/ProjectRelTime';
 import { getStyleProperty } from '@scripts/common';
 
 /* lightbox (https://github.com/lokesh/lightbox2) converted to a vue component and improved to support videos */
 
 export default {
 	components: {
-		AppIcon
+		AppIcon,
+		ProjectRelTime
 	},
 	props: {
 		alwaysShowNavOnTouchDevices: {type: Boolean, default: false},
 		positionFromTop: {type: Number, default: 50},
 		wrapAround: {type: Boolean, default: false},
 		disableScrolling: {type: Boolean, default: false},
-		sanitizeTitle: {type: Boolean, default: false},
 		hasVideo: {type: Boolean, default: true},
 		maxWidth: {type: Number, default: null},
 		maxHeight: {type: Number, default: null}
 	},
 	emits: ['media-change', 'closing'],
+	inject: ['isMobile'],
 	data() {
 		/*
 		fadeDuration/imageFadeDuration/resizeDuration read --trans-quick/--trans-slow
@@ -44,6 +46,33 @@ export default {
 			resizeDuration
 		};
 	},
+	computed: {
+		currentMedia() {
+			return this.album[this.currentImageIndex] || null;
+		},
+		relTimeLines() {
+			const media = this.currentMedia;
+			if(!media || this.isMobile()) return [];
+
+			const postedOn = {
+				key: 'posted',
+				icon: 'upload',
+				titleWrapperLangId: 'media.posted_on',
+				localTime: media.postedOnLocalTime,
+				siteTime: media.postedOnSiteTime,
+				offset: media.postedOnDayOffset
+			};
+			const takenOn = {
+				key: 'taken',
+				icon: media.type+'-shot',
+				titleWrapperLangId: 'media.'+media.type+'_taken_on',
+				localTime: media.takenOnLocalTime,
+				siteTime: media.takenOnSiteTime,
+				offset: media.takenOnDayOffset
+			};
+			return (media.context == 'marker') ? [takenOn, postedOn] : [postedOn, takenOn];
+		}
+	},
 	mounted() {
 		this.setVisible(this.$refs.overlay, false);
 		this.setVisible(this.$refs.lightboxEl, false);
@@ -122,12 +151,19 @@ export default {
 			this.album.push({
 				alt: link.getAttribute('data-alt') || '',
 				link: link.getAttribute('href'),
-				title: link.getAttribute('data-title') || link.getAttribute('title') || '',
 				orientation: parseInt(link.getAttribute('data-orientation') || '0', 10),
 				type: link.getAttribute('data-type') || 'image',
 				id: link.getAttribute('data-id'),
 				width: parseInt(img?.getAttribute('width') || '0', 10),
 				height: parseInt(img?.getAttribute('height') || '0', 10),
+				context: link.getAttribute('data-context') || '',
+				comment: link.getAttribute('data-comment') || '',
+				postedOnLocalTime: link.getAttribute('data-posted-on-local-time') || '',
+				postedOnSiteTime: link.getAttribute('data-posted-on-site-time') || '',
+				postedOnDayOffset: link.getAttribute('data-posted-on-day-offset') || '',
+				takenOnLocalTime: link.getAttribute('data-taken-on-local-time') || '',
+				takenOnSiteTime: link.getAttribute('data-taken-on-site-time') || '',
+				takenOnDayOffset: link.getAttribute('data-taken-on-day-offset') || '',
 				set: link.getAttribute('data-lightbox') || ''
 			});
 		},
@@ -346,16 +382,16 @@ export default {
 				this.$refs.next.style.opacity = '';
 			}
 		},
+		hasCaption(media) {
+			return !!(media && (media.comment || media.postedOnSiteTime || media.takenOnSiteTime));
+		},
 		updateDetails(media = this.album[this.currentImageIndex], show = true) {
 			if(!media) return;
 
-			if(media.title) {
-				if(this.sanitizeTitle) this.$refs.caption.textContent = media.title;
-				else this.$refs.caption.innerHTML = media.title;
+			if(this.hasCaption(media)) {
 				if(show) this.fade(this.$refs.caption, true, 200);
 				else this.setVisible(this.$refs.caption, true);
 			} else {
-				this.$refs.caption.textContent = '';
 				this.setVisible(this.$refs.caption, false);
 			}
 
@@ -567,10 +603,19 @@ export default {
 						</a>
 					</div>
 				</div>
-				<div class="lb-dataContainer desktop" ref="dataContainer" @click="end()">
+				<div class="lb-dataContainer" ref="dataContainer" @click="end()">
 					<div class="lb-data">
 						<div class="lb-details">
-							<span class="lb-caption" ref="caption"></span>
+							<span class="lb-caption" ref="caption">
+								<template v-if="hasCaption(currentMedia)">
+									<span v-if="!!currentMedia?.comment" class="lb-caption-line comment">
+										<AppIcon icon="post" width="fixed" size="lg" text-classes="comment-text" :text="currentMedia.comment" />
+									</span>
+									<span v-for="line in relTimeLines" :key="line.key" class="lb-caption-line">
+										<ProjectRelTime :icon="line.icon" :titleWrapperLangId="line.titleWrapperLangId" :localTime="line.localTime" :siteTime="line.siteTime" :offset="line.offset" />
+									</span>
+								</template>
+							</span>
 						</div>
 						<div class="lb-closeContainer">
 							<a class="lb-close" ref="closeButton" href="#" role="button" @click.prevent.stop="end()" @keyup="onCloseKeyup">