Cannot change barNumberColor with NextJS and Typescript

[orrymr]

Hi!

I'm trying to change barNumberColor, but keep getting type errors.
My first attempt was as follows:

    const api = new AlphaTabApi(elementRef.current!, {
      core: {
        file: fileName,
        fontDirectory: "/alphatab/font/",
      },
      player: {
        enablePlayer: true,
        enableCursor: true,
        enableUserInteraction: true,
        soundFont: "/alphatab/soundfont/sonivox.sf2",
      },
      display: {
        staveProfile: StaveProfile.Tab,
        resources: {
          barNumberColor: '#FF0000',
        }
      },
    } as Settings);

But this did not work as barNumberColor requires a "Color" type, as per alphaTab.d.ts:

    /**
     * The color to use for displaying the bar numbers above the music sheet.
     * @defaultValue `rgb(200, 0, 0)`
     * @since 0.9.6
     */
    barNumberColor: Color;

However, I cannot do something like import { Color } from "@coderline/alphatab";, as Color is not exported; it is an internal class.
Any idea how I can modify this color?

[Danielku15]

The second parameter of AlphaTabApi accepts alphaTab.json.SettingsJson | alphaTab.Settings. SettingsJson is a more flexible format accepting the strict types but also some flavors like strings.

https://github.com/CoderLine/alphaTab/blob/develop/src/generated/SettingsJson.ts#L31
https://github.com/CoderLine/alphaTab/blob/develop/src/generated/DisplaySettingsJson.ts#L157
https://github.com/CoderLine/alphaTab/blob/develop/src/generated/RenderingResourcesJson.ts#L110
https://github.com/CoderLine/alphaTab/blob/develop/src/model/Color.ts#L11

In your case the cast is the problem. Settings is really a class which has to be constructed, casting a plain object to Settings is not correct.

SettingsJson is a more lightweight and JSON compatible format of the settings.

Beside that, alphaTab is currently shipped as one big bundle which makes importing sub-types a bit tricky. We plan to change that in 2.x. Color lives in the model namespace, so you have to import model or simply use the wildcard import and navigate down.

Talking code you can use one of the following flavors:

Variant A: Object notation without cast. The IDE should detect that its the SettingsJson type and not a Settings class instance.

import { AlphaTabApi } as alphaTab from '@coderline/alphaTab';
const api = new AlphaTabApi(elementRef.current!, {
  core: {
	file: fileName,
	fontDirectory: "/alphatab/font/",
  },
  player: {
	enablePlayer: true,
	enableCursor: true,
	enableUserInteraction: true,
	soundFont: "/alphatab/soundfont/sonivox.sf2",
  },
  display: {
	staveProfile: StaveProfile.Tab,
	resources: {
	  barNumberColor: '#FF0000',
	}
  },
});

Variant B: indicate that its the SettingsJson (satisfies is a better choice here than a cast)

import * as alphaTab from '@coderline/alphaTab';

const api = new alphaTab.AlphaTabApi(elementRef.current!, {
  core: {
	file: fileName,
	fontDirectory: "/alphatab/font/",
  },
  player: {
	enablePlayer: true,
	enableCursor: true,
	enableUserInteraction: true,
	soundFont: "/alphatab/soundfont/sonivox.sf2",
  },
  display: {
	staveProfile: StaveProfile.Tab,
	resources: {
	  barNumberColor: '#FF0000',
	}
  },
} satisfies alphaTab.json.SettingsJson);

Variant C: SettingsJson with more dedicated imports

import { AlphaTabApi, json } as alphaTab from '@coderline/alphaTab';
const api = new AlphaTabApi(elementRef.current!, {
  core: {
	file: fileName,
	fontDirectory: "/alphatab/font/",
  },
  player: {
	enablePlayer: true,
	enableCursor: true,
	enableUserInteraction: true,
	soundFont: "/alphatab/soundfont/sonivox.sf2",
  },
  display: {
	staveProfile: StaveProfile.Tab,
	resources: {
	  barNumberColor: '#FF0000',
	}
  },
} satisfies json.SettingsJson);

Variant C: construct the class instances and types

import * as alphaTab from '@coderline/alphaTab';
const settings = new alphaTab.Settings();
settings.display.resources.barNumberColor = new alphaTab.model.Color(255, 0, 0);
settings.display.resources.barNumberColor = alphaTab.model.Color.fromJson('#FF0000')!;

const api = new alphaTab.AlphaTabApi(elementRef.current!, settings);

Variant D: construct the class instances and types (dedicated imports)

import { Settings, AlphaTabApi, model } as alphaTab from '@coderline/alphaTab';
const settings = new Settings();
settings.display.resources.barNumberColor = new model.Color(255, 0, 0);
settings.display.resources.barNumberColor = model.Color.fromJson('#FF0000')!;

const api = new AlphaTabApi(elementRef.current!, settings);

[orrymr]

Amazing, thank you :)