From d9f7ac0335a743475e7d6e185b2a561a3f504464 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 10 Apr 2025 21:31:38 +0300
Subject: [PATCH 01/40] [frontend] WIP slice optimization

Very broken.
---
 .../frontend/src/components/SkModPlayer.vue   | 345 +++++++++++++-----
 1 file changed, 248 insertions(+), 97 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 0933806109..9ce4d36be7 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -17,9 +17,14 @@ 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>
 	</div>
 	<div :class="$style.controls">
 		<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" :class="$style.pattern_slider" type="range" min="0" max="100" step="0.01" style=""/>
@@ -41,6 +46,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+// Bugs to fix:
+// Slices reseting
+// Slices not updating correctly when going backwards.
+// ^^ ¿ Fixed ? ^^
+
+// Don't forgot to autohide the pattern.
+
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import { i18n } from '@/i18n.js';
@@ -70,12 +82,34 @@ const props = defineProps<{
 	module: Misskey.entities.DriveFile
 }>();
 
+interface DummyCanvas {
+	id: number;
+}
+
+interface CanvasData {
+	offscreen: boolean;
+	active: boolean;
+	pattern: number;
+	row: number;
+	position: number;
+	offest: number;
+	slicePos: number;
+}
+
+interface CanvasSlice {
+	data: CanvasData;
+	did: DummyCanvas;
+	ctx: CanvasRenderingContext2D;
+	ref: HTMLCanvasElement;
+}
+
 const isSensitive = props.module.isSensitive;
 const url = props.module.url;
 let hide = ref((defaultStore.state.nsfw === 'force') ? true : isSensitive && (defaultStore.state.nsfw !== 'ignore'));
 let patternHide = ref(false);
 let playing = ref(false);
-let displayCanvas = ref<HTMLCanvasElement>();
+//let displayCanvas = ref<HTMLCanvasElement>();
+let sliceDisplay = ref<HTMLDivElement>();
 let progress = ref<HTMLProgressElement>();
 let position = ref(0);
 let patternScrollSlider = ref<HTMLProgressElement>();
@@ -92,8 +126,12 @@ let lastPattern = -1;
 let lastDrawnRow = -1;
 let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1);
 let alreadyHiddenOnce = false;
-let alreadyDrawn = [false];
+let alreadyDrawn: boolean[] = [];
+let dummyArray: DummyCanvas[] = [];
 let patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
+let canvasSlice: CanvasSlice[] = [];
+let canvasRefs = ref([]);
+let sliceWidth = 0;
 
 function bakeNumberRow() {
 	let ctx = numberRowCanvas.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
@@ -110,6 +148,49 @@ function bakeNumberRow() {
 	}
 }
 
