@cometchat/chat-uikit-react 4.3.21 → 5.0.0-beta1

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/plugins/record.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Record audio from the microphone with a real-time waveform preview
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin';
+export type RecordPluginOptions = {
+    /** The MIME type to use when recording audio */
+    mimeType?: MediaRecorderOptions['mimeType'];
+    /** The audio bitrate to use when recording audio, defaults to 128000 to avoid a VBR encoding. */
+    audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond'];
+    /** Whether to render the recorded audio at the end, true by default */
+    renderRecordedAudio?: boolean;
+    /** Whether to render the scrolling waveform, false by default */
+    scrollingWaveform?: boolean;
+    /** The duration of the scrolling waveform window, defaults to 5 seconds */
+    scrollingWaveformWindow?: number;
+    /** Accumulate and render the waveform data as the audio is being recorded, false by default */
+    continuousWaveform?: boolean;
+    /** The duration of the continuous waveform, in seconds */
+    continuousWaveformDuration?: number;
+    /** The timeslice to use for the media recorder */
+    mediaRecorderTimeslice?: number;
+};
+export type RecordPluginDeviceOptions = {
+    /** The device ID of the microphone to use */
+    deviceId?: string | {
+        exact: string;
+    };
+};
+export type RecordPluginEvents = BasePluginEvents & {
+    /** Fires when the recording starts */
+    'record-start': [];
+    /** Fires when the recording is paused */
+    'record-pause': [blob: Blob];
+    /** Fires when the recording is resumed */
+    'record-resume': [];
+    'record-end': [blob: Blob];
+    /** Fires continuously while recording */
+    'record-progress': [duration: number];
+    /** On every new recorded chunk */
+    'record-data-available': [blob: Blob];
+};
+type MicStream = {
+    onDestroy: () => void;
+    onEnd: () => void;
+};
+declare class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
+    private stream;
+    private mediaRecorder;
+    private dataWindow;
+    private isWaveformPaused;
+    private originalOptions?;
+    private timer;
+    private lastStartTime;
+    private lastDuration;
+    private duration;
+    /** Create an instance of the Record plugin */
+    constructor(options: RecordPluginOptions);
+    /** Create an instance of the Record plugin */
+    static create(options?: RecordPluginOptions): RecordPlugin;
+    renderMicStream(stream: MediaStream): MicStream;
+    /** Request access to the microphone and start monitoring incoming audio */
+    startMic(options?: RecordPluginDeviceOptions): Promise<MediaStream>;
+    /** Stop monitoring incoming audio */
+    stopMic(): void;
+    /** Start recording audio from the microphone */
+    startRecording(options?: RecordPluginDeviceOptions): Promise<void>;
+    /** Get the duration of the recording */
+    getDuration(): number;
+    /** Check if the audio is being recorded */
+    isRecording(): boolean;
+    isPaused(): boolean;
+    isActive(): boolean;
+    /** Stop the recording */
+    stopRecording(): void;
+    /** Pause the recording */
+    pauseRecording(): void;
+    /** Resume the recording */
+    resumeRecording(): void;
+    /** Get a list of available audio devices
+     * You can use this to get the device ID of the microphone to use with the startMic and startRecording methods
+     * Will return an empty array if the browser doesn't support the MediaDevices API or if the user has not granted access to the microphone
+     * You can ask for permission to the microphone by calling startMic
+     */
+    static getAvailableAudioDevices(): Promise<MediaDeviceInfo[]>;
+    /** Destroy the plugin */
+    destroy(): void;
+    private applyOriginalOptionsIfNeeded;
+}
+export default RecordPlugin;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/plugins/regions.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Regions are visual overlays on the waveform that can be used to mark segments of audio.
+ * Regions can be clicked on, dragged and resized.
+ * You can set the color and content of each region, as well as their HTML content.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin';
+import EventEmitter from '../event-emitter';
+export type RegionsPluginOptions = undefined;
+export type RegionsPluginEvents = BasePluginEvents & {
+    /** When a region is created */
+    'region-created': [region: Region];
+    /** When a region is being updated */
+    'region-update': [region: Region, side?: 'start' | 'end'];
+    /** When a region is done updating */
+    'region-updated': [region: Region];
+    /** When a region is removed */
+    'region-removed': [region: Region];
+    /** When a region is clicked */
+    'region-clicked': [region: Region, e: MouseEvent];
+    /** When a region is double-clicked */
+    'region-double-clicked': [region: Region, e: MouseEvent];
+    /** When playback enters a region */
+    'region-in': [region: Region];
+    /** When playback leaves a region */
+    'region-out': [region: Region];
+};
+export type RegionEvents = {
+    /** Before the region is removed */
+    remove: [];
+    /** When the region's parameters are being updated */
+    update: [side?: 'start' | 'end'];
+    /** When dragging or resizing is finished */
+    'update-end': [];
+    /** On play */
+    play: [];
+    /** On mouse click */
+    click: [event: MouseEvent];
+    /** Double click */
+    dblclick: [event: MouseEvent];
+    /** Mouse over */
+    over: [event: MouseEvent];
+    /** Mouse leave */
+    leave: [event: MouseEvent];
+};
+export type RegionParams = {
+    /** The id of the region, any string */
+    id?: string;
+    /** The start position of the region (in seconds) */
+    start: number;
+    /** The end position of the region (in seconds) */
+    end?: number;
+    /** Allow/dissallow dragging the region */
+    drag?: boolean;
+    /** Allow/dissallow resizing the region */
+    resize?: boolean;
+    /** The color of the region (CSS color) */
+    color?: string;
+    /** Content string or HTML element */
+    content?: string | HTMLElement;
+    /** Min length when resizing (in seconds) */
+    minLength?: number;
+    /** Max length when resizing (in seconds) */
+    maxLength?: number;
+    /** The index of the channel */
+    channelIdx?: number;
+    /** Allow/Disallow contenteditable property for content */
+    contentEditable?: boolean;
+};
+declare class SingleRegion extends EventEmitter<RegionEvents> implements Region {
+    private totalDuration;
+    private numberOfChannels;
+    element: HTMLElement;
+    id: string;
+    start: number;
+    end: number;
+    drag: boolean;
+    resize: boolean;
+    color: string;
+    content?: HTMLElement;
+    minLength: number;
+    maxLength: number;
+    channelIdx: number;
+    contentEditable: boolean;
+    subscriptions: (() => void)[];
+    constructor(params: RegionParams, totalDuration: number, numberOfChannels?: number);
+    private clampPosition;
+    private setPart;
+    private addResizeHandles;
+    private removeResizeHandles;
+    private initElement;
+    private renderPosition;
+    private toggleCursor;
+    private initMouseEvents;
+    _onUpdate(dx: number, side?: 'start' | 'end'): void;
+    private onMove;
+    private onResize;
+    private onEndResizing;
+    private onContentClick;
+    onContentBlur(): void;
+    _setTotalDuration(totalDuration: number): void;
+    /** Play the region from the start */
+    play(): void;
+    /** Set the HTML content of the region */
+    setContent(content: RegionParams['content']): void;
+    /** Update the region's options */
+    setOptions(options: Omit<RegionParams, 'minLength' | 'maxLength'>): void;
+    /** Remove the region */
+    remove(): void;
+}
+declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions> {
+    private regions;
+    private regionsContainer;
+    /** Create an instance of RegionsPlugin */
+    constructor(options?: RegionsPluginOptions);
+    /** Create an instance of RegionsPlugin */
+    static create(options?: RegionsPluginOptions): RegionsPlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initRegionsContainer;
+    /** Get all created regions */
+    getRegions(): Region[];
+    private avoidOverlapping;
+    private adjustScroll;
+    private virtualAppend;
+    private saveRegion;
+    /** Create a region with given parameters */
+    addRegion(options: RegionParams): Region;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options: Omit<RegionParams, 'start' | 'end'>, threshold?: number): () => void;
+    /** Remove all regions */
+    clearRegions(): void;
+    /** Destroy the plugin and clean up */
+    destroy(): void;
+}
+export default RegionsPlugin;
+export type Region = SingleRegion;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/plugins/spectrogram.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Spectrogram plugin
+ *
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @author Pavel Denisov (https://github.com/akreal)
+ * @see https://github.com/wavesurfer-js/wavesurfer/pull/337
+ *
+ * @example
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     SpectrogramPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+/**
+ * Spectrogram plugin for wavesurfer.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin';
+export type SpectrogramPluginOptions = {
+    /** Selector of element or element in which to render */
+    container?: string | HTMLElement;
+    /** Number of samples to fetch to FFT. Must be a power of 2. */
+    fftSamples?: number;
+    /** Height of the spectrogram view in CSS pixels */
+    height?: number;
+    /** Set to true to display frequency labels. */
+    labels?: boolean;
+    labelsBackground?: string;
+    labelsColor?: string;
+    labelsHzColor?: string;
+    /** Size of the overlapping window. Must be < fftSamples. Auto deduced from canvas size by default. */
+    noverlap?: number;
+    /** The window function to be used. */
+    windowFunc?: 'bartlett' | 'bartlettHann' | 'blackman' | 'cosine' | 'gauss' | 'hamming' | 'hann' | 'lanczoz' | 'rectangular' | 'triangular';
+    /** Some window functions have this extra value. (Between 0 and 1) */
+    alpha?: number;
+    /** Min frequency to scale spectrogram. */
+    frequencyMin?: number;
+    /** Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram. */
+    frequencyMax?: number;
+    /**
+     * Based on: https://manual.audacityteam.org/man/spectrogram_settings.html
+     * - Linear: Linear The linear vertical scale goes linearly from 0 kHz to 20 kHz frequency by default.
+     * - Mel: The name Mel comes from the word melody to indicate that the scale is based on pitch comparisons. This is the default scale.
+     */
+    scale?: 'linear' | 'mel';
+    /**
+     * Increases / decreases the brightness of the display.
+     * For small signals where the display is mostly "blue" (dark) you can increase this value to see brighter colors and give more detail.
+     * If the display has too much "white", decrease this value.
+     * The default is 20dB and corresponds to a -20 dB signal at a particular frequency being displayed as "white". */
+    gainDB?: number;
+    /**
+     * Affects the range of signal sizes that will be displayed as colors.
+     * The default is 80 dB and means that you will not see anything for signals 80 dB below the value set for "Gain".
+     */
+    rangeDB?: number;
+    /**
+     * A 256 long array of 4-element arrays. Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     * Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     * - gray: Gray scale.
+     * - igray: Inverted gray scale.
+     * - roseus: From https://github.com/dofuuz/roseus/blob/main/roseus/cmap/roseus.py
+     */
+    colorMap?: number[][] | 'gray' | 'igray' | 'roseus';
+    /** Render a spectrogram for each channel independently when true. */
+    splitChannels?: boolean;
+};
+export type SpectrogramPluginEvents = BasePluginEvents & {
+    ready: [];
+    click: [relativeX: number];
+};
+declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
+    static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
+    constructor(options: SpectrogramPluginOptions);
+    onInit(): void;
+    destroy(): void;
+    loadFrequenciesData(url: string | URL): Promise<void>;
+    private createWrapper;
+    private createCanvas;
+    private render;
+    private drawSpectrogram;
+    private hzToMel;
+    private melToHz;
+    private createMelFilterBank;
+    private applyMelFilterBank;
+    private getFrequencies;
+    private freqType;
+    private unitType;
+    private loadLabels;
+    private resample;
+}
+export default SpectrogramPlugin;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/plugins/timeline.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin';
+export type TimelinePluginOptions = {
+    /** The height of the timeline in pixels, defaults to 20 */
+    height?: number;
+    /** HTML element or selector for a timeline container, defaults to wavesufer's container */
+    container?: HTMLElement | string;
+    /** Pass 'beforebegin' to insert the timeline on top of the waveform */
+    insertPosition?: InsertPosition;
+    /** The duration of the timeline in seconds, defaults to wavesurfer's duration */
+    duration?: number;
+    /** Interval between ticks in seconds */
+    timeInterval?: number;
+    /** Interval between numeric labels in seconds */
+    primaryLabelInterval?: number;
+    /** Interval between secondary numeric labels in seconds */
+    secondaryLabelInterval?: number;
+    /** Interval between numeric labels in timeIntervals (i.e notch count) */
+    primaryLabelSpacing?: number;
+    /** Interval between secondary numeric labels  in timeIntervals (i.e notch count) */
+    secondaryLabelSpacing?: number;
+    /** Custom inline style to apply to the container */
+    style?: Partial<CSSStyleDeclaration> | string;
+    /** Turn the time into a suitable label for the time. */
+    formatTimeCallback?: (seconds: number) => string;
+    /** Opacity of the secondary labels, defaults to 0.25 */
+    secondaryLabelOpacity?: number;
+};
+declare const defaultOptions: {
+    height: number;
+    formatTimeCallback: (seconds: number) => string;
+};
+export type TimelinePluginEvents = BasePluginEvents & {
+    ready: [];
+};
+declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
+    private timelineWrapper;
+    protected options: TimelinePluginOptions & typeof defaultOptions;
+    constructor(options?: TimelinePluginOptions);
+    static create(options?: TimelinePluginOptions): TimelinePlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private defaultTimeInterval;
+    private defaultPrimaryLabelInterval;
+    private defaultSecondaryLabelInterval;
+    private virtualAppend;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/plugins/zoom.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Zoom plugin
+ *
+ * Zoom in or out on the waveform when scrolling the mouse wheel
+ *
+ * @author HoodyHuo (https://github.com/HoodyHuo)
+ * @author Chris Morbitzer (https://github.com/cmorbitzer)
+ * @author Sam Hulick (https://github.com/ffxsam)
+ *
+ * @example
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     ZoomPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+import { BasePlugin, BasePluginEvents } from '../base-plugin';
+export type ZoomPluginOptions = {
+    /**
+     * The amount of zoom per wheel step, e.g. 0.5 means a 50% magnification per scroll
+     *
+     * @default 0.5
+     */
+    scale?: number;
+    maxZoom?: number;
+    /**
+     * The amount the wheel or trackpad needs to be moved before zooming the waveform. Set this value to 0 to have totally
+     * fluid zooming (this has a high CPU cost).
+     *
+     * @default 5
+     */
+    deltaThreshold?: number;
+};
+declare const defaultOptions: {
+    scale: number;
+    deltaThreshold: number;
+};
+export type ZoomPluginEvents = BasePluginEvents;
+declare class ZoomPlugin extends BasePlugin<ZoomPluginEvents, ZoomPluginOptions> {
+    protected options: ZoomPluginOptions & typeof defaultOptions;
+    private wrapper;
+    private container;
+    private accumulatedDelta;
+    constructor(options?: ZoomPluginOptions);
+    static create(options?: ZoomPluginOptions): ZoomPlugin;
+    onInit(): void;
+    private onWheel;
+    private calculateNewZoom;
+    destroy(): void;
+}
+export default ZoomPlugin;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/renderer.d.ts

@@ -0,0 +1,63 @@
+import EventEmitter from './event-emitter';
+import type { WaveSurferOptions } from './wavesurfer';
+type RendererEvents = {
+    click: [relativeX: number, relativeY: number];
+    dblclick: [relativeX: number, relativeY: number];
+    drag: [relativeX: number];
+    dragstart: [relativeX: number];
+    dragend: [relativeX: number];
+    scroll: [relativeStart: number, relativeEnd: number, scrollLeft: number, scrollRight: number];
+    render: [];
+    rendered: [];
+};
+declare class Renderer extends EventEmitter<RendererEvents> {
+    private static MAX_CANVAS_WIDTH;
+    private static MAX_NODES;
+    private options;
+    private parent;
+    private container;
+    private scrollContainer;
+    private wrapper;
+    private canvasWrapper;
+    private progressWrapper;
+    private cursor;
+    private timeouts;
+    private isScrollable;
+    private audioData;
+    private resizeObserver;
+    private lastContainerWidth;
+    private isDragging;
+    private subscriptions;
+    private unsubscribeOnScroll?;
+    constructor(options: WaveSurferOptions, audioElement?: HTMLElement);
+    private parentFromOptionsContainer;
+    private initEvents;
+    private onContainerResize;
+    private initDrag;
+    private getHeight;
+    private initHtml;
+    /** Wavesurfer itself calls this method. Do not call it manually. */
+    setOptions(options: WaveSurferOptions): void;
+    getWrapper(): HTMLElement;
+    getWidth(): number;
+    getScroll(): number;
+    setScroll(pixels: number): void;
+    setScrollPercentage(percent: number): void;
+    destroy(): void;
+    private createDelay;
+    private convertColorValues;
+    private getPixelRatio;
+    private renderBarWaveform;
+    private renderLineWaveform;
+    private renderWaveform;
+    private renderSingleCanvas;
+    private renderMultiCanvas;
+    private renderChannel;
+    render(audioData: AudioBuffer): Promise<void>;
+    reRender(): void;
+    zoom(minPxPerSec: number): void;
+    private scrollIntoView;
+    renderProgress(progress: number, isPlaying?: boolean): void;
+    exportImage(format: string, quality: number, type: 'dataURL' | 'blob'): Promise<string[] | Blob[]>;
+}
+export default Renderer;

package/dist/types/components/BaseComponents/CometChatAudioBubble/src/timer.d.ts

@@ -0,0 +1,11 @@
+import EventEmitter from './event-emitter';
+type TimerEvents = {
+    tick: [];
+};
+declare class Timer extends EventEmitter<TimerEvents> {
+    private unsubscribe;
+    start(): void;
+    stop(): void;
+    destroy(): void;
+}
+export default Timer;