CC-2430 : Preview tracks in the library + better preview (ability to jump around in clip)

- added accept ranges header to the response to enable seek ahead in the music file.
This commit is contained in:
Daniel 2012-02-27 17:06:34 -05:00
parent b8452928da
commit 7d95e4ffa7
5 changed files with 251 additions and 3 deletions

View File

@ -96,6 +96,37 @@ class ApiController extends Zend_Controller_Action
*/
public function getMediaAction()
{
//Logging::log(print_r($_SERVER, true));
Logging::log($_SERVER['HTTP_RANGE']);
if (isset($_SERVER['HTTP_RANGE'])) {
/**
if (!preg_match('^bytes=\d*-\d*(,\d*-\d*)*$', $_SERVER['HTTP_RANGE'])) {
header('HTTP/1.1 416 Requested Range Not Satisfiable');
header('Content-Range: bytes /' . filelength); // Required in 416.
exit;
}
**/
$ranges = explode(',', substr($_SERVER['HTTP_RANGE'], 6));
foreach ($ranges as $range) {
$parts = explode('-', $range);
$start = $parts[0]; // If this is empty, this should be 0.
$end = $parts[1]; // If this is empty or greater than than filelength - 1, this should be filelength - 1.
//the $end shouldn't be specified.
//if ($start > $end) {
// header('HTTP/1.1 416 Requested Range Not Satisfiable');
// header('Content-Range: bytes */' );//. filelength); // Required in 416.
// exit;
//}
// ...
}
Logging::log("the starting point for the download is $start");
}
//Logging::log(print_r($_REQUEST, true));
//Logging::log("in the get media action!");
global $CC_CONFIG;
// disable the view and the layout
@ -146,10 +177,16 @@ class ApiController extends Zend_Controller_Action
}
$logger->info("Sending $filepath");
header("Content-Length: " . filesize($filepath));
header('Accept-Ranges: bytes');
// !! binary mode !!
$fp = fopen($filepath, 'rb');
if (isset($start) && $start != 0){
Logging::log("updating the start of the file to be sent.");
fseek($fp, $start);
header("Content-Range: bytes $start-".(filesize($filepath)-1).'/'. filesize($filepath));
Logging::log("done");
}
//We can have multiple levels of output buffering. Need to
//keep looping until all have been disabled!!!
//http://www.php.net/manual/en/function.ob-end-flush.php
@ -157,7 +194,7 @@ class ApiController extends Zend_Controller_Action
fpassthru($fp);
fclose($fp);
Logging::log(print_r($this->getResponse(), true));
//make sure to exit here so that no other output is sent.
exit;
} else {
@ -171,6 +208,8 @@ class ApiController extends Zend_Controller_Action
}
header($_SERVER["SERVER_PROTOCOL"]." 404 Not Found");
$logger->info("404 Not Found");
Logging::log(print_r($this->getResponse()));
return;
}

View File

@ -0,0 +1,13 @@
<?php echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Audio Player</title>
<?php echo $this->headScript() ?>
<?php echo $this->headLink() ?>
<?php echo isset($this->google_analytics)?$this->google_analytics:"" ?>
</head>
<body>
<div id="content"><?php echo $this->layout()->content ?></div>
</body>
</html>

View File

@ -0,0 +1,72 @@
var audio_preview_window = null;
function playlistAudioPreviewEditor(filename, elemIndexString){
elemIndex =parseInt(elemIndexString)+1;//increment the index as tags start from 1 not 0
var cueIn = $("dd[id^=spl_cue_in_"+elemIndex+"]").find('span').html();
console.log(cueIn);
var cueOut = $("dd[id^=spl_cue_out_"+elemIndex+"]").find('span').html();
console.log("The cueOut is "+cueOut);
var fadeIn = $("dd[id^=spl_fade_in_"+elemIndex+"]").find('span').html();
if (fadeIn == undefined){ console.log("undefined fadein"); fadeIn = $("dd[id^=spl_fade_in_main]").find('span').html();}
console.log("The fadeIn is "+fadeIn);
var fadeInFileName = "";
if (fadeIn != undefined && parseInt(fadeIn) > 0 ){
//need to get the previous element in the playlist...but don't support previous playlist fading becuase thats not possible.
}
console.log("The fadeInFileName is "+fadeInFileName);
var fadeOut = $("dd[id^=spl_fade_out_"+elemIndex+"]").find('span').html();
if (fadeOut == undefined){ console.log("undefined fadeout"); fadeOut = $("dd[id^=spl_fade_out_main]").find('span').html();}
console.log("The fadeOut is "+fadeOut);
var fadeOutFileName = "";
if (fadeOut != undefined && parseInt(fadeOut) > 0 ){
//need to get the next element in the playlist...but don't support next playlist fading becuase thats not possible.
}
console.log("The fadeOutFileName is "+fadeOutFileName);
//Pop out a play list with cue in and cue out set.
open_player();
//Set the play button to pause.
var elemID = "spl_"+elemIndexString;
$('#'+elemID+' div.list-item-container a span').attr("class", "ui-icon ui-icon-pause");
}
function open_audio_preview(filename, index) {
console.log("hello world 2 "+filename+" help?");
url = 'Playlist/audio-preview-player/filename/'+filename+'/index/'+index;
if (audio_preview_window == null || audio_preview_window.closed){
console.log("opening : "+baseUrl+url);
audio_preview_window = window.open(url, 'Audio Player', 'width=400,height=95');
//audio_preview_window.setTitle('Audio Player');
//$.post(baseUri+'Playlist/audio-preview-player', {fileName: fileName, cueIn: cueIn, cueOut: cueOut, fadeIn: fadeIn, fadeInFileName: fadeInFileName, fadeOut: fadeOut, fadeOutFileName: fadeOutFileName})
/**
$.post(url,
{format: "json", elementFilename: filename, elementIndex: elemIndexString},
function(json){
audio_preview_window.document.open();
audio_preview_window.document.write(json);
audio_preview_window.document.close();
});
**/
} else if (!audio_preview_window.closed) {
console.log("refreshing : "+baseUrl+url);
audio_preview_window.play(filename);
} else {
console.log("something else : "+baseUrl+url);
}
audio_preview_window.focus();
return false;
}

