Class TrackItem

packages/playground/src/components/TrackItem.ts:88–180

);

export class TrackItem implements Mountable {
    readonly root: HTMLElement;
    readonly track: alphaTab.model.Track;

    private muteBtn: ToggleButton;
    private soloBtn: ToggleButton;
    private volume: Slider;

    onSelect: ((e: MouseEvent) => void) | null = null;

    constructor(api: alphaTab.AlphaTabApi, track: alphaTab.model.Track) {
        this.track = track;
        this.root = parseHtml(html`
            <div class="at-track">
                <div class="at-track-icon"></div>
                <span class="at-track-name">${track.name}</span>
                <div class="at-track-controls">
                    <div class="cmp-mute"></div>
                    <div class="cmp-solo"></div>
                    <span class="at-track-volume-icon"></span>
                    <div class="cmp-volume"></div>
                </div>
            </div>
        `);
        this.root.querySelector('.at-track-icon')!.appendChild(renderIcon(pickTrackIcon(track)));
        this.root.querySelector('.at-track-volume-icon')!.appendChild(renderIcon(Icons.Volume));

        this.muteBtn = mount(
            this.root,
            '.cmp-mute',
            new ToggleButton({ icon: Icons.Track, label: 'Mute', tooltip: 'Mute track' })
        );
        // Replace the IconButton svg with simple text button by clearing the icon slot
        const muteIconSlot = this.muteBtn.root.querySelector('.at-icon-btn-icon');
        if (muteIconSlot) {
            muteIconSlot.remove();
        }
        this.muteBtn.root.classList.remove('at-icon-btn');
        this.muteBtn.root.classList.add('at-track-mute');
        this.muteBtn.onChange = active => {
            api.changeTrackMute([this.track], active);
        };

        this.soloBtn = mount(
            this.root,
            '.cmp-solo',
            new ToggleButton({ icon: Icons.Track, label: 'Solo', tooltip: 'Solo track' })
        );
        const soloIconSlot = this.soloBtn.root.querySelector('.at-icon-btn-icon');
        if (soloIconSlot) {
            soloIconSlot.remove();
        }
        this.soloBtn.root.classList.remove('at-icon-btn');
        this.soloBtn.root.classList.add('at-track-solo');
        this.soloBtn.onChange = active => {
            api.changeTrackSolo([this.track], active);
        };