Merge pull request #517 from videogular/fix/buffering

fix(core): Fix buffering detection
videogular · May 5, 2017 · 03687eb · 03687eb
2 parents fa8cc8f + 53a0501
commit 03687eb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/src/buffering/vg-buffering.ts b/src/buffering/vg-buffering.ts
@@ -100,7 +100,6 @@ export class VgBuffering implements OnInit, OnDestroy {
 
     elem: HTMLElement;
     target: IPlayable;
-    checkBufferInterval: number;
     checkInterval: number = 50;
     currentPlayPos: number = 0;
     lastPlayPos: number = 0;
@@ -118,7 +117,9 @@ export class VgBuffering implements OnInit, OnDestroy {
             this.onPlayerReady();
         }
         else {
-            this.subscriptions.push(this.API.playerReadyEvent.subscribe(() => this.onPlayerReady()));
+            this.subscriptions.push(
+                this.API.playerReadyEvent.subscribe(() => this.onPlayerReady())
+            );
         }
     }
 

diff --git a/src/core/vg-media/vg-media.spec.ts b/src/core/vg-media/vg-media.spec.ts
@@ -37,13 +37,18 @@ describe('Videogular Media', () => {
         media.vgMedia = elem;
     });
 
-    xit('Should load a new media if a change on dom have been happened', () => {
+    it('Should load a new media if a change on dom have been happened', () => {
         jasmine.clock().install();
 
         spyOn(elem, 'load').and.callThrough();
         spyOn(elem, 'pause').and.callThrough();
 
-        media.onMutation({});
+        media.onMutation([
+            <MutationRecord>{
+                type: 'attributes',
+                attributeName: 'src'
+            }
+        ]);
 
         jasmine.clock().tick(10);
 

diff --git a/src/core/vg-media/vg-media.ts b/src/core/vg-media/vg-media.ts
@@ -114,7 +114,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
                         observer.next(mutations);
                     });
 
-                    domObs.observe(<any>this.elem, { childList: true });
+                    domObs.observe(<any>this.elem, { childList: true, attributes: true });
 
                     return () => {
                         domObs.disconnect();
@@ -205,12 +205,23 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
         );
     }
 
-    onMutation(mutations: any) {
-        this.vgMedia.pause();
-        this.vgMedia.currentTime = 0;
+    onMutation(mutations: Array<MutationRecord>) {
+        // Detect changes only for source elements or src attribute
+        for (let i=0, l=mutations.length; i<l; i++) {
+            let mut: MutationRecord = mutations[i];
+
+            if ((mut.type === 'attributes' && mut.attributeName === 'src') || mut.type === 'childList') {
+                this.vgMedia.pause();
+                this.vgMedia.currentTime = 0;
+
+                this.stopBufferCheck();
 
-        // TODO: This is ugly, we should find something cleaner
-        setTimeout(() => this.vgMedia.load(), 1);
+                // TODO: This is ugly, we should find something cleaner
+                setTimeout(() => this.vgMedia.load(), 1);
+
+                break;
+            }
+        }
     }
 
     play() {
@@ -382,9 +393,15 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
     }
 
     stopBufferCheck() {
-        this.checkBufferSubscription.unsubscribe();
+        if (this.checkBufferSubscription) {
+            this.checkBufferSubscription.unsubscribe();
+        }
+
         this.isBufferDetected = false;
-        this.bufferObserver.next(this.isBufferDetected);
+
+        if (this.bufferObserver) {
+            this.bufferObserver.next(this.isBufferDetected);
+        }
     }
 
     seekTime(value:number, byPercent:boolean = false) {