@clickview/player 0.0.3-dev-us.6 → 0.0.3-dev.0

package/dist/projects/player/src/players/base-player.d.ts

@@ -0,0 +1,84 @@
+import { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
+import 'videojs-contrib-quality-levels';
+import 'projects/player/plugins/progressive-files-plugin/progressive-files-plugin';
+import 'projects/player/plugins/localcache-plugin/localcache-plugin';
+import 'projects/player/plugins/progress-reporter-plugin/progress-reporter-plugin';
+import 'projects/player/components/time-wrapper/time-wrapper';
+import 'projects/player/components/collapserator/collapserator';
+import 'projects/player/components/chapter-seek-bar/chapter-seek-bar';
+import 'projects/player/components/progress-control/progress-control';
+import 'projects/player/components/mouse-time-display/mouse-time-display';
+import 'projects/player/components/chapters-button/chapters-button';
+import 'projects/player/components/subs-caps-button/subs-caps-button';
+import 'projects/player/components/quality-selector/quality-button';
+import 'projects/player/components/playback-rate-button/playback-rate-button';
+import 'projects/player/components/player/player';
+/**
+ * *.scss imports must be relative
+ */
+import '../components/control-bar/control-bar.scss';
+import '../components/volume-control/volume-control.scss';
+import '../components/menu/menu.scss';
+import '../components/big-play-button/big-play-button.scss';
+import { ExternalLinkOptions } from 'projects/player/plugins/open-externally-plugin/interfaces/ExternalLinkOptions';
+import { PlaybackObject } from 'projects/player/interfaces/models/PlaybackObject';
+import { AnalyticsPlayerType, AnalyticsService } from 'projects/player/services/analytics-service';
+import { ProgressEvent } from 'projects/player/plugins/progress-reporter-plugin/progress-reporter-plugin';
+export interface BasePlayerOptions {
+    autoplay?: boolean;
+    viewKey: string;
+    startTime?: number;
+    controls?: boolean;
+    playbackRates?: number[];
+    embed?: boolean;
+    playerApi?: URL;
+    enableLocalCache?: boolean;
+    onRequestPictureInPicture?: (isPiP: boolean) => void;
+    showResources?: boolean;
+    imageCdnUrl?: string;
+    /**
+     * An optional external element for binding hotkey
+     * event listeners to.
+     */
+    hotkeyElQuerySelector?: string;
+    onError?: (error: any) => void;
+    getExternalLink?: (options: ExternalLinkOptions) => string;
+    onClickCreateClip?: () => void;
+    setup?: (options: BasePlayerOptions, player: VideoJsPlayer) => void;
+    fetch?: (viewKey: string) => Promise<PlaybackObject>;
+}
+export declare abstract class BasePlayer {
+    static options_: BasePlayerOptions;
+    protected el: HTMLVideoElement;
+    protected player: VideoJsPlayer;
+    protected options: BasePlayerOptions;
+    protected analyticsService: AnalyticsService;
+    private streamLogged;
+    constructor(id: string | Element, options: BasePlayerOptions);
+    protected initialize(): void;
+    private _configurePlugins;
+    protected configurePlugins(): void;
+    protected onFlushProgress(events: ProgressEvent[]): void;
+    protected buildVideoJs(): VideoJsPlayer;
+    protected getPlayerOptions(): VideoJsPlayerOptions;
+    protected fetch(): Promise<void>;
+    private fetchConfig;
+    protected additionalSetup(playbackObject: PlaybackObject): void;
+    private setupAnalyticsService;
+    protected logStream(): void;
+    protected getAnalyticsPlayerType(): AnalyticsPlayerType;
+    protected createEl(id: string | Element): HTMLVideoElement;
+    protected getPlayerClassName(): string;
+    on(type: string | string[], listener: (...args: any[]) => void): void;
+    one(type: string | string[], listener: (...args: any[]) => void): void;
+    off(type: string | string[], listener: (...args: any[]) => void): void;
+    trigger(event: any, hash?: any): boolean;
+    dispose(): void;
+    ready(callback: () => void): void;
+    play(): void;
+    currentTime(time?: number): number | void;
+    private bindEventListeners;
+    private setupSeekBar;
+    protected getSeekBarName(): string;
+    private configureMenuDimensions;
+}

package/dist/projects/player/src/players/create-clip-player.d.ts

@@ -0,0 +1,18 @@
+import { BasePlayer, BasePlayerOptions } from './base-player';
+import 'projects/player/plugins/create-clip-plugin/create-clip-plugin';
+import { AnalyticsPlayerType } from 'projects/player/services/analytics-service';
+export interface CreateClipPlayerOptions extends Omit<BasePlayerOptions, 'playbackRates'> {
+    onChangeEndTime: (endTime: number) => void;
+    onChangeStartTime: (startTime: number) => void;
+    startTime?: number;
+    endTime?: number;
+    minDuration?: number;
+}
+export declare class CreateClipPlayer extends BasePlayer {
+    protected options: CreateClipPlayerOptions;
+    constructor(id: string | Element, options: CreateClipPlayerOptions);
+    protected getPlayerClassName(): string;
+    protected configurePlugins(): void;
+    protected getSeekBarName(): string;
+    protected getAnalyticsPlayerType(): AnalyticsPlayerType;
+}

package/dist/projects/player/src/players/interactive-player.d.ts

@@ -0,0 +1,27 @@
+import { HtmlPortalNode } from 'react-reverse-portal';
+import { BasePlayer, BasePlayerOptions } from './base-player';
+import { CurrentUser } from 'libs/shared/interfaces';
+import { InteractiveMode } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { PlaybackObject } from 'projects/player/interfaces/models/PlaybackObject';
+import { AnalyticsPlayerType } from 'projects/player/services/analytics-service';
+import { ProgressEvent } from 'projects/player/plugins/progress-reporter-plugin/progress-reporter-plugin';
+import 'projects/player/plugins/interactive-plugin/interactive-plugin';
+export interface InteractivePlayerOptions extends BasePlayerOptions {
+    mode?: InteractiveMode;
+    imageApi?: URL;
+    authToken?: string;
+    collectResults?: boolean;
+    currentUser?: CurrentUser;
+    questionListPortalNode?: HtmlPortalNode;
+    summaryPortalNode?: HtmlPortalNode;
+}
+export declare class InteractivePlayer extends BasePlayer {
+    protected options: InteractivePlayerOptions;
+    private track;
+    private resultsService;
+    private totalProgress;
+    constructor(id: string | Element, options: InteractivePlayerOptions);
+    protected onFlushProgress(events: ProgressEvent[]): void;
+    protected additionalSetup(playbackObject: PlaybackObject): Promise<void>;
+    protected getAnalyticsPlayerType(): AnalyticsPlayerType;
+}

package/dist/projects/player/src/players/player.d.ts

@@ -0,0 +1,27 @@
+import { BasePlayer, BasePlayerOptions } from './base-player';
+import 'projects/player/plugins/example-plugin/example-plugin';
+import 'projects/player/plugins/persist-volume-plugin/persist-volume-plugin';
+import 'projects/player/plugins/fullscreen-on-rotate-plugin/fullscreen-on-rotate-plugin';
+import 'projects/player/plugins/open-externally-plugin/open-externally-plugin';
+import 'projects/player/plugins/clip-plugin/clip-plugin';
+import 'projects/player/plugins/touch-controls-plugin/touch-controls-plugin';
+import 'projects/player/plugins/next-video-plugin/next-video-plugin';
+import 'projects/player/plugins/create-clip-button-plugin/create-clip-button-plugin';
+import 'projects/player/plugins/resources-plugin/resources-plugin';
+import 'projects/player/plugins/picture-in-picture-plugin/picture-in-picture-plugin';
+import 'projects/player/plugins/favourite-plugin/favourite-plugin';
+import { PlaybackObject } from 'projects/player/interfaces/models/PlaybackObject';
+import { NextVideo } from 'projects/player/interfaces/NextVideo';
+export interface PlayerOptions extends BasePlayerOptions {
+}
+export declare class Player extends BasePlayer {
+    protected options: PlayerOptions;
+    constructor(id: string | Element, options: PlayerOptions);
+    protected configurePlugins(): void;
+    setFavourite(isFavourited: boolean, onClickFavourite: () => void): void;
+    setNextVideo(nextVideo: NextVideo, onPlayNext: () => void): void;
+    enablePictureInPicture(): void;
+    disablePictureInPicture(): void;
+    togglePictureInPicture(isInPictureInPicture: boolean): void;
+    protected additionalSetup(playbackObject: PlaybackObject): Promise<void>;
+}

package/dist/projects/player/src/plugins/clip-plugin/clip-plugin.d.ts

@@ -0,0 +1,50 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+declare const Plugin: {
+    new (player: VideoJsPlayer, options?: any): videojs.Plugin;
+    prototype: videojs.Plugin;
+    BASE_PLUGIN_NAME: string;
+    deregisterPlugin(name: string): void;
+    getPlugin(name: string): any;
+    getPluginVersion(name: string): string;
+    getPlugins(names?: string[]): {
+        [name: string]: videojs.Plugin;
+    };
+    isBasic(plugin: string | (() => any)): boolean;
+    registerPlugin<T, K>(name: string, plugin: (this: VideoJsPlayer, ...options: K[]) => T): (...options: K[]) => T;
+    registerPlugin<T_1 extends any>(name: string, plugin: T_1): () => T_1;
+};
+export interface ClipPluginOptions {
+    startTime: number;
+    endTime: number;
+}
+export declare class ClipPlugin extends Plugin {
+    private _clipStart;
+    private _clipEnd;
+    private _isEnded;
+    private playerEndedFn;
+    private playerDurationFn;
+    private playerCurrentTimeFn;
+    private playerbufferedFn;
+    constructor(player: VideoJsPlayer, options: ClipPluginOptions);
+    get clipStart(): number;
+    get clipEnd(): number;
+    dispose(): void;
+    private initialize;
+    private onPlay;
+    private onTimeUpdate;
+    private ended;
+    private duration;
+    private currentTime;
+    /**
+     * Gets the current time of the video and updates the videojs currentTime cache
+     * @param clipTime Set to true to return the current time in the context of a clip
+     */
+    private getCurrentTime;
+    private buffered;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        clipPlugin(options: ClipPluginOptions): void;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/create-clip-button-plugin/components/create-clip-button.d.ts

@@ -0,0 +1 @@
+import './create-clip-button.scss';

package/dist/projects/player/src/plugins/create-clip-button-plugin/create-clip-button-plugin.d.ts

@@ -0,0 +1,10 @@
+import 'projects/player/plugins/create-clip-button-plugin/components/create-clip-button';
+interface CreateClipButtonPluginOptions {
+    onClick: () => void;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        createClipButtonPlugin(options: CreateClipButtonPluginOptions): void;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector-handle.d.ts

@@ -0,0 +1,54 @@
+import videojs from 'video.js';
+declare const Component: {
+    new (player: import("video.js").VideoJsPlayer, options?: videojs.ComponentOptions, ready?: videojs.Component.ReadyCallback): videojs.Component;
+    prototype: videojs.Component;
+    getComponent(name: "Button" | "button"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.ComponentOptions): videojs.Button;
+        prototype: videojs.Button;
+    };
+    getComponent(name: "ClickableComponent" | "clickablecomponent"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.ComponentOptions): videojs.ClickableComponent;
+        prototype: videojs.ClickableComponent;
+    };
+    getComponent(name: "ModalDialog" | "modaldialog"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.ModalDialogOptions): videojs.ModalDialog;
+        prototype: videojs.ModalDialog;
+    };
+    getComponent(name: "Menu" | "menu"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.MenuOptions): videojs.Menu;
+        prototype: videojs.Menu;
+    };
+    getComponent(name: "MenuButton" | "menubutton"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.MenuButtonOptions): videojs.MenuButton;
+        prototype: videojs.MenuButton;
+    };
+    getComponent(name: "MenuItem" | "menuitem"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.MenuItemOptions): videojs.MenuItem;
+        prototype: videojs.MenuItem;
+    };
+    getComponent(name: "MouseTimeDisplay" | "mouseTimeDisplay"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.ComponentOptions): videojs.MouseTimeDisplay;
+        prototype: videojs.MouseTimeDisplay;
+    };
+    getComponent(name: "Spacer" | "spacer"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.ComponentOptions, ready?: videojs.Component.ReadyCallback): videojs.Spacer;
+        prototype: videojs.Spacer;
+    };
+    getComponent(name: "Player" | "player"): {
+        new (player: import("video.js").VideoJsPlayer, options?: import("video.js").VideoJsPlayerOptions): import("video.js").VideoJsPlayer;
+        prototype: import("video.js").VideoJsPlayer;
+        getTagSettings(tag: Element): any;
+    };
+    getComponent(name: "timeTooltip" | "TimeTooltip"): {
+        new (player: import("video.js").VideoJsPlayer, options?: videojs.ComponentOptions): videojs.TimeToolTip;
+        prototype: videojs.TimeToolTip;
+    };
+    getComponent(name: string): any;
+    registerComponent(name: string, ComponentToRegister: any): any;
+};
+export declare class ClipTimepointSelectorHandle extends Component {
+    buildCSSClass(): string;
+    createEl(tagName?: string, properties?: any, attributes?: any): Element;
+    isEventTarget(e: videojs.EventTarget.Event): boolean;
+}
+export {};

