From e3101e90b208f1d55f79bfd1aad9a7ae9e960c15 Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Thu, 2 Jul 2015 16:07:49 -0400 Subject: [PATCH] Resize player windows to correct dimensions on open --- .../airtime/audiopreview/preview_jplayer.js | 100 +++++++++--------- .../public/js/airtime/common/common.js | 16 +-- 2 files changed, 59 insertions(+), 57 deletions(-) diff --git a/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js b/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js index e01c2a2b3..5bbbb8993 100644 --- a/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js +++ b/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js @@ -1,13 +1,14 @@ var _playlist_jplayer; 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 - *and call one of three functions depending on weather the window was open to play an audio file, - *or a playlist or a show. - */ +*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(){ - + $.jPlayer.timeFormat.showHour = true; var audioUri = $('.audioUri').text(); @@ -57,7 +58,7 @@ $(document).ready(function(){ $("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) { $(this).addClass("ui-state-hover"); }); - + $("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) { $(this).removeClass("ui-state-hover"); }); @@ -65,14 +66,14 @@ $(document).ready(function(){ }); /** - * Sets up the jPlayerPlaylist to play. - * - Get the playlist info based on the playlistID give. - * - 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. +* Sets up the jPlayerPlaylist to play. +* - Get the playlist info based on the playlistID give. +* - 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 playAllPlaylist(p_playlistID, p_playlistIndex) { var viewsPlaylistID = $('.playlistID').text(); - + if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) { play(p_playlistIndex); }else { @@ -83,7 +84,7 @@ function playAllPlaylist(p_playlistID, p_playlistIndex) { function playBlock(p_blockId, p_blockIndex) { var viewsBlockId = $('.blockId').text(); - + if ( _idToPostionLookUp !== undefined && viewsBlockId == p_blockId ) { play(p_blockIndex); } else { @@ -92,15 +93,15 @@ function playBlock(p_blockId, p_blockIndex) } /** - * 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. +* 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); @@ -110,12 +111,12 @@ function playAllShow(p_showID, p_index) { } /** - * 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. - */ +* 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 @@ -126,7 +127,7 @@ function buildplaylist(p_url, p_playIndex) { var skipped = 0; for(index in data) { - if (data[index]['type'] == 0) { + if (data[index]['type'] == 0) { if (data[index]['element_mp3'] != undefined){ media = {title: data[index]['element_title'], artist: data[index]['element_artist'], @@ -152,7 +153,7 @@ function buildplaylist(p_url, p_playIndex) { console.log("continue"); skipped++; continue; - } + } } else if (data[index]['type'] == 1) { var mime = data[index]['mime']; if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) { @@ -163,12 +164,12 @@ function buildplaylist(p_url, p_playIndex) { key = "m4a"; } else if (mime.search(/wav/i) > 0) { key = "wav"; - } + } if (key) { media = {title: data[index]['element_title'], artist: data[index]['element_artist'] - }; + }; media[key] = data[index]['uri'] } } @@ -186,26 +187,19 @@ function buildplaylist(p_url, p_playIndex) { _playlist_jplayer.setPlaylist(myPlaylist); _playlist_jplayer.option("autoPlay", true); play(p_playIndex); - - var height = Math.min(143 + (26 * total), 400); - var width = 505; - - if (height === 400) { - window.scrollbars = true; - } - else { - //there's no scrollbars so we don't need the window to be as wide. - width = 490; - } - - window.resizeTo(width, height); + + window.scrollbars = false; + + var container = $("#jp_container_1"); + // Add 2px to account for borders + window.resizeTo(container.width() + 2, container.height() + URL_BAR_HEIGHT + 2); }); } /** - *Function simply plays the given index, for playlists index can be different so need to look up the - *right index. - */ +*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]; 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 - * jplayer and play the track. - */ +* Playing one audio track occurs from the library. This function will create the media, setup +* jplayer and play the track. +*/ function playOne(uri, mime) { var playlist = new Array(); - var media = null; + var media = null; var key = null; if (mime.search(/mp3/i) > 0 || mime.search(/mpeg/i) > 0) { key = "mp3"; @@ -232,12 +226,12 @@ function playOne(uri, mime) { key = "m4a"; } else if (mime.search(/wav/i) > 0) { key = "wav"; - } + } if (key) { media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"", artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():"" - }; + }; media[key] = uri; } @@ -247,4 +241,8 @@ function playOne(uri, mime) { _playlist_jplayer.setPlaylist(playlist); _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); } diff --git a/airtime_mvc/public/js/airtime/common/common.js b/airtime_mvc/public/js/airtime/common/common.js index 33e1fe300..cb1ba1a51 100644 --- a/airtime_mvc/public/js/airtime/common/common.js +++ b/airtime_mvc/public/js/airtime/common/common.js @@ -1,3 +1,6 @@ +var previewWidth = 482, + previewHeight = 110; + $(document).ready(function() { /* 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 // sometime they contain '/' or '\' and apache reject %2f or %5f // 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(); } @@ -113,7 +116,7 @@ function open_playlist_preview(p_playlistID, p_playlistIndex) { if (_preview_window != null && !_preview_window.closed) _preview_window.playAllPlaylist(p_playlistID, p_playlistIndex); 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(); } @@ -124,7 +127,7 @@ function open_block_preview(p_blockId, p_blockIndex) { if (_preview_window != null && !_preview_window.closed) _preview_window.playBlock(p_blockId, p_blockIndex); 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(); } @@ -138,13 +141,14 @@ function open_show_preview(p_showID, p_showIndex) { if (_preview_window != null && !_preview_window.closed) _preview_window.playAllShow(p_showID, p_showIndex); 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(); } -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... - _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; }