From a630fa8133a277c354c60ddfff11cc61e8aa8a0a Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 5 Jun 2025 14:55:28 +0300
Subject: [PATCH] [frontend] SkModPlayer dev clean up.

---
 .../frontend/src/components/SkModPlayer.vue   | 96 ++++++-------------
 1 file changed, 27 insertions(+), 69 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index a685a64361..4f943b0ba7 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -17,11 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
 			<span>{{ i18n.ts.clickToShow }}</span>
 		</div>
-		<!--
 		<span :class="$style.patternShadowTop"></span>
 		<span :class="$style.patternShadowBottom"></span>
-		<canvas ref="displayCanvas" :class="$style.pattern_canvas"></canvas>
-		-->
 		<div ref="sliceDisplay" :class="$style.slice_display">
 			<canvas v-for="slice in dummyArray" :key="slice.id" ref="canvasRefs" :class="$style.patternSlice"></canvas>
 		</div>
@@ -46,8 +43,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+// Foreword anyone wanting to change anything, it's jank filled with hacks on top of jank.
 // Don't forget to autohide the pattern.
 
+/* Bugs
+
+	Bad index at line `canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : drawnSlices;`, itterator mess up?
+	Wild CSS tranforms
+
+*/
+
 // Also don't forget to remove this. Yes, I'm that lazy.
 const debug = console.debug;
 const debug_w = console.warn;
@@ -107,6 +112,8 @@ interface CanvasSlice {
 const isSensitive = props.module.isSensitive;
 const url = props.module.url;
 let hide = ref((prefer.s.nsfw === 'force') ? true : isSensitive && (prefer.s.nsfw !== 'ignore'));
+// Goto display function and set the default value there on the first frame.
+// Yes, this is my solution to a problem. That or have a constant kicking round doing nothing of note.
 let patternHide = ref(false);
 let playing = ref(false);
 let sliceDisplay = ref<HTMLDivElement>();
@@ -131,7 +138,6 @@ let lastPattern = -1;
 let lastDrawnRow = -1;
 let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1);
 let alreadyHiddenOnce = false;
-let alreadyDrawn: boolean[] = [];
 let dummyArray: DummyCanvas[] = [];
 let patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
 let canvasSlice: CanvasSlice[] = [];
