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

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

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