Update components

resources/assets/js/components/Timeline.vue

@@ -190,6 +190,14 @@
 									<p class="text-center mb-0">
 										<a class="btn btn-link font-weight-bold px-4" href="/discover">Discover new posts and people</a>
 									</p>
+									<hr>
+									<div class="text-center pt-5">
+										<h1>A New Experience Awaits</h1>
+										<p class="lead">Try out an early release of our new design</p>
+										<p class="mb-0 d-flex align-items-center justify-content-center">
+											<a class="btn btn-primary font-weight-bold py-1 px-4 rounded-pill mr-4" href="/i/web">Try new UI</a>
+										</p>
+									</div>
 								</div>
 							</div>
 						</div>
@@ -541,7 +549,7 @@
 			}*/
 
 			if(this.config.ab.spa === true) {
-				this.showPromo = localStorage.getItem('pf_metro_ui.exp.spa') == 'false' ? false : true;
+				this.showPromo = localStorage.getItem('pf_metro_ui.exp.spa' + new Date().getMonth()) == 'false' ? false : true;
 			}
 
 			if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
@@ -1086,7 +1094,7 @@
 			},
 
 			hidePromo() {
-				localStorage.setItem('pf_metro_ui.exp.spa', 'false');
+				localStorage.setItem('pf_metro_ui.exp.spa' + new Date().getMonth(), 'false');
 				this.showPromo = false;
 			}
 		},

resources/assets/js/components/partials/StatusCard.vue

@@ -250,7 +250,7 @@
 			this.profile = window._sharedData.curUser;
 			this.content = this.status.content;
 			this.status.emojis.forEach(function(emoji) {
-				let img = `<img draggable="false" class="emojione custom-emoji" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.url}" data-original="${emoji.url}" data-static="${emoji.static_url}" width="18" height="18" />`;
+				let img = `<img draggable="false" class="emojione custom-emoji" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.url}" data-original="${emoji.url}" data-static="${emoji.static_url}" width="18" height="18" onerror="this.onerror=null;this.src='/storage/emoji/missing.png';" />`;
 				self.content = self.content.replace(`:${emoji.shortcode}:`, img);
 			});
 		},

resources/assets/js/components/presenter/PhotoAlbumPresenter.vue

@@ -25,7 +25,13 @@
 		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
 			<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
 
-				<img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
+				<img
+					:class="img.filter_class + ' img-fluid w-100 p-0'"
+					style=""
+					:src="img.url"
+					:alt="altText(img)"
+					loading="lazy"
+					onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 
 				<p v-if="!status.sensitive && sensitive"
 					@click="status.sensitive = true"
@@ -92,6 +98,8 @@
 </style>
 
 <script type="text/javascript">
+	import BigPicture from 'bigpicture';
+
 	export default {
 		props: ['status'],
 
@@ -115,6 +123,12 @@
 				this.$emit('togglecw');
 			},
 
+			toggleLightbox(e) {
+				BigPicture({
+					el: e.target
+				})
+			},
+
 			altText(img) {
 				let desc = img.description;
 				if(desc) {

resources/assets/js/components/presenter/PhotoPresenter.vue

@@ -32,6 +32,16 @@
 				onerror="this.onerror=null;this.src='/storage/no-preview.png'"
 				@click.prevent="toggleLightbox">
 
+				<!-- <blur-hash-image
+					class="card-img-top"
+					width="32"
+					height="32"
+					:punch="1"
+					:hash="status.media_attachments[0].blurhash"
+					:src="status.media_attachments[0].url"
+					:alt="altText(status)"
+					@click.prevent="toggleLightbox"/> -->
+
 				<p v-if="!status.sensitive && sensitive"
 					@click="status.sensitive = true"
 					style="
@@ -94,6 +104,8 @@
 </style>
 
 <script type="text/javascript">
+	import BigPicture from 'bigpicture';
+
 	export default {
 		props: ['status'],
 
@@ -103,6 +115,9 @@
 			}
 		},
 
+		mounted() {
+		},
+
 		methods: {
 			altText(status) {
 				let desc = status.media_attachments[0].description;
@@ -117,8 +132,10 @@
 				this.$emit('togglecw');
 			},
 
-			toggleLightbox() {
-				this.$emit('lightbox');
+			toggleLightbox(e) {
+				BigPicture({
+					el: e.target
+				})
 			},
 
 			width() {