@vkontakte/videoplayer-interactive 1.0.37-dev.a47f72c3.0 → 1.0.37-dev.af36d24f.0

package/types/modules/Interactives/containers/ChoiceContainer.d.ts

@@ -4,8 +4,7 @@ import { ChapterContainer } from '../../../manifest';
 import type { ChoiceContainerOptions, ContainerCreateViewParams } from './types';
 import { CustomError } from '../../../utils/Error';
 import { Nullable } from '@vkontakte/videoplayer-shared';
-import { CssVarsManager } from '../../../utils/CssVarsManager';
-export declare const createChoiceContainer: (container: ChapterContainer, rootElement: HTMLElement, cssVarsManager: CssVarsManager, options?: ChoiceContainerOptions) => ChoiceContainer | undefined;
+export declare const createChoiceContainer: (container: ChapterContainer, rootElement: HTMLElement, options?: ChoiceContainerOptions) => ChoiceContainer | undefined;
 export declare class ChoiceContainer extends Container {
     private rootElement;
     private containerElement;
@@ -14,9 +13,9 @@ export declare class ChoiceContainer extends Container {
     isRemoved: boolean;
     isDisabled: boolean;
     error$: Subject<CustomError>;
-    readonly cssVarsManager: CssVarsManager;
-    constructor(container: ChapterContainer, rootElement: HTMLElement, cssVarsManager: CssVarsManager, options?: ChoiceContainerOptions);
-    createView({ eventCallback }: ContainerCreateViewParams): HTMLElement;
+    constructor(container: ChapterContainer, rootElement: HTMLElement, options?: ChoiceContainerOptions);
+    createView({ eventCallback, videoDurationMs }: ContainerCreateViewParams): HTMLElement;
+    updateControlsFillAnimationDimensions(): void;
     hide(): void;
     show(): void;
     enable(): void;

package/types/modules/Interactives/containers/Container.d.ts

@@ -1,14 +1,12 @@
 import type { ChapterContainer } from '../../../manifest';
 import { type Control, type ControlCreator, type Options } from '../../../modules/Interactives/controls';
 import { type ChoiceContainerOptions } from './types';
-import { CssVarsManager } from '../../../utils/CssVarsManager';
 export declare class Container {
     container: ChapterContainer;
     options?: Options;
     private factories;
     controls: Control[];
-    readonly cssVarsManager: CssVarsManager;
-    constructor(container: ChapterContainer, cssVarsManager: CssVarsManager, options?: Options);
+    constructor(container: ChapterContainer, options?: Options);
     featureIsEnabled(name: keyof ChoiceContainerOptions['features']): boolean | undefined;
     addControlFactory(type: string, factory: ControlCreator<any>): void;
     removeControlFactory(type: string): void;

package/types/modules/Interactives/containers/types.d.ts

@@ -1,9 +1,11 @@
 import { Options, ControlEventCallback } from '../controls';
 import { AnimationsFeatureToggles } from '../types';
 export type ChoiceContainerOptions = {
-    features: Pick<AnimationsFeatureToggles, 'controlsExpectTimeBlinkAnimation'>;
+    isTouch: boolean;
+    features: Pick<AnimationsFeatureToggles, 'controlsExpectTimeBlinkAnimation' | 'controlsTapPlace' | 'controlsFillAnimation'>;
 };
 export declare function isChoiceContainerOptions(options: Options): options is ChoiceContainerOptions;
 export type ContainerCreateViewParams = {
     eventCallback: ControlEventCallback;
+    videoDurationMs: number;
 };

package/types/modules/Interactives/controls/AreaControl.d.ts

@@ -1,7 +1,7 @@
 import { Control } from './Control';
 import { type ControlCreator, type ControlCreateViewParams, type TControl, type ControlOptions } from './types';
 export declare const createAreaControl: ControlCreator<ControlOptions, AreaControl>;
-export declare class AreaControl extends Control {
+declare class AreaControl extends Control {
     constructor(control: TControl, options?: ControlOptions);
     createView({ parentElement, callbacks }: ControlCreateViewParams): void;
     registerEvents(): void;
@@ -12,7 +12,9 @@ export declare class AreaControl extends Control {
     toggleBlinkAnimation(enable?: boolean): void;
     syncBlinkAnimation(refAnim: HTMLElement): void;
     onBlinkHovering(): void;
-    onError(message: string | undefined, error: unknown): void;
+    setShowTimeRange(): void;
+    updateFillAnimationDimensions(): void;
     onProgress(): void;
     onResize(): void;
 }
+export {};

package/types/modules/Interactives/controls/ButtonControl.d.ts

@@ -1,7 +1,11 @@
 import { Control } from './Control';
 import { type ControlCreator, type ControlCreateViewParams, type TControl, type ControlOptions } from './types';
+import { ControlFillAnimation } from '../utils/ControlFillAnimation';
 export declare const createButtonControl: ControlCreator<ControlOptions, ButtonControl>;
-export declare class ButtonControl extends Control {
+declare class ButtonControl extends Control {
+    startTime?: number;
+    endTime?: number;
+    controlFillAnimation?: ControlFillAnimation;
     constructor(control: TControl, options?: ControlOptions);
     createView({ parentElement, callbacks }: ControlCreateViewParams): void;
     registerEvents(): void;
@@ -11,8 +15,10 @@ export declare class ButtonControl extends Control {
     toggleBlinkAnimation(enable?: boolean): void;
     syncBlinkAnimation(refAnim: HTMLElement): void;
     onBlinkHovering(): void;
-    onError(message: string | undefined, error: unknown): void;
-    onProgress(): void;
+    updateFillAnimationDimensions(): void;
+    setShowTimeRange(startTime: number, endTime: number): void;
+    onProgress(currentTime: number): void;
     onResize(): void;
     updateShadowStyles(): void;
 }
+export {};

package/types/modules/Interactives/controls/Control.d.ts

@@ -1,11 +1,12 @@
-import { Subject, Subscription } from '@vkontakte/videoplayer-shared';
+import { Subject, Subscription, ValueSubject } from '@vkontakte/videoplayer-shared';
+import { ControlTap } from '../utils/ControlTap';
 import type { ControlEventCallback, ControlCreateViewParams, Dimensions, Callbacks, Options, TControl, ControlOptions } from './types';
 import { CustomError } from '../../../utils/Error';
 import { Nullable } from '@vkontakte/videoplayer-shared';
-import { CssVarsManager } from '../../../utils/CssVarsManager';
 type ControlContainer = {
     element: HTMLElement;
     dimensions: Dimensions;
+    isManifestContainerDisabled: () => boolean;
 };
 type ClickListener = (event: MouseEvent) => void;
 export declare abstract class Control {
@@ -15,21 +16,25 @@ export declare abstract class Control {
     controlElement: Nullable<HTMLElement>;
     subscriptions: Subscription;
     error$: Subject<CustomError>;
-    private cssVarsManager;
+    isInteracted$: ValueSubject<boolean>;
+    controlTap?: ControlTap;
     constructor(control: TControl, options?: Options | undefined);
-    setCssVarsManager(cssVarsManager: CssVarsManager): void;
     abstract createView(params: ControlCreateViewParams): void;
     abstract getElement(): Nullable<HTMLElement>;
     abstract disable(): void;
     abstract enable(): void;
     abstract onProgress(currentTimeMs: number): void;
     abstract onResize(): void;
-    abstract onError(message: string, error?: string | Error | CustomError): void;
+    abstract setShowTimeRange(startTime: number, endTime: number): void;
+    abstract updateFillAnimationDimensions(): void;
     abstract updateShadowStyles(isDark?: boolean): void;
     abstract toggleBlinkAnimation(enable?: boolean): void;
+    onError(message: string | undefined, error: unknown): void;
+    addControlTap(controlElement: HTMLElement): void;
     createContainerElement(callbacks: Callbacks): void;
     createClickListener(callback: AnyFn): ClickListener;
     featureIsEnabled(name: keyof ControlOptions['features']): boolean | undefined;
+    isTouch(): boolean | undefined;
     setEvents(callback: ControlEventCallback): void;
     removeListeners(): void;
 }

package/types/modules/Interactives/controls/TextControl.d.ts

@@ -11,6 +11,8 @@ declare class TextControl extends Control {
     onResize(): void;
     updateShadowStyles(): void;
     toggleBlinkAnimation(): void;
+    setShowTimeRange(): void;
+    updateFillAnimationDimensions(): void;
     onError(): void;
 }
 export {};

package/types/modules/Interactives/controls/types.d.ts

@@ -8,12 +8,13 @@ export declare enum CONTROLLER_IDS {
     TEXT = "int_text",
     BUTTON = "int_bttn"
 }
-export type Dimensions<T = string | number> = {
+export type Dimensions<T = string> = {
     width: T;
     height: T;
 };
 export type Callbacks = {
     setControlLayout: (element: HTMLElement, controlLayoutParams: ControlLayoutParams) => void;
+    isContainerDisabled: () => boolean;
 };
 export type ControlCreateViewParams = {
     parentElement: HTMLElement;
@@ -21,7 +22,8 @@ export type ControlCreateViewParams = {
 };
 export type Options = Record<string, unknown>;
 export type ControlOptions = {
-    features: Pick<AnimationsFeatureToggles, 'controlsExpectTimeBlinkAnimation'>;
+    isTouch: boolean;
+    features: Pick<AnimationsFeatureToggles, 'controlsExpectTimeBlinkAnimation' | 'controlsTapPlace' | 'controlsFillAnimation'>;
 };
 export declare function isControlOptions(options: Options): options is ControlOptions;
 type ControlEventCallbackParams = {

package/types/modules/Interactives/controls/utils.d.ts

@@ -11,3 +11,4 @@ export declare const controlsClassNames: {
     blinkAnimButton: string;
     blinkAnimArea: string;
 };
+export declare const TOUCH_DEVICES_CIRCLE_SIZE_PX = 40;

package/types/modules/Interactives/index.d.ts

@@ -1,7 +1,4 @@
-import { Container, ChoiceContainer, ChoiceContainerOptions } from './containers/index';
-import { CssVarsManager } from '../../utils/CssVarsManager';
-import { ChapterContainer } from '../../manifest';
-import type { ControlCreator, ButtonControl, ControlOptions, AreaControl } from '../../modules/Interactives/controls';
+import { Container } from './containers/index';
 export { Interactives } from './Interactives';
 export { EVENT_NAMES, graphEventTypes, interactivesEventTypes } from './utils/events';
 export type { InteractiveProjectInfo, PlayerChangedData, VideoInfo, IInteractiveOptions } from './types';
@@ -9,8 +6,79 @@ export { isLastChapter, hasEndTemplate, isOneTextCtrlContainer } from './utils/g
 export type { InteractiveRange } from './utils/getInteractiveRanges';
 export declare const utils: {
     Container: typeof Container;
-    createChoiceContainer: (container: ChapterContainer, rootElement: HTMLElement, cssVarsManager: CssVarsManager, options?: ChoiceContainerOptions) => ChoiceContainer | undefined;
-    createAreaControl: ControlCreator<ControlOptions, AreaControl>;
-    createButtonControl: ControlCreator<ControlOptions, ButtonControl>;
+    createChoiceContainer: (container: import("@interactiveplatform/movika-manifest").ChapterContainer, rootElement: HTMLElement, options?: import("./containers/types").ChoiceContainerOptions) => import("./containers/ChoiceContainer").ChoiceContainer | undefined;
+    createAreaControl: import("./controls").ControlCreator<import("./controls").ControlOptions, {
+        createView({ parentElement, callbacks }: import("./controls").ControlCreateViewParams): void;
+        registerEvents(): void;
+        disable(): void;
+        enable(): void;
+        getElement(): import("@vkontakte/videoplayer-shared").Nullable<HTMLElement>;
+        updateShadowStyles(isDark?: boolean): void;
+        toggleBlinkAnimation(enable?: boolean): void;
+        syncBlinkAnimation(refAnim: HTMLElement): void;
+        onBlinkHovering(): void;
+        setShowTimeRange(): void;
+        updateFillAnimationDimensions(): void;
+        onProgress(): void;
+        onResize(): void;
+        container: import("@vkontakte/videoplayer-shared").Nullable<{
+            element: HTMLElement;
+            dimensions: import("./controls").Dimensions;
+            isManifestContainerDisabled: () => boolean;
+        }>;
+        controlElement: import("@vkontakte/videoplayer-shared").Nullable<HTMLElement>;
+        subscriptions: import("@vkontakte/videoplayer-shared").Subscription;
+        error$: import("@vkontakte/videoplayer-shared").Subject<import("../..").CustomError>;
+        isInteracted$: import("@vkontakte/videoplayer-shared").ValueSubject<boolean>;
+        controlTap?: import("./utils/ControlTap").ControlTap;
+        control: import("@interactiveplatform/movika-manifest/dist/chapter-DI_7rDZW").e;
+        options?: import("./controls").Options | undefined;
+        onError(message: string | undefined, error: unknown): void;
+        addControlTap(controlElement: HTMLElement): void;
+        createContainerElement(callbacks: import("./controls").Callbacks): void;
+        createClickListener(callback: AnyFn): (event: MouseEvent) => void;
+        featureIsEnabled(name: keyof import("./controls").ControlOptions["features"]): boolean | undefined;
+        isTouch(): boolean | undefined;
+        setEvents(callback: import("./controls").ControlEventCallback): void;
+        removeListeners(): void;
+    }>;
+    createButtonControl: import("./controls").ControlCreator<import("./controls").ControlOptions, {
+        startTime?: number;
+        endTime?: number;
+        controlFillAnimation?: import("./utils/ControlFillAnimation").ControlFillAnimation;
+        createView({ parentElement, callbacks }: import("./controls").ControlCreateViewParams): void;
+        registerEvents(): void;
+        disable(): void;
+        enable(): void;
+        getElement(): import("@vkontakte/videoplayer-shared").Nullable<HTMLElement>;
+        toggleBlinkAnimation(enable?: boolean): void;
+        syncBlinkAnimation(refAnim: HTMLElement): void;
+        onBlinkHovering(): void;
+        updateFillAnimationDimensions(): void;
+        setShowTimeRange(startTime: number, endTime: number): void;
+        onProgress(currentTime: number): void;
+        onResize(): void;
+        updateShadowStyles(): void;
+        container: import("@vkontakte/videoplayer-shared").Nullable<{
+            element: HTMLElement;
+            dimensions: import("./controls").Dimensions;
+            isManifestContainerDisabled: () => boolean;
+        }>;
+        controlElement: import("@vkontakte/videoplayer-shared").Nullable<HTMLElement>;
+        subscriptions: import("@vkontakte/videoplayer-shared").Subscription;
+        error$: import("@vkontakte/videoplayer-shared").Subject<import("../..").CustomError>;
+        isInteracted$: import("@vkontakte/videoplayer-shared").ValueSubject<boolean>;
+        controlTap?: import("./utils/ControlTap").ControlTap;
+        control: import("@interactiveplatform/movika-manifest/dist/chapter-DI_7rDZW").e;
+        options?: import("./controls").Options | undefined;
+        onError(message: string | undefined, error: unknown): void;
+        addControlTap(controlElement: HTMLElement): void;
+        createContainerElement(callbacks: import("./controls").Callbacks): void;
+        createClickListener(callback: AnyFn): (event: MouseEvent) => void;
+        featureIsEnabled(name: keyof import("./controls").ControlOptions["features"]): boolean | undefined;
+        isTouch(): boolean | undefined;
+        setEvents(callback: import("./controls").ControlEventCallback): void;
+        removeListeners(): void;
+    }>;
     classnamesPrefix: string;
 };

package/types/modules/Interactives/types.d.ts

@@ -18,6 +18,8 @@ export type IOptionalInteractiveOptions = Partial<Omit<IInteractiveOptions, Requ
 export type AnimationsFeatureToggles = Partial<{
     areaControlShadow: boolean;
     controlsExpectTimeBlinkAnimation: boolean;
+    controlsTapPlace: boolean;
+    controlsFillAnimation: boolean;
 }>;
 export interface IInteractiveOptions {
     parentElement: HTMLElement;
@@ -44,6 +46,7 @@ export interface IInteractiveOptions {
      * @deprecated
      * */
     disableControlsOnPause?: boolean;
+    isTouch?: boolean;
     animationsFeatureToggles?: AnimationsFeatureToggles;
 }
 export type ChapterChangedData = {

package/types/modules/Interactives/utils/ControlFillAnimation/ControlFillAnimation.d.ts

@@ -0,0 +1,34 @@
+export type Options = {
+    startTime: number;
+    endTime: number;
+    rotateAngle: number;
+    borderRadius: string;
+    debug?: boolean;
+};
+export declare class ControlFillAnimation {
+    fillAnimationElement: HTMLDivElement;
+    private fillAnimationFillerElement;
+    private fillAnimationFillerWrapperElement;
+    private startTime;
+    private endTime;
+    private shouldFillHeight;
+    private widthExpansionCoef;
+    private isDebug;
+    private fromLeft;
+    private useSkew;
+    private rotateAngle;
+    constructor(opts: Options);
+    updateDimension(opts: {
+        width: number;
+        height: number;
+        borderWidth: number;
+    }): void;
+    updateAnimation(currentTime: number): void;
+    /**
+     * Когда мы применяем scew для контрол, расстояние между крайними left & right
+     * точками становится больше. Это значит, что нужно увеличивать
+     * элемент-заполнитель, чтобы он заполнял контрол полностью. Этот метод
+     * возвращает коэффцицент увеличения для элемента-заполнителя.
+     */
+    private calcWidthExpansionCoef;
+}

package/types/modules/Interactives/utils/ControlFillAnimation/index.d.ts

@@ -0,0 +1 @@
+export * from './ControlFillAnimation';

package/types/modules/Interactives/utils/ControlFillAnimation/utils.d.ts

@@ -0,0 +1,12 @@
+export declare const CONTROL_FILL_ANIMATION_CLASSNAME_PREFIX = "interactive-control-fill-animation";
+export declare const controlFillAnimationClassNames: {
+    common: string;
+    fillerWrapper: string;
+    filler: string;
+    fillHeight: string;
+    fillWidth: string;
+    fromTop: string;
+    fromBottom: string;
+    fromLeft: string;
+    fromRight: string;
+};

package/types/modules/Interactives/utils/ControlTap/ControlTap.d.ts

@@ -0,0 +1,17 @@
+type Options = {
+    controlRotateAngleRad: number;
+    circleDiameterPx?: number;
+    useDimensionsBasedSize?: boolean;
+    clickCancelCondition: () => boolean;
+};
+export declare class ControlTap {
+    element: HTMLDivElement;
+    controlRotateAngleRad: number;
+    clickCancelCondition: () => boolean;
+    circleDiameterPx: number;
+    useDimensionsBasedSize: boolean;
+    constructor({ controlRotateAngleRad, clickCancelCondition, circleDiameterPx, useDimensionsBasedSize, }: Options);
+    onElementClick: (e: MouseEvent) => void;
+    onAnimationEnd: (e: TransitionEvent) => void;
+}
+export {};

package/types/modules/Interactives/utils/ControlTap/index.d.ts

@@ -0,0 +1 @@
+export * from './ControlTap';

package/types/modules/Interactives/utils/ControlTap/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const CONTROL_TAP_CLASSNAME_PREFIX = "interactive-control-tap";
+export declare const controlTapClassNames: {
+    common: string;
+    animation: string;
+    visible: string;
+};

package/types/modules/Interactives/utils/ResizeManager.d.ts

@@ -1,9 +1,7 @@
 import type { IPlayer } from '@vkontakte/videoplayer-core';
 import { Nullable } from '@vkontakte/videoplayer-shared';
-import { CssVarsManager } from '../../../utils/CssVarsManager';
 type ResizeManagerArg = () => {
     parentElement: HTMLElement;
-    cssVarsManager: CssVarsManager;
     player?: Nullable<IPlayer>;
     fns?: AnyFn[];
 };

package/types/modules/Interactives/utils/angleUtils.d.ts

@@ -0,0 +1,25 @@
+/**
+ * use normalizeRadians before use
+ */
+export declare function isPositiveXAxis(angle: number): angle is 0;
+/**
+ * use normalizeRadians before use
+ */
+export declare function isPositiveYAxis(angle: number): boolean;
+/**
+ * use normalizeRadians before use
+ */
+export declare function isNegativeXAxis(angle: number): boolean;
+/**
+ * use normalizeRadians before use
+ */
+export declare function isNegativeYAxis(angle: number): boolean;
+/**
+ *  normalizes to [0, 2π)
+ */
+export declare function normalizeRadians(rad: number): number;
+/**
+ * use normalizeRadians before use
+ */
+export declare function getQuadrant(rad: number): number | null;
+export declare function radiansToDegrees(rad: number): number;

package/types/utils/CssVarsManager.d.ts

@@ -1,23 +0,0 @@
-export declare class CssVarsManager {
-    rootElement: HTMLElement;
-    private readonly isCssVarsSupported;
-    private rootElementProps;
-    constructor(rootElement: HTMLElement);
-    private static checkCssVarsSupport;
-    /**
-     * Возвращает значение CSS-переменной или фолбэк из JS.
-     */
-    getPropValue(propKey: string): string | undefined;
-    /**
-     * Применяет несколько свойств
-     */
-    setup(props: Record<string, string>): void;
-    /**
-     * Удаляет все сохранённые переменные со стилевого элемента
-     */
-    cleanup(): void;
-    /**
-     * Применяет одну переменную
-     */
-    setProp(key: string, value: string): void;
-}