UNPKG

3.75 kBTypeScriptView Raw
1import * as React from 'react';
2import Plyr from 'plyr';
3import { IWithIntlProps } from '@kano/kbc-intl';
4import { ITracking } from '@kano/kbc-telemetry';
5import './styles/main.scss';
6interface VideoPlyrProps extends IWithIntlProps {
7 url: string;
8 action: (event: string) => void;
9 showCountdown: boolean;
10 counter: number;
11 height: number;
12 provider: 'default' | 'youtube';
13}
14export declare const VideoPlyr: React.ForwardRefExoticComponent<Pick<VideoPlyrProps, "url" | "height" | "action" | "showCountdown" | "counter" | "provider"> & {
15 forwardedRef?: React.Ref<any>;
16} & React.RefAttributes<any>> & {
17 WrappedComponent: React.ComponentType<VideoPlyrProps>;
18};
19interface SizingConfig {
20 top?: number;
21 bottom?: number;
22 left?: number;
23 defaultSize?: number;
24 mediumSize?: number;
25 defaultRatio?: number;
26 mediumRatio?: number;
27}
28interface Step {
29 video?: string;
30 image?: string;
31 instruction: string;
32}
33interface VideoProps {
34 type: string;
35 title: false | string;
36 vidSrc?: string;
37 steps?: Array<Step>;
38 bounds?: {
39 left: number;
40 top: number;
41 right: number;
42 bottom: number;
43 } | string;
44 sizingConfig?: SizingConfig;
45 tracking?: ITracking;
46 onVideoAction?: (action: string, step?: number) => void;
47 icons?: {
48 headerStatic?: false | React.ReactNode;
49 headerHappy?: 'default' | React.ReactNode;
50 headerExcited?: 'default' | React.ReactNode;
51 headerBored?: 'default' | React.ReactNode;
52 };
53 actions?: {
54 minimise?: boolean;
55 expand?: boolean;
56 close?: boolean;
57 };
58 draggable?: boolean;
59 provider?: 'default' | 'youtube';
60}
61interface VideoState {
62 videoSize: number;
63 ratio: number;
64 endedAnimate: boolean;
65 stage: number;
66 finalStage: number;
67 unlockedSteps: Array<any>;
68 minimised: boolean;
69 currentTranslation: string;
70 showCountdown: boolean;
71 counter: number;
72 inactive: boolean;
73 isPlaying: boolean;
74 isSizeDefault: boolean;
75}
76declare class KbcVideo extends React.Component<VideoProps, VideoState> {
77 videoSize: number;
78 player: Plyr;
79 videoRef: any;
80 inactiveInterval: NodeJS.Timer;
81 counterInterval: NodeJS.Timer;
82 isPlayingInterval: NodeJS.Timer;
83 static defaultProps: {
84 type: string;
85 title: boolean;
86 vidSrc: string;
87 bounds: string;
88 sizingConfig: {
89 bottom: number;
90 defaultSize: number;
91 mediumSize: number;
92 defaultRatio: number;
93 mediumRatio: number;
94 };
95 icons: {
96 headerStatic: boolean;
97 headerHappy: string;
98 headerExcited: string;
99 headerBored: string;
100 };
101 actions: {
102 minimise: boolean;
103 expand: boolean;
104 close: boolean;
105 };
106 draggable: boolean;
107 provider: string;
108 };
109 constructor(props: VideoProps);
110 componentDidMount(): void;
111 componentDidUpdate(prevProps: VideoProps): void;
112 componentWillUnmount(): void;
113 startInactiveInterval(): void;
114 setInactivity: () => void;
115 startIsPlaying(): void;
116 clearIsPlaying(): void;
117 setVideoSize(): void;
118 videoAction(event: string, stage?: number): void;
119 setStage(newStage: number, action?: string): void;
120 setMinimised(): void;
121 handleOnClose(): void;
122 setUnlockedSteps(newStage: number): void;
123 videoEnded(stage: number): void;
124 endAnimation(): void;
125 canGoBack(stage: number): boolean;
126 canGoForward(stage: number, finalStage: number): boolean;
127 canMove(i: number): boolean;
128 render(): JSX.Element;
129}
130export default KbcVideo;
131//# sourceMappingURL=index.d.ts.map
\No newline at end of file