Update status square previews, add blurhash and improved content warnings

resources/assets/js/components/Hashtag.vue

@@ -36,8 +36,16 @@
 				<div v-for="(tag, index) in top" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
 					<a class="card info-overlay card-md-border-0" :href="tag.status.url">
 						<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
-							<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content" :style="'background-image: url(/storage/no-preview.png)'"></div>
-							<div v-else class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
+							<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content">
+								<blur-hash-image
+									v-if="s.sensitive"
+									width="32"
+									height="32"
+									punch="1"
+									:hash="tag.status.media_attachments[0].blurhash"
+									/>
+							</div>
+							<div v-else class="square-content" :style="'background-image: url('+tag.status.media_attachments[0].preview_url+')'"></div>
 							<div class="info-overlay-text">
 								<h5 class="text-white m-auto font-weight-bold">
 									<span class="pr-4">
@@ -57,15 +65,38 @@
 				<div v-for="(tag, index) in tags" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
 					<a class="card info-overlay card-md-border-0" :href="tag.status.url">
 						<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
-							<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content" :style="'background-image: url(/storage/no-preview.png)'"></div>
-							<div v-else class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
+							<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content">
+								<div class="info-overlay-text-label">
+									<h5 class="text-white m-auto font-weight-bold">
+										<span>
+											<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
+										</span>
+									</h5>
+								</div>
+								<blur-hash-canvas
+									width="32"
+									height="32"
+									:hash="tag.status.media_attachments[0].blurhash"
+									/>
+							</div>
+							<div v-else class="square-content">
+								<blur-hash-image
+									width="32"
+									height="32"
+									:hash="tag.status.media_attachments[0].blurhash"
+									:src="tag.status.media_attachments[0].preview_url"
+									/>
+							</div>
+							<span v-if="tag.status.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
+							<span v-if="tag.status.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
+							<span v-if="tag.status.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
 							<div class="info-overlay-text">
 								<h5 class="text-white m-auto font-weight-bold">
 									<span class="pr-4">
-										<span class="far fa-heart fa-lg pr-1"></span> {{tag.status.like_count}}
+										<span class="far fa-heart fa-lg pr-1"></span> {{tag.status.favourites_count}}
 									</span>
 									<span>
-										<span class="fas fa-retweet fa-lg pr-1"></span> {{tag.status.share_count}}
+										<span class="far fa-comment fa-lg pr-1"></span> {{tag.status.reply_count}}
 									</span>
 								</h5>
 							</div>

resources/assets/js/components/Profile.vue

@@ -183,21 +183,42 @@
 					<div class="row" v-if="mode == 'grid'">
 						<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>
-								<div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
+								<div class="square">
+									<div v-if="s.sensitive" class="square-content">
+										<div class="info-overlay-text-label">
+											<h5 class="text-white m-auto font-weight-bold">
+												<span>
+													<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
+												</span>
+											</h5>
+										</div>
+										<blur-hash-canvas
+											width="32"
+											height="32"
+											:hash="s.media_attachments[0].blurhash"
+											/>
+									</div>
+									<div v-else class="square-content">
+										
+										<blur-hash-image
+											width="32"
+											height="32"
+											:hash="s.media_attachments[0].blurhash"
+											:src="s.media_attachments[0].preview_url"
+											/>
+									</div>
 									<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
 									<span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
 									<span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
-									<div class="square-content" v-bind:style="previewBackground(s)">
-									</div>
 									<div class="info-overlay-text">
 										<h5 class="text-white m-auto font-weight-bold">
 											<span>
 												<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
-												<span class="d-flex-inline">{{s.favourites_count}}</span>
+												<span class="d-flex-inline">{{formatCount(s.favourites_count)}}</span>
 											</span>
 											<span>
-												<span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
-												<span class="d-flex-inline">{{s.reblogs_count}}</span>
+												<span class="far fa-comment fa-lg p-2 d-flex-inline"></span>
+												<span class="d-flex-inline">{{formatCount(s.reply_count)}}</span>
 											</span>
 										</h5>
 									</div>
@@ -818,6 +839,11 @@
 				return 'background-image: url(' + preview + ');';
 			},
 
+			blurhHashMedia(status) {
+				return status.sensitive ? null :
+					status.media_attachments[0].preview_url;
+			},
+
 			switchMode(mode) {
 				this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
 				if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {

resources/assets/sass/custom.scss

@@ -131,6 +131,22 @@ body, button, input, textarea {
     background-color: rgba(0,0,0,0.5);
 }
 
+.info-overlay-text-label {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+
+    h5 {
+      z-index: 2;
+    }
+}
+
+.info-overlay:hover .info-overlay-text-label {
+    display: none;
+}
+
 .font-weight-lighter {
     font-weight: 300 !important
 }
@@ -565,4 +581,17 @@ details summary::-webkit-details-marker {
 
 .follow-modal {
   max-width: 400px !important;
+}
+
+.square-content {
+  img {
+    object-fit: cover !important;
+  }
+}
+
+.square .square-content {
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
 }