Merge pull request #3176 from pixelfed/staging

Staging

app/Transformer/Api/StatusTransformer.php

@@ -16,6 +16,7 @@ use App\Services\StatusMentionService;
 use App\Services\ProfileService;
 use Illuminate\Support\Str;
 use App\Services\PollService;
+use App\Models\CustomEmoji;
 
 class StatusTransformer extends Fractal\TransformerAbstract
 {
@@ -36,7 +37,7 @@ class StatusTransformer extends Fractal\TransformerAbstract
 			'content'                   => $status->rendered ?? $status->caption,
 			'content_text'              => $status->caption,
 			'created_at'                => $status->created_at->format('c'),
-			'emojis'                    => [],
+			'emojis'                    => CustomEmoji::scan($status->caption),
 			'reblogs_count'             => 0,
 			'favourites_count'          => $status->likes_count ?? 0,
 			'reblogged'                 => $status->shared(),

resources/assets/js/components/PostComponent.vue

@@ -125,7 +125,7 @@
 										<div v-else>
 											<p :class="[status.content.length > 620 ? 'mb-1 read-more' : 'mb-1']" style="overflow: hidden;">
 												<a class="font-weight-bold pr-1 text-dark text-decoration-none" :href="statusProfileUrl">{{statusUsername}}</a>
-												<span class="comment-text" :id="status.id + '-status-readmore'" v-html="status.content"></span>
+												<span class="comment-text" :id="status.id + '-status-readmore'" v-html="content"></span>
 											</p>
 										</div>
 										<hr>
@@ -953,7 +953,8 @@ export default {
 									})
 								}
 							]
-						}
+						},
+						content: undefined
 					}
 		},
 		watch: {
@@ -1027,6 +1028,11 @@ export default {
 								}
 								self.status = response.data.status;
 								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" />`;
+									self.content = self.content.replace(`:${emoji.shortcode}:`, img);
+								});
 								self.likesPage = 2;
 								self.sharesPage = 2;
 								self.showCaption = !response.data.status.sensitive;

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

@@ -160,7 +160,7 @@
 						<span class="username font-weight-bold">
 							<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
 						</span>
-						<span class="status-content" v-html="status.content"></span>
+						<span class="status-content" v-html="content"></span>
 					</p>
 				</div>
 				<div class="timestamp mt-2">
@@ -241,11 +241,18 @@
 				replyText: '',
 				replyNsfw: false,
 				emoji: window.App.util.emoji,
+				content: undefined
 			}
 		},
 
 		mounted() {
+			let self = this;
 			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" />`;
+				self.content = self.content.replace(`:${emoji.shortcode}:`, img);
+			});
 		},
 
 		methods: {