videogular / videogular2

The HTML5 video player for Angular 2

Videogular for AngularJS (1.x)


Videogular is an HTML5 video player for AngularJS. Videogular is a wrapper over the HTML5 video tag, so you just could add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

You could see a demo here: www.videogular.com

Angular (2+) Support

Videogular2 is under active development and will be available with Angular 2+. Videogular2 will follow the same philosophy and we're open to discuss any possibilities. If you want to contribute you can open a new issue with your suggestions or clone the repository to make pull requests.

You can find a demo here: https://videogular.github.io/videogular2-showroom/#/

And this is the development repository: https://github.com/videogular/videogular2

Why Videogular?

We're developing Videogular focusing on mobile devices and HTML5 video special capabilities. Videogular brings to you these key features:

• Bindable properties: Videogular's directives are bindable, just try the demo and play with bindings.
• Extendable through plugins: Thanks to our API you can develop your own plugins.
• Theme based: Customize it with your own themes and change between them on the fly.
• Native fullscreen support: Enjoy with native fullscreen support for Chrome, Firefox, Safari, iOS and Chrome for Android.
• Mobile support: Videogular can detect mobile devices to show/hide components in case that aren't supported. Also, you could use it in your responsive websites, Videogular will always scale to fit its container.

Documentation and how to install

** Important information:** Bower repositories have been deprecated. Now all modules are available inside the same npm package:

https://www.npmjs.com/package/videogular

Simply run npm install videogular. Then import the desired features from the dist directory.

See the Videogular's website for more info about how to start and installation notes (beware that this is presently out of date). We have also tutorials and examples if you need a guide or code samples.

For more info you can check the full Videogular API documentation.

Running and building

To run the project and create the minified and debug files just run grunt.

This will run the tests and if everything works as expected it would create a build folder on root.

Third-party plugins

If you have developed a Videogular's plugin or theme contact us through this form and we will add you to this list.

• Youtube plugin by NamPNQ
• Quiz plugin by NamPNQ
• Flash fallback plugin by NamPNQ
• Background video plugin by panurge-ws
• Videogular subtitle plugin (for Videogular 0.4.0) by farhan-repo
• Videogular Cuepoints plugin by HarryCutts (not to be confused with the later Cue Points feature)

Migrate to 2.0 from an older version of Videogular

Use of the videogular package on NPM is now the preferred method of distribution. This now includes all of the features that had previously been distributed separately. Simply import the features that you desire into your build.

Migrate to 1.0 from an older version of Videogular

All attributes for the various directives (including plugins) are still being maintained as usual, however, the naming of several have changed significantly to conform to an improved coding style. Here is a semi-exhaustive list:

1. No more <vg-video>. Ditched in favor of <vg-media> that supports audio as well.

2. vg-controls:

   vg-timedisplay -> vg-time-display
   vg-scrubBar -> vg-scrub-bar
   vg-scrubbarcurrenttime -> vg-scrub-bar-current-time
   vg-timedisplay -> vg-time-display
   vg-mutebutton -> vg-mute-button
   vg-volumebar -> vg-volume-bar
   

3. vg-poster-image -> vg-poster

For a complete migration guide we recommend you to check the Migration guide to Videogular 1.0.0.

Supported by

Videogular team would like to thank all of our generous sponsors who support this project:

Credits

Videogular is an open source project maintained by (literally) two fucking developers.

We want to thank all our contributors: Raúl Jiménez, Robert Zhang, Javier Tejero, Marcos González, Rafał Lindemann, Alberto Tafoya, Sergey Okhotnitski, Javier Cejudo, Sam Lau, paxal78, Raymond Klass, Harry Cutts, Chris MacPherson, stefanvonderkrone, Emil Ibatullin, Uzair Sajid, pavelnikolov, Frank3K, EmilioAiolfi, Bernhelm, Morriz, Chris Funk, Johann Beishline, edisonh, Nainterceptor, Max Maes, pire, Davin Kevin, bkuzma, VanVan, Kevin Feinberg, Jonathan Asquier, Centsent, Zane McCaig, Nils Thingvall, Tim Costa, Alex Wilde, jarrodlytle, daviddk , Artem Medvedev , super-ienien , Jared Fox and our bug submitters.

Changelog

Here you can see the complete changelog

videogular2's Issues

Switch to typings

TSD is deprecated, we need to switch to typings.

Refactor cue points

Description

Refactor cue points to stick to the HTML5 standard by using tracks.

With tracks we can send metadata and use the native callbacks cuechange, enter and leave. We need to create new callbacks for update and complete that can be done with some custom directives.

Too many errors when used in Visual Studio project

Description

Package is unusable in a Visual Studio project due to excessive errors.

Expected Behavior

Should atleast be able to build the solution without any issue.

Actual Behavior

Unable to import any of the packages as suggested in the 'Getting started' page. List of errors that were encountered when importing the following components:

import {VgPlayer} from 'videogular2/core';
import {VgControls,
VgPlayPause,
VgScrubBar,
VgScrubBarCurrentTime,
VgScrubBarBufferingTime,
VgMute,
VgFullscreen} from 'videogular2/controls';
import {VgOverlayPlay} from 'videogular2/overlay-play';

Steps to Reproduce

1. Create a Visual Studio angular 2 project.
2. Install videogular2 and try to import the above mentioned components into the module file of the project.

Font not loading because of node_modules map

Description

In Angular-CLI, the fonts are not loaded in the app.
Error:

browser_adapter.ts: 175 GET http://localhost:4200/node_modules/videogular2/fonts/videogular.woff
GET http://localhost:4200/node_modules/videogular2/fonts/videogular.ttf

Expected Behavior

Load and display the fonts.

Actual Behavior

Font's are not loaded in and logs an error.

Steps to Reproduce

1. Scaffold new app with Angular-CLI
2. Include Videogular2
3. Put this line in Angular-cli-build.js in vendorNpmFiles: 'videogular2/*/.+(js|ts|js.map|woff|ttf)'
4. Run the app and check console logs

