Update presenters, fix content warning layout

pixelfed · Jul 9, 2021 · fc56acb · fc56acb
1 parent 9607243
commit fc56acb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 13 deletions.
diff --git a/resources/assets/js/components/presenter/PhotoPresenter.vue b/resources/assets/js/components/presenter/PhotoPresenter.vue
@@ -54,12 +54,14 @@
     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%;
-  	z-index: 2;
   	transform: translate(-50%, -50%);
   	display: flex;
   	flex-direction: column;

diff --git a/resources/assets/js/components/presenter/VideoPresenter.vue b/resources/assets/js/components/presenter/VideoPresenter.vue
@@ -1,16 +1,25 @@
 <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="embed-responsive embed-responsive-1by1">
-				<video class="video" preload="none" loop :poster="status.media_attachments[0].preview_url":data-id="status.id" @click="playOrPause($event)">
-					<source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
-				</video>
-			</div>
-		</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 post 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="embed-responsive embed-responsive-16by9">
 		<video class="video" controls preload="metadata" loop :poster="status.media_attachments[0].preview_url" :data-id="status.id">
@@ -19,11 +28,41 @@
 	</div>
 </template>
 
+<style type="text/css" scoped>
+  .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">
 	export default {
 		props: ['status'],
 
 		methods: {
+			altText(status) {
+				let desc = status.media_attachments[0].description;
+				if(desc) {
+					return desc;
+				}
+
+				return 'Video was not tagged with any alt text.';
+			},
+
 			playOrPause(e) {
 				let el = e.target;
 				if(el.getAttribute('playing') == 1) {
@@ -33,6 +72,10 @@
 					el.setAttribute('playing', 1);
 					el.play();
 				}
+			},
+
+			toggleContentWarning(status) {
+				this.$emit('togglecw');
 			}
 		}
 	}