misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

[Frontend] SkModPlayer finally fixing some dumb math.

Browse source 
This also revealed some quirks.
This commit is contained in:
Vavency 2025-05-15 12:53:33 +03:00
parent 000609b43d
commit 61c6f2ae34
1 changed files with 54 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

114
packages/frontend/src/components/SkModPlayer.vue
View file

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