@clickview/player 0.0.0-dev.0

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 "./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 "./interfaces/Source";
+import { ProgressiveFilesPlugin } from "./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 "./interfaces/Source";
+import { ProgressiveFilesPluginOptions } from "./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/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 "../players/create-clip-player";
+export declare function ClickViewCreateClipPlayer(props: CreateClipPlayerOptions): React.ReactElement;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ClickViewPlayerProps } from "./Player";
+import './embedded-player.scss';
+interface EmbeddedPlayerProps extends Omit<ClickViewPlayerProps, 'embed'> {
+}
+export declare function EmbeddedPlayer(props: EmbeddedPlayerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InteractiveMode } from "../plugins/interactive-plugin/interfaces";
+import { InteractivePlayer, InteractivePlayerOptions } from "../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,8 @@
+import React from 'react';
+import { PlayerOptions } from "../players/player";
+export interface ClickViewPlayerProps extends Omit<PlayerOptions, 'playerApi'> {
+    playerApi?: string;
+    className?: string;
+    innerRef?: React.MutableRefObject<HTMLDivElement>;
+}
+export declare function ClickViewPlayer(props: ClickViewPlayerProps): React.ReactElement;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+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;
+};
+interface RootNodeOptions {
+    tagName?: string;
+    properties?: any;
+    attributes?: any;
+}
+export declare function getReactComponent(componentCtor: (player: VideoJsPlayer, options?: any) => React.ReactElement, options?: RootNodeOptions): typeof Component;
+export {};

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

@@ -0,0 +1,15 @@
+import { ProgressEvent } from "../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/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

@@ -0,0 +1,58 @@
+{
+  "name": "@clickview/player",
+  "version": "0.0.0-dev.0",
+  "description": "ClickView Player",
+  "main": "dist/player-app.js",
+  "scripts": {
+    "start": "set NODE_ENV=development&& webpack --config ./tooling/font-webpack.config.js&& webpack -w --config ./tooling/webpack.config.js",
+    "build": "set NODE_ENV=production&& webpack --config ./tooling/font-webpack.config.js&& 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",
+    "storybook": "webpack --config ./tooling/font-webpack.config.js&& 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",
+    "url": "https://gitlab.cvinternal.net/front-end/clickview"
+  },
+  "cv": {
+    "publishable": true,
+    "rebuildable": true
+  },
+  "author": "Matt Trengrove, Cameron Hill, Shale Kuzmanovski",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "7.11.6",
+    "@clickview/eslint-config": "0.0.0-rc.0",
+    "@clickview/tooling": "0.0.19-dev.0",
+    "@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",
+    "webfonts-loader": "7.1.0",
+    "webpack-dev-server": "3.11.0"
+  },
+  "dependencies": {
+    "@clickview/styles": "1.0.12-dev.0",
+    "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": [
+      [
+        "@babel/preset-env",
+        {
+          "corejs": 3,
+          "useBuiltIns": "entry"
+        }
+      ]
+    ]
+  }
+}

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/tooling/externals.js

@@ -0,0 +1,56 @@
+const externalModules = {
+    // 'CVEvents':                     /^cvevents$/i,
+
+    /**
+     * Shared Dependencies
+     */
+    // 'FontAwesome':                  [ /^@fortawesome\/fontawesome$/i, /^fontawesome$/i ],
+    // 'ReactBootstrap':               [ /^react-bootstrap$/i, /^reactbootstrap$/i ],
+    // 'SortableHOC':                  [ /^react-sortable-hoc$/i, /^sortablehoc$/i ],
+    // 'ReactTransitionGroup':         [ /^react-transition-group$/i, /^reacttransitiongroup$/i ],
+    // 'ReactIntersectionObserver':    [ /^react-intersection-observer$/i, /^reactintersectionobserver$/i ],
+    // 'Autosuggest':                  [ /^react-autosuggest$/i, /^autosuggest$/i ],
+    // 'Backbone.Validation':          [ /^backbone-validation$/i, /^backbone\.validation$/i ],
+    // 'Bloodhound':                   /^bloodhound$/i,
+
+    /**
+     * Common Dependencies
+     */
+    // 'React':                        /^react$/i,
+    // 'ReactDOM':                     [ /^react-dom$/i, /^ReactDOM$/i ],
+    // '_':                            [ /^underscore$/i, /^_$/i ],
+    // 'Backbone':                     /^backbone$/i,
+    // 'Marionette':                   [ /^backbone\.marionette$/i, /^marionette$/i ],
+    // 'Handlebars':                   /^handlebars$/i,
+    // 'bootstrap':                    /^bootstrap$/i,
+    // 'Backbone.Radio':               /^backbone\.radio$/i,
+    // 'signalR':                      /^signalr$/i,
+    // 'Redux':                        /^redux$/i,
+    // 'ReactRedux':                   [ /^react-redux$/i, /^reactredux$/i ],
+    // 'DOMPurify':                    /^dompurify$/i,
+    // '$':                            [ /^jquery$/i, /^\$/ ],
+    // 'Polyglot':                     [ /^node-polyglot$/i, /^polyglot$/i ],
+    // 'moment':                       /^moment$/i,
+    // 'linkify':                      [ /^linkifyjs$/i, /^linkify$/i ]
+};// 
+
+exports.mapExternalModules = (context, request, callback) => {
+    for (var key in externalModules) {
+        if (!externalModules.hasOwnProperty(key))
+            continue;
+
+        let arr = externalModules[key];
+
+        if (!Array.isArray(arr))
+            arr = [arr];
+
+        for (var i = 0; i < arr.length; i++) {
+            if (arr[i].test(request)) {
+                return callback(null, key);
+
+            }
+        }
+    }
+
+    callback();
+}

package/tooling/font-webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const iconMap = require('../src/font/icon-map');
+
+const assetsRoot = path.resolve(__dirname, '..');
+const srcRoot = path.resolve(assetsRoot, 'src');
+const outputRoot = path.resolve(assetsRoot, 'dist');
+
+module.exports = {
+  entry: path.resolve(srcRoot, 'font/index.js'),
+  mode: process.env.NODE_ENV,
+  output: {
+    filename: 'bundle.js',
+    path: outputRoot
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'font.scss',
+    })
+  ],
+  module: {
+    rules: [{
+      test: /\.font\.js/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: {
+            url: false
+          }
+        },
+        {
+          loader: 'webfonts-loader',
+          options: {
+            embed: true,
+            css: true,
+            scssFile: true,
+            codepoints: iconMap
+          }
+        }
+      ]
+    }]
+  }
+};

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;
+  }
+}

package/typings/utils/imports.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Define our templates as a module so that we can use
+ * import statements just the same as we do for other
+ * ts/js code.
+ */
+declare module '*.scss';
+declare module '*.svg';
+
+declare module "*.json" {
+  export const value: any;
+  export default value;
+}