scrolling station meta text, autoupdating

CHANGELOG.md

@@ -1,9 +1,11 @@
 ## 0.6.0 – 2017-09-20
 ### Added
 - Display station metadata
-  [#1523](https://github.com/owncloud/mail/pull/1523) @tahaalibra
+  [#22](https://github.com/owncloud/mail/pull/1523) @onny
-- Changelog file
+- Add changelog file
-  [#1523](https://github.com/owncloud/mail/pull/1523) @tahaalibra
+  [#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
 
 ### Changed
 - Minimum server is Nextcloud 10/ownCloud 9.1

css/main.css

@@ -1,22 +1,26 @@
 #playbutton{
-	height:60px;
+	height:50px;
-	width: 60px;
+	width: 50px;
-	margin: 15px;
+	margin: 10px;
 	border: none;
 	background-size: 100%;
 	background-position: center;
-	display: inline;;
+	/* display: inline; */
+	float: left;
 }
 
 #volumeslider{
-	width: 120px;
+	width: 150px;
 	display: inline-block;
-	margin-top: 0px;
+	margin-top: 15px;
-	margin-left: 10px;
+	margin-left: 5px;
 }
 
 #station_metadata{
-	margin: 15px;
+	margin: 5px 20px;
+	padding-left: 5px;
+	white-space:nowrap;
+	overflow:hidden;
 }
 
 .play{background: url('../img/play.png') no-repeat;}

js/main.js

@@ -1,6 +1,23 @@
 $(function(){
 
   searchTimeout = null;
+  var scheduled;
+
+  function isElementOverflowing(element) {
+  	var overflowX = element.offsetWidth < element.scrollWidth,
+  		overflowY = element.offsetHeight < element.scrollHeight;
+
+  	return (overflowX || overflowY);
+  }
+
+  function wrapContentsInMarquee(element) {
+    var marquee = document.createElement('marquee'),
+    contents = element.innerText;
+
+    marquee.innerText = contents;
+    element.innerHTML = '';
+    element.appendChild(marquee);
+  }
 
   /* ==============
   //   EVENTS    //
@@ -9,7 +26,17 @@ $(function(){
   /* Click on a radio station (table entry) and play it */
   $('body').on('click', '.filename', function() {
     var stationid = $(this).parent().attr('data-id');
+    var stationname = $(this).parent().find('.nametext').text();
     action_play(stationid);
+    $('#player').attr('data-id',stationid);
+    $("#station_metadata").html("Playing: "+stationname);
+    var element = document.getElementById('station_metadata');
+    if (isElementOverflowing(element)) {
+      wrapContentsInMarquee(element);
+    };
+    if (!scheduled){
+      schedule_get_metadata(stationid);
+    };
   });
 
 /* Save station to favorites */
@@ -23,7 +50,16 @@ $(function(){
     if ($(this).height() == ($(this).get(0).scrollHeight - $(this).scrollTop())) {
       if(!$(this).data("didfire")) {
         $(this).data("didfire", true);
-        radio_query(1, "");
+        if ($('li.nav-files').hasClass('active')){
+          radio_query(1, "");
+        } else if ($('li.nav-recent').hasClass('active')) {
+          radio_query(2, "");
+        } else if ($('li.nav-favorites').hasClass('active')) {
+          console.log("todo");
+        } else {
+          var query = $('#searchbox').val();
+          radio_query(0, query);
+        };
         var ref = $(this);
         setTimeout(function(){
           ref.data("didfire", false);
@@ -36,10 +72,28 @@ $(function(){
   //   ACTIONS    //
   /===============*/
 
+  function schedule_get_metadata(stationid){
+    scheduled = true;
+    var stationid = $('#player').attr('data-id');
+    req = $.get('https://onny.project-insanity.org/getmetadata/'+stationid, function(data) {
+        var metadata = data['metadata'];
+        if (metadata != $("#station_metadata").text()) {
+          $("#station_metadata").html(metadata);
+          var element = document.getElementById('station_metadata');
+          if (isElementOverflowing(element)) {
+            wrapContentsInMarquee(element);
+          };
+        };
+        setTimeout(function(){schedule_get_metadata(stationid);}, 10000);
+    }).fail(function(){
+      scheduled = false;
+    });
+  };
+
   function action_favorite(stationid){
 
     var removed = false;
-    var stations = []
+    var stations = [];
     var baseUrl = OC.generateUrl('/apps/radio');
 
     $.get(baseUrl + '/stations', function ( data ) {
@@ -76,24 +130,15 @@ $(function(){
   function action_play(stationid){
     $.ajax({
       method: "GET",
-      url: "https://onny.project-insanity.org/getmetadata/"+stationid,
+      url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
       dataType: 'json',
       success: function(data){
-        var title = data['metadata'];
+        var streamurl = data['url'];
-        $("#station_metadata").html(title);
+        $("#player").attr("src", streamurl);
+        $('#player').trigger('play');
+        $('#playbutton').attr("class", "pause");
       }
     });
-      $.ajax({
-        method: "GET",
-        url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
-        dataType: 'json',
-        success: function(data){
-          var sourceUrl = data['url'];
-          $("#player").attr("src", sourceUrl);
-          $('#player').trigger('play');
-          $('#playbutton').attr("class", "pause");
-        }
-      });
   };
 
   function render_result(data){
@@ -113,7 +158,7 @@ $(function(){
 
         $('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
                             <td class="favcolumn">\
-                              <a href="#" class="favpls" onclick="station_fav();">\
+                              <a href="#" class="favpls">\
                                 <span class="icon-stationfav ' + isstarred + '"></span>\
                                 <span class="hidden-visually">Favorite</span>\
                               </a>\
@@ -183,22 +228,25 @@ $(function(){
   };
 
   function switch_menu(type) {
-      $('#app-navigation').find('li').removeClass("active");
+      clearTimeout(searchTimeout);
-      $("tbody > tr").remove();
+      searchTimeout = setTimeout(function(){
-      switch (type) {
+        $('#app-navigation').find('li').removeClass("active");
-        case 0:
+        $("tbody > tr").remove();
-          $('li.nav-files').addClass('active');
+        switch (type) {
-          radio_query(1);
+          case 0:
-          break;
+            $('li.nav-files').addClass('active');
-        case 1:
+            radio_query(1);
-          $('li.nav-recent').addClass('active');
+            break;
-          radio_query(2);
+          case 1:
-          break;
+            $('li.nav-recent').addClass('active');
-        case 2:
+            radio_query(2);
-          $('li.nav-favorites').addClass('active');
+            break;
-          action_load_favorites();
+          case 2:
-          break;
+            $('li.nav-favorites').addClass('active');
-      }
+            action_load_favorites();
+            break;
+        }
+      }, 500);
   }
 
   $('a.nav-icon-files').click(function() {
@@ -217,6 +265,7 @@ $(function(){
     if (query != "") {
       clearTimeout(searchTimeout);
       searchTimeout = setTimeout(function(){
+        $('#app-navigation').find('li').removeClass("active");
         $("tbody > tr").remove();
         radio_query(0, query);
       }, 500);

templates/main.php

@@ -27,7 +27,7 @@
                 <audio id="player" src=""></audio>
                 <button id="playbutton" class="play"></button>
                 <div id="volumeslider"></div>
-                <p id="station_metadata">Test</p>
+                <p id="station_metadata"></p>
             </div>
         </div>
     <div id="app-content">