From 5e27fd09f15f9c9693d1bc9c89ef1930e4ae4a3e Mon Sep 17 00:00:00 2001
From: Maxwell <37151645+princemaxwell@users.noreply.github.com>
Date: Sun, 28 Jun 2020 23:28:47 +0200
Subject: [PATCH 1/4] Wait until server is running (#1026)

* Update startup-scripts.sh

Adding a while-loop for checking the mopidy/MPD server status.
The startup-script continues when server is up and running.
So, now the startup-sound indicates that the box and all packages are ready to use.

* Update ajax.loadMopidyStatus.php

in the information tab you can still see, the mopidy server status. But this is only the status of the service.
I added seperate informations about service and server.
---
 htdocs/ajax.loadMopidyStatus.php | 7 ++++++-
 scripts/startup-scripts.sh       | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/htdocs/ajax.loadMopidyStatus.php b/htdocs/ajax.loadMopidyStatus.php
index 3ffb3f420..7c740e80d 100755
--- a/htdocs/ajax.loadMopidyStatus.php
+++ b/htdocs/ajax.loadMopidyStatus.php
@@ -1,4 +1,9 @@
 <?php
-$mopidystatus = exec("systemctl status mopidy | grep 'Active: '| sed 's/Active: //g'");
+$mopidyserverstatus = exec("echo -e status\\nclose | nc -w 1 localhost 6600 | grep 'OK MPD'| sed 's/^.*$/ACTIVE/'");
+if ($mopidyserverstatus == "ACTIVE") {
+$mopidystatus = "Mopidy.Server: Connected<br>Mopidy.Service: " . exec("systemctl status mopidy | grep 'Active: '| sed 's/Active: //g'");
+} else {
+$mopidystatus = "Mopidy.Server: Disconnected!<br>Mopidy.Service: " . exec("systemctl status mopidy | grep 'Active: '| sed 's/Active: //g'");
+}
 ?>
           <div class="col-md-6"><?php echo trim($mopidystatus); ?></div>
diff --git a/scripts/startup-scripts.sh b/scripts/startup-scripts.sh
index 43c0020e2..92e37ad5f 100755
--- a/scripts/startup-scripts.sh
+++ b/scripts/startup-scripts.sh
@@ -26,14 +26,17 @@ sudo chmod -R 777 ${AUDIOFOLDERSPATH}
 sudo chmod -R 777 ${PLAYLISTSFOLDERPATH}
 sudo chmod -R 777 $PATHDATA/../shared/shortcuts
 
+#########################################
+# wait until mopidy/MPD server is running
+STATUS=0
+while [ "$STATUS" != "ACTIVE" ]; do STATUS=$(echo -e status\\nclose | nc -w 1 localhost 6600 | grep 'OK MPD'| sed 's/^.*$/ACTIVE/'); done
+
 ####################################
 # check if and set volume on startup
 /home/pi/RPi-Jukebox-RFID/scripts/playout_controls.sh -c=setvolumetostartup
 
 ####################
 # play startup sound
-# after some sleep
-/bin/sleep 2
 /usr/bin/mpg123 /home/pi/RPi-Jukebox-RFID/shared/startupsound.mp3
 
 #######################

From ccbe92c2cc6aa5a99664f8e9469298a93d5a07a2 Mon Sep 17 00:00:00 2001
From: Maxwell <37151645+princemaxwell@users.noreply.github.com>
Date: Sun, 28 Jun 2020 23:29:35 +0200
Subject: [PATCH 2/4] Fix for getting infos from Spotify (now supporting album
 + artist URLs) (#1025)

* Update inc.viewFolderTree.php

The mediatypes "track" and "playlist" were integrated, but "artist" and "album" are missing.
There is no way to get this information from the mopidy.core.api, so we get the infos (including cover) from spotify web UI.

Following informations are written to "title.txt" for the mediatypes:
artist: artistname
album: albumname
track: trackname
playlist: playlistname

* Update inc.viewFolderTree.php

Removed deprecated code
---
 htdocs/inc.viewFolderTree.php | 64 +++++++++++------------------------
 1 file changed, 20 insertions(+), 44 deletions(-)

diff --git a/htdocs/inc.viewFolderTree.php b/htdocs/inc.viewFolderTree.php
index 30478c09c..2ed928ddf 100755
--- a/htdocs/inc.viewFolderTree.php
+++ b/htdocs/inc.viewFolderTree.php
@@ -112,53 +112,29 @@
             $temp['type'] = "spotify";
             $titlefile = $subfolder."/title.txt";
             $coverfile = $subfolder."/cover.jpg";
-
-            // get title from Spotify if wasn't previously stored
-            if (!file_exists($titlefile)) {
-                $uri = file_get_contents($subfolder."/spotify.txt");
-
-                // check for mediatype ("track" / "playlist") because following Mopidy API request needs differing parameters
-                $mediatype = explode(':' , $uri)[1];
-
-                if ($mediatype == "playlist"){
-                    // request media info via Mopidy's API
-                    $method = 'core.playlists.lookup';
-                    $params = '{
-                            "uri": "'.trim($uri).'"
-                        }';
-                    $json = mopidyApiCall($method, $params);
-
-                    $title = $json["result"]["name"];
-
-                } elseif ($mediatype == "track") {
-                    // request media info via Mopidy's API
-                    $method = 'core.library.lookup';
-                    $params = '{
-                            "uris": ["'.trim($uri).'"]
-                        }';
-                    $json = mopidyApiCall($method, $params);
-
-                    $title = $json["result"][trim($uri)][0]["name"];
-                }
-                file_put_contents($titlefile, $title);
+			
+			// this is a new and easier way for loading spotify informations!
+			$uri = file_get_contents($subfolder."/spotify.txt");
+			$url = "https://open.spotify.com/oembed/?url=".trim($uri)."&format=json";
+			
+			if (!file_exists($coverfile)) {
+				$str = file_get_contents($url);
+				$json  = json_decode($str, true);
+
+				$cover = $json['thumbnail_url'];
+				$coverdl = file_get_contents($cover);
+				file_put_contents($coverfile, $coverdl);
 			}
+			
+			if (!file_exists($titlefile)) {
+				$str = file_get_contents($url);
+				$json  = json_decode($str, true);
 
-            // get cover from Spotify if wasn't previously stored
-            if (!file_exists($coverfile)) {
-                $uri = file_get_contents($subfolder."/spotify.txt");
-
-                // request media-related images via Mopidy's API
-                $method = 'core.library.get_images';
-                $params = '{
-                        "uris": ["'.trim($uri).'"]
-                    }';
-                $json = mopidyApiCall($method, $params);
-
-                $coveruri = $json["result"][trim($uri)][0]["uri"];
-                $cover = file_get_contents($coveruri);
-                
-                file_put_contents($coverfile, $cover);
+				$title = $json['title'];
+				file_put_contents($titlefile, $title);
 			}
+			
+			
         } else {
             $temp['type'] = "generic";
         }

