Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CC-3394: Add play button to timeline table.

Browse source 
- added image information to row in ShowBuilder.php to enable audio preview of shows.
- moved around code so the audio preview functionaly is standalone
- fixed the firefox bug for issue CC-3429
This commit is contained in:
Daniel 2012-03-15 17:56:51 -04:00
parent f399c7adab
commit ae0d3c560c
11 changed files with 977 additions and 759 deletions
Download patch file Download diff file Expand all files Collapse all files

65
airtime_mvc/public/js/airtime/common/common.js
View file

@ -16,6 +16,69 @@ function adjustDateToServerDate(date, serverTimezoneOffset){
/* date object has been shifted to artificial UTC time. Now let's
* shift it to the server's timezone */
return date;
}
/**
*handle to the jplayer window
*/
var _preview_window = null;
/**
*Gets the info from the view when menu action play choosen and opens the jplayer window.
*/
function openAudioPreview(p_event) {
p_event.stopPropagation();
var audioFileID = $(this).attr('audioFile');
var playlistID = $('#pl_id:first').attr('value');
var playlistIndex = $(this).parent().parent().attr('id');
playlistIndex = playlistIndex.substring(4); //remove the spl_
open_playlist_preview(playlistID, playlistIndex);
}
function open_audio_preview(audioFileID, audioFileTitle, audioFileArtist) {
openPreviewWindow('audiopreview/audio-preview/audioFileID/'+audioFileID+'/audioFileArtist/'+audioFileArtist+'/audioFileTitle/'+audioFileTitle);
_preview_window.focus();
}
/**
*Opens a jPlayer window for the specified info, for either an audio file or playlist.
*If audioFile, audioFileTitle, audioFileArtist is supplied the jplayer opens for one file
*Otherwise the playlistID and playlistIndex was supplied and a playlist is played starting with the
*given index.
*/
function open_playlist_preview(p_playlistID, p_playlistIndex) {
if (p_playlistIndex == undefined) //Use a resonable default.
p_playlistIndex = 0;
if (_preview_window != null && !_preview_window.closed)
_preview_window.playAllPlaylist(p_playlistID, p_playlistIndex);
else
openPreviewWindow('audiopreview/playlist-preview/playlistIndex/'+p_playlistIndex+'/playlistID/'+p_playlistID);
_preview_window.focus();
}
/**
*Opens a jPlayer window for the specified info, for either an audio file or playlist.
*If audioFile, audioFileTitle, audioFileArtist is supplied the jplayer opens for one file
*Otherwise the playlistID and playlistIndex was supplied and a playlist is played starting with the
*given index.
*/
function open_show_preview(p_showID, p_showIndex) {
if (_preview_window != null && !_preview_window.closed)
_preview_window.playAllShow(p_showID, p_showIndex);
else
openPreviewWindow('audiopreview/show-preview/showID/'+p_showID+'/showIndex/'+p_showIndex);
_preview_window.focus();
}
function openPreviewWindow(url) {
//$.post(baseUri+'Playlist/audio-preview-player', {fileName: fileName, cueIn: cueIn, cueOut: cueOut, fadeIn: fadeIn, fadeInFileName: fadeInFileName, fadeOut: fadeOut, fadeOutFileName: fadeOutFileName})
_preview_window = window.open(url, 'Audio Player', 'width=450,height=800');
//Set the play button to pause.
//var elemID = "spl_"+elemIndexString;
//$('#'+elemID+' div.list-item-container a span').attr("class", "ui-icon ui-icon-pause");
return false;
}

63
airtime_mvc/public/js/airtime/library/library.js
View file