Attachments

I think it is this code that causes the error (in src/vg-player/vg-player.ts).

@font-face {
            font-family: 'videogular';
            src: url('node_modules/videogular2/fonts/videogular.eot');
            src: url('node_modules/videogular2/fonts/videogular.eot?#iefix') format('embedded-opentype'),
                 url('node_modules/videogular2/fonts/videogular.woff') format('woff'),
                 url('node_modules/videogular2/fonts/videogular.ttf') format('truetype'),
                 url('node_modules/videogular2/fonts/videogular.svg#videogular') format('svg');
            font-weight: normal;
            font-style: normal;
        }

It seems this is an issue because Angular-CLI compiles everything into the dist map and Videogular2 does not take this into consideration.

Add Codecov support

We need to be sure that coverage doesn't drops below 100% so we need to add Codecov support and integrate it with TravisCI.

It would be great to add a badge with the coverage too.

Testing basic example fails

I'm using the basic example of your getstarted documentation but I always get warnings and errors

WARNING in ./src/app/video/video.component.ts
23:16 export 'VgPlayer' was not found in 'videogular2/core'

WARNING in ./src/app/video/video.component.ts
24:16 export 'VgOverlayPlay' was not found in 'videogular2/overlay-play'

WARNING in ./src/app/video/video.component.ts
25:16 export 'VgControls' was not found in 'videogular2/controls'

WARNING in ./src/app/video/video.component.ts
26:16 export 'VgPlayPause' was not found in 'videogular2/controls'

WARNING in ./src/app/video/video.component.ts
27:16 export 'VgScrubBar' was not found in 'videogular2/controls'

WARNING in ./src/app/video/video.component.ts
28:16 export 'VgScrubBarCurrentTime' was not found in 'videogular2/controls'

WARNING in ./src/app/video/video.component.ts
29:16 export 'VgScrubBarBufferingTime' was not found in 'videogular2/controls'

WARNING in ./src/app/video/video.component.ts
30:16 export 'VgMute' was not found in 'videogular2/controls'

WARNING in ./src/app/video/video.component.ts
31:16 export 'VgFullscreen' was not found in 'videogular2/controls'

vg-for doesn't work

Description

I have two different players. I want them to have separate controls, so I'm trying to user vg-for, but it causes an error Error: Template parse errors. This happens when I use vg-for anywhere,

Expected Behavior

vg-for works and binds controls to one player only.

Actual Behavior

vg-for causes Template parse error. Without using it, the controls will effect both videos.

Steps to Reproduce

1. add vg-for to any control

Add cue points feature

We need to add cue points feature as we have in ng1 version.

Cue points in Videogular 1.X work with callbacks as we can see here:

https://github.com/videogular/videogular/blob/master/app/scripts/com/2fdevs/videogular/controllers/vg-controller.js#L229

The ng2 version should work with RxJS.

Error with buffered.end

When metadata is not loaded and onTimeUpdate or onProgress functions are called the buffered.end() method returns an error because buffered.length is 0.

AoT compilation failed

Hi,

I have successfully integrated the library with my angular2 project and its working fine but whenever I try to compile the project using AoT then its showing below error in console.

Unexpected value 'VgCore' imported by the module 'AppModule'

Please suggest me any solution. Help me to out of it.

Thanks,
Anil

Add Autohide

Videogular controls should have an autohide feature.

API proposal is to follow ng1 version:

<vg-controls autohide="true" autohide-time="3.5">

plenty of Duplicate identifier errors due to typings/browser.d.ts reference in vg-player.d.ts

Description

The issue is, I have typings located in my_angular_project/typings/ (including browser.d.ts)

However vg-player.d.ts has on the first line following reference:

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />

and actually keeps its own browser.d.ts in

my_angular_project/node_modules/videogular2/node_modules/angular2/typings/browser.d.ts

I guess this means browser.d.ts is loaded twice during ts->js transpilation, which leads to plenty of errors like:

ERROR in [default] my_angular_project/node_modules/videogular2/node_modules/angular2/typings/browser.d.ts:6:13 
Duplicate identifier 'PromiseConstructor'.