From d5db9349357f890bb90f9dc1dcc746e10dc41fa3 Mon Sep 17 00:00:00 2001
From: themorlan <48086551+themorlan@users.noreply.github.com>
Date: Sun, 5 Jul 2020 21:01:31 +0200
Subject: [PATCH 3/4] Fix incorrect ownership of ~/.config/phoniebox (#1035)

The `chown` command in line 61 changes the ownership of the gpio_settings.ini to the correct user. Because the script is run with sudo command root is the of ~/.config/phoniebox  which leads to an error in gpio_control.py. The altered `chown` command leads to the folder and the the .ini to be owned by the correct user.
---
 components/gpio_control/install.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/gpio_control/install.sh b/components/gpio_control/install.sh
index f45137132..7f224fb7b 100755
--- a/components/gpio_control/install.sh
+++ b/components/gpio_control/install.sh
@@ -58,7 +58,7 @@ else
     done
 
 fi
-chown -R ${SUDO_USER}:${SUDO_USER} $FILE
+chown -R ${SUDO_USER}:${SUDO_USER} $USER_HOME/.config/phoniebox/
 
 echo
 echo 'Installing GPIO_Control service, this will require to enter your password up to 3 times to enable the service'

From e42963e6c77dc9b0c96b9b6e50966f315f3e158a Mon Sep 17 00:00:00 2001
From: Maxwell <37151645+princemaxwell@users.noreply.github.com>
Date: Sat, 11 Jul 2020 22:34:01 +0200
Subject: [PATCH 4/4] WebUI enhancement - Add filter option for mediatypes
 (#1028)

* Update inc.processCheckCardEditRegister.php

Create a file, when youtube is selected, needed for filtering

* Update lang-nl-NL.php

filtering

* Update lang-en-UK.php

filtering

* Update lang-de-DE.php

filtering

* Update index.php

filtering

* Update func.php

filtering

* Update inc.viewFolderTree.php

filtering

* Update lang-de-DE.php

* Update lang-en-UK.php

* Update lang-nl-NL.php

* Update index.php
---
 htdocs/func.php                             | 33 +++++++-
 htdocs/inc.processCheckCardEditRegister.php |  4 +
 htdocs/inc.viewFolderTree.php               |  3 +-
 htdocs/index.php                            | 94 ++++++++++++++++++++-
 htdocs/lang/lang-de-DE.php                  | 12 ++-
 htdocs/lang/lang-en-UK.php                  | 12 ++-
 htdocs/lang/lang-nl-NL.php                  | 12 ++-
 7 files changed, 161 insertions(+), 9 deletions(-)

diff --git a/htdocs/func.php b/htdocs/func.php
index 97fd92c7f..709667794 100755
--- a/htdocs/func.php
+++ b/htdocs/func.php
@@ -308,6 +308,29 @@ function index_folders_print($item, $key)
         print '<img class="img-playlist-item-placeholder" src="" alt=""/>';
     }
     */
+	
+	/* filter */
+	if (in_array($contentTree[$key]['path_abs']."/spotify.txt", $contentTree[$key]['files'])) {
+		print "
+      <div class='filterDiv spotify col-md-12'>";
+	  
+	} elseif (in_array($contentTree[$key]['path_abs']."/livestream.txt", $contentTree[$key]['files'])) {
+		print "
+      <div class='filterDiv livestream col-md-12'>";
+
+	} elseif (in_array($contentTree[$key]['path_abs']."/podcast.txt", $contentTree[$key]['files'])) {
+		print "
+      <div class='filterDiv podcast col-md-12'>";
+
+	} elseif (in_array($contentTree[$key]['path_abs']."/youtube.txt", $contentTree[$key]['files'])) {
+		print "
+      <div class='filterDiv youtube col-md-12'>";
+	  
+	} else {
+		print "
+      <div class='filterDiv file col-md-12'>";
+	}
+
     print "
       <div class='panel ".$panelStyle."'>";
 
@@ -332,7 +355,7 @@ function index_folders_print($item, $key)
         print "
               <a onclick='playPlaylist(\"$playlist\", \"true\");' class='btn-panel-big btn-panel-col pb-plist-play' title='Play (sub)folders'><i class='mdi mdi-animation-play-outline'></i></a>";
     }
