@clickview/player 0.0.0-rc.1 → 0.0.0-rc.12

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

@@ -0,0 +1,62 @@
+import { LocalCacheAddress } from 'projects/player/interfaces/models/PlaybackObject';
+import videojs, { VideoJsPlayer } from 'video.js';
+import { LocalCache } from './LocalCache';
+import 'projects/player/plugins/localcache-plugin/localcache-middleware';
+import 'projects/player/plugins/localcache-plugin/compontents/local-cache-indicator';
+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 LocalCachePluginOptions {
+    localCacheAddresses: LocalCacheAddress[];
+    enabled: boolean;
+}
+export declare class LocalCachePlugin extends Plugin {
+    private localCaches_;
+    private activeLocalCache_;
+    private enabled_;
+    private logger_;
+    constructor(player: VideoJsPlayer, options?: LocalCachePluginOptions);
+    get isEnabled(): boolean;
+    /**
+     * Enable local cache support
+     */
+    enable(): void;
+    /**
+     * Disable local cache support
+     */
+    disable(): void;
+    /**
+     * Get the active local cache
+     */
+    getActiveLocalCache(): Promise<LocalCache | null>;
+    /**
+     * Resets the active local cache and starts the checks to find a new active local cache
+     */
+    resetActiveLocalCache(): void;
+    /**
+     * Clears the active local cache
+     */
+    clearActiveLocalCache(): void;
+    dispose(): void;
+    private initialize;
+    private onPlayerError;
+    private getActiveLocalCacheInternal;
+    private onLocalCacheChange;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        localCache(options?: LocalCachePluginOptions): LocalCachePlugin;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/next-video-plugin/components/up-next/up-next.d.ts

@@ -0,0 +1 @@
+import './up-next.scss';

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

@@ -0,0 +1,52 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+import { NextVideo } from 'projects/player/interfaces/NextVideo';
+import 'projects/player/plugins/next-video-plugin/components/up-next/up-next';
+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 NextVideoPlugin extends Plugin {
+    private shouldPlayNextVideo;
+    private hasLocalStorage;
+    private chapterTrack;
+    private upNextRendered;
+    private upNextTimepoint;
+    /**
+     * @Matt These values are intended to be used to render the up next widget
+     * and to be called when the up next widget is clicked on
+     * or the video ends.
+     *
+     * Note: Cam suggested we check if there is a chapter called "Credits"
+     * and trigger the up next widget then, rather than in the last 5 seconds
+     */
+    private nextVideo;
+    private callback;
+    constructor(player: VideoJsPlayer);
+    private initialize;
+    setNextVideo(nextVideo: NextVideo, callback: () => void): void;
+    getShouldPlayNext(): boolean;
+    setShouldPlayNext(val: boolean): void;
+    private setChapterTrack;
+    private bindListeners;
+    private unbindListeners;
+    private onTimeUpdate;
+    private showUpNext;
+    private hideUpNext;
+    private testHasLocalStorage;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        nextVideoPlugin(): NextVideoPlugin;
+    }
+}
+export {};

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

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

package/dist/projects/player/src/plugins/open-externally-plugin/interfaces/ExternalLinkOptions.d.ts

@@ -0,0 +1,3 @@
+export interface ExternalLinkOptions {
+    currentTime: number;
+}

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

@@ -0,0 +1 @@
+import 'projects/player/plugins/open-externally-plugin/components/open-externally-button';

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

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

package/dist/projects/player/src/plugins/persist-volume-plugin/persist-volume-plugin.test.d.ts

@@ -0,0 +1 @@
+import '../../plugins/persist-volume-plugin/persist-volume-plugin';

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

@@ -0,0 +1,9 @@
+interface Event {
+    time: number;
+    type: string;
+}
+export interface ProgressEvent {
+    start: Event;
+    end: Event;
+}
+export {};

package/dist/projects/player/src/plugins/progressive-files-plugin/ProgressiveFilesPluginOptions.d.ts

@@ -0,0 +1,4 @@
+import { Source } from 'projects/player/plugins/progressive-files-plugin/interfaces/Source';
+export interface ProgressiveFilesPluginOptions {
+    sources: Source[];
+}

