From 2506615f4228de4189202123d414e8f22b2c1c1b Mon Sep 17 00:00:00 2001
From: r <r@freesoftwareextremist.com>
Date: Sun, 22 Dec 2019 04:25:56 +0000
Subject: [PATCH] Add nsfw mask for status media

---
 static/main.css       | 24 ++++++++++++++++++++++++
 templates/status.tmpl | 16 ++++++++++++----
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/static/main.css b/static/main.css
index 89bb9cd..2dcb4a6 100644
--- a/static/main.css
+++ b/static/main.css
@@ -97,6 +97,7 @@
 	max-height: 180px;
 	max-width: 220px;
 	width: auto;
+	vertical-align: bottom;
 }
 
 .page-title {
@@ -280,4 +281,27 @@
 
 .img-link {
 	display: inline-block;
+	position: relative;
+}
+
+.status-nsfw-overlay {
+	height: 100%;
+	width: 100%;
+	background: black;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.img-link:hover .status-nsfw-overlay {
+	display: none;
+}
+
+.status-video-container {
+	display: inline-block;
+	position: relative;
+}
+
+.status-video-container:hover .status-nsfw-overlay {
+	display: none;
 }
diff --git a/templates/status.tmpl b/templates/status.tmpl
index 7ec7d29..e62296d 100644
--- a/templates/status.tmpl
+++ b/templates/status.tmpl
@@ -61,6 +61,9 @@
 			{{if eq .Type "image"}}
 			<a class="img-link" href="{{.URL}}" target="_blank">
 				<img class="status-image" src="{{.URL}}" alt="status-image" />
+				{{if $.Sensitive}}
+				<div class="status-nsfw-overlay"></div>
+				{{end}}
 			</a>
 			{{else if eq .Type "audio"}}
 			<audio class="status-audio" controls preload="none">
@@ -68,10 +71,15 @@
 				<p> Your browser doesn't support HTML5 audio </p>
 			</audio>
 			{{else if eq .Type "video"}}
-			<video class="status-video" controls preload="none">
-				<source src="{{.URL}}">
-				<p> Your browser doesn't support HTML5 video </p>
-			</video>
+			<div class="status-video-container">
+				<video class="status-video" controls preload="none">
+					<source src="{{.URL}}">
+					<p> Your browser doesn't support HTML5 video </p>
+				</video>
+				{{if $.Sensitive}}
+				<div class="status-nsfw-overlay"></div>
+				{{end}}
+			</div>
 			{{else}}
 			<a href="{{.URL}}" target="_blank"> attachment </a>
 			{{end}}