-	if (!in_array($contentTree[$key]['path_abs']."/livestream.txt", $contentTree[$key]['files']) && !in_array($contentTree[$key]['path_abs']."/spotify.txt", $contentTree[$key]['files']) && !in_array($contentTree[$key]['path_abs']."/podcast.txt", $contentTree[$key]['files']) ) {
+	if (!in_array($contentTree[$key]['path_abs']."/livestream.txt", $contentTree[$key]['files']) && !in_array($contentTree[$key]['path_abs']."/spotify.txt", $contentTree[$key]['files']) && !in_array($contentTree[$key]['path_abs']."/podcast.txt", $contentTree[$key]['files']) && !in_array($contentTree[$key]['path_abs']."/youtube.txt", $contentTree[$key]['files']) ) {
 
 	    print "
 				  <span class='mb-0 playlist_headline' data-toggle='collapse' data-target='#collapse".$id."' aria-expanded='true' aria-controls='collapse".$id."' style='cursor:pointer;' title='Show contents'>";
@@ -355,11 +378,15 @@ function index_folders_print($item, $key)
 		print $contentTree[$key]['basename'];
 		}
 	} elseif (in_array($contentTree[$key]['path_abs']."/livestream.txt", $contentTree[$key]['files'])) {
-		print "<i class='mdi mdi-podcast mdi-36px'></i> ";
+		print "<i class='mdi mdi-radio mdi-36px'></i> ";
 		print $contentTree[$key]['basename'];
 
 	} elseif (in_array($contentTree[$key]['path_abs']."/podcast.txt", $contentTree[$key]['files'])) {
-		print "<i class='mdi mdi-cast mdi-36px'></i> ";
+		print "<i class='mdi mdi-cast-audio mdi-36px'></i> ";
+		print $contentTree[$key]['basename'];
+
+	} elseif (in_array($contentTree[$key]['path_abs']."/youtube.txt", $contentTree[$key]['files'])) {
+		print "<i class='mdi mdi-youtube mdi-36px'></i> ";
 		print $contentTree[$key]['basename'];
 
 	} else {
diff --git a/htdocs/inc.processCheckCardEditRegister.php b/htdocs/inc.processCheckCardEditRegister.php
index b10d56ff6..7d96dcf53 100755
--- a/htdocs/inc.processCheckCardEditRegister.php
+++ b/htdocs/inc.processCheckCardEditRegister.php
@@ -254,6 +254,10 @@ function fillRfidArrAvailWithUsed($rfidAvailArr, $rfidUsedArr=array()) {
                 // New folder is created so we link a RFID to it. Write $post['audiofolderNew'] to cardID file in shortcuts
                 $exec = "rm ".$fileshortcuts."; echo '".$post['audiofolderNew']."' > ".$fileshortcuts."; chmod 777 ".$fileshortcuts;
                 exec($exec);
+				// write $streamfile and make accessible to anyone
+				$ytfile = "youtube.txt";
+				$exec = "echo '' > '".$foldername."/".$ytfile."'; sudo chmod -R 777 '".$foldername."'";
+				exec($exec);
             } else {
                 // link to existing audiofolder
                 $foldername = $Audio_Folders_Path."/".$post['audiofolder'];
diff --git a/htdocs/inc.viewFolderTree.php b/htdocs/inc.viewFolderTree.php
index 2ed928ddf..70e3eb5db 100755
--- a/htdocs/inc.viewFolderTree.php
+++ b/htdocs/inc.viewFolderTree.php
@@ -134,7 +134,6 @@
 				file_put_contents($titlefile, $title);
 			}
 			
-			
         } else {
             $temp['type'] = "generic";
         }