When I remove the first line (reference path) from `vg-player.d.ts, I can get rid of the errors.

I guess this could be somehow fixed by proper configuration of tsconfig.json, but I did not managed to achieve it. Here is my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Add DASH plugin

We need to add Dash support through Dash.js.

Suggested API is similar to ng1 version but we can enable or disable dash with a boolean value over vg-dash attribute. This is useful when people needs to change from a standard source to a dash source.

<video id="dashVideo" autoplay controls [vgDash]="isDash">
    <source src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd">
</video>

Full screen on play

Description

I want the video to be played on full screen once the user clicks play

Expected Behavior

full screen on play

Actual Behavior

play in normal mode

Stuck on buffering...

Description

I have problems when i try to play videos (mp4) from my server side accesible folder, when i hit play it's stuck on loading (example video works fine). Tried also sanitize url using this -> https://angular.io/docs/ts/latest/guide/security.html
Same results
With <video></video> work's fine, but i need videogular2.

Steps to Reproduce

If this is an issue, describe the steps you took to see the issue. If this is a feature, delete this block.

1. change url video for this: http://techslides.com/demos/sample-videos/small.mp4
2. try to play it

Attachments

Try to include screenshots for bugs or design assets for enhancements
| Loading... |

| Example with mp4 source only |

What i'm doing wrong?

Local development workflow is broken

Description

Local development does not work.

Expected Behavior

In example folder, after running npm install, it run into white page of the death.

Actual Behavior

### Steps to Reproduce 1. Latest `master` branch 2. `cd example` 3. `npm install` 4. `npm start`

Add disable native fullscreen

On old Android devices and iOS devices we can't set to fullscreen the videogular element, we only can set the video element to fullscreen.

To allow the user to have custom controls we can emulate fullscreen by setting the videogular element vg-player to fullscreen instead of video element.

In ng1 version this was managed by the public API, maybe this should be moved to fullscreen API.

https://github.com/videogular/videogular/blob/master/app/scripts/com/2fdevs/videogular/controllers/vg-controller.js#L392-L404

Add scrub bar cue points plugin

We need to show cue points to the control bar as we currently do on vg1.

Raise coverage to 100%

We need to test the whole library and get coverage percentage to 100%.

EPEERINVALID after fresh npm install in examples

Switch to Observables

Now we're subscribing to events through addEventListener we need to switch to RxJS Observables to allow external subscriptions for third-party libraries and app development.

Subscriptions will be stored inside a property in each media file.

media.subscriptions.canPlaySource = Observable.fromEvent(media, VgEvents.VG_CAN_PLAY);
media.subscriptions.canPlaySource.subscribe(this.onCanPlayRx);

Cant change Volume if Parent div has offsetLeft

Versions

Bug: 1.1.1 (FF, Chr, IE, Edge, Saf, Saf Mob, Chr Mob)
Bug: 1.2.0 (FF, Chr, IE, Edge, Saf, Saf Mob, Chr Mob)

Fix: (FF, Chr, IE, Edge, Saf)

Description

Cannot change Volume when videogularcomponent is nested inside an component with own offsetLeft.

Bug 1: event.x is an experimental feature of some browsers. Instead use clientX
Bug 2: offsetLeft is the Value to the next parent which is not static. (recursive calculation of the offset is a better way)

Expected Behavior

Can change the Volume.

Actual Behavior

--- see description

Steps to Reproduce

content is

<content class="display-flex flex-row justify-content-center">
        <div class="wrapper no-padding">
            <div class="large-box">
                <h4>Anleitungsvideo</h4>
                <vg-player>
                    <vg-overlay-play></vg-overlay-play>
                    <vg-buffering></vg-buffering>

                    <vg-scrub-bar>
                        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
                    </vg-scrub-bar>

                    <vg-controls>
                        <vg-play-pause></vg-play-pause>
                        <vg-playback-button></vg-playback-button>

                        <vg-time-display *responsive="{browser: ['chrome','firefox']}" property="current" format="mm:ss"></vg-time-display>

                        <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>

                        <vg-time-display *responsive="{browser: ['chrome','firefox']}" property="left" format="mm:ss"></vg-time-display>
                        <vg-time-display *responsive="{browser: ['chrome','firefox']}" property="total" format="mm:ss"></vg-time-display>

                        <vg-track-selector></vg-track-selector>
                        <vg-mute></vg-mute>
                        <vg-volume-override></vg-volume-override>

                        <vg-fullscreen></vg-fullscreen>
                    </vg-controls>
                    <video vg-media #media id="singleVideo" preload="auto" crossorigin>
                        <source *ngFor="let video of videoSources" [src]="video.src" [type]="video.type">
                        <track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt" srclang="en" default>
                        <track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt" srclang="es">
                    </video>
                </vg-player>
            </div>
...

.wrapper {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 1024px;
    -moz-box-flex: 0;
    -moz-flex: 0 1 1024px;
    -ms-flex: 0 1 1024px;
    flex: 0 1 1024px;
    max-width: 1024px;
    width: 0;
    padding: 0 5px;
}
.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}
.flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.display-flex {
    display: flex !important;
}

Solution

vg-volume.ts

    offsetleft:number;
    onMouseDown(event:{clientX:number}) {
        this.mouseDownPosX = event.clientX;
        this.isDragging = true;
    }

    onDrag(event:{clientX:number}) {
        if(this.isDragging) {
            this.setVolume(this.calculateVolume(event.clientX));
        }
    }

    onStopDrag(event:{clientX:number}) {
        if(this.isDragging) {
            this.isDragging = false;
            if(this.mouseDownPosX === event.clientX) {
                this.setVolume(this.calculateVolume(event.clientX));
            }
        }
    }

    calculateVolume(mousePosX:number) {
        let volumeBar:HTMLElement = <HTMLElement>document.querySelector('.volumeBar');

        this.offsetleft = 0;

        this.getOffsetLeft(volumeBar);

        return mousePosX - this.offsetleft;
    }

    getOffsetLeft(el:HTMLElement) {
        this.offsetleft += el.offsetLeft;

        if (el.offsetParent) {
            this.getOffsetLeft(<HTMLElement>el.offsetParent);
        }
    }

Add buffer to API

We need to add buffer property to the API.

Controls loaded but nothing else (no events triggered)

Description

I'm a beginner with typescript, I gradually discovered its specificities. The problem encountered is that the controls are loaded (correctly?) and displayed but not clickable.

Expected Behavior

Controls clickable and music played.

Actual Behavior

Controls are not clickable.

Steps to Reproduce

1. Start a new app with Angular-CLI
2. Include Videogular2
3. Fill angular-cli-config.js, src/system-config.ts
4. Add a component (.ts, .html), import videogular2
5. Run the app and test the player

Attachments

angular-cli-bluid.js

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'videogular2/dist/**/*',
      'videogular2/fonts/**/*',
      'videogular2/core.+(ts|js)',
      'videogular2/controls.+(ts|js)',
      'videogular2/overlay-play.+(ts|js)'
    ]
  });
};

src/system-config.ts

const map:any = {
    ...
    'videogular2': 'vendor/videogular2'
};

const packages:any = {
    'videogular2': {
        main: 'core.js',
        defaultExtension: 'js'
    }
};

src/app/app.component.ts

import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {VgPlayer, VgAPI} from 'videogular2/core';
import {
    VgControls,
    VgPlayPause,
    VgPlaybackButton,
    VgScrubBar,
    VgScrubBarCurrentTime,
    VgScrubBarBufferingTime,
    VgMute,
    VgFullscreen
} from 'videogular2/controls';

@Component({
    moduleId: module.id,
    selector: 'app-root',
    templateUrl: 'app.component.html',
    directives: [
        ROUTER_DIRECTIVES,
        VgPlayer,
        VgControls,
        VgPlayPause,
        VgPlaybackButton,
        VgScrubBar,
        VgScrubBarCurrentTime,
        VgScrubBarBufferingTime,
        VgMute,
        VgFullscreen,],
    providers: [ROUTER_PROVIDERS, VgAPI]
})

@RouteConfig([
    ...
])

export class AppComponent {
}

src/app/app.component.html

...
<vg-player style="height: 50px;">
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>

        <vg-time-display>{{ media?.time?.current | date:'mm:ss' }}</vg-time-display>

        <vg-scrub-bar>
            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>

        <vg-time-display>{{ media?.time?.left | date:'mm:ss' }}</vg-time-display>
        <vg-time-display>{{ media?.time?.total | date:'mm:ss' }}</vg-time-display>
        <vg-mute></vg-mute>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <audio #media id="myAudio" preload="auto">
        <source src="http://static.videogular.com/assets/audios/videogular.mp3" type="audio/mp3">
    </audio>
</vg-player>
...

Does it works? the demo link is failing

The demo link is failing, can I use videogular2 ?

Videogular2 not working with Ionic 2

Description

Videogular2 is not working with Ionic 2.

Expected Behavior

The video should run fine.

Actual Behavior

Error: Unexpected value 'VgCore' imported by the module 'AppModule'

Steps to Reproduce

1. Start any ionic project
2. Install videogular2: sudo npm install -g videogular2 --save
3. In app.module.ts:
   Headers:

import { VgCore } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';

Then:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    VgCore,
    VgControlsModule,
    VgOverlayPlayModule
  ],
...
});

Then run the app.

Update to angular2 rc1

Description

With rc1 angular was split into multiple packages starting with "@angular". Due to this change, videogular is incompatible with projects built agains angular2 rc1.

How to include Videogular2 in system-config.ts

Hi,

I have installed Videogular2 and included it in the system-config.ts like this:

System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js',
    'videogular2': './node_modules/videogular2'
  },
  packages: cliSystemConfigPackages
});

However I get this error when I try to load my app:

zone.js:101 GET http://localhost:4200/node_modules/videogular2/core 404 (Not Found)

What is the solution for this?

Add Google IMA plugin

We need to add Google IMA plugin.

Suggested API is to follow ng1 version.

<vg-ima-ads 
        network="6062" 
        unit-path="iab_vast_samples" 
        companion="companionAd" 
        companion-size="[728, 90]" 
        ad-tag-url="http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" 
        skip-button="<div class='skipButton'>skip ad</div>">

https://github.com/videogular/videogular/blob/master/app/scripts/com/2fdevs/videogular/plugins/vg-ima-ads/vg-ima-ads.js

We need docs

Issue Type

Documentation

Description

We need docs. It could be cool to use couscous.

Fonts on NPM

Fonts are not published on NPM and they should be.

Can't build the project

Hi,

I'm trying to get a proper build to include in my own project.

When I try to build the Videogular2 project I get the following output:

npm run build

[email protected] prebuild /Users/stijnaerts/Downloads/videogular2-master
npm run clean && mkdir dist

[email protected] clean /Users/stijnaerts/Downloads/videogular2-master
rm -rf dist

[email protected] build /Users/stijnaerts/Downloads/videogular2-master
tsc -p src

node_modules/@angular/compiler/src/directive_normalizer.d.ts(12,62): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/directive_normalizer.d.ts(13,95): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/facade/lang.d.ts(4,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/facade/lang.d.ts(5,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/facade/lang.d.ts(71,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/offline_compiler.d.ts(32,70): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/offline_compiler.d.ts(34,85): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/output/output_ast.d.ts(417,63): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/runtime_compiler.d.ts(28,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/src/template_parser.d.ts(37,12): error TS2304: Cannot find name 'Set'.
node_modules/@angular/compiler/src/view_compiler/compile_view.d.ts(43,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/view_compiler/compile_view.d.ts(45,13): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/view_compiler/compile_view.d.ts(52,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/compiler/src/xhr.d.ts(6,23): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/testing/test_component_builder.d.ts(77,19): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/testing/test_component_builder.d.ts(137,43): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/compiler/testing/xhr_mock.d.ts(10,23): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(45,88): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(101,42): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(160,33): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(26,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(106,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(106,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/async.d.ts(27,33): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/async.d.ts(28,45): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
node_modules/@angular/core/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'SetConstructor'.
node_modules/@angular/core/src/facade/collection.d.ts(4,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(4,39): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(7,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(8,30): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(11,43): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(12,27): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(14,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(15,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(100,41): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/collection.d.ts(101,22): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/collection.d.ts(102,25): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/lang.d.ts(4,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(5,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/facade/lang.d.ts(71,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/promise.d.ts(2,14): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(8,32): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(9,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(10,35): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(10,93): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(11,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(11,50): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(12,32): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(12,149): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/facade/promise.d.ts(13,43): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/component_resolver.d.ts(9,58): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/component_resolver.d.ts(13,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(61,148): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(102,144): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(107,139): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/dynamic_component_loader.d.ts(108,135): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/systemjs_component_resolver.d.ts(11,53): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/systemjs_component_resolver.d.ts(19,53): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/testing/mock_application_ref.d.ts(12,33): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(22,31): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/observable/PromiseObservable.d.ts(23,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(7,59): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(7,69): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(9,9): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,26): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/operator/toPromise.d.ts(10,36): error TS2304: Cannot find name 'Promise'.
src/vg-player/vg-player.ts(1,1): error TS6053: File '/Users/stijnaerts/Downloads/videogular2-master/typings/browser.d.ts' not found.
src/services/vg-api.spec.ts(5,1): error TS2304: Cannot find name 'describe'.
src/services/vg-api.spec.ts(54,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(55,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(69,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(70,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(79,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(87,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(95,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(103,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(111,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(119,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(127,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(135,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(143,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(151,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(159,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(167,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(175,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(183,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(191,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(199,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(207,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(215,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(228,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(242,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(11,5): error TS2304: Cannot find name 'beforeEach'.
src/services/vg-fullscreen-api.spec.ts(32,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(41,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(42,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(52,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(53,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(63,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(72,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(84,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(97,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(109,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(121,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(131,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-utils.spec.ts(6,9): error TS2304: Cannot find name 'spyOn'.
src/vg-360/three.addons.d.ts(3,31): error TS2304: Cannot find name 'WebGLRenderer'.
src/vg-360/three.addons.d.ts(7,29): error TS2304: Cannot find name 'PerspectiveCamera'.
src/vg-360/three.addons.d.ts(11,29): error TS2304: Cannot find name 'PerspectiveCamera'.
src/vg-360/three.addons.d.ts(27,28): error TS2305: Module 'THREE' has no exported member 'Scene'.
src/vg-360/three.addons.d.ts(27,48): error TS2305: Module 'THREE' has no exported member 'PerspectiveCamera'.
src/vg-360/vg-360.ts(7,25): error TS2305: Module 'THREE' has no exported member 'Object3D'.
src/vg-360/vg-360.ts(75,21): error TS2305: Module 'THREE' has no exported member 'Raycaster'.
src/vg-360/vg-360.ts(76,18): error TS2305: Module 'THREE' has no exported member 'PerspectiveCamera'.
src/vg-360/vg-360.ts(77,17): error TS2305: Module 'THREE' has no exported member 'Scene'.
src/vg-360/vg-360.ts(78,21): error TS2305: Module 'THREE' has no exported member 'Scene'.
src/vg-360/vg-360.ts(79,22): error TS2305: Module 'THREE' has no exported member 'Scene'.
src/vg-360/vg-360.ts(80,20): error TS2305: Module 'THREE' has no exported member 'WebGLRenderer'.
src/vg-360/vg-360.ts(138,27): error TS2305: Module 'THREE' has no exported member 'VideoTexture'.
src/vg-360/vg-360.ts(138,52): error TS2339: Property 'VideoTexture' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(139,35): error TS2339: Property 'LinearFilter' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(140,32): error TS2339: Property 'RGBFormat' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(142,34): error TS2339: Property 'SphereBufferGeometry' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(145,28): error TS2305: Module 'THREE' has no exported member 'MeshBasicMaterial'.
src/vg-360/vg-360.ts(145,58): error TS2339: Property 'MeshBasicMaterial' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(147,33): error TS2339: Property 'PerspectiveCamera' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(149,32): error TS2339: Property 'Scene' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(151,24): error TS2305: Module 'THREE' has no exported member 'Mesh'.
src/vg-360/vg-360.ts(151,41): error TS2339: Property 'Mesh' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(155,35): error TS2339: Property 'WebGLRenderer' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(164,35): error TS2305: Module 'THREE' has no exported member 'MeshBasicMaterial'.
src/vg-360/vg-360.ts(164,65): error TS2339: Property 'MeshBasicMaterial' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(166,40): error TS2339: Property 'Raycaster' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(168,40): error TS2339: Property 'Scene' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(169,41): error TS2339: Property 'Scene' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(180,40): error TS2339: Property 'PlaneGeometry' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(181,35): error TS2305: Module 'THREE' has no exported member 'Mesh'.
src/vg-360/vg-360.ts(181,52): error TS2339: Property 'Mesh' does not exist on type 'typeof THREE'.
src/vg-360/vg-360.ts(252,42): error TS2339: Property 'Vector3' does not exist on type 'typeof THREE'.
src/vg-controls/vg-controls.spec.ts(14,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(15,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(35,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(43,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(56,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(66,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(76,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(77,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(86,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(92,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(97,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(103,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(26,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(27,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(37,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-mute/vg-mute.spec.ts(35,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-mute/vg-mute.spec.ts(36,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(35,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(36,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(91,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(107,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(39,9): error TS2304: Cannot find name 'spyOn'.

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.2.0
npm ERR! npm v3.8.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: tsc -p src
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'tsc -p src'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the videogular2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs videogular2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls videogular2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/stijnaerts/Downloads/videogular2-master/npm-debug.log

Unable to use videogular2 in angular2-meteor project

Description

I'm unable to use videogular/videogular2 in a recent angular2-meteor project. (This was working in earlier versions of angular2/angular2-meteor/meteor). I suspect there is a packaging issue with videogular2 which makes it incompatible with angular2-meteor but despite my attempts to debug this I cannot figure it out. I'm offering a $100 bounty to anyone who can help me solve this.

Expected Behavior

The expected behavior is that I am able to import the library without error.

Actual Behavior

Uncaught Error: Unexpected value 'VgCore' imported by the module 'AppModule'
    at http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:36037:37
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:36022:46)
    at RuntimeCompiler._compileComponents (http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:38708:49)
    at RuntimeCompiler._compileModuleAndComponents (http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:38646:39)
    at RuntimeCompiler.compileModuleAsync (http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:38637:23)
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:7609:29)
    at PlatformRef_.bootstrapModule (http://localhost:3000/packages/modules.js?hash=70a5bbd29463483b28fefc2c23228614551364c5:7591:25)
    at meteorInstall.client.app.module.js (http://localhost:3000/app/app.js?hash=8836d91374883d28f4dc1dc589a8a3b4e54f89a3:194:53)
    at fileEvaluate (http://localhost:3000/packages/modules-runtime.js?hash=b7370236eeaf57e8f4ac703424bc831028392451:180:9)

Steps to Reproduce

I have a minimal reproduction of the issue here in this repository:

https://github.com/slapfive/todos-meteor-1.3

1. Check out the project
2. install meteor
3. npm install
4. run the following command:

meteor run

1. Then visit localhost:3000 in a browser.

Attachments

I am including a $100 bounty for anyone who can solve this:

https://www.bountysource.com/issues/38027022-unable-to-use-videogular2-in-angular2-meteor-project

Thanks in advance!

Image Title
(https://media.giphy.com/media/143vPc6b08locw/giphy.gif)
Image description

How To Use Videogular2 in angular-cli@webpack ?

I am new to angular2 and am working on a project:

I previously added videogular2 successfully in angular-cli with SystemJS Configuration.

But Now I have upgraded my angular2 app to angular-cli@webpack.

But Now i am not able t make it work.

I am getting below error:

ERROR in [default] D:\work\rapid-v2\rapid-v2\node_modules\videogular2\dist\vg-360\vg-360.d.ts:1:0
File 'D:/work/rapid-v2/rapid-v2/node_modules/videogular2/src/vg-360/three.addons.d.ts' not found.

I am not able to figure out the issue.

any inputs?

Improve example

Improve example with a menu to navigate between different examples.

npm installation fails with Cannot find namespace 'jasmine' and plenty of other errors.

Description

When i try npm install videogular2 --save

the outcome is:

node_modules/angular2/src/testing/matchers.d.ts(4,37): error TS2503: Cannot find namespace 'jasmine'.
node_modules/angular2/src/testing/testing_internal.d.ts(39,47): error TS2503: Cannot find namespace 'jasmine'.
src/services/vg-api.spec.ts(20,39): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(29,36): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(38,39): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(47,42): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(56,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(57,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(61,45): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(62,50): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(71,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(72,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(76,46): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(77,51): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(81,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(85,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(89,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(93,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(97,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(101,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(105,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(109,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(113,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(117,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(121,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(125,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(129,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(133,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(137,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(141,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(145,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(149,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(153,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(157,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(161,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(165,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(169,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(173,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(177,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(181,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(185,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(189,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(193,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(197,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(201,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(205,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(209,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(213,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(217,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(221,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(230,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(234,28): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(235,28): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(244,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(248,28): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(249,28): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(259,35): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(271,35): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(282,24): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(295,24): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(306,46): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(307,51): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(313,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(317,43): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(318,41): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(319,40): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(320,41): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(321,38): error TS2339: Property 'toBeFalsy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(322,45): error TS2339: Property 'toBeFalsy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(323,47): error TS2339: Property 'toBeFalsy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(324,40): error TS2339: Property 'toBeFalsy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(325,42): error TS2339: Property 'toBeFalsy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(326,36): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(328,40): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(330,29): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(332,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(337,28): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(338,28): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(349,52): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(350,59): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(351,59): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(352,52): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(353,53): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(354,50): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(355,52): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(356,49): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(357,50): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(358,55): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(359,57): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(360,50): error TS2339: Property 'toBeDefined' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(377,48): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(394,55): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(411,57): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(412,51): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(429,50): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(446,52): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(447,46): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(464,46): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(481,46): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(498,46): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(529,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(533,53): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(534,53): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(535,50): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(536,51): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(567,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(571,57): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(596,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(600,53): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(601,51): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-api.spec.ts(626,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-api.spec.ts(630,57): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(11,50): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(12,50): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(13,50): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(14,47): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(15,51): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(16,50): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(24,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(29,46): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(30,70): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(38,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(42,46): error TS2339: Property 'toBeFalsy' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(43,52): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(49,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(53,41): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(61,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(65,41): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/services/vg-fullscreen-api.spec.ts(71,9): error TS2304: Cannot find name 'spyOn'.
src/services/vg-fullscreen-api.spec.ts(75,38): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(15,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(16,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(36,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(40,26): error TS2339: Property 'toBeTruthy' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(44,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(52,38): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(53,38): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(57,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(63,31): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(67,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(73,31): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(77,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(78,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(82,37): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(83,42): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(87,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(93,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(94,42): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-controls.spec.ts(98,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-controls.spec.ts(104,9): error TS2304: Cannot find name 'jasmine'.
src/vg-controls/vg-controls.spec.ts(105,46): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(26,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(27,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(31,46): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(32,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(37,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(45,54): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-fullscreen/vg-fullscreen.spec.ts(53,54): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(35,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-mute/vg-mute.spec.ts(36,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-mute/vg-mute.spec.ts(44,40): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(45,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(46,36): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(54,24): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(68,24): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(83,40): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(84,32): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(100,32): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(110,40): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(111,32): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-mute/vg-mute.spec.ts(130,32): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(35,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(36,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(44,45): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(45,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(54,23): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(72,23): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(86,24): error TS2339: Property 'toBe' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(91,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(103,31): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(107,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-play-pause/vg-play-pause.spec.ts(119,30): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(35,46): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(39,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(40,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(44,50): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(45,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(60,50): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(74,56): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-playback-button/vg-playback-button.spec.ts(89,61): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(26,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(27,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(31,57): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(32,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(49,29): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(65,29): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-buffering-time/vg-scrub-bar-buffering-time.spec.ts(75,29): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.spec.ts(45,63): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.spec.ts(46,63): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.spec.ts(47,63): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.spec.ts(70,63): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.spec.ts(71,63): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-cue-points/vg-scrub-bar-cue-points.spec.ts(72,63): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.spec.ts(26,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.spec.ts(27,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.spec.ts(31,55): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.spec.ts(32,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.spec.ts(46,29): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar-current-time/vg-scrub-bar-current-time.spec.ts(59,29): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(27,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(28,9): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(32,44): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(33,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(38,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(44,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(48,13): error TS2304: Cannot find name 'spyOn'.
src/vg-controls/vg-scrub-bar/vg-scrub-bar.spec.ts(55,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(25,9): error TS2304: Cannot find name 'spyOn'.
src/vg-overlay-play/vg-overlay-play.spec.ts(26,9): error TS2304: Cannot find name 'spyOn'.
src/vg-overlay-play/vg-overlay-play.spec.ts(30,47): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(31,34): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(43,13): error TS2304: Cannot find name 'spyOn'.
src/vg-overlay-play/vg-overlay-play.spec.ts(44,13): error TS2304: Cannot find name 'spyOn'.
src/vg-overlay-play/vg-overlay-play.spec.ts(48,42): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(49,46): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(53,13): error TS2304: Cannot find name 'spyOn'.
src/vg-overlay-play/vg-overlay-play.spec.ts(54,13): error TS2304: Cannot find name 'spyOn'.
src/vg-overlay-play/vg-overlay-play.spec.ts(58,42): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(59,45): error TS2339: Property 'toHaveBeenCalled' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(73,44): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(79,44): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-overlay-play/vg-overlay-play.spec.ts(85,44): error TS2339: Property 'toEqual' does not exist on type 'NgMatchers'.
src/vg-player/vg-player.spec.ts(1,1): error TS6053: File 'typings/main/ambient/jasmine/jasmine.d.ts' not found.
src/vg-player/vg-player.spec.ts(27,9): error TS2304: Cannot find name 'spyOn'.
src/vg-player/vg-player.spec.ts(28,9): error TS2304: Cannot find name 'spyOn'.
src/vg-player/vg-player.spec.ts(29,9): error TS2304: Cannot find name 'spyOn'.
src/vg-player/vg-player.spec.ts(33,46): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-player/vg-player.spec.ts(34,35): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.
src/vg-player/vg-player.spec.ts(35,43): error TS2339: Property 'toHaveBeenCalledWith' does not exist on type 'NgMatchers'.

npm ERR! Linux 3.19.0-28-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v5.8.0
npm ERR! npm  v3.7.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `tsc -p src`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] build script 'tsc -p src'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the videogular2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc -p src
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs videogular2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls videogular2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/peter/repos/upwork/videogular2/npm-debug.log
peter@ubuntu:~/repos/upwork/videogular2$ 
peter@ubuntu:~/repos/upwork/videogular2$ npm install videogular2 --save
npm ERR! Linux 3.19.0-28-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "videogular2" "--save"
npm ERR! node v5.8.0
npm ERR! npm  v3.7.3
npm ERR! code ENOSELF

npm ERR! Refusing to install videogular2 as a dependency of itself

My OS: ubuntu 14.04 32bit, node v5.8.0, npm 3.7.3.

this is my webpack.config.js:

var path = require('path');


module.exports = {
  entry: [
    path.normalize('es6-shim/es6-shim.min'),
    'reflect-metadata',
    path.normalize('zone.js/dist/zone-microtask'),
    path.resolve('app/app')
  ],
  output: {
    path: path.resolve('www/build/js'),
    filename: 'app.bundle.js',
    pathinfo: false // show module paths in the bundle, handy for debugging
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript', // ts-loader
        query: {
          doTypeCheck: true,
          resolveGlobs: false,
          externals: ['typings/browser.d.ts']
        },
        include: path.resolve('app'),
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/angular2'),
        loader: 'strip-sourcemap'
      }
    ],
    noParse: [
      /es6-shim/,
      /reflect-metadata/,
      /zone\.js(\/|\\)dist(\/|\\)zone-microtask/
    ]
  },
  resolve: {
    root: ['app'],
    alias: {
      'angular2': path.resolve('node_modules/angular2')
    },
    extensions: ["", ".js", ".ts"]
  }
};

my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

I can actually use videogular2 in angular2 project simply by including the source ts files, e.g.:

import {VgPlayer} from 'videogular2/vg-player/vg-player';
import {VgControls} from 'videogular2/vg-controls/vg-controls';
import {VgPlayPause} from 'videogular2/vg-controls/vg-play-pause/vg-play-pause';

but I would rather include the proper build.

Update to Angular2.beta-6

We need to update to latest Angular2 beta version.

BoundPlayer overlay-play issue (ng 2.0.0 & angular cli)

Description

'vg-overlay-play' is not a known element error

Steps to Reproduce

setup new angular cli project
removed the tildes in package.json to use ng 2.0.0
reinstalled nodemodules
setup boundplayer as in example files

got error: zone.js:355 Unhandled Promise rejection: Template parse errors:
'vg-overlay-play' is not a known element: ...

disabled
boundplayer without overlay works

thks in advance

Dist/Min version

Description

So currently I am adding entire videogular2 directory to my package.

Expected Behavior

I want the content of the dist directory have min version.

Actual Behavior

Currently I am trying to point systemjs.config.js to 'videogular2/dist' but then I am getting:
(SystemJS) Unexpected value 'undefined' imported by the module 'AudioModule'

Fullscreen on Safari Mobile not working.

Description

Fullscreen on Safari Mobile not working.

Expected Behavior

Fullscreen :-)

Actual Behavior

Button changing icon but video stays minified. No furter bugs video plays normaly

Steps to Reproduce

open videogular demo on iPad

onPlayerReady is not fired

Description

I try to dynamically change audio track src from angular 2 controller. I started with the basic audio player example and I guess I have to somehow access VgAPI from my angular 2 controller to change audio track dynamically (maybe I am completely wrong, I only guess that in videogular v1 $API was used for such purpose).

I can see that vgPlayer exports onPlayerReady(VgAPI) method and based on this acticle I thought that when player is initialized, the callback is fired and I obtain VgAPI - but it is not happening. My code:

import {VgPlayer, VgAPI} from 'videogular2/core';
import {VgControls, VgPlayPause, VgPlaybackButton, VgScrubBar, VgScrubBarCurrentTime, VgScrubBarBufferingTime, VgMute, VgFullscreen} from 'videogular2/controls';

@Page({ 
    templateUrl: 'build/views/play/play.html',
    directives: [
        VgPlayer,
        VgControls,
        VgPlayPause,
        VgPlaybackButton,
        VgScrubBar,
        VgScrubBarCurrentTime,
        VgScrubBarBufferingTime
    ]
})
export class Play {
    playlist:Array<Object>;

    constructor(private db:DB) {
        this.playlist = [
            {
                    src: "http://static.videogular.com/assets/audios/videogular.mp3",
                    type: "audio/mp3"
            }
        ];
    }

  onPlayerReady(vgapi:VgAPI){
    console.log('this is never called ')
  }
}

The vg-player component itself is loaded properly in browser and I can hear the default audio track.

Any help is appreciated.

Best practice regarding updating video sources

Description

I'm struggling with implementing a feature that updates sources for Videogular 2. The basic user flow is as follows;

• User uploads a video to the application's backend.
• Backend does a scale down operation on the video file
• Backend returns a response to the client containing a link to the newly rendered static file
• Client updates the Videogular element with this new source.

I've tried a few possible approaches to this problem and read trough the documentation for videogular 2, as well as the documentation and examples for the Angular 1.x implementation, to no avail.

Actual Behavior

Currently I simply update the [src] binding on the <source/>-element contained within <video vg-media/>. This throws no errors, but the play() function seems to hang. A consecutive pause() throws the following exception:

Uncaught (in promise) DOMException: Theplay() request was interrupted by a call to pause().

This is my HTML:

<video vg-media id="singleVideo" preload="auto" [controls]="controls">
    <source [src]="video.src" [type]="video.type">
</video>

Edit:
When I log this.medias in the API's play() function it returns the following object:

Object
singleVideo:VgMedia
_vgMaster:false
buffer:Object
buffered:(...)
canPlay:false
canPlayThrough:false
currentTime:(...)
duration:(...)
elem:video#singleVideo
id:(...)
isCompleted:false
isMaster:(...)
isMetadataLoaded:false
isWaiting:true
playbackRate:(...)
state:"playing"
subscriptions:Object
time:Object

Both the canPlay and canPlayThrough properties are set to false. When I load my page with a static source link pointing to the same file it plays correctly. Should I reload the videogular component in some way?

Updating video.src in [src]="video.src" triggers the onChanges() function but does not provide a playable video element (see behaviour described above). Do I need to utilise the master-media functionality in order to dynamically update the video sources? I've noticed there's the registerMedia() function in the API, should I use this to register new sources ?

Could you briefly explain the best practices regarding what I'm attempting to achieve?

Thank you!

Undefined Interface TextTrackCueList

Description

Cannot find TextTrackCueList declaration

Expected Behavior

TextTrackCueList should be defined

Actual Behavior

TextTrackCueList nor defined

Error in Safari OSX

I'm using videoangular2 and it's all correct in Chrome and Firefox but in Safari I get this error:

EXCEPTION: Error in ./VgTimeDisplay class VgTimeDisplay - inline template:1:14 caused by: Can't find variable: Intl

ViewWrappedError _nativeError: Error: Error in ./VgTimeDisplay class VgTimeDisplay - inline template:1:14 caused by: Can't find variable: Intl column: 38 line: 4115 message: "Error in ./VgTimeDisplay class VgTimeDisplay - inline template:1:14 caused by: Can't find variable: Intl" sourceURL: "http://xxxxxx.com/main.bundle.js" stack: "BaseError@http:/xxxxxx.com main.bundle.js:4115:38↵WrappedError@http://xxxxxx.com/main.bundle.js:4144:2…"

Prototipo de Error

context: DebugContext _nodeIndex: 2 _tplCol: 14 _tplRow: 1 _view: DebugAppView {clazz: function, componentType: RenderComponentType, type: 1, viewUtils: ViewUtils, parentInjector: ElementInjector, …}

Prototipo de DebugContext

originalError: ReferenceError: Can't find variable: Intl column: 20 line: 34713 message: "Can't find variable: Intl" sourceURL: "http://xxxxxx.com/main.bundle.js" stack: "intlDateFormat@http://xxxxxx.com/main.bundle.js:34713:20↵http:/xxxxxx.com main.bundle.js:34744:5…"

Prototipo de ReferenceError

Prototipo de ViewWrappedError

constructor: function(originalError, context)

What's this? How can I solve this problem?

Thank you

Unable to use videogular2 with angular 2.0.2

Description

I can use videogular2 with angular 2.0.0, but once I update angular to 2.0.2. It gave me this error that "Unexpected value 'VgCore' imported by the module 'MainModule'".

Expected Behavior

VgCore successfully imported into the MainModule

Actual Behavior

VgCore can't be imported

Steps to Reproduce

1. Create a simple angular2 webpack starter project which bootstraps MainModule with only a main component.
2. npm install videoangular and import it into MainModule

Attachments

Thanks in advance!!!

Not able to compile the project as given in the README.md

Description

I tried the 'npm start' command from the directory of master.

Expected Behavior

Should compile and give output that the project is compiled successfully.

Actual Behavior

Got the errors as follows:
E:\videogular2-master>npm start

[email protected] start E:\videogular2-master
parallelshell 'npm run watch:ts' 'npm run start:coverage-server'

'parallelshell' is not recognized as an internal or external command,
operable program or batch file.

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Users\PreciseT9\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: parallelshell 'npm run watch:ts' 'npm run start:coverage-server'
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'parallelshell 'npm run watch:ts' 'npm run start:coverage-server''.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the videogular2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! parallelshell 'npm run watch:ts' 'npm run start:coverage-server'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs videogular2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls videogular2
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR! E:\videogular2-master\npm-debug.log

Steps to Reproduce

Type 'npm start' in the root directory in command prompt

EDIT: I installed the package into Visual Studio and tried to create a basic HTML page with a single video, only to find out that there are too many errors in the package itself. I think this is not a release candidate.

Redirect to component when video finishes

Hi!

have videogular2 any way to control the end of the video automatically? I supose something similar like "onComplete" in your first version for AngularJS

Thanks

How to add function next, pre a playlist mp3

Dear support,

I'm doing function play a playlist.

I want add function button next pre.

Please help em,
Thanks

Getting Started Doc moved to the README.md

First, great module and documentation!

I think it would be more intuitive for first time users to see a "getting started" section when they land on the this repo.

Thoughts?

Publish current version on npm

Please publish the current version on npm for compatability with angular rc1+.