add loading animation

CHANGELOG.md

@@ -6,6 +6,8 @@
   [#28](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/04b1bbf49c8d7eb95e9e5d08e9e3b4b7cdc7f4ee) @onny
 - Continious scrolling
   [#13](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/c8e86558d0a1ceeea21f801f6e2391ab70046a4e) @onny
+- Loading animation
+  [#25](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/c8e86558d0a1ceeea21f801f6e2391ab70046a4e) @onny
 
 ### Changed
 - Minimum server is Nextcloud 10/ownCloud 9.1
@@ -16,14 +18,8 @@
   [#1585](https://github.com/owncloud/mail/pull/1585) @ChristophWurst
 
 ### Fixed
-- Client error while composing a new message
+- Fix missing background color for first td in table row
-  [#1609](https://github.com/owncloud/mail/pull/1609) @ChristophWurst
+  [#32](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/9e5b7961009ca7842f8a025de59cb3acaae2bea1) @onny
-- Delay app start until page has finished loading
-  [#1634](https://github.com/owncloud/mail/pull/1634) @ChristophWurst
-- Auto-redirection of HTML mail links
-  [#1603](https://github.com/owncloud/mail/pull/1603) @ChristophWurst
-- Update folder counters when reading/deleting messages
-  [#1585](https://github.com/owncloud/mail/pull/1585)
 
 ### Removed
 - Removed old API

css/main.css

@@ -7,8 +7,23 @@
 	background-position: center;
 	/* display: inline; */
 	float: left;
+	-webkit-transition: background-image 0.4s ease-in-out;
+	transition: background-image 0.4s ease-in-out;
 }
 
+.buffering {
+	-webkit-animation:spin 4s linear infinite;
+	-moz-animation:spin 4s linear infinite;
+	animation:spin 4s linear infinite;
+	background: url('../img/wheel.png') no-repeat;
+	-webkit-transition: background-image 0.4s ease-in-out;
+	transition: background-image 0.4s ease-in-out;
+}
+
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
 #volumeslider{
 	width: 150px;
 	display: inline-block;

js/main.js

@@ -1,5 +1,17 @@
 $(function(){
 
+  $(document).ready(function () {
+
+      var vid = document.getElementById("player");
+      vid.onwaiting = function () {
+          $('#playbutton').attr("class", "buffering");
+      };
+       vid.onplaying = function () {
+          $('#playbutton').attr("class", "pause");
+      };
+
+  });
+
   searchTimeout = null;
   var scheduled;
 
@@ -45,7 +57,7 @@ $(function(){
   });
 
 /* Save station to favorites */
-  $('body').on('click', '.favpls', function() {
+  $('body').on('click', '.favorite', function() {
     var stationid = $(this).parent().parent().attr('data-id');
     action_favorite(stationid);
   });
@@ -81,7 +93,7 @@ $(function(){
     scheduled = true;
     var stationid = $('#player').attr('data-id');
     req = $.get('https://onny.project-insanity.org/getmetadata/'+stationid, function(data) {
-        var metadata = data['metadata'];
+        var metadata = data['metadata'].toString();
         if (metadata != $("#station_metadata").text()) {
           $("#station_metadata").html(metadata);
           var element = document.getElementById('station_metadata');
@@ -109,7 +121,7 @@ $(function(){
               url: baseUrl + '/stations/' + data[station]["id"],
               method: 'DELETE'
             }).done(function(){
-              $( "tr[data-id='"+data[station]["stationid"]+"']" ).find('.icon-stationfav').removeClass('starred');
+              $( "tr[data-id='" + stationid + "']" ).find('.icon-stationfav').removeClass('starred');
             });
         };
       };
@@ -141,7 +153,6 @@ $(function(){
         var streamurl = data['url'];
         $("#player").attr("src", streamurl);
         $('#player').trigger('play');
-        $('#playbutton').attr("class", "pause");
       }
     });
   };
@@ -163,7 +174,7 @@ $(function(){
 
         $('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
                             <td class="favcolumn">\
-                              <a href="#" class="favpls">\
+                              <a href="#" class="favorite">\
                                 <span class="icon-stationfav ' + isstarred + '"></span>\
                                 <span class="hidden-visually">Favorite</span>\
                               </a>\
@@ -287,12 +298,8 @@ $(function(){
     var music = document.getElementById('player');
     if (music.paused && $("#player").attr("src") != "") {
       music.play();
-      playbutton.className = "";
-      playbutton.className = "pause";
     } else {
       music.pause();
-      playbutton.className = "";
-      playbutton.className = "play";
     }
   });