From 86422c81b7177bd24e8678d413cb426a670e7f64 Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Thu, 15 Jul 2021 23:35:34 -0600
Subject: [PATCH] Update presenters, improve content warnings

---
 .../assets/js/components/PostComponent.vue    | 16 ++--
 resources/assets/js/components/RemotePost.vue |  8 +-
 .../assets/js/components/RemoteProfile.vue    | 90 +++---------------
 .../presenter/PhotoAlbumPresenter.vue         | 95 +++++++++++++------
 .../components/presenter/PhotoPresenter.vue   | 24 +++++
 5 files changed, 113 insertions(+), 120 deletions(-)

diff --git a/resources/assets/js/components/PostComponent.vue b/resources/assets/js/components/PostComponent.vue
index 38b966ffb..7b4e50456 100644
--- a/resources/assets/js/components/PostComponent.vue
+++ b/resources/assets/js/components/PostComponent.vue
@@ -57,19 +57,19 @@
 								</div>
 
 								<div v-else-if="status.pf_type === 'video'" class="w-100">
-									<video-presenter :status="status"></video-presenter>
+									<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-									<photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
+									<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-									<video-album-presenter :status="status"></video-album-presenter>
+									<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-									<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
+									<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
 								</div>
 
 								<div v-else class="w-100">
@@ -292,19 +292,19 @@
 								</div>
 
 								<div v-else-if="status.pf_type === 'video'" class="w-100">
-									<video-presenter :status="status"></video-presenter>
+									<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-									<photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
+									<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-									<video-album-presenter :status="status"></video-album-presenter>
+									<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-									<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
+									<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
 								</div>
 
 								<div v-else class="w-100">
diff --git a/resources/assets/js/components/RemotePost.vue b/resources/assets/js/components/RemotePost.vue
index ff6806bb0..d653c6f68 100644
--- a/resources/assets/js/components/RemotePost.vue
+++ b/resources/assets/js/components/RemotePost.vue
@@ -50,19 +50,19 @@
 								</div>
 
 								<div v-else-if="status.pf_type === 'video'" class="w-100">
-									<video-presenter :status="status"></video-presenter>
+									<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-									<photo-album-presenter :status="status"></photo-album-presenter>
+									<photo-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-									<video-album-presenter :status="status"></video-album-presenter>
+									<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
 								</div>
 
 								<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-									<mixed-album-presenter :status="status"></mixed-album-presenter>
+									<mixed-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
 								</div>
 
 								<div v-else class="w-100">
diff --git a/resources/assets/js/components/RemoteProfile.vue b/resources/assets/js/components/RemoteProfile.vue
index 4483bc052..d9f2bd350 100644
--- a/resources/assets/js/components/RemoteProfile.vue
+++ b/resources/assets/js/components/RemoteProfile.vue
@@ -60,60 +60,10 @@
 			</div>
 			<div class="col-12 col-md-8 pt-5">
 				<div class="row">
-					<div class="col-12 mb-2" v-for="(status, index) in feed" :key="'remprop' + index">
-						<div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border cursor-pointer">
-								<div class="card-header d-inline-flex align-items-center bg-white">
-									<img v-bind:src="profile.avatar" width="38px" height="38px" style="border-radius: 38px;" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
-									<div class="pl-2">
-										<span class="username font-weight-bold text-dark">{{profile.username}}
-										</span>
-									</div>
-									<div class="text-right" style="flex-grow:1;">
-										<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
-											<span class="fas fa-ellipsis-h text-lighter"></span>
-										</button>
-									</div>
-								</div>
-
-								<div class="card-body p-0">
-									<div v-if="status.sensitive == true">
-										<details class="details-animated" @click="status.sensitive = false;">
-											<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>
-											<a :href="remotePostUrl(status)">
-												<img v-once :src="status.thumb" class="w-100 h-100">
-											</a>
-										</details>
-									</div>
-									<div v-else>
-										<a :href="remotePostUrl(status)">
-											<img v-once :src="status.thumb" class="w-100 h-100">
-										</a>
-										<button v-if="status.cw == true && status.sensitive == false" class="btn btn-block btn-primary font-weight-bold rounded-0" @click="status.sensitive = true;">Hide Media</button>
-									</div>
-									
-								</div>
-
-								<div class="card-body">
-									<div class="caption">
-										<p class="mb-2 read-more" style="overflow: hidden;">
-											<span class="username font-weight-bold">
-												<bdi><span class="text-dark">{{profile.username}}</span></bdi>
-											</span>
-											<span class="status-content" v-html="status.caption.html"></span>
-										</p>
-									</div>
-									<div class="timestamp mt-2">
-										<p class="small text-uppercase mb-0">
-											<a :href="remotePostUrl(status)" class="text-muted">
-												<timeago :datetime="status.timestamp" :auto-update="90" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.timestamp)" v-b-tooltip.hover.bottom></timeago>
-											</a>
-										</p>
-									</div>
-								</div>
-						</div>
+					<div class="col-12" v-for="(status, index) in feed" :key="'remprop' + index">
+						<status-card
+							:class="{'border-top': index === 0}"
+							:status="status" />
 					</div>
 
 					<div v-if="feed.length == 0" class="col-12 mb-2">
@@ -195,10 +145,17 @@
 </template>
 
 <script type="text/javascript">
