Align Bars in middle of view

[serenity81]

Is there a better builtin way to align the being played bar in middle of view. I am using this way:

const scrollViewHeight = api.settings.player.scrollElement.clientHeight;
const cursorBar = document.querySelector('.at-cursor-bar').offsetHeight; // Bar height can change during the song so its approx
api.settings.player.scrollOffsetY = - (scrollViewHeight / 2) + (cursorBar / 2);
api.updateSettings();

[Danielku15]

There is currently no official built-in way to customize the scrolling behavior to achieve a centered scrolling. Adding a built-in way to scroll could be tricky as people might have custom needs (e.g. what should happen on scrolling or when using the horizontal layout).

I could add some events which you can tap into to customize stuff but I have to think of a good design though to allow proper customization of the scrolling behaviors. I think it should allow to fully customize the scrolling or just do stuff before/after scrolling. #2049 added to track it.

Technically alphaTab calls internally the internalScrollToCursor method to check whether to scroll or not after the cursors are moved. So technically you could override the method but things can change there any time as its not a public API. Its unlikely to change soon so for now you should be safe with something like this:

// patch internal scroll function with custom logic (untested example)
api.internalScrollToCursor = ((originalInternalScrollToCursor) => {
	return function(barBounds) {
		const scrollElement = this.uiFacade.getScrollContainer();
		const scrollViewHeight = scrollElement.height;
		const cursorBar = barBoundings.realBounds.h;
		this.settings.player.scrollOffsetY = - (scrollViewHeight / 2) + (cursorBar / 2);
		originalInternalScrollToCursor.apply(this, arguments);
	};
})(api.internalScrollToCursor);

[serenity81]

Thank appreciated

[AvaTheArchitect]

Not exactly the same but somewhat related. I will open a separate Topic as well, Landscape or Horizontal Playback Mode - Cursor and Auto-Scroll.

Have not found a way to anchor Cursor in fixed position, like for example Songsterr does.
Where the auto-scroll is smooth and a steady continuous speed.

Currently, auto-scroll moves but so does the Cursor. The Cursor moves mid measure, before the auto-scroll sort of pauses and then jerks back.
Needing to anchor the Cursor to a "static" position and just let the Auto-Scroll move underneath.

Is there a way to replicate this (the way Songsterr does) for the Horizontal or Landscape mode?

[Danielku15]

@AvaTheArchitect
Generally a "smooth" scrolling mode would be an interesting idea.

For horizontal layouts we would change the "animate cursor" to an "animate music sheet" scrolling.

For vertical layouts we could estimate how long the cursor will last within the current system (row) and do a slow-but-steady scrolling upwards so that the next system is again centered/top-aligned when we would normally scroll rapidly at the end.

I haven't found an option on songsterr though to look how they exactly do it. Is it a "pro" feature you have to pay for? Or is it only in the app and not the website. Maybe you can record a short video?

I added #2371 to track this.

[serenity81]

If you check my website https://gigmixer.com and click on audio backing track and not music/midi based one it will hide cursor and align table vertically.
I am not sure if that's what you are after but maybe i will help out someone