package/dist/projects/player/src/plugins/progressive-files-plugin/ProgressiveRepresentation.d.ts

@@ -0,0 +1,10 @@
+import { Representation } from 'videojs-contrib-quality-levels';
+import { Source } from 'projects/player/plugins/progressive-files-plugin/interfaces/Source';
+import { ProgressiveFilesPlugin } from 'projects/player/plugins/progressive-files-plugin/progressive-files-plugin';
+export declare class ProgressiveRepresentation implements Representation {
+    id: string;
+    private plugin;
+    private source;
+    constructor(plugin: ProgressiveFilesPlugin, source: Source);
+    enabled(enabled: boolean): boolean;
+}

package/dist/projects/player/src/plugins/progressive-files-plugin/interfaces/Source.d.ts

@@ -0,0 +1,6 @@
+export interface Source {
+    id: string;
+    url: string;
+    mimeType: string;
+    default: boolean;
+}

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

@@ -0,0 +1,38 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+import { Source } from 'projects/player/plugins/progressive-files-plugin/interfaces/Source';
+import { ProgressiveFilesPluginOptions } from 'projects/player/plugins/progressive-files-plugin/ProgressiveFilesPluginOptions';
+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 declare class ProgressiveFilesPlugin extends Plugin {
+    private sources;
+    private _currentSource;
+    private qualityLevels;
+    constructor(player: VideoJsPlayer, options: ProgressiveFilesPluginOptions);
+    get currentSource(): Source;
+    /**
+     * Sets the current player source. If the id cannot be found, the current source is returned
+     * @param id the id of the source to set
+     */
+    setSource(id: string): Source;
+    getSourceById(id: string): Source;
+    private populateSources;
+    private sourceChangeUpdateQualityLevels;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        progressiveFiles(options: ProgressiveFilesPluginOptions): void;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/resources-plugin/components/resource-menu-item/resource-menu-item.d.ts

@@ -0,0 +1,30 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+import { Core } from 'libs/common/core';
+import { Resource } from 'libs/shared/interfaces';
+import './resource-menu-item.scss';
+interface ResourceMenuItemProps {
+    resource: Resource;
+    imageCdnUrl: string;
+    appLink: Core.AppLink;
+}
+declare const ClickableComponent: {
+    new (player: VideoJsPlayer, options?: videojs.ComponentOptions): videojs.ClickableComponent;
+    prototype: videojs.ClickableComponent;
+};
+/**
+ * Until we update to React 17, we need to wrap the above React component
+ * in a videojs ClickableComponent so that a native browser event listener
+ * will be bound.
+ *
+ * This is necessary because the mechanism of event delegation in React 16
+ * allows native browser event listeners to be triggered before the React event
+ * listeners, regardless of their position in the DOM tree.
+ *
+ * All of this means that the Menu component's click handler will be receive
+ * the event before the React component, blocking it.
+ */
+export declare class ResourceMenuItem extends ClickableComponent {
+    constructor(player: VideoJsPlayer, options: ResourceMenuItemProps);
+    createEl(): Element;
+}
+export {};

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

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

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

@@ -0,0 +1,14 @@
+import { Core } from 'libs/common/core';
+import { Resource } from 'libs/shared/interfaces';
+import 'projects/player/plugins/resources-plugin/components/resources-button/resources-button';
+interface ResourcesPluginOptions {
+    resources: Resource[];
+    imageCdnUrl: string;
+    resourceAppLink?: Core.AppLink;
+}
+declare module 'video.js' {
+    interface VideoJsPlayer {
+        resourcesPlugin(options: ResourcesPluginOptions): void;
+    }
+}
+export {};

package/dist/projects/player/src/plugins/touch-controls-plugin/components/touch-controls/touch-controls.d.ts

@@ -0,0 +1,59 @@
+import videojs, { VideoJsPlayer } from 'video.js';
+import './touch-controls.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;
+};
+export declare class TouchControls extends Component {
+    private el_;
+    private timeoutId;
+    constructor(player: VideoJsPlayer, options?: videojs.ComponentOptions);
+    buildCSSClass(): string;
+    createEl(tagName?: string, properties?: any, attributes?: any): Element;
+    setUi(amount: number, timeout: number): void;
+    removeText(): void;
+}
+export {};

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