@ -43,12 +43,12 @@ var AIRTIME = (function(AIRTIME) {
libraryInit = function() {
var oTable,
libContentDiv = $("#library_content");
tableHeight = libContentDiv.height() - 140;
libContentDiv = $("#library_content");
tableHeight = libContentDiv.height() - 140;
oTable = $('#library_display').dataTable( {
//put hidden columns at the top to insure they can never be visible on the table through column reordering.
//put hidden columns at the top to insure they can never be visible on the table through column reordering.
"aoColumns": [
/* ftype */ {"sTitle": "", "mDataProp": "ftype", "bSearchable": false, "bVisible": false},
/* Checkbox */ {"sTitle": "<input type='checkbox' name='pl_cb_all'>", "mDataProp": "checkbox", "bSortable": false, "bSearchable": false, "sWidth": "25px", "sClass": "library_checkbox"},
@ -62,7 +62,7 @@ var AIRTIME = (function(AIRTIME) {
/* Upload Time */ {"sTitle": "Uploaded", "mDataProp": "utime", "sClass": "library_upload_time"},
/* Last Modified */ {"sTitle": "Last Modified", "mDataProp": "mtime", "bVisible": false, "sClass": "library_modified_time"},
/* Track Number */ {"sTitle": "Track", "mDataProp": "track_number", "bSearchable": false, "bVisible": false, "sClass": "library_track", "sWidth": "65px"},
/* Mood */ {"sTitle": "Mood", "mDataProp": "mood", "bSearchable": false, "bVisible": false, "sClass": "library_mood"},
/* Mood */ {"sTitle": "Mood", "mDataProp": "mood", "bSearchable": false, "bVisible": false, "sClass": "library_mood"},
/* BPM */ {"sTitle": "BPM", "mDataProp": "bpm", "bSearchable": false, "bVisible": false, "sClass": "library_bpm"},
/* Composer */ {"sTitle": "Composer", "mDataProp": "composer", "bSearchable": false, "bVisible": false, "sClass": "library_composer"},
/* Website */ {"sTitle": "Website", "mDataProp": "info_url", "bSearchable": false, "bVisible": false, "sClass": "library_url"},
@ -167,9 +167,9 @@ var AIRTIME = (function(AIRTIME) {
$(nRow).find('td.library_type').click(function(){
if (aData.ftype === 'playlist' && aData.length !== '0.0'){
playlistIndex = $(this).parent().attr('id').substring(3); //remove the pl_
open_playlist_preview(aData.audioFile, "", "", playlistIndex, 0);
open_playlist_preview(playlistIndex, 0);
} else if (aData.ftype === 'audioclip') {
open_playlist_preview(aData.audioFile, aData.track_title, aData.artist_name);
open_audio_preview(aData.audioFile, aData.track_title, aData.artist_name);
}
return false;
});
@ -374,9 +374,9 @@ var AIRTIME = (function(AIRTIME) {
callback = function() {
if (data.ftype === 'playlist' && data.length !== '0.0'){
playlistIndex = $(this).parent().attr('id').substring(3); //remove the pl_
open_playlist_preview(data.audioFile, "", "", playlistIndex, 0);
open_playlist_preview(playlistIndex, 0);
} else if (data.ftype === 'audioclip') {
open_playlist_preview(data.audioFile, data.track_title, data.artist_name);
open_audio_preview(data.audioFile, data.track_title, data.artist_name);
}
};
oItems.play.callback = callback;
@ -652,50 +652,3 @@ function addQtipToSCIcons(){
}
});
}
/**
*handle to the jplayer window
*/
var preview_window = null;
/**
*Gets the info from the view when menu action play choosen and opens the jplayer window.
*/
function openAudioPreview(event) {
event.stopPropagation();
var audioFileID = $(this).attr('audioFile');
var playlistID = $('#pl_id:first').attr('value');
var playlistIndex = $(this).parent().parent().attr('id');
playlistIndex = playlistIndex.substring(4); //remove the spl_
open_playlist_preview(audioFileID, "", "", playlistID, playlistIndex);
}
/**
*Opens a jPlayer window for the specified info, for either an audio file or playlist.
*If audioFile, audioFileTitle, audioFileArtist is supplied the jplayer opens for one file
*Otherwise the playlistID and playlistIndex was supplied and a playlist is played starting with the
*given index.
*/
function open_playlist_preview(audioFileID, audioFileTitle, audioFileArtist, playlistID, playlistIndex) {
if (playlistIndex != undefined) {
if (playlistIndex == undefined) //Use a resonable default.
playlistIndex = 0;
url = 'Playlist/playlist-preview/audioFileID/'+audioFileID+'/playlistIndex/'+playlistIndex+'/playlistID/'+playlistID;
} else {
url = 'Playlist/playlist-preview/audioFileID/'+audioFileID+'/audioFileArtist/'+audioFileArtist+'/audioFileTitle/'+audioFileTitle;
}
//$.post(baseUri+'Playlist/audio-preview-player', {fileName: fileName, cueIn: cueIn, cueOut: cueOut, fadeIn: fadeIn, fadeInFileName: fadeInFileName, fadeOut: fadeOut, fadeOutFileName: fadeOutFileName})
if (preview_window == null || preview_window.closed || playlistIndex === undefined){
preview_window = window.open(url, 'Audio Player', 'width=450,height=800');
} else if (!preview_window.closed) {
preview_window.playAll(playlistID, playlistIndex);
}
//Set the play button to pause.
//var elemID = "spl_"+elemIndexString;
//$('#'+elemID+' div.list-item-container a span').attr("class", "ui-icon ui-icon-pause");
preview_window.focus();
return false;
}

1158
airtime_mvc/public/js/airtime/showbuilder/builder.js
View file

File diff suppressed because it is too large Load diff

153
airtime_mvc/public/js/jplayer/preview_jplayer.js
View file

@ -1,27 +1,38 @@
var playlist_jplayer;
var idToPostionLookUp;
var _playlist_jplayer;
var _idToPostionLookUp;
/**
*When the page loads the ready function will get all the data it can from the hidden span elements
*and call one of three functions depending on weather the window was open to play an audio file,
*or a playlist or a show.
*/
$(document).ready(function(){
var audioFileID = $('.audioFileID').text();
var playlistID = $('.playlistID').text();
var playlistIndex = $('.playlistIndex').text();
playlist_jplayer = new jPlayerPlaylist({
_playlist_jplayer = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
},[], //array of songs will be filled with below's json call
{
swfPath: "/js/jplayer",
supplied: "mp3, oga",
//supplied: "mp3,oga",
wmode: "window"
});
$.jPlayer.timeFormat.showHour = true;
if (playlistID != undefined && playlistID !== "")
playAll(playlistID, playlistIndex);
else
var audioFileID = $('.audioFileID').text();
var playlistID = $('.playlistID').text();
var playlistIndex = $('.playlistIndex').text();
var showID = $('.showID').text();
var showIndex = $('.showIndex').text();
if (playlistID != "" && playlistID !== ""){
playAllPlaylist(playlistID, playlistIndex);
}else if (audioFileID != "") {
playOne(audioFileID);
}else if (showID != "") {
playAllShow(showID, showIndex);
}
});
/**
@ -30,67 +41,103 @@ $(document).ready(function(){
* - Update the playlistIndex to the position in the pllist to start playing.
* - Select the element played from and start playing. If playlist is null then start at index 0.
**/
function playAll(playlistID, playlistIndex) {
function playAllPlaylist(p_playlistID, p_playlistIndex) {
var viewsPlaylistID = $('.playlistID').text();
if ( idToPostionLookUp !== undefined && viewsPlaylistID == playlistID ) {
play(playlistIndex);
if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) {
play(p_playlistIndex);
}else {
idToPostionLookUp = Array();
$.getJSON("/playlist/get-playlist/playlistID/"+playlistID, function(data){ // get the JSON array produced by my PHP
var myPlaylist = new Array();
var media;
var index;
for(index in data){
console.log(data[index]);
if (data[index]['mp3'] != undefined){
media = {title: data[index]['title'],
artist: data[index]['artist'],
mp3:"/api/get-media/fileID/"+data[index]['mp3']
};
}else if (data[index]['oga'] != undefined) {
media = {title: data[index]['title'],
artist: data[index]['artist'],
oga:"/api/get-media/fileID/"+data[index]['oga']
};
}
console.log(media);
myPlaylist[index] = media;
idToPostionLookUp[data[index]['id']] = data[index]['position'];
}
playlist_jplayer.setPlaylist(myPlaylist);
playlist_jplayer.option("autoPlay", true);
play(playlistIndex);
});
buildplaylist("/audiopreview/get-playlist/playlistID/"+p_playlistID, p_playlistIndex);
}
}
function play(playlistIndex){
playlistIndex = idToPostionLookUp[playlistIndex];
playlist_jplayer.play(playlistIndex);
/**
* Sets up the show to play.
* checks with the show id given to the show id on the page/view
* if the show id and the page or views show id are the same it means the user clicked another
* file in the same show, so don't refresh the show content tust play the track from the preloaded show.
* if the the ids are different they we'll need to get the show's context so create the uri
* and call the controller.
**/
function playAllShow(p_showID, p_index) {
var viewsShowID = $('.showID').text();
if ( _idToPostionLookUp !== undefined && viewsShowID == p_showID ) {
play(p_index);
}else {
buildplaylist("/audiopreview/get-show/showID/"+p_showID, p_index);
}
}
function playOne(audioFileID) {
/**
* This function will call the AudiopreviewController to get the contents of either a show or playlist
* Looping throught the returned contents and creating media for each track.
*
* Then trigger the jplayer to play the list.
*/
function buildplaylist(p_url, p_playIndex) {
_idToPostionLookUp = Array();
$.getJSON(p_url, function(data){ // get the JSON array produced by my PHP
var myPlaylist = new Array();
var media;
var index;
for(index in data){
if (data[index]['element_mp3'] != undefined){
media = {title: data[index]['element_title'],
artist: data[index]['element_artist'],
mp3:"/api/get-media/fileID/"+data[index]['element_mp3']
};
}else if (data[index]['element_oga'] != undefined) {
media = {title: data[index]['element_title'],
artist: data[index]['element_artist'],
oga:"/api/get-media/fileID/"+data[index]['element_oga']
};
}
myPlaylist[index] = media;
_idToPostionLookUp[data[index]['element_id']] = data[index]['element_position'];
}
_playlist_jplayer.setPlaylist(myPlaylist);
_playlist_jplayer.option("autoPlay", true);
play(p_playIndex);
});
}
/**
*Function simply plays the given index, for playlists index can be different so need to look up the
*right index.
*/
function play(p_playlistIndex){
playlistIndex = _idToPostionLookUp[p_playlistIndex];
//_playlist_jplayer.select(playlistIndex);
_playlist_jplayer.play(playlistIndex);
}
/**
* Playing one audio track occurs from the library. This function will create the media, setup
* jplayer and play the track.
*/
function playOne(p_audioFileID) {
var playlist = new Array();
var fileExtensioin = audioFileID.split('.').pop();
var fileExtensioin = p_audioFileID.split('.').pop();
if (fileExtensioin === 'mp3') {
media = {title: $('.audioFileTitle').text() !== 'null' ?$('.audioFileTitle').text():"",
artist: $('.audioFileArtist').text() !== 'null' ?$('.audioFileArtist').text():"",
mp3:"/api/get-media/fileID/"+audioFileID
mp3:"/api/get-media/fileID/"+p_audioFileID
};
}else if (fileExtensioin === 'ogg' ) {
media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"",
artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():"",
oga:"/api/get-media/fileID/"+audioFileID
oga:"/api/get-media/fileID/"+p_audioFileID
};
}
playlist_jplayer.option("autoPlay", true);
_playlist_jplayer.option("autoPlay", true);
playlist[0] = media;
//playlist_jplayer.setPlaylist(playlist); --if I use this the player will call _init on the setPlaylist and on the ready
playlist_jplayer._initPlaylist(playlist);
playlist_jplayer.play(0);
//_playlist_jplayer.setPlaylist(playlist); --if I use this the player will call _init on the setPlaylist and on the ready
_playlist_jplayer._initPlaylist(playlist);
_playlist_jplayer.play(0);
}

7
airtime_mvc/public/js/jplayer/skin/jplayer.audio-preview.blue.monday.css
View file

@ -105,7 +105,12 @@ span.playlistID {
span.playlistIndex {
display:none;
}
span.showID {
display:none;
}
span.showIndex {
display:none;
}
/* @group CONTROLS */
div.jp-controls-holder {