Merge pull request #137 from videogular/fix-112-update-source

fix(Bindings): Fix video updates
videogular · May 8, 2016 · c373fa5 · c373fa5
2 parents 1f672cb + a9f456b
commit c373fa5
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 47 deletions.
diff --git a/examples/build/bound-player.js b/examples/build/bound-player.js
diff --git a/examples/build/bound-player.js.map b/examples/build/bound-player.js.map
diff --git a/examples/index.html b/examples/index.html
@@ -6,7 +6,7 @@
     <title>Videogular 2 demo app</title>
 
     <script src="http://threejs.org/build/three.min.js"></script>
-    <script src="http://threejs.org/examples/js/effects/CardboardEffect.js"></script>
+    <script src="http://videogular.com/alpha/js/CardboardEffect.js"></script>
     <script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
     <script src="http://threejs.org/examples/js/controls/DeviceOrientationControls.js"></script>
     <script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

diff --git a/examples/package.json b/examples/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "watch": "rm -rf build && mkdir build && tsc -p src -w",
     "build": "rm -rf build && mkdir build && tsc -p src",
-    "start": "http-server -c-1 -o -s -p 8875 ."
+    "start": "http-server -c-1 -o -s -p 7875 ."
   },
   "author": "",
   "license": "ISC",

diff --git a/examples/src/bound-player.html b/examples/src/bound-player.html
@@ -33,6 +33,7 @@ <h2>Video player with bindings</h2>
     <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>
+    <button type="button" (click)="onClickUpdateSource()">Update source</button>
 </div>
 <div>
     <label for="nativeControls">Native Controls</label>