@@ -0,0 +1 @@
+import './components/touch-controls/touch-controls';

package/dist/projects/player/src/react/CreateClipPlayer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CreateClipPlayerOptions } from 'projects/player/players/create-clip-player';
+export declare function ClickViewCreateClipPlayer(props: CreateClipPlayerOptions): React.ReactElement;

package/dist/projects/player/src/react/InteractivePlayer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InteractiveMode } from 'projects/player/plugins/interactive-plugin/interfaces';
+import { InteractivePlayer, InteractivePlayerOptions } from 'projects/player/players/interactive-player';
+interface ClickViewInteractivePlayerProps {
+    onReady?: (player: InteractivePlayer) => void;
+    mode?: InteractiveMode;
+}
+export declare function ClickViewInteractivePlayer(props: InteractivePlayerOptions & ClickViewInteractivePlayerProps): React.ReactElement;
+export {};

package/dist/projects/player/src/react/Player.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Player, PlayerOptions } from 'projects/player/players/player';
+export interface ClickViewPlayerProps extends Omit<PlayerOptions, 'playerApi'> {
+    playerApi?: string;
+    className?: string;
+    onReady?: (player: Player) => void;
+    onError?: (error: any) => void;
+    onDispose?: () => void;
+}
+export declare function ClickViewPlayer(props: ClickViewPlayerProps): React.ReactElement;

package/dist/projects/player/src/react/react-component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import videojs, { VideoJsPlayer } from 'video.js';
+import { HashObject } from 'libs/common/react/interfaces';
+declare type BaseReactComponentCtor<T> = new (player: VideoJsPlayer, options?: T) => videojs.Component;
+interface RootNodeOptions {
+    tagName?: string;
+    properties?: any;
+    attributes?: any;
+}
+export declare function getReactComponent<T extends HashObject>(componentCtor: (player: VideoJsPlayer, options?: T) => React.ReactElement, options?: RootNodeOptions): BaseReactComponentCtor<T>;
+export {};

package/dist/projects/player/src/services/analytics-service.d.ts

@@ -0,0 +1,15 @@
+import { ProgressEvent } from 'projects/player/plugins/progress-reporter-plugin/progress-reporter-plugin';
+declare class StaticAnalyticsService {
+    private static instance;
+    private collectionApiClient;
+    constructor();
+    static get Instance(): StaticAnalyticsService;
+    logStream(): void;
+    logVideoProgress(events: ProgressEvent[]): void;
+    private initialize;
+    private setupCollectionApiClient;
+    private getCurrentUser;
+    private getActionContext;
+}
+export declare const AnalyticsService: StaticAnalyticsService;
+export {};

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

@@ -0,0 +1,6 @@
+declare class StaticAjaxHelper {
+    get<T>(url: string): Promise<T>;
+    private parseResponse;
+}
+export declare const AjaxHelper: StaticAjaxHelper;
+export {};

package/dist/projects/player/src/utils/fn.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Wraps the given function, `fn`, with a new function that only invokes `fn`
+ * at most once per every `wait` milliseconds.
+ *
+ * @function
+ * @param    {Function} fn
+ *           The function to be throttled.
+ *
+ * @param    {number}   wait
+ *           The number of milliseconds by which to throttle.
+ *
+ * @return   {Function}
+ */
+export declare const throttle: (fn: any, wait: any) => any;

package/dist/projects/player/src/utils/formatTime.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Direct copy from format-time.js within video.js
+ * Unfortunately video.js doesn't expose this
+ */
+export declare function formatTime(seconds: number, guide?: number): string;

package/dist/projects/player/src/utils/hotkeys.d.ts

@@ -0,0 +1,5 @@
+/**
+ * handleHotKeys is to be used as userActions.hotkeys in VideoJsPlayerOptions.
+ * `this` will be a reference to the player.
+ */
+export declare function handleHotKeys(event: KeyboardEvent): void;

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

