vlibras-player-webjs
Version:
Biblioteca JavaScript moderna para integração do VLibras Player com React, Vue, Angular e vanilla JS
146 lines • 4.22 kB
TypeScript
/**
* Sistema avançado de configuração de Canvas para VLibras Player
* Resolve problemas de layout, aspectRatio e otimização visual
*/
export interface CanvasConfig {
fillContainer?: boolean;
aspectRatio?: 'auto' | '16:9' | '4:3' | '1:1' | '3:2' | '21:9' | '9:16';
scaleMode?: 'stretch' | 'cover' | 'contain' | 'fill';
removeBlackBorders?: boolean;
backgroundColor?: string;
borderRadius?: string;
maxWidth?: string;
maxHeight?: string;
minWidth?: string;
minHeight?: string;
responsive?: boolean;
quality?: 'low' | 'medium' | 'high' | 'ultra';
enableAntialiasing?: boolean;
enableHardwareAcceleration?: boolean;
}
export interface ResponsiveBreakpoints {
mobile: CanvasConfig;
tablet: CanvasConfig;
desktop: CanvasConfig;
ultrawide?: CanvasConfig;
}
/**
* Classe principal para configuração avançada de Canvas
*/
export declare class VLibrasCanvasConfig {
private static defaultConfig;
private static appliedConfigs;
/**
* Aplica configuração de canvas a um elemento
*/
static applyCanvasConfig(canvasElement: HTMLCanvasElement, config: CanvasConfig): void;
/**
* Aplica estilos básicos ao canvas
*/
private static applyBasicStyles;
/**
* Aplica aspect ratio ao canvas
*/
private static applyAspectRatio;
/**
* Aplica modo de escala
*/
private static applyScaleMode;
/**
* Aplica configurações de qualidade
*/
private static applyQualitySettings;
/**
* Configura responsividade
*/
private static setupResponsive;
/**
* Configurações predefinidas para casos comuns
*/
static presets: {
/**
* Configuração para dicionários - layout limpo e claro
*/
dictionary: {
fillContainer: true;
aspectRatio: "4:3";
scaleMode: "contain";
removeBlackBorders: true;
backgroundColor: string;
borderRadius: string;
responsive: true;
quality: "high";
};
/**
* Configuração para quiz - foco na animação
*/
quiz: {
fillContainer: true;
aspectRatio: "16:9";
scaleMode: "cover";
removeBlackBorders: true;
backgroundColor: string;
responsive: true;
quality: "medium";
};
/**
* Configuração compacta para widgets
*/
compact: {
fillContainer: true;
aspectRatio: "1:1";
scaleMode: "cover";
removeBlackBorders: true;
backgroundColor: string;
maxWidth: string;
maxHeight: string;
quality: "medium";
};
/**
* Configuração para apresentações
*/
presentation: {
fillContainer: true;
aspectRatio: "16:9";
scaleMode: "contain";
removeBlackBorders: false;
backgroundColor: string;
responsive: true;
quality: "ultra";
enableHardwareAcceleration: true;
};
/**
* Configuração para mobile
*/
mobile: {
fillContainer: true;
aspectRatio: "9:16";
scaleMode: "cover";
removeBlackBorders: true;
backgroundColor: string;
responsive: true;
quality: "medium";
};
};
/**
* Aplica um preset
*/
static applyPreset(canvas: HTMLCanvasElement, presetName: keyof typeof VLibrasCanvasConfig.presets): void;
/**
* Auto-detecta e aplica a melhor configuração baseada no contexto
*/
static autoDetectAndApply(canvas: HTMLCanvasElement): void;
/**
* Injeta CSS global para otimizações
*/
static injectGlobalCSS(): void;
/**
* Remove configuração aplicada
*/
static removeConfig(containerId: string): void;
/**
* Obtém configuração aplicada
*/
static getAppliedConfig(containerId: string): CanvasConfig | undefined;
}
//# sourceMappingURL=VLibrasCanvasConfig.d.ts.map