1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<title></title> 7<style> 8html{ 9margin:0 0; 10padding:0px; 11} 12body{ 13display: block; 14overflow: hidden; 15background: #e8e8e8; 16} 17#jp_playlist_1{ 18height:200px; 19overflow:auto; 20} 21</style> 22<script type="text/javascript" src="/smb/js/tools.js"></script> 23<script type="text/javascript" src="/smb/js/jplayer/jquery.jplayer.min.js"></script> 24<script type="text/javascript" src="/smb/js/davclient_tools.js"></script> 25<link rel="stylesheet" href="/smb/css/jplayer.blue.monday.css" type="text/css"> 26<script type="text/javascript"> 27var m = new lang(); 28var g_storage = new myStorage(); 29var g_showAudioList = false; 30var g_jplayer_solution = "html,flash"; 31var g_jplayer_supplied = "mp3"; 32var g_audio_playlist = []; 33var g_current_index = 0; 34 35$(document).ready(function(){ 36 37 var vars = getUrlVars(); 38 var loc_lan = String(window.navigator.userLanguage || window.navigator.language).toLowerCase(); 39 var lan = ( g_storage.get('lan') == undefined ) ? loc_lan : g_storage.get('lan'); 40 m.setLanguage(lan); 41 42 var this_audio = vars["a"]; 43 var audio_list = vars["alist"]; 44 g_current_index = vars["index"]; 45 var generate_sharelink = vars["s"]; 46 47 if(audio_list==undefined) 48 return; 49 50 var this_audio_list = audio_list.split(","); 51 52 var client = new davlib.DavClient(); 53 client.initialize(); 54 55 $('button#cancel').text(m.getString('btn_close')); 56 $('button#playlist').text(m.getString('btn_playlist')); 57 58 var browserVer = navigator.userAgent; 59 60 if( browserVer.indexOf("Chrome") != -1 || 61 browserVer.indexOf("Firefox") != -1 || 62 ( browserVer.indexOf("Safari") != -1 && ( isMacOS() || isWinOS() ) ) ){ 63 g_jplayer_solution = "html,flash"; 64 g_jplayer_supplied = "mp3"; 65 } 66 else if( isIE() || 67 browserVer.indexOf("Opera") != -1 ){ 68 g_jplayer_solution = "flash"; 69 g_jplayer_supplied = "mp3"; 70 } 71 72 var current_query_index = 0; 73 var on_query = false; 74 75 $("#jp_title_1 li").text("Loading..."); 76 $("#playlist").css("visibility","hidden"); 77 78 showHideAudioInterface(false); 79 showHideAudioList(false); 80 81 if(generate_sharelink==1){ 82 var media_hostName = window.location.host; 83 //if(media_hostName.indexOf(":")!=-1) 84 // media_hostName = media_hostName.substring(0, media_hostName.indexOf(":")); 85 //media_hostName = "http://" + media_hostName + ":" + g_storage.get("http_port") + "/"; 86 87 media_hostName = window.location.protocol + "//" + media_hostName + "/"; 88 89 var timer = setInterval(function(){ 90 91 if(on_query==false){ 92 93 if(current_query_index<0||current_query_index>this_audio_list.length-1){ 94 clearInterval(timer); 95 initJPlayer(); 96 return; 97 } 98 99 var this_audio = this_audio_list[current_query_index]; 100 var this_file_name = this_audio.substring( this_audio.lastIndexOf("/")+1, this_audio.length ); 101 var this_url = this_audio.substring(0, this_audio.lastIndexOf('/')); 102 103 on_query = true; 104 client.GSL(this_url, this_url, this_file_name, 0, 0, function(error, content, statusstring){ 105 if(error==200){ 106 var data = parseXml(statusstring); 107 var share_link = $(data).find('sharelink').text(); 108 share_link = media_hostName + share_link; 109 110 on_query = false; 111 112 var obj = []; 113 obj['name'] = mydecodeURI(this_file_name); 114 obj['mp3'] = share_link; 115 g_audio_playlist.push(obj); 116 117 current_query_index++; 118 } 119 }); 120 } 121 }, 100); 122 } 123 else{ 124 for(var i=0; i < this_audio_list.length;i++){ 125 var this_audio = this_audio_list[i]; 126 var this_file_name = this_audio.substring( this_audio.lastIndexOf("/")+1, this_audio.length ); 127 var this_url = this_audio.substring(0, this_audio.lastIndexOf('/')); 128 129 var obj = []; 130 obj['name'] = mydecodeURI(this_file_name); 131 obj['mp3'] = this_audio; 132 g_audio_playlist.push(obj); 133 } 134 135 initJPlayer(); 136 } 137}); 138 139function initJPlayer(){ 140 var Playlist = function(instance, playlist, options) { 141 var self = this; 142 143 this.instance = instance; // String: To associate specific HTML with this playlist 144 this.playlist = playlist; // Array of Objects: The playlist 145 this.options = options; // Object: The jPlayer constructor options for this playlist 146 147 this.current = 0; 148 149 this.cssId = { 150 jPlayer: "jquery_jplayer_", 151 interface: "jp_interface_", 152 playlist: "jp_playlist_", 153 playtitle: "jp_title_" 154 }; 155 this.cssSelector = {}; 156 157 $.each(this.cssId, function(entity, id) { 158 self.cssSelector[entity] = "#" + id + self.instance; 159 }); 160 161 if(!this.options.cssSelectorAncestor) { 162 this.options.cssSelectorAncestor = this.cssSelector.interface; 163 } 164 165 $(this.cssSelector.jPlayer).jPlayer(this.options); 166 167 $(this.cssSelector.interface + " .jp-previous").click(function() { 168 self.playlistPrev(); 169 $(this).blur(); 170 return false; 171 }); 172 173 $(this.cssSelector.interface + " .jp-next").click(function() { 174 self.playlistNext(); 175 $(this).blur(); 176 return false; 177 }); 178 }; 179 180 Playlist.prototype = { 181 displayPlaylist: function() { 182 var self = this; 183 $(this.cssSelector.playlist + " ul").empty(); 184 185 for (i=0; i < this.playlist.length; i++) { 186 var filename = this.playlist[i].name; 187 var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>"; 188 listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ filename +"</a>"; 189 190 // Associate playlist items with their media 191 $(this.cssSelector.playlist + " ul").append(listItem); 192 193 $(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() { 194 var index = $(this).data("index"); 195 if(self.current !== index) { 196 self.playlistChange(index); 197 } 198 else { 199 $(self.cssSelector.jPlayer).jPlayer("play"); 200 } 201 $(this).blur(); 202 return false; 203 }); 204 } 205 }, 206 playlistInit: function(autoplay) { 207 if(autoplay) { 208 this.playlistChange(this.current); 209 } else { 210 this.playlistConfig(this.current); 211 } 212 }, 213 playlistConfig: function(index) { 214 $(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current"); 215 $(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current"); 216 this.current = parseInt(index); 217 218 var filename = this.playlist[this.current]['name']; 219 var full_filename = filename; 220 var ui_width = $(this.cssSelector.playtitle + " li").width(); 221 var cur_width = String(filename).width($(this.cssSelector.playtitle + " li").css('font')); 222 223 if(cur_width>ui_width){ 224 var fileext = getFileExt(filename); 225 var len = filename.length; 226 var new_name = ""; 227 var i=0; 228 for(i=0; i<len; i++){ 229 new_name+=filename[i]; 230 var test_name = new_name + "." + fileext 231 var test_width = String(test_name).width($(this.cssSelector.playtitle + " li").css('font')); 232 if(test_width>ui_width){ 233 break; 234 } 235 } 236 237 filename = filename.substring(0,i-4) + "...." + fileext; 238 } 239 //alert("play "+this.playlist[this.current].mp3); 240 $(this.cssSelector.playtitle + " li").attr("title",full_filename); 241 $(this.cssSelector.playtitle + " li").text(filename); 242 $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); 243 }, 244 playlistChange: function(index) { 245 this.playlistConfig(index); 246 $(this.cssSelector.jPlayer).jPlayer("play"); 247 }, 248 playlistNext: function() { 249 var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0; 250 this.playlistChange(index); 251 }, 252 playlistPrev: function() { 253 var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1; 254 this.playlistChange(index); 255 } 256 }; 257 258 var audioPlaylist = new Playlist("1", g_audio_playlist, { 259 ready: function() { 260 audioPlaylist.displayPlaylist(); 261 audioPlaylist.current = g_current_index; 262 audioPlaylist.playlistInit(true); // Parameter is a boolean for autoplay. 263 264 $("#playlist").css("visibility","visible"); 265 showHideAudioInterface(true); 266 showHideAudioList(false); 267 }, 268 ended: function() { 269 audioPlaylist.playlistNext(); 270 }, 271 play: function() { 272 $(this).jPlayer("pauseOthers"); 273 }, 274 playing: function() { 275 g_storage.set('stopLogoutTimer', "1"); 276 }, 277 pause: function() { 278 g_storage.set('stopLogoutTimer', "0"); 279 }, 280 stop: function(){ 281 g_storage.set('stopLogoutTimer', "0"); 282 }, 283 swfPath: "/smb/js/jplayer/", 284 supplied: g_jplayer_supplied, 285 solution: g_jplayer_solution, 286 wmode: "window", 287 errorAlerts: false, 288 warningAlerts: false, 289 error: function(event){ 290 var type = event.jPlayer.error.type; 291 if(type=="e_no_solution"){ 292 $(".jp-no-solution").html(m.getString("title_install_flash")); 293 $(".jp-no-solution").css("display", "block"); 294 } 295 else if(type=="e_url"){ 296 if(g_audio_playlist.length>1) 297 audioPlaylist.playlistNext(); 298 } 299 } 300 }); 301} 302 303function doClose(e) { 304 $("#jquery_jplayer_1").jPlayer("stop"); 305 $("#jquery_jplayer_1").jPlayer("clearMedia"); 306 parent.closeJqmWindow(0); 307}; 308 309function showHideAudioInterface(bshow){ 310 if(bshow){ 311 $("#jp_interface_1").css("display","block"); 312 } 313 else{ 314 $("#jp_interface_1").css("display","none"); 315 } 316} 317 318function showHideAudioList(bshow){ 319 if(bshow){ 320 $(".jp-playlist").css("display", "block"); 321 parent.resizeJqmWindow(parent.g_modal_window_width, parent.g_modal_window_height+$(".jp-playlist").height()); 322 } 323 else{ 324 $(".jp-playlist").css("display", "none"); 325 parent.resizeJqmWindow(parent.g_modal_window_width, parent.g_modal_window_height); 326 } 327 328 g_showAudioList = bshow; 329} 330 331function doOpenPlayList(){ 332 showHideAudioList(!g_showAudioList); 333} 334 335function doBackgroundPlay(){ 336 parent.doBackgroundPlay(); 337} 338</script> 339</head> 340<body> 341 342<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 343 <tr style='height:80px'> 344 <td> 345 <div id="container"> 346 <div id="jquery_jplayer_1" class="jp-jplayer"></div> 347 <div id="jp_container_1" class="jp-audio"> 348 <div class="jp-type-playlist"> 349 <div id="jp_title_1" class="jp-title"> 350 <ul> 351 <li>Cro Magnon Man</li> 352 </ul> 353 </div> 354 <div id="jp_interface_1" class="jp-gui jp-interface"> 355 <ul class="jp-controls"> 356 <li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li> 357 <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: block; ">play</a></li> 358 <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: block; ">pause</a></li> 359 <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li> 360 <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li> 361 <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li> 362 <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li> 363 </ul> 364 <div class="jp-progress"> 365 <div class="jp-seek-bar" style="width: 100%; "> 366 <div class="jp-play-bar" style="width: 46.700506341691536%; "></div> 367 </div> 368 </div> 369 <div class="jp-volume-bar"> 370 <div class="jp-volume-bar-value" style="width: 31.979694962501526%; "></div> 371 </div> 372 <div class="jp-duration">00:00</div> 373 <div class="jp-split">/</div> 374 <div class="jp-current-time">00:00</div> 375 </div> 376 377 <div id="jp_playlist_1" class="jp-playlist"> 378 <!--<a href="javascript:;" class="jp-show-audio-list"></a>--> 379 <ul></ul> 380 </div> 381 <!-- 382 <div class="jp-no-solution" style="display: none; "> 383 <span>Update Required</span> 384 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 385 </div> 386 --> 387 </div> 388 </div> 389 390 <div class="jp-no-solution" style="display: none; "> 391 <span>Update Required</span> 392 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 393 </div> 394 395 </div> 396 </td> 397 </tr> 398 <tr style='height:10px'></tr> 399 <tr> 400 <td> 401 <div class="table_block_footer" style="text-align:right"> 402 <button id="playlist" class="btnStyle" onClick="doOpenPlayList();">PlayList</button> 403 <button id="cancel" class="btnStyle" onClick="doClose();">Close</button> 404 </div> 405 </td> 406 </tr> 407</table> 408 409</body> 410</html> 411