Resize player windows to correct dimensions on open

This commit is contained in:
Duncan Sommerville 2015-07-02 16:07:49 -04:00
parent 32f0f7fcec
commit e3101e90b2
2 changed files with 59 additions and 57 deletions

View File

@ -1,13 +1,14 @@
var _playlist_jplayer; var _playlist_jplayer;
var _idToPostionLookUp; var _idToPostionLookUp;
var URL_BAR_HEIGHT = 32;
/** /**
*When the page loads the ready function will get all the data it can from the hidden span elements *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, *and call one of three functions depending on weather the window was open to play an audio file,
*or a playlist or a show. *or a playlist or a show.
*/ */
$(document).ready(function(){ $(document).ready(function(){
$.jPlayer.timeFormat.showHour = true; $.jPlayer.timeFormat.showHour = true;
var audioUri = $('.audioUri').text(); var audioUri = $('.audioUri').text();
@ -57,7 +58,7 @@ $(document).ready(function(){
$("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) { $("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) {
$(this).addClass("ui-state-hover"); $(this).addClass("ui-state-hover");
}); });
$("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) { $("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) {
$(this).removeClass("ui-state-hover"); $(this).removeClass("ui-state-hover");
}); });
@ -65,14 +66,14 @@ $(document).ready(function(){
}); });
/** /**
* Sets up the jPlayerPlaylist to play. * Sets up the jPlayerPlaylist to play.
* - Get the playlist info based on the playlistID give. * - Get the playlist info based on the playlistID give.
* - Update the playlistIndex to the position in the pllist to start playing. * - 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. * - Select the element played from and start playing. If playlist is null then start at index 0.
**/ **/
function playAllPlaylist(p_playlistID, p_playlistIndex) { function playAllPlaylist(p_playlistID, p_playlistIndex) {
var viewsPlaylistID = $('.playlistID').text(); var viewsPlaylistID = $('.playlistID').text();
if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) { if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) {
play(p_playlistIndex); play(p_playlistIndex);
}else { }else {
@ -83,7 +84,7 @@ function playAllPlaylist(p_playlistID, p_playlistIndex) {
function playBlock(p_blockId, p_blockIndex) function playBlock(p_blockId, p_blockIndex)
{ {
var viewsBlockId = $('.blockId').text(); var viewsBlockId = $('.blockId').text();
if ( _idToPostionLookUp !== undefined && viewsBlockId == p_blockId ) { if ( _idToPostionLookUp !== undefined && viewsBlockId == p_blockId ) {
play(p_blockIndex); play(p_blockIndex);
} else { } else {
@ -92,15 +93,15 @@ function playBlock(p_blockId, p_blockIndex)
} }
/** /**
* Sets up the show to play. * Sets up the show to play.
* checks with the show id given to the show id on the page/view * 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 * 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. * 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 * if the the ids are different they we'll need to get the show's context so create the uri
* and call the controller. * and call the controller.
**/ **/
function playAllShow(p_showID, p_index) { function playAllShow(p_showID, p_index) {
var viewsShowID = $('.showID').text(); var viewsShowID = $('.showID').text();
if ( _idToPostionLookUp !== undefined && viewsShowID == p_showID ) { if ( _idToPostionLookUp !== undefined && viewsShowID == p_showID ) {
play(p_index); play(p_index);
@ -110,12 +111,12 @@ function playAllShow(p_showID, p_index) {
} }
/** /**
* This function will call the AudiopreviewController to get the contents of * This function will call the AudiopreviewController to get the contents of
* either a show or playlist Looping throught the returned contents and * either a show or playlist Looping throught the returned contents and
* creating media for each track. * creating media for each track.
* *
* Then trigger the jplayer to play the list. * Then trigger the jplayer to play the list.
*/ */
function buildplaylist(p_url, p_playIndex) { function buildplaylist(p_url, p_playIndex) {
_idToPostionLookUp = Array(); _idToPostionLookUp = Array();
$.getJSON(p_url, function(data){ // get the JSON array produced by my PHP $.getJSON(p_url, function(data){ // get the JSON array produced by my PHP
@ -126,7 +127,7 @@ function buildplaylist(p_url, p_playIndex) {
var skipped = 0; var skipped = 0;
for(index in data) { for(index in data) {
if (data[index]['type'] == 0) { if (data[index]['type'] == 0) {
if (data[index]['element_mp3'] != undefined){ if (data[index]['element_mp3'] != undefined){
media = {title: data[index]['element_title'], media = {title: data[index]['element_title'],
artist: data[index]['element_artist'], artist: data[index]['element_artist'],
@ -152,7 +153,7 @@ function buildplaylist(p_url, p_playIndex) {
console.log("continue"); console.log("continue");
skipped++; skipped++;
continue; continue;
} }
} else if (data[index]['type'] == 1) { } else if (data[index]['type'] == 1) {
var mime = data[index]['mime']; var mime = data[index]['mime'];
if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) { if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) {
@ -163,12 +164,12 @@ function buildplaylist(p_url, p_playIndex) {
key = "m4a"; key = "m4a";
} else if (mime.search(/wav/i) > 0) { } else if (mime.search(/wav/i) > 0) {
key = "wav"; key = "wav";
} }
if (key) { if (key) {
media = {title: data[index]['element_title'], media = {title: data[index]['element_title'],
artist: data[index]['element_artist'] artist: data[index]['element_artist']
}; };
media[key] = data[index]['uri'] media[key] = data[index]['uri']
} }
} }
@ -186,26 +187,19 @@ function buildplaylist(p_url, p_playIndex) {
_playlist_jplayer.setPlaylist(myPlaylist); _playlist_jplayer.setPlaylist(myPlaylist);
_playlist_jplayer.option("autoPlay", true); _playlist_jplayer.option("autoPlay", true);
play(p_playIndex); play(p_playIndex);
var height = Math.min(143 + (26 * total), 400); window.scrollbars = false;
var width = 505;
var container = $("#jp_container_1");
if (height === 400) { // Add 2px to account for borders
window.scrollbars = true; window.resizeTo(container.width() + 2, container.height() + URL_BAR_HEIGHT + 2);
}
else {
//there's no scrollbars so we don't need the window to be as wide.
width = 490;
}
window.resizeTo(width, height);
}); });
} }
/** /**
*Function simply plays the given index, for playlists index can be different so need to look up the *Function simply plays the given index, for playlists index can be different so need to look up the
*right index. *right index.
*/ */
function play(p_playlistIndex){ function play(p_playlistIndex){
playlistIndex = _idToPostionLookUp[p_playlistIndex]; playlistIndex = _idToPostionLookUp[p_playlistIndex];
if(playlistIndex == undefined){ if(playlistIndex == undefined){
@ -216,13 +210,13 @@ function play(p_playlistIndex){
} }
/** /**
* Playing one audio track occurs from the library. This function will create the media, setup * Playing one audio track occurs from the library. This function will create the media, setup
* jplayer and play the track. * jplayer and play the track.
*/ */
function playOne(uri, mime) { function playOne(uri, mime) {
var playlist = new Array(); var playlist = new Array();
var media = null; var media = null;
var key = null; var key = null;
if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) { if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) {
key = "mp3"; key = "mp3";
@ -232,12 +226,12 @@ function playOne(uri, mime) {
key = "m4a"; key = "m4a";
} else if (mime.search(/wav/i) > 0) { } else if (mime.search(/wav/i) > 0) {
key = "wav"; key = "wav";
} }
if (key) { if (key) {
media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"", media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"",
artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():"" artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():""
}; };
media[key] = uri; media[key] = uri;
} }
@ -247,4 +241,8 @@ function playOne(uri, mime) {
_playlist_jplayer.setPlaylist(playlist); _playlist_jplayer.setPlaylist(playlist);
_playlist_jplayer.play(0); _playlist_jplayer.play(0);
} }
var container = $("#jp_container_1");
// Add 2px to account for borders
window.resizeTo(container.width() + 2, container.height() + URL_BAR_HEIGHT + 2);
} }

View File

@ -1,3 +1,6 @@
var previewWidth = 482,
previewHeight = 110;
$(document).ready(function() { $(document).ready(function() {
/* Removed as this is now (hopefully) unnecessary */ /* Removed as this is now (hopefully) unnecessary */
@ -95,7 +98,7 @@ function open_audio_preview(type, id) {
// The reason that we need to encode artist and title string is that // The reason that we need to encode artist and title string is that
// sometime they contain '/' or '\' and apache reject %2f or %5f // sometime they contain '/' or '\' and apache reject %2f or %5f
// so the work around is to encode it twice. // so the work around is to encode it twice.
openPreviewWindow(baseUrl+'audiopreview/audio-preview/audioFileID/'+id+'/type/'+type); openPreviewWindow(baseUrl+'audiopreview/audio-preview/audioFileID/'+id+'/type/'+type, previewWidth, previewHeight);
_preview_window.focus(); _preview_window.focus();
} }
@ -113,7 +116,7 @@ function open_playlist_preview(p_playlistID, p_playlistIndex) {
if (_preview_window != null && !_preview_window.closed) if (_preview_window != null && !_preview_window.closed)
_preview_window.playAllPlaylist(p_playlistID, p_playlistIndex); _preview_window.playAllPlaylist(p_playlistID, p_playlistIndex);
else else
openPreviewWindow(baseUrl+'audiopreview/playlist-preview/playlistIndex/'+p_playlistIndex+'/playlistID/'+p_playlistID); openPreviewWindow(baseUrl+'audiopreview/playlist-preview/playlistIndex/'+p_playlistIndex+'/playlistID/'+p_playlistID, previewWidth, previewHeight);
_preview_window.focus(); _preview_window.focus();
} }
@ -124,7 +127,7 @@ function open_block_preview(p_blockId, p_blockIndex) {
if (_preview_window != null && !_preview_window.closed) if (_preview_window != null && !_preview_window.closed)
_preview_window.playBlock(p_blockId, p_blockIndex); _preview_window.playBlock(p_blockId, p_blockIndex);
else else
openPreviewWindow(baseUrl+'audiopreview/block-preview/blockIndex/'+p_blockIndex+'/blockId/'+p_blockId); openPreviewWindow(baseUrl+'audiopreview/block-preview/blockIndex/'+p_blockIndex+'/blockId/'+p_blockId, previewWidth, previewHeight);
_preview_window.focus(); _preview_window.focus();
} }
@ -138,13 +141,14 @@ function open_show_preview(p_showID, p_showIndex) {
if (_preview_window != null && !_preview_window.closed) if (_preview_window != null && !_preview_window.closed)
_preview_window.playAllShow(p_showID, p_showIndex); _preview_window.playAllShow(p_showID, p_showIndex);
else else
openPreviewWindow(baseUrl+'audiopreview/show-preview/showID/'+p_showID+'/showIndex/'+p_showIndex); openPreviewWindow(baseUrl+'audiopreview/show-preview/showID/'+p_showID+'/showIndex/'+p_showIndex, previewWidth, previewHeight);
_preview_window.focus(); _preview_window.focus();
} }
function openPreviewWindow(url) { function openPreviewWindow(url, w, h) {
var dim = (w && h) ? 'width=' + w + ',height=' + h + ',' : '';
// Hardcoding this here is kinda gross, but the alternatives aren't much better... // Hardcoding this here is kinda gross, but the alternatives aren't much better...
_preview_window = window.open(url, $.i18n._('Audio Player'), 'width=482,height=110,scrollbars=yes'); _preview_window = window.open(url, $.i18n._('Audio Player'), dim + 'scrollbars=yes');
return false; return false;
} }