@@ -179,7 +178,7 @@
     //}
 }
 if(count($contentTree) > 0) {   
-    print "\n    <div class='col-md-12'>";
+    //print "\n    <div class='col-md-12'>";
 
     $rootBranch = current($contentTree);
     
diff --git a/htdocs/index.php b/htdocs/index.php
index b42ef0c68..f45ded1e0 100755
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -9,6 +9,45 @@
 html_bootstrap3_createHeader("en","Phoniebox",$conf['base_url']);
 
 ?>
+<style>
+.filterDiv {
+  display: none;
+}
+
+.filtershow {
+  display: block;
+}
+
+.filtercontainer {
+  margin-top: 20px;
+  overflow: hidden;
+}
+
+/* Style the buttons */
+.filterbtn {
+  border: none;
+  outline: none;
+  padding: 12px 16px;
+  margin-bottom: 3px;
+  background-color: #464545;
+  color: white;
+  cursor: pointer;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.filterbtn:hover {
+  background-color: #f1f1f1;
+  color: black;
+}
+
+.filterbtn.active {
+  background-color: #0ce3ac;
+  color: white;
+}
+</style>
 <body>
   <div class="container">
 
@@ -60,7 +99,15 @@
     <div class="row">
       <div class="col-lg-12">
         <h3><?php print $lang['indexAvailAudio']; ?></h3>
-      <div class="row">
+			<div id="myfilterBtnContainer">
+				  <button class="filterbtn active" onclick="filterSelection('all')"> <?php print $lang['filterall']; ?></button>
+				  <button class="filterbtn" onclick="filterSelection('file')"> <?php print $lang['filterfile']; ?></button>
+				  <button class="filterbtn" onclick="filterSelection('livestream')"> <?php print $lang['filterlivestream']; ?></button>
+				  <button class="filterbtn" onclick="filterSelection('podcast')"> <?php print $lang['filterpodcast']; ?></button>
+				  <button class="filterbtn" onclick="filterSelection('spotify')"> <?php print $lang['filterspotify']; ?></button>
+				  <button class="filterbtn" onclick="filterSelection('youtube')"> <?php print $lang['filteryoutube']; ?></button>
+			</div>
+      <div class="filtercontainer row">
 <?php
 
 // read the shortcuts used
@@ -92,6 +139,51 @@
 ?>
 
       </div><!-- / .col-lg-12 -->
+	<script>
+		filterSelection("all")
+		function filterSelection(c) {
+		  var x, i;
+		  x = document.getElementsByClassName("filterDiv");
+		  if (c == "all") c = "";
+		  for (i = 0; i < x.length; i++) {
+			w3RemoveClass(x[i], "filtershow");
+			if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "filtershow");
+		  }
+		}
+
+		function w3AddClass(element, name) {
+		  var i, arr1, arr2;
+		  arr1 = element.className.split(" ");
+		  arr2 = name.split(" ");
+		  for (i = 0; i < arr2.length; i++) {
+			if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
+		  }
+		}
+
+		function w3RemoveClass(element, name) {
+		  var i, arr1, arr2;
+		  arr1 = element.className.split(" ");
+		  arr2 = name.split(" ");
+		  for (i = 0; i < arr2.length; i++) {
+			while (arr1.indexOf(arr2[i]) > -1) {
+			  arr1.splice(arr1.indexOf(arr2[i]), 1);     
+			}
+		  }
+		  element.className = arr1.join(" ");
+		}
+
+		// Add active class to the current button (highlight it)
+		var filterbtnContainer = document.getElementById("myfilterBtnContainer");
+		var btns = filterbtnContainer.getElementsByClassName("filterbtn");
+		for (var i = 0; i < btns.length; i++) {
+		  btns[i].addEventListener("click", function(){
+			var current = document.getElementsByClassName("active");
+			current[0].className = current[0].className.replace(" active", "");
+			this.className += " active";
+		  });
+		}
+	</script>
+	
         <!-- input-group -->          
           <div class="col-md-4 col-sm-6">
             <div class="row" style="margin-bottom:1em;">
diff --git a/htdocs/lang/lang-de-DE.php b/htdocs/lang/lang-de-DE.php
index d7d7d0fbb..42e52a730 100755
--- a/htdocs/lang/lang-de-DE.php
+++ b/htdocs/lang/lang-de-DE.php
@@ -147,7 +147,7 @@
 $lang['cardFormStreamLegend'] = "Stream verlinken / erstellen";
 $lang['cardFormStreamLabel'] = "Stream URL (benötigt immer einen neuen Ordner - s.o.)";
 $lang['cardFormStreamPlaceholderClassic'] = "http(...).mp3 / .m3u / .ogg / .rss / .xml / ...";
-$lang['cardFormStreamPlaceholderPlusSpotify'] = "spotify:(user:username:)album/track/playlist:#### / Livestream: http(....).mp3 / .m3u / .ogg / ....";
+$lang['cardFormStreamPlaceholderPlusSpotify'] = "spotify:album/artist/playlist/track:#### / Livestream: http(....).mp3 / .m3u / .ogg / ....";
 $lang['cardFormStreamHelp'] = "Füge die URL für spotify, Podcast, Webradio, Stream oder andere Online-Medien hinzu";
 $lang['cardFormStreamTypeSelectDefault'] = "Wähle den Typ";
 $lang['cardFormStreamTypeHelp'] = "Wähle die Art des Streams, den du hinzufügen möchtest";
@@ -278,4 +278,14 @@
 $lang['searchExample'] = "z.B. Moonlight";
 $lang['searchSend'] = "Suchen";
 $lang['searchResult'] = "Suchergebnisse:";
+
+/*
+* Filter
+*/
+$lang['filterall'] = "Zeige alle";
+$lang['filterfile'] = "Dateien";
+$lang['filterlivestream'] = "Livestream";
+$lang['filterpodcast'] = "Podcast";
+$lang['filterspotify'] = "Spotify";
+$lang['filteryoutube'] = "YouTube";
 ?>
diff --git a/htdocs/lang/lang-en-UK.php b/htdocs/lang/lang-en-UK.php
index 999180706..e046dfaf6 100755
--- a/htdocs/lang/lang-en-UK.php
+++ b/htdocs/lang/lang-en-UK.php
@@ -147,7 +147,7 @@
 $lang['cardFormStreamLegend'] = "Link Stream";
 $lang['cardFormStreamLabel'] = "Stream URL (always requires new folder above)";
 $lang['cardFormStreamPlaceholderClassic'] = "http(...).mp3 / .m3u / .ogg / .rss / .xml / ...";
-$lang['cardFormStreamPlaceholderPlusSpotify'] = "spotify:(user:username:)album/track/playlist:### / Stream/Podcast like http....mp3 .xml .rss .ogg";
+$lang['cardFormStreamPlaceholderPlusSpotify'] = "spotify:album/artist/playlist/track:### / Stream/Podcast like http....mp3 .xml .rss .ogg";
 $lang['cardFormStreamHelp'] = "Add the URL for spotify, podcast, web radio, stream or other online media";
 $lang['cardFormStreamTypeSelectDefault'] = "Select type";
 $lang['cardFormStreamTypeHelp'] = "Select the type you are adding";
@@ -279,4 +279,14 @@
 $lang['searchExample'] = "z.B. Moonlight";
 $lang['searchSend'] = "Search";
 $lang['searchResult'] = "Search-Results:";
+
+/*
+* Filter
+*/
+$lang['filterall'] = "Show all";
+$lang['filterfile'] = "Files";
+$lang['filterlivestream'] = "Livestream";
+$lang['filterpodcast'] = "Podcast";
+$lang['filterspotify'] = "Spotify";
+$lang['filteryoutube'] = "YouTube";
 ?>
diff --git a/htdocs/lang/lang-nl-NL.php b/htdocs/lang/lang-nl-NL.php
index 87041b66b..776fd9aaa 100755
--- a/htdocs/lang/lang-nl-NL.php
+++ b/htdocs/lang/lang-nl-NL.php
@@ -119,7 +119,7 @@
 $lang['cardFormFolderSelectDefault'] = "Geen (Pulldown om een ​​map te selecteren)";
 $lang['cardFormStreamLabel'] = "b) ... of maak verbinding met de Stream-URL";
 $lang['cardFormStreamPlaceholderClassic'] = "Livestream: http(...).mp3 / .m3u / .ogg / ...";
-$lang['cardFormStreamPlaceholderPlusSpotify'] = "spotify:(user:username:)album/track/playlist:### / Livestream: http(...).mp3 / .m3u / .ogg / ...";
+$lang['cardFormStreamPlaceholderPlusSpotify'] = "spotify:album/artist/playlist/track:### / Livestream: http(...).mp3 / .m3u / .ogg / ...";
 $lang['cardFormStreamHelp'] = "Voeg de URL toe voor spotify, podcast, webradio, stream of andere online media";
 $lang['cardFormStreamTypeSelectDefault'] = "Selecteer type";
 $lang['cardFormStreamTypeHelp'] = "Selecteer het type dat u toevoegt";
@@ -205,5 +205,15 @@
 $lang['searchExample'] = "z.B. Moonlight";
 $lang['searchSend'] = "Zoeken";
 $lang['searchResult'] = "Zoekresultaten:";
+
+/*
+* Filter
+*/
+$lang['filterall'] = "Toon alles";
+$lang['filterfile'] = "Bestanden";
+$lang['filterlivestream'] = "Livestream";
+$lang['filterpodcast'] = "Podcast";
+$lang['filterspotify'] = "Spotify";
+$lang['filteryoutube'] = "YouTube";
 ?>