@playkit-js/playkit-js-ui
Version:
[](https://github.com/kaltura/playkit-js-ui/actions/workflows/run_canary_full_flow.yaml) [ • 235 kB
TypeScript
import { AbrMode } from '@playkit-js/playkit-js';
import { ActionCreatorsMapObject } from 'redux';
import { AudioTrack } from '@playkit-js/playkit-js';
import { BaseMiddleware } from '@playkit-js/playkit-js';
import { Component } from 'preact';
import { ComponentChild } from 'preact';
import { ComponentChildren } from 'preact';
import { createPortal } from 'preact/compat';
import { Dispatch } from 'redux';
import { EngineType } from '@playkit-js/playkit-js';
import { Error as Error_2 } from '@playkit-js/playkit-js';
import { EventManager } from '@playkit-js/playkit-js';
import { FakeEvent } from '@playkit-js/playkit-js';
import { FakeEventTarget } from '@playkit-js/playkit-js';
import { FunctionalComponent } from 'preact';
import { h } from 'preact';
import { KPUIAddComponent as KPUIAddComponent_2 } from '@playkit-js/playkit-js-ui';
import { KPUIRemoveComponent as KPUIRemoveComponent_2 } from '@playkit-js/playkit-js-ui';
import { LoggerLevels } from '@playkit-js/playkit-js';
import { MediaType } from '@playkit-js/playkit-js';
import { PKAbrConfigObject } from '@playkit-js/playkit-js';
import { PKDimensionsConfig } from '@playkit-js/playkit-js';
import { PKDrmDataObject } from '@playkit-js/playkit-js';
import { PKEventTypes } from '@playkit-js/playkit-js';
import { PKMediaSourceObject } from '@playkit-js/playkit-js';
import { PKMetadataConfigObject } from '@playkit-js/playkit-js';
import { PKPlaybackConfigObject } from '@playkit-js/playkit-js';
import { PKPlayerDimensions } from '@playkit-js/playkit-js';
import { PKSessionConfigObject } from '@playkit-js/playkit-js';
import { PKSourcesConfigObject } from '@playkit-js/playkit-js';
import { PKTextConfigObject } from '@playkit-js/playkit-js';
import { PKTextTrack } from '@playkit-js/playkit-js';
import * as preact_2 from 'preact';
import * as preactHooks from 'preact/hooks';
import * as preacti18n from 'preact-i18n';
import { Provider } from '@playkit-js/playkit-js-providers/ovp-provider';
import { ProviderEntryListObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderMediaConfigSessionObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderMediaConfigSourcesObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderMediaInfoObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderOptionsObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderPlaylistInfoObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderPlaylistMetadataObject } from '@playkit-js/playkit-js-providers/types';
import { ProviderPlaylistObject } from '@playkit-js/playkit-js-providers/types';
import * as redux from 'react-redux';
import { RefObject } from 'preact';
import { RenderableProps } from 'preact';
import { StateType } from '@playkit-js/playkit-js';
import { Store } from 'redux';
import { StreamType } from '@playkit-js/playkit-js';
import { TextStyle } from '@playkit-js/playkit-js';
import { ThumbnailInfo } from '@playkit-js/playkit-js';
import { TimedMetadata } from '@playkit-js/playkit-js';
import { Track } from '@playkit-js/playkit-js';
import { TrackType } from '@playkit-js/playkit-js';
import { TrackTypes } from '@playkit-js/playkit-js';
import { UIEventType as UIEventType_2 } from '@playkit-js/playkit-js-ui';
import { UIOptionsObject as UIOptionsObject_2 } from '@playkit-js/playkit-js-ui';
import { VideoTrack } from '@playkit-js/playkit-js';
import { VNode } from 'preact';
declare const actions: {
updateConfig: (config: any) => {
type: string;
config: any;
};
updateComponentConfig: (componentAlias: string, config: UIOptionsObject) => {
type: string;
componentAlias: string;
config: UIOptionsObject;
};
};
declare const actions_10: {
updateVolumeDraggingStatus: (draggingActive: boolean) => any;
updateVolumeHover: (hover: boolean) => any;
};
declare const actions_11: {
updateOverlay: (isOpen: boolean) => {
type: string;
isOpen: boolean;
};
};
declare const actions_12: {
updateControlsToMove: (controlsToMove: string[]) => {
type: string;
controlsToMove: string[];
};
};
declare const actions_2: {
updateCaptionsStyle: (style: string) => {
type: string;
style: string;
};
};
declare const actions_3: {
readonly updateHasError: (hasError: boolean) => {
type: string;
hasError: boolean;
};
readonly updateErrorDetails: (errorCategory: number, errorTitle?: string, errorMessage?: string) => {
type: string;
errorDetails: {
errorCategory: number;
errorTitle: string;
errorMessage: string;
};
};
readonly updatePlayerState: (prevoiusState: string, currentState: string) => {
type: string;
playerState: {
prevoiusState: string;
currentState: string;
};
};
readonly updatePrePlayback: (prePlayback: boolean) => {
type: string;
prePlayback: boolean;
};
readonly updateIsPlaying: (isPlaying: boolean) => {
type: string;
isPlaying: boolean;
};
readonly updateIsPaused: (isPaused: boolean) => {
type: string;
isPaused: boolean;
};
readonly updateIsSeeking: (isSeeking: boolean) => {
type: string;
isSeeking: boolean;
};
readonly updateLastSeekPoint: (lastSeekPoint: number) => {
type: string;
lastSeekPoint: number;
};
readonly updateIsEnded: (isEnded: boolean) => {
type: string;
isEnded: boolean;
};
readonly updateIsPlaybackStarted: (isPlaybackStarted: boolean) => {
type: string;
isPlaybackStarted: boolean;
};
readonly updateIsPlaybackEnded: (isPlaybackEnded: boolean) => {
type: string;
isPlaybackEnded: boolean;
};
readonly updateCurrentTime: (currentTime: number) => {
type: string;
currentTime: number;
};
readonly updateDuration: (duration: number) => {
type: string;
duration: number;
};
readonly updateVolume: (volume: number) => {
type: string;
volume: number;
};
readonly updateMuted: (muted: boolean) => {
type: string;
muted: boolean;
};
readonly updateMetadataLoadingStatus: (metadataLoaded: boolean) => {
type: string;
metadataLoaded: boolean;
};
readonly updateDataLoadingStatus: (dataLoaded: boolean) => {
type: string;
dataLoaded: boolean;
};
readonly updateAudioTracks: (tracks: Array<any>) => {
type: string;
tracks: any[];
};
readonly updateVideoTracks: (tracks: Array<any>) => {
type: string;
tracks: any[];
};
readonly updateTextTracks: (tracks: Array<any>) => {
type: string;
tracks: any[];
};
readonly updateAdBreak: (adBreak: boolean) => {
type: string;
adBreak: boolean;
};
readonly updateAdBreakProgress: (currentTime: number, duration: number) => {
type: string;
adProgress: {
currentTime: number;
duration: number;
};
};
readonly updateAdBreakCompleted: () => {
type: string;
};
readonly updateAdIsPlaying: (adIsPlaying: boolean) => {
type: string;
adIsPlaying: boolean;
};
readonly updateAdSkipTimeOffset: (adSkipTimeOffset: boolean) => {
type: string;
adSkipTimeOffset: boolean;
};
readonly updateAdSkippableState: (adSkippableState: boolean) => {
type: string;
adSkippableState: boolean;
};
readonly updateAdClickUrl: (adUrl: string) => {
type: string;
adUrl: string;
};
readonly updateAdIsLinear: (adIsLinear: boolean) => {
type: string;
adIsLinear: boolean;
};
readonly updateAdIsBumper: (adIsBumper: boolean) => {
type: string;
adIsBumper: boolean;
};
readonly updateAdContentType: (adContentType: string) => {
type: string;
adContentType: string;
};
readonly updatePlayerPoster: (poster: string) => {
type: string;
poster: string;
};
readonly updateIsAudio: (isAudio: boolean) => {
type: string;
isAudio: boolean;
};
readonly updateIsLive: (isLive: boolean) => {
type: string;
isLive: boolean;
};
readonly updateIsDvr: (isDvr: boolean) => {
type: string;
isDvr: boolean;
};
readonly updateIsImg: (isImg: boolean) => {
type: string;
isImg: boolean;
};
readonly updateIsDocument: (isDocument: boolean) => {
type: string;
isDocument: boolean;
};
readonly updateIsIdle: (IsIdle: boolean) => {
type: string;
IsIdle: boolean;
};
readonly updateFallbackToMutedAutoPlay: (fallback: boolean) => {
type: string;
fallback: boolean;
};
readonly updateIsVr: (isVr: boolean) => {
type: string;
isVr: boolean;
};
readonly updateVrStereoMode: (vrStereoMode: boolean) => {
type: string;
vrStereoMode: boolean;
};
readonly updateIsCasting: (isCasting: boolean) => {
type: string;
isCasting: boolean;
};
readonly updateCastSession: (castSession: any) => {
type: string;
castSession: any;
};
readonly updateIsCastAvailable: (isCastAvailable: boolean) => {
type: string;
isCastAvailable: boolean;
};
readonly updateIsChangingSource: (isChangingSource: boolean) => {
type: string;
isChangingSource: boolean;
};
readonly updatePlaylist: (playlist: any) => {
type: string;
playlist: any;
};
readonly updatePictureInPictureSupport: (isPictureInPictureSupported: boolean) => {
type: string;
isPictureInPictureSupported: boolean;
};
readonly updateIsInPictureInPicture: (isInPictureInPicture: boolean) => {
type: string;
isInPictureInPicture: boolean;
};
readonly updateFullscreen: (fullscreen: boolean) => {
type: string;
fullscreen: boolean;
};
};
declare const actions_4: {
updateLoadingSpinnerState: (show: boolean) => {
type: string;
show: boolean;
};
};
declare const actions_5: {
updateOverlayActionIcon: (iconType: string | Array<string>) => {
type: string;
iconType: string | string[];
};
};
declare const actions_6: {
updatePlaylistCountdownCanceled: (countdownCanceled: boolean) => {
type: string;
countdownCanceled: boolean;
};
};
declare const actions_7: {
readonly updateSeekbarDraggingStatus: (draggingActive: boolean) => {
type: string;
draggingActive: boolean;
};
readonly updateSeekbarHoverActive: (hoverActive: boolean) => {
type: string;
hoverActive: boolean;
};
readonly updateSeekbarPreviewHoverActive: (previewHoverActive: boolean) => {
type: string;
previewHoverActive: boolean;
};
readonly updateSeekbarClientRect: (clientRect: any) => {
type: string;
clientRect: any;
};
readonly updateHideSeekbarPreview: (hidePreview: boolean) => {
type: string;
hidePreview: boolean;
};
readonly updateHideSeekbarTimeBubble: (hideTimeBubble: boolean) => {
type: string;
hideTimeBubble: boolean;
};
readonly updateCurrentTime: (currentTime: number) => {
type: string;
currentTime: number;
};
readonly updateVirtualTime: (virtualTime: number) => {
type: string;
virtualTime: number;
};
readonly updateHoveredSegment: (id: string, isHovered: boolean) => {
type: string;
id: string;
isHovered: boolean;
};
readonly updateSegmentEndTime: (id: string, endTime: number) => {
type: string;
id: string;
endTime: number;
};
readonly updateSeekbarSegments: (segments: any[]) => {
type: string;
segments: any[];
};
readonly addSeekbarClass: (className: string) => {
type: string;
className: string;
};
readonly removeSeekbarClass: (className: string) => {
type: string;
className: string;
};
readonly updatePreventSeek: (isPreventSeek: boolean) => {
type: string;
isPreventSeek: boolean;
};
};
declare const actions_8: {
updateQuality: (quality: string) => {
type: string;
quality: string;
};
updateSpeed: (speed: string) => {
type: string;
speed: string;
};
updateAudio: (audio: string) => {
type: string;
audio: string;
};
updateAdvancedAudioDesc: (isChecked: boolean) => {
type: string;
isChecked: boolean;
};
updateIsCaptionsEnabled: (isCaptionsEnabled: boolean) => {
type: string;
isCaptionsEnabled: boolean;
};
};
declare const actions_9: {
readonly addPlayerClass: (className: string) => {
type: string;
className: string;
};
readonly removePlayerClass: (className: string) => {
type: string;
className: string;
};
readonly updateIsMobile: (isMobile: boolean) => {
type: string;
isMobile: boolean;
};
readonly updatePlayerSize: (playerSize: string) => {
type: string;
playerSize: string;
};
readonly updateIsSmallSize: (isSmallSize: boolean) => {
type: string;
isSmallSize: boolean;
};
readonly updateGuiClientRect: (guiClientRect: any) => {
type: string;
guiClientRect: any;
};
readonly updateTopBarClientRect: (topBarClientRect: any) => {
type: string;
topBarClientRect: any;
};
readonly updatePlayerClientRect: (playerClientRect: any) => {
type: string;
playerClientRect: any;
};
readonly updateVideoClientRect: (videoClientRect: any) => {
type: string;
videoClientRect: any;
};
readonly updateDocumentWidth: (documentWidth: number) => {
type: string;
documentWidth: number;
};
readonly updatePlayerHoverState: (hover: boolean) => {
type: string;
hover: boolean;
};
readonly updatePlayerNavState: (nav: boolean) => {
type: string;
nav: boolean;
};
readonly updateSmartContainerOpen: (open: boolean) => {
type: string;
open: boolean;
};
readonly updateActivePresetName: (activePresetName: string) => {
type: string;
activePresetName: string;
};
readonly updateSidePanelMode: (position: string, sidePanelMode: string) => {
type: string;
position: string;
sidePanelMode: string;
};
readonly updateSidePanelSize: (orientation: string, options: any) => {
type: string;
orientation: string;
options: any;
};
readonly updatePresetSettings: (presetSettings: PresetSettings) => {
type: string;
presetSettings: PresetSettings;
};
readonly updateLayoutStyles: (layoutStyles: LayoutStyles) => {
type: string;
layoutStyles: LayoutStyles;
};
};
/**
* @class Ad
* @param {string} id - Ad ID.
* @param {PKAdOptions} options - Ad data options.
*/
declare class Ad {
private readonly _id;
private readonly _system;
private readonly _url;
private readonly _contentType;
private readonly _title;
private readonly _position;
private readonly _duration;
private readonly _clickThroughUrl;
private _posterUrl;
private readonly _skipOffset;
private _linear;
private readonly _width;
private readonly _height;
private readonly _bitrate;
private readonly _bumper;
private readonly _inStream;
private readonly _vpaid;
private readonly _streamId;
private readonly _wrapperAdIds;
private readonly _wrapperCreativeIds;
private readonly _wrapperAdSystems;
constructor(id: string, options: PKAdOptions);
/**
* @instance
* @memberof Ad
* @return {string} - Ad ID.
*/
get id(): string;
/**
* @instance
* @memberof Ad
* @return {string | undefined} - Ad system.
*/
get system(): string | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad content type.
*/
get contentType(): string | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad URL.
*/
get url(): string | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad title.
*/
get title(): string | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad position inside the ad break.
*/
get position(): number | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad duration.
*/
get duration(): number | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad click through URL.
*/
get clickThroughUrl(): string | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad poster URL.
*/
get posterUrl(): string | undefined;
/**
* @instance
* @memberof Ad
* @return {string} - Ad skip offset.
*/
get skipOffset(): number | undefined;
/**
* @instance
* @memberof Ad
* @return {boolean} - Whether the ad is linear.
*/
get linear(): boolean;
/**
* @instance
* @memberof Ad
* @return {string} - Ad width.
*/
get width(): number;
/**
* @instance
* @memberof Ad
* @return {string} - Ad height.
*/
get height(): number;
/**
* @instance
* @memberof Ad
* @return {string} - Ad bitrate.
*/
get bitrate(): number;
/**
* @instance
* @memberof Ad
* @return {boolean} - Whether the ad is bumper.
*/
get bumper(): boolean;
/**
* @instance
* @memberof Ad
* @return {boolean} - Whether the ad is imadai.
*/
get inStream(): boolean;
/**
* @instance
* @memberof Ad
* @return {string} - Whether the ad is skippable or not.
*/
get skippable(): boolean;
/**
* @instance
* @memberof Ad
* @return {boolean} - Whether the ad is vpaid or not.
*/
get vpaid(): boolean;
/**
* @instance
* @memberof Ad
* @return {string} - The ad streamId.
*/
get streamId(): string;
/**
* @instance
* @memberof Ad
* @return {string} - The ad wrapperAdIds.
*/
get wrapperAdIds(): Array<string>;
/**
* @instance
* @memberof Ad
* @return {string} - The ad wrapperCreativeIds.
*/
get wrapperCreativeIds(): Array<string>;
/**
* @instance
* @memberof Ad
* @return {string} - The ad wrapperAdSystems.
*/
get wrapperAdSystems(): Array<string>;
toJSON(): any;
}
declare class AdBreak {
private readonly _type;
private readonly _position;
private readonly _numAds;
constructor(options: PKAdBreakOptions);
/**
* @instance
* @memberof AdBreak
* @return {string} - Ad break type - pre/mid/post.
*/
get type(): string | undefined;
/**
* @instance
* @memberof AdBreak
* @return {string} - Ad break position on the playback timeline.
*/
get position(): number | undefined;
/**
* @instance
* @memberof AdBreak
* @return {string} - The number of ads inside the ad break.
*/
get numAds(): number | undefined;
toJSON(): any;
}
/**
* @typedef {Object} KPAdBreakObject@typedef {Object} KPAdBreakObject
* @property {number} position - The position; in seconds; to show the ad break.
* @property {number} percentage - Alternative parameter to `position`. The position; in percentage of the media length; to show the ad break (optional).
* @property {number} every - Alternative parameter to `position`. Play ad break every X seconds (optional).
* @property {AdPod} ads - An array of ads to play (Ad pod).
*/
declare interface AdBreakObject {
position: number;
percentage?: number;
every?: number;
ads: AdObject[];
}
/**
* AdLearnMore component
*
* @class AdLearnMore
* @example <AdLearnMore />
* @extends {Component}
*/
declare class AdLearnMore extends Component<AdLearnMoreProps, {}> {
/**
* render component
*
* @param {*} props - component props
* @returns {React$Element} - component element
* @memberof AdLearnMore
*/
render(props: any): h.JSX.Element;
}
declare type AdLearnMoreProps = {
url?: string;
};
/**
* AdNotice component
*
* @class AdNotice
* @example <AdNotice />
* @extends {Component}
*/
declare class AdNotice extends Component<{}, {}> {
/**
* render component
*
* @returns {React$Element} - component element
* @memberof AdNotice
*/
render(): h.JSX.Element;
}
/**
* @typedef {Object} KPAdObject@typedef {Object} KPAdObject
* @property {Array<string>} url - List of urls; each one specifies the ad tag url that is requested from the ad server. The player will request the first url; if failed; it will request the second url and so on (aka waterfalling).
* @property {Array<string>} response - List of XMLs; each one specifies a VAST 2.0 document to be used as the ads response instead of making a request via an ad tag url. The player will use the first XML; if failed; it will use the second and so on (aka waterfalling).
* @property {boolean} bumper - Specifies whether this is a bumper.
* @property {PrebidConfig} prebid - Specifies whether this is a prebid ad and add the relevant config for prebid request.
*/
declare interface AdObject {
url?: Array<string>;
response?: Array<string>;
bumper?: boolean;
prebid?: PrebidConfig;
}
declare interface AdPrebidConfig {
adUnit: Object;
params?: Object;
options?: Object;
timeout: number;
}
/**
* @class AdsController
* @param {Player} player - The player.
* @param {IAdsController} adsPluginController - The controller of the current ads plugin instance.
*/
declare class AdsController extends FakeEventTarget implements IAdsController {
private static _logger;
private readonly _player;
private _adsPluginControllers;
private _allAdsCompleted;
private _eventManager;
private _liveEventManager;
private _adBreaksLayout;
private _adBreak;
private _ad;
private _adPlayed;
private _snapback;
private _configAdBreaks;
private _adIsLoading;
private _isAdPlaying;
private _middleware;
private readonly _prebidManager;
private _liveSeeking;
prerollReady: Promise<any>;
constructor(player: KalturaPlayer, adsPluginControllers: Array<IAdsPluginController>);
/**
* @instance
* @memberof AdsController
* @returns {boolean} - Whether all ads completed.
*/
get allAdsCompleted(): boolean;
/**
* @instance
* @memberof AdsController
* @returns {boolean} - Whether an ad is playing.
*/
isAdPlaying(): boolean;
/**
* @instance
* @memberof AdsController
* @returns {boolean} - Whether we're in an ad break.
*/
isAdBreak(): boolean;
/**
* @instance
* @memberof AdsController
* @returns {Array<number|string>} - The ad breaks layout (cue points).
*/
getAdBreaksLayout(): Array<number | string>;
/**
* @instance
* @memberof AdsController
* @returns {?AdBreak} - Gets the current ad break data.
*/
getAdBreak(): AdBreak | undefined;
/**
* @instance
* @memberof AdsController
* @returns {?Ad} - Gets the current ad data.
*/
getAd(): Ad | undefined;
/**
* Skip on an ad.
* @instance
* @memberof AdsController
* @returns {void}
*/
skipAd(): void;
/**
* Play an ad on demand.
* @param {KPAdPod} adPod - The ad pod play.
* @instance
* @memberof AdsController
* @returns {void}
*/
playAdNow(adPod: KPAdPod): void;
getMiddleware(): BaseMiddleware;
private _init;
private _initMembers;
private _addBindings;
private _handleConfiguredAdBreaks;
private _validateOneTimeConfig;
private _dispatchAdManifestLoaded;
private _handlePrebidAdConfig;
private _getPrebidAds;
private _handleConfiguredPreroll;
private _handleEveryAndPercentage;
private _attachLiveSeekedHandler;
private _pushNextAdsForLive;
private _handleConfiguredMidrolls;
private _handleReturnToLive;
private _playAdBreak;
private _onAdManifestLoaded;
private _onAdBreakStart;
private _onAdLoaded;
private _onAdStarted;
private _onAdBreakEnd;
private _onAdsCompleted;
private _onAdError;
private _isBumper;
private _onEnded;
private _onPlaybackEnded;
private _handleConfiguredPostroll;
private _reset;
private _destroy;
private _mergeAdBreaks;
}
/**
* AdSkip component
*
* @class AdSkip
* @example <AdSkip />
* @extends {Component}
*/
declare class AdSkip extends Component<AdSkipProps & WithPlayerProps & WithLoggerProps, any> {
/**
* getting the number value of seconds left to be able to skip ad
*
* @returns {number} - number of seconds left to skip ad
* @memberof AdSkip
*/
private getSkipTimeOffset;
private skipAd;
/**
* render component
*
* @returns {React$Element} - component
* @memberof AdSkip
*/
render(): h.JSX.Element | undefined;
}
declare type AdSkipProps = {
currentTime?: number;
duration?: number;
adSkipTimeOffset?: number;
adSkippableState?: boolean;
};
/**
* Ads ui interface
*
* @export
* @param {*} props component props
* @returns {?HTMLElement} player ui tree
*/
declare function adsUI(props: any): VNode<any> | undefined;
/**
* AdvancedAudioDesc component
*
* @class AdvancedAudioDesc
* @example <AdvancedAudioDesc step={5} />
* @extends {Component}
*/
declare class AdvancedAudioDesc extends Component<any, any> implements IconComponent {
componentDidUpdate(previousProps: any): void;
get advancedAudioDesc(): boolean;
registerComponent(): any;
getComponentText: () => any;
getSvgIcon: () => any;
/**
* should render component
* @returns {boolean} - whether to render the component
*/
private _shouldRender;
/**
* AdvancedAudioDesc click handler
*
* @returns {void}
* @memberof AdvancedAudioDesc
*/
private onClick;
/**
* on key down handler
*
* @param {KeyboardEvent} e - keyboard event
* @returns {void}
* @memberof AdvancedAudioDesc
*/
onKeyDown: (e: KeyboardEvent) => void;
/**
* render component
*
* @param {*} props - component props
* @returns {React$Element} - component element
* @memberof AdvancedAudioDesc
*/
render({ innerRef }: any): VNode<any> | undefined;
}
/**
* AdvancedAudioDescToggle component
*
* @class AdvancedAudioDescToggle
* @example <AdvancedAudioDescToggle />
* @extends {Component}
*/
declare class AdvancedAudioDescToggle extends Component<any, any> {
/**
* Toggle the Advanced Audio Description option and update it in the store state
*
* @param {boolean} isChecked - Whether the feature is enabled or not
* @returns {void}
* @memberof AdvancedAudioDescToggle
*/
onAdvancedAudioClick: (isChecked: boolean) => void;
/**
* render function
*
* @param {*} props - component props
* @returns {React$Element} - component
* @memberof AdvancedAudioDescToggle
*/
render(props: any): h.JSX.Element;
}
/**
* @typedef {Object} KPAdvertisingConfigObject@typedef {Object} KPAdvertisingConfigObject
* @property {PrebidConfig} prebid - The prebid config.
* @property {Array<KPAdBreakObject>} adBreaks - The ad breaks scheme.
* @property {number} [playAdsAfterTime] - Only play ad breaks scheduled after this time (in seconds). This setting is strictly after - e.g. setting playAdsAfterTime to 15 will cause the player to ignore an ad break scheduled to play at 15s.
* @property {boolean} [showAdBreakCuePoint] - Whether to show the ad breaks cue points.
* @property {Object} [adBreakCuePointStyle] - Style options for the ad breaks cue points - See the options {@link https://github.com/kaltura/playkit-js-timeline/blob/main/docs/types.md#cuepointoptionsobject|Here}.
*/
declare interface AdvertisingConfig {
prebid?: PrebidConfig;
adBreaks: AdBreakObject[];
playAdsAfterTime?: number;
showAdBreakCuePoint?: boolean;
adBreakCuePointStyle?: Object;
}
/**
* AudioMenu component
*
* @class AudioMenu
* @example <AudioMenu />
* @extends {Component}
*/
declare class AudioMenu extends Component<AudioMenuProps & WithPlayerProps & WithEventDispatcherProps, any> {
/**
* call to player selectTrack method and change audio track
*
* @param {Object} audioTrack - audio track
* @returns {void}
* @memberof Settings
*/
onAudioChange(audioTrack: any): void;
/**
* render function
*
* @param {*} props - component props
* @returns {React$Element} - component
* @memberof AudioMenu
*/
render(props: any): h.JSX.Element;
}
declare type AudioMenuProps = {
audioTracks?: any[];
audioLabelText?: string;
};
declare const BadgeType: {
qualityHd: string;
qualityHdActive: string;
quality4k: string;
quality4kActive: string;
quality8k: string;
quality8kActive: string;
};
/**
* Base component to be extended by other player UI components
*
* @class BaseComponent
* @extends {Component}
*/
declare class BaseComponent extends Component<any, any> {
protected player: KalturaPlayer;
protected name: string;
protected config: any;
protected logger: any;
protected eventManager: EventManager;
/**
* Components default props.
* @type {Object}
* @static
*/
static defaultProps: any;
/**
* Creates an instance of BaseComponent.
* @param {Object} [obj={ config: {} }] obj
* @memberof BaseComponent
*/
constructor(obj?: any);
/**
* Notify the store that a clickable component has been clicked.
* @param {any} payload - Optional payload.
* @returns {void}
*
* @memberof BaseComponent
*/
notifyClick(payload?: any): void;
/**
* Notify the store that a changeable component has been change.
* @param {any} payload - Optional payload.
* @returns {void}
*
* @memberof BaseComponent
*/
notifyChange(payload?: any): void;
/**
* Before component is mounted remove all event manager listeners.
* @returns {void}
*
* @memberof BaseComponent
*/
componentWillUnmount(): void;
render(props?: RenderableProps<any>, state?: Readonly<any>, context?: any): ComponentChild;
}
/** The BasePlugin responsible to implement the plugin interface.
* Contains several default implementations.
* Other plugins should extend this class.
* @classdesc
*/
declare class BasePlugin {
protected logger: any;
/**
* The runtime configuration of the plugin.
* @member
*/
protected config: any;
/**
* The name of the plugin.
* @member
*/
name: string;
/**
* The logger of the plugin.
* @member
*/
/**
* Reference to the actual player.
* @member
*/
protected player: KalturaPlayer;
/**
* The event manager of the plugin.
* @member
*/
protected eventManager: EventManager;
/**
* The default configuration of the plugin.
* Inherited plugins should override this property.
* @type {Object}
* @static
* @member
*/
protected static defaultConfig: any;
/**
* Returns under what conditions the plugin is valid.
* Plugin must implement this method.
* @returns {boolean} - Whether the plugin is valid and can be initiated. Default implementation is true
* @static
* @public
* @abstract
*/
static isValid(): boolean;
/**
* constructor
* @param {string} name - The plugin name
* @param {Object} player - The player reference
* @param {Object} config - The plugin configuration
* @constructor
* @private
*/
constructor(name: string, player: KalturaPlayer, config?: any);
/**
* Getter for the configuration of the plugin.
* @param {string} attr - The key in the plugin configuration (optional).
* @returns {*} - If attribute is provided, returns its value. Else, Returns the config of the plugin.
* @public
*/
getConfig(attr?: string): any;
/**
* Getter for the ready promise of the plugin.
* @returns {Promise<*>} - returns a resolved promise unless the plugin overrides this ready getter.
* @public
*/
protected get ready(): Promise<any>;
/**
* Updates the config of the plugin.
* @param {Object} update - The updated configuration.
* @public
* @returns {void}
*/
updateConfig(update: any): void;
/**
* Runs the loadMedia logic of the plugin.
* plugin must implement this method.
* @public
* @virtual
* @returns {void}
*/
loadMedia(): void;
/**
* Runs the destroy logic of the plugin.
* plugin must implement this method.
* @public
* @virtual
* @returns {void}
*/
destroy(): void;
/**
* Runs the reset logic of the plugin.
* plugin must implement this method.
* @public
* @virtual
* @returns {void}
*/
reset(): void;
/**
* Getter for the plugin's name.
* @returns {string} - The name of the plugin.
* @public
*/
getName(): string;
/**
* Dispatch an event via the plugin.
* @param {string} name - The event name.
* @param {any} payload - The event payload.
* @returns {void}
*/
dispatchEvent(name: string, payload?: any): void;
}
/**
* Basic remote player.
* Implements the Kaltura Player playback, ads, tracks,vr and cast APIs.
* Remote players should extend this class and implement the needed API.
* @class BaseRemotePlayer
* @param {string} name - Remote player name.
* @param {Object} config - Cast configuration.
* @param {RemoteControl} remoteControl - Remote control.
* @extends {FakeEventTarget}
* @implements {IRemotePlayer}
*/
declare class BaseRemotePlayer extends FakeEventTarget implements IRemotePlayer {
/**
* Default configuration of the remote player.
* @static
* @type {Object}
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.defaultConfig // {}
*/
private static defaultConfig;
/**
* Remote player type.
* @static
* @type {string}
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.Type // 'BaseRemotePlayer'
*/
private static Type;
/**
* @static
* @returns {boolean} - Whether the remote player is supported in the current environment.
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.isSupported() // true
*/
static isSupported(): boolean;
private static _logger;
private _remoteControl;
private _playerConfig;
private _castConfig;
private _eventManager;
private _isCastInitiator;
constructor(name: string, castConfig: any, remoteControl: RemoteControl);
/**
* Loads a media to the receiver application.
* @param {Object} mediaInfo - The entry media info.
* @returns {Promise<void>} - Promise to indicate load succeed or failed.
* @instance
* @memberof BaseRemotePlayer
*/
loadMedia(mediaInfo: any): Promise<any>;
/**
* Sets a media to the remote player..
* @param {Object} mediaConfig - Media configuration to set.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
setMedia(mediaConfig: any): void;
/**
* Gets the media Info.
* @returns {?Object} - The media info.
* @instance
* @memberof BaseRemotePlayer
*/
getMediaInfo(): any;
/**
* Gets the media config.
* @returns {?Object} - The media config.
* @instance
* @memberof BaseRemotePlayer
*/
getMediaConfig(): any;
/**
* Configure the remote player
* @param {Object} config - Configuration to set.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
configure(config?: any): void;
/**
* The remote player readiness.
* @returns {Promise<any>} - Promise which resolved when the remote player is ready.
* @instance
* @memberof BaseRemotePlayer
*/
ready(): Promise<any>;
/**
* Load the remote player.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
load(): void;
/**
* Play/resume the remote player.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
play(): void;
/**
* Pause the remote player.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
pause(): void;
/**
* Reset the remote player.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
reset(): void;
/**
* Destroy the remote player.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
destroy(): void;
/**
* @returns {boolean} - Whether the current playback is a live playback.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isLive() // false
*/
isLive(): boolean;
/**
* @returns {boolean} - Whether the current live playback has DVR window. In case of non-live playback will return false.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isDvr() // false
*/
isDvr(): boolean;
/**
* Seeks to the live edge.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
seekToLiveEdge(): void;
/**
* @returns {number} - The start time of the DVR window.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.getStartTimeOfDvrWindow() // 0
*/
getStartTimeOfDvrWindow(): number;
/**
* @param {string} [type] - Track type.
* @returns {Array<Track>} - The remote player tracks.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.getTracks() // []
*/
getTracks(type?: string): Array<Track>;
/**
* @returns {Object} - The remote player active tracks.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.getTracks() // {audio: undefined, video: undefined, text: undefined}
*/
getActiveTracks(): any;
/**
* Select a certain track to be active.
* @param {Track} track - The track to activate.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
selectTrack(track: Track): void;
/**
* Hides the active text track.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
hideTextTrack(): void;
/**
* @function enableAdaptiveBitrate
* @description Enables automatic adaptive bitrate switching.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
enableAdaptiveBitrate(): void;
/**
* @function isAdaptiveBitrateEnabled
* @returns {boolean} - Whether adaptive bitrate is enabled.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isAdaptiveBitrateEnabled() // true
*/
isAdaptiveBitrateEnabled(): boolean;
/**
* Sets the text display settings.
* @function setTextDisplaySettings
* @param {Object} settings - Text settings.
* @instance
* @memberof BaseRemotePlayer
* @returns {void}
*/
setTextDisplaySettings(settings: any): void;
/**
* Start casting.
* @returns {Promise<any>} - A promise to indicate session is starting, or failed
* @instance
* @memberof BaseRemotePlayer
*/
startCasting(): Promise<void>;
/**
* Stops the current cast session.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
stopCasting(): void;
/**
* @returns {boolean} - Whether casting is currently active.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isCasting() // true
*/
isCasting(): boolean;
/**
* @returns {boolean} - Whether casting is available.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isCastAvailable() // true
*/
isCastAvailable(): boolean;
/**
* Gets the current remote session.
* @returns {RemoteSession} - The remote session.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.getCastSession() // new RemoteSession('', '')
*/
getCastSession(): RemoteSession;
/**
* @returns {boolean} - Whether the current media is of VR type (360 content).
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isVr() // false
*/
isVr(): boolean;
/**
* Toggles VR mode on the current content.
* @instance
* @returns {void}
* @memberof BaseRemotePlayer
*/
toggleVrStereoMode(): void;
/**
* @returns {boolean} - Whether the current content displayed in VR mode.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.isInVrStereoMode() // false
*/
isInVrStereoMode(): boolean;
/**
* The remote player ads controller.
* @type {?Object}
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.ads // null
*/
get ads(): any;
/**
* Setter.
* @param {TextStyle} style - The text style to set.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
set textStyle(style: TextStyle);
/**
* Getter.
* @returns {TextStyle} - The current text style.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.textStyle // new TextStyle()
*/
get textStyle(): TextStyle;
/**
* Gets the first buffered range of the remote player.
* @returns {Array<any>} - First buffered range in seconds.
* @public
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.buffered // []
*/
get buffered(): Array<any>;
/**
* Setter.
* @param {number} to - The number to set in seconds.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
set currentTime(to: number);
/**
* Getter.
* @returns {number} - The current time in seconds.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.currentTime // 0
*/
get currentTime(): number;
/**
* @returns {number} - The duration in seconds.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.duration // 0
*/
get duration(): number;
/**
* @returns {number} - The live duration in seconds.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.liveDuration // NaN
*/
get liveDuration(): number;
/**
* Setter.
* @param {number} vol - The volume to set in the range of 0-1.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
set volume(vol: number);
/**
* Getter.
* @returns {number} - The current volume in the range of 0-1.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.volume // 1
*/
get volume(): number;
/**
* @returns {boolean} - Whether the cast player is in paused state.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.paused // false
*/
get paused(): boolean;
/**
* @returns {boolean} - Whether the cast player is in ended state.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.ended // false
*/
get ended(): boolean;
/**
* @returns {boolean} - Whether the cast player is in seeking state.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.seeking // false
*/
get seeking(): boolean;
/**
* Setter.
* @param {boolean} mute - The mute value to set.
* @returns {void}
* @instance
* @memberof BaseRemotePlayer
*/
set muted(mute: boolean);
/**
* Getter.
* @returns {boolean} - The muted state.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.muted // false
*/
get muted(): boolean;
/**
* @returns {string} - The current playing source url.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.src // ''
*/
get src(): string;
/**
* @returns {string} - The current poster url.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.poster // ''
*/
get poster(): string;
/**
* Setter.
* @param {number} rate - The playback rate to set.
* @instance
* @memberof BaseRemotePlayer
*/
set playbackRate(rate: number);
/**
* @returns {string} - The current playback rate.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.playbackRate // 1
*/
get playbackRate(): number;
/**
* @returns {string} - The active engine type.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.engineType // ''
*/
get engineType(): string;
/**
* @returns {string} - The active stream type.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.streamType // ''
*/
get streamType(): string;
/**
* @returns {string} - The remote player type.
* @instance
* @memberof BaseRemotePlayer
* @example
* BaseRemotePlayer.prototype.type // BaseRemotePlayer.Type
*/
get type(): string;
/**
* @returns {KPOptionsObject} - The runtime remote player config.
* @instance
* @memberof BaseRemotePlayer
*/
get config(): any;
set isCastInitiator(isCastInitiator: boolean);
get isCastInitiator(): boolean;
}
/**
* Binding redux actions to props utility
*
* @export
* @param {ActionCreatorsMapObject} actions - Redux action creators
* @returns {(dispatch: Dispatch) => ActionCreatorsMapObject} - Function that takes dispatch and returns bound action creators
*/
declare function bindActions<A, M extends ActionCreatorsMapObject<A>>(actions: M): (dispatch: Dispatch) => M;
/**
* BottomBar component
*
* @class BottomBar
* @example <BottomBar>...</BottomBar>
* @extends {Component}
*/
declare class BottomBar extends Component<any, any> {
private bottomBarContainerRef;
private presetControls;
private resizeObserver;
private _currBarWidthArr;
private _maxControlsWidthArr;
private _isFullscreenModeChanging;
constructor(props: any);
/**
* when component did update
*
* @returns {void}
* @memberof BottomBar
*/
componentDidMount(): void;
componentWillUnmount(): void;
private _getControlsWidth;
private onBarWidthChange;
private getMaxControlsWid