+	import StatusCard from './partials/StatusCard.vue';
+
 	export default {
 		props: [
 			'profile-id',
 		],
+
+		components: {
+			StatusCard
+		},
+
 		data() {
 			return {
 				id: [],
@@ -234,7 +191,6 @@
 		},
 
 		methods: {
-
 			fetchProfile() {
 				axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
 					this.user = res.data
@@ -258,29 +214,7 @@
 				})
 				.then(res => {
 					let data = res.data
-						.filter(status => status.media_attachments.length > 0)
-						.map(status => {
-							return {
-								id: status.id,
-								caption: {
-									text: status.content_text,
-									html: status.content
-								},
-								count: {
-									likes: status.favourites_count,
-									shares: status.reblogs_count,
-									comments: status.reply_count
-								},
-								thumb: status.media_attachments[0].url,
-								media: status.media_attachments,
-								timestamp: status.created_at,
-								type: status.pf_type,
-								url: status.url,
-								sensitive: status.sensitive,
-								cw: status.sensitive,
-								spoiler_text: status.spoiler_text
-							}
-						});
+						.filter(status => status.media_attachments.length > 0);
 					let ids = data.map(status => status.id);
 					this.ids = ids;
 					this.min_id = Math.max(...ids);
diff --git a/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue b/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
index 858cf864c..07da4785d 100644
--- a/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
+++ b/resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
@@ -1,35 +1,50 @@
 <template>
-	<div v-if="status.sensitive == true">
-		<details class="details-animated">
-			<summary @click="loadSensitive">
-				<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>
-			<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb">
-				<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" :title="img.description">
-					<img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
-					<p
-						v-if="status.media_attachments[0].license"
-						style="
-						margin-bottom: 0;
-						padding: 0 5px;
-						color: #fff;
-						font-size: 10px;
-						text-align: right;
-						position: absolute;
-						bottom: 0;
-						right: 0;
-						border-top-left-radius: 5px;
-						background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-					"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
-				</slide>
-			</carousel>
-		</details>
+	<div v-if="status.sensitive == true" class="content-label-wrapper">
+		<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">
+				{{ status.spoiler_text ? status.spoiler_text : 'This album may contain sensitive content.'}}
+			</p>
+			<p class="mb-0">
+				<button @click="toggleContentWarning()" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Post</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 class="w-100 h-100 p-0">
 		<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'">
+
+				<p v-if="!status.sensitive && sensitive"
+					@click="status.sensitive = true"
+					style="
+					margin-top: 0;
+					padding: 10px;
+					color: #fff;
+					font-size: 10px;
+					text-align: right;
+					position: absolute;
+					top: 0;
+					right: 0;
+					border-top-left-radius: 5px;
+					cursor: pointer;
+					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+				">
+					<i class="fas fa-eye-slash fa-lg"></i>
+				</p>
+
 				<p
 					v-if="status.media_attachments[0].license"
 					style="
@@ -43,7 +58,9 @@
 					right: 0;
 					border-top-left-radius: 5px;
 					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
-				"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
+				">
+					<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
+				</p>
 			</slide>
 		</carousel>
 	</div>
@@ -54,6 +71,24 @@
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
+  .content-label-wrapper {
+  	position: relative;
+  }
+  .content-label {
+  	margin: 0;
+  	position: absolute;
+  	top:50%;
+  	left:50%;
+  	transform: translate(-50%, -50%);
+  	display: flex;
+  	flex-direction: column;
+  	align-items: center;
+  	justify-content: center;
+  	width: 100%;
+  	height: 100%;
+  	z-index: 2;
+  	background: rgba(0, 0, 0, 0.2)
+  }
 </style>
 
 <script type="text/javascript">
@@ -62,6 +97,7 @@
 
 		data() {
 			return {
+				sensitive: this.status.sensitive,
 				cursor: 0
 			}
 		},
@@ -75,9 +111,8 @@
 		},
 
 		methods: {
-			loadSensitive() {
-				this.$refs.carousel.onResize();
-				this.$refs.carousel.goToPage(0);
+			toggleContentWarning(status) {
+				this.$emit('togglecw');
 			},
 
 			altText(img) {
diff --git a/resources/assets/js/components/presenter/PhotoPresenter.vue b/resources/assets/js/components/presenter/PhotoPresenter.vue
index 79e89aac3..8a61b93d8 100644
--- a/resources/assets/js/components/presenter/PhotoPresenter.vue
+++ b/resources/assets/js/components/presenter/PhotoPresenter.vue
@@ -31,6 +31,24 @@
 				:height="height()"
 				onerror="this.onerror=null;this.src='/storage/no-preview.png'">
 
+				<p v-if="!status.sensitive && sensitive"
+					@click="status.sensitive = true"
+					style="
+					margin-top: 0;
+					padding: 10px;
+					color: #fff;
+					font-size: 10px;
+					text-align: right;
+					position: absolute;
+					top: 0;
+					right: 0;
+					border-top-left-radius: 5px;
+					cursor: pointer;
+					background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
+				">
+					<i class="fas fa-eye-slash fa-lg"></i>
+				</p>
+
 				<p
 					v-if="status.media_attachments[0].license"
 					style="
@@ -78,6 +96,12 @@
 	export default {
 		props: ['status'],
 
+		data() {
+			return {
+				sensitive: this.status.sensitive
+			}
+		},
+
 		methods: {
 			altText(status) {
 				let desc = status.media_attachments[0].description;