@@ -0,0 +1,19 @@
+import { QualityLevel, QualityLevelList } from 'videojs-contrib-quality-levels';
+export declare class QualityHelper {
+    /**
+     * Returns a list of known profiles, ordered from best to worst
+     */
+    static getKnownProfiles(): string[];
+    /**
+     * Enables the provided profile, or the next best option
+     * @param qualities
+     * @param profile The profile which we want to select
+     */
+    static enableProfileOrNextBest(qualities: QualityLevelList, profile: string): QualityLevel | null;
+    /**
+     * Gets the next best quality for the given profile
+     * @param qualities
+     * @param profile
+     */
+    private static getNextBestQuality;
+}

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

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

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/dist/projects/player/src/utils/track-helper.d.ts

@@ -0,0 +1,7 @@
+import { VideoJsPlayer } from 'video.js';
+declare type TrackKind = 'metadata' | 'chapters';
+declare type TrackLabel = 'interactive' | 'thumbnails' | false;
+export declare const TrackHelper: {
+    useTrack(player: VideoJsPlayer, kind: TrackKind, label: TrackLabel, callback: (track: TextTrack) => void): void;
+};
+export {};

package/dist/projects/player/test/players/test-player.d.ts

@@ -0,0 +1,17 @@
+import { VideoJsPlayer } from 'video.js';
+import { BasePlayer, BasePlayerOptions } from '../../src/players/base-player';
+export interface TestPlayerOptions extends BasePlayerOptions {
+    configurePlugins?: (player: VideoJsPlayer) => void;
+}
+export declare class TestPlayer extends BasePlayer {
+    protected options: TestPlayerOptions;
+    player: VideoJsPlayer;
+    constructor(id: string | Element, options: TestPlayerOptions);
+    /**
+     * TODO: Look at reimplementing this. At the moment it's causing
+     * problems because the test will dispose of the player before the
+     * fetch has completed.
+     */
+    protected fetch(): Promise<void>;
+    protected configurePlugins(): void;
+}

package/dist/projects/player/test/utils/test-helpers.d.ts

@@ -0,0 +1,8 @@
+import { TestPlayer, TestPlayerOptions } from '../players/test-player';
+interface PlayerOptions extends Omit<TestPlayerOptions, 'viewKey'> {
+}
+export declare const TestHelpers: {
+    makeEl(): HTMLElement;
+    makePlayer(playerOptions?: PlayerOptions, containerEl?: HTMLElement): TestPlayer;
+};
+export {};

package/jest.config.js

