Option to hide revealed sensitive media (#6209)

* Option to hide revealed sensitive media

This PR commit adds a button on sensitive images and videos
to to hide them without refreshing the page.

* fix position with multiple images

* Fixing some lint problems

Not related to this PR, but "Node.js CI / lint" failed on it.

2 files changed, 91 insertions, 45 deletions

diff --git a/src/client/components/media-image.vue b/src/client/components/media-image.vue
index 79b5150b11..bd53f82422 100644
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -5,19 +5,22 @@
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
 </div>
-<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else
-	:href="image.url"
-	:style="style"
-	:title="image.name"
-	@click.prevent="onClick"
->
-	<div v-if="image.type === 'image/gif'">GIF</div>
-</a>
+<div class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else>
+	<i><fa :icon="faEyeSlash" @click="hide = true"></fa></i>
+	<a
+		:href="image.url"
+		:style="style"
+		:title="image.name"
+		@click.prevent="onClick"
+	>
+		<div v-if="image.type === 'image/gif'">GIF</div>
+	</a>
+</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import i18n from '../i18n';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import ImageViewer from './image-viewer.vue';
@@ -36,7 +39,8 @@ export default Vue.extend({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle
+			faExclamationTriangle,
+			faEyeSlash
 		};
 	},
 	computed: {
@@ -78,28 +82,47 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .gqnyydlzavusgskkfvwvjiattxdzsqlf {
-	display: block;
-	cursor: zoom-in;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	background-position: center;
-	background-size: contain;
-	background-repeat: no-repeat;
+	position: relative;
 
-	> div {
-		background-color: var(--fg);
+	> i {
+		display: block;
+		position: absolute;
 		border-radius: 6px;
+		background-color: var(--fg);
 		color: var(--accentLighten);
-		display: inline-block;
 		font-size: 14px;
-		font-weight: bold;
-		left: 12px;
 		opacity: .5;
-		padding: 0 6px;
+		padding: 3px 6px;
 		text-align: center;
+		cursor: pointer;
 		top: 12px;
-		pointer-events: none;
+		right: 12px;
+	}
+
+	> a {
+		display: block;
+		cursor: zoom-in;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		background-position: center;
+		background-size: contain;
+		background-repeat: no-repeat;
+
+		> div {
+			background-color: var(--fg);
+			border-radius: 6px;
+			color: var(--accentLighten);
+			display: inline-block;
+			font-size: 14px;
+			font-weight: bold;
+			left: 12px;
+			opacity: .5;
+			padding: 0 6px;
+			text-align: center;
+			top: 12px;
+			pointer-events: none;
+		}
 	}
 }
 
diff --git a/src/client/components/media-video.vue b/src/client/components/media-video.vue
index f96e902976..4327d07093 100644
--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -5,20 +5,23 @@
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
 </div>
-<a class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else
-	:href="video.url"
-	rel="nofollow noopener"
-	target="_blank"
-	:style="imageStyle"
-	:title="video.name"
->
-	<fa :icon="faPlayCircle"/>
-</a>
+<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
+	<i><fa :icon="faEyeSlash" @click="hide = true"></fa></i>
+	<a
+		:href="video.url"
+		rel="nofollow noopener"
+		target="_blank"
+		:style="imageStyle"
+		:title="video.name"
+	>
+		<fa :icon="faPlayCircle"/>
+	</a>
+</div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
+import { faPlayCircle, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import i18n from '../i18n';
 
 export default Vue.extend({
@@ -32,7 +35,8 @@ export default Vue.extend({
 	data() {
 		return {
 			hide: true,
-			faPlayCircle
+			faPlayCircle,
+			faEyeSlash
 		};
 	},
 	computed: {
@@ -47,16 +51,35 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .kkjnbbplepmiyuadieoenjgutgcmtsvu {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	position: relative;
 
-	font-size: 3.5em;
-	overflow: hidden;
-	background-position: center;
-	background-size: cover;
-	width: 100%;
-	height: 100%;
+	> i {
+		display: block;
+		position: absolute;
+		border-radius: 6px;
+		background-color: var(--fg);
+		color: var(--accentLighten);
+		font-size: 14px;
+		opacity: .5;
+		padding: 3px 6px;
+		text-align: center;
+		cursor: pointer;
+		top: 12px;
+		right: 12px;
+	}
+
+	> a {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		font-size: 3.5em;
+		overflow: hidden;
+		background-position: center;
+		background-size: cover;
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .icozogqfvdetwohsdglrbswgrejoxbdj {