feat(API): Added currentTime

Added currentTime to API. Improved examples with bound player. Improved code styling.

examples/src/app.html

@@ -8,6 +8,7 @@ <h1>Videogular 2 Example</h1>
             <li><a [routerLink]="['SingleMediaPlayer']">Single Media Player</a></li>
             <li><a [routerLink]="['MultipleMediaPlayer']">Multiple Media Player</a></li>
             <li><a [routerLink]="['AudioPlayer']">Audio Player</a></li>
+            <li><a [routerLink]="['BoundPlayer']">Bound Player</a></li>
         </ul>
     </nav>
 </aside>

examples/src/app.ts

@@ -4,6 +4,7 @@ import {bootstrap} from 'angular2/platform/browser';
 import {SingleMediaPlayer} from "./single-media-player";
 import {MultipleMediaPlayer} from "./multiple-media-player";
 import {AudioPlayer} from "./audio-player";
+import {BoundPlayer} from "./bound-player";
 
 @Component({
     selector: 'vg-demo',
@@ -85,6 +86,7 @@ import {AudioPlayer} from "./audio-player";
     {path: '/single-media-player', name: 'SingleMediaPlayer', component: SingleMediaPlayer, useAsDefault: true},
     {path: '/multiple-media-player', name: 'MultipleMediaPlayer', component: MultipleMediaPlayer},
     {path: '/audio-player', name: 'AudioPlayer', component: AudioPlayer},
+    {path: '/bound-player', name: 'BoundPlayer', component: BoundPlayer},
     {path: '/**', redirectTo: ['SingleMediaPlayer']}
 ])
 export class VgDemo {

examples/src/bound-player.html

@@ -0,0 +1,43 @@
+<h2>Video player with bindings</h2>
+
+<p>Video player with bound properties.</p>
+
+<vg-player (onPlayerReady)="onPlayerReady($event)">
+    <vg-overlay-play></vg-overlay-play>
+
+    <vg-controls *ngIf="!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>
+
+    <video #media id="singleVideo" preload="auto" [controls]="controls">
+        <source *ngFor="#video of sources" [src]="video.src" [type]="video.type">
+    </video>
+</vg-player>
+
+<div>
+    <button type="button" (click)="api.play()">Play</button>
+    <button type="button" (click)="api.pause()">Pause</button>
+    <button type="button" (click)="api.currentTime = 50">Seek to second 50</button>
+</div>
+<div>
+    <label for="nativeControls">Native Controls</label>
+    <input #nativeControls id="nativeControls" type="checkbox" (change)="controls = nativeControls.checked">
+</div>
+<div>
+    <label>{{ 'Current time: ' + api?.time?.current}}</label>
+</div>

examples/src/bound-player.ts

@@ -0,0 +1,51 @@
+import {Component} from 'angular2/core';
+import {NgFor, NgIf} from 'angular2/common';
+import {VgAPI, VgPlayer, VgOverlayPlay, VgControls, VgPlayPause, VgPlaybackButton, VgScrubBar, VgScrubBarCurrentTime, VgScrubBarBufferingTime, VgMute, VgFullscreen} from 'videogular2/videogular2';
+
+@Component({
+    selector: 'vg-demo',
+    templateUrl: './src/bound-player.html',
+    directives: [
+        VgPlayer,
+        VgOverlayPlay,
+        VgControls,
+        VgPlayPause,
+        VgPlaybackButton,
+        VgScrubBar,
+        VgScrubBarCurrentTime,
+        VgScrubBarBufferingTime,
+        VgMute,
+        VgFullscreen,
+        NgFor,
+        NgIf
+    ]
+})
+export class BoundPlayer {
+    sources:Array<Object>;
+    controls:boolean = false;
+    autoplay:boolean = false;
+    loop:boolean = false;
+    preload:string = 'auto';
+    api:VgAPI;
+
+    constructor() {
+        this.sources = [
+            {
+                src: "http://static.videogular.com/assets/videos/videogular.mp4",
+                type: "video/mp4"
+            },
+            {
+                src: "http://static.videogular.com/assets/videos/videogular.ogg",
+                type: "video/ogg"
+            },
+            {
+                src: "http://static.videogular.com/assets/videos/videogular.webm",
+                type: "video/webm"
+            }
+        ];
+    }
+
+    onPlayerReady(api:VgAPI) {
+        this.api = api;
+    }
+}

examples/src/multiple-media-player.ts

@@ -23,10 +23,6 @@ import {VgPlayer, VgOverlayPlay, VgControls, VgPlayPause, VgPlaybackButton, VgSc
 })
 export class MultipleMediaPlayer {
     sources:Array<Object>;
-    controls:boolean = false;
-    autoplay:boolean = false;
-    loop:boolean = false;
-    preload:string = 'auto';
 
     constructor() {
         this.sources = [

examples/src/simple-player.html

@@ -0,0 +1,11 @@
+<h2>Simple Video Player</h2>
+
+<p>Video player with one video object, without plugins and static sources.</p>
+
+<vg-player>
+    <video id="singleVideo" preload="auto" controls>
+        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
+        <source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
+        <source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
+    </video>
+</vg-player>

examples/src/simple-player.ts

@@ -0,0 +1,11 @@
+import {Component} from 'angular2/core';
+import {VgPlayer} from 'videogular2/videogular2';
+
+@Component({
+    selector: 'simple-player',
+    templateUrl: './src/simple-player.html',
+    directives: [
+        VgPlayer
+    ]
+})
+export class SimplePlayer {}