fix: promise issue after channel switch #29

this commit closes #29
4gray · May 18, 2021 · d1f194a · d1f194a
1 parent 6b2c615
commit d1f194a
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/app/player/components/html-video-player/html-video-player.component.ts b/src/app/player/components/html-video-player/html-video-player.component.ts
@@ -46,7 +46,7 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
             console.log('... switching channel to ', channel.name, url);
             this.hls.loadSource(url);
             this.hls.attachMedia(this.videoPlayer.nativeElement);
-            this.videoPlayer.nativeElement.play();
+            this.handlePlayOperation();
         } else if (
             this.videoPlayer.nativeElement.canPlayType(
                 'application/vnd.apple.mpegurl'
@@ -56,12 +56,27 @@ export class HtmlVideoPlayerComponent implements OnChanges, OnDestroy {
             this.videoPlayer.nativeElement.addEventListener(
                 'loadedmetadata',
                 () => {
-                    this.videoPlayer.nativeElement.play();
+                    this.handlePlayOperation();
                 }
             );
         }
     }
 
+    /**
+     * Handles promise based play operation
+     */
+    handlePlayOperation(): void {
+        const playPromise = this.videoPlayer.nativeElement.play();
+
+        if (playPromise !== undefined) {
+            playPromise
+                .then(() => {
+                    // Automatic playback started!
+                })
+                .catch((error) => console.error(error));
+        }
+    }
+
     /**
      * Destroy hls instance on component destroy
      */