View File

@ -0,0 +1,124 @@
function audioPreview(filename, elemID){
console.log("in the audio preview");
var elems = $('.ui-icon.ui-icon-pause');
elems.attr("class", "ui-icon ui-icon-play");
if ($("#jquery_jplayer_1").data("jPlayer") && $("#jquery_jplayer_1").data("jPlayer").status.paused != true){
$('#jquery_jplayer_1').jPlayer('stop');
return;
}
var ext = getFileExt(filename);
var uri = "/api/get-media/file/" + filename;
var media;
var supplied;
if (ext == "ogg"){
media = {oga:uri};
supplied = "oga";
} else {
media = {mp3:uri};
supplied = "mp3";
}
$("#jquery_jplayer_1").jPlayer("destroy");
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", media).jPlayer("play");
},
swfPath: "/js/jplayer",
supplied: supplied
});
$('#'+elemID+' div.list-item-container a span').attr("class", "ui-icon ui-icon-pause");
}
$(document).ready(function(){
var filename = $(".filename").text();
//var filename = $(".jp_audio_0").attr("src");
play(filename);
});
function play(filename){
console.log("in the play function! "+filename);
var uri = "/api/get-media/file/" + filename+"/api_key/H7CSH1RH1YH2W3KFAKCZ";
var ext = getFileExt(filename);
var media;
var supplied;
if (ext == "ogg"){
media = {oga:uri};
supplied = "oga";
} else {
media = {mp3:uri};
supplied = "mp3";
}
$("#jquery_jplayer_1").jPlayer("destroy");
$.jPlayer.timeFormat.showHour = true;
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", media).jPlayer("play");
},
swfPath: "/js/jplayer",
cssSelectorAncestor: '#jp_container_1',
wmode: "window"
});
/**
$("#jquery_jplayer_1").jPlayer().bind($.jPlayer.event.play, function(event){
console.log("playing xxx");
//console.log(this.htmlElement.media.currentTime)
//$("#jquery_jplayer_1").jPlayer("playHead", event.jPlayer.status.seekPercent);
});
$("#jquery_jplayer_1").jPlayer().bind($.jPlayer.event.seeking, function(event){
console.log("hello 123");
//console.log(this.htmlElement.media.currentTime)
//$("#jquery_jplayer_1").jPlayer("playHead", event.jPlayer.status.seekPercent);
});
$("#jquery_jplayer_1").jPlayer().bind($.jPlayer.event.seeked, function(event){
console.log("hello 456");
//console.log(this.htmlElement.media.currentTime)
//$("#jquery_jplayer_1").jPlayer("playHead", event.jPlayer.status.seekPercent);
});
$("#jquery_jplayer_1").jPlayer().bind($.jPlayer.event.volumechange, function(event){
console.log("hello 666");
//console.log(this.htmlElement.media.currentTime)
//$("#jquery_jplayer_1").jPlayer("playHead", event.jPlayer.status.seekPercent);
});
$(".jp-seek-bar").click(function(){
console.log("seek bar clicked");
console.log($("#currentTime"));
//console.log(this.htmlElement.media.seekable)
//console.log($(".jp-play-bar").attr("style"));
//$("#jquery_jplayer_1").jPlayer("play", 40);
});
$(".jp-seek-bar").click(function(){
console.log("hi");
//console.log(this.htmlElement.media.seekable)
//console.log($(".jp-play-bar").attr("style"));
//$("#jquery_jplayer_1").jPlayer("playHead", "50%");
});
$(".jp-play-bar").click(function(){
console.log("bye");
});
$(".jp-progres").click(function(){
console.log("no");
});
$("#combo-box").change(function(eventObject){
var elem = $("#combo-box option:selected");
setjPlayer(elem.attr("data-url"), elem.attr("data-type"), elem.attr("server-type"));
});
**/
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB