ngx-video-timeline
Version:
a video timeline for ng2+
170 lines (169 loc) • 5.78 kB
TypeScript
import { ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { CanvasPos, VideoCellType } from './interfaces/timeline.interface';
import * as i0 from "@angular/core";
export declare class NgxVideoTimelineComponent implements OnInit, OnChanges {
canvasHeight: number;
scale: number;
playTime: number | string | Date;
speed: number;
forWardValue: number;
startTimeThreshold: number | string | Date;
endTimeThreshold: number | string | Date;
borderColor: string;
bgColor: string;
bottomLineColor: string;
verticalBarColor: string;
playBarColor: string;
videoCells: Array<VideoCellType>;
isPlayClick: boolean;
readonly playClick: EventEmitter<any>;
readonly mouseUp: EventEmitter<any>;
readonly mouseDown: EventEmitter<any>;
readonly keyUp: EventEmitter<any>;
readonly keyDown: EventEmitter<any>;
canvas: any;
ctx: any;
canvasW: number;
canvasH: number;
timecell: Array<VideoCellType>;
minutesPerStep: Array<number>;
pxPerMs: number;
graduationStep: number;
hoursPerRuler: number;
startTimestamp: number;
currentTimestamp: number;
distanceBetweenGtitle: number;
zoom: number;
gIsMousedown: boolean;
gIsMousemove: boolean;
gMousedownCursor: any;
gMousedownCursorY: any;
setTimeMove: Subscription;
playBarDistanceLeft: number;
playBarOffsetX: number;
playBarOffsetX1: number;
playBarOffsetX2: number;
playBarOffsetY1: number;
playBarOffsetY2: number;
canvasExp: ElementRef;
constructor();
/**
* Browser change event
*/
onResize(): void;
/**
* Keyboard press event
*/
onKeyDown(event: any): void;
/**
* Keyboard release event
*/
onKeyUp(event: any): void;
ngOnInit(): void;
ngOnChanges(changes: SimpleChanges): void;
/**
* Initialize
* @param startTimestamp Leftmost time
* @param timecell Video segment array
* @param redrawFlag Whether to redraw the mark
*/
init(startTimestamp: number, timecell: any, redrawFlag: boolean): void;
/**
* Draw add scale
* @param startTimestamp Leftmost time
*/
add_graduations(startTimestamp: number): void;
/**
* Draw the play button
*/
drawPalyBar(): void;
/**
* Draw the line
* @param beginX The X-axis to start with
* @param beginY The Y-axis to start with
* @param endX The end of the X-axis
* @param endY The end of the Y-axis
* @param color color
* @param width width
*/
drawLine(beginX: number, beginY: number, endX: number, endY: number, color: string, width: number): void;
/**
* Add video segment
* @param cells Video array
*/
add_cells(cells: any): void;
/**
* Draw video blocks
* @param cell The cell includes beginTime Ms; The endTime ms; style;
*/
draw_cell(cell: any): void;
/**
* Draws the background of the video block
*/
drawCellBg(): void;
/**
* Drag/click the Mousedown event
*/
mousedownFunc(e: MouseEvent): void;
/**
* Drag/mouse hover to display mousemove events
*/
mousemoveFunc(e: MouseEvent): void;
/**
* Drag/click the Mouseup event
*/
mouseupFunc(e: MouseEvent): void;
/**
* Mouseout of the hidden time mouseout event
*/
mouseoutFunc(): void;
/**
* Scroll to the center of the timeline for the mousewheel event
*/
mousewheelFunc(event: any): boolean;
/**
* Get the mouse POSx
* @param e event
*/
get_cursor_x_position(e: any): CanvasPos;
/**
* The offset of the left start time, returns the unit ms
* @param timestamp The time stamp
* @param step The offset
*/
ms_to_next_step(timestamp: number, step: number): number;
/**
* Set the time to jump to the middle red line
* @param time Unit of ms
*/
set_time_to_middle(time: number): void;
/**
* To redraw on a canvas, it must first be cleared.
*/
clearCanvas(): void;
/**
* Click to play
*/
onPlayClick(): void;
/**
* Click on the pause
*/
onPauseClick(): void;
/**
* Change video segment
*/
changeVideo(): void;
/**
* Temporary unused
* @param event MatDatepickerInputEvent(Date)
*/
selectedTime(event: any): void;
/**
* Temporary unused
* @param event MouseEvent
*/
onDragStart(e: MouseEvent): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxVideoTimelineComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxVideoTimelineComponent, "ngx-video-timeline", never, { "canvasHeight": { "alias": "canvasHeight"; "required": false; }; "playTime": { "alias": "playTime"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "forWardValue": { "alias": "forWardValue"; "required": false; }; "startTimeThreshold": { "alias": "startTimeThreshold"; "required": false; }; "endTimeThreshold": { "alias": "endTimeThreshold"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "bgColor": { "alias": "bgColor"; "required": false; }; "bottomLineColor": { "alias": "bottomLineColor"; "required": false; }; "verticalBarColor": { "alias": "verticalBarColor"; "required": false; }; "playBarColor": { "alias": "playBarColor"; "required": false; }; "videoCells": { "alias": "videoCells"; "required": false; }; "isPlayClick": { "alias": "isPlayClick"; "required": false; }; }, { "playClick": "playClick"; "mouseUp": "mouseUp"; "mouseDown": "mouseDown"; "keyUp": "keyUp"; "keyDown": "keyDown"; }, never, never, true, never>;
}