@docsvision/webclient 5.17.0-beta.14 → 5.17.0-beta.15

package/Helpers/ArtPlayer/models/IArtPlayer.d.ts

@@ -0,0 +1,597 @@
+declare type Selector = {
+    /**
+     * Whether the default is selected
+     */
+    default?: boolean;
+    /**
+     * Html string of selector
+     */
+    html: string;
+};
+declare type ComponentOption = {
+    /**
+     * Html string or html element of component
+     */
+    html: string | HTMLElement;
+    /**
+     * Whether to disable component
+     */
+    disable?: boolean;
+    /**
+     * Unique name for component
+     */
+    name?: string;
+    /**
+     * Component sort index
+     */
+    index?: number;
+    /**
+     * Component style object
+     */
+    style?: CSSStyleDeclaration;
+    /**
+     * Component click event
+     */
+    click?(component: Component, event: Event): void;
+    /**
+     * Wnen the component was mounted
+     */
+    mounted?(element: HTMLElement): void;
+    /**
+     * Component tooltip, use in controls
+     */
+    tooltip?: string;
+    /**
+     * Component position, use in controls
+     */
+    position?: 'top' | 'left' | 'right';
+    /**
+     * Custom selector list, use in controls
+     */
+    selector?: Selector[];
+    /**
+     * When selector item click, use in controls
+     */
+    onSelect?(selector: Selector, element: HTMLElement, event: Event): void;
+};
+declare type SettingOption = {
+    /**
+     * Html string or html element of setting name
+     */
+    html: string | HTMLElement;
+    /**
+     * Html string or html element of setting icon
+     */
+    icon?: string | HTMLElement;
+    /**
+     * The width of setting
+     */
+    width?: number;
+    /**
+     * The tooltip of setting
+     */
+    tooltip?: string;
+    /**
+     * Whether the default is selected
+     */
+    default?: boolean;
+    /**
+     * Custom selector list
+     */
+    selector?: SettingOption[];
+    /**
+     * When selector item click
+     */
+    onSelect?(selector: SettingOption, element: HTMLElement, event: Event): void;
+};
+declare type Component = {
+    /**
+     * Component self-increasing id
+     */
+    readonly id: number;
+    /**
+     * Component parent name
+     */
+    readonly name: string | void;
+    /**
+     * Component parent element
+     */
+    readonly $parent: HTMLElement | void;
+    /**
+     * Whether to show component parent
+     */
+    show: boolean;
+    /**
+     * Toggle the component parent
+     */
+    toggle: boolean;
+    /**
+     * Dynamic add a component
+     */
+    add(option: ComponentOption): HTMLElement;
+};
+declare type PluginFunction = (art: ArtPlayerT) => any;
+declare type WhitelistFunction = (ua: string) => boolean;
+declare type CustomType = (video: HTMLVideoElement, url: string, art: ArtPlayerT) => any;
+declare type EventCallback = (event: Event) => any;
+declare type SubtitleOption = {
+    /**
+     * The subtitle url
+     */
+    url: string;
+    /**
+     * The subtitle type
+     */
+    type?: 'vtt' | 'srt' | 'ass';
+    /**
+     * The subtitle style object
+     */
+    style?: CSSStyleDeclaration;
+    /**
+     * The subtitle encoding, default utf-8
+     */
+    encoding?: string;
+};
+declare type AdsOption = {
+    /**
+     * The ads video url
+     */
+    url: string;
+};
+export declare type ArtPlayerOptionT = {
+    /**
+     * The container mounted by the player
+     */
+    container: string | HTMLElement;
+    /**
+     * Video url
+     */
+    url: string;
+    /**
+     * Player language
+     */
+    lang: string;
+    /**
+     * Video poster image url
+     */
+    poster?: string;
+    /**
+     * Video title
+     */
+    title?: string;
+    /**
+     * Video url type
+     */
+    type?: string;
+    /**
+     * Player color theme
+     */
+    theme?: string;
+    /**
+     * Player default volume
+     */
+    volume?: number;
+    /**
+     * Whether live broadcast mode
+     */
+    isLive?: boolean;
+    /**
+     * Whether video muted
+     */
+    muted?: boolean;
+    /**
+     * Whether video auto play
+     */
+    autoplay?: boolean;
+    /**
+     * Whether player auto resize
+     */
+    autoSize?: boolean;
+    /**
+     * Whether player auto run mini mode
+     */
+    autoMini?: boolean;
+    /**
+     * Whether video auto loop
+     */
+    loop?: boolean;
+    /**
+     * Whether show video flip button
+     */
+    flip?: boolean;
+    /**
+     * Whether show video playback rate button
+     */
+    playbackRate?: boolean;
+    /**
+     * Whether show video aspect ratio button
+     */
+    aspectRatio?: boolean;
+    /**
+     * Whether show video screenshot button
+     */
+    screenshot?: boolean;
+    /**
+     * Whether show video setting button
+     */
+    setting?: boolean;
+    /**
+     * Whether to enable player hotkey
+     */
+    hotkey?: boolean;
+    /**
+     * Whether show video pip button
+     */
+    pip?: boolean;
+    /**
+     * Do you want to run only one player at a time
+     */
+    mutex?: boolean;
+    /**
+     * Whether use backdrop in UI
+     */
+    backdrop?: boolean;
+    /**
+     * Whether show video window fullscreen button
+     */
+    fullscreen?: boolean;
+    /**
+     * Whether show video web fullscreen button
+     */
+    fullscreenWeb?: boolean;
+    /**
+     * Whether to enable player subtitle offset
+     */
+    subtitleOffset?: boolean;
+    /**
+     * Whether to enable player mini progress bar
+     */
+    miniProgressBar?: boolean;
+    /**
+     * Whether use SSR function
+     */
+    useSSR?: boolean;
+    /**
+     * Whether use playsInline in mobile
+     */
+    playsInline?: boolean;
+    /**
+     * Custom plugin list
+     */
+    plugins?: PluginFunction[];
+    /**
+     * Custom mobile whitelist
+     */
+    whitelist?: (string | WhitelistFunction | RegExp)[];
+    /**
+     * Custom ads list
+     */
+    ads?: AdsOption[];
+    /**
+     * Custom layer list
+     */
+    layers?: ComponentOption[];
+    /**
+     * Custom contextmenu list
+     */
+    contextmenu?: ComponentOption[];
+    /**
+     * Custom control list
+     */
+    controls?: ComponentOption[];
+    /**
+     * Custom setting list
+     */
+    settings?: SettingOption[];
+    /**
+     * Custom video quality list
+     */
+    quality?: {
+        /**
+         * Whether the default is selected
+         */
+        default?: boolean;
+        /**
+         * Html string of quality
+         */
+        html: string;
+        /**
+         * Video quality url
+         */
+        url: string;
+    }[];
+    /**
+     * Custom highlight list
+     */
+    highlight?: {
+        /**
+         * The highlight time
+         */
+        time: number;
+        /**
+         * The highlight text
+         */
+        text: string;
+    }[];
+    /**
+     * Custom thumbnail
+     */
+    thumbnails?: {
+        /**
+         * The thumbnail image url
+         */
+        url: string;
+        /**
+         * The thumbnail item number
+         */
+        number?: number;
+        /**
+         * The thumbnail column size
+         */
+        column?: number;
+    };
+    /**
+     * Custom subtitle option
+     */
+    subtitle?: SubtitleOption;
+    /**
+     * Other video attribute
+     */
+    moreVideoAttr?: HTMLVideoElement;
+    /**
+     * Custom default icons
+     */
+    icons?: {
+        loading?: HTMLElement | string;
+        state?: HTMLElement | string;
+        play?: HTMLElement | string;
+        pause?: HTMLElement | string;
+        volume?: HTMLElement | string;
+        volumeClose?: HTMLElement | string;
+        subtitle?: HTMLElement | string;
+        screenshot?: HTMLElement | string;
+        setting?: HTMLElement | string;
+        fullscreen?: HTMLElement | string;
+        fullscreenWeb?: HTMLElement | string;
+        pip?: HTMLElement | string;
+        indicator?: HTMLElement | string;
+        arrowLeft?: HTMLElement | string;
+        arrowRight?: HTMLElement | string;
+        playbackRate?: HTMLElement | string;
+        aspectRatio?: HTMLElement | string;
+        config?: HTMLElement | string;
+    };
+    /**
+     * Custom video type function
+     */
+    customType?: {
+        [key: string]: CustomType;
+    };
+};
+declare type AspectRatio = 'default' | '4:3' | '16:9' | void;
+declare type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | void;
+declare type Flip = 'normal' | 'horizontal' | 'vertical' | void;
+declare class Player {
+    get aspectRatio(): AspectRatio;
+    set aspectRatio(ratio: AspectRatio);
+    get playbackRate(): PlaybackRate;
+    set playbackRate(rate: PlaybackRate);
+    get autoSize(): boolean;
+    set autoSize(state: boolean);
+    get autoHeight(): boolean;
+    set autoHeight(state: boolean);
+    get currentTime(): number;
+    set currentTime(time: number);
+    get duration(): number;
+    get played(): number;
+    get playing(): boolean;
+    get flip(): Flip;
+    set flip(state: Flip);
+    get fullscreen(): boolean;
+    set fullscreen(state: boolean);
+    set fullscreenToggle(state: boolean);
+    get fullscreenWeb(): boolean;
+    set fullscreenWeb(state: boolean);
+    set fullscreenWebToggle(state: boolean);
+    get loaded(): number;
+    get loop(): number[];
+    set loop(value: number[]);
+    get mini(): boolean;
+    set mini(state: boolean);
+    get pip(): boolean;
+    set pip(state: boolean);
+    get poster(): string;
+    set poster(url: string);
+    get rect(): DOMRect;
+    get bottom(): number;
+    get height(): number;
+    get left(): number;
+    get right(): number;
+    get top(): number;
+    get width(): number;
+    get x(): number;
+    get y(): number;
+    set seek(time: number);
+    set forward(time: number);
+    set backward(time: number);
+    get url(): string;
+    set url(url: string);
+    get volume(): number;
+    set volume(percentage: number);
+    get muted(): boolean;
+    set muted(state: boolean);
+    get title(): string;
+    set title(title: string);
+    get theme(): string;
+    set theme(theme: string);
+    get subtitleOffset(): number;
+    set subtitleOffset(time: number);
+    pause(): any;
+    play(): any;
+    toggle(): any;
+    attr(key: string, value: any): void;
+    switchUrl(url: string): Promise<string>;
+    switchQuality(url: string): Promise<string>;
+    getDataURL(): Promise<string>;
+    getBlobUrl(): Promise<string>;
+    screenshot(): Promise<string>;
+}
+export declare class ArtPlayerT extends Player {
+    constructor(option: ArtPlayerOptionT);
+    static instances: ArtPlayerT[];
+    static version: string;
+    static env: string;
+    static build: string;
+    static config: {
+        propertys: {
+            [key: string]: string[];
+        };
+        methods: {
+            [key: string]: string[];
+        };
+        events: {
+            [key: string]: string[];
+        };
+        prototypes: {
+            [key: string]: string[];
+        };
+    };
+    static utils: {
+        [key: string]: string | Function;
+    };
+    static scheme: object;
+    static Emitter: Function;
+    static validator: Function;
+    static kindOf: Function;
+    static html: string;
+    static option: ArtPlayerT;
+    readonly id: number;
+    readonly option: ArtPlayerT;
+    readonly isFocus: boolean;
+    readonly isDestroy: boolean;
+    on(name: string, fn: Function, ctx?: object): void;
+    once(name: string, fn: Function, ctx?: object): void;
+    emit(name: string): void;
+    off(name: string, callback?: Function): void;
+    query(selector: string): HTMLElement;
+    proxy(target: HTMLElement, name: string, callback: EventCallback, option?: {
+        passive?: boolean;
+        once?: boolean;
+        capture?: boolean;
+    } | boolean): Function;
+    destroy(removeHtml?: boolean): void;
+    readonly template: {
+        query(str: string): HTMLElement;
+        readonly $container: HTMLElement;
+        readonly $original: HTMLElement;
+        readonly $player: HTMLElement;
+        readonly $video: HTMLElement;
+        readonly $poster: HTMLElement;
+        readonly $subtitle: HTMLElement;
+        readonly $danmuku: HTMLElement;
+        readonly $bottom: HTMLElement;
+        readonly $progress: HTMLElement;
+        readonly $controls: HTMLElement;
+        readonly $controlsLeft: HTMLElement;
+        readonly $controlsRight: HTMLElement;
+        readonly $layer: HTMLElement;
+        readonly $loading: HTMLElement;
+        readonly $notice: HTMLElement;
+        readonly $noticeInner: HTMLElement;
+        readonly $mask: HTMLElement;
+        readonly $state: HTMLElement;
+        readonly $setting: HTMLElement;
+        readonly $info: HTMLElement;
+        readonly $infoPanel: HTMLElement;
+        readonly $infoClose: HTMLElement;
+        readonly $miniHeader: HTMLElement;
+        readonly $miniTitle: HTMLElement;
+        readonly $miniClose: HTMLElement;
+        readonly $contextmenu: HTMLElement;
+    };
+    readonly events: {
+        proxy(target: HTMLElement, name: string, callback: EventCallback, option?: {
+            passive?: boolean;
+            once?: boolean;
+            capture?: boolean;
+        } | boolean): Function;
+        hover(target: HTMLElement, mouseenter?: EventCallback, mouseleave?: EventCallback): Function;
+        loadImg(target: HTMLImageElement | string): Promise<HTMLImageElement>;
+    };
+    readonly whitelist: {
+        readonly state: boolean;
+    };
+    readonly storage: {
+        readonly name: string;
+        readonly settings: object;
+        get(key: string): any;
+        set(key: string, value: any): void;
+        del(key: string): any;
+        clean(): any;
+    };
+    readonly icons: {
+        readonly loading: HTMLElement;
+        readonly state: HTMLElement;
+        readonly play: HTMLElement;
+        readonly pause: HTMLElement;
+        readonly check: HTMLElement;
+        readonly volume: HTMLElement;
+        readonly volumeClose: HTMLElement;
+        readonly subtitle: HTMLElement;
+        readonly screenshot: HTMLElement;
+        readonly setting: HTMLElement;
+        readonly fullscreen: HTMLElement;
+        readonly fullscreenWeb: HTMLElement;
+        readonly pip: HTMLElement;
+        readonly indicator: HTMLElement;
+        readonly arrowLeft: HTMLElement;
+        readonly arrowRight: HTMLElement;
+        readonly playbackRate: HTMLElement;
+        readonly aspectRatio: HTMLElement;
+        readonly config: HTMLElement;
+    };
+    readonly hotkey: {
+        add(key: number, callback: EventCallback): ArtPlayerT['hotkey'];
+    };
+    readonly plugins: {
+        readonly id: number;
+        add(plugin: PluginFunction): ArtPlayerT['plugins'];
+    };
+    readonly i18n: {
+        readonly languages: {
+            [key: string]: object;
+        };
+        get(key: string): string;
+        update(language: object): void;
+    };
+    readonly notice: {
+        time: number;
+        show: string;
+    };
+    readonly subtitle: {
+        show: boolean;
+        toggle: boolean;
+        url: string;
+        style(name: string | CSSStyleDeclaration, value?: string): HTMLElement;
+        switch(url: string, option?: SubtitleOption): Promise<string>;
+    };
+    readonly ads: {
+        index: number;
+        isEnd: boolean;
+        playing: boolean;
+        current: AdsOption;
+        prev: AdsOption;
+        next: AdsOption;
+        end(): void;
+    };
+    readonly mobile: object;
+    readonly player: Player;
+    readonly info: Component;
+    readonly loading: Component;
+    readonly mask: Component;
+    readonly layers: Record<string, HTMLElement> & Component;
+    readonly controls: Record<string, HTMLElement> & Component;
+    readonly contextmenu: Record<string, HTMLElement> & Component;
+    readonly setting: Record<string, HTMLElement> & Component;
+}
+export {};