package/dist/projects/player/src/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector.d.ts

@@ -0,0 +1,90 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+declare const Component: {
+    new (player: VideoJsPlayer, options?: videojs.ComponentOptions, ready?: videojs.Component.ReadyCallback): videojs.Component;
+    prototype: videojs.Component;
+    getComponent(name: "Button" | "button"): {
+        new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.Button;
+        prototype: videojs.Button;
+    };
+    getComponent(name: "ClickableComponent" | "clickablecomponent"): {
+        new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.ClickableComponent;
+        prototype: videojs.ClickableComponent;
+    };
+    getComponent(name: "ModalDialog" | "modaldialog"): {
+        new (player: VideoJsPlayer, options?: videojs.ModalDialogOptions): videojs.ModalDialog;
+        prototype: videojs.ModalDialog;
+    };
+    getComponent(name: "Menu" | "menu"): {
+        new (player: VideoJsPlayer, options?: videojs.MenuOptions): videojs.Menu;
+        prototype: videojs.Menu;
+    };
+    getComponent(name: "MenuButton" | "menubutton"): {
+        new (player: VideoJsPlayer, options?: videojs.MenuButtonOptions): videojs.MenuButton;
+        prototype: videojs.MenuButton;
+    };
+    getComponent(name: "MenuItem" | "menuitem"): {
+        new (player: VideoJsPlayer, options?: videojs.MenuItemOptions): videojs.MenuItem;
+        prototype: videojs.MenuItem;
+    };
+    getComponent(name: "MouseTimeDisplay" | "mouseTimeDisplay"): {
+        new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.MouseTimeDisplay;
+        prototype: videojs.MouseTimeDisplay;
+    };
+    getComponent(name: "Spacer" | "spacer"): {
+        new (player: VideoJsPlayer, options?: videojs.ComponentOptions, ready?: videojs.Component.ReadyCallback): videojs.Spacer;
+        prototype: videojs.Spacer;
+    };
+    getComponent(name: "Player" | "player"): {
+        new (player: VideoJsPlayer, options?: import("video.js").VideoJsPlayerOptions): VideoJsPlayer;
+        prototype: VideoJsPlayer;
+        getTagSettings(tag: Element): any;
+    };
+    getComponent(name: "timeTooltip" | "TimeTooltip"): {
+        new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.TimeToolTip;
+        prototype: videojs.TimeToolTip;
+    };
+    getComponent(name: string): any;
+    registerComponent(name: string, ComponentToRegister: any): any;
+};
+import './clip-timepoint-selector.scss';
+export interface ClipTimepointSelectorOptions extends videojs.ComponentOptions {
+    startTime: number;
+    endTime: number;
+    minDuration: number;
+    onChangeStartTime: (startTime: number) => void;
+    onChangeEndTime: (endTime: number) => void;
+}
+export declare class ClipTimepointSelector extends Component {
+    options_: ClipTimepointSelectorOptions;
+    el_: HTMLElement;
+    private minDuration;
+    /**
+     * These variables shouldn't be set directly.
+     * setStartTime and setEndTime should be used.
+     */
+    private startTime;
+    private endTime;
+    private startHandle;
+    private endHandle;
+    private dragStartActive;
+    private dragEndActive;
+    private dragSliderActive;
+    private dragSliderCurrentPosition;
+    constructor(player: VideoJsPlayer, options: ClipTimepointSelectorOptions);
+    createEl(): Element;
+    private update;
+    private setStartTime;
+    private setEndTime;
+    private bindListeners;
+    private dragStart;
+    private dragEnd;
+    private drag;
+    private handleStartHandleDrag;
+    private handleEndHandleDrag;
+    private handleSliderDrag;
+    private getPosition;
+    private setStartOffset;
+    private setWidth;
+    private getPercentage;
+}
+export {};

