Merge pull request #3227 from pixelfed/staging

Staging

CHANGELOG.md

@@ -39,6 +39,8 @@
 - Updated ApiV1Controller, add validation messages to update_credentials endpoint. ([cd785601](https://github.com/pixelfed/pixelfed/commit/cd785601))
 - Updated ComposeController, improve location search results ordering by use frequency. ([29c4bd25](https://github.com/pixelfed/pixelfed/commit/29c4bd25))
 - Updated AvatarController, fix mimetype bug. ([7fa9d4dc](https://github.com/pixelfed/pixelfed/commit/7fa9d4dc))
+- Updated PostComponent.vue, filter out non-text comments. ([a7346f21](https://github.com/pixelfed/pixelfed/commit/a7346f21))
+- Update Profile.vue component, fix v-once bug. ([4d003d00](https://github.com/pixelfed/pixelfed/commit/4d003d00))
 -  ([](https://github.com/pixelfed/pixelfed/commit/))
 
 ## [v0.11.2 (2022-01-09)](https://github.com/pixelfed/pixelfed/compare/v0.11.1...v0.11.2)

resources/assets/js/components/PostComponent.vue

@@ -1030,7 +1030,7 @@ export default {
 								self.media = self.status.media_attachments;
 								self.content = response.data.status.content;
 								self.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);
 								});
 								self.likesPage = 2;
@@ -1384,9 +1384,9 @@ export default {
 					axios.get(url)
 						.then(response => {
 								let self = this;
-								this.results = this.layout == 'metro' ?
-									_.reverse(response.data.data) :
-									response.data.data;
+								this.results = response.data.data.filter(p => {
+									return p.pf_type == 'text';
+								});
 								this.pagination = response.data.meta.pagination;
 								if(this.results.length > 0) {
 									$('.load-more-link').removeClass('d-none');

resources/assets/js/components/Profile.vue

@@ -192,7 +192,7 @@
 					<div v-if="mode == 'grid'">
 						<div class="row">
 							<div class="col-4 p-1 p-md-3" v-for="(s, index) in timeline" :key="'tlob:'+index">
-								<a class="card info-overlay card-md-border-0" :href="statusUrl(s)" v-once>
+								<a class="card info-overlay card-md-border-0" :href="statusUrl(s)">
 									<div class="square">
 										<div v-if="s.sensitive" class="square-content">
 											<div class="info-overlay-text-label">

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() {