yetangitu/ampache
1
0
Fork 0
mirror of https://github.com/Yetangitu/ampache synced 2025-10-03 17:59:21 +02:00
Code Issues Releases Wiki Activity

updated the html5 player to use jquery, i think we are there, still need some more testing.

Browse source
This commit is contained in:
John Moore 2013-07-28 18:51:45 -05:00
parent b4b407e704
commit 501d2bb2c8
4 changed files with 46 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/javascript/base.js
View file

@ -94,12 +94,12 @@ function check_inline_song_edit(type, song) {
} }
} }
// really should be using jquery ui and have something nice looking
function showAddTagDialog(id, type, path) { function showAddTagDialog(id, type, path) {
$('#dialog_tag_item').dialog({ $('#dialog_tag_item').dialog({
modal: true, modal: true,
buttons: [ buttons: [
{ {
title: "Tag",
text: 'ok', text: 'ok',
click: function () { click: function () {
var tagName = $('#dialog_tag_item_tag_name').val(); var tagName = $('#dialog_tag_item_tag_name').val();

146
lib/javascript/html5_player.js
View file

@ -22,7 +22,7 @@ var current_playlist_item = null;
function play_item(event) function play_item(event)
{ {
stop(); op();
current_playlist_item = event.findElement().getStorage().get('playlist_item'); current_playlist_item = event.findElement().getStorage().get('playlist_item');
play(); play();
} }
@ -30,15 +30,15 @@ function adjust_buttons()
{ {
if(!current_playlist_item.player.paused) if(!current_playlist_item.player.paused)
{ {
$('play').addClassName('inactive'); $('#play').addClass('inactive');
$('pause').removeClassName('inactive'); $('#pause').removeClass('inactive');
$('stop').removeClassName('inactive'); $('#stop').removeClass('inactive');
} }
else else
{ {
$('play').removeClassName('inactive'); $('#play').removeClass('inactive');
$('pause').addClassName('inactive'); $('#pause').addClass('inactive');
$('stop').addClassName('inactive'); $('#stop').addClass('inactive');
} }
} }
function stop(event) function stop(event)
@ -47,13 +47,7 @@ function stop(event)
{ {
current_playlist_item.player.pause(); current_playlist_item.player.pause();
current_playlist_item.player.currentTime = 0; current_playlist_item.player.currentTime = 0;
if(current_playlist_item.player.currentTime) current_playlist_item.element.removeClass('playing');
{
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(); adjust_buttons();
} }
} }
@ -69,21 +63,14 @@ function play(event)
{ {
if(current_playlist_item) if(current_playlist_item)
{ {
$('title').update(current_playlist_item.info_url); var info = $(current_playlist_item.info_url).attr('target', '_new')
$('title').select('a')[0].writeAttribute('target', '_new'); $('#title').html(info);
$('album').update(current_playlist_item.f_album_link); $('#album').text(current_playlist_item.album);
//$('album').select('a')[0].writeAttribute('target', '_new'); $('#artist').text(current_playlist_item.author);
$('artist').update(current_playlist_item.author); $('#albumart').html($('<img />').attr('src', current_playlist_item.albumart_url));
//$('artist').select('a')[0].writeAttribute('target', '_new'); $(current_playlist_item.player).attr('preload', 'auto');
$('albumart').update(new Element('img', {src: current_playlist_item.albumart_url}));
dequeue(current_playlist_item.element);
current_playlist_item.player.writeAttribute('preload', 'auto');
current_playlist_item.player.play(); 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) current_playlist_item.element.addClass('playing');
{
$('playlist').scrollTop = current_playlist_item.element.offsetTop - $('playlist').offsetTop;
}
current_playlist_item.element.addClassName('playing');
adjust_buttons(); adjust_buttons();
} }
} }
@ -93,7 +80,6 @@ function next(event)
{ {
stop(); stop();
var next = current_playlist_item.next; var next = current_playlist_item.next;
$$('[data-queue-id=1]').each(function(e) { next=e.getStorage().get('playlist_item') });
current_playlist_item = next; current_playlist_item = next;
play(); play();
} }
@ -115,7 +101,7 @@ function timeupdate(event)
{ {
if(current_playlist_item) if(current_playlist_item)
{ {
$('progress_text').update(seconds_to_string(current_playlist_item.player.currentTime) + "/" + seconds_to_string(current_playlist_item.time)); $('#progress_text').text(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.player.currentTime > current_playlist_item.time / 2)
{ {
if(current_playlist_item.next) if(current_playlist_item.next)
@ -136,8 +122,8 @@ function ended(event)
} }
function search(event) function search(event)
{ {
var search = new RegExp(".*" + event.findElement().value + ".*", "i"); var search = new RegExp(".*" + $('#input_search').text() + ".*", "i");
for(var item = $('playlist').firstDescendant(); item; item = item.next()) for(var item = $('#playlist'); item; item = item.next())
{ {
if(!search.test(item.textContent != undefined ? item.textContent : item.innerText)) if(!search.test(item.textContent != undefined ? item.textContent : item.innerText))
{ {
@ -151,96 +137,50 @@ function search(event)
} }
function clear_search(event) function clear_search(event)
{ {
event.findElement().value = ""; $('#input_search').text('');
search(event); search(event);
} }
function queue(event)
{
var queue_id=0;
if(event.findElement().getAttribute('data-queue-id'))
{
return dequeue(event.findElement());
}
$$('[data-queue-id]').each( $(document).ready(function() {
function(e)
{
if(parseInt(e.getAttribute('data-queue-id')) > queue_id)
{
queue_id = parseInt(e.getAttribute('data-queue-id'));
}
});
event.findElement().setAttribute('data-queue-id', queue_id+1);
}
function dequeue(element)
{
var queue_id=0;
$$('[data-queue-id]').sort(
function(x, y)
{
return parseInt(x.getAttribute('data-queue-id'))-parseInt(y.getAttribute('data-queue-id'));
})
.each(
function(e)
{
if(queue_id)
{
e.setAttribute('data-queue-id', queue_id++);
}
if(e==element)
{
queue_id=parseInt(e.getAttribute('data-queue-id'));
e.removeAttribute('data-queue-id');
}
});
}
document.observe("dom:loaded", function()
{
var last_item = null, first_item = null; var last_item = null, first_item = null;
for(id in playlist_items) for(id in playlist_items)
{ {
var li = new Element('li'); var li = $('<li>');
$('playlist').insert(li); $('#playlist').append(li);
playlist_items[id].play_url += '&transcode_to=' + (Prototype.Browser.IE || Prototype.Browser.WebKit || Prototype.Browser.MobileSafari ? 'mp3' : 'ogg'); playlist_items[id].play_url += '&transcode_to=mp3';// + (Prototype.Browser.IE || Prototype.Browser.WebKit || Prototype.Browser.MobileSafari ? 'mp3' : 'ogg');
li.update(playlist_items[id].title); li.html($('<span>').append(playlist_items[id].title));
playlist_items[id].player = new Element("audio", {preload: Prototype.Browser.IE ? 'auto' : 'none', src : playlist_items[id].play_url}); playlist_items[id].player = $('<audio>').attr('preload', 'none').attr('src', playlist_items[id].play_url)[0]; //new Element("audio", {preload: Prototype.Browser.IE ? 'auto' : 'none', src : playlist_items[id].play_url});
li.insert(playlist_items[id].player); var player = $(playlist_items[id].player);
li.getStorage().set('playlist_item', playlist_items[id]); li.append(playlist_items[id].player);
li.observe('click', play_item); li.data('playlist_item', playlist_items[id]);
li.observe('mousedown', function(event) {if(event.which==2 || event.which==3) queue(event)}); li.click(play_item);
li.setAttribute('data-tooltip', playlist_items[id].album + ' - ' + playlist_items[id].author); li.attr('data-tooltip', playlist_items[id].album + ' - ' + playlist_items[id].author);
playlist_items[id].player.observe('ended', ended); player.on('ended', ended);
playlist_items[id].player.observe('timeupdate', timeupdate); player.on('timeupdate', timeupdate);
playlist_items[id].element = li; playlist_items[id].element = li;
if(last_item) if(last_item)
{ {
last_item.next = playlist_items[id]; last_item.next = playlist_items[id];
} }
playlist_items[id].previous = last_item;
last_item = playlist_items[id];
if(first_item == null) if(first_item == null)
{ {
first_item = playlist_items[id]; first_item = playlist_items[id];
} }
playlist_items[id].previous = last_item;
last_item = playlist_items[id];
} }
if(first_item) if(first_item)
{ {
// first_item.previous = last_item; first_item.previous = last_item;
// last_item.next = first_item; last_item.next = first_item;
current_playlist_item = first_item; current_playlist_item = first_item;
play(); play();
} }
$('stop').observe('click', stop); $('#stop').click(stop);
$('play').observe('click', play); $('#play').click(play);
$('pause').observe('click', pause); $('#pause').click(pause);
$('next').observe('click', next); $('#next').click(next);
$('previous').observe('click', previous); $('#previous').click(previous);
$('input_search').observe('keyup', search); $('#input_search').keyup(search);
$('input_search').observe('html5_player:clear_search', clear_search); $('#input_search').focus(clear_search);
$('input_search').observe('focus', clear_search);
$('clear_search').observe('click', function() {
$('input_search').fire('html5_player:clear_search')
});
}); });

2
templates/show_html5_player.inc.php
View file

@ -30,7 +30,7 @@ header('Expires: ' . gmdate(DATE_RFC1123, time()-1));
<title><?php echo Config::get('site_title'); ?></title> <title><?php echo Config::get('site_title'); ?></title>
<link rel="stylesheet" href="<?php echo Config::get('web_path'); ?>/templates/html5_player.css" type="text/css" media="screen" /> <link rel="stylesheet" href="<?php echo Config::get('web_path'); ?>/templates/html5_player.css" type="text/css" media="screen" />
<?php require_once Config::get('prefix') . '/templates/stylesheets.inc.php'; ?> <?php require_once Config::get('prefix') . '/templates/stylesheets.inc.php'; ?>
<script src="<?php echo Config::get('web_path'); ?>/modules/prototype/prototype.js" language="javascript" type="text/javascript"></script> <script src="<?php echo $web_path; ?>/modules/jquery/jquery-1.9.1.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
var playlist_items={ var playlist_items={
<?php <?php

2
themes/fresh/templates/default.css
View file

@ -523,7 +523,7 @@ table.tabledata tbody td.cel_rating
table.tabledata tbody .cel_tags table.tabledata tbody .cel_tags
{ {
max-width:80px; max-width:250px;
} }
table.tabledata tbody .cel_cover img table.tabledata tbody .cel_cover img