improve error handling for local player

diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 07f4c60..1f8589c 100644 (file)
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -178,6 +178,65 @@ $(document).ready(function(){
     else
         if ($.cookie("notification") === "true")
             $('#btnnotify').addClass("active")
+       
+    document.getElementById('player').addEventListener('stalled', function() {
+                                               if ( !document.getElementById('player').paused ) {
+                                                       this.pause();
+                                                       clickLocalPlay();
+                                                       $('.top-right').notify({
+                                                               message:{text:"music stream stalled - trying to recover..."},
+                                                               type: "danger",
+                                                               fadeOut: { enabled: true, delay: 1000 },
+                                                       }).show();
+                                               }
+    });
+
+    document.getElementById('player').addEventListener('pause', function() {
+        this.src='';
+        this.removeAttribute("src");
+       $("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
+    });
+
+       document.getElementById('player').addEventListener('error', function failed(e) {
+               this.pause();
+               switch (e.target.error.code) {
+                       case e.target.error.MEDIA_ERR_ABORTED:
+                               $('.top-right').notify({
+                                       message:{text:"Audio playback aborted by user."},
+                                       type: "info",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       case e.target.error.MEDIA_ERR_NETWORK:
+                               $('.top-right').notify({
+                                       message:{text:"Network error while playing audio."},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       case e.target.error.MEDIA_ERR_DECODE:
+                               $('.top-right').notify({
+                                       message:{text:"Audio playback aborted. Did you unplug your headphones?"},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                               $('.top-right').notify({
+                                       message:{text:"Error while loading audio (server, network or format error)."},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       default:
+                               $('.top-right').notify({
+                                       message:{text:"Unknown error while playing audio."},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+               }
+       }, true);
 });
 
 
@@ -596,12 +655,14 @@ var updatePlayIcon = function(state)
     if(state == 1) { // stop
         $("#play-icon").addClass("glyphicon-play");
         $('#track-icon').addClass("glyphicon-stop");
-    } else if(state == 2) { // pause
+               document.getElementById('player').pause();
+    } else if(state == 2) { // play
         $("#play-icon").addClass("glyphicon-pause");
         $('#track-icon').addClass("glyphicon-play");
-    } else { // play
+    } else { // pause
         $("#play-icon").addClass("glyphicon-play");
         $('#track-icon').addClass("glyphicon-pause");
+               document.getElementById('player').pause();
     }
 }
 
@@ -632,6 +693,11 @@ function renumber_table(tableID,item) {
 function clickLocalPlay() {
     var player = document.getElementById('player');
     $("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
+       
+
+    if ( !$('#track-icon').hasClass('glyphicon-play') ) {
+               clickPlay();
+       }
 
     if ( player.paused ) {
         var mpdstream = $.cookie("mpdstream");
@@ -649,9 +715,6 @@ function clickLocalPlay() {
         }
     } else {
         player.pause();
-        player.src='';
-        player.removeAttribute("src");
-        $("#localplay-icon").addClass("glyphicon-play");
     }
 }
 

diff --git a/htdocs/player.html b/htdocs/player.html
index 83b4621..552d8b1 100644 (file)
--- a/htdocs/player.html
+++ b/htdocs/player.html
@@ -17,6 +17,10 @@
   <!-- Custom styles for this template -->
   <link href="css/mpd.min.css" rel="stylesheet">
   <link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
+  <script src="js/jquery-1.10.2.min.js"></script>
+  <script src="js/jquery.cookie.js"></script>
+  <script src="js/bootstrap.min.js"></script>
+  <script src="js/bootstrap-notify.js"></script>
 <script type="text/javascript">
 function clickLocalPlay() {
     var player = document.getElementById('player');
@@ -38,6 +42,66 @@ function clickLocalPlay() {
     }
 }
 
+$(document).ready(function(){
+       document.getElementById('player').addEventListener('stalled', function() {
+                                               if ( !document.getElementById('player').paused ) {
+                                                       this.pause();
+                                                       clickLocalPlay();
+                                                       $('.top-right').notify({
+                                                               message:{text:"music stream stalled - trying to recover..."},
+                                                               type: "danger",
+                                                               fadeOut: { enabled: true, delay: 1000 },
+                                                       }).show();
+                                               }
+       });
+
+       document.getElementById('player').addEventListener('pause', function() {
+               this.src='';
+               this.removeAttribute("src");
+               $("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
+       });
+
+       document.getElementById('player').addEventListener('error', function failed(e) {
+               this.pause();
+               switch (e.target.error.code) {
+                       case e.target.error.MEDIA_ERR_ABORTED:
+                               $('.top-right').notify({
+                                       message:{text:"Audio playback aborted by user."},
+                                       type: "info",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       case e.target.error.MEDIA_ERR_NETWORK:
+                               $('.top-right').notify({
+                                       message:{text:"Network error while playing audio."},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       case e.target.error.MEDIA_ERR_DECODE:
+                               $('.top-right').notify({
+                                       message:{text:"Audio playback aborted. Did you unplug your headphones?"},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+                               $('.top-right').notify({
+                                       message:{text:"Error while loading audio (server, network or format error)."},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+                       default:
+                               $('.top-right').notify({
+                                       message:{text:"Unknown error while playing audio."},
+                                       type: "danger",
+                                       fadeOut: { enabled: true, delay: 1000 },
+                               }).show();
+                               break;
+               }
+       }, true);
+});
 </script>
 </head>
 <body>
@@ -54,15 +118,9 @@ function clickLocalPlay() {
             <button type="button" class="btn btn-default btn-lg center-block" onclick="clickLocalPlay()">
               <span id="localplay-icon" class="glyphicon glyphicon-play"></span>
             </button>
+        <div class="notifications top-right"></div>
       </div>
     </div>
   </div>
-
-  <!-- Bootstrap core JavaScript
-  ================================================== -->
-  <!-- Placed at the end of the document so the pages load faster -->
-  <script src="js/jquery-1.10.2.min.js"></script>
-  <script src="js/jquery.cookie.js"></script>
-  <script src="js/bootstrap.min.js"></script>
 </body>
 </html>