@devix-technologies/react-gjirafa-vp-player 1.0.30 → 1.0.31-beta.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/README.md +95 -707
- package/dist/index.d.ts +897 -9
- package/dist/react-gjirafa-vp-player.es.js +1138 -1380
- package/dist/react-gjirafa-vp-player.umd.js +12 -11
- package/package.json +19 -24
- package/dist/App.d.ts +0 -2
- package/dist/components/Feedback.d.ts +0 -25
- package/dist/components/VPPlayer/index.d.ts +0 -2
- package/dist/components/VPPlayer/ui/index.d.ts +0 -1
- package/dist/components/VPPlayer/ui/styled.d.ts +0 -42
- package/dist/config/index.d.ts +0 -1
- package/dist/config/vpPlayerConfig.d.ts +0 -9
- package/dist/constants/configs.d.ts +0 -22
- package/dist/constants/index.d.ts +0 -1
- package/dist/constants/storybook.d.ts +0 -9
- package/dist/constants/styles.d.ts +0 -11
- package/dist/constants/urls.d.ts +0 -18
- package/dist/constants/vpPlayer.d.ts +0 -47
- package/dist/contexts/VPPlayerContext.d.ts +0 -52
- package/dist/contexts/index.d.ts +0 -1
- package/dist/features/VPPlayer.d.ts +0 -41
- package/dist/features/stories/ads/Ads.stories.d.ts +0 -20
- package/dist/features/stories/context/Context.stories.d.ts +0 -10
- package/dist/features/stories/index.d.ts +0 -3
- package/dist/features/stories/playback/Playback.stories.d.ts +0 -38
- package/dist/fixtures/index.d.ts +0 -1
- package/dist/fixtures/playlist.d.ts +0 -11
- package/dist/hooks/index.d.ts +0 -4
- package/dist/hooks/useVPPlayerEvents.d.ts +0 -24
- package/dist/hooks/useVPPlayerLogic.d.ts +0 -22
- package/dist/hooks/useVPPlayerScript.d.ts +0 -13
- package/dist/hooks/useVideoData.d.ts +0 -19
- package/dist/interfaces/config.d.ts +0 -314
- package/dist/interfaces/index.d.ts +0 -3
- package/dist/interfaces/instance.d.ts +0 -73
- package/dist/interfaces/props.d.ts +0 -77
- package/dist/main.d.ts +0 -0
- package/dist/types/api.types.d.ts +0 -81
- package/dist/types/index.d.ts +0 -2
- package/dist/types/playerEvents.types.d.ts +0 -67
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/vpPlayerConfigBuilder.d.ts +0 -30
- package/dist/utils/vpPlayerUtils.d.ts +0 -8
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { VPPlayerProps } from '../../../../../../src/interfaces';
|
|
3
|
-
/**
|
|
4
|
-
* Interface defining the parameters for initializing the VPPlayer.
|
|
5
|
-
*
|
|
6
|
-
* @interface PlayerParams
|
|
7
|
-
*/
|
|
8
|
-
interface PlayerParams {
|
|
9
|
-
playerId?: string;
|
|
10
|
-
videoId?: string;
|
|
11
|
-
projectId?: string;
|
|
12
|
-
videoUrl?: string;
|
|
13
|
-
playlistId?: string;
|
|
14
|
-
scriptUrl?: string;
|
|
15
|
-
version?: string | null;
|
|
16
|
-
config?: VPPlayerProps["config"];
|
|
17
|
-
thumbnailUrl?: string;
|
|
18
|
-
isReels?: boolean;
|
|
19
|
-
hiddenClasses?: string[];
|
|
20
|
-
className?: string;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Interface defining the context for VPPlayer.
|
|
24
|
-
*
|
|
25
|
-
* @interface VPPlayerContextType
|
|
26
|
-
*/
|
|
27
|
-
interface VPPlayerContextType {
|
|
28
|
-
showPlayer: (params: PlayerParams) => void;
|
|
29
|
-
hidePlayer: () => void;
|
|
30
|
-
isPlayerVisible: boolean;
|
|
31
|
-
playerParams: PlayerParams | null;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* VPPlayerProvider component provides context for managing the VPPlayer state.
|
|
35
|
-
*
|
|
36
|
-
* @function
|
|
37
|
-
* @param {Object} props - The component props.
|
|
38
|
-
* @param {React.ReactNode} props.children - The child components.
|
|
39
|
-
* @returns {JSX.Element} The provider component for VPPlayer.
|
|
40
|
-
*/
|
|
41
|
-
export declare const VPPlayerProvider: React.FC<{
|
|
42
|
-
children: React.ReactNode;
|
|
43
|
-
}>;
|
|
44
|
-
/**
|
|
45
|
-
* Hook for accessing the VPPlayer context.
|
|
46
|
-
*
|
|
47
|
-
* @function
|
|
48
|
-
* @throws {Error} If used outside of the VPPlayerProvider.
|
|
49
|
-
* @returns {VPPlayerContextType} The VPPlayer context.
|
|
50
|
-
*/
|
|
51
|
-
export declare const useVPPlayer: () => VPPlayerContextType;
|
|
52
|
-
export {};
|
package/dist/contexts/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './VPPlayerContext';
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { VPPlayerProps } from '../../../../../../src/interfaces';
|
|
2
|
-
/**
|
|
3
|
-
* Video Player Component for rendering a video player with overlay and responsive behavior.
|
|
4
|
-
* Handles initialization of the player and displays loading/error states.
|
|
5
|
-
*
|
|
6
|
-
* @function
|
|
7
|
-
* @param {VPPlayerProps} props - The properties for configuring the video player.
|
|
8
|
-
* @param {string} props.playerId - Unique identifier for the player instance.
|
|
9
|
-
* @param {string} [props.videoId] - ID of the video to be played.
|
|
10
|
-
* @param {string} [props.version] - Version of the player.
|
|
11
|
-
* @param {string} [props.videoUrl] - Direct video URL (bypasses API calls).
|
|
12
|
-
* @param {string} [props.projectId] - Project ID associated with the video.
|
|
13
|
-
* @param {string} [props.playlistId] - Playlist ID if playing a collection of videos.
|
|
14
|
-
* @param {string} [props.scriptUrl] - URL of the video player script.
|
|
15
|
-
* @param {object} [props.config={}] - Configuration settings for the player.
|
|
16
|
-
* @param {boolean} [props.isReels=false] - Determines if the player should behave as a short-video reel.
|
|
17
|
-
* @param {string[]} [props.hiddenClasses=[]] - CSS classes to hide player elements.
|
|
18
|
-
* @param {function} [props.onClose] - Callback triggered when the player is closed.
|
|
19
|
-
* @param {boolean} [props.isPlayerVisible=false] - Controls the initial visibility of the player.
|
|
20
|
-
* @param {string} [props.className] - CSS class name for additional styling.
|
|
21
|
-
* @param {function} [props.onPlaylistData] - Callback triggered when the playlist data is loaded.
|
|
22
|
-
* @param {function} [props.onVideoStarted] - Callback triggered when the video starts playing.
|
|
23
|
-
* @param {object} [props.trackingMetadata] - Video metadata for tracking/analytics callbacks.
|
|
24
|
-
* @param {function} [props.onPlayerStart] - Callback triggered when the player starts playing.
|
|
25
|
-
* @param {function} [props.onPlayerPlay] - Callback triggered when the player plays.
|
|
26
|
-
* @param {function} [props.onPlayerPause] - Callback triggered when the player pauses.
|
|
27
|
-
* @param {function} [props.onPlayerResume] - Callback triggered when the player resumes.
|
|
28
|
-
* @param {function} [props.onPlayerEnd] - Callback triggered when the player ends.
|
|
29
|
-
* @param {function} [props.onPlayerProgressEvery10Seconds] - Callback triggered every 10 seconds.
|
|
30
|
-
* @param {function} [props.onPlayerProgressAt20Seconds] - Callback triggered at 20 seconds.
|
|
31
|
-
* @param {function} [props.onPlayerQuartile25] - Callback triggered at 25% quartile.
|
|
32
|
-
* @param {function} [props.onPlayerQuartile50] - Callback triggered at 50% quartile.
|
|
33
|
-
* @param {function} [props.onPlayerQuartile75] - Callback triggered at 75% quartile.
|
|
34
|
-
* @param {function} [props.onPlayerNext] - Callback triggered when the player goes to the next video.
|
|
35
|
-
* @param {function} [props.onPlayerEvent] - Callback triggered for all events.
|
|
36
|
-
* @returns {JSX.Element} The rendered video player component.
|
|
37
|
-
*/
|
|
38
|
-
declare const VPPlayer: ({ playerId, videoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, hiddenClasses, onClose, className, onPlaylistData, onVideoStarted, trackingMetadata, onPlayerStart, onPlayerPlay, onPlayerPause, onPlayerResume, onPlayerEnd, onPlayerProgressEvery10Seconds, onPlayerProgressAt20Seconds, onPlayerQuartile25, onPlayerQuartile50, onPlayerQuartile75, onPlayerNext, onPlayerPrevious, onPlayerEvent, }: VPPlayerProps & {
|
|
39
|
-
className?: string;
|
|
40
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
41
|
-
export default VPPlayer;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { VPPlayer } from '../../../../../../../../src/components/VPPlayer';
|
|
3
|
-
import { VPPlayerInstance } from '../../../../../../../../src/interfaces';
|
|
4
|
-
declare global {
|
|
5
|
-
interface Window {
|
|
6
|
-
vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
declare const meta: Meta<typeof VPPlayer>;
|
|
10
|
-
export default meta;
|
|
11
|
-
type Story = StoryObj<typeof VPPlayer>;
|
|
12
|
-
export declare const SingleVideoOnePrerollAd: Story;
|
|
13
|
-
export declare const SingleVideoOnePostrollAd: Story;
|
|
14
|
-
export declare const SingleVideoMultiplePrerollAds: Story;
|
|
15
|
-
export declare const PlaylistOnePrerollEveryAd: Story;
|
|
16
|
-
export declare const PlaylistOneMidrollAd: Story;
|
|
17
|
-
export declare const PlaylistOnePostrollAddEveryVideo: Story;
|
|
18
|
-
export declare const PlaylistMultiplePrerollAdsEveryVideo: Story;
|
|
19
|
-
export declare const PlaylistMultipleMidrollAds: Story;
|
|
20
|
-
export declare const PictureInPictureDemoWithAds: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { VPPlayer } from '../../../../../../../../src/components/VPPlayer';
|
|
3
|
-
declare const meta: Meta<typeof VPPlayer>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof VPPlayer>;
|
|
6
|
-
export declare const NoControlsSingleVideo: Story;
|
|
7
|
-
export declare const IsReelsWithContextPlaylistHiddenElements: Story;
|
|
8
|
-
export declare const IsReelsWithContextModalCentered: Story;
|
|
9
|
-
export declare const ContextWrapperModal: Story;
|
|
10
|
-
export declare const ContextCustomizedPortalPlayer: Story;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { VPPlayer } from '../../../../../../../../src/components/VPPlayer';
|
|
3
|
-
import { VPPlayerInstance } from '../../../../../../../../src/interfaces';
|
|
4
|
-
declare global {
|
|
5
|
-
interface Window {
|
|
6
|
-
vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
|
|
7
|
-
vpVerticalPlayer?: (playerId: string) => VPPlayerInstance | undefined;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
declare const meta: Meta<typeof VPPlayer>;
|
|
11
|
-
export default meta;
|
|
12
|
-
type Story = StoryObj<typeof VPPlayer>;
|
|
13
|
-
export declare const SingleVideoProvidedFile: Story;
|
|
14
|
-
export declare const SingleVideoAPI: Story;
|
|
15
|
-
export declare const PlaylistProvided: Story;
|
|
16
|
-
export declare const PlaylistAPI: Story;
|
|
17
|
-
export declare const HorizontalPlayback: Story;
|
|
18
|
-
export declare const VerticalPlayback: Story;
|
|
19
|
-
export declare const VerticalPlaylistPlayback: Story;
|
|
20
|
-
export declare const FloatingVideo: Story;
|
|
21
|
-
export declare const MultiplePlayersSideBySide: Story;
|
|
22
|
-
export declare const MultiplePlayersStacked: Story;
|
|
23
|
-
export declare const VerticalPlaylistTest: () => import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
export declare const VerticalPlaylistTestSingleFile: () => import("react/jsx-runtime").JSX.Element;
|
|
25
|
-
export declare const testPlayerControls: () => import("react/jsx-runtime").JSX.Element;
|
|
26
|
-
export declare const VerticalPlaylistFastestWithPlaylistCheckOK: () => import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export declare const VerticalPlaylistStartFromIndexTestZimak: () => import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
export declare const VerticalPlayerWithSubtitles: () => import("react/jsx-runtime").JSX.Element;
|
|
29
|
-
export declare const NormalPlayerWithSubtitles: () => import("react/jsx-runtime").JSX.Element;
|
|
30
|
-
export declare const VerticalPlaylistTestMainAndBackUp: () => import("react/jsx-runtime").JSX.Element;
|
|
31
|
-
export declare const VerticalPlaylistTestMainAndBackUpWithCallback: () => import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
export declare const VerticalPlaylistWithVideoStartedCallback: () => import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
export declare const HorizontalPlayerWithVideoStartedCallback: () => import("react/jsx-runtime").JSX.Element;
|
|
34
|
-
export declare const PlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
|
|
35
|
-
export declare const UniversalPlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
|
|
36
|
-
export declare const VerticalPlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
|
|
37
|
-
export declare const UniversalVerticalPlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
|
|
38
|
-
export declare const VerticalPlayerWithPublicPlaylist: () => import("react/jsx-runtime").JSX.Element;
|
package/dist/fixtures/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './playlist';
|
package/dist/hooks/index.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { VPPlayerInstance } from '../../../../../../src/interfaces';
|
|
2
|
-
import { PlayerEventCallbacks, CurrentVideoData } from '../../../../../../src/types';
|
|
3
|
-
interface UseVPPlayerEventsParams {
|
|
4
|
-
playerId: string;
|
|
5
|
-
playerInstanceRef: React.RefObject<VPPlayerInstance | null>;
|
|
6
|
-
playerRef?: React.RefObject<HTMLDivElement | null>;
|
|
7
|
-
videoData?: CurrentVideoData;
|
|
8
|
-
trackingMetadata?: {
|
|
9
|
-
videoId?: string;
|
|
10
|
-
title?: string;
|
|
11
|
-
categoryName?: string;
|
|
12
|
-
publishedDate?: string;
|
|
13
|
-
isPremium?: boolean;
|
|
14
|
-
tags?: string[];
|
|
15
|
-
isReels?: boolean;
|
|
16
|
-
};
|
|
17
|
-
callbacks?: PlayerEventCallbacks;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* Hook to track video player events and call appropriate callbacks
|
|
21
|
-
* Similar to GTM tracking implementation but more flexible
|
|
22
|
-
*/
|
|
23
|
-
export declare const useVPPlayerEvents: ({ playerId, playerInstanceRef, playerRef, videoData, trackingMetadata, callbacks, }: UseVPPlayerEventsParams) => void;
|
|
24
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { VPPlayerInstance, VPPlayerProps } from '../../../../../../src/interfaces';
|
|
2
|
-
declare global {
|
|
3
|
-
interface Window {
|
|
4
|
-
vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
|
|
5
|
-
vpVerticalPlayer?: (playerId: string) => VPPlayerInstance | undefined;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Custom hook to manage VP Player logic, including fetching video data,
|
|
10
|
-
* initializing the player, and handling lifecycle events.
|
|
11
|
-
*
|
|
12
|
-
* @function
|
|
13
|
-
* @param {VPPlayerProps} props - The properties required to configure the VP Player.
|
|
14
|
-
* @returns {Object} An object containing player references, script loading status, loading state, and errors.
|
|
15
|
-
*/
|
|
16
|
-
export declare const useVPPlayerLogic: ({ playerId, videoId: propVideoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, onPlaylistData, onVideoStarted, trackingMetadata, onPlayerStart, onPlayerPlay, onPlayerPause, onPlayerResume, onPlayerEnd, onPlayerProgressEvery10Seconds, onPlayerProgressAt20Seconds, onPlayerQuartile25, onPlayerQuartile50, onPlayerQuartile75, onPlayerNext, onPlayerPrevious, onPlayerEvent, }: VPPlayerProps) => {
|
|
17
|
-
playerRef: import('react').RefObject<HTMLDivElement | null>;
|
|
18
|
-
playerInstanceRef: import('react').RefObject<VPPlayerInstance | null>;
|
|
19
|
-
isScriptLoaded: boolean;
|
|
20
|
-
isLoading: boolean;
|
|
21
|
-
error: string | null;
|
|
22
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Custom hook to dynamically load the VP Player script into the document.
|
|
3
|
-
* It ensures that the script is only loaded once and provides a loading state.
|
|
4
|
-
*
|
|
5
|
-
* @function
|
|
6
|
-
* @param {string | null} [version] - The version of the VP Player script to load (defaults to "latest").
|
|
7
|
-
* @param {string} [scriptUrl] - Custom script URL (if provided, it overrides the version-based URL).
|
|
8
|
-
* @returns {{ isLoaded: boolean; error: string | null }} Indicates load success and any error message.
|
|
9
|
-
*/
|
|
10
|
-
export declare const useVPPlayerScript: (version?: string | null, scriptUrl?: string) => {
|
|
11
|
-
isLoaded: boolean;
|
|
12
|
-
error: string | null;
|
|
13
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { VideoDataResult } from '../../../../../../src/types';
|
|
2
|
-
/**
|
|
3
|
-
* Custom hook for fetching video data, including playback URLs and playlists.
|
|
4
|
-
* Supports retry logic, timeout, error handling, and in-memory caching.
|
|
5
|
-
*
|
|
6
|
-
* @function
|
|
7
|
-
* @param {Object} params - The parameters for fetching video data.
|
|
8
|
-
* @param {string} [params.projectId] - The project ID required for API calls.
|
|
9
|
-
* @param {string} [params.videoId] - The video ID to fetch a single video's playback URL.
|
|
10
|
-
* @param {string} [params.playlistId] - The playlist ID to fetch a list of videos.
|
|
11
|
-
* @param {string} [params.videoUrl] - The direct video URL (skips API call if provided).
|
|
12
|
-
* @returns {VideoDataResult} - Result object with URL, playlist, loading and error states
|
|
13
|
-
*/
|
|
14
|
-
export declare const useVideoData: ({ projectId, videoId, playlistId, videoUrl, }: {
|
|
15
|
-
projectId?: string;
|
|
16
|
-
videoId?: string;
|
|
17
|
-
playlistId?: string;
|
|
18
|
-
videoUrl?: string;
|
|
19
|
-
}) => VideoDataResult;
|
|
@@ -1,314 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Interface describing the advertising configuration options for the VP Player.
|
|
3
|
-
*
|
|
4
|
-
* @interface
|
|
5
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/advertising}
|
|
6
|
-
*/
|
|
7
|
-
export interface VPPlayerAdsConfig {
|
|
8
|
-
skipAd?: {
|
|
9
|
-
state: boolean;
|
|
10
|
-
skipFrom: number;
|
|
11
|
-
};
|
|
12
|
-
vmap?: string;
|
|
13
|
-
VPAIDmode?: string;
|
|
14
|
-
enableProgrammability?: boolean;
|
|
15
|
-
functions?: Array<{
|
|
16
|
-
isDynamicKey: boolean;
|
|
17
|
-
isDynamicValue: boolean;
|
|
18
|
-
key: string;
|
|
19
|
-
order: number;
|
|
20
|
-
value: string;
|
|
21
|
-
}>;
|
|
22
|
-
bidding?: boolean;
|
|
23
|
-
afterMidrollBacktrack?: {
|
|
24
|
-
state: boolean;
|
|
25
|
-
seconds: number;
|
|
26
|
-
};
|
|
27
|
-
adBreaks?: Array<{
|
|
28
|
-
adTagUrl: string[];
|
|
29
|
-
breakType?: 'preroll' | 'midroll' | 'postroll';
|
|
30
|
-
breakTimingType?: 'time' | 'percentage' | 'playlist';
|
|
31
|
-
breakTimingValue?: number;
|
|
32
|
-
schedule?: {
|
|
33
|
-
type?: 'CUSTOM' | 'RECURRING';
|
|
34
|
-
ranges?: Array<{
|
|
35
|
-
startTime?: number;
|
|
36
|
-
endTime?: number;
|
|
37
|
-
count?: number;
|
|
38
|
-
breaks?: number[];
|
|
39
|
-
}>;
|
|
40
|
-
algorithm?: 'PASSIVE' | 'AGGRESSIVE' | 'SIMILAR_DISTANCE' | 'CUSTOM';
|
|
41
|
-
protectFirst?: number;
|
|
42
|
-
protectLast?: number;
|
|
43
|
-
occurEvery?: number;
|
|
44
|
-
liveCount?: number;
|
|
45
|
-
};
|
|
46
|
-
}>;
|
|
47
|
-
bidders?: Array<{
|
|
48
|
-
name: string;
|
|
49
|
-
params?: Array<{
|
|
50
|
-
paramName?: string;
|
|
51
|
-
paramType?: string;
|
|
52
|
-
paramValue?: string;
|
|
53
|
-
}>;
|
|
54
|
-
}>;
|
|
55
|
-
adsRequireInteraction?: boolean;
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* Interface defining the configuration options for the VP Player.
|
|
59
|
-
*
|
|
60
|
-
* @interface
|
|
61
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
|
|
62
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/playing}
|
|
63
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/advertising}
|
|
64
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/styling}
|
|
65
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/localization}
|
|
66
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/full-configuration}
|
|
67
|
-
*/
|
|
68
|
-
export interface VPPlayerConfig {
|
|
69
|
-
projectId?: string;
|
|
70
|
-
video: {
|
|
71
|
-
videoId?: string;
|
|
72
|
-
ads?: VPPlayerAdsConfig;
|
|
73
|
-
advertising?: boolean;
|
|
74
|
-
file?: string;
|
|
75
|
-
title?: string;
|
|
76
|
-
description?: string;
|
|
77
|
-
publishDate?: string;
|
|
78
|
-
duration?: number;
|
|
79
|
-
thumbnail?: string;
|
|
80
|
-
filmstrip?: string;
|
|
81
|
-
author?: string;
|
|
82
|
-
source?: string;
|
|
83
|
-
tags?: string[];
|
|
84
|
-
tracks?: Array<{
|
|
85
|
-
file: string;
|
|
86
|
-
label: string;
|
|
87
|
-
kind: string;
|
|
88
|
-
default?: boolean;
|
|
89
|
-
}>;
|
|
90
|
-
playlist?: {
|
|
91
|
-
state: boolean;
|
|
92
|
-
playlistVideoIndex: number;
|
|
93
|
-
videos: Array<{
|
|
94
|
-
videoId?: string;
|
|
95
|
-
mediaId?: string;
|
|
96
|
-
title: string;
|
|
97
|
-
thumbnailUrl?: string;
|
|
98
|
-
duration?: number;
|
|
99
|
-
file?: string;
|
|
100
|
-
hlsUrl?: string;
|
|
101
|
-
}>;
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
config: {
|
|
105
|
-
adAnnouncement?: {
|
|
106
|
-
state?: boolean;
|
|
107
|
-
timeBeforeAd?: number;
|
|
108
|
-
};
|
|
109
|
-
autostartOnLoad?: {
|
|
110
|
-
state?: boolean;
|
|
111
|
-
onMobile?: boolean;
|
|
112
|
-
onData?: boolean;
|
|
113
|
-
};
|
|
114
|
-
adsRequireInteraction?: boolean;
|
|
115
|
-
autoplay?: boolean;
|
|
116
|
-
pauseOtherVideos?: boolean;
|
|
117
|
-
focusOnAutostart?: boolean;
|
|
118
|
-
muted?: boolean;
|
|
119
|
-
loop?: boolean;
|
|
120
|
-
size?: {
|
|
121
|
-
sizeType?: string;
|
|
122
|
-
aspectRatio?: string;
|
|
123
|
-
width?: number | string;
|
|
124
|
-
height?: number | string;
|
|
125
|
-
};
|
|
126
|
-
showRelatedOnPause?: {
|
|
127
|
-
state?: boolean;
|
|
128
|
-
onMobile?: boolean;
|
|
129
|
-
from?: number;
|
|
130
|
-
};
|
|
131
|
-
float?: {
|
|
132
|
-
state: boolean;
|
|
133
|
-
onMobile: boolean;
|
|
134
|
-
position: string;
|
|
135
|
-
dismissible: boolean;
|
|
136
|
-
requiresInteraction: boolean;
|
|
137
|
-
toVideoThreshold: number;
|
|
138
|
-
toFloatThreshold: number;
|
|
139
|
-
style: {
|
|
140
|
-
width: number;
|
|
141
|
-
border: string;
|
|
142
|
-
};
|
|
143
|
-
};
|
|
144
|
-
controls?: {
|
|
145
|
-
theaterButton?: boolean;
|
|
146
|
-
settingsButton?: boolean;
|
|
147
|
-
chromecastButton?: boolean;
|
|
148
|
-
nextButton?: boolean;
|
|
149
|
-
fullscreenButton?: boolean;
|
|
150
|
-
airplayButton?: boolean;
|
|
151
|
-
bigPlayButton?: boolean;
|
|
152
|
-
autopausePlayButton?: boolean;
|
|
153
|
-
pictureInPictureButton?: boolean;
|
|
154
|
-
relatedButton?: boolean;
|
|
155
|
-
volumeButton?: boolean;
|
|
156
|
-
shareButton?: boolean;
|
|
157
|
-
subtitlesButton?: boolean;
|
|
158
|
-
showCaptions?: boolean;
|
|
159
|
-
};
|
|
160
|
-
logo?: {
|
|
161
|
-
state?: boolean;
|
|
162
|
-
file?: string;
|
|
163
|
-
position?: string;
|
|
164
|
-
defaultOpacity?: number;
|
|
165
|
-
inactiveOpacity?: number;
|
|
166
|
-
onClickURL?: string;
|
|
167
|
-
};
|
|
168
|
-
skin?: {
|
|
169
|
-
controlBar?: {
|
|
170
|
-
background?: string;
|
|
171
|
-
spread?: "solid" | "gradient";
|
|
172
|
-
gradientMidPoint?: number;
|
|
173
|
-
text?: string;
|
|
174
|
-
icons?: {
|
|
175
|
-
default?: string;
|
|
176
|
-
hover?: string;
|
|
177
|
-
};
|
|
178
|
-
timeslider?: {
|
|
179
|
-
progress?: string;
|
|
180
|
-
rail?: string;
|
|
181
|
-
buffer?: string;
|
|
182
|
-
dragger?: string;
|
|
183
|
-
};
|
|
184
|
-
timesliderOnAd?: {
|
|
185
|
-
progress?: string;
|
|
186
|
-
rail?: string;
|
|
187
|
-
buffer?: string;
|
|
188
|
-
dragger?: string;
|
|
189
|
-
};
|
|
190
|
-
volume?: {
|
|
191
|
-
dragger?: string;
|
|
192
|
-
progress?: string;
|
|
193
|
-
rail?: string;
|
|
194
|
-
notifier?: string;
|
|
195
|
-
};
|
|
196
|
-
};
|
|
197
|
-
menus?: {
|
|
198
|
-
background?: {
|
|
199
|
-
default?: string;
|
|
200
|
-
hover?: string;
|
|
201
|
-
};
|
|
202
|
-
links?: {
|
|
203
|
-
default?: string;
|
|
204
|
-
hover?: string;
|
|
205
|
-
};
|
|
206
|
-
autoplay?: {
|
|
207
|
-
autoplayOn?: string;
|
|
208
|
-
autoplayOff?: string;
|
|
209
|
-
};
|
|
210
|
-
};
|
|
211
|
-
nextVideo?: {
|
|
212
|
-
background?: string;
|
|
213
|
-
text?: string;
|
|
214
|
-
timeslider?: {
|
|
215
|
-
rail?: string;
|
|
216
|
-
progress?: string;
|
|
217
|
-
};
|
|
218
|
-
icons?: {
|
|
219
|
-
play?: {
|
|
220
|
-
default?: string;
|
|
221
|
-
hover?: string;
|
|
222
|
-
};
|
|
223
|
-
close?: string;
|
|
224
|
-
};
|
|
225
|
-
};
|
|
226
|
-
playlist?: {
|
|
227
|
-
background?: string;
|
|
228
|
-
text?: string;
|
|
229
|
-
icons?: {
|
|
230
|
-
arrows?: {
|
|
231
|
-
active?: string;
|
|
232
|
-
inactive?: string;
|
|
233
|
-
};
|
|
234
|
-
close?: string;
|
|
235
|
-
};
|
|
236
|
-
card?: {
|
|
237
|
-
background?: string;
|
|
238
|
-
title?: string;
|
|
239
|
-
duration?: {
|
|
240
|
-
text?: string;
|
|
241
|
-
background?: string;
|
|
242
|
-
};
|
|
243
|
-
icons?: {
|
|
244
|
-
play?: {
|
|
245
|
-
default?: string;
|
|
246
|
-
hover?: string;
|
|
247
|
-
};
|
|
248
|
-
};
|
|
249
|
-
};
|
|
250
|
-
};
|
|
251
|
-
};
|
|
252
|
-
lang?: {
|
|
253
|
-
locale?: string;
|
|
254
|
-
controls?: {
|
|
255
|
-
play?: string;
|
|
256
|
-
pause?: string;
|
|
257
|
-
next?: string;
|
|
258
|
-
replay?: string;
|
|
259
|
-
volume?: string;
|
|
260
|
-
mute?: string;
|
|
261
|
-
unmute?: string;
|
|
262
|
-
settings?: string;
|
|
263
|
-
theater?: string;
|
|
264
|
-
fullscreen?: string;
|
|
265
|
-
chromecast?: string;
|
|
266
|
-
airplay?: string;
|
|
267
|
-
pictureInPicture?: string;
|
|
268
|
-
related?: string;
|
|
269
|
-
skipIntro?: string;
|
|
270
|
-
skipAd?: string;
|
|
271
|
-
playlistTitle?: string;
|
|
272
|
-
upNext?: string;
|
|
273
|
-
live?: string;
|
|
274
|
-
continueAfterPause?: string;
|
|
275
|
-
};
|
|
276
|
-
settings?: {
|
|
277
|
-
quality?: string;
|
|
278
|
-
subtitles?: string;
|
|
279
|
-
autoplay?: string;
|
|
280
|
-
playbackRate?: string;
|
|
281
|
-
auto?: string;
|
|
282
|
-
off?: string;
|
|
283
|
-
normal?: string;
|
|
284
|
-
share?: string;
|
|
285
|
-
};
|
|
286
|
-
ads?: {
|
|
287
|
-
ad?: string;
|
|
288
|
-
skip?: string;
|
|
289
|
-
skipIn?: string;
|
|
290
|
-
visit?: string;
|
|
291
|
-
info?: string;
|
|
292
|
-
simultaneousAds?: string;
|
|
293
|
-
adAnnouncement?: string;
|
|
294
|
-
};
|
|
295
|
-
messages?: {
|
|
296
|
-
playbackErrorTitle?: string;
|
|
297
|
-
playbackErrorDescription?: string;
|
|
298
|
-
geoBlockedTitle?: string;
|
|
299
|
-
geoBlockedDescription?: string;
|
|
300
|
-
streamInterruptedTitle?: string;
|
|
301
|
-
streamInterruptedDescription?: string;
|
|
302
|
-
};
|
|
303
|
-
};
|
|
304
|
-
ads?: VPPlayerAdsConfig;
|
|
305
|
-
};
|
|
306
|
-
}
|
|
307
|
-
/**
|
|
308
|
-
* Default configuration object for the VP Player.
|
|
309
|
-
*
|
|
310
|
-
* @constant
|
|
311
|
-
* @type {VPPlayerConfig}
|
|
312
|
-
* @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
|
|
313
|
-
*/
|
|
314
|
-
export declare const defaultVPPlayerConfig: VPPlayerConfig;
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { VPPlayerConfig } from './config';
|
|
2
|
-
/**
|
|
3
|
-
* Interface representing an instance of the VP Player.
|
|
4
|
-
* Based on VP Player API Reference: https://vp.gjirafa.tech/documentation/docs/web-player/api-reference
|
|
5
|
-
* And VP Vertical Player API Reference: https://vp.gjirafa.tech/documentation/docs/vertical-player/api-reference
|
|
6
|
-
*
|
|
7
|
-
* @interface
|
|
8
|
-
*/
|
|
9
|
-
export interface VPPlayerInstance {
|
|
10
|
-
setup: (config: VPPlayerConfig) => void;
|
|
11
|
-
destroy?: () => void;
|
|
12
|
-
play?: () => void;
|
|
13
|
-
pause?: () => void;
|
|
14
|
-
forward?: () => void;
|
|
15
|
-
rewind?: () => void;
|
|
16
|
-
replay?: () => void;
|
|
17
|
-
seek?: (position: number) => void;
|
|
18
|
-
mute?: () => void;
|
|
19
|
-
unmute?: () => void;
|
|
20
|
-
enterFullScreen?: () => void;
|
|
21
|
-
exitFullScreen?: () => void;
|
|
22
|
-
enterFullscreen?: () => void;
|
|
23
|
-
exitFullscreen?: () => void;
|
|
24
|
-
enterPictureInPicture?: () => void;
|
|
25
|
-
exitPictureInPicture?: () => void;
|
|
26
|
-
floating?: () => void;
|
|
27
|
-
isFloating?: () => boolean;
|
|
28
|
-
getFloatStyle?: () => unknown;
|
|
29
|
-
setFloatingHlsLevels?: (levels: unknown) => void;
|
|
30
|
-
floatingStateCounter?: number;
|
|
31
|
-
nextVideo?: () => void;
|
|
32
|
-
previousVideo?: () => void;
|
|
33
|
-
switchToIndex?: (index: number) => void;
|
|
34
|
-
switch?: (video: unknown) => void;
|
|
35
|
-
playNewVideo?: (video: unknown) => void;
|
|
36
|
-
togglePlay?: () => void;
|
|
37
|
-
toggleMute?: () => void;
|
|
38
|
-
isMuted?: () => boolean;
|
|
39
|
-
isPlaying?: () => boolean;
|
|
40
|
-
isPaused?: () => boolean;
|
|
41
|
-
isFullscreen?: () => boolean;
|
|
42
|
-
isEnded?: () => boolean;
|
|
43
|
-
isFocused?: () => boolean;
|
|
44
|
-
getPosition?: () => number;
|
|
45
|
-
getBuffered?: () => number;
|
|
46
|
-
getVolume?: () => number;
|
|
47
|
-
getContainer?: () => HTMLElement;
|
|
48
|
-
getDuration?: () => number;
|
|
49
|
-
getQualityLevels?: () => unknown[];
|
|
50
|
-
getCurrentQuality?: () => number;
|
|
51
|
-
checkViewability?: () => boolean;
|
|
52
|
-
setConfig?: (config: unknown) => void;
|
|
53
|
-
setVideo?: (video: unknown) => void;
|
|
54
|
-
setPlaylist?: (playlist: unknown) => void;
|
|
55
|
-
setVolume?: (volume: number) => void;
|
|
56
|
-
setCurrentQuality?: (index: number) => void;
|
|
57
|
-
setLevelToAuto?: () => void;
|
|
58
|
-
setCuePoint?: (cue: number, callback: () => void) => void;
|
|
59
|
-
on?: (event: string, callback: (data?: unknown) => void) => void;
|
|
60
|
-
off?: (event: string, callback?: (data?: unknown) => void) => void;
|
|
61
|
-
videoIndex?: number;
|
|
62
|
-
playlist?: {
|
|
63
|
-
state: boolean;
|
|
64
|
-
playlistId: string;
|
|
65
|
-
playlistVideoIndex: number;
|
|
66
|
-
videos: unknown[];
|
|
67
|
-
};
|
|
68
|
-
multipleVideos?: Map<number, unknown>;
|
|
69
|
-
firstInList?: boolean;
|
|
70
|
-
lastInList?: boolean;
|
|
71
|
-
setupComplete?: boolean;
|
|
72
|
-
initialized?: boolean;
|
|
73
|
-
}
|