From d1416d8f34a175b44f454a1451b65445fa4264c0 Mon Sep 17 00:00:00 2001
From: SuperBFG7 <daniel@despite.ch>
Date: Tue, 23 Mar 2021 19:25:39 +0100
Subject: [PATCH] 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.
---
 htdocs/index.html | 14 +++++++-------
 htdocs/js/mpd.js  | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index 4c4fc9c..86592e2 100644
--- 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 984c3f8..3fbc71b 100644
--- 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');