From 1e966c6c4e43d64bcf5ef1c599b5e1126a160fe5 Mon Sep 17 00:00:00 2001 From: Raul Date: Sun, 7 Feb 2016 15:39:43 +0100 Subject: [PATCH] fix(API): Add buffer to API Added buffer property to API (close #16). Improved examples with audio demo. 16 --- examples/build/app.js | 2 ++ examples/build/app.js.map | 2 +- examples/build/audio-player.js | 44 +++++++++++++++++++++++++ examples/build/audio-player.js.map | 1 + examples/src/app.html | 1 + examples/src/app.ts | 2 ++ examples/src/audio-player.html | 28 ++++++++++++++++ examples/src/audio-player.ts | 34 +++++++++++++++++++ examples/src/multiple-media-player.html | 16 +++------ examples/src/single-media-player.html | 26 +++++++-------- src/services/vg-api.spec.ts | 12 +++++-- src/services/vg-api.ts | 17 ++++++---- 12 files changed, 150 insertions(+), 35 deletions(-) create mode 100644 examples/build/audio-player.js create mode 100644 examples/build/audio-player.js.map create mode 100644 examples/src/audio-player.html create mode 100644 examples/src/audio-player.ts diff --git a/examples/build/app.js b/examples/build/app.js index 1b7c8799..ecde59e1 100644 --- a/examples/build/app.js +++ b/examples/build/app.js @@ -12,6 +12,7 @@ var router_1 = require('angular2/router'); var browser_1 = require('angular2/platform/browser'); var single_media_player_1 = require("./single-media-player"); var multiple_media_player_1 = require("./multiple-media-player"); +var audio_player_1 = require("./audio-player"); var VgDemo = (function () { function VgDemo(router, location) { this.router = router; @@ -37,6 +38,7 @@ var VgDemo = (function () { router_1.RouteConfig([ { path: '/single-media-player', name: 'SingleMediaPlayer', component: single_media_player_1.SingleMediaPlayer, useAsDefault: true }, { path: '/multiple-media-player', name: 'MultipleMediaPlayer', component: multiple_media_player_1.MultipleMediaPlayer }, + { path: '/audio-player', name: 'AudioPlayer', component: audio_player_1.AudioPlayer }, { path: '/**', redirectTo: ['SingleMediaPlayer'] } ]), __metadata('design:paramtypes', [router_1.Router, router_1.Location]) diff --git a/examples/build/app.js.map b/examples/build/app.js.map index ac48176e..bb6e5544 100644 --- a/examples/build/app.js.map +++ b/examples/build/app.js.map @@ -1 +1 @@ -{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":["VgDemo","VgDemo.constructor","VgDemo.ngOnInit"],"mappings":";;;;;;;;;AAAA,qBAAwB,eAAe,CAAC,CAAA;AACxC,uBAAiF,iBAAiB,CAAC,CAAA;AACnG,wBAAwB,2BAA2B,CAAC,CAAA;AACpD,oCAAgC,uBAAuB,CAAC,CAAA;AACxD,sCAAkC,yBAAyB,CAAC,CAAA;AAE5D;IAoFIA,gBAAoBA,MAAaA,EAAUA,QAAkBA;QAAzCC,WAAMA,GAANA,MAAMA,CAAOA;QAAUA,aAAQA,GAARA,QAAQA,CAAUA;IAE7DA,CAACA;IAEDD,yBAAQA,GAARA;QAAAE,iBAICA;QAHGA,IAAIA,CAACA,MAAMA,CAACA,SAASA,CAACA;YAClBA,KAAIA,CAACA,UAAUA,GAAGA,KAAIA,CAACA,QAAQA,CAACA,IAAIA,EAAEA,CAACA;QAC3CA,CAACA,CAACA,CAACA;IACPA,CAACA;IA5FLF;QAACA,gBAASA,CAACA;YACPA,QAAQA,EAAEA,SAASA;YACnBA,WAAWA,EAAEA,gBAAgBA;YAC7BA,MAAMA,EAAEA;gBACJA,mmDAkECA;aACJA;YACDA,UAAUA,EAAEA;gBACRA,0BAAiBA;aACpBA;SACJA,CAACA;QACDA,oBAAWA,CAACA;YACTA,EAACA,IAAIA,EAAEA,sBAAsBA,EAAEA,IAAIA,EAAEA,mBAAmBA,EAAEA,SAASA,EAAEA,uCAAiBA,EAAEA,YAAYA,EAAEA,IAAIA,EAACA;YAC3GA,EAACA,IAAIA,EAAEA,wBAAwBA,EAAEA,IAAIA,EAAEA,qBAAqBA,EAAEA,SAASA,EAAEA,2CAAmBA,EAACA;YAC7FA,EAACA,IAAIA,EAAEA,KAAKA,EAAEA,UAAUA,EAAEA,CAACA,mBAAmBA,CAACA,EAACA;SACnDA,CAACA;;eAaDA;IAADA,aAACA;AAADA,CAACA,AA7FD,IA6FC;AAZY,cAAM,SAYlB,CAAA;AAED,mBAAS,CAAC,MAAM,EAAE;IACd,yBAAgB;CACnB,CAAC,CAAC"} \ No newline at end of file +{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":["VgDemo","VgDemo.constructor","VgDemo.ngOnInit"],"mappings":";;;;;;;;;AAAA,qBAAwB,eAAe,CAAC,CAAA;AACxC,uBAAiF,iBAAiB,CAAC,CAAA;AACnG,wBAAwB,2BAA2B,CAAC,CAAA;AACpD,oCAAgC,uBAAuB,CAAC,CAAA;AACxD,sCAAkC,yBAAyB,CAAC,CAAA;AAC5D,6BAA0B,gBAAgB,CAAC,CAAA;AAE3C;IAqFIA,gBAAoBA,MAAaA,EAAUA,QAAkBA;QAAzCC,WAAMA,GAANA,MAAMA,CAAOA;QAAUA,aAAQA,GAARA,QAAQA,CAAUA;IAE7DA,CAACA;IAEDD,yBAAQA,GAARA;QAAAE,iBAICA;QAHGA,IAAIA,CAACA,MAAMA,CAACA,SAASA,CAACA;YAClBA,KAAIA,CAACA,UAAUA,GAAGA,KAAIA,CAACA,QAAQA,CAACA,IAAIA,EAAEA,CAACA;QAC3CA,CAACA,CAACA,CAACA;IACPA,CAACA;IA7FLF;QAACA,gBAASA,CAACA;YACPA,QAAQA,EAAEA,SAASA;YACnBA,WAAWA,EAAEA,gBAAgBA;YAC7BA,MAAMA,EAAEA;gBACJA,mmDAkECA;aACJA;YACDA,UAAUA,EAAEA;gBACRA,0BAAiBA;aACpBA;SACJA,CAACA;QACDA,oBAAWA,CAACA;YACTA,EAACA,IAAIA,EAAEA,sBAAsBA,EAAEA,IAAIA,EAAEA,mBAAmBA,EAAEA,SAASA,EAAEA,uCAAiBA,EAAEA,YAAYA,EAAEA,IAAIA,EAACA;YAC3GA,EAACA,IAAIA,EAAEA,wBAAwBA,EAAEA,IAAIA,EAAEA,qBAAqBA,EAAEA,SAASA,EAAEA,2CAAmBA,EAACA;YAC7FA,EAACA,IAAIA,EAAEA,eAAeA,EAAEA,IAAIA,EAAEA,aAAaA,EAAEA,SAASA,EAAEA,0BAAWA,EAACA;YACpEA,EAACA,IAAIA,EAAEA,KAAKA,EAAEA,UAAUA,EAAEA,CAACA,mBAAmBA,CAACA,EAACA;SACnDA,CAACA;;eAaDA;IAADA,aAACA;AAADA,CAACA,AA9FD,IA8FC;AAZY,cAAM,SAYlB,CAAA;AAED,mBAAS,CAAC,MAAM,EAAE;IACd,yBAAgB;CACnB,CAAC,CAAC"} \ No newline at end of file diff --git a/examples/build/audio-player.js b/examples/build/audio-player.js new file mode 100644 index 00000000..47edf59c --- /dev/null +++ b/examples/build/audio-player.js @@ -0,0 +1,44 @@ +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +var __metadata = (this && this.__metadata) || function (k, v) { + if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); +}; +var core_1 = require('angular2/core'); +var common_1 = require('angular2/common'); +var videogular2_1 = require('videogular2/videogular2'); +var AudioPlayer = (function () { + function AudioPlayer() { + this.sources = [ + { + src: "http://static.videogular.com/assets/audios/videogular.mp3", + type: "audio/mp3" + } + ]; + } + AudioPlayer = __decorate([ + core_1.Component({ + selector: 'vg-demo', + templateUrl: './src/audio-player.html', + directives: [ + videogular2_1.VgPlayer, + videogular2_1.VgControls, + videogular2_1.VgPlayPause, + videogular2_1.VgPlaybackButton, + videogular2_1.VgScrubBar, + videogular2_1.VgScrubBarCurrentTime, + videogular2_1.VgScrubBarBufferingTime, + videogular2_1.VgMute, + videogular2_1.VgFullscreen, + common_1.NgFor + ] + }), + __metadata('design:paramtypes', []) + ], AudioPlayer); + return AudioPlayer; +})(); +exports.AudioPlayer = AudioPlayer; +//# sourceMappingURL=audio-player.js.map \ No newline at end of file diff --git a/examples/build/audio-player.js.map b/examples/build/audio-player.js.map new file mode 100644 index 00000000..b015022a --- /dev/null +++ b/examples/build/audio-player.js.map @@ -0,0 +1 @@ +{"version":3,"file":"audio-player.js","sourceRoot":"","sources":["../src/audio-player.ts"],"names":["AudioPlayer","AudioPlayer.constructor"],"mappings":";;;;;;;;;AAAA,qBAAwB,eAAe,CAAC,CAAA;AAExC,uBAAoB,iBAAiB,CAAC,CAAA;AAEtC,4BAAoJ,yBAAyB,CAAC,CAAA;AAE9K;IAmBIA;QACIC,IAAIA,CAACA,OAAOA,GAAGA;YACXA;gBACIA,GAAGA,EAAEA,2DAA2DA;gBAChEA,IAAIA,EAAEA,WAAWA;aACpBA;SACJA,CAACA;IACNA,CAACA;IA1BLD;QAACA,gBAASA,CAACA;YACPA,QAAQA,EAAEA,SAASA;YACnBA,WAAWA,EAAEA,yBAAyBA;YACtCA,UAAUA,EAAEA;gBACRA,sBAAQA;gBACRA,wBAAUA;gBACVA,yBAAWA;gBACXA,8BAAgBA;gBAChBA,wBAAUA;gBACVA,mCAAqBA;gBACrBA,qCAAuBA;gBACvBA,oBAAMA;gBACNA,0BAAYA;gBACZA,cAAKA;aACRA;SACJA,CAACA;;oBAYDA;IAADA,kBAACA;AAADA,CAACA,AA3BD,IA2BC;AAXY,mBAAW,cAWvB,CAAA"} \ No newline at end of file diff --git a/examples/src/app.html b/examples/src/app.html index e77aae78..413d26e2 100644 --- a/examples/src/app.html +++ b/examples/src/app.html @@ -7,6 +7,7 @@

Videogular 2 Example

diff --git a/examples/src/app.ts b/examples/src/app.ts index ab953589..5eafbab9 100644 --- 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 new file mode 100644 index 00000000..27765910 --- /dev/null +++ b/examples/src/audio-player.html @@ -0,0 +1,28 @@ +

Audio Player

+ +

Audio player with custom height.

+ + + + + + + {{ media?.time?.current | date:'mm:ss' }} + + + + + + + {{ media?.time?.left | date:'mm:ss' }} + {{ media?.time?.total | date:'mm:ss' }} + + + + + + + + diff --git a/examples/src/audio-player.ts b/examples/src/audio-player.ts new file mode 100644 index 00000000..b2bd9149 --- /dev/null +++ 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; + + 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 index 2e48590e..96c8f17e 100644 --- a/examples/src/multiple-media-player.html +++ b/examples/src/multiple-media-player.html @@ -1,13 +1,10 @@ -

Multiple media objects

+

Multiple media player

- +

Video player with two video objects controlled in parallel by an overlay plugin and custom controls.

+ - - @@ -16,16 +13,13 @@

Multiple media objects

- - - diff --git a/examples/src/single-media-player.html b/examples/src/single-media-player.html index 010c2e08..b16dc237 100644 --- a/examples/src/single-media-player.html +++ b/examples/src/single-media-player.html @@ -1,36 +1,32 @@

One media object

- +

Video player with one video object, overlay play plugin and custom controls. Seek bar is outside of the control bar.

- + + - - - + + + - {{ single?.time?.current | date:'mm:ss' }} + {{ media?.time?.current | date:'mm:ss' }} - - - - + - {{ single?.time?.left | date:'mm:ss' }} - {{ single?.time?.total | date:'mm:ss' }} + {{ media?.time?.left | date:'mm:ss' }} + {{ media?.time?.total | date:'mm:ss' }} - diff --git a/src/services/vg-api.spec.ts b/src/services/vg-api.spec.ts index a490c3d1..5dee0149 100644 --- 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((api.medias).main.buffered.end).toHaveBeenCalledWith(0); + expect((api.medias).main.buffered.end).not.toHaveBeenCalled(); }); it('Should handle onProgress event', () => { @@ -574,7 +582,7 @@ describe('Videogular Player', () => { api.onProgress('main'); - expect((api.medias).main.buffered.end).toHaveBeenCalledWith(0); + expect((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 index 8d00c268..103f8a5b 100644 --- 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) {