updated readme

README.md

@@ -1,6 +1 @@
-* https://doc.owncloud.org/server/9.0/developer_manual/app/tutorial.html
-* https://github.com/owncloud/app-tutorial#tutorial
-* http://127.0.0.1/index.php/settings/apps
-
-* https://mvigil-cs263-technology-project.readthedocs.io/en/latest/apptutorial.html
-* docker run -v /home/onny/projects/owncloud-app-radio:/var/www/html/apps/radio -d -p 80:80 owncloud:latestdocker run -v /home/onny/projects/owncloud-app-radio:/var/www/html/apps/radio -d -p 80:80 owncloud:latest
+This experimental app uses the radio-browser.info api and offers radio stations right in your Nextcloud!

css/main.css

@@ -1,8 +1,15 @@
-body {
+* {
+  box-sizing: border-box;
+  -webkit-box-sizing:border-box;
+  -moz-box-sizing: border-box;
+}
+
+#radiocontainer {
+  width: 100%;
   padding: 20px;
 }
 
-input {
+#radioquery {
   width: 100%;
   margin-bottom: 20px;
 }

js/main.js

@@ -9,14 +9,19 @@ $(window).on('load', function(){
   function show_result(data){
     $("tbody > tr").remove();
     $.each(data, function(i, station) {
-      $('tbody').append('<tr src='+station['url']+'><td width=60px align=center><img width=20px height=20px src=img/fav.png></td><td width=60px align=center><img width=40px height=40px src='+station['favicon']+'></td><td>'+station['name']+'</td><td width=60px align=center><a href="'+station['homepage']+'" target="_blank"><img width=20px height=20px src=img/homepage.png></a></td></tr>');
+      $('tbody').append('<tr src='+station['url']+'>\
+                          <td width=60px align=center><img width=20px height=20px src='+OC.imagePath('radio','fav.png')+'></td>\
+                          <td width=60px align=center><img width=40px height=40px src='+station['favicon']+'></td>\
+                          <td>'+station['name']+'</td>\
+                          <td width=60px align=center><a href="'+station['homepage']+'" target="_blank"><img width=20px height=20px src='+OC.imagePath('radio','homepage.png')+'></a></td>\
+                        </tr>');
     });
   }
 
   function search(query){
     $.ajax({
       method: "POST",
-      url: 'http://www.radio-browser.info/webservice/json/stations/search',
+      url: 'https://www.radio-browser.info/webservice/json/stations/search',
       data: {
         name: query
       },
@@ -25,9 +30,8 @@ $(window).on('load', function(){
     });
   };
 
-  $('form').submit(function() {
-    var query = $('input').val();
+  $('#radiosearch').submit(function() {
+    var query = $('#radioquery').val();
     search(query);
-    return false;
   });
 });

templates/main.php

@@ -3,9 +3,10 @@
   script('radio', 'main');
 ?>
 
-<audio id="player" src="" controls></audio>
-<form>
-  <input placeholder="Search for name" autofocus required></input>
+<div id=radiocontainer>
+
+<form id="radiosearch" action="javascript:void(0);">
+  <input id="radioquery" placeholder="Search for name" autofocus required></input>
 </form>
 
 <table>
@@ -19,4 +20,8 @@
   </tbody>
 </table>
 
+<audio id="player" src="" controls></audio>
+
 <!-- <?php p($l->t('Some Setting'));?>: "<?php p($_['somesetting']); ?>" -->
+
+</div>