@@ -0,0 +1,13 @@
+const getBaseConfig = require('../../libs/testing/jest.base.config');
+const { compilerOptions } = require('./tsconfig');
+
+const paths = { ...compilerOptions.paths };
+
+delete paths['*'];
+
+const baseConfig = getBaseConfig(paths);
+
+module.exports = {
+  ...baseConfig,
+  setupFilesAfterEnv: [...baseConfig.setupFilesAfterEnv, './test/setupTests.ts'],
+};

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@clickview/player",
-  "version": "0.0.0-rc.1",
+  "version": "0.0.0-rc.12",
   "description": "ClickView Player",
   "main": "dist/player-app.js",
   "scripts": {
     "start": "set NODE_ENV=development&& webpack -w --config ./tooling/webpack.config.js",
-    "build": "set NODE_ENV=production&& webpack --config ./tooling/webpack.config.js",
+    "build": "set NODE_ENV=production&&  webpack --config ./tooling/webpack.config.js",
+    "build-font": "set NODE_ENV=development&& npm run start",
     "dev-build": "set NODE_ENV=development&& webpack --config ./tooling/webpack.config.js",
-    "dev-server": "set NODE_ENV=development&& webpack-dev-server --config ./tooling/webpack.config.js"
+    "storybook": "start-storybook -s ./.storybook/stories/assets -p 6006",
+    "build-storybook": "build-storybook",
+    "test": "jest",
+    "test-watch": "jest --watch",
+    "webpack-dev-server": "set NODE_ENV=development&& webpack-dev-server --config ./tooling/webpack.config.js"
   },
   "repository": {
     "type": "git",
@@ -20,13 +25,24 @@
   "author": "Matt Trengrove, Cameron Hill, Shale Kuzmanovski",
   "license": "ISC",
   "devDependencies": {
-    "@clickview/tooling": "0.0.18",
+    "@babel/core": "7.11.6",
+    "@clickview/eslint-config": "1.0.0",
+    "@clickview/player-font": "0.0.1",
+    "@clickview/tooling": "0.0.19-rc.1",
+    "@storybook/react": "6.0.26",
+    "@types/simplebar": "5.1.1",
     "@types/video.js": "7.3.11",
+    "jest": "26.1.0",
+    "ts-jest": "26.1.4",
     "webpack-dev-server": "3.11.0"
   },
   "dependencies": {
-    "@clickview/styles": "1.0.9-rc.0",
-    "video.js": "7.8.4"
+    "@clickview/styles": "1.0.12-rc.1",
+    "keycode": "2.2.0",
+    "simplebar": "5.3.0",
+    "simplebar-react": "2.3.0",
+    "video.js": "7.8.4",
+    "videojs-contrib-quality-levels": "2.0.9"
   },
   "babel": {
     "presets": [

package/test/players/test-player.ts

@@ -0,0 +1,31 @@
+import { VideoJsPlayer } from 'video.js';
+import { BasePlayer, BasePlayerOptions } from '../../src/players/base-player';
+
+export interface TestPlayerOptions extends BasePlayerOptions {
+  configurePlugins?: (player: VideoJsPlayer) => void;
+}
+
+export class TestPlayer extends BasePlayer {
+  protected options: TestPlayerOptions;
+
+  public player: VideoJsPlayer;
+
+  constructor(id: string | Element, options: TestPlayerOptions) {
+    super(id, options);
+  }
+
+  /**
+   * TODO: Look at reimplementing this. At the moment it's causing
+   * problems because the test will dispose of the player before the
+   * fetch has completed.
+   */
+  protected async fetch(): Promise<void> {
+  }
+
+  protected configurePlugins(): void {
+    if (!(typeof this.options.configurePlugins === 'function'))
+      return;
+
+    this.options.configurePlugins(this.player);
+  }
+}

package/test/setupTests.ts

@@ -0,0 +1,8 @@
+/**
+ * Media playback isn't supported by the DOM provided by Jest
+ * so we mock the following functions.
+ */
+window.HTMLMediaElement.prototype.load = () => { };
+window.HTMLMediaElement.prototype.play = (() => { }) as any;
+window.HTMLMediaElement.prototype.pause = () => { };
+window.HTMLMediaElement.prototype.addTextTrack = (() => { }) as any;

package/test/utils/test-helpers.ts

@@ -0,0 +1,22 @@
+import { TestPlayer, TestPlayerOptions } from '../players/test-player';
+
+interface PlayerOptions extends Omit<TestPlayerOptions, 'viewKey'> { }
+
+export const TestHelpers = {
+  makeEl(): HTMLElement {
+    const el = document.createElement('div');
+    el.id = 'test-player';
+    return el;
+  },
+
+  makePlayer(playerOptions?: PlayerOptions, containerEl?: HTMLElement): TestPlayer {
+    containerEl = containerEl || TestHelpers.makeEl();
+
+    document.body.innerHTML = '';
+    document.body.appendChild(containerEl);
+
+    playerOptions = playerOptions || {};
+
+    return new TestPlayer(containerEl, playerOptions as TestPlayerOptions);
+  }
+};

package/typings/libs/videojs-contrib-quality-levels.d.ts

@@ -0,0 +1,29 @@
+import videojs from 'video.js';
+
+declare module 'video.js' {
+  export interface VideoJsPlayer {
+    qualityLevels(): QualityLevelList;
+  }
+}
+
+declare module 'videojs-contrib-quality-levels' {
+  export interface QualityLevelList extends videojs.EventTarget {
+    [id: string]: QualityLevel;
+    selectedIndex: number;
+    length: number;
+    addQualityLevel(representation: Representation): QualityLevel;
+    removeQualityLevel(qualityLevel: QualityLevel): QualityLevel;
+    getQualityLevelById(id: string): QualityLevel;
+  }
+
+  export interface QualityLevel {
+    id: string;
+    label: string;
+    enabled: boolean;
+  }
+
+  export interface Representation {
+    id: string;
+    enabled(enabled: boolean): boolean;
+  }
+}