@@ -304,13 +310,9 @@ function togglePattern() {
 }
 
 function drawSlices(skipOptimizationChecks = false) {
-	const startTime = performance.now();
 	const pattern = player.value.getPattern();
-	const nbRows = player.value.getPatternNumRows(pattern);
 	const row = player.value.getRow();
 	const halfbuf = Math.floor(rowBuffer / 2);
-	const minRow = row - halfbuf;
-	const maxRow = row + halfbuf;
 
 	if (rowBuffer <= 0) {
 		lastDrawnRow = row;
@@ -326,7 +328,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 		// Debug
 		if (rowDif > 1 || rowDif < 0) {
-			//debug_playpause();
+			debug_playpause();
 			debug_w('Row diff', rowDif);
 		}
 
@@ -347,29 +349,33 @@ function drawSlices(skipOptimizationChecks = false) {
 
 		for (let i = 0; i < canvasSlice.length; i++) {
 			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
-			debug('i: ', i, 'slicepos:', canvasSlice[i].data.slicePos, 'row:', row, canvasSlice[i].ctx.canvas);
+			//debug('i: ', i, 'slicepos:', canvasSlice[i].data.slicePos, 'row:', row, canvasSlice[i].ctx.canvas);
 			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer) continue;
 
-			if (lowestRow > Math.abs(canvasSlice[i].data.slicePos)) lowestRow = Math.abs(canvasSlice[i].data.slicePos);
-			toDraw[Math.abs(canvasSlice[i].data.slicePos)] = { p: canvasSlice[i].data.slicePos, i: i };
-			debug('Added to draw.');
+			const abs_pos = Math.abs(canvasSlice[i].data.slicePos);
+			if (lowestRow > abs_pos) lowestRow = abs_pos;
+			toDraw[abs_pos] = { p: canvasSlice[i].data.slicePos, i: i };
+			//debug('Added to draw.', abs_pos);
 		}
 
 		debug(lowestRow, norm);
 		console.table(toDraw);
 
+		toDraw.forEach((v, i) => {
+			debug('test print:', v, i);
+		});
+
 		for (let i = toDraw.length - 1; i >= lowestRow; i += -1) {
-			debug('fl:', i, toDraw[i]);
+			//debug('fl:', i, toDraw[i]);
+			if (!toDraw[i]) continue;
 
 			canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : drawnSlices;
-			//canvasSlice[toDraw[i].i].data.slicePos = canvasSlice[toDraw[i].i].data.slicePos - rowDif;
 			canvasSlice[toDraw[i].i].data.position = canvasSlice[toDraw[i].i].data.position + rowBuffer * norm;
 
 			const curRow = offByOneFix + (row + (drawnSlices - rowDif)) + halfbuf * norm;
 
 			canvasSlice[toDraw[i].i].ctx.clearRect(0, 0, canvasSlice[toDraw[i].i].ref.width, canvasSlice[toDraw[i].i].ref.height);
 			canvasSlice[toDraw[i].i].ref.style.transform = 'translateY(' + (canvasSlice[toDraw[i].i].data.offest + (canvasSlice[toDraw[i].i].data.position) * CHAR_HEIGHT + CHAR_HEIGHT) + 'px)';
-			//debug('i: ', i, canvasSlice[toDraw[i].i].ref.style.transform, '\ncurRow', curRow, '\nhalfbuf * norm', halfbuf * norm, '\nrow', row, 'halfbuf', halfbuf, 'norm', norm, 'drawnSlices', drawnSlices, canvasSlice[toDraw[i].i].ctx.canvas);
 			drawRow(canvasSlice[toDraw[i].i].ctx, curRow, nbChannels, pattern);
 
 			canvasSlice[toDraw[i].i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
@@ -393,9 +399,6 @@ function drawSlices(skipOptimizationChecks = false) {
 		if (drawnSlices === 0) { debug_w('No changed Slices, is this intentional?\nrow', row, 'pattern', pattern); }
 	} else {
 		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
-			//const arrLen = patternTime.length - 1;
-			//const averageDraw = patternTime.total / (patternTime.at - 1);
-			//const initialDraw = patternTime.initial;
 			const trackerTime = player.value.currentPlayingNode.getProcessTime();
 
 			//debug( initialDraw, averageDraw, player.value.getCurrentTempo(), player.value.getCurrentSpeed() );
@@ -410,15 +413,11 @@ function drawSlices(skipOptimizationChecks = false) {
 
 		patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
 
-		let curtime = performance.now();
 		for (let i = 0; i < canvasSlice.length; i++) {
 			let curRow = row - halfbuf + i;
 			// just paint which slice, row and pushed row it is.
-			//canvasSlice[i].ctx.fillStyle = colours.background;
-			//canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
 			canvasSlice[i].ctx.clearRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
 			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
-			//alreadyDrawn[curRow] = true;
 			canvasSlice[i].data.slicePos = i;
 			canvasSlice[i].data.position = 0;
 			canvasSlice[i].data.offest = row * CHAR_HEIGHT;
@@ -448,12 +447,11 @@ function drawSlices(skipOptimizationChecks = false) {
 
 	lastDrawnRow = row;
 	lastPattern = pattern;
-	//debug_playpause();
 }
 
 function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) {
 	if (!player.value.currentPlayingNode) return false;
-	//if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
+	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
 	const spacer = 11;
 	const space = ' ';
 	let seperators = '';
@@ -509,7 +507,7 @@ function display(skipOptimizationChecks = false) {
 
 	if (firstFrame) {
 		// Changing it to false should enable pattern display by default.
-		patternHide.value = false;
+		patternHide.value = true;
 		handleScrollBarEnable();
 		firstFrame = false;
 	}
@@ -519,17 +517,6 @@ function display(skipOptimizationChecks = false) {
 
 	if ( row === lastDrawnRow && pattern === lastPattern && !skipOptimizationChecks) return;
 
-	/*
-	canvasRefs.value..forEach((canvas) => {
-		debug(canvas);
-	});*/
-
-	// Size vs speed
-	//if (patternHide.value) drawPetternPreview();
-	//else drawPattern();
-
-	//displayCanvas.value.style.top = !patternHide.value ? 'calc( 50% - ' + (row * CHAR_HEIGHT) + 'px )' : '0%';
-
 	drawSlices(skipOptimizationChecks);
 }
 
@@ -628,13 +615,10 @@ onDeactivated(() => {
 		}
 
 		.slice_display {
-			/*display: inline-grid;*/
 			display: grid;
 			position: relative;
-			background-color: white;
+			background-color: black;
 			image-rendering: pixelated;
-			/*transform: translateY(-24px);*/
-			/*pointer-events: none;*/
 			z-index: 0;
 
 			.patternSlice {
@@ -643,41 +627,14 @@ onDeactivated(() => {
 				image-rendering: pixelated;
 				/*pointer-events: none;*/
 				z-index: 0;
-				/*filter: grayscale(50%);*/
 			}
-
-			.patternSlice.offScreen {
-				position: relative;
-				background-color: black;
-				image-rendering: pixelated;
-				pointer-events: none;
-				z-index: 0;
-				filter: opacity(0);
-			}
-
-			.patternSlice.activeSlice {
-				position: relative;
-				background-color: black;
-				image-rendering: pixelated;
-				pointer-events: none;
-				z-index: 0;
-				filter: invert(1);
-			}
-		}
-
-		.pattern_canvas {
-			position: relative;
-			background-color: black;
-			image-rendering: pixelated;
-			pointer-events: none;
-			z-index: 0;
 		}
 
 		.patternShadowTop {
 			background: #00000080;
 			width: 100%;
 			height: calc( 50% - 14px );
-			translate: 0 -100%;
+			translate: -50% -100%;
 			top: calc( 50% - 14px );
 			position: absolute;
 			pointer-events: none;
@@ -688,6 +645,7 @@ onDeactivated(() => {
 			background: #00000080;
 			width: 100%;
 			height: calc( 50% - 12px );
+			translate: -50% 0;
 			top: calc( 50% - 1px );
 			position: absolute;
 			pointer-events: none;