Added option for automatic playback of mpd stream.

When activated in settings, ympd will atempt to play the mpd stream
(ogg/mp3) locally in the browser whenever mpd is playing.

This allows to run a headless instance on a PC with sound and start/stop
playback also from other instances or mpd clients.
e.g. run ympd with autoplay on your private PC with decent loudspeakers,
    but control it with another instance on your office laptop without
    the need to switch PCs.

diff --git a/htdocs/index.html b/htdocs/index.html
index 4c4fc9cdd5f6ac1481dac8c34c98d92357a5dcec..86592e21b66551d9973c2667ac88bcc75537eb56 100644 (file)
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -281,14 +281,14 @@
                 <input type="text" class="form-control" id="mpdstream" />
               </div>
             </div>
-            <div class="row">
-              <div class="form-group col-md-12">
-                <button type="button" class="btn btn-default" onclick="updateDB();">
-                  <span class="glyphicon glyphicon-refresh"></span> Update DB
-                </button>
-              </div>
-            </div>
           </form>
+          <div class="row">
+            <div class="form-group col-md-12" data-toggle="buttons">
+              <button type="button" class="btn btn-default btn-block" id="btnautoplay">
+                <span class="glyphicon glyphicon-play"></span> Autoplay stream in this browser when mpd is playing
+              </button>
+            </div>
+          </div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 984c3f8d74b5da1b2ab559982adaf7b7861fdae4..3fbc71b2a037324ed18c3b87ba40fc8ac312a8a6 100644 (file)
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -199,6 +199,9 @@ $(document).ready(function(){
         if ($.cookie("notification") === "true")
             $('#btnnotify').addClass("active")
 
+    if ($.cookie("autoplay") === "true")
+        $('#btnautoplay').addClass("active")
+
     document.getElementById('player').addEventListener('stalled', function() {
                                                if ( !document.getElementById('player').paused ) {
                                                        this.pause();
@@ -765,6 +768,9 @@ var updatePlayIcon = function(state)
     } else if(state == 2) { // play
         $("#play-icon").addClass("glyphicon-pause");
         $('#track-icon').addClass("glyphicon-play");
+        if ( ($.cookie("autoplay") === "true") && (player.paused) ) {
+                       clickLocalPlay();
+               }
     } else { // pause
         $("#play-icon").addClass("glyphicon-play");
         $('#track-icon').addClass("glyphicon-pause");
@@ -925,6 +931,15 @@ $('#btnnotify').on('click', function (e) {
     }
 });
 
+$('#btnautoplay').on('click', function (e) {
+    if($.cookie("autoplay") === "true") {
+        $.cookie("autoplay", false);
+    } else {
+        $.cookie("autoplay", true, { expires: 424242 });
+        $('#btnautoplay').addClass("active");
+    }
+});
+
 function getHost() {
     socket.send('MPD_API_GET_MPDHOST');