fix(API): Add buffer to API

Added buffer property to API (close #16). Improved examples with audio demo. 16
videogular · Feb 7, 2016 · 1e966c6 · 1e966c6
1 parent a718081
commit 1e966c6
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 35 deletions.
diff --git a/examples/build/app.js b/examples/build/app.js
diff --git a/examples/build/app.js.map b/examples/build/app.js.map
diff --git a/examples/build/audio-player.js b/examples/build/audio-player.js
diff --git a/examples/build/audio-player.js.map b/examples/build/audio-player.js.map
diff --git a/examples/src/app.html b/examples/src/app.html
@@ -7,6 +7,7 @@ <h1>Videogular 2 Example</h1>
         <ul>
             <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>
         </ul>
     </nav>
 </aside>

diff --git a/examples/src/app.ts b/examples/src/app.ts
@@ -3,6 +3,7 @@ import {RouteConfig, Router, Location, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from
 import {bootstrap} from 'angular2/platform/browser';
 import {SingleMediaPlayer} from "./single-media-player";
 import {MultipleMediaPlayer} from "./multiple-media-player";
+import {AudioPlayer} from "./audio-player";
 
 @Component({
     selector: 'vg-demo',
@@ -83,6 +84,7 @@ import {MultipleMediaPlayer} from "./multiple-media-player";
 @RouteConfig([
     {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: '/**', redirectTo: ['SingleMediaPlayer']}
 ])
 export class VgDemo {

diff --git a/examples/src/audio-player.html b/examples/src/audio-player.html
@@ -0,0 +1,28 @@
+<h2>Audio Player</h2>
+
+<p>Audio player with custom height.</p>
+
+<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 *ngFor="#audio of sources" [src]="audio.src" [type]="audio.type">
+    </audio>
+</vg-player>
diff --git a/examples/src/audio-player.ts b/examples/src/audio-player.ts
@@ -0,0 +1,34 @@
+import {Component} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+import {NgFor} from 'angular2/common';
+import {bootstrap} from 'angular2/platform/browser';
+import {VgPlayer, VgControls, VgPlayPause, VgPlaybackButton, VgScrubBar, VgScrubBarCurrentTime, VgScrubBarBufferingTime, VgMute, VgFullscreen} from 'videogular2/videogular2';
+
+@Component({
+    selector: 'vg-demo',
+    templateUrl: './src/audio-player.html',
+    directives: [
+        VgPlayer,
+        VgControls,
+        VgPlayPause,
+        VgPlaybackButton,
+        VgScrubBar,
+        VgScrubBarCurrentTime,
+        VgScrubBarBufferingTime,
+        VgMute,
+        VgFullscreen,
+        NgFor
+    ]
+})
+export class AudioPlayer {
+    sources:Array<Object>;
+
+    constructor() {
+        this.sources = [
+            {
+                src: "http://static.videogular.com/assets/audios/videogular.mp3",
+                type: "audio/mp3"
+            }
+        ];
+    }
+}
diff --git a/examples/src/multiple-media-player.html b/examples/src/multiple-media-player.html
@@ -1,13 +1,10 @@
-<h2>Multiple media objects</h2>
+<h2>Multiple media player</h2>
 
-<vg-player (on-player-ready)="onPlayerReady($event)"
-           (on-media-ready)="onMediaReady($event)"
-           (on-video-event)="onVideoEvent($event)">
+<p>Video player with two video objects controlled in parallel by an overlay plugin and custom controls.</p>
 
+<vg-player>
     <vg-controls>
         <vg-play-pause vg-for="*"></vg-play-pause>
-        <vg-play-pause vg-for="mainVideo"></vg-play-pause>
-        <vg-play-pause vg-for="pipVideo"></vg-play-pause>
 
         <vg-scrub-bar vg-for="*"></vg-scrub-bar>
 
@@ -16,16 +13,13 @@ <h2>Multiple media objects</h2>
         <vg-mute vg-for="*"></vg-mute>
 
         <vg-fullscreen vg-for="*"></vg-fullscreen>
-        <vg-fullscreen vg-for="mainVideo"></vg-fullscreen>
-        <vg-fullscreen vg-for="pipVideo"></vg-fullscreen>
     </vg-controls>
 
-    <video #main id="mainVideo" [controls]="controls" [autoplay]="autoplay" [loop]="loop" [preload]="preload" style="width: 50%;">
+    <video #main id="mainVideo" preload="auto" style="width: 50%;">
         <source *ngFor="#video of sources" [src]="video.src" [type]="video.type">
     </video>
 
-    <video #pip id="pipVideo" [controls]="controls" [autoplay]="autoplay" [loop]="loop" [preload]="preload" style="width: 50%;">
+    <video #pip id="pipVideo" preload="auto" style="width: 50%;">
         <source *ngFor="#video of sources" [src]="video.src" [type]="video.type">
     </video>
-
 </vg-player>
diff --git a/examples/src/single-media-player.html b/examples/src/single-media-player.html
@@ -1,36 +1,32 @@
 <h2>One media object</h2>
 
-<vg-player (on-player-ready)="onPlayerReady($event)"
-           (on-media-ready)="onMediaReady($event)">
+<p>Video player with one video object, overlay play plugin and custom controls. Seek bar is outside of the control bar.</p>
 
-    <vg-overlay-play vg-for="singleVideo"></vg-overlay-play>
+<vg-player>
+    <vg-overlay-play></vg-overlay-play>
 
-    <vg-scrub-bar vg-for="singleVideo">
-        <vg-scrub-bar-current-time vg-for="singleVideo"></vg-scrub-bar-current-time>
-        <vg-scrub-bar-buffering-time vg-for="singleVideo"></vg-scrub-bar-buffering-time>
+    <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>{{ single?.time?.current | date:'mm:ss' }}</vg-time-display>
+        <vg-time-display>{{ media?.time?.current | date:'mm:ss' }}</vg-time-display>
 
-        <vg-scrub-bar vg-for="singleVideo">
-            <vg-scrub-bar-current-time vg-for="singleVideo"></vg-scrub-bar-current-time>
-            <vg-scrub-bar-buffering-time vg-for="singleVideo"></vg-scrub-bar-buffering-time>
-        </vg-scrub-bar>
+        <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
 
-        <vg-time-display>{{ single?.time?.left | date:'mm:ss' }}</vg-time-display>
-        <vg-time-display>{{ single?.time?.total | date:'mm:ss' }}</vg-time-display>
+        <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 #single id="singleVideo" [autoplay]="autoplay" [loop]="loop" [preload]="preload">
+    <video #media id="singleVideo" preload="auto">
         <source *ngFor="#video of sources" [src]="video.src" [type]="video.type">
     </video>
-
 </vg-player>
diff --git a/src/services/vg-api.spec.ts b/src/services/vg-api.spec.ts
@@ -187,6 +187,14 @@ describe('Videogular Player', () => {
         expect(api.$$getAllProperties).toHaveBeenCalledWith('time');
     });
 
+    it('Should get buffer', () => {
+        spyOn(api, '$$getAllProperties').and.callFake(() => {});
+
+        var time = api.buffer;
+
+        expect(api.$$getAllProperties).toHaveBeenCalledWith('buffer');
+    });
+
     it('Should get buffered', () => {
         spyOn(api, '$$getAllProperties').and.callFake(() => {});
 
@@ -527,7 +535,7 @@ describe('Videogular Player', () => {
 
         api.onTimeUpdate('main');
 
-        expect((<any>api.medias).main.buffered.end).toHaveBeenCalledWith(0);
+        expect((<any>api.medias).main.buffered.end).not.toHaveBeenCalled();
     });
 
     it('Should handle onProgress event', () => {
@@ -574,7 +582,7 @@ describe('Videogular Player', () => {
 
         api.onProgress('main');
 
-        expect((<any>api.medias).main.buffered.end).toHaveBeenCalledWith(0);
+        expect((<any>api.medias).main.buffered.end).not.toHaveBeenCalled();
     });
 
     it('Should handle onVolumeChange event', () => {

diff --git a/src/services/vg-api.ts b/src/services/vg-api.ts
@@ -91,6 +91,10 @@ export class VgAPI {
         return this.$$getAllProperties('time');
     }
 
+    get buffer() {
+        return this.$$getAllProperties('buffer');
+    }
+
     get buffered() {
         return this.$$getAllProperties('buffered');
     }
@@ -238,19 +242,20 @@ export class VgAPI {
     onTimeUpdate(id:string) {
         var end = this.medias[id].buffered.length - 1;
 
-        if (end < 0) end = 0;
-
         this.medias[id].time.current = this.medias[id].currentTime * 1000;
         this.medias[id].time.left = (this.medias[id].duration - this.medias[id].currentTime) * 1000;
-        this.medias[id].buffer.end = this.medias[id].buffered.end(end) * 1000;
+
+        if (end >= 0) {
+            this.medias[id].buffer.end = this.medias[id].buffered.end(end) * 1000;
+        }
     }
 
     onProgress(id:string) {
         var end = this.medias[id].buffered.length - 1;
 
-        if (end < 0) end = 0;
-
-        this.medias[id].buffer.end = this.medias[id].buffered.end(end) * 1000;
+        if (end >= 0) {
+            this.medias[id].buffer.end = this.medias[id].buffered.end(end) * 1000;
+        }
     }
 
     onVolumeChange(id:string) {