Add an HTML5 player

Merge request #20.  Basic, not very pretty, but works and, unlike the
Flash player, is maintainable.

4 files changed, 218 insertions, 5 deletions

diff --git a/lib/class/stream.class.php b/lib/class/stream.class.php
index 338898a2..7304891c 100644
--- a/lib/class/stream.class.php
+++ b/lib/class/stream.class.php
@@ -144,8 +144,8 @@ class Stream {
      * This is a rather complex function that starts the transcoding or
      * resampling of a song and returns the opened file handle.
      */
-    public static function start_transcode($song) {
-        $transcode_settings = $song->get_transcode_settings();
+    public static function start_transcode($song, $type = null) {
+        $transcode_settings = $song->get_transcode_settings($type);
         // Bail out early if we're unutterably broken
         if ($transcode_settings == false) {
             debug_event('stream', 'Transcode requested, but get_transcode_settings failed', 2);
diff --git a/lib/class/stream_playlist.class.php b/lib/class/stream_playlist.class.php
index 6d85f8f0..1f8b4b88 100644
--- a/lib/class/stream_playlist.class.php
+++ b/lib/class/stream_playlist.class.php
@@ -160,6 +160,7 @@ class Stream_Playlist {
             case 'democratic':
             case 'localplay':
             case 'xspf_player':
+            case 'html5_player':
                 // These are valid, but witchy
                 $redirect = false;
                 unset($ext);
@@ -396,6 +397,15 @@ class Stream_Playlist {
     } // create_xspf_player
 
     /**
+     * create_html5_player
+     *
+     * Creates an html5 player.
+     */
+    public function create_html5_player() {
+        require Config::get('prefix') . '/templates/create_html5_player.inc.php';       
+    }
+
+    /**
      * create_localplay
      * This calls the Localplay API to add the URLs and then start playback
      */
@@ -450,7 +460,5 @@ class Stream_Playlist {
             echo $url->url . "\n";
         }
     } // create_ram
-
 }
-
 ?>
diff --git a/lib/javascript/html5_player.js b/lib/javascript/html5_player.js
new file mode 100644
index 00000000..4bed561c
--- /dev/null
+++ b/lib/javascript/html5_player.js
@@ -0,0 +1,204 @@
+/* vim:set tabstop=4 softtabstop=4 shiftwidth=4 expandtab: */
+/**
+ *
+ * LICENSE: GNU General Public License, version 2 (GPLv2)
+ * Copyright 2013 Ampache.org
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License v2
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
+ *
+ */
+var current_playlist_item = null;
+
+function play_item(event)
+{
+    stop();
+    current_playlist_item = event.findElement().getStorage().get('playlist_item');
+    play();
+}
+function adjust_buttons()
+{
+    if(!current_playlist_item.player.paused)
+    {
+        $('play').addClassName('inactive');
+        $('pause').removeClassName('inactive');
+        $('stop').removeClassName('inactive');
+    }
+    else
+    {
+        $('play').removeClassName('inactive');
+        $('pause').addClassName('inactive');
+        $('stop').addClassName('inactive');
+    }
+}
+function stop(event)
+{
+    if(current_playlist_item)
+    {
+        current_playlist_item.player.pause();
+        current_playlist_item.player.currentTime = 0;
+        if(current_playlist_item.player.currentTime)
+        {
+            var src=current_playlist_item.player.src;
+            current_playlist_item.player.src=null;
+            current_playlist_item.player.src=src;
+        }
+        current_playlist_item.element.removeClassName('playing');
+        adjust_buttons();
+    }
+}
+function pause(event)
+{
+    if(current_playlist_item)
+    {
+        current_playlist_item.player.pause();
+        adjust_buttons();
+    }
+}
+function play(event)
+{
+    if(current_playlist_item)
+    {
+        $('title').update(current_playlist_item.info_url);
+        $('title').select('a')[0].writeAttribute('target', '_new');
+        $('album').update(current_playlist_item.f_album_link);
+        //$('album').select('a')[0].writeAttribute('target', '_new');
+        $('artist').update(current_playlist_item.author);
+        //$('artist').select('a')[0].writeAttribute('target', '_new');
+$('albumart').update(new Element('img', {src: current_playlist_item.albumart_url}));
+        current_playlist_item.player.writeAttribute('preload', 'auto');
+        current_playlist_item.player.play();
+        if(current_playlist_item.element.offsetTop - $('playlist').offsetTop - $('playlist').scrollTop > $('playlist').measure('height') || current_playlist_item.element.offsetTop - $('playlist').offsetTop - $('playlist').scrollTop < 0)
+        {
+            $('playlist').scrollTop = current_playlist_item.element.offsetTop - $('playlist').offsetTop;
+        }
+        current_playlist_item.element.addClassName('playing');
+        adjust_buttons();
+    }
+}
+function next(event)
+{
+    if(current_playlist_item && current_playlist_item.next)
+    {
+        stop();
+        current_playlist_item = current_playlist_item.next;
+        play();
+    }
+}
+function previous(event)
+{
+    if(current_playlist_item && current_playlist_item.previous)
+    {
+        stop();
+        current_playlist_item = current_playlist_item.previous;
+        play();
+    }
+}
+function seconds_to_string(seconds)
+{
+    return Math.floor(seconds / 60) + ":" + (Math.floor(seconds % 60) < 10 ? '0' : '') + Math.floor(seconds % 60);
+}
+function timeupdate(event)
+{
+    if(current_playlist_item)
+    {
+        $('progress_text').update(seconds_to_string(current_playlist_item.player.currentTime) + "/" + seconds_to_string(current_playlist_item.time));
+        if(current_playlist_item.player.currentTime > current_playlist_item.time / 2)
+        {
+            if(current_playlist_item.next)
+            {
+                current_playlist_item.next.player.writeAttribute('preload', 'auto');
+            }
+        }
+        //fix for chrome where ended is not thrown properly
+        if(current_playlist_item.player.currentTime >= current_playlist_item.time)
+        {
+            ended(event);
+        }
+    }
+}
+function ended(event)
+{
+    if(current_playlist_item && current_playlist_item.next)
+    {
+        stop();
+        current_playlist_item = current_playlist_item.next;
+        play();
+    }
+}
+function search(event)
+{
+    var search = new RegExp(".*" + event.findElement().value + ".*", "i");
+    for(var item = $('playlist').firstDescendant(); item; item = item.next())
+    {
+        if(!search.test(item.textContent != undefined ? item.textContent : item.innerText))
+        {
+            item.hide();
+        }
+        else
+        {
+            item.show();
+        }
+    }
+}
+function clear_search(event)
+{
+    event.findElement().value = "";
+    search(event);
+}
+document.observe("dom:loaded", function()
+{
+    var last_item = null, first_item = null;
+    for(id in playlist_items)
+    {
+        var li = new Element('li');
+        $('playlist').insert(li);
+        playlist_items[id].play_url += '&transcode_to=' + (Prototype.Browser.IE || Prototype.Browser.WebKit || Prototype.Browser.MobileSafari ? 'mp3' : 'ogg');
+        li.update(playlist_items[id].title);
+playlist_items[id].player = new Element("audio", {preload: Prototype.Browser.IE ? 'auto' : 'none', src : playlist_items[id].play_url});
+        li.insert(playlist_items[id].player);
+        li.getStorage().set('playlist_item', playlist_items[id]);
+        li.observe('click', play_item);
+        playlist_items[id].player.observe('ended', ended);
+        playlist_items[id].player.observe('timeupdate', timeupdate);
+        playlist_items[id].element = li;
+        if(last_item)
+        {
+            last_item.next = playlist_items[id];
+        }
+        if(first_item == null)
+        {
+            first_item = playlist_items[id];
+        }
+        playlist_items[id].previous = last_item;
+        last_item = playlist_items[id];
+    }
+    if(first_item)
+    {
+        first_item.previous = last_item;
+        last_item.next = first_item;
+        current_playlist_item = first_item;
+        play();
+    }
+    $('stop').observe('click', stop);
+    $('play').observe('click', play);
+    $('pause').observe('click', pause);
+    $('next').observe('click', next);
+    $('previous').observe('click', previous);
+    $('input_search').observe('keyup', search);
+    $('input_search').observe('html5_player:clear_search', clear_search);
+    $('input_search').observe('focus', clear_search);
+    $('clear_search').observe('click', function() {
+        $('input_search').fire('html5_player:clear_search')
+    });
+});
diff --git a/lib/preferences.php b/lib/preferences.php
index 6fe5c178..eeef5646 100644
--- a/lib/preferences.php
+++ b/lib/preferences.php
@@ -178,6 +178,7 @@ function create_preference_input($name,$value) {
             if ($value == 'localplay') { $is_local = 'selected="selected"'; }
             elseif ($value == 'democratic') { $is_vote = 'selected="selected"'; }
             elseif ($value == 'xspf_player') { $is_xspf_player = 'selected="selected"'; }
+            elseif ($value == 'html5_player') { $is_html5_player = 'selected="selected"'; }
             else { $is_stream = "selected=\"selected\""; }
             echo "<select name=\"$name\">\n";
             echo "\t<option value=\"\">" . T_('None') . "</option>\n";
@@ -191,6 +192,7 @@ function create_preference_input($name,$value) {
                 echo "\t<option value=\"localplay\" $is_local>" . T_('Localplay') . "</option>\n";
             }
             echo "\t<option value=\"xspf_player\" $is_xspf_player>" . T_('Flash Player') . "</option>\n";
+            echo "\t<option value=\"html5_player\" $is_html5_player>" . _('HTML5 Player') . "</option>\n";
             echo "</select>\n";
         break;
         case 'playlist_type':
@@ -210,7 +212,6 @@ function create_preference_input($name,$value) {
             echo '<select name="' . $name . '">' . "\n";
             foreach ($languages as $lang=>$name) {
                 $selected = ($lang == $value) ? 'selected="selected"' : '';
-
                 echo "\t<option value=\"$lang\" " . $selected . ">$name</option>\n";
             } // end foreach
             echo "</select>\n";