@vkontakte/videoplayer-interactive 1.0.30-dev.9aa27113.0 → 1.0.30-dev.b736679d.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es2015.cjs.js +233 -5
- package/es2015.esm.js +234 -6
- package/es2018.cjs.js +234 -6
- package/es2018.esm.js +233 -5
- package/esnext.cjs.js +234 -6
- package/esnext.esm.js +234 -6
- package/evergreen.esm.js +234 -6
- package/package.json +4 -4
- package/types/modules/Interactives/Interactives.d.ts +19 -8
- package/types/modules/Interactives/Layout.d.ts +4 -0
- package/types/modules/Interactives/containers/ChoiceContainer.d.ts +16 -6
- package/types/modules/Interactives/containers/Container.d.ts +9 -6
- package/types/modules/Interactives/controls/AreaControl.d.ts +22 -2
- package/types/modules/Interactives/controls/ButtonControl.d.ts +27 -2
- package/types/modules/Interactives/controls/Control.d.ts +22 -9
- package/types/modules/Interactives/controls/types.d.ts +21 -7
- package/types/modules/Interactives/index.d.ts +69 -4
- package/types/modules/Interactives/styles.d.ts +1 -0
- package/types/modules/Interactives/types.d.ts +12 -4
- package/types/modules/Interactives/utils/BlinkAnimationReference.d.ts +2 -0
- package/types/modules/Interactives/utils/FillAnimation.d.ts +30 -0
- package/types/modules/Interactives/utils/GameController.d.ts +14 -6
- package/types/modules/Interactives/utils/InteractiveEvents.d.ts +2 -2
- package/types/modules/Interactives/utils/SelectBranches.d.ts +2 -1
- package/types/modules/Interactives/utils/SelectBranches.types.d.ts +1 -0
- package/types/modules/Interactives/utils/TapElement.d.ts +10 -0
- package/types/modules/Interactives/utils/events.types.d.ts +3 -1
- package/types/modules/Interactives/utils/renderingUtils.d.ts +15 -3
- package/types/utils/AverageColor/FrameAverageColor.d.ts +19 -0
- package/types/utils/AverageColor/helpers.d.ts +17 -0
- package/types/utils/AverageColor/index.d.ts +2 -0
- package/types/utils/getVideoContentSize.d.ts +1 -1
- package/types/utils/Binding.d.ts +0 -34
- package/types/utils/EventManager.d.ts +0 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vkontakte/videoplayer-interactive",
|
|
3
|
-
"version": "1.0.30-dev.
|
|
3
|
+
"version": "1.0.30-dev.b736679d.0",
|
|
4
4
|
"author": "vk.com",
|
|
5
5
|
"description": "Movika interactive SDK",
|
|
6
6
|
"homepage": "https://vk.com",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@interactiveplatform/movika-graph-editor": "1.11.0",
|
|
53
53
|
"@interactiveplatform/movika-manifest": "^1.0.0",
|
|
54
|
-
"@vkontakte/videoplayer-core": "2.0.124-dev.
|
|
55
|
-
"@vkontakte/videoplayer-shared": "1.0.53-dev.
|
|
56
|
-
"@vkontakte/videoplayer-statistics": "1.0.70-dev.
|
|
54
|
+
"@vkontakte/videoplayer-core": "2.0.124-dev.c81f9f40.0",
|
|
55
|
+
"@vkontakte/videoplayer-shared": "1.0.53-dev.9233f32f.0",
|
|
56
|
+
"@vkontakte/videoplayer-statistics": "1.0.70-dev.f572f826.0"
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -12,11 +12,11 @@ declare enum INTERACTIVE_APP_STATES {
|
|
|
12
12
|
destroyed = 3
|
|
13
13
|
}
|
|
14
14
|
export declare class Interactives {
|
|
15
|
-
private
|
|
15
|
+
private playerSubscriptions;
|
|
16
|
+
private subscriptions;
|
|
16
17
|
private globalEventEmitter;
|
|
17
18
|
private eventsSubs;
|
|
18
19
|
private animation;
|
|
19
|
-
private eventManager;
|
|
20
20
|
private seekToInteractiveController;
|
|
21
21
|
private endedRanges;
|
|
22
22
|
private gameControllers;
|
|
@@ -35,6 +35,7 @@ export declare class Interactives {
|
|
|
35
35
|
private graph;
|
|
36
36
|
private lastFrame;
|
|
37
37
|
private noInteractionTimeout;
|
|
38
|
+
private frameAverageColor;
|
|
38
39
|
appState: INTERACTIVE_APP_STATES;
|
|
39
40
|
state: {
|
|
40
41
|
prevChapter$: ValueSubject<Nullable<Chapter>>;
|
|
@@ -53,17 +54,27 @@ export declare class Interactives {
|
|
|
53
54
|
};
|
|
54
55
|
events: GlobalEvents;
|
|
55
56
|
constructor(options: IOptionalInteractiveOptions);
|
|
57
|
+
private getVideoFrameAverageColorInfo;
|
|
56
58
|
private emitErrorEvent;
|
|
57
59
|
private clearHistoryIfEnded;
|
|
58
60
|
private initSubscriptions;
|
|
61
|
+
private getGameControllerContainersWithExpect;
|
|
62
|
+
private execForAllExpectContainers;
|
|
63
|
+
private updateControlsShadowStyles;
|
|
64
|
+
private toggleControlsCTAAnimation;
|
|
59
65
|
private initSeamless;
|
|
60
66
|
private handleSeamlessPlayerChanged;
|
|
61
67
|
private onPlaybackStarted;
|
|
62
68
|
private handlePositionChange;
|
|
63
69
|
private registerVideoEvents;
|
|
64
|
-
|
|
70
|
+
removeGameControllersViews: ({ includeTextControls }?: {
|
|
71
|
+
includeTextControls?: boolean | undefined;
|
|
72
|
+
}) => void;
|
|
73
|
+
destroyGameControllers: ({ includeTextControls }?: {
|
|
74
|
+
includeTextControls?: boolean | undefined;
|
|
75
|
+
}) => void;
|
|
65
76
|
private setGameControllers;
|
|
66
|
-
private
|
|
77
|
+
private addGameControllers;
|
|
67
78
|
private checkIfSeekable;
|
|
68
79
|
private updateLastEventInfo;
|
|
69
80
|
private pushChapterToHistory;
|
|
@@ -87,7 +98,7 @@ export declare class Interactives {
|
|
|
87
98
|
setVisitedChapters(chapterIds: string[]): void;
|
|
88
99
|
updateGraphVideosInfo(videosInfo: VideoInfo[]): void;
|
|
89
100
|
deadEndCheck(): boolean;
|
|
90
|
-
allControlsAreRemoved(): boolean;
|
|
101
|
+
allControlsAreRemoved(includeWillRemovedState?: boolean): boolean;
|
|
91
102
|
isEndedExpectation(): boolean;
|
|
92
103
|
playPrevChapter(): void;
|
|
93
104
|
setDisabledControls(value: boolean): void;
|
|
@@ -114,9 +125,9 @@ export declare class Interactives {
|
|
|
114
125
|
graph: Nullable<import("@interactiveplatform/movika-manifest").GraphDesign>;
|
|
115
126
|
};
|
|
116
127
|
getCurrentManifest(): Nullable<Manifest>;
|
|
117
|
-
on(eventName: string, fn:
|
|
118
|
-
off(eventName: string, fn:
|
|
119
|
-
once(eventName: string, fn:
|
|
128
|
+
on(eventName: string, fn: AnyFn): this;
|
|
129
|
+
off(eventName: string, fn: AnyFn): this;
|
|
130
|
+
once(eventName: string, fn: AnyFn): this;
|
|
120
131
|
destroy(): void;
|
|
121
132
|
}
|
|
122
133
|
export {};
|
|
@@ -9,5 +9,9 @@ export declare class RelativeLayout extends Layout {
|
|
|
9
9
|
constructor(layout: ChapterContainer['layout']);
|
|
10
10
|
setContainerLayout(target: HTMLElement): void;
|
|
11
11
|
setControlLayout(target: HTMLElement, layoutParams: ControlLayoutParams): void;
|
|
12
|
+
getComputedDimensions(mountedElement: HTMLElement, layoutParams: ControlLayoutParams): {
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
};
|
|
12
16
|
}
|
|
13
17
|
export {};
|
|
@@ -1,18 +1,28 @@
|
|
|
1
1
|
import { Container } from './Container';
|
|
2
|
-
import { ChapterContainer } from
|
|
3
|
-
import {
|
|
4
|
-
export declare const createChoiceContainer: (container: ChapterContainer, rootElement: HTMLElement) => ChoiceContainer | undefined;
|
|
2
|
+
import { ChapterContainer, ControlTypes } from '../../../manifest';
|
|
3
|
+
import type { ChoiceContainerOptions, ContainerCreateView } from '../../../modules/Interactives/controls';
|
|
4
|
+
export declare const createChoiceContainer: (container: ChapterContainer, rootElement: HTMLElement, options: ChoiceContainerOptions) => ChoiceContainer | undefined;
|
|
5
5
|
export declare class ChoiceContainer extends Container {
|
|
6
6
|
private rootElement;
|
|
7
7
|
private layout;
|
|
8
8
|
isRemoved: boolean;
|
|
9
9
|
isDisabled: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
willRemoved: boolean;
|
|
11
|
+
constructor(container: ChapterContainer, rootElement: HTMLElement, options: ChoiceContainerOptions);
|
|
12
|
+
createView({ eventCallback, videoDurationMs }: ContainerCreateView): HTMLElement;
|
|
13
|
+
onProgress(currentTime: number, isInteractive: boolean): void;
|
|
14
|
+
onResize(): void;
|
|
12
15
|
hide(): void;
|
|
13
16
|
show(): void;
|
|
14
17
|
enable(): void;
|
|
15
18
|
disable(): void;
|
|
16
|
-
removeView(): void;
|
|
19
|
+
removeView(withTransition?: boolean, useDelay?: boolean): void;
|
|
20
|
+
private onTransitionEnd;
|
|
21
|
+
removeAllControls(withTransition?: boolean): void;
|
|
22
|
+
removeNonInteractedControls(withTransition?: boolean): void;
|
|
23
|
+
isInteracted(): boolean;
|
|
17
24
|
getElement(): HTMLElement | null;
|
|
25
|
+
toggleCTAAnimation(enable?: boolean): void;
|
|
26
|
+
updateControlsShadowStyles(isFrameBased?: boolean): void;
|
|
27
|
+
setupControlsBlinkAnimSync(ctrlElement: HTMLElement, controlType: Extract<`${ControlTypes}`, 'Button' | 'Area'>): void;
|
|
18
28
|
}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import Control from '../../../modules/Interactives/controls/Control';
|
|
2
|
-
import { ChapterContainer } from
|
|
3
|
-
import { ControlCreator } from
|
|
1
|
+
import { Control } from '../../../modules/Interactives/controls/Control';
|
|
2
|
+
import type { ChapterContainer } from '../../../manifest';
|
|
3
|
+
import type { ControlCreator, Options } from '../../../modules/Interactives/controls';
|
|
4
|
+
import { type ChoiceContainerOptions } from '../../../modules/Interactives/controls';
|
|
4
5
|
export declare class Container {
|
|
5
6
|
container: ChapterContainer;
|
|
6
|
-
private factories;
|
|
7
7
|
controls: Control[];
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
options?: Options;
|
|
9
|
+
private factories;
|
|
10
|
+
constructor(container: ChapterContainer, options?: Options);
|
|
11
|
+
addControlFactory(type: string, factory: ControlCreator<any>): void;
|
|
12
|
+
featureIsEnabled(name: keyof ChoiceContainerOptions['features']): boolean | undefined;
|
|
10
13
|
removeControlFactory(type: string): void;
|
|
11
14
|
private setControls;
|
|
12
15
|
private chooseControls;
|
|
@@ -1,2 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { Control } from './Control';
|
|
2
|
+
import { type ControlCreator, type CreateViewParams, type TControl, type ChoiceContainerOptions } from './types';
|
|
3
|
+
import { TapElement } from '../utils/TapElement';
|
|
4
|
+
export declare const createAreaControl: ControlCreator<ChoiceContainerOptions, AreaControl>;
|
|
5
|
+
declare class AreaControl extends Control {
|
|
6
|
+
tapElement?: TapElement;
|
|
7
|
+
constructor(control: TControl, options?: ChoiceContainerOptions);
|
|
8
|
+
createView({ parentElement, callbacks }: CreateViewParams): void;
|
|
9
|
+
onControlSelect: () => void;
|
|
10
|
+
updateShadowStyles(dependOnFrameTone?: boolean): void;
|
|
11
|
+
disable(): void;
|
|
12
|
+
enable(): void;
|
|
13
|
+
setShowTimeRange(): void;
|
|
14
|
+
onProgress(): void;
|
|
15
|
+
onResize(): void;
|
|
16
|
+
removeView(withTransition?: boolean): void;
|
|
17
|
+
onTransitionEnd: (event: TransitionEvent) => void;
|
|
18
|
+
removeListeners(): void;
|
|
19
|
+
getElement(): Nullable<HTMLElement>;
|
|
20
|
+
toggleCTAAnimation(enable?: boolean): void;
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -1,2 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { Control } from './Control';
|
|
2
|
+
import { type ControlCreator, type CreateViewParams, type TControl, type ChoiceContainerOptions } from './types';
|
|
3
|
+
import { FillAnimation } from '../utils/FillAnimation';
|
|
4
|
+
import { TapElement } from '../utils/TapElement';
|
|
5
|
+
export declare const createButtonControl: ControlCreator<ChoiceContainerOptions, ButtonControl>;
|
|
6
|
+
declare class ButtonControl extends Control {
|
|
7
|
+
startTime?: number;
|
|
8
|
+
endTime?: number;
|
|
9
|
+
fillAnimation?: FillAnimation;
|
|
10
|
+
tapElement?: TapElement;
|
|
11
|
+
constructor(control: TControl, options?: ChoiceContainerOptions);
|
|
12
|
+
createView({ parentElement, callbacks }: CreateViewParams): void;
|
|
13
|
+
onControlSelect: () => void;
|
|
14
|
+
disable(): void;
|
|
15
|
+
enable(): void;
|
|
16
|
+
setShowTimeRange(startTime: number, endTime: number): void;
|
|
17
|
+
onProgress(currentTime: number): void;
|
|
18
|
+
updateFillAnimationDimension(): void;
|
|
19
|
+
onResize(): void;
|
|
20
|
+
getElement(): Nullable<HTMLElement>;
|
|
21
|
+
removeView(withTransition?: boolean): void;
|
|
22
|
+
onTransitionEnd: (event: TransitionEvent) => void;
|
|
23
|
+
removeListeners(): void;
|
|
24
|
+
toggleCTAAnimation(enable?: boolean): void;
|
|
25
|
+
updateShadowStyles(): void;
|
|
26
|
+
}
|
|
27
|
+
export {};
|
|
@@ -1,20 +1,33 @@
|
|
|
1
|
-
import type { ControlEventCallback, CreateViewParams, Dimensions,
|
|
1
|
+
import type { ControlEventCallback, CreateViewParams, Dimensions, Callbacks, TControl, Options, ChoiceContainerOptions } from './types';
|
|
2
2
|
type ControlContainer = {
|
|
3
3
|
element: HTMLElement;
|
|
4
|
-
dimensions: Dimensions
|
|
4
|
+
dimensions: Dimensions<string>;
|
|
5
|
+
getComputedDimensions: () => Dimensions<number>;
|
|
6
|
+
isManifestContainerDisabled: () => boolean;
|
|
5
7
|
};
|
|
6
|
-
|
|
8
|
+
type ClickListener = (event: MouseEvent) => void;
|
|
9
|
+
export declare abstract class Control {
|
|
7
10
|
control: TControl;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
options?: Options | undefined;
|
|
12
|
+
container: Nullable<ControlContainer>;
|
|
13
|
+
controlElement: Nullable<HTMLElement>;
|
|
14
|
+
clickListener: Nullable<ClickListener>;
|
|
15
|
+
isInteracted: boolean;
|
|
16
|
+
isRemoved: boolean;
|
|
17
|
+
constructor(control: TControl, options?: Options | undefined);
|
|
12
18
|
abstract createView(params: CreateViewParams): void;
|
|
13
19
|
abstract getElement(): Nullable<HTMLElement>;
|
|
14
20
|
abstract disable(): void;
|
|
15
21
|
abstract enable(): void;
|
|
16
|
-
|
|
17
|
-
|
|
22
|
+
abstract onProgress(currentTime: number): void;
|
|
23
|
+
abstract onResize(): void;
|
|
24
|
+
abstract setShowTimeRange(startTime: number, endTime: number): void;
|
|
25
|
+
abstract removeView(withTransition?: boolean): void;
|
|
26
|
+
abstract toggleCTAAnimation(enable?: boolean): void;
|
|
27
|
+
abstract updateShadowStyles(isFrameBased?: boolean): void;
|
|
28
|
+
createContainerElement(callbacks: Callbacks): void;
|
|
29
|
+
createClickListener(callback: any): ClickListener;
|
|
30
|
+
featureIsEnabled(name: keyof ChoiceContainerOptions['features']): boolean | undefined;
|
|
18
31
|
setEvents(callback: ControlEventCallback): void;
|
|
19
32
|
removeListeners(): void;
|
|
20
33
|
}
|
|
@@ -1,24 +1,38 @@
|
|
|
1
1
|
import type { Control as TControl, ControlEvent, ControlLayoutParams } from '../../../manifest';
|
|
2
|
-
import
|
|
2
|
+
import type { ControlsAnimationFeatureToggles } from '../../../modules/Interactives/types';
|
|
3
|
+
import { Control } from '../../../modules/Interactives/controls/Control';
|
|
3
4
|
export { TControl };
|
|
4
5
|
export declare enum CONTROLLER_IDS {
|
|
5
6
|
AREA = "int_area",
|
|
6
7
|
TEXT = "int_text",
|
|
7
8
|
BUTTON = "int_bttn"
|
|
8
9
|
}
|
|
9
|
-
export type Dimensions = {
|
|
10
|
-
width:
|
|
11
|
-
height:
|
|
10
|
+
export type Dimensions<T = string> = {
|
|
11
|
+
width: T;
|
|
12
|
+
height: T;
|
|
13
|
+
};
|
|
14
|
+
export type Callbacks = {
|
|
15
|
+
setControlLayout: (element: HTMLElement, controlLayoutParams: ControlLayoutParams) => void;
|
|
16
|
+
getComputedDimensions: () => Dimensions<number>;
|
|
17
|
+
isContainerDisabled?: () => boolean;
|
|
12
18
|
};
|
|
13
|
-
export type LayoutCallback = (element: HTMLElement, controlLayoutParams: ControlLayoutParams) => void;
|
|
14
19
|
export type CreateViewParams = {
|
|
15
20
|
parentElement: HTMLElement;
|
|
16
|
-
|
|
21
|
+
callbacks: Callbacks;
|
|
17
22
|
};
|
|
18
23
|
type ControlEventCallbackParams = {
|
|
19
24
|
action: ControlEvent['action'];
|
|
20
25
|
controlId: string;
|
|
21
26
|
controlType: TControl['type'];
|
|
22
27
|
};
|
|
28
|
+
export type Options = Record<string, unknown>;
|
|
29
|
+
export type ChoiceContainerOptions = {
|
|
30
|
+
features: Pick<ControlsAnimationFeatureToggles, 'buttonControlInteractiveTimeTimer' | 'areaControlFrameBasedShadow' | 'tapPlaceShow' | 'controlsShowAnimation' | 'controlsCTAAnimation'>;
|
|
31
|
+
};
|
|
32
|
+
export declare function isChoiceContainerOptions(options: Options): options is ChoiceContainerOptions;
|
|
23
33
|
export type ControlEventCallback = (params: ControlEventCallbackParams) => void;
|
|
24
|
-
export type
|
|
34
|
+
export type ContainerCreateView = {
|
|
35
|
+
videoDurationMs: number;
|
|
36
|
+
eventCallback: ControlEventCallback;
|
|
37
|
+
};
|
|
38
|
+
export type ControlCreator<O extends Options = Options, C extends Control = Control> = (control: TControl, options?: O) => C | undefined;
|
|
@@ -6,9 +6,74 @@ export { isLastChapter, hasEndTemplate, isOneTextCtrlContainer } from './utils/g
|
|
|
6
6
|
export type { InteractiveRange } from './utils/getInteractiveRanges';
|
|
7
7
|
export declare const utils: {
|
|
8
8
|
Container: typeof Container;
|
|
9
|
-
createChoiceContainer: (container: import("@interactiveplatform/movika-manifest").ChapterContainer, rootElement: HTMLElement) => import("./containers/ChoiceContainer").ChoiceContainer | undefined;
|
|
10
|
-
createAreaControl: import("./controls").ControlCreator
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
createChoiceContainer: (container: import("@interactiveplatform/movika-manifest").ChapterContainer, rootElement: HTMLElement, options: import("./controls").ChoiceContainerOptions) => import("./containers/ChoiceContainer").ChoiceContainer | undefined;
|
|
10
|
+
createAreaControl: import("./controls").ControlCreator<import("./controls").ChoiceContainerOptions, {
|
|
11
|
+
tapElement?: import("./utils/TapElement").TapElement;
|
|
12
|
+
createView({ parentElement, callbacks }: import("./controls").CreateViewParams): void;
|
|
13
|
+
onControlSelect: () => void;
|
|
14
|
+
updateShadowStyles(dependOnFrameTone?: boolean): void;
|
|
15
|
+
disable(): void;
|
|
16
|
+
enable(): void;
|
|
17
|
+
setShowTimeRange(): void;
|
|
18
|
+
onProgress(): void;
|
|
19
|
+
onResize(): void;
|
|
20
|
+
removeView(withTransition?: boolean): void;
|
|
21
|
+
onTransitionEnd: (event: TransitionEvent) => void;
|
|
22
|
+
removeListeners(): void;
|
|
23
|
+
getElement(): Nullable<HTMLElement>;
|
|
24
|
+
toggleCTAAnimation(enable?: boolean): void;
|
|
25
|
+
container: Nullable<{
|
|
26
|
+
element: HTMLElement;
|
|
27
|
+
dimensions: import("./controls").Dimensions<string>;
|
|
28
|
+
getComputedDimensions: () => import("./controls").Dimensions<number>;
|
|
29
|
+
isManifestContainerDisabled: () => boolean;
|
|
30
|
+
}>;
|
|
31
|
+
controlElement: Nullable<HTMLElement>;
|
|
32
|
+
clickListener: Nullable<(event: MouseEvent) => void>;
|
|
33
|
+
isInteracted: boolean;
|
|
34
|
+
isRemoved: boolean;
|
|
35
|
+
control: import("@interactiveplatform/movika-manifest/dist/chapter-COPBtRYg").e;
|
|
36
|
+
options?: import("./controls").Options;
|
|
37
|
+
createContainerElement(callbacks: import("./controls").Callbacks): void;
|
|
38
|
+
createClickListener(callback: any): (event: MouseEvent) => void;
|
|
39
|
+
featureIsEnabled(name: keyof import("./controls").ChoiceContainerOptions["features"]): boolean | undefined;
|
|
40
|
+
setEvents(callback: import("./controls").ControlEventCallback): void;
|
|
41
|
+
}>;
|
|
42
|
+
createButtonControl: import("./controls").ControlCreator<import("./controls").ChoiceContainerOptions, {
|
|
43
|
+
startTime?: number;
|
|
44
|
+
endTime?: number;
|
|
45
|
+
fillAnimation?: import("./utils/FillAnimation").FillAnimation;
|
|
46
|
+
tapElement?: import("./utils/TapElement").TapElement;
|
|
47
|
+
createView({ parentElement, callbacks }: import("./controls").CreateViewParams): void;
|
|
48
|
+
onControlSelect: () => void;
|
|
49
|
+
disable(): void;
|
|
50
|
+
enable(): void;
|
|
51
|
+
setShowTimeRange(startTime: number, endTime: number): void;
|
|
52
|
+
onProgress(currentTime: number): void;
|
|
53
|
+
updateFillAnimationDimension(): void;
|
|
54
|
+
onResize(): void;
|
|
55
|
+
getElement(): Nullable<HTMLElement>;
|
|
56
|
+
removeView(withTransition?: boolean): void;
|
|
57
|
+
onTransitionEnd: (event: TransitionEvent) => void;
|
|
58
|
+
removeListeners(): void;
|
|
59
|
+
toggleCTAAnimation(enable?: boolean): void;
|
|
60
|
+
updateShadowStyles(): void;
|
|
61
|
+
container: Nullable<{
|
|
62
|
+
element: HTMLElement;
|
|
63
|
+
dimensions: import("./controls").Dimensions<string>;
|
|
64
|
+
getComputedDimensions: () => import("./controls").Dimensions<number>;
|
|
65
|
+
isManifestContainerDisabled: () => boolean;
|
|
66
|
+
}>;
|
|
67
|
+
controlElement: Nullable<HTMLElement>;
|
|
68
|
+
clickListener: Nullable<(event: MouseEvent) => void>;
|
|
69
|
+
isInteracted: boolean;
|
|
70
|
+
isRemoved: boolean;
|
|
71
|
+
control: import("@interactiveplatform/movika-manifest/dist/chapter-COPBtRYg").e;
|
|
72
|
+
options?: import("./controls").Options;
|
|
73
|
+
createContainerElement(callbacks: import("./controls").Callbacks): void;
|
|
74
|
+
createClickListener(callback: any): (event: MouseEvent) => void;
|
|
75
|
+
featureIsEnabled(name: keyof import("./controls").ChoiceContainerOptions["features"]): boolean | undefined;
|
|
76
|
+
setEvents(callback: import("./controls").ControlEventCallback): void;
|
|
77
|
+
}>;
|
|
13
78
|
classnamesPrefix: string;
|
|
14
79
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const apply: (attachToElement: HTMLElement) => void;
|
|
@@ -19,7 +19,15 @@ export type RequiredOptions = 'parentElement' | 'fullscreenTargetElement';
|
|
|
19
19
|
export type IOptionalInteractiveOptions = Partial<Omit<IInteractiveOptions, RequiredOptions | 'config'>> & Required<Pick<IInteractiveOptions, RequiredOptions>> & {
|
|
20
20
|
config?: Partial<IInteractiveOptions['config']>;
|
|
21
21
|
};
|
|
22
|
-
export
|
|
22
|
+
export type ControlsAnimationFeatureToggles = {
|
|
23
|
+
buttonControlInteractiveTimeTimer: boolean;
|
|
24
|
+
areaControlFrameBasedShadow: boolean;
|
|
25
|
+
tapPlaceShow: boolean;
|
|
26
|
+
controlsCTAAnimation: boolean;
|
|
27
|
+
controlsShowAnimation: boolean;
|
|
28
|
+
controlsHideAnimation: boolean;
|
|
29
|
+
};
|
|
30
|
+
export type IInteractiveOptions = {
|
|
23
31
|
parentElement: HTMLElement;
|
|
24
32
|
fullscreenTargetElement: HTMLElement;
|
|
25
33
|
lang: InterfaceLanguage | string;
|
|
@@ -40,10 +48,10 @@ export interface IInteractiveOptions {
|
|
|
40
48
|
vkVideoLoader?: (owner_id: string, video_id: string) => unknown;
|
|
41
49
|
createOneStat?: (video: any, configOverwrite?: any) => IOneStat | undefined;
|
|
42
50
|
/**
|
|
43
|
-
|
|
44
|
-
|
|
51
|
+
* @deprecated
|
|
52
|
+
* */
|
|
45
53
|
disableControlsOnPause?: boolean;
|
|
46
|
-
}
|
|
54
|
+
} & ControlsAnimationFeatureToggles;
|
|
47
55
|
export type ChapterChangedData = {
|
|
48
56
|
chapter: Chapter;
|
|
49
57
|
manifestVideo: ManifestVideo;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export declare function normalizeRadians(rad: number): number;
|
|
2
|
+
export declare function radiansToDegrees(rad: number): number;
|
|
3
|
+
export type Options = {
|
|
4
|
+
startTime: number;
|
|
5
|
+
endTime: number;
|
|
6
|
+
rotateAngle: number;
|
|
7
|
+
borderRadius: string;
|
|
8
|
+
debug?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare class FillAnimation {
|
|
11
|
+
fillAnimationElement: HTMLDivElement;
|
|
12
|
+
private fillAnimationFillerElement;
|
|
13
|
+
private fillAnimationFillerWrapperElement;
|
|
14
|
+
private startTime;
|
|
15
|
+
private endTime;
|
|
16
|
+
private shouldFillHeight;
|
|
17
|
+
private widthExpansionCoef;
|
|
18
|
+
private isDebug;
|
|
19
|
+
private fromLeft;
|
|
20
|
+
private useSkew;
|
|
21
|
+
private rotateAngle;
|
|
22
|
+
constructor(opts: Options);
|
|
23
|
+
updateDimension(opts: {
|
|
24
|
+
width: number;
|
|
25
|
+
height: number;
|
|
26
|
+
borderWidth: number;
|
|
27
|
+
}): void;
|
|
28
|
+
updateAnimation(currentTime: number): void;
|
|
29
|
+
private calcWidthExpansionCoef;
|
|
30
|
+
}
|
|
@@ -3,15 +3,17 @@ import { type IPlayer } from '@vkontakte/videoplayer-core';
|
|
|
3
3
|
import type { InteractiveEventsType } from './InteractiveEvents';
|
|
4
4
|
import type { ChapterBranch } from '../../../manifest';
|
|
5
5
|
import type { EventEmitter } from '../../../utils/EventEmitter';
|
|
6
|
-
import type {
|
|
7
|
-
import {
|
|
6
|
+
import type { ControlsAnimationFeatureToggles } from '../../../modules/Interactives/types';
|
|
7
|
+
import type { ChoiceContainer } from '../../../modules/Interactives/containers';
|
|
8
|
+
import type { SelectBranchesType } from './SelectBranches';
|
|
8
9
|
import { type GlobalEvents } from './events';
|
|
9
10
|
import { GameStates } from './gameUtils';
|
|
11
|
+
type Features = Pick<ControlsAnimationFeatureToggles, 'controlsHideAnimation'>;
|
|
10
12
|
type ConstructorArg = {
|
|
11
13
|
player: IPlayer;
|
|
12
14
|
container: ChoiceContainer;
|
|
13
15
|
branches: ChapterBranch[];
|
|
14
|
-
selectBranches: ReturnType<
|
|
16
|
+
selectBranches: ReturnType<SelectBranchesType>;
|
|
15
17
|
interactiveEvents: InteractiveEventsType;
|
|
16
18
|
globalEventEmitter: EventEmitter;
|
|
17
19
|
globalEvents: GlobalEvents;
|
|
@@ -19,11 +21,12 @@ type ConstructorArg = {
|
|
|
19
21
|
permanentTextControls: boolean;
|
|
20
22
|
disabledControls$: IValueSubject<boolean>;
|
|
21
23
|
onRemove: () => void;
|
|
24
|
+
features: Features;
|
|
22
25
|
};
|
|
23
26
|
export declare class GameController {
|
|
24
27
|
container: ChoiceContainer;
|
|
25
28
|
branches: ChapterBranch[];
|
|
26
|
-
selectBranches: ReturnType<
|
|
29
|
+
selectBranches: ReturnType<SelectBranchesType>;
|
|
27
30
|
subscription: ISubscription;
|
|
28
31
|
player: IPlayer;
|
|
29
32
|
interactiveEvents: InteractiveEventsType;
|
|
@@ -36,7 +39,8 @@ export declare class GameController {
|
|
|
36
39
|
isSelectedControlEvent: boolean;
|
|
37
40
|
isSelectedContainerEvent: boolean;
|
|
38
41
|
globalEvents: GlobalEvents;
|
|
39
|
-
|
|
42
|
+
features: Features;
|
|
43
|
+
constructor({ player, container, branches, selectBranches, interactiveEvents, globalEvents, globalEventEmitter, ignoreContainerEvent, permanentTextControls, disabledControls$, onRemove, features, }: ConstructorArg);
|
|
40
44
|
private emitContainerVisibilityEvent;
|
|
41
45
|
registerEvents(): void;
|
|
42
46
|
hide: () => void;
|
|
@@ -48,7 +52,11 @@ export declare class GameController {
|
|
|
48
52
|
onEndOfVideo: () => void;
|
|
49
53
|
whilePlaying: () => void;
|
|
50
54
|
reset(): void;
|
|
51
|
-
|
|
55
|
+
isInteracted(): boolean;
|
|
56
|
+
isRemovedOrDestroyed(includeWillRemovedState?: boolean): boolean;
|
|
57
|
+
removeView(withTransition?: boolean): void;
|
|
58
|
+
toggleControlsCTAAnimation(value: boolean): void;
|
|
59
|
+
updateControlsShadowStyles(isFrameBased?: boolean): void;
|
|
52
60
|
destroy(): void;
|
|
53
61
|
}
|
|
54
62
|
export {};
|
|
@@ -18,8 +18,8 @@ export declare function InteractiveEvents(player: IPlayer): {
|
|
|
18
18
|
release: () => void;
|
|
19
19
|
containersEventsCallState: {
|
|
20
20
|
setCalled: ({ timestamp, id }: {
|
|
21
|
-
timestamp:
|
|
22
|
-
id:
|
|
21
|
+
timestamp: number;
|
|
22
|
+
id: string;
|
|
23
23
|
}) => void;
|
|
24
24
|
setData: (containers?: Container[]) => void;
|
|
25
25
|
resetCalled: (timestamp: number) => void;
|
|
@@ -7,7 +7,7 @@ export declare const defaultArgs: {
|
|
|
7
7
|
export declare const AFTER_EXPECT_ACTION: AfterExpectActionType;
|
|
8
8
|
export declare const extendArgs: <T extends AnyAction>(action: T, rewrite?: boolean) => T;
|
|
9
9
|
export type ExtendArgsReturnType = ReturnType<typeof extendArgs>;
|
|
10
|
-
export declare const SelectBranches: ({ globalEventEmitter, globalEvents, player, interactiveEvents
|
|
10
|
+
export declare const SelectBranches: ({ globalEventEmitter, globalEvents, player, interactiveEvents }: SelectBranchesArg) => {
|
|
11
11
|
onControlEvent: ({ action, controlType, controlId, containerId, branches, onEvent, isEOV, isDisabled, }: OnControlEventArg) => void;
|
|
12
12
|
onContainerEvent: ({ action, container: { id: containerId, endTime }, branches, isEOV, autoSelected, }: OnContainerEventArg) => void;
|
|
13
13
|
onChapterEvent: ({ chapterId, action, branches }: OnChapterEventArg) => (() => ContinuePlaybackArg<"chapter">) | undefined;
|
|
@@ -20,3 +20,4 @@ export declare const SelectBranches: ({ globalEventEmitter, globalEvents, player
|
|
|
20
20
|
isExpect: boolean;
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
|
+
export type SelectBranchesType = typeof SelectBranches;
|
|
@@ -6,6 +6,7 @@ import type { GlobalEvents } from './events';
|
|
|
6
6
|
export type SubjectName = 'chapter' | 'container' | 'control';
|
|
7
7
|
export type AfterExpectActionType = 'after-expect';
|
|
8
8
|
export type Behaviour = 'change-chapter' | 'change-manifest';
|
|
9
|
+
export type ControlAfterExpectCallbackType = () => ExpectEventHandlerArg<'control'>;
|
|
9
10
|
export type SelectBranchesArg = {
|
|
10
11
|
globalEventEmitter: EventEmitter;
|
|
11
12
|
globalEvents: GlobalEvents;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export declare class TapElement {
|
|
2
|
+
element: HTMLDivElement;
|
|
3
|
+
controlRotateAngleRad: number;
|
|
4
|
+
clickCancelCondition: () => boolean;
|
|
5
|
+
constructor(controlRotateAngleRad: number, clickCancelCondition: () => boolean);
|
|
6
|
+
onElementClick: (e: Event & {
|
|
7
|
+
clientX: number;
|
|
8
|
+
clientY: number;
|
|
9
|
+
}) => void;
|
|
10
|
+
}
|
|
@@ -35,9 +35,11 @@ export type TInteractivesActionExecutionEvent<T extends SubjectName> = TInteract
|
|
|
35
35
|
subjectType?: SubjectType<T>;
|
|
36
36
|
payload?: TInteractivesActionExecEventPayload<ActionMap[T]['type']>;
|
|
37
37
|
};
|
|
38
|
-
type
|
|
38
|
+
type TControlPayloadExtra = {
|
|
39
39
|
containerId: string;
|
|
40
|
+
invokeImmediately: boolean;
|
|
40
41
|
};
|
|
42
|
+
type TInteractivesActionChoiceEventPayload<T extends SubjectName> = T extends 'chapter' ? ChapterEvent['action']['args'] : T extends 'container' ? ContainerEvent['action']['args'] & Pick<TControlPayloadExtra, 'invokeImmediately'> : ControlEvent['action']['args'] & TControlPayloadExtra;
|
|
41
43
|
type TSubjectTypeValues<T extends SubjectName> = T extends 'chapter' ? undefined : T extends 'container' ? ChapterContainer['type'] : Control['type'];
|
|
42
44
|
export type TInteractivesActionChoiceEvent<T extends SubjectName> = TInteractiveCommon<T, InteractivesEventTypes.ACTION_CHOICE | InteractivesEventTypes.ACTION_CHOICE_CANCELED> & {
|
|
43
45
|
subjectType?: TSubjectTypeValues<T>;
|
|
@@ -2,20 +2,23 @@ import { type Control } from '../../../manifest';
|
|
|
2
2
|
import { type Dimensions } from '../../../modules/Interactives/controls';
|
|
3
3
|
export declare const classnamesPrefix = "interactive";
|
|
4
4
|
export declare const rootElClassName = "interactive-controls-container";
|
|
5
|
-
export declare const getRootEl: () => Element | null;
|
|
6
|
-
export declare const DISABLE_OPACITY = 0.4;
|
|
7
5
|
export declare const controlStylesFallbacks: {
|
|
8
6
|
textColor: string;
|
|
9
7
|
textSize: number;
|
|
10
8
|
textContent: string;
|
|
11
9
|
roundCorners: number;
|
|
12
10
|
borderWidth: number;
|
|
11
|
+
borderWidthRawValue: string;
|
|
12
|
+
roundCornersRawValue: string;
|
|
13
13
|
borderColor: string;
|
|
14
14
|
borderAlpha: number;
|
|
15
15
|
backgroundColor: string;
|
|
16
16
|
backgroundAlpha: number;
|
|
17
17
|
innerSizesDependOn: string;
|
|
18
18
|
angle: number;
|
|
19
|
+
shadowColorLight: string;
|
|
20
|
+
shadowColorDark: string;
|
|
21
|
+
shadowColorAlpha: number;
|
|
19
22
|
};
|
|
20
23
|
type ControlStylesFallbacks = typeof controlStylesFallbacks;
|
|
21
24
|
export declare enum ALIGN_ITEMS {
|
|
@@ -58,8 +61,17 @@ type SetBorderStylesProps = {
|
|
|
58
61
|
props: Control['props'];
|
|
59
62
|
fallback: ControlStylesFallbacks;
|
|
60
63
|
dependsOn: Dimensions;
|
|
64
|
+
useRawValues?: boolean;
|
|
61
65
|
};
|
|
62
|
-
export declare const setBorderStyles: ({ target, props, fallback, dependsOn }: SetBorderStylesProps) => void;
|
|
66
|
+
export declare const setBorderStyles: ({ target, props, fallback, dependsOn, useRawValues }: SetBorderStylesProps) => void;
|
|
67
|
+
type SetShadowStylesProps = {
|
|
68
|
+
target: HTMLElement;
|
|
69
|
+
props?: Control['props'];
|
|
70
|
+
fallback: ControlStylesFallbacks;
|
|
71
|
+
frameToneIsDark: boolean;
|
|
72
|
+
baseDimension: string;
|
|
73
|
+
};
|
|
74
|
+
export declare const setShadowStyles: ({ target, frameToneIsDark, baseDimension, fallback }: SetShadowStylesProps) => void;
|
|
63
75
|
type SetAngleProps = {
|
|
64
76
|
target: HTMLElement;
|
|
65
77
|
fallback: ControlStylesFallbacks;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type Options } from './helpers';
|
|
2
|
+
export declare class FrameAverageColor {
|
|
3
|
+
canvas: HTMLCanvasElement | OffscreenCanvas | null;
|
|
4
|
+
ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null;
|
|
5
|
+
getColorAsync(resource: HTMLVideoElement, options: Options): Promise<{
|
|
6
|
+
rgba: string;
|
|
7
|
+
isDark: boolean;
|
|
8
|
+
error: Error | undefined;
|
|
9
|
+
}>;
|
|
10
|
+
getColor(resource: HTMLVideoElement, options: Options): {
|
|
11
|
+
rgba: string;
|
|
12
|
+
isDark: boolean;
|
|
13
|
+
error: Error | undefined;
|
|
14
|
+
};
|
|
15
|
+
private getColorFromArray;
|
|
16
|
+
private sqrtAlgorithm;
|
|
17
|
+
private prepareResult;
|
|
18
|
+
destroy(): void;
|
|
19
|
+
}
|