Update components

resources/assets/js/components/My2020.vue

@@ -165,6 +165,12 @@ export default {
 				return;
 			}
 
+			if(this.page == 7 && this.stats.popular.places == null) {
+				this.page = 9;
+				window.history.pushState({}, {}, '/i/my2020?v=20&ned=0&sl=9');
+				return;
+			}
+
 			if(this.page == 8) {
 				axios.post('/api/pixelfed/v2/seasonal/yir', {
 					'profile_id' : this.user.profile_id
@@ -178,6 +184,11 @@ export default {
 			if(this.page == 1) {
 				return;
 			}
+			if(this.page == 9 && this.stats.popular.places == null) {
+				this.page = 7;
+				window.history.pushState({}, {}, '/i/my2020?v=20&ned=0&sl=7');
+				return;
+			}
 			--this.page;
 			if(this.page == 1) {
 				window.history.pushState({}, {}, '/i/my2020');

resources/assets/js/components/Timeline.vue

@@ -171,6 +171,18 @@
 
 						</div>
 
+						<div v-if="config.features.label.covid.enabled && status.label && status.label.covid == true" class="card-body border-bottom py-2 cursor-pointer pr-2" @click="labelRedirect()">
+							<p class="font-weight-bold d-flex justify-content-between align-items-center mb-0">
+								<span>
+									<i class="fas fa-info-circle mr-2"></i>
+									For information about COVID-19, {{config.features.label.covid.org}}
+								</span>
+								<span>
+									<i class="fas fa-chevron-right text-lighter"></i>
+								</span>
+							</p>
+						</div>
+
 						<div class="card-body">
 							<div class="reactions my-1 pb-2">
 								<h3 v-if="status.favourited" class="fas fa-heart text-danger pr-3 m-0 cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
@@ -741,14 +753,14 @@ body-class="p-2 rounded">
 		},
 
 		mounted() {
-			if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || $('link[data-stylesheet="dark"]').length != 0) {
+			// todo: release after dark mode updates
+			/* if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches || $('link[data-stylesheet="dark"]').length != 0) {
 				this.modes.dark = true;
 
-				// todo: release after dark mode updates
-				/* let el = document.querySelector('link[data-stylesheet="light"]');
+				let el = document.querySelector('link[data-stylesheet="light"]');
 				el.setAttribute('href', '/css/appdark.css?id=' + Date.now());
-				el.setAttribute('data-stylesheet', 'dark'); */
-			}
+				el.setAttribute('data-stylesheet', 'dark'); 
+			}*/
 
 			if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
 				this.showSuggestions = false;
@@ -1666,10 +1678,15 @@ body-class="p-2 rounded">
 					self.loading = false;
 				}, 500);
 			},
+
+			labelRedirect(type) {
+				let url = '/i/redirect?url=' + encodeURI(this.config.features.label.covid.url);
+				window.location.href = url;
+			}
 		},
 
 		beforeDestroy () {
 			clearInterval(this.mpInterval);
 		},
 	}
-</script>
+</script>

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

@@ -1,14 +1,26 @@
 <template>
 	<div v-if="status.sensitive == true">
-		<details class="details-animated">
-			<summary>
-				<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
-				<p class="font-weight-light">(click to show)</p>
-			</summary>
-			<div class="max-hide-overflow" :title="status.media_attachments[0].description">
-				<img :class="status.media_attachments[0].filter_class + ' card-img-top'" :src="status.media_attachments[0].url" loading="lazy" :alt="altText(status)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
-			</div>
-		</details>
+		<div class="text-light content-label">
+			<p class="text-center">
+				<i class="far fa-eye-slash fa-2x"></i>
+			</p>
+			<p class="h4 font-weight-bold text-center">
+				Sensitive Content
+			</p>
+			<p class="text-center py-2">
+				This photo contains sensitive content which <br/>
+				some people may find offsensive or disturbing.
+			</p>
+			<p class="mb-0">
+				<button @click="status.sensitive = false" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Photo</button>
+			</p>
+		</div>
+		<blur-hash-image
+			width="32"
+			height="32"
+			punch="1"
+			:hash="status.media_attachments[0].blurhash"
+			:alt="altText(status)"/>
 	</div>
 	<div v-else>
 		<div :title="status.media_attachments[0].description">
@@ -22,6 +34,14 @@
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
+  .content-label {
+  	margin: 0;
+  	position: absolute;
+  	top:45%;
+  	left:50%;
+  	z-index: 999;
+  	transform: translate(-50%, -50%);
+  }
 </style>
 
 <script type="text/javascript">