@clickview/player 0.0.7 → 0.0.8-dev.1

package/dist/projects/player/src/components/cog-button/cog-button.d.ts

@@ -1,5 +1,6 @@
-import { CollapsibleComponent } from 'projects/player/interfaces/CollapsibleComponent';
 import videojs, { VideoJsPlayer } from 'video.js';
+import { HashObject } from 'libs/common/react/interfaces';
+import { CollapsibleComponent } from 'projects/player/interfaces/CollapsibleComponent';
 import './cog-button.scss';
 declare const MenuItem: {
     new (player: VideoJsPlayer, options?: videojs.MenuItemOptions): videojs.MenuItem;
@@ -7,7 +8,9 @@ declare const MenuItem: {
 };
 interface AdditionalMenuItem {
     index: number;
+    name: string;
     ctor: typeof MenuItem;
+    options?: HashObject;
 }
 interface CogMenuItemOptions extends videojs.ComponentOptions {
     item: CollapsibleComponent;

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

@@ -1,13 +1,14 @@
 import { HtmlPortalNode } from 'react-reverse-portal';
-import { BasePlayer, BasePlayerOptions } from './base-player';
+import { HashObject } from 'libs/analytics/interfaces';
 import { CurrentUser } from 'libs/shared/interfaces';
+import 'projects/player/plugins/favourite-plugin/favourite-plugin';
+import 'projects/player/plugins/interactive-plugin/interactive-plugin';
 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';
-import { PlayerWrapperOptions } from '../components/player/player';
-import { HashObject } from 'libs/analytics/interfaces';
+import { PlayerWrapperOptions } from 'projects/player/components/player/player';
+import { BasePlayer, BasePlayerOptions } from './base-player';
 export interface InteractivePlayerOptions extends BasePlayerOptions {
     mode?: InteractiveMode;
     imageApi?: URL;
@@ -31,4 +32,5 @@ export declare class InteractivePlayer extends BasePlayer {
     protected getAdditionalAnalyticsData(playbackObject: PlaybackObject): HashObject;
     protected getSeekBarOptions(): any;
     protected getAnalyticsPlayerType(): AnalyticsPlayerType;
+    setFavourite(isFavourited: boolean, onClickFavourite: () => void): void;
 }

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

@@ -14,10 +14,10 @@ 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>;
+    setFavourite(isFavourited: boolean, onClickFavourite: () => void): void;
 }

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

@@ -1,14 +1,23 @@
+import { PlaybackObject } from 'projects/player/interfaces/models/PlaybackObject';
 import { BasePlayer, BasePlayerOptions } from 'projects/player/players/base-player';
 import 'projects/player/plugins/engagement-overlay-plugin/engagement-overlay-plugin';
+import 'projects/player/plugins/clip-plugin/clip-plugin';
+import 'projects/player/plugins/interactive-plugin/interactive-seek-bar-plugin';
 import { AnalyticsPlayerType } from 'projects/player/services/analytics-service';
 import './reports-player.scss';
 export interface ReportsPlayerOptions extends BasePlayerOptions {
     heatMap: number[];
+    onTimepointHover?: (time: number | null) => void;
 }
 export declare class ReportsPlayer extends BasePlayer {
     protected options: ReportsPlayerOptions;
+    private track;
     constructor(id: string | Element, options: ReportsPlayerOptions);
     protected getPlayerClassName(): string;
-    protected configurePlugins(): void;
     protected getAnalyticsPlayerType(): AnalyticsPlayerType;
+    protected additionalSetup(playbackObject: PlaybackObject): Promise<void>;
+    private setupEngagementOverlayPlugin;
+    private setupUpClipPlugin;
+    private setupInteractiveSeekBarPlugin;
+    protected getSeekBarOptions(): any;
 }

package/dist/projects/player/src/plugins/engagement-overlay-plugin/components/engagement-overlay/engagement-overlay-chart-options.d.ts

@@ -0,0 +1,7 @@
+import Highcharts from 'highcharts';
+import { Interactive } from 'libs/shared/interfaces';
+export declare const STATIC_CHART_OPTIONS: Highcharts.Options;
+export declare function getChartOptions(width: number, height: number): Highcharts.ChartOptions;
+export declare function getYAxisChartOptions(heatMap: number[]): Highcharts.YAxisOptions;
+export declare function getTooltipOptions(interactive: Interactive): Highcharts.TooltipOptions;
+export declare function getPlotOptions(moveTimepointIndicator: (x: number | null) => void): Highcharts.PlotOptions;

package/dist/projects/player/src/plugins/engagement-overlay-plugin/components/engagement-overlay/engagement-overlay.d.ts

@@ -0,0 +1,73 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+import { Interactive } from 'libs/shared/interfaces';
+import './engagement-overlay.scss';
+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;
+};
+interface EngagementOverlayOptions extends videojs.ComponentOptions {
+    heatMap: number[];
+    interactive?: Interactive;
+    onTimepointHover?: (time: number | null) => void;
+}
+export declare class EngagementOverlay extends Component {
+    options_: EngagementOverlayOptions;
+    private chart;
+    constructor(player: VideoJsPlayer, options: EngagementOverlayOptions);
+    initialize(): void;
+    buildCSSClass(): string;
+    createEl(tagName?: string, properties?: any, attributes?: any): Element;
+    toggleChart(show: boolean): void;
+    private bindListeners;
+    private handleClick;
+    private buildChart;
+    private resizeChart;
+    private destroyChart;
+    private getChartDimensions;
+    private getHighchartOptions;
+    private moveTimepointIndicator;
+}
+export {};

package/dist/projects/player/src/plugins/engagement-overlay-plugin/components/engagement-overlay-menu-item/engagement-overlay-menu-item.d.ts

@@ -0,0 +1,31 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+declare const MenuItem: {
+    new (player: VideoJsPlayer, options?: videojs.MenuItemOptions): videojs.MenuItem;
+    prototype: videojs.MenuItem;
+};
+interface EngagementOverlayMenuItemOptions extends videojs.MenuItemOptions {
+    overlayVisible: boolean;
+}
+export declare class EngagementOverlayMenuItem extends MenuItem {
+    private toggleEl;
+    private overlayVisible;
+    /**
+     * Because we want to bind our listener in createEl
+     * and createEl runs in super. We store if we've bounud
+     * our handler, so we only call bind once and
+     * the call to removeEventListener will still work
+     */
+    private handlerBound;
+    constructor(player: VideoJsPlayer, options: EngagementOverlayMenuItemOptions);
+    handleToggle(): void;
+    private toggle;
+    private toggleOn;
+    private toggleOff;
+    /**
+     * Because we extend MenuItem which will close the menu by default
+     * we need to halt the event propogation here
+     */
+    handleClick(event: videojs.EventTarget.Event): void;
+    createEl(tagName?: string, properties?: any, attributes?: any): HTMLLIElement;
+}
+export {};

package/dist/projects/player/src/plugins/engagement-overlay-plugin/components/timepoint-interactions/timepoint-interactions.d.ts

@@ -0,0 +1,7 @@
+import { Interactive } from 'libs/shared/interfaces';
+interface TimepointInteractionsProps {
+    interactive: Interactive;
+    time: number;
+}
+export declare function TimepointInteractions(props: TimepointInteractionsProps): JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
 import videojs, { VideoJsPlayer } from 'video.js';
-import 'projects/player/plugins/engagement-overlay-plugin/components/engagement-overlay';
+import { Interactive } from 'libs/shared/interfaces';
+import 'projects/player/plugins/engagement-overlay-plugin/components/engagement-overlay/engagement-overlay';
 declare const Plugin: {
     new (player: VideoJsPlayer, options?: any): videojs.Plugin;
     prototype: videojs.Plugin;
@@ -16,11 +17,14 @@ declare const Plugin: {
 };
 interface EngagementOverlayPluginOptions {
     heatMap: number[];
+    interactive?: Interactive;
+    onTimepointHover?: (time: number | null) => void;
 }
 declare class EngagementOverlayPlugin extends Plugin {
     private options;
     constructor(player: VideoJsPlayer, options: EngagementOverlayPluginOptions);
     private initialize;
+    toggleOverlay(show: boolean): void;
 }
 declare module 'video.js' {
     interface VideoJsPlayer {

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/interactive-plugin/components/create-components/create-annotation/create-annotation-link.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface LinkState {
     link: string;
     selectionText: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CreateImageCropperProps {
     image: HTMLImageElement;
     imageAlt: string;

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Interaction } from 'libs/shared/interfaces';
 import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 interface Word {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Interaction } from 'libs/shared/interfaces';
 import { InteractionProps, CreateInteractionState } from 'projects/player/plugins/interactive-plugin/interfaces';
 import './create-multiple-choice.scss';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MultipleChoiceAnswer } from './create-multiple-choice';
 interface MultipleChoiceAnswerProps {
     answer: MultipleChoiceAnswer;

package/dist/projects/player/src/plugins/interactive-plugin/interactive-seek-bar-plugin.d.ts

@@ -0,0 +1,38 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+import { Interactive } from 'libs/shared/interfaces';
+import './interactive-plugin-styles.scss';
+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;
+};
+interface InteractiveSeekBarPluginOptions {
+    interactive: Interactive;
+}
+/**
+ * This plugin will just render the interactive seek bar (i.e. just the interaction markers).
+ * The user won't be able to interact with any of the interactions.
+ * Currently this is just used in reports-player
+ */
+declare class InteractiveSeekBarPlugin extends Plugin {
+    private options;
+    constructor(player: VideoJsPlayer, options: InteractiveSeekBarPluginOptions);
+    private initialize;
+    private onTrackLoaded;
+    private addChildren;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        interactiveSeekBarPlugin(options?: InteractiveSeekBarPluginOptions): InteractiveSeekBarPlugin;
+    }
+}
+export {};

package/dist/projects/player/src/utils/interactive-track-helper.d.ts

@@ -0,0 +1,5 @@
+import { VideoJsPlayer } from 'video.js';
+import { PlaybackObject } from 'projects/player/interfaces/models/PlaybackObject';
+export declare const InteractiveTrackHelper: {
+    getInteractiveTrack(player: VideoJsPlayer, playbackObject: PlaybackObject): TextTrack;
+};

package/dist/projects/player/src/utils/scrollbar-helper.d.ts

@@ -0,0 +1,6 @@
+import videojs from 'video.js';
+export declare const ScrollbarHelper: {
+    initMenuScrollbar(component: videojs.MenuButton): void;
+    unMountScrollbar(component: videojs.MenuButton): void;
+    getMenuEl(component: videojs.MenuButton): HTMLElement;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickview/player",
-  "version": "0.0.7",
+  "version": "0.0.8-dev.1",
   "description": "ClickView Player",
   "main": "dist/player-app.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "@babel/core": "7.11.6",
     "@clickview/eslint-config": "1.0.1",
     "@clickview/player-font": "0.0.12",
-    "@clickview/tooling": "0.0.25",
+    "@clickview/tooling": "0.0.26-dev.1",
     "@storybook/react": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.3",
     "@types/cropperjs": "1.3.0",
@@ -42,7 +42,7 @@
     "webpack-dev-server": "3.11.0"
   },
   "dependencies": {
-    "@clickview/styles": "1.0.18",
+    "@clickview/styles": "1.0.19-dev.1",
     "@microsoft/signalr": "5.0.2",
     "cropperjs": "1.5.6",
     "draft-convert": "2.1.10",