Handling calls to play() like Promises

SaturnMusic · Oct 21, 2024 · c8cf598 · c8cf598
1 parent 5264c8b
commit c8cf598
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/app/client/src/App.vue b/app/client/src/App.vue
@@ -547,15 +547,6 @@ export default {
       this.fluidContainer = window.innerWidth < 1300;
     });
 
-    // https://github.com/SaturnMusic/PC/issues/26
-    window.addEventListener("unhandledrejection", (event) => { 
-      console.log("Unhandled promise rejection!\n", event.promise, event.reason); 
-      if (!this.$rooms.room && !event.reason.startsWith("The play() request")) 
-        { 
-          this.$root.skipNext() 
-        }
-    });
-
     //Check for update
     this.checkUpdate();
   },

diff --git a/app/client/src/main.js b/app/client/src/main.js
@@ -130,9 +130,21 @@ new Vue({
 
         play() {
             if (!this.audio || this.state != 1) return;
-            this.audio.play();
-            this.$rooms.togglePlayback(true);
-            this.state = 2;
+
+            // https://developer.chrome.com/blog/play-request-was-interrupted
+            var playingPromise = this.audio.play();
+
+            if (playingPromise !== undefined) {
+                playingPromise.then(_ => {
+                    console.log(_) // should be 'undefined'
+                    this.$rooms.togglePlayback(true);
+                    this.state = 2;
+                })
+            .catch(error => {
+                    console.log(error);
+                    this.skip(1).then(this.skip(-1))
+                })  
+            }          
         },
         pause() {
             if (!this.audio || this.state != 2) return;
@@ -296,7 +308,18 @@ new Vue({
                     let currentVolume = this.audio.volume;
                     let oldAudio = this.audio;
                     this.audio = this.gapless.audio;
-                    this.audio.play();
+
+                    var playingPromise = this.audio.play();
+
+                    if (playingPromise !== undefined) {
+                        playingPromise.then(_ => {
+                            console.log(_)
+                        })
+                    .catch(error => {
+                            console.log(error);
+                            this.skip(1).then(this.skip(-1))
+                        })  
+                    }  
 
                     //Update meta
                     this.playbackInfo = this.gapless.info;
@@ -347,8 +370,18 @@ new Vue({
                 //Repeat track
                 if (this.repeat == 2) {
                     this.seek(0);
-                    this.audio.play();
-                    this.updateState();
+                    var playingPromise = this.audio.play();
+
+                    if (playingPromise !== undefined) {
+                        playingPromise.then(_ => {
+                            console.log(_)
+                            this.updateState();
+                        })
+                    .catch(error => {
+                            console.log(error);
+                            this.skip(1).then(this.skip(-1))
+                        })  
+                    }  
                     return;
                 }