+function populateCanvasSlices () {
+	if (dummyArray.length === 0) for (let i = 0; i < rowBuffer; i++) dummyArray.push({ id: i });
+
+	let nbChannels = 0;
+	if (player.value.currentPlayingNode) {
+		nbChannels = player.value.currentPlayingNode.nbChannels;
+	}
+	sliceWidth = 12 + 84 * nbChannels + 2;
+
+	// I don't want to know why
+	// I don't have to know why
+	// But vue forced my hand.
+	// For some forsaken reason I need two nested nextTick calls in order for everything to show up properly.
+	nextTick(() => nextTick(() => {
+		canvasRefs.value.forEach((canvas, i) => {
+			let c = canvas as HTMLCanvasElement;
+			c.height = CHAR_HEIGHT;
+			c.width = sliceWidth;
+			let ctx = c.getContext('2d', { alpha: false, desynchronized: true }) as CanvasRenderingContext2D;
+			ctx.font = '10px monospace';
+			ctx.imageSmoothingEnabled = false;
+
+			let cd: CanvasData = {
+				offscreen: false,
+				active: false,
+				pattern: -1,
+				row: -1,
+				position: i,
+				offest: 0,
+				slicePos: i,
+			};
+
+			canvasSlice[i] = {
+				data: cd,
+				did: dummyArray[i],
+				ctx: ctx,
+				ref: c,
+			};
+		});
+		stop();
+	}));
+}
+
 onMounted(() => {
 	player.value.load(url).then((result) => {
 		buffer = result;
@@ -117,7 +198,8 @@ onMounted(() => {
 			player.value.play(buffer);
 			progress.value!.max = player.value.duration();
 			bakeNumberRow();
-			display();
+			populateCanvasSlices();
+			display(true);
 		} catch (err) {
 			console.warn(err);
 		}
@@ -156,6 +238,8 @@ function stop(noDisplayUpdate = false) {
 	if (!noDisplayUpdate) {
 		try {
 			player.value.play(buffer);
+			lastDrawnRow = -1;
+			lastPattern = -1;
 			display(true);
 		} catch (err) {
 			console.warn(err);
@@ -176,7 +260,7 @@ function performSeek() {
 		player.value.play(buffer);
 	}
 	player.value.seek(position.value);
-	display();
+	display(true);
 	if (noNode) {
 		player.value.stop();
 	}
@@ -188,6 +272,10 @@ function toggleVisible() {
 	if (!hide.value) {
 		lastPattern = -1;
 		lastDrawnRow = -1;
+		nextTick(() => {
+			playPause();
+			populateCanvasSlices();
+		});
 	}
 	nextTick(() => { stop(hide.value); });
 }
@@ -209,15 +297,12 @@ function togglePattern() {
 	}
 }
 
-function drawPattern() {
-	if (!displayCanvas.value) return;
-	const canvas = displayCanvas.value;
-
+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 = rowBuffer / 2;
+	const halfbuf = Math.floor(rowBuffer / 2);
 	const minRow = row - halfbuf;
 	const maxRow = row + halfbuf;
 
@@ -227,12 +312,57 @@ function drawPattern() {
 	if (player.value.currentPlayingNode) {
 		nbChannels = player.value.currentPlayingNode.nbChannels;
 	}
-	if (pattern === lastPattern) {
+	if (pattern === lastPattern && !skipOptimizationChecks) {
 		rowDif = row - lastDrawnRow;
+
+		if (rowDif !== 0 && rowDif !== 1) console.log(rowDif);
+		let curtime = performance.now();
+
+		const isRowBufPos = rowDif > 0;
+		let s = 0;
+		//if (!isRowBufPos) playPause(); // Debug pause
+		for (let i = 0; i < canvasSlice.length; i++) {
+			let curRow = row - halfbuf + i;
+			//if (buf === 0) break; // I don't want it to do random things.
+			//if (canvasSlice[i].data.pattern === pattern) {
+			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
+			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer + 1) continue;
+
+			canvasSlice[i].data.slicePos = isRowBufPos ? rowBuffer - 1 : s;
+			canvasSlice[i].data.position = isRowBufPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
+
+			canvasSlice[i].ctx.fillStyle = '#000000';
+			canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
+			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
+			alreadyDrawn[curRow] = true;
+			canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant;
+			canvasSlice[i].ref.style.top = (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT) + 'px';
+			// Debug text
+			canvasSlice[i].ctx.fillText(
+				i.toString() + ' ' +
+				curRow.toString() + ' ' +
+				canvasSlice[i].data.slicePos + ' ' +
+				canvasSlice[i].data.position + ' ' +
+				Math.trunc(curtime) + 'ms ' +
+				canvasSlice[i].data.offest + 'px ' +
+				canvasSlice[i].ref.style.top
+				, 0, ROW_OFFSET_Y);
+
+			//canvasSlice[i].data.position = buf > 0 ? canvasSlice[i].data.position + rowBuffer + buf : canvasSlice[i].data.position - rowBuffer + buf;
+			//canvasSlice[i].ref.style.top = buf > 0 ? (canvasSlice[i].data.slicePos * CHAR_HEIGHT) + 'px' : (buf + row) * CHAR_HEIGHT + 'px';
+			//buf = (buf > 0) ? buf - 1 : buf + 1;
+			s++;
+		}
 	} 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();
 
+			//console.log( initialDraw, averageDraw, player.value.getCurrentTempo(), player.value.getCurrentSpeed() );
+			console.log( trackerTime, patternTime );
+			console.log( patternTime.initial + trackerTime.max, trackerTime.max + patternTime.max );
 			if (patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + patternTime.max > MAX_TIME_PER_ROW) {
 				alreadyHiddenOnce = true;
 				togglePattern();
@@ -242,87 +372,63 @@ function drawPattern() {
 
 		patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
 		alreadyDrawn = [];
-		if (canvas.width !== (12 + 84 * nbChannels + 2)) canvas.width = 12 + 84 * nbChannels + 2;
-		if (canvas.height !== (12 * nbRows)) canvas.height = 12 * nbRows;
-	}
 
-	const ctx = canvas.getContext('2d', { alpha: false, desynchronized: true }) as CanvasRenderingContext2D;
-	if (ctx.font !== '10px monospace') ctx.font = '10px monospace';
-	ctx.imageSmoothingEnabled = false;
-	if (pattern !== lastPattern) {
-		ctx.fillStyle = colours.background;
-		ctx.fillRect(0, 0, canvas.width, canvas.height);
-		ctx.drawImage( numberRowCanvas, 0, 0 );
-	}
-
-	ctx.fillStyle = colours.foreground.default;
-	for (let rowOffset = minRow + rowDif; rowOffset < maxRow + rowDif; rowOffset++) {
-		const rowToDraw = rowOffset - rowDif;
-
-		if (alreadyDrawn[rowToDraw] === true) continue;
-
-		if (rowToDraw >= 0 && rowToDraw < nbRows) {
-			const baseOffset = 2 * CHAR_WIDTH;
-			const baseRowOffset = ROW_OFFSET_Y + rowToDraw * CHAR_HEIGHT;
-			let done = drawRow(ctx, rowToDraw, nbChannels, pattern, baseOffset, baseRowOffset);
-
-			alreadyDrawn[rowToDraw] = done;
+		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 = '#000000';
+			canvasSlice[i].ctx.fillRect(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;
+			canvasSlice[i].data.row = row - halfbuf + i;
+			canvasSlice[i].data.pattern = pattern;
+			canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px';
+			canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
+			/*
+			canvasSlice[i].ctx.fillStyle = colours.foreground.default;
+			canvasSlice[i].ctx.fillText(
+				i.toString() + ' ' +
+				curRow.toString() + ' ' +
+				canvasSlice[i].data.slicePos + ' ' +
+				canvasSlice[i].data.position + ' ' +
+				Math.trunc(curtime) + 'ms ' +
+				canvasSlice[i].data.offest + 'px ' +
+				'init'
+				, 0, ROW_OFFSET_Y);
+				*/
 		}
 	}
 
+	if (sliceDisplay.value) sliceDisplay.value.style.top = -(row * CHAR_HEIGHT - ((rowDif > 0 || pattern !== lastPattern) ? CHAR_HEIGHT : 0)) + 'px';
+
+	/*
+	canvasSlice.forEach((slice, i) => {
+		if (lastPattern === pattern) {
+
+		} else {
+		// just paint which slice, row and pushed row it is.
+			let curRow = row - halfbuf + i;
+			slice.ctx.fillStyle = '#000000';
+			slice.ctx.fillRect(0, 0, slice.ref.width, slice.ref.height);
+			//drawRow(slice.ctx, curRow, nbChannels, pattern);
+			alreadyDrawn[curRow] = true;
+			slice.ctx.fillStyle = colours.foreground.default;
+			slice.ctx.fillText(i.toString() + ' ' + curRow.toString() + ' ' + curtime, 0, ROW_OFFSET_Y);
+		}
+	});
+*/
 	lastDrawnRow = row;
 	lastPattern = pattern;
-
-	patternTime.current = performance.now() - startTime;
-	if (patternTime.initial !== 0 && patternTime.current > patternTime.max) patternTime.max = patternTime.current;
-	else if (patternTime.initial === 0) patternTime.initial = patternTime.current;
-}
-
-function drawPetternPreview() {
-	if (!displayCanvas.value) return;
-	const canvas = displayCanvas.value;
-
-	const pattern = player.value.getPattern();
-	const nbRows = player.value.getPatternNumRows(pattern);
-	const row = player.value.getRow();
-	const halfbuf = rowBuffer / 2;
-	alreadyDrawn = [];
-
-	let nbChannels = 0;
-	if (player.value.currentPlayingNode) {
-		nbChannels = player.value.currentPlayingNode.nbChannels;
-	}
-	if (canvas.width !== (12 + 84 * nbChannels + 2)) canvas.width = 12 + 84 * nbChannels + 2;
-	if (canvas.height !== (12 * rowBuffer)) canvas.height = 12 * rowBuffer;
-
-	const ctx = canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
-	ctx.font = '10px monospace';
-	ctx.imageSmoothingEnabled = false;
-	ctx.fillStyle = colours.background;
-	ctx.fillRect(0, 0, canvas.width, canvas.height);
-	ctx.drawImage( numberRowCanvas, 0, (halfbuf - row) * CHAR_HEIGHT );
-
-	for (let rowOffset = 0; rowOffset < rowBuffer; rowOffset++) {
-		const rowToDraw = rowOffset + row - halfbuf;
-
-		if (rowToDraw >= 0 && rowToDraw < nbRows) {
-			const baseOffset = 2 * CHAR_WIDTH;
-			const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
-			drawRow(ctx, rowToDraw, nbChannels, pattern, baseOffset, baseRowOffset);
-		} else if (rowToDraw >= 0) {
-			const baseRowOffset = ROW_OFFSET_Y + rowOffset * CHAR_HEIGHT;
-			ctx.fillStyle = colours.background;
-			ctx.fillRect(0, baseRowOffset - CHAR_HEIGHT, CHAR_WIDTH * 2, baseRowOffset);
-		}
-	}
-
-	lastPattern = -1;
-	lastDrawnRow = -1;
 }
 
 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 (alreadyDrawn[row]) return true;
+	if (row < 0 || row > player.value.getPatternNumRows()) return false;
+	//if (alreadyDrawn[row]) return true;
 	const spacer = 11;
 	const space = ' ';
 	let seperators = '';
@@ -342,6 +448,8 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 		op += part.substring(11, 13) + space.repeat( spacer + 1 );
 	}
 
+	//console.log( 'seperators: ' + seperators + '\nnote: '+ note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
+
 	ctx.fillStyle = colours.foreground.default;
 	ctx.fillText(seperators, drawX, drawY);
 
@@ -364,7 +472,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 }
 
 function display(skipOptimizationChecks = false) {
-	if (!displayCanvas.value || !displayCanvas.value.parentElement) {
+	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) {
 		stop();
 		return;
 	}
@@ -373,7 +481,7 @@ function display(skipOptimizationChecks = false) {
 
 	if (firstFrame) {
 		// Changing it to false should enable pattern display by default.
-		patternHide.value = true;
+		patternHide.value = false;
 		handleScrollBarEnable();
 		firstFrame = false;
 	}
@@ -383,11 +491,18 @@ function display(skipOptimizationChecks = false) {
 
 	if ( row === lastDrawnRow && pattern === lastPattern && !skipOptimizationChecks) return;
 
-	// Size vs speed
-	if (patternHide.value) drawPetternPreview();
-	else drawPattern();
+	/*
+	canvasRefs.value..forEach((canvas) => {
+		console.log(canvas);
+	});*/
 
-	displayCanvas.value.style.top = !patternHide.value ? 'calc( 50% - ' + (row * CHAR_HEIGHT) + 'px )' : '0%';
+	// Size vs speed
+	//if (patternHide.value) drawPetternPreview();
+	//else drawPattern();
+
+	//displayCanvas.value.style.top = !patternHide.value ? 'calc( 50% - ' + (row * CHAR_HEIGHT) + 'px )' : '0%';
+
+	drawSlices(skipOptimizationChecks);
 }
 
 let suppressScrollSliderWatcher = false;
@@ -396,10 +511,10 @@ function scrollHandler() {
 	suppressScrollSliderWatcher = true;
 
 	if (!patternScrollSlider.value) return;
-	if (!displayCanvas.value) return;
-	if (!displayCanvas.value.parentElement) return;
+	if (!sliceDisplay.value) return;
+	if (!sliceDisplay.value.parentElement) return;
 
-	patternScrollSliderPos.value = (displayCanvas.value.parentElement.scrollLeft) / (displayCanvas.value.width - displayCanvas.value.parentElement.offsetWidth) * 100;
+	patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * 100;
 	patternScrollSlider.value.style.opacity = '1';
 }
 
@@ -414,21 +529,21 @@ function handleScrollBarEnable() {
 	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
 	if (patternScrollSliderShow.value !== true) return;
 
-	if (!displayCanvas.value) return;
-	if (!displayCanvas.value.parentElement) return;
+	if (!sliceDisplay.value) return;
+	if (!sliceDisplay.value.parentElement) return;
 	if (firstFrame) {
-		patternScrollSliderShow.value = (12 + 84 * player.value.getPatternNumRows(player.value.getPattern()) + 2 > displayCanvas.value.parentElement.offsetWidth);
+		patternScrollSliderShow.value = (12 + 84 * player.value.getPatternNumRows(player.value.getPattern()) + 2 > sliceDisplay.value.parentElement.offsetWidth);
 	} else {
-		patternScrollSliderShow.value = (displayCanvas.value.width > displayCanvas.value.parentElement.offsetWidth);
+		patternScrollSliderShow.value = (sliceWidth > sliceDisplay.value.parentElement.offsetWidth);
 	}
 }
 
 watch(patternScrollSliderPos, () => {
 	if (suppressScrollSliderWatcher) return;
-	if (!displayCanvas.value) return;
-	if (!displayCanvas.value.parentElement) return;
+	if (!sliceDisplay.value) return;
+	if (!sliceDisplay.value.parentElement) return;
 
-	displayCanvas.value.parentElement.scrollLeft = (displayCanvas.value.width - displayCanvas.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
+	sliceDisplay.value.parentElement.scrollLeft = (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
 });
 
 onDeactivated(() => {
@@ -484,6 +599,42 @@ onDeactivated(() => {
 			display: none;
 		}
 
+		.slice_display {
+			display: grid;
+			position: relative;
+			background-color: white;
+			image-rendering: pixelated;
+			/*pointer-events: none;*/
+			z-index: 0;
+
+			.patternSlice {
+				position: relative;
+				background-color: black;
+				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;

From 26f77dfe3ac9394b74e69e7de75a77c4b8702e8e Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 16 Apr 2025 17:53:32 +0300
Subject: [PATCH 02/40] [frontend] Fix somewhat sane module drawing.

Final boss: H0ffman.
---
 .../frontend/src/components/SkModPlayer.vue   | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 9fb9557c33..14abb2f847 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -119,6 +119,7 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 const maxRowNumbers = 0xFF;
 const rowBuffer = 26;
+const maxChannelLimit = 9;
 let buffer = null;
 let isSeeking = false;
 let firstFrame = true;
@@ -154,6 +155,7 @@ function populateCanvasSlices () {
 	let nbChannels = 0;
 	if (player.value.currentPlayingNode) {
 		nbChannels = player.value.currentPlayingNode.nbChannels;
+		//nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
 	}
 	sliceWidth = 12 + 84 * nbChannels + 2;
 
@@ -320,9 +322,8 @@ function drawSlices(skipOptimizationChecks = false) {
 
 		const isRowBufPos = rowDif > 0;
 		let s = 0;
-		//if (!isRowBufPos) playPause(); // Debug pause
+
 		for (let i = 0; i < canvasSlice.length; i++) {
-			let curRow = row - halfbuf + i;
 			//if (buf === 0) break; // I don't want it to do random things.
 			//if (canvasSlice[i].data.pattern === pattern) {
 			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
@@ -331,23 +332,30 @@ function drawSlices(skipOptimizationChecks = false) {
 			canvasSlice[i].data.slicePos = isRowBufPos ? rowBuffer - 1 : s;
 			canvasSlice[i].data.position = isRowBufPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
 
-			canvasSlice[i].ctx.fillStyle = '#000000';
+			let curRow = row + halfbuf - 1;
+
+			canvasSlice[i].ctx.fillStyle = colours.background;
 			canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
-			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
-			alreadyDrawn[curRow] = true;
-			canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant;
 			canvasSlice[i].ref.style.top = (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT) + 'px';
+			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
+
+			//alreadyDrawn[curRow] = true;
+
+			canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant; // Debug
 			// Debug text
 			canvasSlice[i].ctx.fillText(
-				i.toString() + ' ' +
+				'   ' +
+				//i.toString() + ' ' +
 				curRow.toString() + ' ' +
-				canvasSlice[i].data.slicePos + ' ' +
-				canvasSlice[i].data.position + ' ' +
+				//canvasSlice[i].data.slicePos + ' ' +
+				//canvasSlice[i].data.position + ' ' +
 				Math.trunc(curtime) + 'ms ' +
-				canvasSlice[i].data.offest + 'px ' +
+				//canvasSlice[i].data.offest + 'px ' +
 				canvasSlice[i].ref.style.top
 				, 0, ROW_OFFSET_Y);
 
+			if (!isRowBufPos) playPause(); // Debug pause
+
 			//canvasSlice[i].data.position = buf > 0 ? canvasSlice[i].data.position + rowBuffer + buf : canvasSlice[i].data.position - rowBuffer + buf;
 			//canvasSlice[i].ref.style.top = buf > 0 ? (canvasSlice[i].data.slicePos * CHAR_HEIGHT) + 'px' : (buf + row) * CHAR_HEIGHT + 'px';
 			//buf = (buf > 0) ? buf - 1 : buf + 1;
@@ -377,7 +385,7 @@ function drawSlices(skipOptimizationChecks = false) {
 		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 = '#000000';
+			canvasSlice[i].ctx.fillStyle = colours.background;
 			canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
 			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
 			//alreadyDrawn[curRow] = true;
@@ -389,6 +397,7 @@ function drawSlices(skipOptimizationChecks = false) {
 			canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px';
 			canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
 			/*
+			// Debug Text
 			canvasSlice[i].ctx.fillStyle = colours.foreground.default;
 			canvasSlice[i].ctx.fillText(
 				i.toString() + ' ' +
@@ -427,7 +436,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 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()) return false;
+	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
 	//if (alreadyDrawn[row]) return true;
 	const spacer = 11;
 	const space = ' ';
@@ -438,6 +447,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 	let fx = '';
 	let op = '';
 	for (let channel = 0; channel < channels; channel++) {
+		//if (channel > maxChannelLimit) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 
 		seperators += '|' + space.repeat( spacer + 2 );
@@ -448,7 +458,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 		op += part.substring(11, 13) + space.repeat( spacer + 1 );
 	}
 
-	//console.log( 'seperators: ' + seperators + '\nnote: '+ note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
+	//console.log( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
 
 	ctx.fillStyle = colours.foreground.default;
 	ctx.fillText(seperators, drawX, drawY);
@@ -468,6 +478,8 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 	ctx.fillStyle = colours.foreground.operant;
 	ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
 
+	ctx.drawImage( numberRowCanvas, 0, -(CHAR_HEIGHT * row) );
+
 	return true;
 }
 
@@ -604,6 +616,7 @@ onDeactivated(() => {
 			position: relative;
 			background-color: white;
 			image-rendering: pixelated;
+			/*transform: translateY(-24px);*/
 			/*pointer-events: none;*/
 			z-index: 0;
 

From 09516d09c0e5b41995a15e966c67da3cdb90135c Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Apr 2025 18:14:56 +0300
Subject: [PATCH 03/40] [frontend] Fix backwards and forward jump within  the
 same pattern.

Hopefully fixes H0ffman's modules.
---
 .../frontend/src/components/SkModPlayer.vue   | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 14abb2f847..f3735ed093 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -118,7 +118,8 @@ let patternScrollSliderPos = ref(0);
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 const maxRowNumbers = 0xFF;
-const rowBuffer = 26;
+const overdraw = 0;
+const rowBuffer = 26 + overdraw;
 const maxChannelLimit = 9;
 let buffer = null;
 let isSeeking = false;
@@ -311,28 +312,31 @@ function drawSlices(skipOptimizationChecks = false) {
 	let rowDif = 0;
 
 	let nbChannels = 0;
-	if (player.value.currentPlayingNode) {
-		nbChannels = player.value.currentPlayingNode.nbChannels;
-	}
+	if (player.value.currentPlayingNode) nbChannels = player.value.currentPlayingNode.nbChannels;
+
 	if (pattern === lastPattern && !skipOptimizationChecks) {
 		rowDif = row - lastDrawnRow;
 
-		if (rowDif !== 0 && rowDif !== 1) console.log(rowDif);
+		// Debug
+		if (rowDif > 1 || rowDif < -1) console.log(rowDif);
 		let curtime = performance.now();
 
-		const isRowBufPos = rowDif > 0;
-		let s = 0;
+		const isRowDirPos = rowDif > 0;
+		let drawnSlices = 0;
 
 		for (let i = 0; i < canvasSlice.length; i++) {
 			//if (buf === 0) break; // I don't want it to do random things.
 			//if (canvasSlice[i].data.pattern === pattern) {
+			let offest = 0;
+			if (rowDif > 1 || rowDif < -1) offest = isRowDirPos ? drawnSlices - rowDif + 1 : drawnSlices + rowDif - 2; // Don't question magic numbers.
+
 			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
 			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer + 1) continue;
 
-			canvasSlice[i].data.slicePos = isRowBufPos ? rowBuffer - 1 : s;
-			canvasSlice[i].data.position = isRowBufPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
+			canvasSlice[i].data.slicePos = isRowDirPos ? rowBuffer - 1 : drawnSlices;
+			canvasSlice[i].data.position = isRowDirPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
 
-			let curRow = row + halfbuf - 1;
+			let curRow = row + (isRowDirPos ? halfbuf : -halfbuf) - 1 + offest;
 
 			canvasSlice[i].ctx.fillStyle = colours.background;
 			canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
@@ -341,25 +345,26 @@ function drawSlices(skipOptimizationChecks = false) {
 
 			//alreadyDrawn[curRow] = true;
 
-			canvasSlice[i].ctx.fillStyle = isRowBufPos ? colours.foreground.fx : colours.foreground.operant; // Debug
+			canvasSlice[i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
+			canvasSlice[i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[i].ctx.fillStyle;
 			// Debug text
 			canvasSlice[i].ctx.fillText(
 				'   ' +
-				//i.toString() + ' ' +
+				i.toString() + ' ' +
 				curRow.toString() + ' ' +
-				//canvasSlice[i].data.slicePos + ' ' +
-				//canvasSlice[i].data.position + ' ' +
+				canvasSlice[i].data.slicePos + ' ' +
+				canvasSlice[i].data.position + ' ' +
 				Math.trunc(curtime) + 'ms ' +
-				//canvasSlice[i].data.offest + 'px ' +
+				canvasSlice[i].data.offest + 'px ' +
 				canvasSlice[i].ref.style.top
 				, 0, ROW_OFFSET_Y);
 
-			if (!isRowBufPos) playPause(); // Debug pause
+			if (!isRowDirPos || rowDif > 1) playPause(); // Debug pause
 
 			//canvasSlice[i].data.position = buf > 0 ? canvasSlice[i].data.position + rowBuffer + buf : canvasSlice[i].data.position - rowBuffer + buf;
 			//canvasSlice[i].ref.style.top = buf > 0 ? (canvasSlice[i].data.slicePos * CHAR_HEIGHT) + 'px' : (buf + row) * CHAR_HEIGHT + 'px';
 			//buf = (buf > 0) ? buf - 1 : buf + 1;
-			s++;
+			drawnSlices++;
 		}
 	} else {
 		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
@@ -396,10 +401,12 @@ function drawSlices(skipOptimizationChecks = false) {
 			canvasSlice[i].data.pattern = pattern;
 			canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px';
 			canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
+
 			/*
 			// Debug Text
 			canvasSlice[i].ctx.fillStyle = colours.foreground.default;
 			canvasSlice[i].ctx.fillText(
+				'   ' +
 				i.toString() + ' ' +
 				curRow.toString() + ' ' +
 				canvasSlice[i].data.slicePos + ' ' +
@@ -436,7 +443,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 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;
 	//if (alreadyDrawn[row]) return true;
 	const spacer = 11;
 	const space = ' ';

From 61c6f2ae340e48a2f9df780e857a7054312ffc9a Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 15 May 2025 12:53:33 +0300
Subject: [PATCH 04/40] [Frontend] SkModPlayer finally fixing some dumb math.

This also revealed some quirks.
---
 .../frontend/src/components/SkModPlayer.vue   | 114 +++++++++---------
 1 file changed, 54 insertions(+), 60 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 2fbabb8932..42834e189d 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -46,12 +46,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-// Bugs to fix:
-// Slices reseting
-// Slices not updating correctly when going backwards.
-// ^^ ¿ Fixed ? ^^
+// Don't forget to autohide the pattern.
 
-// Don't forgot to autohide the pattern.
+// Also don't forget to remove this. Yes, I'm that lazy.
+const debug = console.debug;
+const debug_w = console.warn;
+const debug_playpause = playPause;
 
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
@@ -108,7 +108,6 @@ const url = props.module.url;
 let hide = ref((prefer.s.nsfw === 'force') ? true : isSensitive && (prefer.s.nsfw !== 'ignore'));
 let patternHide = ref(false);
 let playing = ref(false);
-//let displayCanvas = ref<HTMLCanvasElement>();
 let sliceDisplay = ref<HTMLDivElement>();
 let progress = ref<HTMLProgressElement>();
 let position = ref(0);
@@ -120,6 +119,7 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 const maxRowNumbers = 0xFF;
 const overdraw = 0;
 const rowBuffer = 26 + overdraw;
+// Currently it's usued but it would be a great option for users to set themselves.
 const maxChannelLimit = 9;
 let buffer = null;
 let isSeeking = false;
@@ -309,45 +309,53 @@ function drawSlices(skipOptimizationChecks = false) {
 	const minRow = row - halfbuf;
 	const maxRow = row + halfbuf;
 
-	let rowDif = 0;
+	if (rowBuffer <= 0) {
+		lastDrawnRow = row;
+		lastPattern = pattern;
+		return;
+	}
 
 	let nbChannels = 0;
 	if (player.value.currentPlayingNode) nbChannels = player.value.currentPlayingNode.nbChannels;
 
-	if (pattern === lastPattern && !skipOptimizationChecks) {
-		rowDif = row - lastDrawnRow;
+	if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
+		let rowDif = row - lastDrawnRow;
 
 		// Debug
-		if (rowDif > 1 || rowDif < -1) console.log(rowDif);
+		if (rowDif > 1 || rowDif < 0) debug_w('Row diff', rowDif);
 		let curtime = performance.now();
 
 		const isRowDirPos = rowDif > 0;
+		const rowDir = !isRowDirPos as unknown as number;
+		const norm = 1 - 2 * rowDir;
+		const inorm = norm * -1;
 		let drawnSlices = 0;
 
+		debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm);
+
 		for (let i = 0; i < canvasSlice.length; i++) {
-			//if (buf === 0) break; // I don't want it to do random things.
-			//if (canvasSlice[i].data.pattern === pattern) {
-			let offest = 0;
-			if (rowDif > 1 || rowDif < -1) offest = isRowDirPos ? drawnSlices - rowDif + 1 : drawnSlices + rowDif - 2; // Don't question magic numbers.
+			const last_slicepos = canvasSlice[i].data.slicePos;
 
 			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
-			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer + 1) continue;
+			debug('i: ', i, 'slicepos:', canvasSlice[i].data.slicePos, 'slicepos last:', last_slicepos, 'row:', row, canvasSlice[i].ctx.canvas);
+			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer) continue;
 
-			canvasSlice[i].data.slicePos = isRowDirPos ? rowBuffer - 1 : drawnSlices;
-			canvasSlice[i].data.position = isRowDirPos ? canvasSlice[i].data.position + rowBuffer : canvasSlice[i].data.position - rowBuffer;
+			canvasSlice[i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : drawnSlices;
+			//canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
+			canvasSlice[i].data.position = canvasSlice[i].data.position + rowBuffer * norm;
 
-			let curRow = row + (isRowDirPos ? halfbuf : -halfbuf) - 1 + offest;
+			const curRow = (row + (drawnSlices - rowDif)) + halfbuf * norm;
 
-			canvasSlice[i].ctx.fillStyle = colours.background;
-			canvasSlice[i].ctx.fillRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
-			canvasSlice[i].ref.style.top = (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT) + 'px';
+			canvasSlice[i].ctx.clearRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
+			canvasSlice[i].ref.style.transform = 'translateY(' + (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT + CHAR_HEIGHT) + 'px)';
+			debug('i: ', i, canvasSlice[i].ref.style.transform, '\ncurRow', curRow, '\nhalfbuf * norm', halfbuf * norm, '\nrow', row, 'halfbuf', halfbuf, 'norm', norm, 'drawnSlices', drawnSlices);
 			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
 
-			//alreadyDrawn[curRow] = true;
-
 			canvasSlice[i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
 			canvasSlice[i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[i].ctx.fillStyle;
+
 			// Debug text
+			/*
 			canvasSlice[i].ctx.fillText(
 				'   ' +
 				i.toString() + ' ' +
@@ -356,16 +364,17 @@ function drawSlices(skipOptimizationChecks = false) {
 				canvasSlice[i].data.position + ' ' +
 				Math.trunc(curtime) + 'ms ' +
 				canvasSlice[i].data.offest + 'px ' +
-				canvasSlice[i].ref.style.top
+				canvasSlice[i].ref.style.transform
 				, 0, ROW_OFFSET_Y);
-
-			if (!isRowDirPos || rowDif > 1) playPause(); // Debug pause
-
-			//canvasSlice[i].data.position = buf > 0 ? canvasSlice[i].data.position + rowBuffer + buf : canvasSlice[i].data.position - rowBuffer + buf;
-			//canvasSlice[i].ref.style.top = buf > 0 ? (canvasSlice[i].data.slicePos * CHAR_HEIGHT) + 'px' : (buf + row) * CHAR_HEIGHT + 'px';
-			//buf = (buf > 0) ? buf - 1 : buf + 1;
+			*/
 			drawnSlices++;
 		}
+
+		if (drawnSlices === 0) {
+			debug_w('No changed Slices, is this intentional?');
+		}
+
+		//if (!isRowDirPos || rowDif > 1) debug_playpause(); // Debug pause
 	} else {
 		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
 			//const arrLen = patternTime.length - 1;
@@ -373,9 +382,9 @@ function drawSlices(skipOptimizationChecks = false) {
 			//const initialDraw = patternTime.initial;
 			const trackerTime = player.value.currentPlayingNode.getProcessTime();
 
-			//console.log( initialDraw, averageDraw, player.value.getCurrentTempo(), player.value.getCurrentSpeed() );
-			console.log( trackerTime, patternTime );
-			console.log( patternTime.initial + trackerTime.max, trackerTime.max + patternTime.max );
+			//debug( initialDraw, averageDraw, player.value.getCurrentTempo(), player.value.getCurrentSpeed() );
+			debug( trackerTime, patternTime );
+			debug( patternTime.initial + trackerTime.max, trackerTime.max + patternTime.max );
 			if (patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + patternTime.max > MAX_TIME_PER_ROW) {
 				alreadyHiddenOnce = true;
 				togglePattern();
@@ -390,8 +399,9 @@ function drawSlices(skipOptimizationChecks = false) {
 		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.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;
@@ -399,11 +409,11 @@ function drawSlices(skipOptimizationChecks = false) {
 			canvasSlice[i].data.offest = row * CHAR_HEIGHT;
 			canvasSlice[i].data.row = row - halfbuf + i;
 			canvasSlice[i].data.pattern = pattern;
-			canvasSlice[i].ref.style.top = canvasSlice[i].data.offest - CHAR_HEIGHT + 'px';
+			canvasSlice[i].ref.style.transform = 'translateY(' + (canvasSlice[i].data.offest) + 'px)';
 			canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
 
-			/*
 			// Debug Text
+			/*
 			canvasSlice[i].ctx.fillStyle = colours.foreground.default;
 			canvasSlice[i].ctx.fillText(
 				'   ' +
@@ -419,32 +429,16 @@ function drawSlices(skipOptimizationChecks = false) {
 		}
 	}
 
-	if (sliceDisplay.value) sliceDisplay.value.style.top = -(row * CHAR_HEIGHT - ((rowDif > 0 || pattern !== lastPattern) ? CHAR_HEIGHT : 0)) + 'px';
+	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + ( -(row * CHAR_HEIGHT ) ) + 'px)';
 
-	/*
-	canvasSlice.forEach((slice, i) => {
-		if (lastPattern === pattern) {
-
-		} else {
-		// just paint which slice, row and pushed row it is.
-			let curRow = row - halfbuf + i;
-			slice.ctx.fillStyle = '#000000';
-			slice.ctx.fillRect(0, 0, slice.ref.width, slice.ref.height);
-			//drawRow(slice.ctx, curRow, nbChannels, pattern);
-			alreadyDrawn[curRow] = true;
-			slice.ctx.fillStyle = colours.foreground.default;
-			slice.ctx.fillText(i.toString() + ' ' + curRow.toString() + ' ' + curtime, 0, ROW_OFFSET_Y);
-		}
-	});
-*/
 	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 (alreadyDrawn[row]) return true;
+	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
 	const spacer = 11;
 	const space = ' ';
 	let seperators = '';
@@ -465,7 +459,9 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 		op += part.substring(11, 13) + space.repeat( spacer + 1 );
 	}
 
-	//console.log( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
+	//debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
+
+	ctx.drawImage( numberRowCanvas, 0, -(CHAR_HEIGHT * row) );
 
 	ctx.fillStyle = colours.foreground.default;
 	ctx.fillText(seperators, drawX, drawY);
@@ -485,8 +481,6 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 	ctx.fillStyle = colours.foreground.operant;
 	ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
 
-	ctx.drawImage( numberRowCanvas, 0, -(CHAR_HEIGHT * row) );
-
 	return true;
 }
 
@@ -512,7 +506,7 @@ function display(skipOptimizationChecks = false) {
 
 	/*
 	canvasRefs.value..forEach((canvas) => {
-		console.log(canvas);
+		debug(canvas);
 	});*/
 
 	// Size vs speed

From 107e57f61b4a7c3eae870a09a5128a7dd07d332e Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Mon, 2 Jun 2025 18:55:14 +0300
Subject: [PATCH 05/40] [frontend] Fixed update order in SKModPlayer

---
 .../frontend/src/components/SkModPlayer.vue   | 84 +++++++++++--------
 1 file changed, 50 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 42834e189d..a685a64361 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -55,6 +55,7 @@ const debug_playpause = playPause;
 
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
+import type TDOMMatrix2DArray from 'happy-dom/lib/dom/dom-matrix/TDOMMatrix2DArray.js';
 import { i18n } from '@/i18n.js';
 import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/utility/chiptune2.js';
 import { isTouchUsing } from '@/utility/touch.js';
@@ -117,10 +118,12 @@ let patternScrollSliderPos = ref(0);
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 const maxRowNumbers = 0xFF;
+// Mainly used to hide race condition connected to canvas transfer to graphics buffer when software rendering.
+// Found that 2 is a good default but needs more testing.
 const overdraw = 0;
 const rowBuffer = 26 + overdraw;
-// Currently it's usued but it would be a great option for users to set themselves.
-const maxChannelLimit = 9;
+// It would be a great option for users to set themselves.
+const maxChannelLimit = 0xFF;
 let buffer = null;
 let isSeeking = false;
 let firstFrame = true;
@@ -156,7 +159,7 @@ function populateCanvasSlices () {
 	let nbChannels = 0;
 	if (player.value.currentPlayingNode) {
 		nbChannels = player.value.currentPlayingNode.nbChannels;
-		//nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
+		nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
 	}
 	sliceWidth = 12 + 84 * nbChannels + 2;
 
@@ -322,59 +325,72 @@ function drawSlices(skipOptimizationChecks = false) {
 		let rowDif = row - lastDrawnRow;
 
 		// Debug
-		if (rowDif > 1 || rowDif < 0) debug_w('Row diff', rowDif);
-		let curtime = performance.now();
+		if (rowDif > 1 || rowDif < 0) {
+			//debug_playpause();
+			debug_w('Row diff', rowDif);
+		}
 
 		const isRowDirPos = rowDif > 0;
 		const rowDir = !isRowDirPos as unknown as number;
 		const norm = 1 - 2 * rowDir;
-		const inorm = norm * -1;
+		const offByOneFix = -1 * rowDir;
 		let drawnSlices = 0;
 
+		interface InteralToDraw {
+			p: number,
+			i: number
+		};
+		let toDraw: InteralToDraw[] = [];
+		let lowestRow = 0xFFFFFFFF;
+
 		debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm);
 
 		for (let i = 0; i < canvasSlice.length; i++) {
-			const last_slicepos = canvasSlice[i].data.slicePos;
-
 			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
-			debug('i: ', i, 'slicepos:', canvasSlice[i].data.slicePos, 'slicepos last:', last_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;
 
-			canvasSlice[i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : drawnSlices;
-			//canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
-			canvasSlice[i].data.position = canvasSlice[i].data.position + rowBuffer * norm;
+			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 curRow = (row + (drawnSlices - rowDif)) + halfbuf * norm;
+		debug(lowestRow, norm);
+		console.table(toDraw);
 
-			canvasSlice[i].ctx.clearRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
-			canvasSlice[i].ref.style.transform = 'translateY(' + (canvasSlice[i].data.offest + (canvasSlice[i].data.position) * CHAR_HEIGHT + CHAR_HEIGHT) + 'px)';
-			debug('i: ', i, canvasSlice[i].ref.style.transform, '\ncurRow', curRow, '\nhalfbuf * norm', halfbuf * norm, '\nrow', row, 'halfbuf', halfbuf, 'norm', norm, 'drawnSlices', drawnSlices);
-			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
+		for (let i = toDraw.length - 1; i >= lowestRow; i += -1) {
+			debug('fl:', i, toDraw[i]);
 
-			canvasSlice[i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
-			canvasSlice[i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[i].ctx.fillStyle;
+			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
+			canvasSlice[toDraw[i].i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[toDraw[i].i].ctx.fillStyle;
 
 			// Debug text
 			/*
-			canvasSlice[i].ctx.fillText(
+			canvasSlice[toDraw[i].i].ctx.fillText(
 				'   ' +
 				i.toString() + ' ' +
 				curRow.toString() + ' ' +
-				canvasSlice[i].data.slicePos + ' ' +
-				canvasSlice[i].data.position + ' ' +
-				Math.trunc(curtime) + 'ms ' +
-				canvasSlice[i].data.offest + 'px ' +
-				canvasSlice[i].ref.style.transform
+				canvasSlice[toDraw[i].i].data.slicePos + ' ' +
+				canvasSlice[toDraw[i].i].data.position + ' ' +
+				canvasSlice[toDraw[i].i].data.offest + 'px ' +
+				canvasSlice[toDraw[i].i].ref.style.transform
 				, 0, ROW_OFFSET_Y);
 			*/
-			drawnSlices++;
+			drawnSlices += norm;
 		}
 
-		if (drawnSlices === 0) {
-			debug_w('No changed Slices, is this intentional?');
-		}
-
-		//if (!isRowDirPos || rowDif > 1) debug_playpause(); // Debug pause
+		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;
@@ -393,7 +409,6 @@ function drawSlices(skipOptimizationChecks = false) {
 		}
 
 		patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
-		alreadyDrawn = [];
 
 		let curtime = performance.now();
 		for (let i = 0; i < canvasSlice.length; i++) {
@@ -438,7 +453,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 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 = '';
@@ -448,7 +463,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 	let fx = '';
 	let op = '';
 	for (let channel = 0; channel < channels; channel++) {
-		//if (channel > maxChannelLimit) break;
+		if (channel > maxChannelLimit) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 
 		seperators += '|' + space.repeat( spacer + 2 );
@@ -613,6 +628,7 @@ onDeactivated(() => {
 		}
 
 		.slice_display {
+			/*display: inline-grid;*/
 			display: grid;
 			position: relative;
 			background-color: white;

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 06/40] [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;

From e8a09e884b2af0f6a8176182ff7321fe8d8a0d12 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 11 Jun 2025 18:03:55 +0300
Subject: [PATCH 07/40] [frontend] More fixed in drawSlices in a backwards norm

This time it's slicePos that was set incorrectly causing it to be out of whack when it get updated multiple times.
---
 .../frontend/src/components/SkModPlayer.vue   | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 4f943b0ba7..e88f52b1dd 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -328,7 +328,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 		// Debug
 		if (rowDif > 1 || rowDif < 0) {
-			debug_playpause();
+			//debug_playpause();
 			debug_w('Row diff', rowDif);
 		}
 
@@ -336,7 +336,6 @@ function drawSlices(skipOptimizationChecks = false) {
 		const rowDir = !isRowDirPos as unknown as number;
 		const norm = 1 - 2 * rowDir;
 		const offByOneFix = -1 * rowDir;
-		let drawnSlices = 0;
 
 		interface InteralToDraw {
 			p: number,
@@ -344,8 +343,10 @@ function drawSlices(skipOptimizationChecks = false) {
 		};
 		let toDraw: InteralToDraw[] = [];
 		let lowestRow = 0xFFFFFFFF;
+		let drawnSlices = 0;
+		let maxToDraw = 0;
 
-		debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm);
+		//debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm);
 
 		for (let i = 0; i < canvasSlice.length; i++) {
 			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
@@ -355,21 +356,19 @@ function drawSlices(skipOptimizationChecks = false) {
 			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);
+			maxToDraw++;
+			//debug_w('Added to draw.', abs_pos);
 		}
 
-		debug(lowestRow, norm);
-		console.table(toDraw);
-
-		toDraw.forEach((v, i) => {
-			debug('test print:', v, i);
-		});
+		//debug(lowestRow, norm);
+		//console.table(toDraw);
 
 		for (let i = toDraw.length - 1; i >= lowestRow; i += -1) {
-			//debug('fl:', i, toDraw[i]);
 			if (!toDraw[i]) continue;
 
-			canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : drawnSlices;
+			//debug('Before', canvasSlice[toDraw[i].i].data);
+
+			canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : maxToDraw + drawnSlices - 1;
 			canvasSlice[toDraw[i].i].data.position = canvasSlice[toDraw[i].i].data.position + rowBuffer * norm;
 
 			const curRow = offByOneFix + (row + (drawnSlices - rowDif)) + halfbuf * norm;
@@ -378,8 +377,17 @@ function drawSlices(skipOptimizationChecks = false) {
 			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)';
 			drawRow(canvasSlice[toDraw[i].i].ctx, curRow, nbChannels, pattern);
 
-			canvasSlice[toDraw[i].i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
-			canvasSlice[toDraw[i].i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[toDraw[i].i].ctx.fillStyle;
+			/*
+			debug('fl:', i, toDraw[i], canvasSlice[toDraw[i].i].data, canvasSlice[toDraw[i].i].ctx.canvas,
+				'   ' +
+				i.toString() + ' ' +
+				curRow.toString() + ' ' +
+				canvasSlice[toDraw[i].i].ref.style.transform,
+			);
+			*/
+
+			//canvasSlice[toDraw[i].i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
+			//canvasSlice[toDraw[i].i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[toDraw[i].i].ctx.fillStyle;
 
 			// Debug text
 			/*
@@ -507,7 +515,7 @@ function display(skipOptimizationChecks = false) {
 
 	if (firstFrame) {
 		// Changing it to false should enable pattern display by default.
-		patternHide.value = true;
+		patternHide.value = false;
 		handleScrollBarEnable();
 		firstFrame = false;
 	}
@@ -631,7 +639,7 @@ onDeactivated(() => {
 		}
 
 		.patternShadowTop {
-			background: #00000080;
+			background: #00000000;
 			width: 100%;
 			height: calc( 50% - 14px );
 			translate: -50% -100%;
@@ -642,7 +650,7 @@ onDeactivated(() => {
 		}
 
 		.patternShadowBottom {
-			background: #00000080;
+			background: #00000000;
 			width: 100%;
 			height: calc( 50% - 12px );
 			translate: -50% 0;

From 49c843feb6e7745d4c4d85c135df2eca6b45d842 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 12 Jun 2025 17:49:44 +0300
Subject: [PATCH 08/40] [frontend] fix pattern hidden seek

Fixes an issue where seek then unhide the pattern would keep the old display.
---
 .../frontend/src/components/SkModPlayer.vue   | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index e88f52b1dd..6ab169a1ee 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -266,16 +266,12 @@ function initSeek() {
 	isSeeking = true;
 }
 
-function performSeek() {
+function performSeek(forceUpate = false) {
 	const noNode = !player.value.currentPlayingNode;
-	if (noNode) {
-		player.value.play(buffer);
-	}
+	if (noNode) player.value.play(buffer);
 	player.value.seek(position.value);
-	display(true);
-	if (noNode) {
-		player.value.stop();
-	}
+	if (!patternHide.value || forceUpate) display(true);
+	if (noNode) player.value.stop();
 	isSeeking = false;
 }
 
@@ -298,14 +294,11 @@ function togglePattern() {
 
 	if (player.value.getRow() === 0 && player.value.getPattern() === 0) {
 		try {
-			player.value.play(buffer);
-			display(true);
+			performSeek(true);
 		} catch (err) {
 			console.warn(err);
 		}
 		player.value.stop();
-	} else {
-		display(true);
 	}
 }
 
@@ -515,7 +508,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;
 	}
@@ -639,7 +632,7 @@ onDeactivated(() => {
 		}
 
 		.patternShadowTop {
-			background: #00000000;
+			background: #00000080;
 			width: 100%;
 			height: calc( 50% - 14px );
 			translate: -50% -100%;
@@ -650,7 +643,7 @@ onDeactivated(() => {
 		}
 
 		.patternShadowBottom {
-			background: #00000000;
+			background: #00000080;
 			width: 100%;
 			height: calc( 50% - 12px );
 			translate: -50% 0;

From df338e0b61dab4da9538f7a51e6b30c4b264a459 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 12 Jun 2025 19:12:16 +0300
Subject: [PATCH 09/40] [frontend] SkModPlayer CSS adjustemts

---
 .../frontend/src/components/SkModPlayer.vue   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 6ab169a1ee..4e694d1df5 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -573,7 +573,7 @@ onDeactivated(() => {
 .hide {
 	border-radius: var(--MI-radius-sm) !important;
 	background-color: black !important;
-	color: var(--MI_THEME-accentLighten) !important;
+	color: var(--MI_THEME-indicator) !important;
 	font-size: 12px !important;
 }
 
@@ -589,7 +589,7 @@ onDeactivated(() => {
 		position: absolute;
 		border-radius: var(--MI-radius-sm);
 		background-color: var(--MI_THEME-fg);
-		color: var(--MI_THEME-accentLighten);
+		color: var(--MI_THEME-indicator);
 		font-size: 14px;
 		opacity: .5;
 		padding: 3px 6px;
@@ -616,27 +616,23 @@ onDeactivated(() => {
 		}
 
 		.slice_display {
-			display: grid;
+			display: inline-grid;
 			position: relative;
 			background-color: black;
 			image-rendering: pixelated;
-			z-index: 0;
+			top: -3px;
 
 			.patternSlice {
-				position: relative;
-				background-color: black;
 				image-rendering: pixelated;
-				/*pointer-events: none;*/
-				z-index: 0;
 			}
 		}
 
 		.patternShadowTop {
 			background: #00000080;
 			width: 100%;
-			height: calc( 50% - 14px );
-			translate: -50% -100%;
-			top: calc( 50% - 14px );
+			height: calc(50% - 14px);
+			translate: 0 -100%;
+			top: calc(50% - 14px);
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;
@@ -645,9 +641,8 @@ onDeactivated(() => {
 		.patternShadowBottom {
 			background: #00000080;
 			width: 100%;
-			height: calc( 50% - 12px );
-			translate: -50% 0;
-			top: calc( 50% - 1px );
+			height: calc(50% - 27px);
+			top: calc(50% - 2px);
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;
@@ -743,7 +738,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--MI_THEME-accentLighten);
+				background: var(--MI_THEME-indicator);
 				cursor: pointer;
 				-webkit-appearance: none;
 				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
@@ -772,7 +767,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: var(--MI_THEME-accentLighten);
+				background: var(--MI_THEME-indicator);
 				cursor: pointer;
 			}
 
@@ -805,7 +800,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--MI_THEME-accentLighten);
+				background: var(--MI_THEME-indicator);
 				cursor: pointer;
 			}
 

From 1f82229e8a3c4251ff4b725e4d0382698ef166c4 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 12 Jun 2025 22:04:19 +0300
Subject: [PATCH 10/40] [frontend] SkModPlayer re-add overdraw to mitigate GPU
 upload race condition.

---
 packages/frontend/src/components/SkModPlayer.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 4e694d1df5..41488fbc22 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -127,8 +127,8 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 const maxRowNumbers = 0xFF;
 // Mainly used to hide race condition connected to canvas transfer to graphics buffer when software rendering.
 // Found that 2 is a good default but needs more testing.
-const overdraw = 0;
-const rowBuffer = 26 + overdraw;
+const overdraw = 2;
+const rowBuffer = 26 + (overdraw * 2);
 // It would be a great option for users to set themselves.
 const maxChannelLimit = 0xFF;
 let buffer = null;
@@ -204,6 +204,9 @@ function populateCanvasSlices () {
 }
 
 onMounted(() => {
+	// That 3 is a magic number for inline-grid re-alignment, if at any point sliceDisplay switches to grid remember to remove that 3.
+	if (sliceDisplay.value) sliceDisplay.value.style.top = -(overdraw * CHAR_HEIGHT + 3) + 'px';
+
 	player.value.load(url).then((result) => {
 		buffer = result;
 		try {
@@ -620,7 +623,6 @@ onDeactivated(() => {
 			position: relative;
 			background-color: black;
 			image-rendering: pixelated;
-			top: -3px;
 
 			.patternSlice {
 				image-rendering: pixelated;

From 5fd6a6d277702158abc87034885d4b920ce0ea02 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 12 Jun 2025 23:41:52 +0300
Subject: [PATCH 11/40] [frontend] Removed overdraw const desynchronized canvas
 property DID something

reverted back grid as it's more consistent.
---
 packages/frontend/src/components/SkModPlayer.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 41488fbc22..6ad932f8ab 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -125,10 +125,7 @@ let patternScrollSliderPos = ref(0);
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 const maxRowNumbers = 0xFF;
-// Mainly used to hide race condition connected to canvas transfer to graphics buffer when software rendering.
-// Found that 2 is a good default but needs more testing.
-const overdraw = 2;
-const rowBuffer = 26 + (overdraw * 2);
+const rowBuffer = 26;
 // It would be a great option for users to set themselves.
 const maxChannelLimit = 0xFF;
 let buffer = null;
@@ -178,7 +175,7 @@ function populateCanvasSlices () {
 			let c = canvas as HTMLCanvasElement;
 			c.height = CHAR_HEIGHT;
 			c.width = sliceWidth;
-			let ctx = c.getContext('2d', { alpha: false, desynchronized: true }) as CanvasRenderingContext2D;
+			let ctx = c.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D;
 			ctx.font = '10px monospace';
 			ctx.imageSmoothingEnabled = false;
 
@@ -204,8 +201,7 @@ function populateCanvasSlices () {
 }
 
 onMounted(() => {
-	// That 3 is a magic number for inline-grid re-alignment, if at any point sliceDisplay switches to grid remember to remove that 3.
-	if (sliceDisplay.value) sliceDisplay.value.style.top = -(overdraw * CHAR_HEIGHT + 3) + 'px';
+	//if (sliceDisplay.value) sliceDisplay.value.style.top = -(overdraw * CHAR_HEIGHT) + 'px';
 
 	player.value.load(url).then((result) => {
 		buffer = result;
@@ -619,7 +615,7 @@ onDeactivated(() => {
 		}
 
 		.slice_display {
-			display: inline-grid;
+			display: grid;
 			position: relative;
 			background-color: black;
 			image-rendering: pixelated;
@@ -633,7 +629,7 @@ onDeactivated(() => {
 			background: #00000080;
 			width: 100%;
 			height: calc(50% - 14px);
-			translate: 0 -100%;
+			translate: -50% -100%;
 			top: calc(50% - 14px);
 			position: absolute;
 			pointer-events: none;
@@ -644,6 +640,7 @@ onDeactivated(() => {
 			background: #00000080;
 			width: 100%;
 			height: calc(50% - 27px);
+			translate: -50% 0;
 			top: calc(50% - 2px);
 			position: absolute;
 			pointer-events: none;

From 23d4df1553ea0b33a05ae44b92d936fe73bc99c5 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Fri, 13 Jun 2025 02:32:40 +0300
Subject: [PATCH 12/40] [frontend] SkModPlayer clean up, returned auto-hide if
 performance is down.

---
 .../frontend/src/components/SkModPlayer.vue   | 82 ++-----------------
 1 file changed, 5 insertions(+), 77 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 6ad932f8ab..f066b5f9a5 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -43,21 +43,6 @@ 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;
-const debug_playpause = playPause;
-
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import type TDOMMatrix2DArray from 'happy-dom/lib/dom/dom-matrix/TDOMMatrix2DArray.js';
@@ -201,8 +186,6 @@ function populateCanvasSlices () {
 }
 
 onMounted(() => {
-	//if (sliceDisplay.value) sliceDisplay.value.style.top = -(overdraw * CHAR_HEIGHT) + 'px';
-
 	player.value.load(url).then((result) => {
 		buffer = result;
 		try {
@@ -318,12 +301,7 @@ function drawSlices(skipOptimizationChecks = false) {
 	if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
 		let rowDif = row - lastDrawnRow;
 
-		// Debug
-		if (rowDif > 1 || rowDif < 0) {
-			//debug_playpause();
-			debug_w('Row diff', rowDif);
-		}
-
+		const startTime = performance.now();
 		const isRowDirPos = rowDif > 0;
 		const rowDir = !isRowDirPos as unknown as number;
 		const norm = 1 - 2 * rowDir;
@@ -338,28 +316,19 @@ function drawSlices(skipOptimizationChecks = false) {
 		let drawnSlices = 0;
 		let maxToDraw = 0;
 
-		//debug_w('begin drawing.\n', 'isRowDirPos', isRowDirPos, 'rowDir', rowDir, 'norm', norm);
-
 		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);
 			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer) continue;
 
 			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 };
 			maxToDraw++;
-			//debug_w('Added to draw.', abs_pos);
 		}
 
-		//debug(lowestRow, norm);
-		//console.table(toDraw);
-
 		for (let i = toDraw.length - 1; i >= lowestRow; i += -1) {
 			if (!toDraw[i]) continue;
 
-			//debug('Before', canvasSlice[toDraw[i].i].data);
-
 			canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : maxToDraw + drawnSlices - 1;
 			canvasSlice[toDraw[i].i].data.position = canvasSlice[toDraw[i].i].data.position + rowBuffer * norm;
 
@@ -368,42 +337,16 @@ function drawSlices(skipOptimizationChecks = false) {
 			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)';
 			drawRow(canvasSlice[toDraw[i].i].ctx, curRow, nbChannels, pattern);
-
-			/*
-			debug('fl:', i, toDraw[i], canvasSlice[toDraw[i].i].data, canvasSlice[toDraw[i].i].ctx.canvas,
-				'   ' +
-				i.toString() + ' ' +
-				curRow.toString() + ' ' +
-				canvasSlice[toDraw[i].i].ref.style.transform,
-			);
-			*/
-
-			//canvasSlice[toDraw[i].i].ctx.fillStyle = isRowDirPos ? colours.foreground.fx : colours.foreground.operant; // Debug
-			//canvasSlice[toDraw[i].i].ctx.fillStyle = (isRowDirPos && rowDif > 1) ? colours.foreground.instr : canvasSlice[toDraw[i].i].ctx.fillStyle;
-
-			// Debug text
-			/*
-			canvasSlice[toDraw[i].i].ctx.fillText(
-				'   ' +
-				i.toString() + ' ' +
-				curRow.toString() + ' ' +
-				canvasSlice[toDraw[i].i].data.slicePos + ' ' +
-				canvasSlice[toDraw[i].i].data.position + ' ' +
-				canvasSlice[toDraw[i].i].data.offest + 'px ' +
-				canvasSlice[toDraw[i].i].ref.style.transform
-				, 0, ROW_OFFSET_Y);
-			*/
 			drawnSlices += norm;
 		}
 
-		if (drawnSlices === 0) { debug_w('No changed Slices, is this intentional?\nrow', row, 'pattern', pattern); }
+		patternTime.current = performance.now() - startTime;
+		if (patternTime.initial !== 0 && patternTime.current > patternTime.max) patternTime.max = patternTime.current;
+		else if (patternTime.initial === 0) patternTime.initial = patternTime.current;
 	} else {
 		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
 			const trackerTime = player.value.currentPlayingNode.getProcessTime();
 
-			//debug( initialDraw, averageDraw, player.value.getCurrentTempo(), player.value.getCurrentSpeed() );
-			debug( trackerTime, patternTime );
-			debug( patternTime.initial + trackerTime.max, trackerTime.max + patternTime.max );
 			if (patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + patternTime.max > MAX_TIME_PER_ROW) {
 				alreadyHiddenOnce = true;
 				togglePattern();
@@ -425,21 +368,6 @@ function drawSlices(skipOptimizationChecks = false) {
 			canvasSlice[i].data.pattern = pattern;
 			canvasSlice[i].ref.style.transform = 'translateY(' + (canvasSlice[i].data.offest) + 'px)';
 			canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
-
-			// Debug Text
-			/*
-			canvasSlice[i].ctx.fillStyle = colours.foreground.default;
-			canvasSlice[i].ctx.fillText(
-				'   ' +
-				i.toString() + ' ' +
-				curRow.toString() + ' ' +
-				canvasSlice[i].data.slicePos + ' ' +
-				canvasSlice[i].data.position + ' ' +
-				Math.trunc(curtime) + 'ms ' +
-				canvasSlice[i].data.offest + 'px ' +
-				'init'
-				, 0, ROW_OFFSET_Y);
-				*/
 		}
 	}
 
@@ -472,7 +400,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 		op += part.substring(11, 13) + space.repeat( spacer + 1 );
 	}
 
-	//debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
+	//console.debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
 
 	ctx.drawImage( numberRowCanvas, 0, -(CHAR_HEIGHT * row) );
 

From 0ce325232d084d14a3f0a716dba0fed4f300792f Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Fri, 13 Jun 2025 03:23:20 +0300
Subject: [PATCH 13/40] [frontend] removed happy-dom from imports.

---
 packages/frontend/src/components/SkModPlayer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index f066b5f9a5..294f536b02 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -45,7 +45,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
-import type TDOMMatrix2DArray from 'happy-dom/lib/dom/dom-matrix/TDOMMatrix2DArray.js';
 import { i18n } from '@/i18n.js';
 import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/utility/chiptune2.js';
 import { isTouchUsing } from '@/utility/touch.js';

From 009c0c48ddb959e7dd1fe7b32858aa718c956a80 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Fri, 20 Jun 2025 15:59:33 +0300
Subject: [PATCH 14/40] [frontend] SkModPlayer rewirte, again.

---
 .../frontend/src/components/SkModPlayer.vue   | 347 ++++++++++--------
 1 file changed, 191 insertions(+), 156 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 294f536b02..791b6a0895 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -20,7 +20,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span :class="$style.patternShadowTop"></span>
 		<span :class="$style.patternShadowBottom"></span>
 		<div ref="sliceDisplay" :class="$style.slice_display">
-			<canvas v-for="slice in dummyArray" :key="slice.id" ref="canvasRefs" :class="$style.patternSlice"></canvas>
+			<canvas ref="sliceCanvas1" :class="$style.patternSlice"></canvas>
+			<canvas ref="sliceCanvas2" :class="$style.patternSlice"></canvas>
+			<canvas ref="sliceCanvas3" :class="$style.patternSlice"></canvas>
 		</div>
 	</div>
 	<div :class="$style.controls">
@@ -43,17 +45,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
+const debug = console.debug;
+const debugw = console.warn;
+const debug_playPause = playPause;
+
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { Ref } from 'vue';
 import { i18n } from '@/i18n.js';
 import { ChiptuneJsPlayer, ChiptuneJsConfig } from '@/utility/chiptune2.js';
 import { isTouchUsing } from '@/utility/touch.js';
 import { prefer } from '@/preferences.js';
 
 const colours = {
-	background: '#000000',
+	background: '#ffffff',
 	foreground: {
-		default: '#ffffff',
+		default: '#000000',
 		quarter: '#ffff00',
 		instr: '#80e0ff',
 		volume: '#80ff80',
@@ -72,25 +79,15 @@ const props = defineProps<{
 	module: Misskey.entities.DriveFile
 }>();
 
-interface DummyCanvas {
-	id: number;
-}
-
-interface CanvasData {
-	offscreen: boolean;
-	active: boolean;
-	pattern: number;
-	row: number;
-	position: number;
-	offest: number;
-	slicePos: number;
-}
-
-interface CanvasSlice {
-	data: CanvasData;
-	did: DummyCanvas;
-	ctx: CanvasRenderingContext2D;
-	ref: HTMLCanvasElement;
+interface CanvasDisplay {
+	ctx: CanvasRenderingContext2D,
+	html: HTMLCanvasElement,
+	drawn: { top: number, bottom: number, left: number, right: number },
+	range: { top: number, bottom: number },
+	vPos: number,
+	transform: { x: number, y: number },
+	drawStart: number,
+	channels: number,
 }
 
 const isSensitive = props.module.isSensitive;
@@ -101,6 +98,11 @@ let hide = ref((prefer.s.nsfw === 'force') ? true : isSensitive && (prefer.s.nsf
 let patternHide = ref(false);
 let playing = ref(false);
 let sliceDisplay = ref<HTMLDivElement>();
+let sliceCanvas1 = ref();
+let sliceCanvas2 = ref();
+let sliceCanvas3 = ref();
+let sliceWidth = 0;
+let sliceHeight = 0;
 let progress = ref<HTMLProgressElement>();
 let position = ref(0);
 let patternScrollSlider = ref<HTMLProgressElement>();
@@ -112,6 +114,7 @@ const maxRowNumbers = 0xFF;
 const rowBuffer = 26;
 // It would be a great option for users to set themselves.
 const maxChannelLimit = 0xFF;
+const halfbuf = Math.floor(rowBuffer / 2);
 let buffer = null;
 let isSeeking = false;
 let firstFrame = true;
@@ -119,15 +122,39 @@ let lastPattern = -1;
 let lastDrawnRow = -1;
 let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1);
 let alreadyHiddenOnce = false;
-let dummyArray: DummyCanvas[] = [];
-let patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
-let canvasSlice: CanvasSlice[] = [];
-let canvasRefs = ref([]);
-let sliceWidth = 0;
+let slices: CanvasDisplay[] = [];
+
+const peft = {
+	startTime: 0,
+	patternTime: { current: 0, max: 0, initial: 0 },
+	start: function() {
+		this.startTime = performance.now();
+	},
+	end: function() {
+		this.patternTime.current = performance.now() - this.startTime;
+		if (this.patternTime.initial !== 0 && this.patternTime.current > this.patternTime.max) this.patternTime.max = this.patternTime.current;
+		else if (this.patternTime.initial === 0) this.patternTime.initial = this.patternTime.current;
+	},
+	asses: function() {
+		if (this.patternTime.initial !== 0 && !alreadyHiddenOnce) {
+			const trackerTime = player.value.currentPlayingNode.getProcessTime();
+
+			if (this.patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + this.patternTime.max > MAX_TIME_PER_ROW) {
+				alreadyHiddenOnce = true;
+				togglePattern();
+				return;
+			}
+		}
+
+		this.patternTime = { current: 0, max: 0, initial: 0 };
+	},
+};
 
 function bakeNumberRow() {
 	let ctx = numberRowCanvas.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
 	ctx.font = '10px monospace';
+	ctx.fillStyle = colours.background;
+	ctx.fillRect( 0, 0, numberRowCanvas.width, numberRowCanvas.height );
 
 	for (let i = 0; i < maxRowNumbers; i++) {
 		let rowText = i.toString(16);
@@ -140,48 +167,43 @@ function bakeNumberRow() {
 	}
 }
 
-function populateCanvasSlices () {
-	if (dummyArray.length === 0) for (let i = 0; i < rowBuffer; i++) dummyArray.push({ id: i });
+function setupSlice(r: Ref, channels: number) {
+	let chtml = r.value as HTMLCanvasElement;
+	chtml.width = sliceWidth;
+	chtml.height = sliceHeight;
+	let slice: CanvasDisplay = {
+		ctx: chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
+		html: chtml,
+		drawn: { top: 0, bottom: 0, left: 0, right: 0 },
+		range: { top: -0xFFFFFFFF, bottom: -0xFFFFFFFF },
+		vPos: -0xFFFFFFFF,
+		channels,
+		transform: { x: 0, y: 0 },
+		drawStart: 0,
+	};
+	slice.ctx.font = '10px monospace';
+	slice.ctx.imageSmoothingEnabled = false;
+	slices.push(slice);
+}
 
-	let nbChannels = 0;
-	if (player.value.currentPlayingNode) {
-		nbChannels = player.value.currentPlayingNode.nbChannels;
-		nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
-	}
-	sliceWidth = 12 + 84 * nbChannels + 2;
-
-	// I don't want to know why
-	// I don't have to know why
-	// But vue forced my hand.
-	// For some forsaken reason I need two nested nextTick calls in order for everything to show up properly.
-	nextTick(() => nextTick(() => {
-		canvasRefs.value.forEach((canvas, i) => {
-			let c = canvas as HTMLCanvasElement;
-			c.height = CHAR_HEIGHT;
-			c.width = sliceWidth;
-			let ctx = c.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D;
-			ctx.font = '10px monospace';
-			ctx.imageSmoothingEnabled = false;
-
-			let cd: CanvasData = {
-				offscreen: false,
-				active: false,
-				pattern: -1,
-				row: -1,
-				position: i,
-				offest: 0,
-				slicePos: i,
-			};
-
-			canvasSlice[i] = {
-				data: cd,
-				did: dummyArray[i],
-				ctx: ctx,
-				ref: c,
-			};
+function setupCanvas() {
+	if (sliceCanvas1.value && sliceCanvas2.value && sliceCanvas3.value) {
+		let nbChannels = 0;
+		if (player.value.currentPlayingNode) {
+			nbChannels = player.value.currentPlayingNode.nbChannels;
+			nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
+		}
+		sliceWidth = 12 + 84 * nbChannels + 2;
+		sliceHeight = halfbuf * CHAR_HEIGHT;
+		setupSlice(sliceCanvas1, nbChannels);
+		setupSlice(sliceCanvas2, nbChannels);
+		setupSlice(sliceCanvas3, nbChannels);
+	} else {
+		nextTick(() => {
+			debugw('Jumped to the next tick, is Vue ok?');
+			setupCanvas();
 		});
-		stop();
-	}));
+	}
 }
 
 onMounted(() => {
@@ -191,7 +213,8 @@ onMounted(() => {
 			player.value.play(buffer);
 			progress.value!.max = player.value.duration();
 			bakeNumberRow();
-			populateCanvasSlices();
+			//populateCanvasSlices();
+			setupCanvas();
 			display(true);
 		} catch (err) {
 			console.warn(err);
@@ -263,7 +286,6 @@ function toggleVisible() {
 		lastDrawnRow = -1;
 		nextTick(() => {
 			playPause();
-			populateCanvasSlices();
 		});
 	}
 	nextTick(() => { stop(hide.value); });
@@ -284,99 +306,113 @@ function togglePattern() {
 }
 
 function drawSlices(skipOptimizationChecks = false) {
-	const pattern = player.value.getPattern();
-	const row = player.value.getRow();
-	const halfbuf = Math.floor(rowBuffer / 2);
-
 	if (rowBuffer <= 0) {
-		lastDrawnRow = row;
-		lastPattern = pattern;
+		lastDrawnRow = player.value.getPattern();
+		lastPattern = player.value.getRow();
 		return;
 	}
 
-	let nbChannels = 0;
-	if (player.value.currentPlayingNode) nbChannels = player.value.currentPlayingNode.nbChannels;
+	const pattern = player.value.getPattern();
+	const row = player.value.getRow();
+	const lower = row + halfbuf;
+	const upper = row - halfbuf;
+	const newDisplayTanslalation = -row * CHAR_HEIGHT;
+	let curRow = row - halfbuf;
 
 	if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
-		let rowDif = row - lastDrawnRow;
-
-		const startTime = performance.now();
+		const rowDif = row - lastDrawnRow;
 		const isRowDirPos = rowDif > 0;
 		const rowDir = !isRowDirPos as unknown as number;
+		const rowDirInv = 1 - 1 * rowDir;
 		const norm = 1 - 2 * rowDir;
-		const offByOneFix = -1 * rowDir;
+		const oneAndHalfBuf = halfbuf * 3;
 
-		interface InteralToDraw {
-			p: number,
-			i: number
-		};
-		let toDraw: InteralToDraw[] = [];
-		let lowestRow = 0xFFFFFFFF;
-		let drawnSlices = 0;
-		let maxToDraw = 0;
+		debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);
 
-		for (let i = 0; i < canvasSlice.length; i++) {
-			canvasSlice[i].data.slicePos = canvasSlice[i].data.slicePos - rowDif;
-			if (canvasSlice[i].data.slicePos > -1 && canvasSlice[i].data.slicePos < rowBuffer) continue;
+		slices.forEach((sli) => {
+			sli.vPos -= rowDif;
+			if (sli.vPos <= 0 || sli.vPos >= oneAndHalfBuf) {
+				sli.drawStart += oneAndHalfBuf * norm;
+				sli.vPos = oneAndHalfBuf * rowDirInv;
+				sli.transform.y += (oneAndHalfBuf * CHAR_HEIGHT) * norm;
+				sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)';
+				sli.drawn = {
+					top: 0xFFFFFFFF,
+					bottom: -0xFFFFFFFF,
+					left: -0xFFFFFFFF,
+					right: -0xFFFFFFFF,
+				};
 
-			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 };
-			maxToDraw++;
-		}
+				sli.ctx.fillStyle = colours.background;
+				sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
+				sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * sli.drawStart);
 
-		for (let i = toDraw.length - 1; i >= lowestRow; i += -1) {
-			if (!toDraw[i]) continue;
-
-			canvasSlice[toDraw[i].i].data.slicePos = isRowDirPos ? (rowBuffer - rowDif) + drawnSlices : maxToDraw + drawnSlices - 1;
-			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)';
-			drawRow(canvasSlice[toDraw[i].i].ctx, curRow, nbChannels, pattern);
-			drawnSlices += norm;
-		}
-
-		patternTime.current = performance.now() - startTime;
-		if (patternTime.initial !== 0 && patternTime.current > patternTime.max) patternTime.max = patternTime.current;
-		else if (patternTime.initial === 0) patternTime.initial = patternTime.current;
-	} else {
-		if (patternTime.initial !== 0 && !alreadyHiddenOnce) {
-			const trackerTime = player.value.currentPlayingNode.getProcessTime();
-
-			if (patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + patternTime.max > MAX_TIME_PER_ROW) {
-				alreadyHiddenOnce = true;
-				togglePattern();
-				return;
+				debug(sli);
 			}
-		}
+			let logqueue = [];
+			for (let i = 0; i < halfbuf; i++) {
+				const newRow = sli.drawStart + i;
 
-		patternTime = { 'current': 0, 'max': 0, 'initial': 0 };
+				let temp2 = function() {
+					return {
+						//'newRow > lower': newRow > lower,
+						//'newRow < upper': newRow < upper,
+						'sli.drawn.top < newRow': sli.drawn.top <= newRow,
+						'sli.drawn.bottom <= newRow': sli.drawn.bottom >= newRow,
+					};
+				};
+				let temp1 = function() {
+					let a = temp2();
+					//return a['newRow < upper'] || a['newRow > lower'] || a['sli.drawn.bottom <= newRow'] || a['sli.drawn.top < newRow'];
+					return a['sli.drawn.bottom <= newRow'] && a['sli.drawn.top < newRow'];
+				};
 
-		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.clearRect(0, 0, canvasSlice[i].ref.width, canvasSlice[i].ref.height);
-			drawRow(canvasSlice[i].ctx, curRow, nbChannels, pattern);
-			canvasSlice[i].data.slicePos = i;
-			canvasSlice[i].data.position = 0;
-			canvasSlice[i].data.offest = row * CHAR_HEIGHT;
-			canvasSlice[i].data.row = row - halfbuf + i;
-			canvasSlice[i].data.pattern = pattern;
-			canvasSlice[i].ref.style.transform = 'translateY(' + (canvasSlice[i].data.offest) + 'px)';
-			canvasSlice[i].data.offest = canvasSlice[i].data.offest - CHAR_HEIGHT;
-		}
+				logqueue.push({ temp1: temp1(), temp2: temp2(), 'newRow': newRow, 'lower': lower, 'upper': upper, 'sli.drawn.top': sli.drawn.top, 'sli.drawn.bottom': sli.drawn.bottom });
+
+				if (temp1()) continue;
+				if (sli.drawn.top > newRow) sli.drawn.top = newRow;
+				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;
+
+				drawRow(sli, newRow, pattern, (2 * CHAR_WIDTH), i * CHAR_HEIGHT + ROW_OFFSET_Y);
+			}
+			console.table(logqueue);
+		});
+		//debug_playPause();
+	} else {
+		slices.forEach((sli, i) => {
+			sli.drawStart = curRow;
+			sli.vPos = halfbuf * (i + 1);
+			sli.transform.y = -newDisplayTanslalation;
+			sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)';
+			sli.drawn = {
+				top: 0xFFFFFFFF,
+				bottom: -0xFFFFFFFF,
+				left: -0xFFFFFFFF,
+				right: -0xFFFFFFFF,
+			};
+
+			sli.ctx.fillStyle = colours.background;
+			sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
+			sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * curRow);
+
+			for (let itter = 0; itter < halfbuf; itter++) {
+				if (sli.drawn.top > curRow) sli.drawn.top = curRow;
+				if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
+				drawRow(sli, curRow, pattern, (2 * CHAR_WIDTH), itter * CHAR_HEIGHT + ROW_OFFSET_Y);
+				curRow++;
+				if (curRow > lower) break;
+			}
+			debug(sli);
+		});
 	}
 
-	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + ( -(row * CHAR_HEIGHT ) ) + 'px)';
+	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + newDisplayTanslalation + 'px)';
 
 	lastDrawnRow = row;
 	lastPattern = pattern;
 }
 
-function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) {
+function drawRow(slice: CanvasDisplay, row: 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;
 	const spacer = 11;
@@ -387,8 +423,7 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 	let volume = '';
 	let fx = '';
 	let op = '';
-	for (let channel = 0; channel < channels; channel++) {
-		if (channel > maxChannelLimit) break;
+	for (let channel = 0; channel < slice.channels; channel++) {
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 
 		seperators += '|' + space.repeat( spacer + 2 );
@@ -401,25 +436,23 @@ function drawRow(ctx: CanvasRenderingContext2D, row: number, channels: number, p
 
 	//console.debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
 
-	ctx.drawImage( numberRowCanvas, 0, -(CHAR_HEIGHT * row) );
+	slice.ctx.fillStyle = colours.foreground.default;
+	slice.ctx.fillText(seperators, drawX, drawY);
 
-	ctx.fillStyle = colours.foreground.default;
-	ctx.fillText(seperators, drawX, drawY);
+	slice.ctx.fillStyle = colours.foreground.default;
+	slice.ctx.fillText(note, drawX + CHAR_WIDTH, drawY);
 
-	ctx.fillStyle = colours.foreground.default;
-	ctx.fillText(note, drawX + CHAR_WIDTH, drawY);
+	slice.ctx.fillStyle = colours.foreground.instr;
+	slice.ctx.fillText(instr, drawX + CHAR_WIDTH * 5, drawY);
 
-	ctx.fillStyle = colours.foreground.instr;
-	ctx.fillText(instr, drawX + CHAR_WIDTH * 5, drawY);
+	slice.ctx.fillStyle = colours.foreground.volume;
+	slice.ctx.fillText(volume, drawX + CHAR_WIDTH * 7, drawY);
 
-	ctx.fillStyle = colours.foreground.volume;
-	ctx.fillText(volume, drawX + CHAR_WIDTH * 7, drawY);
+	slice.ctx.fillStyle = colours.foreground.fx;
+	slice.ctx.fillText(fx, drawX + CHAR_WIDTH * 11, drawY);
 
-	ctx.fillStyle = colours.foreground.fx;
-	ctx.fillText(fx, drawX + CHAR_WIDTH * 11, drawY);
-
-	ctx.fillStyle = colours.foreground.operant;
-	ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
+	slice.ctx.fillStyle = colours.foreground.operant;
+	slice.ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
 
 	return true;
 }
@@ -434,7 +467,7 @@ function display(skipOptimizationChecks = false) {
 
 	if (firstFrame) {
 		// Changing it to false should enable pattern display by default.
-		patternHide.value = true;
+		patternHide.value = false;
 		handleScrollBarEnable();
 		firstFrame = false;
 	}
@@ -561,6 +594,7 @@ onDeactivated(() => {
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;
+			display: none;
 		}
 
 		.patternShadowBottom {
@@ -572,6 +606,7 @@ onDeactivated(() => {
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;
+			display: none;
 		}
 
 		.pattern_hide {

From 61f01339185194c4f21d907937b6a2b90e59a009 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 26 Jun 2025 13:23:48 +0300
Subject: [PATCH 15/40] [frontend] Fixed overdraw prevention in SkModPlayer

---
 .../frontend/src/components/SkModPlayer.vue   | 29 +++++--------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 791b6a0895..3b3495945e 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -327,7 +327,7 @@ function drawSlices(skipOptimizationChecks = false) {
 		const norm = 1 - 2 * rowDir;
 		const oneAndHalfBuf = halfbuf * 3;
 
-		debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);
+		//debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);
 
 		slices.forEach((sli) => {
 			sli.vPos -= rowDif;
@@ -347,35 +347,17 @@ function drawSlices(skipOptimizationChecks = false) {
 				sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
 				sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * sli.drawStart);
 
-				debug(sli);
+				//debug(sli);
 			}
-			let logqueue = [];
 			for (let i = 0; i < halfbuf; i++) {
 				const newRow = sli.drawStart + i;
 
-				let temp2 = function() {
-					return {
-						//'newRow > lower': newRow > lower,
-						//'newRow < upper': newRow < upper,
-						'sli.drawn.top < newRow': sli.drawn.top <= newRow,
-						'sli.drawn.bottom <= newRow': sli.drawn.bottom >= newRow,
-					};
-				};
-				let temp1 = function() {
-					let a = temp2();
-					//return a['newRow < upper'] || a['newRow > lower'] || a['sli.drawn.bottom <= newRow'] || a['sli.drawn.top < newRow'];
-					return a['sli.drawn.bottom <= newRow'] && a['sli.drawn.top < newRow'];
-				};
-
-				logqueue.push({ temp1: temp1(), temp2: temp2(), 'newRow': newRow, 'lower': lower, 'upper': upper, 'sli.drawn.top': sli.drawn.top, 'sli.drawn.bottom': sli.drawn.bottom });
-
-				if (temp1()) continue;
+				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) continue;
 				if (sli.drawn.top > newRow) sli.drawn.top = newRow;
 				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;
 
 				drawRow(sli, newRow, pattern, (2 * CHAR_WIDTH), i * CHAR_HEIGHT + ROW_OFFSET_Y);
 			}
-			console.table(logqueue);
 		});
 		//debug_playPause();
 	} else {
@@ -402,7 +384,7 @@ function drawSlices(skipOptimizationChecks = false) {
 				curRow++;
 				if (curRow > lower) break;
 			}
-			debug(sli);
+			//debug(sli);
 		});
 	}
 
@@ -436,6 +418,9 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2
 
 	//console.debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
 
+	//slice.ctx.fillStyle = '#ff00ff88';
+	//slice.ctx.fillRect(0, drawY - CHAR_HEIGHT, 512, CHAR_HEIGHT);
+
 	slice.ctx.fillStyle = colours.foreground.default;
 	slice.ctx.fillText(seperators, drawX, drawY);
 

From e28131cbc4dba0816d11c9f212aaa7c698f6027f Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Mon, 30 Jun 2025 13:47:21 +0300
Subject: [PATCH 16/40] [frontend] Fix off by one error  in number row,, rename
 some constants.

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

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 3b3495945e..d1c00423ae 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -58,9 +58,9 @@ import { isTouchUsing } from '@/utility/touch.js';
 import { prefer } from '@/preferences.js';
 
 const colours = {
-	background: '#ffffff',
+	background: '#000000',
 	foreground: {
-		default: '#000000',
+		default: '#ffffff',
 		quarter: '#ffff00',
 		instr: '#80e0ff',
 		volume: '#80ff80',
@@ -74,6 +74,11 @@ const CHAR_HEIGHT = 12;
 const ROW_OFFSET_Y = 10;
 const MAX_TIME_SPENT = 50;
 const MAX_TIME_PER_ROW = 15;
+const MAX_ROW_NUMBERS = 0xFF + 1;
+const ROW_BUFFER = 26;
+// It would be a great option for users to set themselves.
+const MAX_CHANNEL_LIMIT = 0xFF;
+const HALF_BUFFER = Math.floor(ROW_BUFFER / 2);
 
 const props = defineProps<{
 	module: Misskey.entities.DriveFile
@@ -110,17 +115,12 @@ let patternScrollSliderShow = ref(false);
 let patternScrollSliderPos = ref(0);
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
-const maxRowNumbers = 0xFF;
-const rowBuffer = 26;
-// It would be a great option for users to set themselves.
-const maxChannelLimit = 0xFF;
-const halfbuf = Math.floor(rowBuffer / 2);
 let buffer = null;
 let isSeeking = false;
 let firstFrame = true;
 let lastPattern = -1;
 let lastDrawnRow = -1;
-let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, maxRowNumbers * CHAR_HEIGHT + 1);
+let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, MAX_ROW_NUMBERS * CHAR_HEIGHT + 1);
 let alreadyHiddenOnce = false;
 let slices: CanvasDisplay[] = [];
 
@@ -156,7 +156,7 @@ function bakeNumberRow() {
 	ctx.fillStyle = colours.background;
 	ctx.fillRect( 0, 0, numberRowCanvas.width, numberRowCanvas.height );
 
-	for (let i = 0; i < maxRowNumbers; i++) {
+	for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
 		let rowText = i.toString(16);
 		if (rowText.length === 1) rowText = '0' + rowText;
 
@@ -191,10 +191,10 @@ function setupCanvas() {
 		let nbChannels = 0;
 		if (player.value.currentPlayingNode) {
 			nbChannels = player.value.currentPlayingNode.nbChannels;
-			nbChannels = nbChannels > maxChannelLimit ? maxChannelLimit : nbChannels;
+			nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
 		}
-		sliceWidth = 12 + 84 * nbChannels + 2;
-		sliceHeight = halfbuf * CHAR_HEIGHT;
+		sliceWidth = numberRowCanvas.width + (14 * CHAR_WIDTH) * nbChannels + 2;
+		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
 		setupSlice(sliceCanvas1, nbChannels);
 		setupSlice(sliceCanvas2, nbChannels);
 		setupSlice(sliceCanvas3, nbChannels);
@@ -306,7 +306,7 @@ function togglePattern() {
 }
 
 function drawSlices(skipOptimizationChecks = false) {
-	if (rowBuffer <= 0) {
+	if (ROW_BUFFER <= 0) {
 		lastDrawnRow = player.value.getPattern();
 		lastPattern = player.value.getRow();
 		return;
@@ -314,10 +314,10 @@ function drawSlices(skipOptimizationChecks = false) {
 
 	const pattern = player.value.getPattern();
 	const row = player.value.getRow();
-	const lower = row + halfbuf;
-	const upper = row - halfbuf;
+	const lower = row + HALF_BUFFER;
+	const upper = row - HALF_BUFFER;
 	const newDisplayTanslalation = -row * CHAR_HEIGHT;
-	let curRow = row - halfbuf;
+	let curRow = row - HALF_BUFFER;
 
 	if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
 		const rowDif = row - lastDrawnRow;
@@ -325,7 +325,7 @@ function drawSlices(skipOptimizationChecks = false) {
 		const rowDir = !isRowDirPos as unknown as number;
 		const rowDirInv = 1 - 1 * rowDir;
 		const norm = 1 - 2 * rowDir;
-		const oneAndHalfBuf = halfbuf * 3;
+		const oneAndHalfBuf = HALF_BUFFER * 3;
 
 		//debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);
 
@@ -349,7 +349,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 				//debug(sli);
 			}
-			for (let i = 0; i < halfbuf; i++) {
+			for (let i = 0; i < HALF_BUFFER; i++) {
 				const newRow = sli.drawStart + i;
 
 				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) continue;
@@ -363,7 +363,7 @@ function drawSlices(skipOptimizationChecks = false) {
 	} else {
 		slices.forEach((sli, i) => {
 			sli.drawStart = curRow;
-			sli.vPos = halfbuf * (i + 1);
+			sli.vPos = HALF_BUFFER * (i + 1);
 			sli.transform.y = -newDisplayTanslalation;
 			sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)';
 			sli.drawn = {
@@ -377,7 +377,7 @@ function drawSlices(skipOptimizationChecks = false) {
 			sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
 			sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * curRow);
 
-			for (let itter = 0; itter < halfbuf; itter++) {
+			for (let itter = 0; itter < HALF_BUFFER; itter++) {
 				if (sli.drawn.top > curRow) sli.drawn.top = curRow;
 				if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
 				drawRow(sli, curRow, pattern, (2 * CHAR_WIDTH), itter * CHAR_HEIGHT + ROW_OFFSET_Y);
@@ -406,6 +406,7 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2
 	let fx = '';
 	let op = '';
 	for (let channel = 0; channel < slice.channels; channel++) {
+		if (channel > 9) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 
 		seperators += '|' + space.repeat( spacer + 2 );
@@ -489,13 +490,8 @@ function handleScrollBarEnable() {
 	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
 	if (patternScrollSliderShow.value !== true) return;
 
-	if (!sliceDisplay.value) return;
-	if (!sliceDisplay.value.parentElement) return;
-	if (firstFrame) {
-		patternScrollSliderShow.value = (12 + 84 * player.value.getPatternNumRows(player.value.getPattern()) + 2 > sliceDisplay.value.parentElement.offsetWidth);
-	} else {
-		patternScrollSliderShow.value = (sliceWidth > sliceDisplay.value.parentElement.offsetWidth);
-	}
+	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
+	patternScrollSliderShow.value = (sliceWidth > sliceDisplay.value.parentElement.offsetWidth);
 }
 
 watch(patternScrollSliderPos, () => {

From 8646f3544af0b8313ca2b278c9889c0dda336f83 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 2 Jul 2025 14:01:40 +0300
Subject: [PATCH 17/40] [frontend] SkModPlayer cull channels that aren't
 visible in the view.

---
 .../frontend/src/components/SkModPlayer.vue   | 72 ++++++++++++++-----
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index d1c00423ae..f6d6005ed9 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 
 <div v-else :class="$style.mod_player_enabled">
-	<div :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
+	<div ref="patternDisplay" :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
 		<div v-if="patternHide" :class="$style.pattern_hide">
 			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
 			<span>{{ i18n.ts.clickToShow }}</span>
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<i class="ph-stop ph-bold ph-lg"></i>
 		</button>
 		<input ref="progress" v-model="position" :class="$style.progress" type="range" min="0" max="1" step="0.1" @mousedown="initSeek()" @mouseup="performSeek()"/>
-		<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.1"/>
+		<input v-model="player.context.gain.value" type="range" min="0" max="1" step="0.01"/>
 		<a :class="$style.download" :title="i18n.ts.download" :href="module.url" :download="module.name" target="_blank">
 			<i class="ph-download ph-bold ph-lg"></i>
 		</a>
@@ -72,6 +72,7 @@ const colours = {
 const CHAR_WIDTH = 6;
 const CHAR_HEIGHT = 12;
 const ROW_OFFSET_Y = 10;
+const CHANNEL_WIDTH = CHAR_WIDTH * 14;
 const MAX_TIME_SPENT = 50;
 const MAX_TIME_PER_ROW = 15;
 const MAX_ROW_NUMBERS = 0xFF + 1;
@@ -87,7 +88,7 @@ const props = defineProps<{
 interface CanvasDisplay {
 	ctx: CanvasRenderingContext2D,
 	html: HTMLCanvasElement,
-	drawn: { top: number, bottom: number, left: number, right: number },
+	drawn: { top: number, bottom: number },
 	range: { top: number, bottom: number },
 	vPos: number,
 	transform: { x: number, y: number },
@@ -113,8 +114,13 @@ let position = ref(0);
 let patternScrollSlider = ref<HTMLProgressElement>();
 let patternScrollSliderShow = ref(false);
 let patternScrollSliderPos = ref(0);
+let patternDisplay = ref();
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
+let suppressScrollSliderWatcher = false;
+let displayScrollPos = 0;
+let currentColumn = 0;
+let maxChannelsInView = 10;
 let buffer = null;
 let isSeeking = false;
 let firstFrame = true;
@@ -174,7 +180,7 @@ function setupSlice(r: Ref, channels: number) {
 	let slice: CanvasDisplay = {
 		ctx: chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
 		html: chtml,
-		drawn: { top: 0, bottom: 0, left: 0, right: 0 },
+		drawn: { top: 0, bottom: 0 },
 		range: { top: -0xFFFFFFFF, bottom: -0xFFFFFFFF },
 		vPos: -0xFFFFFFFF,
 		channels,
@@ -193,7 +199,7 @@ function setupCanvas() {
 			nbChannels = player.value.currentPlayingNode.nbChannels;
 			nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
 		}
-		sliceWidth = numberRowCanvas.width + (14 * CHAR_WIDTH) * nbChannels + 2;
+		sliceWidth = numberRowCanvas.width + CHANNEL_WIDTH * nbChannels + 2;
 		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
 		setupSlice(sliceCanvas1, nbChannels);
 		setupSlice(sliceCanvas2, nbChannels);
@@ -213,7 +219,6 @@ onMounted(() => {
 			player.value.play(buffer);
 			progress.value!.max = player.value.duration();
 			bakeNumberRow();
-			//populateCanvasSlices();
 			setupCanvas();
 			display(true);
 		} catch (err) {
@@ -223,6 +228,10 @@ onMounted(() => {
 	}).catch((error) => {
 		console.error(error);
 	});
+	if (patternDisplay.value) {
+		let observer = new ResizeObserver(resizeHandler);
+		observer.observe(patternDisplay.value);
+	}
 });
 
 function playPause() {
@@ -306,6 +315,7 @@ function togglePattern() {
 }
 
 function drawSlices(skipOptimizationChecks = false) {
+	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 	if (ROW_BUFFER <= 0) {
 		lastDrawnRow = player.value.getPattern();
 		lastPattern = player.value.getRow();
@@ -339,8 +349,6 @@ function drawSlices(skipOptimizationChecks = false) {
 				sli.drawn = {
 					top: 0xFFFFFFFF,
 					bottom: -0xFFFFFFFF,
-					left: -0xFFFFFFFF,
-					right: -0xFFFFFFFF,
 				};
 
 				sli.ctx.fillStyle = colours.background;
@@ -369,8 +377,6 @@ function drawSlices(skipOptimizationChecks = false) {
 			sli.drawn = {
 				top: 0xFFFFFFFF,
 				bottom: -0xFFFFFFFF,
-				left: -0xFFFFFFFF,
-				right: -0xFFFFFFFF,
 			};
 
 			sli.ctx.fillStyle = colours.background;
@@ -398,6 +404,7 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2
 	if (!player.value.currentPlayingNode) return false;
 	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
 	const spacer = 11;
+	const skipSpacer = spacer + 3;
 	const space = ' ';
 	let seperators = '';
 	let note = '';
@@ -405,8 +412,18 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2
 	let volume = '';
 	let fx = '';
 	let op = '';
+
 	for (let channel = 0; channel < slice.channels; channel++) {
-		if (channel > 9) break;
+		if (channel < currentColumn) {
+			seperators += space.repeat( skipSpacer );
+			note += space.repeat( skipSpacer );
+			instr += space.repeat( skipSpacer );
+			volume += space.repeat( skipSpacer );
+			fx += space.repeat( skipSpacer );
+			op += space.repeat( skipSpacer );
+			continue;
+		}
+		if (channel === maxChannelsInView + currentColumn) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 
 		seperators += '|' + space.repeat( spacer + 2 );
@@ -419,8 +436,8 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2
 
 	//console.debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
 
-	//slice.ctx.fillStyle = '#ff00ff88';
-	//slice.ctx.fillRect(0, drawY - CHAR_HEIGHT, 512, CHAR_HEIGHT);
+	//slice.ctx.fillStyle = '#00ffff88';
+	//slice.ctx.fillRect(0, drawY - 10, sliceWidth, CHAR_HEIGHT);
 
 	slice.ctx.fillStyle = colours.foreground.default;
 	slice.ctx.fillText(seperators, drawX, drawY);
@@ -466,17 +483,29 @@ function display(skipOptimizationChecks = false) {
 	drawSlices(skipOptimizationChecks);
 }
 
-let suppressScrollSliderWatcher = false;
+function forceUpdateDisplay() {
+	const noNode = !player.value.currentPlayingNode;
+	if (noNode) player.value.play(buffer);
+	if (!patternHide.value) display(true);
+	if (noNode) player.value.togglePause();
+}
 
 function scrollHandler() {
 	suppressScrollSliderWatcher = true;
 
-	if (!patternScrollSlider.value) return;
 	if (!sliceDisplay.value) return;
 	if (!sliceDisplay.value.parentElement) return;
 
-	patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * 100;
-	patternScrollSlider.value.style.opacity = '1';
+	if (patternScrollSlider.value) {
+		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * 100;
+		patternScrollSlider.value.style.opacity = '1';
+	}
+	displayScrollPos = sliceDisplay.value.parentElement.scrollLeft;
+	const newColumn = Math.trunc((displayScrollPos - numberRowCanvas.width) / CHANNEL_WIDTH);
+	if (newColumn !== currentColumn) {
+		currentColumn = newColumn;
+		forceUpdateDisplay();
+	}
 }
 
 function scrollEndHandle() {
@@ -495,13 +524,20 @@ function handleScrollBarEnable() {
 }
 
 watch(patternScrollSliderPos, () => {
-	if (suppressScrollSliderWatcher) return;
 	if (!sliceDisplay.value) return;
 	if (!sliceDisplay.value.parentElement) return;
+	if (suppressScrollSliderWatcher) return;
 
 	sliceDisplay.value.parentElement.scrollLeft = (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
 });
 
+function resizeHandler(event: ResizeObserverEntry[]) {
+	if (event[0].contentRect.width === 0) return;
+	const newView = Math.ceil(event[0].contentRect.width / CHANNEL_WIDTH) + 1;
+	if (newView > maxChannelsInView) forceUpdateDisplay();
+	maxChannelsInView = newView;
+}
+
 onDeactivated(() => {
 	stop();
 });

From 8e77e485d559318730fcd25c00b0d4ba3abaafdf Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 3 Jul 2025 14:05:05 +0300
Subject: [PATCH 18/40] [frontend] SkModPlayer micro-optimizations, fixing some
 styles.

---
 .../frontend/src/components/SkModPlayer.vue   | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index f6d6005ed9..ad20ed7e43 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 
 <div v-else :class="$style.mod_player_enabled">
-	<div ref="patternDisplay" :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
+	<div ref="patternDisplay" :style="{ height: displayHeight + 'px' }" :class="$style.pattern_display" @click="togglePattern()" @scroll="scrollHandler" @scrollend="scrollEndHandle">
 		<div v-if="patternHide" :class="$style.pattern_hide">
 			<b><i class="ph-eye ph-bold ph-lg"></i> Pattern Hidden</b>
 			<span>{{ i18n.ts.clickToShow }}</span>
@@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span :class="$style.patternShadowTop"></span>
 		<span :class="$style.patternShadowBottom"></span>
 		<div ref="sliceDisplay" :class="$style.slice_display">
+			<canvas ref="numberRowCanvas" :style="{ top: numberRowOffset + 'px' }" :class="$style.row_canvas"></canvas>
 			<canvas ref="sliceCanvas1" :class="$style.patternSlice"></canvas>
 			<canvas ref="sliceCanvas2" :class="$style.patternSlice"></canvas>
 			<canvas ref="sliceCanvas3" :class="$style.patternSlice"></canvas>
@@ -75,9 +76,9 @@ const ROW_OFFSET_Y = 10;
 const CHANNEL_WIDTH = CHAR_WIDTH * 14;
 const MAX_TIME_SPENT = 50;
 const MAX_TIME_PER_ROW = 15;
-const MAX_ROW_NUMBERS = 0xFF + 1;
-const ROW_BUFFER = 26;
+const MAX_ROW_NUMBERS = 0x100;
 // It would be a great option for users to set themselves.
+const ROW_BUFFER = 26;
 const MAX_CHANNEL_LIMIT = 0xFF;
 const HALF_BUFFER = Math.floor(ROW_BUFFER / 2);
 
@@ -104,9 +105,12 @@ let hide = ref((prefer.s.nsfw === 'force') ? true : isSensitive && (prefer.s.nsf
 let patternHide = ref(false);
 let playing = ref(false);
 let sliceDisplay = ref<HTMLDivElement>();
+let numberRowCanvas = ref();
 let sliceCanvas1 = ref();
 let sliceCanvas2 = ref();
 let sliceCanvas3 = ref();
+const displayHeight = ref(ROW_BUFFER * CHAR_HEIGHT);
+const numberRowOffset = ref(HALF_BUFFER * CHAR_HEIGHT);
 let sliceWidth = 0;
 let sliceHeight = 0;
 let progress = ref<HTMLProgressElement>();
@@ -126,7 +130,6 @@ let isSeeking = false;
 let firstFrame = true;
 let lastPattern = -1;
 let lastDrawnRow = -1;
-let numberRowCanvas = new OffscreenCanvas(2 * CHAR_WIDTH + 1, MAX_ROW_NUMBERS * CHAR_HEIGHT + 1);
 let alreadyHiddenOnce = false;
 let slices: CanvasDisplay[] = [];
 
@@ -157,10 +160,13 @@ const peft = {
 };
 
 function bakeNumberRow() {
-	let ctx = numberRowCanvas.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
+	if (!numberRowCanvas.value) return;
+	numberRowCanvas.value.width = 2 * CHAR_WIDTH + 1;
+	numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
+	let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
 	ctx.font = '10px monospace';
 	ctx.fillStyle = colours.background;
-	ctx.fillRect( 0, 0, numberRowCanvas.width, numberRowCanvas.height );
+	ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );
 
 	for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
 		let rowText = i.toString(16);
@@ -177,6 +183,7 @@ function setupSlice(r: Ref, channels: number) {
 	let chtml = r.value as HTMLCanvasElement;
 	chtml.width = sliceWidth;
 	chtml.height = sliceHeight;
+	chtml.style.left = (2 * CHAR_WIDTH + 1) + 'px';
 	let slice: CanvasDisplay = {
 		ctx: chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
 		html: chtml,
@@ -199,14 +206,14 @@ function setupCanvas() {
 			nbChannels = player.value.currentPlayingNode.nbChannels;
 			nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
 		}
-		sliceWidth = numberRowCanvas.width + CHANNEL_WIDTH * nbChannels + 2;
+		sliceWidth = CHANNEL_WIDTH * nbChannels + 2;
 		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
 		setupSlice(sliceCanvas1, nbChannels);
 		setupSlice(sliceCanvas2, nbChannels);
 		setupSlice(sliceCanvas3, nbChannels);
 	} else {
 		nextTick(() => {
-			debugw('Jumped to the next tick, is Vue ok?');
+			console.warn('SkModPlayer: Jumped to the next tick, is Vue ok?');
 			setupCanvas();
 		});
 	}
@@ -353,7 +360,6 @@ function drawSlices(skipOptimizationChecks = false) {
 
 				sli.ctx.fillStyle = colours.background;
 				sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
-				sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * sli.drawStart);
 
 				//debug(sli);
 			}
@@ -364,7 +370,7 @@ function drawSlices(skipOptimizationChecks = false) {
 				if (sli.drawn.top > newRow) sli.drawn.top = newRow;
 				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;
 
-				drawRow(sli, newRow, pattern, (2 * CHAR_WIDTH), i * CHAR_HEIGHT + ROW_OFFSET_Y);
+				drawRow(sli, newRow, pattern, 0, i * CHAR_HEIGHT + ROW_OFFSET_Y);
 			}
 		});
 		//debug_playPause();
@@ -381,12 +387,11 @@ function drawSlices(skipOptimizationChecks = false) {
 
 			sli.ctx.fillStyle = colours.background;
 			sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
-			sli.ctx.drawImage(numberRowCanvas, 0, -CHAR_HEIGHT * curRow);
 
 			for (let itter = 0; itter < HALF_BUFFER; itter++) {
 				if (sli.drawn.top > curRow) sli.drawn.top = curRow;
 				if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
-				drawRow(sli, curRow, pattern, (2 * CHAR_WIDTH), itter * CHAR_HEIGHT + ROW_OFFSET_Y);
+				drawRow(sli, curRow, pattern, 0, itter * CHAR_HEIGHT + ROW_OFFSET_Y);
 				curRow++;
 				if (curRow > lower) break;
 			}
@@ -400,7 +405,7 @@ function drawSlices(skipOptimizationChecks = false) {
 	lastPattern = pattern;
 }
 
-function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = (2 * CHAR_WIDTH), drawY = ROW_OFFSET_Y) {
+function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = 0, drawY = ROW_OFFSET_Y) {
 	if (!player.value.currentPlayingNode) return false;
 	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
 	const spacer = 11;
@@ -497,11 +502,11 @@ function scrollHandler() {
 	if (!sliceDisplay.value.parentElement) return;
 
 	if (patternScrollSlider.value) {
-		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * 100;
+		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / ((sliceWidth + 12) - sliceDisplay.value.parentElement.offsetWidth) * 100;
 		patternScrollSlider.value.style.opacity = '1';
 	}
 	displayScrollPos = sliceDisplay.value.parentElement.scrollLeft;
-	const newColumn = Math.trunc((displayScrollPos - numberRowCanvas.width) / CHANNEL_WIDTH);
+	const newColumn = Math.trunc((displayScrollPos) / CHANNEL_WIDTH);
 	if (newColumn !== currentColumn) {
 		currentColumn = newColumn;
 		forceUpdateDisplay();
@@ -528,7 +533,7 @@ watch(patternScrollSliderPos, () => {
 	if (!sliceDisplay.value.parentElement) return;
 	if (suppressScrollSliderWatcher) return;
 
-	sliceDisplay.value.parentElement.scrollLeft = (sliceWidth - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
+	sliceDisplay.value.parentElement.scrollLeft = ((sliceWidth + 12) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
 });
 
 function resizeHandler(event: ResizeObserverEntry[]) {
@@ -597,8 +602,15 @@ onDeactivated(() => {
 			background-color: black;
 			image-rendering: pixelated;
 
+			.row_canvas {
+				position: absolute;
+				z-index: 1;
+			}
+
 			.patternSlice {
+				position: relative;
 				image-rendering: pixelated;
+				padding-right: 12px;
 			}
 		}
 

From 6b7b96f5150464e4a5c5108b41d5c04feb9936e4 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Mon, 7 Jul 2025 18:35:03 +0300
Subject: [PATCH 19/40] [frontend] SkModPlayer made canvas size max out at 10
 channels

Also refactored CanvasDisplay interface into a class.
---
 .../frontend/src/components/SkModPlayer.vue   | 137 +++++++++---------
 1 file changed, 72 insertions(+), 65 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index ad20ed7e43..4ea1bcb328 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -81,20 +81,41 @@ const MAX_ROW_NUMBERS = 0x100;
 const ROW_BUFFER = 26;
 const MAX_CHANNEL_LIMIT = 0xFF;
 const HALF_BUFFER = Math.floor(ROW_BUFFER / 2);
+const MAX_SLICE_CHANNELS = 10;
+const MAX_SLICE_WIDTH = CHANNEL_WIDTH * MAX_SLICE_CHANNELS + 1;
 
 const props = defineProps<{
 	module: Misskey.entities.DriveFile
 }>();
 
-interface CanvasDisplay {
-	ctx: CanvasRenderingContext2D,
-	html: HTMLCanvasElement,
-	drawn: { top: number, bottom: number },
-	range: { top: number, bottom: number },
-	vPos: number,
-	transform: { x: number, y: number },
-	drawStart: number,
-	channels: number,
+class CanvasDisplay {
+	ctx: CanvasRenderingContext2D;
+	html: HTMLCanvasElement;
+	drawn: { top: number, bottom: number, completed: boolean };
+	vPos: number;
+	transform: { x: number, y: number };
+	drawStart: number;
+	constructor (
+		ctx: CanvasRenderingContext2D,
+		html: HTMLCanvasElement,
+	) {
+		this.ctx = ctx;
+		this.html = html;
+		this.drawn = { top: 0, bottom: 0, completed: false };
+		this.vPos = -0xFFFFFFFF;
+		this.transform = { x: 2 * CHAR_WIDTH + 1, y: 0 };
+		this.drawStart = 0;
+	}
+	updateStyleTransforms () {
+		this.html.style.transform = 'translate(' + this.transform.x + 'px,' + this.transform.y + 'px)';
+	}
+	resetDrawn() {
+		this.drawn = {
+			top: 0xFFFFFFFF,
+			bottom: -0xFFFFFFFF,
+			completed: false,
+		};
+	}
 }
 
 const isSensitive = props.module.isSensitive;
@@ -122,7 +143,7 @@ let patternDisplay = ref();
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 let suppressScrollSliderWatcher = false;
-let displayScrollPos = 0;
+let nbChannels = 0;
 let currentColumn = 0;
 let maxChannelsInView = 10;
 let buffer = null;
@@ -131,9 +152,11 @@ let firstFrame = true;
 let lastPattern = -1;
 let lastDrawnRow = -1;
 let alreadyHiddenOnce = false;
+let virtualCanvasWidth = 0;
 let slices: CanvasDisplay[] = [];
+//let copyBuffer = { canvas: new OffscreenCanvas(1, 1), ctx: OffscreenCanvasRenderingContext2D };
 
-const peft = {
+const PERF_MONITOR = {
 	startTime: 0,
 	patternTime: { current: 0, max: 0, initial: 0 },
 	start: function() {
@@ -143,6 +166,7 @@ const peft = {
 		this.patternTime.current = performance.now() - this.startTime;
 		if (this.patternTime.initial !== 0 && this.patternTime.current > this.patternTime.max) this.patternTime.max = this.patternTime.current;
 		else if (this.patternTime.initial === 0) this.patternTime.initial = this.patternTime.current;
+		//debug(this.patternTime.max);
 	},
 	asses: function() {
 		if (this.patternTime.initial !== 0 && !alreadyHiddenOnce) {
@@ -179,38 +203,36 @@ function bakeNumberRow() {
 	}
 }
 
-function setupSlice(r: Ref, channels: number) {
+function setupSlice(r: Ref) {
 	let chtml = r.value as HTMLCanvasElement;
 	chtml.width = sliceWidth;
 	chtml.height = sliceHeight;
-	chtml.style.left = (2 * CHAR_WIDTH + 1) + 'px';
-	let slice: CanvasDisplay = {
-		ctx: chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
-		html: chtml,
-		drawn: { top: 0, bottom: 0 },
-		range: { top: -0xFFFFFFFF, bottom: -0xFFFFFFFF },
-		vPos: -0xFFFFFFFF,
-		channels,
-		transform: { x: 0, y: 0 },
-		drawStart: 0,
-	};
+	let slice = new CanvasDisplay(
+		chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
+		chtml,
+	);
 	slice.ctx.font = '10px monospace';
 	slice.ctx.imageSmoothingEnabled = false;
 	slices.push(slice);
 }
 
+// Yes, I'm very evil.
+let updateSliceSize = function() {};
+
 function setupCanvas() {
 	if (sliceCanvas1.value && sliceCanvas2.value && sliceCanvas3.value) {
-		let nbChannels = 0;
+		nbChannels = 0;
 		if (player.value.currentPlayingNode) {
 			nbChannels = player.value.currentPlayingNode.nbChannels;
 			nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
 		}
-		sliceWidth = CHANNEL_WIDTH * nbChannels + 2;
+		virtualCanvasWidth = 13 + CHANNEL_WIDTH * nbChannels + 2;
+		sliceWidth = MAX_SLICE_WIDTH > virtualCanvasWidth ? virtualCanvasWidth : maxChannelsInView * CHANNEL_WIDTH + 1;
 		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
-		setupSlice(sliceCanvas1, nbChannels);
-		setupSlice(sliceCanvas2, nbChannels);
-		setupSlice(sliceCanvas3, nbChannels);
+		setupSlice(sliceCanvas1);
+		setupSlice(sliceCanvas2);
+		setupSlice(sliceCanvas3);
+		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth - CHANNEL_WIDTH) + 'px';
 	} else {
 		nextTick(() => {
 			console.warn('SkModPlayer: Jumped to the next tick, is Vue ok?');
@@ -333,7 +355,7 @@ function drawSlices(skipOptimizationChecks = false) {
 	const row = player.value.getRow();
 	const lower = row + HALF_BUFFER;
 	const upper = row - HALF_BUFFER;
-	const newDisplayTanslalation = -row * CHAR_HEIGHT;
+	const newDisplayTanslation = -row * CHAR_HEIGHT;
 	let curRow = row - HALF_BUFFER;
 
 	if (pattern === lastPattern && !skipOptimizationChecks && row !== lastDrawnRow) {
@@ -352,11 +374,8 @@ function drawSlices(skipOptimizationChecks = false) {
 				sli.drawStart += oneAndHalfBuf * norm;
 				sli.vPos = oneAndHalfBuf * rowDirInv;
 				sli.transform.y += (oneAndHalfBuf * CHAR_HEIGHT) * norm;
-				sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)';
-				sli.drawn = {
-					top: 0xFFFFFFFF,
-					bottom: -0xFFFFFFFF,
-				};
+				sli.updateStyleTransforms();
+				sli.resetDrawn();
 
 				sli.ctx.fillStyle = colours.background;
 				sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
@@ -373,17 +392,13 @@ function drawSlices(skipOptimizationChecks = false) {
 				drawRow(sli, newRow, pattern, 0, i * CHAR_HEIGHT + ROW_OFFSET_Y);
 			}
 		});
-		//debug_playPause();
 	} else {
 		slices.forEach((sli, i) => {
 			sli.drawStart = curRow;
 			sli.vPos = HALF_BUFFER * (i + 1);
-			sli.transform.y = -newDisplayTanslalation;
-			sli.html.style.transform = 'translateY(' + sli.transform.y + 'px)';
-			sli.drawn = {
-				top: 0xFFFFFFFF,
-				bottom: -0xFFFFFFFF,
-			};
+			sli.transform.y = -newDisplayTanslation;
+			sli.updateStyleTransforms();
+			sli.resetDrawn();
 
 			sli.ctx.fillStyle = colours.background;
 			sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
@@ -399,7 +414,7 @@ function drawSlices(skipOptimizationChecks = false) {
 		});
 	}
 
-	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + newDisplayTanslalation + 'px)';
+	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + newDisplayTanslation + 'px)';
 
 	lastDrawnRow = row;
 	lastPattern = pattern;
@@ -409,7 +424,6 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = 0,
 	if (!player.value.currentPlayingNode) return false;
 	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
 	const spacer = 11;
-	const skipSpacer = spacer + 3;
 	const space = ' ';
 	let seperators = '';
 	let note = '';
@@ -418,16 +432,7 @@ function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = 0,
 	let fx = '';
 	let op = '';
 
-	for (let channel = 0; channel < slice.channels; channel++) {
-		if (channel < currentColumn) {
-			seperators += space.repeat( skipSpacer );
-			note += space.repeat( skipSpacer );
-			instr += space.repeat( skipSpacer );
-			volume += space.repeat( skipSpacer );
-			fx += space.repeat( skipSpacer );
-			op += space.repeat( skipSpacer );
-			continue;
-		}
+	for (let channel = currentColumn; channel < nbChannels; channel++) {
 		if (channel === maxChannelsInView + currentColumn) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 
@@ -493,6 +498,11 @@ function forceUpdateDisplay() {
 	if (noNode) player.value.play(buffer);
 	if (!patternHide.value) display(true);
 	if (noNode) player.value.togglePause();
+	if (currentColumn + maxChannelsInView >= nbChannels) return;
+	slices.forEach((sli) => {
+		sli.transform.x = currentColumn * CHANNEL_WIDTH + 1 + 2 * CHAR_WIDTH + 1;
+		sli.updateStyleTransforms();
+	});
 }
 
 function scrollHandler() {
@@ -502,12 +512,12 @@ function scrollHandler() {
 	if (!sliceDisplay.value.parentElement) return;
 
 	if (patternScrollSlider.value) {
-		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / ((sliceWidth + 12) - sliceDisplay.value.parentElement.offsetWidth) * 100;
+		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * 100;
 		patternScrollSlider.value.style.opacity = '1';
 	}
-	displayScrollPos = sliceDisplay.value.parentElement.scrollLeft;
-	const newColumn = Math.trunc((displayScrollPos) / CHANNEL_WIDTH);
-	if (newColumn !== currentColumn) {
+	const newColumn = Math.trunc((sliceDisplay.value.parentElement.scrollLeft - 13) / CHANNEL_WIDTH);
+	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', maxChannelsInView, 'newColumn + MAX_SLICE_CHANNELS <= nbChannels', newColumn + maxChannelsInView <= nbChannels);
+	if (newColumn !== currentColumn && newColumn + maxChannelsInView <= nbChannels) {
 		currentColumn = newColumn;
 		forceUpdateDisplay();
 	}
@@ -525,22 +535,22 @@ function handleScrollBarEnable() {
 	if (patternScrollSliderShow.value !== true) return;
 
 	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
-	patternScrollSliderShow.value = (sliceWidth > sliceDisplay.value.parentElement.offsetWidth);
+	patternScrollSliderShow.value = (virtualCanvasWidth > sliceDisplay.value.parentElement.offsetWidth);
 }
 
 watch(patternScrollSliderPos, () => {
-	if (!sliceDisplay.value) return;
-	if (!sliceDisplay.value.parentElement) return;
-	if (suppressScrollSliderWatcher) return;
+	if (!sliceDisplay.value || !sliceDisplay.value.parentElement || suppressScrollSliderWatcher) return;
 
-	sliceDisplay.value.parentElement.scrollLeft = ((sliceWidth + 12) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
+	sliceDisplay.value.parentElement.scrollLeft = ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
 });
 
 function resizeHandler(event: ResizeObserverEntry[]) {
 	if (event[0].contentRect.width === 0) return;
 	const newView = Math.ceil(event[0].contentRect.width / CHANNEL_WIDTH) + 1;
+	//if (newView !== maxChannelsInView) updateSliceSize();
 	if (newView > maxChannelsInView) forceUpdateDisplay();
 	maxChannelsInView = newView;
+	handleScrollBarEnable();
 }
 
 onDeactivated(() => {
@@ -610,7 +620,6 @@ onDeactivated(() => {
 			.patternSlice {
 				position: relative;
 				image-rendering: pixelated;
-				padding-right: 12px;
 			}
 		}
 
@@ -623,7 +632,6 @@ onDeactivated(() => {
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;
-			display: none;
 		}
 
 		.patternShadowBottom {
@@ -635,7 +643,6 @@ onDeactivated(() => {
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;
-			display: none;
 		}
 
 		.pattern_hide {

From 9496ecc7bbed4dca049464f758302656d79947c0 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 10 Jul 2025 15:45:17 +0300
Subject: [PATCH 20/40] [frontend] SkModPlayer finally get rid of multiple
 fillText calls for part colours in favour of background blending.

Also made row number stick to the right side. :)
---
 .../frontend/src/components/SkModPlayer.vue   | 187 +++++++++++-------
 1 file changed, 112 insertions(+), 75 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 4ea1bcb328..e8de5c24a6 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -20,10 +20,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span :class="$style.patternShadowTop"></span>
 		<span :class="$style.patternShadowBottom"></span>
 		<div ref="sliceDisplay" :class="$style.slice_display">
-			<canvas ref="numberRowCanvas" :style="{ top: numberRowOffset + 'px' }" :class="$style.row_canvas"></canvas>
-			<canvas ref="sliceCanvas1" :class="$style.patternSlice"></canvas>
-			<canvas ref="sliceCanvas2" :class="$style.patternSlice"></canvas>
-			<canvas ref="sliceCanvas3" :class="$style.patternSlice"></canvas>
+			<span ref="numberRowParent" :class="$style.numberRowParent">
+				<canvas ref="numberRowCanvas" :style="{ top: numberRowOffset + 'px' }" :class="$style.row_canvas"></canvas>
+			</span>
+			<span>
+				<span ref="sliceBackground1" :class="$style.sliceBackground">
+					<canvas ref="sliceCanvas1" :class="$style.patternSlice"></canvas>
+				</span>
+				<span ref="sliceBackground2" :class="$style.sliceBackground">
+					<canvas ref="sliceCanvas2" :class="$style.patternSlice"></canvas>
+				</span>
+				<span ref="sliceBackground3" :class="$style.sliceBackground">
+					<canvas ref="sliceCanvas3" :class="$style.patternSlice"></canvas>
+				</span>
+			</span>
 		</div>
 	</div>
 	<div :class="$style.controls">
@@ -63,10 +73,6 @@ const colours = {
 	foreground: {
 		default: '#ffffff',
 		quarter: '#ffff00',
-		instr: '#80e0ff',
-		volume: '#80ff80',
-		fx: '#ff80e0',
-		operant: '#ffe080',
 	},
 };
 
@@ -91,6 +97,7 @@ const props = defineProps<{
 class CanvasDisplay {
 	ctx: CanvasRenderingContext2D;
 	html: HTMLCanvasElement;
+	background: HTMLSpanElement;
 	drawn: { top: number, bottom: number, completed: boolean };
 	vPos: number;
 	transform: { x: number, y: number };
@@ -98,16 +105,20 @@ class CanvasDisplay {
 	constructor (
 		ctx: CanvasRenderingContext2D,
 		html: HTMLCanvasElement,
+		background: HTMLSpanElement,
 	) {
 		this.ctx = ctx;
 		this.html = html;
 		this.drawn = { top: 0, bottom: 0, completed: false };
 		this.vPos = -0xFFFFFFFF;
-		this.transform = { x: 2 * CHAR_WIDTH + 1, y: 0 };
+		this.transform = { x: 0, y: 0 };
 		this.drawStart = 0;
+		this.background = background;
+		// Hacky solution to seeing raw background while the module isn't loaded yet.
+		background.style.display = 'flex';
 	}
 	updateStyleTransforms () {
-		this.html.style.transform = 'translate(' + this.transform.x + 'px,' + this.transform.y + 'px)';
+		this.background.style.transform = 'translate(' + this.transform.x + 'px,' + this.transform.y + 'px)';
 	}
 	resetDrawn() {
 		this.drawn = {
@@ -130,6 +141,10 @@ let numberRowCanvas = ref();
 let sliceCanvas1 = ref();
 let sliceCanvas2 = ref();
 let sliceCanvas3 = ref();
+let sliceBackground1 = ref();
+let sliceBackground2 = ref();
+let sliceBackground3 = ref();
+let numberRowParent = ref();
 const displayHeight = ref(ROW_BUFFER * CHAR_HEIGHT);
 const numberRowOffset = ref(HALF_BUFFER * CHAR_HEIGHT);
 let sliceWidth = 0;
@@ -154,6 +169,7 @@ let lastDrawnRow = -1;
 let alreadyHiddenOnce = false;
 let virtualCanvasWidth = 0;
 let slices: CanvasDisplay[] = [];
+let numberRowPHTML: HTMLSpanElement;
 //let copyBuffer = { canvas: new OffscreenCanvas(1, 1), ctx: OffscreenCanvasRenderingContext2D };
 
 const PERF_MONITOR = {
@@ -184,9 +200,10 @@ const PERF_MONITOR = {
 };
 
 function bakeNumberRow() {
-	if (!numberRowCanvas.value) return;
+	if (!numberRowCanvas.value && !numberRowParent.value) return;
 	numberRowCanvas.value.width = 2 * CHAR_WIDTH + 1;
 	numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
+	numberRowPHTML = numberRowParent.value;
 	let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
 	ctx.font = '10px monospace';
 	ctx.fillStyle = colours.background;
@@ -203,24 +220,26 @@ function bakeNumberRow() {
 	}
 }
 
-function setupSlice(r: Ref) {
-	let chtml = r.value as HTMLCanvasElement;
+function setupSlice(canvas: Ref, back: Ref) {
+	let backgorund = back.value as HTMLSpanElement;
+	let chtml = canvas.value as HTMLCanvasElement;
 	chtml.width = sliceWidth;
 	chtml.height = sliceHeight;
 	let slice = new CanvasDisplay(
 		chtml.getContext('2d', { alpha: false, desynchronized: false }) as CanvasRenderingContext2D,
 		chtml,
+		backgorund,
 	);
 	slice.ctx.font = '10px monospace';
 	slice.ctx.imageSmoothingEnabled = false;
 	slices.push(slice);
 }
 
-// Yes, I'm very evil.
-let updateSliceSize = function() {};
-
 function setupCanvas() {
-	if (sliceCanvas1.value && sliceCanvas2.value && sliceCanvas3.value) {
+	if (
+		sliceCanvas1.value && sliceCanvas2.value && sliceCanvas3.value &&
+		sliceBackground1.value && sliceCanvas2.value && sliceCanvas3.value
+	) {
 		nbChannels = 0;
 		if (player.value.currentPlayingNode) {
 			nbChannels = player.value.currentPlayingNode.nbChannels;
@@ -229,9 +248,9 @@ function setupCanvas() {
 		virtualCanvasWidth = 13 + CHANNEL_WIDTH * nbChannels + 2;
 		sliceWidth = MAX_SLICE_WIDTH > virtualCanvasWidth ? virtualCanvasWidth : maxChannelsInView * CHANNEL_WIDTH + 1;
 		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
-		setupSlice(sliceCanvas1);
-		setupSlice(sliceCanvas2);
-		setupSlice(sliceCanvas3);
+		setupSlice(sliceCanvas1, sliceBackground1);
+		setupSlice(sliceCanvas2, sliceBackground2);
+		setupSlice(sliceCanvas3, sliceBackground3);
 		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth - CHANNEL_WIDTH) + 'px';
 	} else {
 		nextTick(() => {
@@ -382,17 +401,24 @@ function drawSlices(skipOptimizationChecks = false) {
 
 				//debug(sli);
 			}
+			let patternText: string[] = [];
 			for (let i = 0; i < HALF_BUFFER; i++) {
 				const newRow = sli.drawStart + i;
 
-				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) continue;
+				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) {
+					patternText.push('');
+					continue;
+				}
 				if (sli.drawn.top > newRow) sli.drawn.top = newRow;
 				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;
 
-				drawRow(sli, newRow, pattern, 0, i * CHAR_HEIGHT + ROW_OFFSET_Y);
+				patternText.push(rowText(sli, newRow, pattern));
+				//drawRow(sli, newRow, pattern, 0, i * CHAR_HEIGHT + ROW_OFFSET_Y);
 			}
+			drawText(sli, patternText);
 		});
 	} else {
+		numberRowPHTML.style.maxHeight = ((player.value.getPatternNumRows(pattern) + HALF_BUFFER) * CHAR_HEIGHT) + 'px';
 		slices.forEach((sli, i) => {
 			sli.drawStart = curRow;
 			sli.vPos = HALF_BUFFER * (i + 1);
@@ -403,13 +429,16 @@ function drawSlices(skipOptimizationChecks = false) {
 			sli.ctx.fillStyle = colours.background;
 			sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
 
+			let patternText: string[] = [];
+
 			for (let itter = 0; itter < HALF_BUFFER; itter++) {
 				if (sli.drawn.top > curRow) sli.drawn.top = curRow;
 				if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
-				drawRow(sli, curRow, pattern, 0, itter * CHAR_HEIGHT + ROW_OFFSET_Y);
+				patternText.push(rowText(sli, curRow, pattern));
 				curRow++;
 				if (curRow > lower) break;
 			}
+			drawText(sli, patternText);
 			//debug(sli);
 		});
 	}
@@ -420,52 +449,24 @@ function drawSlices(skipOptimizationChecks = false) {
 	lastPattern = pattern;
 }
 
-function drawRow(slice: CanvasDisplay, row: number, pattern: number, drawX = 0, drawY = ROW_OFFSET_Y) {
-	if (!player.value.currentPlayingNode) return false;
-	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return false;
-	const spacer = 11;
-	const space = ' ';
-	let seperators = '';
-	let note = '';
-	let instr = '';
-	let volume = '';
-	let fx = '';
-	let op = '';
+function rowText(slice: CanvasDisplay, row: number, pattern: number) : string {
+	if (!player.value.currentPlayingNode) return '';
+	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return '';
+	let retrunStr = '|';
 
 	for (let channel = currentColumn; channel < nbChannels; channel++) {
 		if (channel === maxChannelsInView + currentColumn) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
-
-		seperators += '|' + space.repeat( spacer + 2 );
-		note += part.substring(0, 3) + space.repeat( spacer );
-		instr += part.substring(4, 6) + space.repeat( spacer + 1 );
-		volume += part.substring(6, 9) + space.repeat( spacer );
-		fx += part.substring(10, 11) + space.repeat( spacer + 2 );
-		op += part.substring(11, 13) + space.repeat( spacer + 1 );
+		retrunStr += part + '|';
 	}
+	return retrunStr;
+}
 
-	//console.debug( 'seperators: ' + seperators + '\nnote: ' + note + '\ninstr: ' + instr + '\nvolume: ' + volume + '\nfx: ' + fx + '\nop: ' + op);
-
-	//slice.ctx.fillStyle = '#00ffff88';
-	//slice.ctx.fillRect(0, drawY - 10, sliceWidth, CHAR_HEIGHT);
-
+function drawText(slice: CanvasDisplay, text: string[], drawX = 0, drawY = ROW_OFFSET_Y) {
 	slice.ctx.fillStyle = colours.foreground.default;
-	slice.ctx.fillText(seperators, drawX, drawY);
-
-	slice.ctx.fillStyle = colours.foreground.default;
-	slice.ctx.fillText(note, drawX + CHAR_WIDTH, drawY);
-
-	slice.ctx.fillStyle = colours.foreground.instr;
-	slice.ctx.fillText(instr, drawX + CHAR_WIDTH * 5, drawY);
-
-	slice.ctx.fillStyle = colours.foreground.volume;
-	slice.ctx.fillText(volume, drawX + CHAR_WIDTH * 7, drawY);
-
-	slice.ctx.fillStyle = colours.foreground.fx;
-	slice.ctx.fillText(fx, drawX + CHAR_WIDTH * 11, drawY);
-
-	slice.ctx.fillStyle = colours.foreground.operant;
-	slice.ctx.fillText(op, drawX + CHAR_WIDTH * 12, drawY);
+	text.forEach((str, i) => {
+		if (str.length !== 0) slice.ctx.fillText(str, drawX, drawY + CHAR_HEIGHT * i);
+	});
 
 	return true;
 }
@@ -500,7 +501,7 @@ function forceUpdateDisplay() {
 	if (noNode) player.value.togglePause();
 	if (currentColumn + maxChannelsInView >= nbChannels) return;
 	slices.forEach((sli) => {
-		sli.transform.x = currentColumn * CHANNEL_WIDTH + 1 + 2 * CHAR_WIDTH + 1;
+		sli.transform.x = currentColumn * CHANNEL_WIDTH + 1;
 		sli.updateStyleTransforms();
 	});
 }
@@ -561,6 +562,15 @@ onDeactivated(() => {
 
 <style lang="scss" module>
 
+html {
+		--SkModPlayer-default: #ffffff;
+		--SkModPlayer-quarter: #ffff00;
+		--SkModPlayer-instr: #80e0ff;
+		--SkModPlayer-volume: #80ff80;
+		--SkModPlayer-fx: #ff80e0;
+		--SkModPlayer-operant: #ffe080;
+}
+
 .hide {
 	border-radius: var(--MI-radius-sm) !important;
 	background-color: black !important;
@@ -593,11 +603,12 @@ onDeactivated(() => {
 
 	> .pattern_display {
 		width: 100%;
-		height: 100%;
 		overflow-x: scroll;
 		overflow-y: hidden;
 		background-color: black;
 		text-align: center;
+		flex-flow: column;
+		display: flex;
 		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
 
 		scrollbar-width: none;
@@ -607,19 +618,46 @@ onDeactivated(() => {
 		}
 
 		.slice_display {
-			display: grid;
+			display: flex;
 			position: relative;
 			background-color: black;
 			image-rendering: pixelated;
-
-			.row_canvas {
-				position: absolute;
-				z-index: 1;
+			span {
+				.sliceBackground {
+					display: none;
+					width: fit-content;
+					height: fit-content;
+					position: relative;
+					background: repeating-linear-gradient(
+						to right,
+						var(--SkModPlayer-default) 0px calc(5 * 6px),
+						var(--SkModPlayer-instr) calc(5 * 6px) calc(7 * 6px),
+						var(--SkModPlayer-volume) calc(7 * 6px) calc(10 * 6px),
+						var(--SkModPlayer-fx) calc(10 * 6px) calc(13 * 6px),
+						var(--SkModPlayer-operant) calc(13 * 6px) calc(14 * 6px),
+					);
+					.patternSlice {
+						position: static;
+						image-rendering: pixelated;
+						mix-blend-mode: multiply;
+					}
+				}
 			}
-
-			.patternSlice {
-				position: relative;
-				image-rendering: pixelated;
+			.numberRowParent {
+				position: sticky;
+				right: 0;
+				z-index: 1;
+				inset: 0;
+				width: fit-content;
+				height: 200%;
+				overflow: clip;
+				background: #000000;
+				.row_canvas {
+					position: relative;
+					right: 0;
+					z-index: 1;
+					inset: 0;
+				}
 			}
 		}
 
@@ -627,7 +665,7 @@ onDeactivated(() => {
 			background: #00000080;
 			width: 100%;
 			height: calc(50% - 14px);
-			translate: -50% -100%;
+			translate: 0 -100%;
 			top: calc(50% - 14px);
 			position: absolute;
 			pointer-events: none;
@@ -638,7 +676,6 @@ onDeactivated(() => {
 			background: #00000080;
 			width: 100%;
 			height: calc(50% - 27px);
-			translate: -50% 0;
 			top: calc(50% - 2px);
 			position: absolute;
 			pointer-events: none;

From b26f777ae7f32a8b89d6f2e48a420e36ca9de818 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 10 Jul 2025 22:48:42 +0300
Subject: [PATCH 21/40] [frontend] SkModPlayer fix webkit scrolling.

---
 packages/frontend/src/components/SkModPlayer.vue | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index e8de5c24a6..84cea0693a 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -157,7 +157,6 @@ let patternScrollSliderPos = ref(0);
 let patternDisplay = ref();
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
-let suppressScrollSliderWatcher = false;
 let nbChannels = 0;
 let currentColumn = 0;
 let maxChannelsInView = 10;
@@ -170,7 +169,6 @@ let alreadyHiddenOnce = false;
 let virtualCanvasWidth = 0;
 let slices: CanvasDisplay[] = [];
 let numberRowPHTML: HTMLSpanElement;
-//let copyBuffer = { canvas: new OffscreenCanvas(1, 1), ctx: OffscreenCanvasRenderingContext2D };
 
 const PERF_MONITOR = {
 	startTime: 0,
@@ -182,7 +180,6 @@ const PERF_MONITOR = {
 		this.patternTime.current = performance.now() - this.startTime;
 		if (this.patternTime.initial !== 0 && this.patternTime.current > this.patternTime.max) this.patternTime.max = this.patternTime.current;
 		else if (this.patternTime.initial === 0) this.patternTime.initial = this.patternTime.current;
-		//debug(this.patternTime.max);
 	},
 	asses: function() {
 		if (this.patternTime.initial !== 0 && !alreadyHiddenOnce) {
@@ -385,8 +382,6 @@ function drawSlices(skipOptimizationChecks = false) {
 		const norm = 1 - 2 * rowDir;
 		const oneAndHalfBuf = HALF_BUFFER * 3;
 
-		//debug('rowDif', rowDif, 'rowDir', rowDir, 'norm', norm, 'isRowDirPos', isRowDirPos);
-
 		slices.forEach((sli) => {
 			sli.vPos -= rowDif;
 			if (sli.vPos <= 0 || sli.vPos >= oneAndHalfBuf) {
@@ -398,8 +393,6 @@ function drawSlices(skipOptimizationChecks = false) {
 
 				sli.ctx.fillStyle = colours.background;
 				sli.ctx.fillRect(0, 0, sliceWidth, sliceHeight);
-
-				//debug(sli);
 			}
 			let patternText: string[] = [];
 			for (let i = 0; i < HALF_BUFFER; i++) {
@@ -413,7 +406,6 @@ function drawSlices(skipOptimizationChecks = false) {
 				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;
 
 				patternText.push(rowText(sli, newRow, pattern));
-				//drawRow(sli, newRow, pattern, 0, i * CHAR_HEIGHT + ROW_OFFSET_Y);
 			}
 			drawText(sli, patternText);
 		});
@@ -439,7 +431,6 @@ function drawSlices(skipOptimizationChecks = false) {
 				if (curRow > lower) break;
 			}
 			drawText(sli, patternText);
-			//debug(sli);
 		});
 	}
 
@@ -507,8 +498,6 @@ function forceUpdateDisplay() {
 }
 
 function scrollHandler() {
-	suppressScrollSliderWatcher = true;
-
 	if (!sliceDisplay.value) return;
 	if (!sliceDisplay.value.parentElement) return;
 
@@ -524,9 +513,8 @@ function scrollHandler() {
 	}
 }
 
+// https://bugs.webkit.org/show_bug.cgi?id=201556
 function scrollEndHandle() {
-	suppressScrollSliderWatcher = false;
-
 	if (!patternScrollSlider.value) return;
 	patternScrollSlider.value.style.opacity = '';
 }
@@ -540,7 +528,7 @@ function handleScrollBarEnable() {
 }
 
 watch(patternScrollSliderPos, () => {
-	if (!sliceDisplay.value || !sliceDisplay.value.parentElement || suppressScrollSliderWatcher) return;
+	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
 
 	sliceDisplay.value.parentElement.scrollLeft = ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
 });

From 848d1dea8851472b517a04f05e4c6b17c45369cb Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Fri, 11 Jul 2025 15:02:11 +0300
Subject: [PATCH 22/40] [frontend] SkModPlayer fix vertical alignment on
 non-standart view heights

---
 .../frontend/src/components/SkModPlayer.vue   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 84cea0693a..45fa1928c7 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -434,7 +434,7 @@ function drawSlices(skipOptimizationChecks = false) {
 		});
 	}
 
-	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + newDisplayTanslation + 'px)';
+	if (sliceDisplay.value) sliceDisplay.value.style.transform = 'translateY(' + (newDisplayTanslation - HALF_BUFFER * CHAR_HEIGHT) + 'px)';
 
 	lastDrawnRow = row;
 	lastPattern = pattern;
@@ -557,6 +557,7 @@ html {
 		--SkModPlayer-volume: #80ff80;
 		--SkModPlayer-fx: #ff80e0;
 		--SkModPlayer-operant: #ffe080;
+		--SkModPlayer-Shadow: #00000080;
 }
 
 .hide {
@@ -592,13 +593,10 @@ html {
 	> .pattern_display {
 		width: 100%;
 		overflow-x: scroll;
-		overflow-y: hidden;
+		overflow-y: clip;
 		background-color: black;
 		text-align: center;
-		flex-flow: column;
-		display: flex;
 		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
-
 		scrollbar-width: none;
 
 		&::-webkit-scrollbar {
@@ -610,6 +608,7 @@ html {
 			position: relative;
 			background-color: black;
 			image-rendering: pixelated;
+			top: 50%;
 			span {
 				.sliceBackground {
 					display: none;
@@ -633,7 +632,6 @@ html {
 			}
 			.numberRowParent {
 				position: sticky;
-				right: 0;
 				z-index: 1;
 				inset: 0;
 				width: fit-content;
@@ -650,10 +648,10 @@ html {
 		}
 
 		.patternShadowTop {
-			background: #00000080;
+			background: var(--SkModPlayer-Shadow);
 			width: 100%;
-			height: calc(50% - 14px);
-			translate: 0 -100%;
+			height: calc(50% - 12px);
+			translate: -50% -100%;
 			top: calc(50% - 14px);
 			position: absolute;
 			pointer-events: none;
@@ -661,9 +659,10 @@ html {
 		}
 
 		.patternShadowBottom {
-			background: #00000080;
+			background: var(--SkModPlayer-Shadow);
 			width: 100%;
 			height: calc(50% - 27px);
+			translate: -50% 0%;
 			top: calc(50% - 2px);
 			position: absolute;
 			pointer-events: none;

From 7f30afd4fd8d90dc83dc5525bc63441484408dcc Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 16 Jul 2025 21:19:27 +0300
Subject: [PATCH 23/40] [frontend] SkModPlayer remove old webkit workaround for
 scrollbars Fix for channel jumps at the end of x scroll.

---
 .../frontend/src/components/SkModPlayer.vue   | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 45fa1928c7..8f69e8eb96 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<div :class="$style.controls">
-		<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" :class="$style.pattern_slider" type="range" min="0" max="100" step="0.01" style=""/>
+		<input v-if="patternScrollSliderShow" ref="patternScrollSlider" v-model="patternScrollSliderPos" :class="$style.pattern_slider" type="range" min="0" max="1" step="0.0001" style=""/>
 		<button :class="$style.play" @click="playPause()">
 			<i v-if="playing" class="ph-pause ph-bold ph-lg"></i>
 			<i v-else class="ph-play ph-bold ph-lg"></i>
@@ -89,6 +89,7 @@ const MAX_CHANNEL_LIMIT = 0xFF;
 const HALF_BUFFER = Math.floor(ROW_BUFFER / 2);
 const MAX_SLICE_CHANNELS = 10;
 const MAX_SLICE_WIDTH = CHANNEL_WIDTH * MAX_SLICE_CHANNELS + 1;
+const NUMBER_ROW_WIDTH = 2 * CHAR_WIDTH + 1;
 
 const props = defineProps<{
 	module: Misskey.entities.DriveFile
@@ -159,6 +160,8 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 let nbChannels = 0;
 let currentColumn = 0;
+let currentSlidePos = 0;
+let scrollTimerID = -1;
 let maxChannelsInView = 10;
 let buffer = null;
 let isSeeking = false;
@@ -198,7 +201,7 @@ const PERF_MONITOR = {
 
 function bakeNumberRow() {
 	if (!numberRowCanvas.value && !numberRowParent.value) return;
-	numberRowCanvas.value.width = 2 * CHAR_WIDTH + 1;
+	numberRowCanvas.value.width = NUMBER_ROW_WIDTH;
 	numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
 	numberRowPHTML = numberRowParent.value;
 	let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
@@ -242,13 +245,13 @@ function setupCanvas() {
 			nbChannels = player.value.currentPlayingNode.nbChannels;
 			nbChannels = nbChannels > MAX_CHANNEL_LIMIT ? MAX_CHANNEL_LIMIT : nbChannels;
 		}
-		virtualCanvasWidth = 13 + CHANNEL_WIDTH * nbChannels + 2;
-		sliceWidth = MAX_SLICE_WIDTH > virtualCanvasWidth ? virtualCanvasWidth : maxChannelsInView * CHANNEL_WIDTH + 1;
+		virtualCanvasWidth = NUMBER_ROW_WIDTH + CHANNEL_WIDTH * nbChannels + 2;
+		sliceWidth = MAX_SLICE_WIDTH > virtualCanvasWidth ? virtualCanvasWidth : MAX_SLICE_WIDTH;
 		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
 		setupSlice(sliceCanvas1, sliceBackground1);
 		setupSlice(sliceCanvas2, sliceBackground2);
 		setupSlice(sliceCanvas3, sliceBackground3);
-		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth - CHANNEL_WIDTH) + 'px';
+		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth) + 'px';
 	} else {
 		nextTick(() => {
 			console.warn('SkModPlayer: Jumped to the next tick, is Vue ok?');
@@ -490,9 +493,8 @@ function forceUpdateDisplay() {
 	if (noNode) player.value.play(buffer);
 	if (!patternHide.value) display(true);
 	if (noNode) player.value.togglePause();
-	if (currentColumn + maxChannelsInView >= nbChannels) return;
 	slices.forEach((sli) => {
-		sli.transform.x = currentColumn * CHANNEL_WIDTH + 1;
+		sli.transform.x = currentColumn * CHANNEL_WIDTH;
 		sli.updateStyleTransforms();
 	});
 }
@@ -502,10 +504,11 @@ function scrollHandler() {
 	if (!sliceDisplay.value.parentElement) return;
 
 	if (patternScrollSlider.value) {
-		patternScrollSliderPos.value = (sliceDisplay.value.parentElement.scrollLeft) / ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * 100;
+		patternScrollSliderPos.value = sliceDisplay.value.parentElement.scrollLeft / (virtualCanvasWidth - sliceDisplay.value.parentElement.offsetWidth);
 		patternScrollSlider.value.style.opacity = '1';
 	}
-	const newColumn = Math.trunc((sliceDisplay.value.parentElement.scrollLeft - 13) / CHANNEL_WIDTH);
+	const newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
+	currentSlidePos = sliceDisplay.value.parentElement.scrollLeft;
 	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', maxChannelsInView, 'newColumn + MAX_SLICE_CHANNELS <= nbChannels', newColumn + maxChannelsInView <= nbChannels);
 	if (newColumn !== currentColumn && newColumn + maxChannelsInView <= nbChannels) {
 		currentColumn = newColumn;
@@ -530,14 +533,19 @@ function handleScrollBarEnable() {
 watch(patternScrollSliderPos, () => {
 	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
 
-	sliceDisplay.value.parentElement.scrollLeft = ((virtualCanvasWidth - CHANNEL_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value / 100;
+	sliceDisplay.value.parentElement.scrollLeft = (virtualCanvasWidth - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value;
 });
 
 function resizeHandler(event: ResizeObserverEntry[]) {
 	if (event[0].contentRect.width === 0) return;
 	const newView = Math.ceil(event[0].contentRect.width / CHANNEL_WIDTH) + 1;
 	//if (newView !== maxChannelsInView) updateSliceSize();
-	if (newView > maxChannelsInView) forceUpdateDisplay();
+	/*
+	if (newView > maxChannelsInView) {
+		sliceDisplay.value.parentElement.scrollLeft = currentColumn * CHANNEL_WIDTH;
+		forceUpdateDisplay();
+	}
+	*/
 	maxChannelsInView = newView;
 	handleScrollBarEnable();
 }
@@ -599,10 +607,6 @@ html {
 		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
 		scrollbar-width: none;
 
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
 		.slice_display {
 			display: flex;
 			position: relative;

From 912f5eb44baca0b57f35b0ea23797d5426739421 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 16 Jul 2025 22:08:39 +0300
Subject: [PATCH 24/40] [frontend] SkModPlayer fix currentColumn not updating.

---
 packages/frontend/src/components/SkModPlayer.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 8f69e8eb96..bbbe68f390 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -160,8 +160,6 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 let nbChannels = 0;
 let currentColumn = 0;
-let currentSlidePos = 0;
-let scrollTimerID = -1;
 let maxChannelsInView = 10;
 let buffer = null;
 let isSeeking = false;
@@ -507,10 +505,10 @@ function scrollHandler() {
 		patternScrollSliderPos.value = sliceDisplay.value.parentElement.scrollLeft / (virtualCanvasWidth - sliceDisplay.value.parentElement.offsetWidth);
 		patternScrollSlider.value.style.opacity = '1';
 	}
-	const newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
-	currentSlidePos = sliceDisplay.value.parentElement.scrollLeft;
-	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', maxChannelsInView, 'newColumn + MAX_SLICE_CHANNELS <= nbChannels', newColumn + maxChannelsInView <= nbChannels);
-	if (newColumn !== currentColumn && newColumn + maxChannelsInView <= nbChannels) {
+	let newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
+	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', maxChannelsInView, 'newColumn + maxChannelsInView > nbChannels', newColumn + maxChannelsInView > nbChannels);
+	newColumn = newColumn + maxChannelsInView > nbChannels ? nbChannels - maxChannelsInView : newColumn;
+	if (newColumn !== currentColumn) {
 		currentColumn = newColumn;
 		forceUpdateDisplay();
 	}

From 046cb125f2e28b21d5e240792505f07722f3a634 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 16 Jul 2025 22:19:27 +0300
Subject: [PATCH 25/40] [frontend] SkModPlayer stop a potential infinite
 nextTick recursion.

---
 packages/frontend/src/components/SkModPlayer.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index bbbe68f390..75fa48f1fd 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -233,7 +233,7 @@ function setupSlice(canvas: Ref, back: Ref) {
 	slices.push(slice);
 }
 
-function setupCanvas() {
+function setupCanvas(r = 0) {
 	if (
 		sliceCanvas1.value && sliceCanvas2.value && sliceCanvas3.value &&
 		sliceBackground1.value && sliceCanvas2.value && sliceCanvas3.value
@@ -250,10 +250,10 @@ function setupCanvas() {
 		setupSlice(sliceCanvas2, sliceBackground2);
 		setupSlice(sliceCanvas3, sliceBackground3);
 		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth) + 'px';
-	} else {
+	} else if (r < 10) {
 		nextTick(() => {
 			console.warn('SkModPlayer: Jumped to the next tick, is Vue ok?');
-			setupCanvas();
+			setupCanvas(r + 1);
 		});
 	}
 }

From dfc2e2a9a7b69e39e8e329572d1ff5ea34273bbb Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 13:10:04 +0300
Subject: [PATCH 26/40] [frontend] SkModPlayer implement webkit scroll hack.

---
 .../frontend/src/components/SkModPlayer.vue   | 55 ++++++++++++++-----
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 75fa48f1fd..d49b0f2d58 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -160,7 +160,8 @@ const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 let nbChannels = 0;
 let currentColumn = 0;
-let maxChannelsInView = 10;
+let currentRealColumn = 0;
+let channelsInView = 10;
 let buffer = null;
 let isSeeking = false;
 let firstFrame = true;
@@ -447,7 +448,7 @@ function rowText(slice: CanvasDisplay, row: number, pattern: number) : string {
 	let retrunStr = '|';
 
 	for (let channel = currentColumn; channel < nbChannels; channel++) {
-		if (channel === maxChannelsInView + currentColumn) break;
+		if (channel === channelsInView + currentColumn) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 		retrunStr += part + '|';
 	}
@@ -497,17 +498,22 @@ function forceUpdateDisplay() {
 	});
 }
 
+let suppressSliderWatcher = false;
+let webkitTimeoutID = -1;
+
 function scrollHandler() {
-	if (!sliceDisplay.value) return;
-	if (!sliceDisplay.value.parentElement) return;
+	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
 
 	if (patternScrollSlider.value) {
-		patternScrollSliderPos.value = sliceDisplay.value.parentElement.scrollLeft / (virtualCanvasWidth - sliceDisplay.value.parentElement.offsetWidth);
+		suppressSliderWatcher = true;
+		webkitSliderHackSetup();
+		patternScrollSliderPos.value = sliceDisplay.value.parentElement.scrollLeft / ((virtualCanvasWidth - channelsInView + NUMBER_ROW_WIDTH) - sliceDisplay.value.parentElement.offsetWidth);
 		patternScrollSlider.value.style.opacity = '1';
 	}
 	let newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
-	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', maxChannelsInView, 'newColumn + maxChannelsInView > nbChannels', newColumn + maxChannelsInView > nbChannels);
-	newColumn = newColumn + maxChannelsInView > nbChannels ? nbChannels - maxChannelsInView : newColumn;
+	currentRealColumn = newColumn;
+	debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', channelsInView, 'currentRealColumn', currentRealColumn);
+	newColumn = newColumn + MAX_SLICE_CHANNELS > nbChannels ? nbChannels - MAX_SLICE_CHANNELS : newColumn;
 	if (newColumn !== currentColumn) {
 		currentColumn = newColumn;
 		forceUpdateDisplay();
@@ -515,7 +521,32 @@ function scrollHandler() {
 }
 
 // https://bugs.webkit.org/show_bug.cgi?id=201556
+function webkitSliderHack () {
+	suppressSliderWatcher = false;
+	webkitTimeoutID = -1;
+	if (!patternScrollSlider.value) return;
+	patternScrollSlider.value.style.opacity = '';
+}
+
+let webkitSliderHackSetup = function() {
+	if (webkitTimeoutID > 0) {
+		window.clearTimeout(webkitTimeoutID);
+		webkitTimeoutID = -1;
+	}
+	if (webkitTimeoutID < 0) webkitTimeoutID = window.setTimeout(webkitSliderHack);
+};
+
+let webkitDisableHack = function() {
+	if (webkitTimeoutID > 0) window.clearTimeout(webkitTimeoutID);
+	webkitTimeoutID = -2;
+	// I hope SpiderMonkey/V8 is smart enough not to call empty functions.
+	webkitDisableHack = function() {};
+	webkitSliderHackSetup = function() {};
+};
+
 function scrollEndHandle() {
+	suppressSliderWatcher = false;
+	webkitDisableHack();
 	if (!patternScrollSlider.value) return;
 	patternScrollSlider.value.style.opacity = '';
 }
@@ -524,14 +555,12 @@ function handleScrollBarEnable() {
 	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
 	if (patternScrollSliderShow.value !== true) return;
 
-	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
-	patternScrollSliderShow.value = (virtualCanvasWidth > sliceDisplay.value.parentElement.offsetWidth);
+	if (sliceDisplay.value && sliceDisplay.value.parentElement) patternScrollSliderShow.value = (virtualCanvasWidth > sliceDisplay.value.parentElement.offsetWidth);
 }
 
 watch(patternScrollSliderPos, () => {
-	if (!sliceDisplay.value || !sliceDisplay.value.parentElement) return;
-
-	sliceDisplay.value.parentElement.scrollLeft = (virtualCanvasWidth - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value;
+	if (!sliceDisplay.value || !sliceDisplay.value.parentElement || suppressSliderWatcher) return;
+	sliceDisplay.value.parentElement.scrollLeft = ((virtualCanvasWidth - channelsInView + NUMBER_ROW_WIDTH) - sliceDisplay.value.parentElement.offsetWidth) * patternScrollSliderPos.value;
 });
 
 function resizeHandler(event: ResizeObserverEntry[]) {
@@ -544,7 +573,7 @@ function resizeHandler(event: ResizeObserverEntry[]) {
 		forceUpdateDisplay();
 	}
 	*/
-	maxChannelsInView = newView;
+	channelsInView = newView;
 	handleScrollBarEnable();
 }
 

From 89d396b491d608e0ea38a681fb78b56002b4386e Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 13:43:49 +0300
Subject: [PATCH 27/40] [frontend] SkModPlayer better handling of different
 display sizes.

---
 .../frontend/src/components/SkModPlayer.vue   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index d49b0f2d58..97f31acf40 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -409,7 +409,7 @@ function drawSlices(skipOptimizationChecks = false) {
 
 				patternText.push(rowText(sli, newRow, pattern));
 			}
-			drawText(sli, patternText);
+			drawText(sli, patternText, (currentRealColumn - currentColumn) * CHANNEL_WIDTH);
 		});
 	} else {
 		numberRowPHTML.style.maxHeight = ((player.value.getPatternNumRows(pattern) + HALF_BUFFER) * CHAR_HEIGHT) + 'px';
@@ -432,7 +432,7 @@ function drawSlices(skipOptimizationChecks = false) {
 				curRow++;
 				if (curRow > lower) break;
 			}
-			drawText(sli, patternText);
+			drawText(sli, patternText, (currentRealColumn - currentColumn) * CHANNEL_WIDTH);
 		});
 	}
 
@@ -447,8 +447,8 @@ function rowText(slice: CanvasDisplay, row: number, pattern: number) : string {
 	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return '';
 	let retrunStr = '|';
 
-	for (let channel = currentColumn; channel < nbChannels; channel++) {
-		if (channel === channelsInView + currentColumn) break;
+	for (let channel = currentRealColumn; channel < nbChannels; channel++) {
+		if (channel === channelsInView + currentRealColumn) break;
 		const part = player.value.getPatternRowChannel(pattern, row, channel);
 		retrunStr += part + '|';
 	}
@@ -510,12 +510,12 @@ function scrollHandler() {
 		patternScrollSliderPos.value = sliceDisplay.value.parentElement.scrollLeft / ((virtualCanvasWidth - channelsInView + NUMBER_ROW_WIDTH) - sliceDisplay.value.parentElement.offsetWidth);
 		patternScrollSlider.value.style.opacity = '1';
 	}
-	let newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
-	currentRealColumn = newColumn;
-	debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', channelsInView, 'currentRealColumn', currentRealColumn);
-	newColumn = newColumn + MAX_SLICE_CHANNELS > nbChannels ? nbChannels - MAX_SLICE_CHANNELS : newColumn;
-	if (newColumn !== currentColumn) {
-		currentColumn = newColumn;
+	const newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
+	const correctedNewColumn = newColumn > nbChannels - MAX_SLICE_CHANNELS ? nbChannels - MAX_SLICE_CHANNELS : newColumn;
+	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', channelsInView, 'currentRealColumn', currentRealColumn);
+	if (correctedNewColumn !== currentColumn || newColumn !== currentRealColumn) {
+		currentRealColumn = newColumn;
+		currentColumn = correctedNewColumn;
 		forceUpdateDisplay();
 	}
 }
@@ -553,6 +553,7 @@ function scrollEndHandle() {
 
 function handleScrollBarEnable() {
 	patternScrollSliderShow.value = (!patternHide.value && !isTouchUsing);
+	patternScrollSliderShow.value = (!patternHide.value);
 	if (patternScrollSliderShow.value !== true) return;
 
 	if (sliceDisplay.value && sliceDisplay.value.parentElement) patternScrollSliderShow.value = (virtualCanvasWidth > sliceDisplay.value.parentElement.offsetWidth);
@@ -566,13 +567,7 @@ watch(patternScrollSliderPos, () => {
 function resizeHandler(event: ResizeObserverEntry[]) {
 	if (event[0].contentRect.width === 0) return;
 	const newView = Math.ceil(event[0].contentRect.width / CHANNEL_WIDTH) + 1;
-	//if (newView !== maxChannelsInView) updateSliceSize();
-	/*
-	if (newView > maxChannelsInView) {
-		sliceDisplay.value.parentElement.scrollLeft = currentColumn * CHANNEL_WIDTH;
-		forceUpdateDisplay();
-	}
-	*/
+	if (newView > channelsInView) forceUpdateDisplay();
 	channelsInView = newView;
 	handleScrollBarEnable();
 }

From d61b1e2910009b16dc6f6fc3bf89a0978954005c Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 14:34:51 +0300
Subject: [PATCH 28/40] [frontend] SkModPlayer fix toggleVisible completely
 breaking display.

---
 packages/frontend/src/components/SkModPlayer.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 97f31acf40..5b5d7a019e 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -247,6 +247,7 @@ function setupCanvas(r = 0) {
 		virtualCanvasWidth = NUMBER_ROW_WIDTH + CHANNEL_WIDTH * nbChannels + 2;
 		sliceWidth = MAX_SLICE_WIDTH > virtualCanvasWidth ? virtualCanvasWidth : MAX_SLICE_WIDTH;
 		sliceHeight = HALF_BUFFER * CHAR_HEIGHT;
+		slices = [];
 		setupSlice(sliceCanvas1, sliceBackground1);
 		setupSlice(sliceCanvas2, sliceBackground2);
 		setupSlice(sliceCanvas3, sliceBackground3);
@@ -342,6 +343,8 @@ function toggleVisible() {
 		lastDrawnRow = -1;
 		nextTick(() => {
 			playPause();
+			bakeNumberRow();
+			setupCanvas();
 		});
 	}
 	nextTick(() => { stop(hide.value); });

From 4ae3d7453be27099889835d2f6d5e76aeffccdaa Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 18:02:10 +0300
Subject: [PATCH 29/40] [frontend] SkModPlayer fix togglePattern not properly
 skipping optimizations.

---
 .../frontend/src/components/SkModPlayer.vue   | 53 +++----------------
 1 file changed, 7 insertions(+), 46 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 5b5d7a019e..3d50a37981 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -56,10 +56,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-const debug = console.debug;
-const debugw = console.warn;
-const debug_playPause = playPause;
-
 import { ref, nextTick, watch, onDeactivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { Ref } from 'vue';
@@ -80,8 +76,6 @@ const CHAR_WIDTH = 6;
 const CHAR_HEIGHT = 12;
 const ROW_OFFSET_Y = 10;
 const CHANNEL_WIDTH = CHAR_WIDTH * 14;
-const MAX_TIME_SPENT = 50;
-const MAX_TIME_PER_ROW = 15;
 const MAX_ROW_NUMBERS = 0x100;
 // It would be a great option for users to set themselves.
 const ROW_BUFFER = 26;
@@ -167,37 +161,10 @@ let isSeeking = false;
 let firstFrame = true;
 let lastPattern = -1;
 let lastDrawnRow = -1;
-let alreadyHiddenOnce = false;
 let virtualCanvasWidth = 0;
 let slices: CanvasDisplay[] = [];
 let numberRowPHTML: HTMLSpanElement;
 
-const PERF_MONITOR = {
-	startTime: 0,
-	patternTime: { current: 0, max: 0, initial: 0 },
-	start: function() {
-		this.startTime = performance.now();
-	},
-	end: function() {
-		this.patternTime.current = performance.now() - this.startTime;
-		if (this.patternTime.initial !== 0 && this.patternTime.current > this.patternTime.max) this.patternTime.max = this.patternTime.current;
-		else if (this.patternTime.initial === 0) this.patternTime.initial = this.patternTime.current;
-	},
-	asses: function() {
-		if (this.patternTime.initial !== 0 && !alreadyHiddenOnce) {
-			const trackerTime = player.value.currentPlayingNode.getProcessTime();
-
-			if (this.patternTime.initial + trackerTime.max > MAX_TIME_SPENT && trackerTime.max + this.patternTime.max > MAX_TIME_PER_ROW) {
-				alreadyHiddenOnce = true;
-				togglePattern();
-				return;
-			}
-		}
-
-		this.patternTime = { current: 0, max: 0, initial: 0 };
-	},
-};
-
 function bakeNumberRow() {
 	if (!numberRowCanvas.value && !numberRowParent.value) return;
 	numberRowCanvas.value.width = NUMBER_ROW_WIDTH;
@@ -252,9 +219,12 @@ function setupCanvas(r = 0) {
 		setupSlice(sliceCanvas2, sliceBackground2);
 		setupSlice(sliceCanvas3, sliceBackground3);
 		if (sliceDisplay.value) sliceDisplay.value.style.minWidth = (virtualCanvasWidth) + 'px';
-	} else if (r < 10) {
+	} else {
+		if (r > 9) {
+			console.warn('SkModPlayer: Jumped to the next tick multiple times without any results, is Vue ok?');
+			return;
+		}
 		nextTick(() => {
-			console.warn('SkModPlayer: Jumped to the next tick, is Vue ok?');
 			setupCanvas(r + 1);
 		});
 	}
@@ -353,15 +323,7 @@ function toggleVisible() {
 function togglePattern() {
 	patternHide.value = !patternHide.value;
 	handleScrollBarEnable();
-
-	if (player.value.getRow() === 0 && player.value.getPattern() === 0) {
-		try {
-			performSeek(true);
-		} catch (err) {
-			console.warn(err);
-		}
-		player.value.stop();
-	}
+	performSeek(true);
 }
 
 function drawSlices(skipOptimizationChecks = false) {
@@ -477,7 +439,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;
 	}
@@ -515,7 +477,6 @@ function scrollHandler() {
 	}
 	const newColumn = Math.trunc(sliceDisplay.value.parentElement.scrollLeft / CHANNEL_WIDTH);
 	const correctedNewColumn = newColumn > nbChannels - MAX_SLICE_CHANNELS ? nbChannels - MAX_SLICE_CHANNELS : newColumn;
-	//debug('newColumn', newColumn, 'currentColumn', currentColumn, 'maxChannelsInView', channelsInView, 'currentRealColumn', currentRealColumn);
 	if (correctedNewColumn !== currentColumn || newColumn !== currentRealColumn) {
 		currentRealColumn = newColumn;
 		currentColumn = correctedNewColumn;

From 13b22cb70bc4e28d5f1b0f11c264c74c71e2a1c9 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 18:50:14 +0300
Subject: [PATCH 30/40] [frontend] SkModPlayer change number row from maxHeight
 to height to fix early clipping.

---
 packages/frontend/src/components/SkModPlayer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 3d50a37981..300e4f2589 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -377,7 +377,7 @@ function drawSlices(skipOptimizationChecks = false) {
 			drawText(sli, patternText, (currentRealColumn - currentColumn) * CHANNEL_WIDTH);
 		});
 	} else {
-		numberRowPHTML.style.maxHeight = ((player.value.getPatternNumRows(pattern) + HALF_BUFFER) * CHAR_HEIGHT) + 'px';
+		numberRowPHTML.style.height = ((player.value.getPatternNumRows(pattern) + HALF_BUFFER) * CHAR_HEIGHT) + 'px';
 		slices.forEach((sli, i) => {
 			sli.drawStart = curRow;
 			sli.vPos = HALF_BUFFER * (i + 1);

From 30316e543c06f17821d30f6d777250d7d11c6a74 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 19:17:13 +0300
Subject: [PATCH 31/40] [frontend] SkModPlayer CSS adjustment.

---
 packages/frontend/src/components/SkModPlayer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 300e4f2589..a1310a7db4 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -642,7 +642,7 @@ html {
 			width: 100%;
 			height: calc(50% - 12px);
 			translate: -50% -100%;
-			top: calc(50% - 14px);
+			top: calc(50% - 13px);
 			position: absolute;
 			pointer-events: none;
 			z-index: 2;

From 8864269d7c4361f8d36d277cf1367084bb073191 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 17 Jul 2025 21:36:26 +0300
Subject: [PATCH 32/40] [frontend] SkModPlayer Minor cleanup

Hide the shame of webkit.
---
 packages/frontend/src/components/SkModPlayer.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index a1310a7db4..df4e6cf3ea 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -93,7 +93,7 @@ class CanvasDisplay {
 	ctx: CanvasRenderingContext2D;
 	html: HTMLCanvasElement;
 	background: HTMLSpanElement;
-	drawn: { top: number, bottom: number, completed: boolean };
+	drawn: { top: number, bottom: number };
 	vPos: number;
 	transform: { x: number, y: number };
 	drawStart: number;
@@ -104,7 +104,7 @@ class CanvasDisplay {
 	) {
 		this.ctx = ctx;
 		this.html = html;
-		this.drawn = { top: 0, bottom: 0, completed: false };
+		this.drawn = { top: 0, bottom: 0 };
 		this.vPos = -0xFFFFFFFF;
 		this.transform = { x: 0, y: 0 };
 		this.drawStart = 0;
@@ -119,7 +119,6 @@ class CanvasDisplay {
 		this.drawn = {
 			top: 0xFFFFFFFF,
 			bottom: -0xFFFFFFFF,
-			completed: false,
 		};
 	}
 }
@@ -617,6 +616,7 @@ html {
 						position: static;
 						image-rendering: pixelated;
 						mix-blend-mode: multiply;
+						background-color: #000000;
 					}
 				}
 			}

From 7684c93807f921dc6beab181c9010327ec53e62a Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 23 Jul 2025 22:47:37 +0300
Subject: [PATCH 33/40] [frontend] SkModPlayer change  according to comments

Change refs from lets to consts
Change --SkModPlayer to --MI_THEME so it would be them-able
---
 .../frontend/src/components/SkModPlayer.vue   | 107 +++++++++---------
 1 file changed, 52 insertions(+), 55 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index df4e6cf3ea..1f29365370 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -126,29 +126,27 @@ class CanvasDisplay {
 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>();
-let numberRowCanvas = ref();
-let sliceCanvas1 = ref();
-let sliceCanvas2 = ref();
-let sliceCanvas3 = ref();
-let sliceBackground1 = ref();
-let sliceBackground2 = ref();
-let sliceBackground3 = ref();
-let numberRowParent = ref();
-const displayHeight = ref(ROW_BUFFER * CHAR_HEIGHT);
-const numberRowOffset = ref(HALF_BUFFER * CHAR_HEIGHT);
+const patternHide = ref<boolean>(true);
+const playing = ref<boolean>(false);
+const sliceDisplay = ref<HTMLDivElement>();
+const numberRowCanvas = ref<HTMLCanvasElement>();
+const numberRowParent = ref<HTMLSpanElement>();
+const sliceCanvas1 = ref<HTMLCanvasElement>();
+const sliceCanvas2 = ref<HTMLCanvasElement>();
+const sliceCanvas3 = ref<HTMLCanvasElement>();
+const sliceBackground1 = ref<HTMLSpanElement>();
+const sliceBackground2 = ref<HTMLSpanElement>();
+const sliceBackground3 = ref<HTMLSpanElement>();
+const displayHeight = ref<number>(ROW_BUFFER * CHAR_HEIGHT);
+const numberRowOffset = ref<number>(HALF_BUFFER * CHAR_HEIGHT);
+const progress = ref<HTMLProgressElement>();
+const position = ref<number>(0);
+const patternScrollSlider = ref<HTMLProgressElement>();
+const patternScrollSliderShow = ref<boolean>(false);
+const patternScrollSliderPos = ref<number>(0);
+const patternDisplay = ref<HTMLDivElement>();
 let sliceWidth = 0;
 let sliceHeight = 0;
-let progress = ref<HTMLProgressElement>();
-let position = ref(0);
-let patternScrollSlider = ref<HTMLProgressElement>();
-let patternScrollSliderShow = ref(false);
-let patternScrollSliderPos = ref(0);
-let patternDisplay = ref();
 const player = ref(new ChiptuneJsPlayer(new ChiptuneJsConfig()));
 
 let nbChannels = 0;
@@ -165,23 +163,24 @@ let slices: CanvasDisplay[] = [];
 let numberRowPHTML: HTMLSpanElement;
 
 function bakeNumberRow() {
-	if (!numberRowCanvas.value && !numberRowParent.value) return;
-	numberRowCanvas.value.width = NUMBER_ROW_WIDTH;
-	numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
-	numberRowPHTML = numberRowParent.value;
-	let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as OffscreenCanvasRenderingContext2D;
-	ctx.font = '10px monospace';
-	ctx.fillStyle = colours.background;
-	ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );
+	if (numberRowCanvas.value && numberRowParent.value) {
+		numberRowCanvas.value.width = NUMBER_ROW_WIDTH;
+		numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
+		numberRowPHTML = numberRowParent.value;
+		let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
+		ctx.font = '10px monospace';
+		ctx.fillStyle = colours.background;
+		ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );
 
-	for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
-		let rowText = i.toString(16);
-		if (rowText.length === 1) rowText = '0' + rowText;
+		for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
+			let rowText = i.toString(16);
+			if (rowText.length === 1) rowText = '0' + rowText;
 
-		ctx.fillStyle = colours.foreground.default;
-		if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
+			ctx.fillStyle = colours.foreground.default;
+			if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
 
-		ctx.fillText(rowText, 0, 10 + i * 12);
+			ctx.fillText(rowText, 0, 10 + i * 12);
+		}
 	}
 }
 
@@ -371,7 +370,7 @@ function drawSlices(skipOptimizationChecks = false) {
 				if (sli.drawn.top > newRow) sli.drawn.top = newRow;
 				if (sli.drawn.bottom <= newRow) sli.drawn.bottom = newRow;
 
-				patternText.push(rowText(sli, newRow, pattern));
+				patternText.push(getRowText(sli, newRow, pattern));
 			}
 			drawText(sli, patternText, (currentRealColumn - currentColumn) * CHANNEL_WIDTH);
 		});
@@ -392,7 +391,7 @@ function drawSlices(skipOptimizationChecks = false) {
 			for (let itter = 0; itter < HALF_BUFFER; itter++) {
 				if (sli.drawn.top > curRow) sli.drawn.top = curRow;
 				if (sli.drawn.bottom <= curRow) sli.drawn.bottom = curRow;
-				patternText.push(rowText(sli, curRow, pattern));
+				patternText.push(getRowText(sli, curRow, pattern));
 				curRow++;
 				if (curRow > lower) break;
 			}
@@ -406,7 +405,7 @@ function drawSlices(skipOptimizationChecks = false) {
 	lastPattern = pattern;
 }
 
-function rowText(slice: CanvasDisplay, row: number, pattern: number) : string {
+function getRowText(slice: CanvasDisplay, row: number, pattern: number) : string {
 	if (!player.value.currentPlayingNode) return '';
 	if (row < 0 || row > player.value.getPatternNumRows(pattern) - 1) return '';
 	let retrunStr = '|';
@@ -437,8 +436,6 @@ function display(skipOptimizationChecks = false) {
 	if (patternHide.value && !skipOptimizationChecks) return;
 
 	if (firstFrame) {
-		// Changing it to false should enable pattern display by default.
-		patternHide.value = true;
 		handleScrollBarEnable();
 		firstFrame = false;
 	}
@@ -543,14 +540,14 @@ onDeactivated(() => {
 
 <style lang="scss" module>
 
-html {
-		--SkModPlayer-default: #ffffff;
-		--SkModPlayer-quarter: #ffff00;
-		--SkModPlayer-instr: #80e0ff;
-		--SkModPlayer-volume: #80ff80;
-		--SkModPlayer-fx: #ff80e0;
-		--SkModPlayer-operant: #ffe080;
-		--SkModPlayer-Shadow: #00000080;
+:root {
+		--MI_THEME-modPlayerDefault: #ffffff;
+		--MI_THEME-modPlayerQuarter: #ffff00;
+		--MI_THEME-modPlayerInstr: #80e0ff;
+		--MI_THEME-modPlayerVolume: #80ff80;
+		--MI_THEME-modPlayerFx: #ff80e0;
+		--MI_THEME-modPlayerOperant: #ffe080;
+		--MI_THEME-modPlayerShadow: #00000080;
 }
 
 .hide {
@@ -606,11 +603,11 @@ html {
 					position: relative;
 					background: repeating-linear-gradient(
 						to right,
-						var(--SkModPlayer-default) 0px calc(5 * 6px),
-						var(--SkModPlayer-instr) calc(5 * 6px) calc(7 * 6px),
-						var(--SkModPlayer-volume) calc(7 * 6px) calc(10 * 6px),
-						var(--SkModPlayer-fx) calc(10 * 6px) calc(13 * 6px),
-						var(--SkModPlayer-operant) calc(13 * 6px) calc(14 * 6px),
+						var(--MI_THEME-modPlayerDefault) 0px calc(5 * 6px),
+						var(--MI_THEME-modPlayerInstr) calc(5 * 6px) calc(7 * 6px),
+						var(--MI_THEME-modPlayerVolume) calc(7 * 6px) calc(10 * 6px),
+						var(--MI_THEME-modPlayerFx) calc(10 * 6px) calc(13 * 6px),
+						var(--MI_THEME-modPlayerOperant) calc(13 * 6px) calc(14 * 6px),
 					);
 					.patternSlice {
 						position: static;
@@ -638,7 +635,7 @@ html {
 		}
 
 		.patternShadowTop {
-			background: var(--SkModPlayer-Shadow);
+			background: var(--MI_THEME-modPlayerShadow);
 			width: 100%;
 			height: calc(50% - 12px);
 			translate: -50% -100%;
@@ -649,7 +646,7 @@ html {
 		}
 
 		.patternShadowBottom {
-			background: var(--SkModPlayer-Shadow);
+			background: var(--MI_THEME-modPlayerShadow);
 			width: 100%;
 			height: calc(50% - 27px);
 			translate: -50% 0%;

From 524fbf8883bd72c30259608b86567a98f96ce78f Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 23 Jul 2025 23:10:57 +0300
Subject: [PATCH 34/40] [frontend] SkModPlayer change some hex value to
 Infinity

---
 .../frontend/src/components/SkModPlayer.vue    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 1f29365370..28bff4d793 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -104,9 +104,15 @@ class CanvasDisplay {
 	) {
 		this.ctx = ctx;
 		this.html = html;
-		this.drawn = { top: 0, bottom: 0 };
-		this.vPos = -0xFFFFFFFF;
-		this.transform = { x: 0, y: 0 };
+		this.drawn = {
+			top: Infinity,
+			bottom: -Infinity,
+		};
+		this.vPos = -Infinity;
+		this.transform = {
+			x: 0,
+			y: 0,
+		};
 		this.drawStart = 0;
 		this.background = background;
 		// Hacky solution to seeing raw background while the module isn't loaded yet.
@@ -117,8 +123,8 @@ class CanvasDisplay {
 	}
 	resetDrawn() {
 		this.drawn = {
-			top: 0xFFFFFFFF,
-			bottom: -0xFFFFFFFF,
+			top: Infinity,
+			bottom: -Infinity,
 		};
 	}
 }
@@ -597,7 +603,7 @@ onDeactivated(() => {
 			top: 50%;
 			span {
 				.sliceBackground {
-					display: none;
+					/* display: none; */
 					width: fit-content;
 					height: fit-content;
 					position: relative;

From 29cbe18e37a8f1690ee2a58f21f759b710ebcc90 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Wed, 23 Jul 2025 23:13:08 +0300
Subject: [PATCH 35/40] [frontend]  Theme: add modplayer defaults to  theme
 props

---
 packages/frontend-shared/themes/_dark.json5  | 6 ++++++
 packages/frontend-shared/themes/_light.json5 | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 1c52dac9d5..a9de410cee 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -73,6 +73,12 @@
 		codeBoolean: '#c59eff',
 		deckBg: '#000',
 		htmlThemeColor: '@bg',
+		modPlayerDefault: '#ffffff',
+		modPlayerQuarter: '#ffff00',
+		modPlayerInstr: '#80e0ff',
+		modPlayerVolume: '#80ff80',
+		modPlayerFx: '#ff80e0',
+		modPlayerOperant: '#ffe080',
 	},
 
 	codeHighlighter: {
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index c12f5be9db..79d8996a11 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -73,6 +73,12 @@
 		codeBoolean: '#62b70c',
 		deckBg: ':darken<3<@bg',
 		htmlThemeColor: '@bg',
+		modPlayerDefault: '#ffffff',
+		modPlayerQuarter: '#ffff00',
+		modPlayerInstr: '#80e0ff',
+		modPlayerVolume: '#80ff80',
+		modPlayerFx: '#ff80e0',
+		modPlayerOperant: '#ffe080',
 	},
 
 	codeHighlighter: {

From ad21e89ea016138e5b0339a808a8c433c7bfc999 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 24 Jul 2025 00:03:10 +0300
Subject: [PATCH 36/40] [frontend] SkModPlayer make slider knob more visible.

---
 packages/frontend/src/components/SkModPlayer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 28bff4d793..962a053891 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -755,7 +755,7 @@ onDeactivated(() => {
 				background: var(--MI_THEME-indicator);
 				cursor: pointer;
 				-webkit-appearance: none;
-				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
+				box-shadow: calc(-100vw - 14px) 0 0 100vw hsl(from var(--MI_THEME-indicator) h s calc(l + 10));
 				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
 				z-index: 1;
 			}
@@ -781,7 +781,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: var(--MI_THEME-indicator);
+				background: hsl(from var(--MI_THEME-indicator) h s calc(l + 10));
 				cursor: pointer;
 			}
 

From eeb1d774c0514def4c743f5adb558e52cc1bfb03 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 24 Jul 2025 19:34:39 +0300
Subject: [PATCH 37/40] [frontend] SkModPlayer define preferred fonts in text
 rendering.

---
 .../frontend/src/components/SkModPlayer.vue   | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 962a053891..0a0517c18a 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -174,7 +174,7 @@ function bakeNumberRow() {
 		numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
 		numberRowPHTML = numberRowParent.value;
 		let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
-		ctx.font = '10px monospace';
+		ctx.font = '10px "Liberation Mono", "Courier New", "Droid Sans Mono", "Roboto Mono", "Luxi Mono", "FreeMono", monospace';
 		ctx.fillStyle = colours.background;
 		ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );
 
@@ -185,7 +185,7 @@ function bakeNumberRow() {
 			ctx.fillStyle = colours.foreground.default;
 			if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
 
-			ctx.fillText(rowText, 0, 10 + i * 12);
+			ctx.fillText(rowText, 0, ROW_OFFSET_Y + i * 12);
 		}
 	}
 }
@@ -200,7 +200,7 @@ function setupSlice(canvas: Ref, back: Ref) {
 		chtml,
 		backgorund,
 	);
-	slice.ctx.font = '10px monospace';
+	slice.ctx.font = '10px "Liberation Mono", "Courier New", "Droid Sans Mono", "Roboto Mono", "Luxi Mono", "FreeMono", monospace';
 	slice.ctx.imageSmoothingEnabled = false;
 	slices.push(slice);
 }
@@ -341,7 +341,7 @@ function drawSlices(skipOptimizationChecks = false) {
 	const pattern = player.value.getPattern();
 	const row = player.value.getRow();
 	const lower = row + HALF_BUFFER;
-	const upper = row - HALF_BUFFER;
+	//const upper = row - HALF_BUFFER;
 	const newDisplayTanslation = -row * CHAR_HEIGHT;
 	let curRow = row - HALF_BUFFER;
 
@@ -369,7 +369,7 @@ function drawSlices(skipOptimizationChecks = false) {
 			for (let i = 0; i < HALF_BUFFER; i++) {
 				const newRow = sli.drawStart + i;
 
-				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow || newRow < upper || newRow < upper) {
+				if (sli.drawn.bottom >= newRow && sli.drawn.top <= newRow /*|| newRow < upper || newRow > lower*/) {
 					patternText.push('');
 					continue;
 				}
@@ -603,7 +603,7 @@ onDeactivated(() => {
 			top: 50%;
 			span {
 				.sliceBackground {
-					/* display: none; */
+					display: none;
 					width: fit-content;
 					height: fit-content;
 					position: relative;
@@ -752,11 +752,11 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--MI_THEME-indicator);
+				background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5));
 				cursor: pointer;
 				-webkit-appearance: none;
-				box-shadow: calc(-100vw - 14px) 0 0 100vw hsl(from var(--MI_THEME-indicator) h s calc(l + 10));
-				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 10.5px), -100vw calc(50% + 10.5px), -100vw calc(50% - 10.5px), 0 calc(50% - 10.5px));
+				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
+				clip-path: polygon(1px 0, 100% 0, 100% 100%, 1px 100%, 1px calc(50% + 11px), -100vw calc(50% + 11px), -100vw calc(50% - 10px), 0 calc(50% - 10px));
 				z-index: 1;
 			}
 
@@ -781,7 +781,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: hsl(from var(--MI_THEME-indicator) h s calc(l + 10));
+				background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5));
 				cursor: pointer;
 			}
 
@@ -814,7 +814,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: var(--MI_THEME-indicator);
+				background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5));
 				cursor: pointer;
 			}
 

From 2d9744340fa8a5f848e9010aa453e5a56d09c781 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 24 Jul 2025 20:03:23 +0300
Subject: [PATCH 38/40] [frontend] SkModPlayer make number row use the same
 blending technique as the slices.

---
 .../frontend/src/components/SkModPlayer.vue   | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 0a0517c18a..4dd671936f 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -20,8 +20,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<span :class="$style.patternShadowTop"></span>
 		<span :class="$style.patternShadowBottom"></span>
 		<div ref="sliceDisplay" :class="$style.slice_display">
-			<span ref="numberRowParent" :class="$style.numberRowParent">
-				<canvas ref="numberRowCanvas" :style="{ top: numberRowOffset + 'px' }" :class="$style.row_canvas"></canvas>
+			<span :class="$style.numberRowParent">
+				<span ref="numberRowBackground" :style="{ top: numberRowOffset + 'px' }" :class="$style.numberRowBackground">
+					<canvas ref="numberRowCanvas" :class="$style.row_canvas"></canvas>
+				</span>
 			</span>
 			<span>
 				<span ref="sliceBackground1" :class="$style.sliceBackground">
@@ -66,10 +68,7 @@ import { prefer } from '@/preferences.js';
 
 const colours = {
 	background: '#000000',
-	foreground: {
-		default: '#ffffff',
-		quarter: '#ffff00',
-	},
+	foreground: '#ffffff',
 };
 
 const CHAR_WIDTH = 6;
@@ -136,7 +135,7 @@ const patternHide = ref<boolean>(true);
 const playing = ref<boolean>(false);
 const sliceDisplay = ref<HTMLDivElement>();
 const numberRowCanvas = ref<HTMLCanvasElement>();
-const numberRowParent = ref<HTMLSpanElement>();
+const numberRowBackground = ref<HTMLSpanElement>();
 const sliceCanvas1 = ref<HTMLCanvasElement>();
 const sliceCanvas2 = ref<HTMLCanvasElement>();
 const sliceCanvas3 = ref<HTMLCanvasElement>();
@@ -169,22 +168,20 @@ let slices: CanvasDisplay[] = [];
 let numberRowPHTML: HTMLSpanElement;
 
 function bakeNumberRow() {
-	if (numberRowCanvas.value && numberRowParent.value) {
+	if (numberRowCanvas.value && numberRowBackground.value) {
 		numberRowCanvas.value.width = NUMBER_ROW_WIDTH;
 		numberRowCanvas.value.height = MAX_ROW_NUMBERS * CHAR_HEIGHT + 1;
-		numberRowPHTML = numberRowParent.value;
+		numberRowPHTML = numberRowBackground.value;
+		numberRowPHTML.style.display = 'block';
 		let ctx = numberRowCanvas.value.getContext('2d', { alpha: false }) as CanvasRenderingContext2D;
 		ctx.font = '10px "Liberation Mono", "Courier New", "Droid Sans Mono", "Roboto Mono", "Luxi Mono", "FreeMono", monospace';
 		ctx.fillStyle = colours.background;
 		ctx.fillRect( 0, 0, numberRowCanvas.value.width, numberRowCanvas.value.height );
 
+		ctx.fillStyle = colours.foreground;
 		for (let i = 0; i <= MAX_ROW_NUMBERS; i++) {
 			let rowText = i.toString(16);
 			if (rowText.length === 1) rowText = '0' + rowText;
-
-			ctx.fillStyle = colours.foreground.default;
-			if (i % 4 === 0) ctx.fillStyle = colours.foreground.quarter;
-
 			ctx.fillText(rowText, 0, ROW_OFFSET_Y + i * 12);
 		}
 	}
@@ -425,7 +422,7 @@ function getRowText(slice: CanvasDisplay, row: number, pattern: number) : string
 }
 
 function drawText(slice: CanvasDisplay, text: string[], drawX = 0, drawY = ROW_OFFSET_Y) {
-	slice.ctx.fillStyle = colours.foreground.default;
+	slice.ctx.fillStyle = colours.foreground;
 	text.forEach((str, i) => {
 		if (str.length !== 0) slice.ctx.fillText(str, drawX, drawY + CHAR_HEIGHT * i);
 	});
@@ -595,6 +592,12 @@ onDeactivated(() => {
 		max-height: 312px; /* magic_number = CHAR_HEIGHT * rowBuffer, needs to be in px */
 		scrollbar-width: none;
 
+		canvas {
+			image-rendering: pixelated;
+			mix-blend-mode: multiply;
+			background-color: #000000;
+		}
+
 		.slice_display {
 			display: flex;
 			position: relative;
@@ -617,9 +620,6 @@ onDeactivated(() => {
 					);
 					.patternSlice {
 						position: static;
-						image-rendering: pixelated;
-						mix-blend-mode: multiply;
-						background-color: #000000;
 					}
 				}
 			}
@@ -631,11 +631,20 @@ onDeactivated(() => {
 				height: 200%;
 				overflow: clip;
 				background: #000000;
-				.row_canvas {
+				.numberRowBackground {
 					position: relative;
-					right: 0;
-					z-index: 1;
-					inset: 0;
+					display: none;
+					background-image: repeating-linear-gradient(
+						to bottom,
+						var(--MI_THEME-modPlayerDefault) 0px calc(3 * 12px),
+						var(--MI_THEME-modPlayerQuarter) calc(3 * 12px) calc(4 * 12px),
+					);
+					.row_canvas {
+						position: static;
+						right: 0;
+						z-index: 1;
+						inset: 0;
+					}
 				}
 			}
 		}

From 177a5c048cfd3f71762d6b9ba071dad59ddfd381 Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 24 Jul 2025 20:24:20 +0300
Subject: [PATCH 39/40] [frontend] Theme: add SkModPlayer slider knob as a
 theme-able var.

---
 packages/frontend-shared/themes/_dark.json5      | 2 ++
 packages/frontend-shared/themes/_light.json5     | 2 ++
 packages/frontend/src/components/SkModPlayer.vue | 7 ++++---
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index a9de410cee..2987765976 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -79,6 +79,8 @@
 		modPlayerVolume: '#80ff80',
 		modPlayerFx: '#ff80e0',
 		modPlayerOperant: '#ffe080',
+		modPlayerShadow: 'rgba(0, 0, 0, 0.5)',
+		modPlayerSliderKnob: ':darken<10<@indicator',
 	},
 
 	codeHighlighter: {
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index 79d8996a11..b4475d8d54 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -79,6 +79,8 @@
 		modPlayerVolume: '#80ff80',
 		modPlayerFx: '#ff80e0',
 		modPlayerOperant: '#ffe080',
+		modPlayerShadow: 'rgba(0, 0, 0, 0.5)',
+		modPlayerSliderKnob: ':darken<10<@indicator',
 	},
 
 	codeHighlighter: {
diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 4dd671936f..4cf4722c3c 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -551,6 +551,7 @@ onDeactivated(() => {
 		--MI_THEME-modPlayerFx: #ff80e0;
 		--MI_THEME-modPlayerOperant: #ffe080;
 		--MI_THEME-modPlayerShadow: #00000080;
+		--MI_THEME-modPlayerSliderKnob: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.1));
 }
 
 .hide {
@@ -761,7 +762,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5));
+				background: var(--MI_THEME-modPlayerSliderKnob);
 				cursor: pointer;
 				-webkit-appearance: none;
 				box-shadow: calc(-100vw - 14px) 0 0 100vw var(--MI_THEME-accent);
@@ -790,7 +791,7 @@ onDeactivated(() => {
 				height: 100%;
 				border-radius: 0;
 				width: 14px;
-				background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5));
+				background: var(--MI_THEME-modPlayerSliderKnob);
 				cursor: pointer;
 			}
 
@@ -823,7 +824,7 @@ onDeactivated(() => {
 				height: 100%;
 				width: 14px;
 				border-radius: 0;
-				background: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.5));
+				background: var(--MI_THEME-modPlayerSliderKnob);
 				cursor: pointer;
 			}
 

From 4a8c21e14377f82b2c229d74950ef740b7d28dbc Mon Sep 17 00:00:00 2001
From: Vavency <vavency@gmail.com>
Date: Thu, 24 Jul 2025 20:53:48 +0300
Subject: [PATCH 40/40] [frontend] SkModPlayer cleanup extra indents.

---
 packages/frontend/src/components/SkModPlayer.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/SkModPlayer.vue b/packages/frontend/src/components/SkModPlayer.vue
index 4cf4722c3c..d813c277dc 100644
--- a/packages/frontend/src/components/SkModPlayer.vue
+++ b/packages/frontend/src/components/SkModPlayer.vue
@@ -544,14 +544,14 @@ onDeactivated(() => {
 <style lang="scss" module>
 
 :root {
-		--MI_THEME-modPlayerDefault: #ffffff;
-		--MI_THEME-modPlayerQuarter: #ffff00;
-		--MI_THEME-modPlayerInstr: #80e0ff;
-		--MI_THEME-modPlayerVolume: #80ff80;
-		--MI_THEME-modPlayerFx: #ff80e0;
-		--MI_THEME-modPlayerOperant: #ffe080;
-		--MI_THEME-modPlayerShadow: #00000080;
-		--MI_THEME-modPlayerSliderKnob: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.1));
+	--MI_THEME-modPlayerDefault: #ffffff;
+	--MI_THEME-modPlayerQuarter: #ffff00;
+	--MI_THEME-modPlayerInstr: #80e0ff;
+	--MI_THEME-modPlayerVolume: #80ff80;
+	--MI_THEME-modPlayerFx: #ff80e0;
+	--MI_THEME-modPlayerOperant: #ffe080;
+	--MI_THEME-modPlayerShadow: #00000080;
+	--MI_THEME-modPlayerSliderKnob: hsl(from var(--MI_THEME-indicator) h s calc(l * 0.1));
 }
 
 .hide {