diff --git a/examples/src/bound-player.ts b/examples/src/bound-player.ts
@@ -36,10 +36,6 @@ export class BoundPlayer {
         this.fsAPI = VgFullscreenAPI;
 
         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"
@@ -54,4 +50,17 @@ export class BoundPlayer {
     onPlayerReady(api:VgAPI) {
         this.api = api;
     }
+
+    onClickUpdateSource() {
+        this.sources = [
+            {
+                src: "http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov",
+                type: "video/mp4"
+            },
+            {
+                src: "http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg",
+                type: "video/ogg"
+            }
+        ];
+    }
 }
diff --git a/src/services/i-playable.ts b/src/services/i-playable.ts
@@ -0,0 +1,17 @@
+export interface IPlayable {
+    id:string;
+    time:any;
+    buffer:any;
+    canPlay:boolean;
+    canPlayThrough:boolean;
+    isMetadataLoaded:boolean;
+    isWaiting:boolean;
+    isCompleted:boolean;
+    state:string;
+    seekTime:Function;
+    subscriptions:any;
+    duration:number;
+    currentTime:number;
+    addListener:Function;
+    removeListener:Function;
+}
diff --git a/src/services/vg-api.spec.ts b/src/services/vg-api.spec.ts
@@ -1,5 +1,6 @@
 import {it, describe, expect, beforeEach} from "angular2/testing";
 import {VgAPI} from "../services/vg-api";
+import {IPlayable} from "./i-playable";
 
 describe('Videogular Player', () => {
     let api:VgAPI;
@@ -251,7 +252,7 @@ describe('Videogular Player', () => {
             currentTime: 0
         };
 
-        api.$$seek(<HTMLVideoElement>media, 10);
+        api.$$seek(<IPlayable>media, 10);
 
         expect(media.currentTime).toBe(10);
     });
@@ -309,7 +310,7 @@ describe('Videogular Player', () => {
 
         spyOn(api, 'connect').and.callFake(() => {});
 
-        api.registerMedia(media);
+        api.registerMedia(<IPlayable>media);
 
         expect((<any>media).time.current).toBe(0);
         expect((<any>media).time.total).toBe(0);
@@ -336,25 +337,24 @@ describe('Videogular Player', () => {
     });
 
     it('Should subscribe to media listeners through Observables', () => {
-        var media = {
-            id: 'main',
-            subscriptions: {}
-        };
-
-        api.connect(media);
-
-        expect((<any>media.subscriptions).canPlay).toBeDefined();
-        expect((<any>media.subscriptions).canPlayThrough).toBeDefined();
-        expect((<any>media.subscriptions).loadedMetadata).toBeDefined();
-        expect((<any>media.subscriptions).waiting).toBeDefined();
-        expect((<any>media.subscriptions).progress).toBeDefined();
-        expect((<any>media.subscriptions).ended).toBeDefined();
-        expect((<any>media.subscriptions).playing).toBeDefined();
-        expect((<any>media.subscriptions).play).toBeDefined();
-        expect((<any>media.subscriptions).pause).toBeDefined();
-        expect((<any>media.subscriptions).timeUpdate).toBeDefined();
-        expect((<any>media.subscriptions).volumeChange).toBeDefined();
-        expect((<any>media.subscriptions).error).toBeDefined();
+        var media = document.createElement('video');
+        media.id = 'main';
+        (<any>media).subscriptions = {};
+
+        api.connect(<any>media);
+
+        expect((<any>media).subscriptions.canPlay).toBeDefined();
+        expect((<any>media).subscriptions.canPlayThrough).toBeDefined();
+        expect((<any>media).subscriptions.loadedMetadata).toBeDefined();
+        expect((<any>media).subscriptions.waiting).toBeDefined();
+        expect((<any>media).subscriptions.progress).toBeDefined();
+        expect((<any>media).subscriptions.ended).toBeDefined();
+        expect((<any>media).subscriptions.playing).toBeDefined();
+        expect((<any>media).subscriptions.play).toBeDefined();
+        expect((<any>media).subscriptions.pause).toBeDefined();
+        expect((<any>media).subscriptions.timeUpdate).toBeDefined();
+        expect((<any>media).subscriptions.volumeChange).toBeDefined();
+        expect((<any>media).subscriptions.error).toBeDefined();
     });
 
     it('Should handle onCanPlay event', () => {

diff --git a/src/services/vg-api.ts b/src/services/vg-api.ts
@@ -1,6 +1,7 @@
 import {Injectable} from 'angular2/core';
 import {VgEvents} from '../events/vg-events';
 import {Observable} from 'rxjs/Rx';
+import {IPlayable} from "./i-playable";
 
 @Injectable()
 export class VgAPI {
@@ -117,7 +118,7 @@ export class VgAPI {
         }
     }
 
-    $$seek(media:any, value:number, byPercent:boolean = false) {
+    $$seek(media:IPlayable, value:number, byPercent:boolean = false) {
         var second;
 
         if (byPercent) {
@@ -154,7 +155,7 @@ export class VgAPI {
         this.videogularElement = elem;
     }
 
-    registerMedia(media:any) {
+    registerMedia(media:IPlayable) {
         media.time = {
             current: 0,
             total: 0,
@@ -182,42 +183,65 @@ export class VgAPI {
         this.connect(media);
     }
 
-    connect(media:any) {
-        media.subscriptions.canPlay = Observable.fromEvent(media, VgEvents.VG_CAN_PLAY);
+    connect(media:IPlayable) {
+        media.subscriptions.canPlay = Observable.fromEvent(<any>media, VgEvents.VG_CAN_PLAY);
         media.subscriptions.canPlay.subscribe(this.onCanPlay.bind(this));
 
-        media.subscriptions.canPlayThrough = Observable.fromEvent(media, VgEvents.VG_CAN_PLAY_THROUGH);
+        media.subscriptions.canPlayThrough = Observable.fromEvent(<any>media, VgEvents.VG_CAN_PLAY_THROUGH);
         media.subscriptions.canPlayThrough.subscribe(this.onCanPlayThrough.bind(this));
 
-        media.subscriptions.loadedMetadata = Observable.fromEvent(media, VgEvents.VG_LOADED_METADATA);
+        media.subscriptions.loadedMetadata = Observable.fromEvent(<any>media, VgEvents.VG_LOADED_METADATA);
         media.subscriptions.loadedMetadata.subscribe(this.onLoadMetadata.bind(this));
 
-        media.subscriptions.waiting = Observable.fromEvent(media, VgEvents.VG_WAITING);
+        media.subscriptions.waiting = Observable.fromEvent(<any>media, VgEvents.VG_WAITING);
         media.subscriptions.waiting.subscribe(this.onWait.bind(this));
 
-        media.subscriptions.progress = Observable.fromEvent(media, VgEvents.VG_PROGRESS);
+        media.subscriptions.progress = Observable.fromEvent(<any>media, VgEvents.VG_PROGRESS);
         media.subscriptions.progress.subscribe(this.onProgress.bind(this));
 
-        media.subscriptions.ended = Observable.fromEvent(media, VgEvents.VG_ENDED);
+        media.subscriptions.ended = Observable.fromEvent(<any>media, VgEvents.VG_ENDED);
         media.subscriptions.ended.subscribe(this.onComplete.bind(this));
 
-        media.subscriptions.playing = Observable.fromEvent(media, VgEvents.VG_PLAYING);
+        media.subscriptions.playing = Observable.fromEvent(<any>media, VgEvents.VG_PLAYING);
         media.subscriptions.playing.subscribe(this.onStartPlaying.bind(this));
 
-        media.subscriptions.play = Observable.fromEvent(media, VgEvents.VG_PLAY);
+        media.subscriptions.play = Observable.fromEvent(<any>media, VgEvents.VG_PLAY);
         media.subscriptions.play.subscribe(this.onPlay.bind(this));
 
-        media.subscriptions.pause = Observable.fromEvent(media, VgEvents.VG_PAUSE);
+        media.subscriptions.pause = Observable.fromEvent(<any>media, VgEvents.VG_PAUSE);
         media.subscriptions.pause.subscribe(this.onPause.bind(this));
 
-        media.subscriptions.timeUpdate = Observable.fromEvent(media, VgEvents.VG_TIME_UPDATE);
+        media.subscriptions.timeUpdate = Observable.fromEvent(<any>media, VgEvents.VG_TIME_UPDATE);
         media.subscriptions.timeUpdate.subscribe(this.onTimeUpdate.bind(this));
 
-        media.subscriptions.volumeChange = Observable.fromEvent(media, VgEvents.VG_VOLUME_CHANGE);
+        media.subscriptions.volumeChange = Observable.fromEvent(<any>media, VgEvents.VG_VOLUME_CHANGE);
         media.subscriptions.volumeChange.subscribe(this.onVolumeChange.bind(this));
 
-        media.subscriptions.error = Observable.fromEvent(media, VgEvents.VG_ERROR);
+        media.subscriptions.error = Observable.fromEvent(<any>media, VgEvents.VG_ERROR);
         media.subscriptions.error.subscribe(this.onError.bind(this));
+
+        media.subscriptions.mutation = Observable.create(
+            (observer) => {
+                let domObs = new MutationObserver((mutations) => {
+                    observer.next(mutations);
+                });
+
+                domObs.observe(<any>media, { childList: true });
+
+                return () => {
+                    domObs.disconnect();
+                };
+            }
+        );
+        media.subscriptions.mutation.subscribe(this.onMutation.bind(this, media));
+    }
+
+    onMutation(media:IPlayable, mutations) {
+        this.medias[media.id].pause();
+        this.medias[media.id].currentTime = 0;
+
+        // TODO: This is ugly, we should find something cleaner
+        setTimeout(() => this.medias[media.id].load(), 1);
     }
 
     onCanPlay(event) {