From 28445e27b85b783ce5eba394f89e583a540cd88b Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Thu, 28 May 2020 23:27:27 -0600
Subject: [PATCH] Add notification preview to NotificationCard

---
 .../assets/js/components/NotificationCard.vue  | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/components/NotificationCard.vue b/resources/assets/js/components/NotificationCard.vue
index b5a03bc97..965189694 100644
--- a/resources/assets/js/components/NotificationCard.vue
+++ b/resources/assets/js/components/NotificationCard.vue
@@ -20,7 +20,16 @@
 					<div class="media-body font-weight-light small">
 						<div v-if="n.type == 'favourite'">
 							<p class="my-0">
-								<a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> liked your <a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
+								<a :href="n.account.url" class="font-weight-bold text-dark word-break" :title="n.account.username">{{truncate(n.account.username)}}</a> liked your 
+								<span v-if="n.status.hasOwnProperty('media_attachments')">
+									<a class="font-weight-bold" v-bind:href="n.status.url" :id="'fvn-' + n.id">post</a>.
+									<b-popover :target="'fvn-' + n.id" title="" triggers="hover" placement="top" boundary="window">
+										<img :src="notificationPreview(n)" width="100px" height="100px">
+									</b-popover>
+								</span>
+								<span v-else>
+									<a class="font-weight-bold" v-bind:href="n.status.url">post</a>.
+								</span>
 							</p>
 						</div>
 						<div v-else-if="n.type == 'comment'">
@@ -219,6 +228,13 @@
 
 			redirect(url) {
 				window.location.href = url;
+			},
+
+			notificationPreview(n) {
+				if(!n.status.hasOwnProperty('media_attachments') || !n.status.media_attachments.length) {
+					return '/storage/no-preview.png';
+				}
+				return n.status.media_attachments[0].preview_url;
 			}
 		}
 	}