From 4856b019ceacc2116c24a7c9354d37f24081685f Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Sat, 30 Dec 2023 16:09:46 +0200
Subject: [PATCH] enhance (frontend): hide module player pattern display

---
 .../frontend/src/components/MkModPlayer.vue   | 59 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkModPlayer.vue b/packages/frontend/src/components/MkModPlayer.vue
index 055522d466..530b9c34d2 100644
--- a/packages/frontend/src/components/MkModPlayer.vue
+++ b/packages/frontend/src/components/MkModPlayer.vue
@@ -7,7 +7,11 @@
 </div>
 
 <div v-else class="mod-player-enabled">
-	<div class="pattern-display">
+	<div class="pattern-display" @click="togglePattern()">
+		<div class="pattern-hide" v-if="patternHide">
+			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
+			<span>{{ i18n.ts.clickToShow }}</span>
+		</div>
 		<canvas ref="displayCanvas" class="pattern-canvas"></canvas>
 	</div>
 	<div class="controls">
@@ -74,6 +78,8 @@ const props = defineProps<{
 const isSensitive = computed(() => { return props.module.isSensitive; });
 const url = computed(() => { return props.module.url; });
 let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive.value && (defaultStore.state.nsfw !== 'ignore'));
+let patternHide = ref(false);
+let firstFrame = ref(true);
 let playing = ref(false);
 let displayCanvas = ref<HTMLCanvasElement>();
 let progress = ref<HTMLProgressElement>();
@@ -156,15 +162,42 @@ function performSeek() {
 
 function toggleVisible() {
 	hide.value = !hide.value;
-	nextTick(() => { stop(hide.value); });
+	if (!hide.value && patternHide.value) {
+		firstFrame.value = true;
+		patternHide.value = false;
+	}
+	nextTick(() => {
+		stop(hide.value);
+	});
 }
 
+function togglePattern() {
+	patternHide.value = !patternHide.value;
+	if (!patternHide.value) {
+		if (player.value.getRow() == 0) {
+			try {
+				player.value.play(buffer);
+				display();
+			} catch (e) {
+				console.warn(e);
+			}
+			player.value.stop();
+		}
+	}
+}
 function display() {
 	if (!displayCanvas.value) {
 		stop();
 		return;
 	}
 
+	if (patternHide.value) { return; }
+
+	if (firstFrame.value) {
+		firstFrame.value = false;
+		patternHide.value = true;
+	}
+
 	const canvas = displayCanvas.value;
 
 	const pattern = player.value.getPattern();
@@ -211,7 +244,7 @@ function display() {
 				const instr = part.substring(4, 6);
 				ctx.fillStyle = colours.instr[active];
 				ctx.fillText(instr, baseOffset + CHAR_WIDTH * 5, baseRowOffset);
-				
+
 				const volume = part.substring(6, 9);
 				ctx.fillStyle = colours.volume[active];
 				ctx.fillText(volume, baseOffset + CHAR_WIDTH * 7, baseRowOffset);
@@ -271,12 +304,32 @@ function display() {
 			background-color: black;
 			height: 100%;
 		}
+		.pattern-hide {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background: rgba(64, 64, 64, 0.3);
+			backdrop-filter: blur(2em);
+			color: #fff;
+			font-size: 12px;
+
+			position: absolute;
+			z-index: 0;
+			width: 100%;
+			height: 100%;
+
+			> span {
+				display: block;
+			}
+		}
 	}
 
 	> .controls {
 		display: flex;
 		width: 100%;
 		background-color: var(--bg);
+		z-index: 1;
 
 		> * {
 			padding: 4px 8px;