package/dist/projects/player/src/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar.d.ts

@@ -0,0 +1,14 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+declare const SeekBar: {
+    new (player: VideoJsPlayer, options?: videojs.SliderOptions): videojs.SeekBar;
+    prototype: videojs.SeekBar;
+};
+import { ClipTimepointSelectorOptions } from 'projects/player/plugins/create-clip-plugin/components/clip-timepoint-selector/clip-timepoint-selector';
+import './create-clip-seek-bar.scss';
+interface CreateClipSeekBarOptions extends ClipTimepointSelectorOptions {
+}
+export declare class CreateClipSeekBar extends SeekBar {
+    constructor(player: VideoJsPlayer, options: any);
+    initialize(options: CreateClipSeekBarOptions): void;
+}
+export {};

package/dist/projects/player/src/plugins/create-clip-plugin/create-clip-plugin.d.ts

@@ -0,0 +1,14 @@
+import 'projects/player/plugins/create-clip-plugin/components/create-clip-seek-bar/create-clip-seek-bar';
+interface CreateClipPluginOptions {
+    onChangeStartTime: (startTime: number) => void;
+    onChangeEndTime: (endTime: number) => void;
+    startTime?: number;
+    endTime?: number;
+    minDuration?: number;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        createClipPlugin(options: CreateClipPluginOptions): void;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/example-plugin/components/example-button/example-button.d.ts

@@ -0,0 +1 @@
+import './example-button.scss';

package/dist/projects/player/src/plugins/example-plugin/components/example-react-button/example-react-button.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/projects/player/src/plugins/example-plugin/example-plugin.d.ts

@@ -0,0 +1,2 @@
+import './components/example-button/example-button';
+import './components/example-react-button/example-react-button';

package/dist/projects/player/src/plugins/favourite-plugin/components/favourite-button.d.ts

@@ -0,0 +1,19 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+declare const Button: {
+    new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.Button;
+    prototype: videojs.Button;
+};
+import './favourite-button.scss';
+interface FavouriteButtonOptions extends videojs.ComponentOptions {
+    isFavourited: boolean;
+    clickHandler: () => void;
+}
+export declare class FavouriteButton extends Button {
+    options_: FavouriteButtonOptions;
+    controlText_: string;
+    constructor(player: VideoJsPlayer, options: FavouriteButtonOptions);
+    update(): void;
+    handleClick(...args: any[]): void;
+    buildCSSClass(): string;
+}
+export {};

package/dist/projects/player/src/plugins/favourite-plugin/favourite-plugin.d.ts

@@ -0,0 +1,28 @@
+import videojs from 'video.js';
+declare const Plugin: {
+    new (player: VideoJsPlayer, options?: any): videojs.Plugin;
+    prototype: videojs.Plugin;
+    BASE_PLUGIN_NAME: string;
+    deregisterPlugin(name: string): void;
+    getPlugin(name: string): any;
+    getPluginVersion(name: string): string;
+    getPlugins(names?: string[]): {
+        [name: string]: videojs.Plugin;
+    };
+    isBasic(plugin: string | (() => any)): boolean;
+    registerPlugin<T, K>(name: string, plugin: (this: VideoJsPlayer, ...options: K[]) => T): (...options: K[]) => T;
+    registerPlugin<T_1 extends any>(name: string, plugin: T_1): () => T_1;
+};
+declare class FavouritePlugin extends Plugin {
+    private isFavourite;
+    private onClickFavourite;
+    private button;
+    setFavourite(isFavourite: boolean, onClickFavourite: () => void): void;
+    private renderFavouriteButton;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        favouritePlugin(): FavouritePlugin;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/fullscreen-on-rotate-plugin/fullscreen-on-rotate-plugin.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/add-question-button/add-question-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AddQuestionButtonProps {
+    isCreate: boolean;
+    open: boolean;
+    showTypeSelector: () => void;
+}
+export declare function AddQuestionButton(props: AddQuestionButtonProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-annotation/create-annotation-helpers.d.ts

@@ -0,0 +1,9 @@
+export declare const draftConvertOptions: {
+    styleToHTML: (style: any) => {
+        start: string;
+        end: string;
+    };
+    entityToHTML: (entity: any, originalText: any) => any;
+    htmlToStyle: (nodeName: any, node: any, currentStyle: any) => any;
+    htmlToEntity: (nodeName: any, node: any, createEntity: any) => any;
+};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-annotation/create-annotation-link.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface LinkState {
+    link: string;
+    selectionText: string;
+}
+interface CreateAnnotationLinkProps {
+    onChange: (tool: 'link', text: string, url: string, target: '_blank') => void;
+    expanded: boolean;
+    onExpandEvent: () => void;
+    currentState: LinkState;
+}
+export declare function CreateAnnotationLink(props: CreateAnnotationLinkProps): JSX.Element;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-annotation/create-annotation.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionProps } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+import './create-annotation.scss';
+interface CreateAnnotationState extends CreateInteractionState {
+    annotation: string;
+}
+export declare function ValidateAnnotation(state: CreateAnnotationState): string;
+export declare function SubmitAnnotation(state: CreateAnnotationState, interaction: Interaction): Promise<void>;
+export declare function CreateAnnotation(props: InteractionProps<CreateAnnotationState>): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-components.d.ts

@@ -0,0 +1,7 @@
+import { Interaction, InteractionTypeId } from 'libs/shared/interfaces';
+import { CreateInteractionState, CreateSubmissionFunction, InteractionComponent } from 'projects/player/plugins/interactive-plugin/interfaces';
+export declare function getCreateComponent(typeId: InteractionTypeId): InteractionComponent;
+declare type CreateValidationFunction = (state: CreateInteractionState, interaction: Interaction) => string;
+export declare function getCreateValidation(typeId: InteractionTypeId): CreateValidationFunction;
+export declare function getCreateSubmit(typeId: InteractionTypeId): CreateSubmissionFunction;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-error-feedback/create-error-feedback.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CreateErrorFeedbackProps {
+    error?: string;
+}
+export declare function CreateErrorFeedback(props: CreateErrorFeedbackProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-image/create-image-cropper.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface CreateImageCropperProps {
+    image: HTMLImageElement;
+    imageAlt: string;
+    onClickCrop: (imageUrl: string) => void;
+    onClickCancel: () => void;
+}
+/**
+ * This currently uses a bootstrap modal directly.
+ * This is because modals are currently not used in player for any other purpose.
+ * If a modal is needed somewhere else, feel feel to abstract the modal
+ * component out of here into a separate reusable component.
+ */
+export declare function CreateImageCropper(props: CreateImageCropperProps): JSX.Element;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-image/create-image.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+import './create-image.scss';
+interface CreateImageState extends CreateInteractionState {
+    url: string;
+    caption?: string;
+}
+export declare function ValidateImage(state: CreateImageState): string;
+export declare function SubmitImage(state: CreateImageState, interaction: Interaction): Promise<void>;
+interface CreateImageProps {
+    imageApi: string;
+}
+export declare function CreateImage(props: InteractionProps<CreateImageState> & CreateImageProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-image/upload-image-dropzone.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface UploadImageDropzoneProps {
+    onDropImage: (files: FileList) => void;
+}
+export declare function UploadImageDropzone(props: React.PropsWithChildren<UploadImageDropzoneProps>): JSX.Element;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-image/upload-image-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function UploadImageIcon(): JSX.Element;

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-interaction-buttons/create-interaction-buttons.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface CreateInteractionButtonsProps {
+    interaction: Interaction;
+    interactionState: InteractionState;
+    onClickContinue: () => void;
+    onClickSave: () => void;
+    onClickCancel: () => void;
+    onClickAddAnother: () => void;
+    onClickDiscard: () => void;
+}
+export declare function CreateInteractionButtons(props: CreateInteractionButtonsProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-interaction-heading/create-interaction-heading.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { VideoJsPlayer } from 'video.js';
+import { InteractionTypeId } from 'libs/shared/interfaces';
+interface CreateInteractionHeadingProps {
+    typeId: InteractionTypeId;
+    currentIndex: number;
+    numberOfInteractions: number;
+    changeIndex: (index: number) => void;
+    player: VideoJsPlayer;
+}
+export declare function CreateInteractionHeading(props: CreateInteractionHeadingProps): React.ReactElement;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-missing-word/create-missing-word.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+interface Word {
+    text: string;
+    order: number;
+    selected: boolean;
+}
+interface CreateMissingWordState extends CreateInteractionState {
+    fullSentence: string;
+    sentence: string;
+    preview: string;
+    words: Word[];
+}
+export declare function ValidateMissingWord(state: CreateMissingWordState): string;
+export declare function SubmitMissingWord(state: CreateMissingWordState, interaction: Interaction): Promise<void>;
+export declare function CreateMissingWord(props: InteractionProps<CreateMissingWordState>): JSX.Element;
+export {};

package/dist/projects/player/src/plugins/interactive-plugin/components/create-components/create-multiple-choice/create-multiple-choice.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Interaction } from 'libs/shared/interfaces';
+import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
+import './create-multiple-choice.scss';
+export interface MultipleChoiceAnswer {
+    order: number;
+    name: string;
+    isCorrect: boolean;
+}
+interface CreateMultipleChoiceState extends CreateInteractionState {
+    question: string;
+    answers: MultipleChoiceAnswer[];
+    feedback?: string;
+}
+export declare function ValidateMultipleChoice(state: CreateMultipleChoiceState): string;
+export declare function SubmitMultipleChoice(state: CreateMultipleChoiceState, interaction: Interaction): Promise<void>;
+export declare function CreateMultipleChoice(props: InteractionProps<CreateMultipleChoiceState>): JSX.Element;
+export {};