wave-roll
Version:
JavaScript Library for Comparative MIDI Piano-Roll Visualization
255 lines • 7.49 kB
TypeScript
import { CreateWaveRollPlayerOptions } from "./types";
import { PianoRollManager } from "@/core/playback";
import type { OnsetMarkerStyle, OnsetMarkerShape } from "@/types";
import { ColorPalette } from "@/lib/core/midi/types";
/**
* Appearance settings structure for solo mode integration
*/
export interface AppearanceSettings {
paletteId: string;
noteColor?: number;
onsetMarker?: {
shape: OnsetMarkerShape;
variant: "filled" | "outlined";
};
}
/**
* Demo for multiple MIDI files - Acts as orchestrator for extracted modules
*/
export declare class WaveRollPlayer {
private container;
private midiManager;
pianoRollManager: PianoRollManager | null;
private corePlaybackEngine;
private stateManager;
private fileManager;
private visualizationEngine;
private audioPlayerContainer;
private mainContainer;
private sidebarContainer;
private playerContainer;
private controlsContainer;
private timeDisplay;
private progressBar;
private seekHandle;
private currentTimeLabel;
private totalTimeLabel;
private seekBarContainer;
private loopRegion;
private markerA;
private markerB;
private progressIndicator;
private markerATimeLabel;
private markerBTimeLabel;
private zoomInput;
private fileToggleContainer;
private pianoRollContainer;
private config;
private initialFileItemList;
private uiDeps;
private visualizationHandler;
private uiUpdater;
private keyboardHandler;
private fileLoader;
private silenceDetector;
private pausedBySilence;
private lastHookedAudioPlayer;
private audioVisualHooked;
private permissions;
private soloMode;
private midiExportOptions;
private pianoRollConfigOverrides;
private fileAddRequestCallback;
private audioFileAddRequestCallback;
private defaultHighlightMode;
private allowFileDrop;
private getEffectiveDuration;
constructor(container: HTMLElement, initialFileItemList?: Array<{
path: string;
displayName?: string;
type?: "midi" | "audio";
}>, options?: CreateWaveRollPlayerOptions);
/**
* Create default configuration
*/
/**
* Create UI containers
*/
private createUIContainers;
/**
* Initialize all modules
*/
private initializeModules;
/**
* Get UI dependencies object for UIComponents
*/
private getUIDependencies;
/**
* Get UI elements object for UIComponents
*/
private getUIElements;
/**
* Initialize the demo
*/
initialize(): Promise<void>;
/**
* Set up the sidebar
*/
private setupSidebar;
/**
* Update sidebar with current files
*/
private updateSidebar;
/**
* Load sample MIDI files
*/
private loadSampleFiles;
/**
* Update visualization
*/
private updateVisualization;
/**
* Set up file toggle section
*/
private setupFileToggleSection;
/**
* Update file toggle section
*/
private updateFileToggleSection;
/**
* Start the update loop for UI synchronization
*/
private startUpdateLoop;
/**
* Update seek bar
*/
private updateSeekBar;
/**
* Update play button
*/
private updatePlayButton;
/**
* Update time display
*/
private updateTimeDisplay;
/**
* Update mute state
*/
private updateMuteState;
/**
* Open settings modal
*/
private openSettingsModal;
/**
* Open evaluation results modal
*/
private openEvaluationResultsModal;
/**
* Cleanup resources
*/
dispose(): void;
play(): Promise<void>;
pause(): void;
get isPlaying(): boolean;
/**
* Seek to a specific time position
*/
seek(time: number): void;
/**
* Update UI permissions at runtime (e.g., readonly mode)
*/
setPermissions(permissions: Partial<{
canAddFiles: boolean;
canRemoveFiles: boolean;
}>): void;
/**
* Set the active color palette by ID.
* This will reassign colors to all loaded files.
*/
setActivePalette(paletteId: string): void;
/**
* Get the list of available color palettes (built-in + custom).
*/
getAvailablePalettes(): ColorPalette[];
/**
* Get the currently active palette ID.
*/
getActivePaletteId(): string;
/**
* Set the note color for the first loaded file (useful in solo mode).
* @param color - Hex color as number (e.g., 0x4e79a7)
*/
setNoteColor(color: number): void;
/**
* Get the note color of the first loaded file.
* @returns Color as hex number, or 0x666666 if no file is loaded.
*/
getNoteColor(): number;
/**
* Set the onset marker style for the first loaded file.
*/
setOnsetMarkerStyle(style: OnsetMarkerStyle): void;
/**
* Get the onset marker style for the first loaded file.
*/
getOnsetMarkerStyle(): OnsetMarkerStyle | null;
/**
* Get the list of available onset marker shapes.
*/
getAvailableOnsetMarkerShapes(): OnsetMarkerShape[];
/**
* Get current appearance settings (for persistence).
*/
getAppearanceSettings(): AppearanceSettings;
/**
* Apply appearance settings (for restoration from persistence).
*/
applyAppearanceSettings(settings: AppearanceSettings): void;
/**
* Subscribe to appearance changes.
* Returns an unsubscribe function.
*/
onAppearanceChange(callback: (settings: AppearanceSettings) => void): () => void;
/**
* Register a callback to be invoked when the user clicks "Add Files" button.
* This allows VS Code extension to intercept the file add request and show
* a native file dialog instead of relying on HTML5 file input.
* Returns an unsubscribe function.
*/
onFileAddRequest(callback: () => void): () => void;
/**
* Check if there's a file add request callback registered.
* Used by UI components to decide whether to trigger callback or use default behavior.
*/
hasFileAddRequestCallback(): boolean;
/**
* Trigger the file add request callback (called by UI components).
*/
triggerFileAddRequest(): void;
/**
* Register a callback to be invoked when the user clicks "Add Audio File" button.
* This allows VS Code extension to intercept the audio file add request and show
* a native file dialog with audio file filters.
* Returns an unsubscribe function.
*/
onAudioFileAddRequest(callback: () => void): () => void;
/**
* Trigger the audio file add request callback (called by UI components).
*/
triggerAudioFileAddRequest(): void;
/**
* Add a file from raw data (ArrayBuffer or Base64 string).
* This is useful for VS Code integration where files are passed via postMessage.
* @param data - File data as ArrayBuffer or Base64 string
* @param filename - Original filename (used to determine file type)
*/
addFileFromData(data: ArrayBuffer | string, filename: string): Promise<void>;
}
/**
* Factory function to create multi MIDI demo
*/
export declare function createWaveRollPlayer(container: HTMLElement, files?: Array<{
path: string;
name?: string;
}>, options?: CreateWaveRollPlayerOptions): Promise<WaveRollPlayer>;
//# sourceMappingURL=player.d.ts.map