Merge pull request #519 from videogular/docs/ima-ads

docs(docs): Add docs for videogular/ima-ads module

docs/modules/ima-ads/README.md

@@ -0,0 +1,27 @@
+## videogular2/ima-ads
+
+Module to display VAST compatible advertisement with [Google IMA library](https://developers.google.com/interactive-media-ads/docs/sdks/html5/).
+
+To use this module you need to add this script to your `head` tag on the `index.html`:
+
+```html
+<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+```
+
+Import definition:
+
+```typescript
+...
+import { VgImaAdsModule } from 'videogular2/ima-ads';
+
+@NgModule({
+    ...
+    imports: [
+        ...
+        VgImaAdsModule
+    ],
+    ...
+})
+export class AppModule {
+}
+```

docs/modules/ima-ads/vg-ima-ads/README.md

@@ -0,0 +1,40 @@
+# VgImaAds @Component
+
+Component to display videos and banners with the [Google IMA HTML5 SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/).
+
+## Inputs
+
+| Input | Description |
+|--- |--- |
+| vgFor | Target media `id` property to play/pause the specified media. This parameter is optional and only necessary if you have more than one media registered into `VgAPI`. |
+| vgAdTagUrl | Required. String to the advertisement tag url. |
+| vgCompanion | Optional. String with the `id` of a container to display the companion ad. If you want to read more about it, please look [official docs](https://developers.google.com/interactive-media-ads/docs/sdks/html5/companions-gpt). |
+| vgCompanionSize | Optional. Array of numbers with sizes of the companion ad. Format: `[width, height]`. |
+| vgNetwork | Optional. String with the network id provided by [Google Publisher Tag](https://developers.google.com/doubleclick-gpt/). |
+| vgUnitPath | Optional. String with the unit path id provided by [Google Publisher Tag](https://developers.google.com/doubleclick-gpt/). |
+| vgSkipButton | Optional. String with a query selector to display a custom skip button. You must set the element with `position` style to `absolute` and `z-index` at least `1`. |
+
+## HTML Definition
+
+```html
+<vg-player id="demo-player">
+    <vg-ima-ads
+        [vgCompanion]="'companion-ad'"
+        [vgCompanionSize]="[728, 90]"
+        [vgNetwork]="'6062'"
+        [vgUnitPath]="'iab_vast_samples'"
+        [vgAdTagUrl]="'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator='"
+        [vgSkipButton]="'.skip-button'">
+    </vg-ima-ads>
+
+    <video #myMedia
+           [vgMedia]="myMedia"
+           id="my-video"
+           src="http://static.videogular.com/assets/videos/videogular.mp4"
+           type="video/mp4">
+    </video>
+</vg-player>
+<div class='skip-button'>custom skip ad button</div>
+<div id="companion-ad"></div>
+
+```

src/core/vg-media/vg-media.ts

@@ -210,6 +210,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
         for (let i=0, l=mutations.length; i<l; i++) {
             let mut: MutationRecord = mutations[i];
 
+            // TODO: Add control only for childLists of type `source`
             if ((mut.type === 'attributes' && mut.attributeName === 'src') || mut.type === 'childList') {
                 this.vgMedia.pause();
                 this.vgMedia.currentTime = 0;