SAAS-662: Make player auto-connect if there is a problem with the stream

Kind of working in HTML5 mode

airtime_mvc/application/controllers/EmbeddableplayerController.php

@@ -39,11 +39,11 @@ class EmbeddablePlayerController extends Zend_Controller_Action
         $this->view->station_name = Application_Model_Preference::GetStationName();
         $stream = $request->getParam('stream');
         $streamData = Application_Model_StreamSetting::getEnabledStreamData();
+        $availableMobileStreams = array();
+        $availableDesktopStreams = array();
 
         if ($stream == "auto") {
             $this->view->playerMode = "auto";
-            $availableMobileStreams = array();
-            $availableDesktopStreams = array();
             foreach ($streamData as $s) {
                 if ($s["mobile"]) {
                     array_push($availableMobileStreams, $s);
@@ -51,14 +51,14 @@ class EmbeddablePlayerController extends Zend_Controller_Action
                     array_push($availableDesktopStreams, $s);
                 }
             }
-            $this->view->availableMobileStreams = json_encode($availableMobileStreams);
-            $this->view->availableDesktopStreams = json_encode($availableDesktopStreams);
         } else {
             $this->view->playerMode = "manual";
             $selectedStreamData = $streamData[$stream];
             $this->view->streamURL = $selectedStreamData["url"];
             $this->view->codec = $selectedStreamData["codec"];
         }
+        $this->view->availableMobileStreams = json_encode($availableMobileStreams);
+        $this->view->availableDesktopStreams = json_encode($availableDesktopStreams);
         //$this->view->displayMetadata = $request->getParam('display_metadata');
     }
 }

airtime_mvc/application/views/scripts/embeddableplayer/embed-code.phtml

@@ -9,45 +9,35 @@
 
         var MusesPlayer = function() {
             this.mobileDetect = this.mobileDetect();
-            this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams?>;
-            this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams?>;
             this.playerMode = "<?php echo $this->playerMode ?>";
+            this.flashDetect = FlashDetect.versionAtLeast(10, 1) ? true : false;
+            this.settings = {
+                'volume': 100,
+                'jsevents': true,
+                'autoplay': false,
+                'buffering': 5,
+                'title': 'test',
+                'bgcolor': '#FFFFFF',
+                'skin': 'mcclean',
+                'width': 180,
+                'height': 60
+            };
 
             if (this.playerMode == "manual") {
-                MRP.insert({
-                    'url': "<?php echo $this->streamURL ?>",
-                    'codec': "<?php echo $this->codec ?>",
-                    'volume': 100,
-                    'jsevents': true,
-                    'autoplay': false,
-                    'buffering': 5,
-                    'title': 'test',
-                    'bgcolor': '#FFFFFF',
-                    'skin': 'mcclean',
-                    'width': 180,
-                    'height': 60
-                });
+                this.settings.url = "<?php echo $this->streamURL ?>";
+                this.settings.codec = "<?php echo $this->codec ?>";
+                MRP.insert(this.settings);
             } else if (this.playerMode == "auto") {
+                this.availableMobileStreamQueue = <?php echo $this->availableMobileStreams?>;
+                this.availableDesktopStreamQueue = <?php echo $this->availableDesktopStreams?>;
                 var stream = this.getNextAvailableStream();
-                MRP.insert({
-                    'url': stream["url"],
-                    'codec': stream["codec"],
-                    'volume': 100,
-                    'jsevents': true,
-                    'autoplay': false,
-                    'buffering': 5,
-                    'title': 'test',
-                    'bgcolor': '#FFFFFF',
-                    'skin': 'mcclean',
-                    'width': 180,
-                    'height': 60
-                });
+                this.settings.url = stream["url"];
+                this.settings.codec = stream["codec"];
+                MRP.insert(this.settings);
             }
 
             $("p.station_name").html("<?php echo $this->station_name?>");
 
-            this.flashDetect = FlashDetect.versionAtLeast(10, 1) ? true : false;
-
             getMetadata();
         };
 
@@ -95,7 +85,7 @@
         }
 
         MusesPlayer.prototype.play = function() {
-            this.flashDetect ? MRP.play() : musesHTMLPlayClick();
+            this.flashDetect ? MRP.play() : musesHTMLPlayClick();;
             togglePlayStopButton();
         };
 
@@ -108,43 +98,39 @@
             //this.flashDetect ? MRP.setVolume(value) : null;
         };
 
-        MusesPlayer.prototype.setURL = function() {
-            //TODO
+        MusesPlayer.prototype.setURL = function(url) {
+            MRP.setUrl(url);
         };
 
-        function musesCallback(event,value){
+        // detects errors in FLASH mode
+        function musesCallback(event,value) {
             switch (event) {
-                case "loadComplete":
-                    // no source URL is set
-                    if (value === "0") {
-                        console.log("loadComplete failed");
-                    }
                 case "ioError":
                     // connection limit reached or problem connecting to stream
                     if (value === "0") {
                         console.log("ioError");
+                        var stream = musesPlayer.getNextAvailableStream();
+                        musesPlayer.setURL(stream["url"]);
+                        musesPlayer.play();
                     }
             }
         }
 
-        /**
-         * This is a hack to trigger the play button in HTML5 mode
-         */
         function musesHTMLPlayClick() {
-            //child nodes
-            var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes;
-            var playDiv = cn[4];
-            playDiv.onclick();
+            MRP.html.audio.src = MRP.html.src;
+
+            MRP.html.audio.play();
+
+            // detects errors in HTML5 mode
+            MRP.html.audio.addEventListener('error', function failed(e) {
+                var stream = musesPlayer.getNextAvailableStream();
+                MRP.html.audio.src = stream["url"];
+                MRP.html.audio.play();
+            }, true);
         }
 
-        /**
-         * This is a hack to trigger the stop button in HTML5 mode
-         */
         function musesHTMLStopClick() {
-            //child nodes
-            var cn = document.getElementById("MusesRadioPlayer-HTML5-player-1").childNodes;
-            var stopDiv = cn[5];
-            stopDiv.onclick();
+            MRP.html.audio.pause();
         }
 
         function togglePlayStopButton() {
@@ -247,14 +233,5 @@
     </script>
 </div>
 
-<!--
-<div id="custom_muses_play" onclick="musesPlayer.play()">
-    <a href="#">play</a>
-</div>
-<div id="custom_muses_stop" onclick="musesPlayer.stop()">
-    <a href="#">stop</a>
-</div>
--->
-
 </body>
 </html>

airtime_mvc/public/js/airtime/embeddableplayer/mrp.js

@@ -2298,6 +2298,7 @@
         this.ui = new d.UI(this, a);
         a.autoplay && (a = window.navigator.userAgent.toLowerCase(), -1 == a.indexOf("iphone") && -1 == a.indexOf("ipad") && -1 == a.indexOf("ipod") &&
         this.playAudio())
+        n.MRP.html = this;
     };
     d.Muses.__name__ = !0;
     d.Muses.initTimer = function(a) {