package/Helpers/ArtPlayer/models/IArtPlayerTImeCode.d.ts

@@ -0,0 +1,6 @@
+export interface IArtPlayerTimeCode {
+    /** Текст тайм-кода */
+    text: string;
+    /** Время начала тайм-кода в секундах */
+    time: number;
+}

package/Helpers/ModalDialog/CommonModalDialog.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { $DeviceType } from '@docsvision/webclient/StandardServices';
 /** Свойства {@link CommonModalDialog}.  */
-export interface Props {
+export interface CommonModalDialogProps {
     /** Существует ли кнопка закрытия модального окна (крестик) */
     closeButtonDisabled?: boolean;
     /** Открыт диалог или нет. */
@@ -33,6 +33,7 @@ export interface Props {
     maxHeight?: string;
     services: $DeviceType;
 }
+export declare type Props = CommonModalDialogProps;
 /**
  * Обертка, использующая {@link StackingModal}, {@link ModalBackdrop}, {@link ModalDialog},
  * {@link ModalDialogBox}, {@link ModalDialogHeader}, {@link ModalDialogCloseButton},{@link ModalDialogContent}, {@link ModalDialogButtonPanel}

package/Helpers/ModalDialog/CommonModalDialogHost.d.ts

@@ -1,12 +1,12 @@
 import { $RootCssClass } from '@docsvision/webclient/Helpers/$RootCssClass';
 import { $DialogManagement } from '@docsvision/webclient/Helpers/ModalDialog/$DialogManagement';
-import { Props } from '@docsvision/webclient/Helpers/ModalDialog/CommonModalDialog';
+import { CommonModalDialogProps } from '@docsvision/webclient/Helpers/ModalDialog/CommonModalDialog';
 import { $DeviceType } from '@docsvision/webclient/StandardServices';
 import { Optional } from '@docsvision/web/core/services';
 import React from 'react';
 /** Вспомогательный класс для отрисовки {@link CommonModalDialog} в {@link ModalHost}. */
 export declare class CommonModalDialogHost {
-    dialogProps: Partial<Props>;
+    dialogProps: Partial<CommonModalDialogProps> | (() => Partial<CommonModalDialogProps>);
     renderCallback: () => React.ReactNode;
     onAcceptCallback?: () => Promise<void>;
     onCancelCallback?: () => Promise<void>;
@@ -16,7 +16,7 @@ export declare class CommonModalDialogHost {
     private _service;
     private contentDiv;
     private isCancelled;
-    constructor(className: string, services: $DeviceType & Optional<$RootCssClass>, dialogProps?: Partial<Props>, renderCallback?: () => React.ReactNode, onAcceptCallback?: () => Promise<void>, onCancelCallback?: () => Promise<void>);
+    constructor(className: string, services: $DeviceType & Optional<$RootCssClass>, dialogProps?: Partial<CommonModalDialogProps> | (() => Partial<CommonModalDialogProps>), renderCallback?: () => React.ReactNode, onAcceptCallback?: () => Promise<void>, onCancelCallback?: () => Promise<void>);
     forceUpdate(callback?: Function): Promise<void>;
     isMounted(): boolean;
     get service(): $DialogManagement & $DeviceType;

package/Helpers/ReactList/ReactListDynamic.d.ts

@@ -41,6 +41,7 @@ export interface IReactListDynamicProps {
     items: any[];
     /** {@see ReactListVirtualization}. */
     virtualization?: 'simple' | 'uniform' | 'variable' | string;
+    useStaticSize?: boolean;
     /** Функция, определяющая, загружен ли элемент списка или нет. */
     checkItemLoaded?: (item: any, index?: number) => boolean;
     /** Рендеринг отдельного элемента списка */

package/Helpers/Sortable/Data/ClientModels/ISortableItem.d.ts

@@ -8,5 +8,11 @@ export interface ISortableItem<T> {
     /** Данные элемента, который будет использоваться для рендеринга */
     data: T;
     /** Компонент, который нужно отрендерить */
-    render: (data: T) => React.ReactNode;
+    render?: (data: T) => React.ReactNode;
+    /**
+     * Рендеринг контейнера строки.
+     *
+     * Должен задавать атрибут data-sortable-id={item.id} и key={item.id}
+     */
+    renderSortableRow?: (data: ISortableItem<T>) => React.ReactNode;
 }