improved L&F

[radio.git] / html / index.html

diff --git a/html/index.html b/html/index.html
index d54de39..8109c8a 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -11,6 +11,63 @@
                 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
         </script>
 
+        <link href="skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
+        <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
+
+        <script>
+
+        function radioTitle() {
+                console.log("radioTitle");
+                var url = 'http://radio.wpitchoune.net:8080/current.xsl';
+                var mountpoint = '/mp3';
+
+                $.ajax({  type: 'GET',
+                url: url,
+                async: true,
+                jsonpCallback: 'parseMusic',
+                contentType: "application/json",
+                dataType: 'jsonp',
+                success: function (json) {
+                        $('#track-title').text(json[mountpoint].title);
+                }, error: function (e) {    console.log(e.message);
+                }
+                });
+        }
+
+$(document).ready(function(){
+        setTimeout(function () {radioTitle();}, 2000);
+        setInterval(function () {radioTitle();}, 10000);
+
+        var stream = {
+               title: "Radio Proxy",
+               mp3: "http://radio.wpitchoune.net:8080/mp3"
+       };
+
+       $("#jquery_jplayer_1").jPlayer({
+               ready: function (event) {
+                       ready = true;
+                       $(this).jPlayer("setMedia", stream);
+               },
+               pause: function() {
+                       $(this).jPlayer("clearMedia");
+               },
+               error: function(event) {
+                       if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
+                               $(this).jPlayer("setMedia", stream).jPlayer("play");
+                       }
+               },
+               swfPath: "js",
+               supplied: "mp3",
+               preload: "none",
+               wmode: "window",
+               useStateClassSkin: true,
+               autoBlur: false,
+               keyEnabled: true
+       });
+
+});
+        </script>
+
         <title>Proxy Radio</title>
 </head>
 
@@ -24,18 +81,45 @@
         </nav>
 
         <section>
-                <audio controls>
-                        <source src="http://radio.wpitchoune.net:8080/mp3">
-                </audio>
 
-                <p>If the above player does not work you can play directly the
-                        <a href="http://radio.wpitchoune.net:8080/mp3">stream</a>.</p>
 
-                <p>The name of the current song can be read on
-                        <a href="http://radio.wpitchoune.net:8080">the icecast
-                                   page</a>.</p>
-
-                <p>See the list of <a href="last_songs.html">recently played songs</a>.</p>
+<div id="jquery_jplayer_1" class="jp-jplayer"></div>
+<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
+       <div class="jp-type-single">
+               <div class="jp-gui jp-interface">
+                       <div class="jp-controls">
+                               <button class="jp-play" role="button" tabindex="0">play</button>
+                               <button class="jp-stop" role="button" tabindex="0">stop</button>
+                       </div>
+                       <div class="jp-progress">
+                               <div class="jp-seek-bar">
+                                       <div class="jp-play-bar"></div>
+                               </div>
+                       </div>
+                       <div class="jp-volume-controls">
+                               <button class="jp-mute" role="button" tabindex="0">mute</button>
+                               <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
+                               <div class="jp-volume-bar">
+                                       <div class="jp-volume-bar-value"></div>
+                               </div>
+                       </div>
+                       <div class="jp-time-holder">
+                               <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
+                               <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
+                               <div class="jp-toggles">
+                                       <button class="jp-repeat" role="button" tabindex="0">repeat</button>
+                               </div>
+                       </div>
+               </div>
+               <div class="jp-details">
+                       <div id="track-title" class="jp-title" aria-label="title">&nbsp;</div>
+               </div>
+               <div class="jp-no-solution">
+                       <span>Update Required</span>
+                       To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
+               </div>
+       </div>
+</div>
 
                 <p>All songs have been downloaded from the <a href="http://freemusicarchive.org/">Free Music Archive</a> and as far as I know can be shared on this stream. Feel free to send me an email to <a href="mailto:proxyradio@wpitchoune.net">proxyradio@wpitchoune.net</a>                        if you have a concern about a song. Read the list of
                         <a href="songs.html">songs</a> with credits and licensing information. No changes have been made to the songs.
@@ -43,7 +127,9 @@
         </section>
 
         <footer>
-                <p><address><a href="mailto:proxyradio@wpitchoune.net">Proxy Radio</a></address</p>
+                <ul>
+                        <li><a href="mailto:proxyradio@wpitchoune.net">Contact</a></li>
+                </ul>
         </footer>
 </body>