1 /** 2 @name UIWidgets.ZUI 3 @class Class to render HTML UI 4 **/ 5 ZUI = Class.extend({ 6 //constructor 7 clearTools: false, 8 clearToolsUpdate: null, 9 uid: null, 10 init: function(params) { 11 this.attributes = params; 12 this.attributes["forceFlash"]=GeneralUtils.getURLParameter("forceFlash"); 13 this.frameId = this.attributes["uiParent"].replace(/#/g, '') + "_inner"; 14 this.title = ""; 15 if (this.attributes["podTitle"]) { 16 this.title = '<div class="zwrtc_pod_title" id="' + this.frameId + '_title">' + this.attributes["podTitle"] + '</div>'; 17 } 18 19 if (this.attributes["widget"] == "phone") { 20 this.phone(); 21 } else if (this.attributes["widget"] == "pod") { 22 this.pod(); 23 } 24 this.zui_resize(); 25 }, 26 pod: function() { 27 var that = this; // this stops the window object being "this" in zui_resize 28 $(this.attributes["uiParent"]).resize(function() { 29 that.zui_resize_pod(); 30 }); 31 $(document).delegate(this.attributes["uiParent"] + ' .ui-resizable-handle', 'mousedown', function() { 32 // if (!that.resizing) 33 // that.zui_start_resize_pod(true); 34 }); 35 $(document).delegate(this.attributes["uiParent"] + ' .ui-resizable-handle', 'mouseout', function() { 36 setTimeout(function() { 37 // if (!that.resizing) 38 // that.zui_stop_resize_pod(true); 39 }, 400); 40 }); 41 $(this.attributes["uiParent"]).html(this.title+'<iframe id="' + this.frameId + '" name="' + this.frameId + '" src="/zapp_loader_multiple.jsp?id=' + this.frameId + '_&zapp_names=' + this.attributes["zapp_names"] + '&tab_name=' + this.attributes["tab_name"] + '&includeShadowbox=true" frameborder="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'); 42 if (that.attributes["draggable"]) 43 $(that.attributes["uiParent"]).draggable( { 44 start: function(){that.zui_start_resize_pod()}, 45 stop: function(){that.zui_stop_resize_pod()} 46 }); 47 that.zui_resize_pod(); 48 if (this.attributes["resizable"]) { 49 $(this.attributes["uiParent"]).resizable({ 50 handles: 'n,s,e,w,ne,nw,se,sw', 51 animate: false, 52 start: function(){that.zui_start_resize_pod()}, 53 stop: function(){that.zui_stop_resize_pod()} 54 }); 55 } 56 }, 57 zui_start_resize_pod: function(skip_set) { 58 if (!skip_set) this.resizing = true; 59 $("#" + this.frameId).css('z-index', '-1'); 60 $("#" + this.frameId).css('position', 'relative'); 61 $(this.attributes["uiParent"]).css('z-index', '100'); 62 }, 63 zui_stop_resize_pod: function(skip_set) { 64 this.resizing = false; 65 $("#" + this.frameId).css('z-index', '0'); 66 $(this.attributes["uiParent"]).css('z-index', '1'); 67 }, 68 zui_resize_pod: function() { 69 if (this.fullScreenStatus()) return; 70 var uiParent = this.attributes["uiParent"]; 71 var winW = $(uiParent).width(); 72 var winH = $(uiParent).height(); 73 var titleH = 0; 74 if ($("#" + this.frameId + "_title").length>0) 75 titleH = $("#" + this.frameId + "_title").outerHeight(); 76 77 $("#" + this.frameId).height(winH - titleH); 78 $("#" + this.frameId).width(winW); 79 }, 80 phone: function() { 81 var that = this; // this stops the window object being "this" in zui_resize 82 that.uid = "Z" + (new Date()).getTime() + "Z" + (CallManager.ZUID++); 83 eval("window." + that.uid + "=that;"); 84 $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function() { 85 that.updateView(that.fullScreenStatus()); 86 }); 87 $(this.attributes["uiParent"]).resize(function() { 88 that.zui_resize() 89 }); 90 CallManager.addListener(CallManager.Event.SET_LV, this, function() { 91 that.zui_resize(); 92 }); 93 CallManager.addListener(CallManager.Event.TIME_ELAPSED, this, function(event) { 94 $("#zwrtc_txtCallDuration").html(event.time); 95 }); 96 var controls = ""; 97 if (this.attributes["showControls"]) { 98 controls = '<div id="zwrtc_controls_outer"><div id="zwrtc_controls" style="display:none;" class="zwrtc_av_controls"> <a id="zwrtc_end" style="display:none;" onclick="window.' + that.uid + '.hangUp()" title="end call" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_hangup32.png"/></a><a id="zwrtc_end_dis" onclick="" title="end call" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_dis" src="/user/images/sdk_hangup32.png"/></a> <a id="micmute" onclick="window.' + that.uid + '.mute()" title="mute mic" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_microphone_on32.png"/></a> <a id="micunmute" onclick="window.' + that.uid + '.unmute()" style="display:none;" title="enable mic" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_pressed" src="/user/images/sdk_microphone_on32.png"/></a> <a id="cammute" onclick="window.' + that.uid + '.cammute()" title="stop camera" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_webcam_on32.png"/></a> <a id="camunmute" style="display:none;" onclick="window.' + that.uid + '.camunmute()" title="start camera" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_pressed" src="/user/images/sdk_webcam_on32.png"/></a> <a id="fullscreen" onclick="window.' + that.uid + '.fs()" title="full screen" href="javascript:void(0);"><img class="zwrtc_toolbar_img" src="/user/images/sdk_fullscreen32.png"/></a> <a id="restore" style="display:none;" onclick="window.' + that.uid + '.unfs()" title="exit fullscreen" href="javascript:void(0);"><img class="zwrtc_toolbar_img zwrtc_toolbar_img_pressed" src="/user/images/sdk_fullscreen32.png"/></a> </div></div>'; 99 } 100 var timer = ""; 101 if (this.attributes["showTimer"] && !CallManager._flashEnabled) { 102 timer = '<span id="zwrtc_txtCallDuration" class="zwrtc_call_duration_span"></span>'; 103 } 104 var status = ""; 105 if (this.attributes["showStatus"] && !CallManager._flashEnabled) { 106 status = '<div id="zwrtc_status" class="zwrtc_av_display"><span class="zwrtc_av_display_p" id="zwrtc_txtCallStatus"></span></div>'; 107 } 108 $(this.attributes["uiParent"]).html(this.title+'<div id="zwrtc_av" class="zwrtc_av_container"><div id="sp_flash_container" style="display:none;" class="fp_allow_deny"><div id="sp_flash"><br><br><H3>For video calling you need the Adobe Flash Player.<br/><br/><a href="http://www.adobe.com/go/getflash" target="new">Get Adobe Flash</a></H3></div></div><audio id="audio_remote" autoplay="true" ></audio> <video class="video" id="zwrtc_video_local" autoplay="true" muted="true"></video> ' + status + timer + '<video class="video" id="zwrtc_video_remote" style="display:none;" autoplay="true" ></video></div>' + controls); 109 110 $("#zwrtc_video_local").mousemove(function() { 111 that.showTools(); 112 that.clearToolsTrigger(); 113 }); 114 $("#zwrtc_video_remote").mousemove(function() { 115 that.showTools(); 116 that.clearToolsTrigger(); 117 }); 118 $("#zwrtc_controls").mouseenter(function() { 119 that.showTools(); 120 that.clearTools = false; 121 }); 122 $("#zwrtc_controls").mouseleave(function() { 123 that.clearToolsTrigger(); 124 }); 125 CallManager.addListener(CallManager.Event.CONNECTED, this, function(event) { 126 $("#zwrtc_end").show(); 127 $("#zwrtc_end_dis").hide(); 128 setTimeout(function(){ 129 that.clearToolsTrigger(); 130 },3000); 131 }); 132 CallManager.addListener(CallManager.Event.INIT, this, function(event) { 133 if (!CallManager.isEstablished()) 134 that.setDisplay("Initializing"); 135 }); 136 CallManager.addListener(CallManager.Event.RINGING, this, function(event) { 137 that.setDisplay("Ringing"); 138 }); 139 CallManager.addListener(CallManager.Event.CONNECTING, this, function(event) { 140 that.setDisplay("Connecting"); 141 }); 142 CallManager.addListener(CallManager.Event.RECONNECTING, this, function(event) { 143 $("#zwrtc_video_remote").hide(); 144 }); 145 CallManager.addListener(CallManager.Event.CONNECTED, this, function(event) { 146 if (!CallManager.isEstablished()) 147 that.setDisplay("Connected"); 148 else 149 that.clearDisplay(1); 150 that.callConnected(); 151 }); 152 153 CallManager.addListener(CallManager.Event.ENDED, this, function(event) { 154 that.displayMSG=true; 155 $("#sp_flash_container").hide(); 156 that.setDisplay("Call Ended"); 157 }); 158 159 ConnectionManager.addListener(ConnectionManager.Event.LOGIN_FAILED, this, function(event) { 160 that.setDisplay("Authentication Failed"); 161 }); 162 163 ConnectionManager.addListener('ZWRTC_MEDIA_ACCESS_FAILED', this, function(event) { 164 that.setDisplay("Failed To Access Camera & Mic"); 165 }); 166 167 ConnectionManager.addListener('FLASH_RV_MOUSE_OVER', this, function(event) { 168 that.showTools(); 169 that.clearToolsTrigger(); 170 }); 171 172 ConnectionManager.addListener('FLASH_RV_MOUSE_OUT', this, function(event) { 173 that.clearToolsTrigger(); 174 }); 175 176 ConnectionManager.addListener('ZWRTC_MEDIA_ACCESS_GRANTED', this, function(event) { 177 //moved draggable here as flash was not getting mouse event, so no allow/deny 178 if (CallManager._flashEnabled) { 179 that.displayMSG=false; 180 } 181 if (that.attributes["draggable"]){ 182 var nv=navigator.appVersion; 183 if(CallManager._flashEnabled && that.attributes["podTitle"] && nv && nv.indexOf("Safari")!=-1){ 184 $(that.attributes["uiParent"]).draggable({handle:$("#"+that.frameId+"_title")[0]}); 185 }else{ 186 $(that.attributes["uiParent"]).draggable(); 187 } 188 } 189 $("body").removeClass("zwrtc_avalert"); 190 that.setDisplay("Ready"); 191 that.showTools(); 192 that.clearToolsTrigger(); 193 that.zui_resize(); 194 }); 195 196 window.onbeforeunload = function() { 197 CallManager.onUnload(); 198 that.hangUp(); 199 } 200 if (this.attributes["allowDeny"]) { 201 $("body").addClass("zwrtc_avalert") 202 that.checkAVInterval = setInterval(that.checkAV, 400); 203 } 204 if (this.attributes["resizable"]) 205 $(this.attributes["uiParent"]).resizable({ 206 handles: 'n,s,e,w,ne,nw,se,sw' 207 }); 208 209 }, 210 hideTools: function() { 211 if (!$("#zwrtc_controls").is(":visible")) return; 212 $("#zwrtc_controls").fadeOut("xslow"); 213 $("#zwrtc_txtCallDuration").fadeOut("xslow"); 214 }, 215 showTools: function() { 216 //if ($("#zwrtc_controls").is(":visible")) return; 217 if (!CallManager._flashEnabled){ 218 $("#zwrtc_controls").fadeIn(); 219 $("#zwrtc_txtCallDuration").fadeIn(); 220 } 221 this.zui_resize(); 222 }, 223 clearToolsTrigger: function() { 224 var that = this; 225 that.clearTools = true; 226 var update = (new Date()).getTime(); 227 that.clearToolsUpdate = update; 228 setTimeout(function() { 229 if (that.clearTools && that.clearToolsUpdate == update) 230 that.hideTools(); 231 }, 1500); 232 }, 233 fullScreenStatus: function() { 234 return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen; 235 }, 236 setAttribute: function(name, value) { 237 this.attributes[name] = value || ""; 238 return this; 239 }, 240 zui_resize: function() { 241 if (this.fullScreenStatus()) return; 242 var uiParent = this.attributes["uiParent"]; 243 var winW = $(uiParent).width(); 244 var winH = $(uiParent).height(); 245 var titleH = 0; 246 if ($("#" + this.frameId + "_title").length>0) 247 titleH = $("#" + this.frameId + "_title").outerHeight(); 248 249 winH=winH-titleH; 250 var winWMargin = 0; 251 var winHMargin = 0; 252 var vW = winW - winWMargin; 253 var vH = winH - winHMargin; 254 var zW = CallManager._videoWidth; 255 var zH = CallManager._videoHeight; 256 if (zW < 0) { 257 zW = 640; 258 zH = 480; 259 } 260 var arS = vW / vH; 261 var arR = zW / zH; 262 // using A:R which will be limiting factor? 263 // assume height 264 zH = vH; 265 zW = zH * arR; 266 if (zW > vW) { 267 zW = vW; 268 zH = vW / arR; 269 } 270 var marginLeft = winWMargin / 2 + (vW - zW) / 2; 271 var marginRight = 10; 272 if (!CallManager.isEstablished()) 273 $("#zwrtc_video_local").width(zW); 274 $("#zwrtc_video_remote").width(zW); 275 $("#zwrtc_video_remote").height(zH); 276 $("#zwrtc_video_remote").css("margin-left", marginLeft + "px"); 277 278 if(zW>zH){ 279 $("#sp_flash_container").height(zH); 280 }else{ 281 $("#sp_flash_container").width(zW); 282 } 283 $("#sp_flash_container").css("margin-left", marginLeft + "px"); 284 285 $("#zwrtc_video_local").css("margin-left", marginLeft + "px"); 286 $("#zwrtc_status").css("margin-left", marginLeft + "px"); 287 $(".zwrtc_call_duration_span").css("margin-right", (marginLeft + marginRight) + "px"); 288 $(".zwrtc_toolbar_img").css("padding",(zW/40)+"px"); 289 if ($("#zwrtc_controls").is(":visible")) { 290 if(CallManager._flashEnabled){ 291 $("#zwrtc_controls_outer").css("top", "12px"); 292 $("#fullscreen").hide(); 293 }else{ 294 $("#zwrtc_controls_outer").css("top", -1 * (titleH+12+($("#zwrtc_controls").height()))+ "px"); 295 } 296 $("#zwrtc_controls_outer").css("margin-left", -1 * ($("#zwrtc_controls").width()/2)+ "px"); 297 } 298 299 this.setLV(CallManager._selfX, CallManager._selfY, CallManager._selfWidth, CallManager._selfHeight, CallManager._videoWidth, CallManager._videoHeight); 300 }, 301 applySizeStyles: function() { 302 }, 303 setLV: function(lx, ly, lw, lh, rw, rh) { 304 if (CallManager._flashEnabled) { 305 ConnectionManager._dispatchEvent("FLASH_SET_LV", { 306 "lx": lx, 307 "ly": ly, 308 "lw": lw, 309 "lh": lh, 310 "vw": rw, 311 "vh": rh 312 }); 313 return; 314 } 315 if (!$("#zwrtc_video_remote").is(":visible")) return; 316 var i = $('#zwrtc_video_remote').width(); 317 //lx=-1; 318 if (lx < 0) { 319 $('#zwrtc_video_local').css("left", "auto"); 320 $('#zwrtc_video_local').css("top", "auto"); 321 $("#zwrtc_video_local").css("margin-left", "0px"); 322 $('#zwrtc_video_local').addClass("zwrtc_mini_lv"); 323 var lvw=i/5; 324 var lvh=lvw/(rw/rh); 325 $('#zwrtc_video_local').css("width", lvw+"px"); 326 $('#zwrtc_video_local').css("height", lvh+"px"); 327 } else { 328 var j = $('#zwrtc_video_remote').height(); 329 var x = Math.ceil((lx * i) / rw); 330 var y = Math.ceil((ly * j) / rh); 331 var w = Math.ceil((lw * i) / rw); 332 var h = Math.ceil((lh * j) / rh); 333 $('#zwrtc_video_local').removeClass("zwrtc_mini_lv"); 334 $('#zwrtc_video_local').css("width", w + "px"); 335 $('#zwrtc_video_local').css("height", h + "px"); 336 $('#zwrtc_video_local').css("position", "absolute"); 337 $('#zwrtc_video_local').css("left", x + "px"); 338 $('#zwrtc_video_local').css("top", y + "px"); 339 var rv_ml = $("#zwrtc_video_remote").css("margin-left").replace(/[^-\d\.]/g, ''); 340 if (this.fullScreenStatus()) { 341 var ml = (screen.width - $("#zwrtc_video_remote").width()) / 2; 342 $("#zwrtc_video_local").css("margin-left", ml + "px"); 343 } else if (rv_ml > -1) { 344 $("#zwrtc_video_local").css("margin-left", rv_ml + "px"); 345 } 346 } 347 }, 348 updateView: function(fullScreen) { 349 if (!fullScreen) { 350 this.goFullScreen(false); 351 $("#zwrtc_av").addClass("zwrtc_av_container"); 352 $("#fullscreen").show(); 353 $("#restore").hide(); 354 } else { 355 $("#zwrtc_av").removeClass("zwrtc_av_container"); 356 $("#zwrtc_av")[0].width = screen.width; 357 $("#zwrtc_av")[0].height = screen.height; 358 $("#zwrtc_video_remote").css("margin-left", "0px"); 359 $("#zwrtc_video_local").css("margin-left", "0px"); 360 if (screen.width > screen.height) { 361 var ht = screen.height; 362 var wd = ht * zwrtc.cam_width / zwrtc.cam_height; 363 $("#zwrtc_video_remote")[0].style.width = wd; 364 $("#zwrtc_video_remote")[0].style.height = ht; 365 } else { 366 var wd = screen.width; 367 var ht = wd * zwrtc.cam_height / zwrtc.cam_width; 368 $("#zwrtc_video_remote")[0].style.width = wd; 369 $("#zwrtc_video_remote")[0].style.height = ht; 370 } 371 this.setLV(CallManager._selfX, CallManager._selfY, CallManager._selfWidth, CallManager._selfHeight, CallManager._videoWidth, CallManager._videoHeight); 372 } 373 }, 374 goFullScreen: function(fs_) { 375 var that = this; 376 if (fs_) { 377 this.setLV(-1, -1, -1, -1); 378 zwrtc.requestFullScreen($("#zwrtc_av")[0]); 379 setTimeout(function() { 380 that.setLV(CallManager._selfX, CallManager._selfY, CallManager._selfWidth, CallManager._selfHeight, CallManager._videoWidth, CallManager._videoHeight); 381 }, 1000); 382 } else { 383 that.zui_resize(); 384 setTimeout(function() { 385 that.zui_resize(); 386 }, 1000); 387 } 388 }, 389 getAttribute: function(name) { 390 return this.attributes[name]; 391 }, 392 mute: function() { 393 $("#micmute").hide(); 394 $("#micunmute").show(); 395 zwrtc.toggleAudioMute(); 396 }, 397 unmute: function() { 398 $("#micmute").show(); 399 $("#micunmute").hide(); 400 zwrtc.toggleAudioMute(); 401 }, 402 cammute: function() { 403 $("#cammute").hide(); 404 $("#zwrtc_video_local").hide(); 405 $("#camunmute").show(); 406 zwrtc.toggleVideoMute(); 407 }, 408 camunmute: function() { 409 $("#zwrtc_video_local").show(); 410 $("#cammute").show(); 411 $("#camunmute").hide(); 412 zwrtc.toggleVideoMute(); 413 }, 414 spkmute: function() { 415 $("#spkmute").hide(); 416 $("#spkunmute").show(); 417 zwrtc.toggleSpkMute(); 418 }, 419 spkunmute: function() { 420 $("#spkmute").show(); 421 $("#spkunmute").hide(); 422 zwrtc.toggleSpkMute(); 423 }, 424 fs: function() { 425 $("#fullscreen").hide(); 426 $("#restore").show(); 427 this.goFullScreen(true); 428 }, 429 unfs: function() { 430 this.goFullScreen(false); 431 }, 432 callConnected: function(evt) { 433 this.startRV(); 434 $("#end").show(); 435 this.clearDisplay(3000); 436 }, 437 startRV: function() { 438 if ($("#zwrtc_video_remote").is(":visible")) return; 439 if(!CallManager._flashEnabled){ 440 $("#zwrtc_video_remote").show(); 441 $("#zwrtc_video_local").show(); 442 $("#zwrtc_controls").show(); 443 //if (this.attributes["video"]) { 444 // $("#zwrtc_video_local").addClass("zwrtc_mini_lv"); 445 // } 446 } 447 this.zui_resize(); 448 }, 449 clearDisplay: function(fadeout) { 450 setTimeout(function() { 451 if (CallManager._flashEnabled) { 452 CallManager.onStatusMsg(""); 453 } else { 454 $("#zwrtc_txtCallStatus").html(""); 455 $("#zwrtc_status").hide(); 456 } 457 }, fadeout); 458 }, 459 setDisplay: function(msg) { 460 if (!this.displayMSG && CallManager._flashEnabled) { 461 $("#zwrtc_status").hide(); 462 CallManager.onStatusMsg(msg); 463 } else { 464 $("#zwrtc_txtCallStatus").html(msg); 465 $("#zwrtc_status").show(); 466 } 467 }, 468 hangUp: function(is_error) { 469 $("#zwrtc_video_remote").hide(); 470 $('#zwrtc_video_local').hide(); 471 $('#zwrtc_controls').hide(); 472 this.setDisplay("Call Ended"); 473 CallManager.endCall(); 474 }, 475 clearCall: function(reason) { 476 this.hangUp(); 477 }, 478 checkAV: function() { 479 if ($("body").hasClass("zwrtc_avalert")) { 480 if ($("body").hasClass("zwrtc_avalert1")) { 481 $("body").addClass("zwrtc_avalert2"); 482 $("body").removeClass("zwrtc_avalert1"); 483 } else { 484 $("body").addClass("zwrtc_avalert1"); 485 $("body").removeClass("zwrtc_avalert2"); 486 } 487 } else { 488 $("body").removeClass("zwrtc_avalert1"); 489 $("body").removeClass("zwrtc_avalert2"); 490 clearInterval(this.checkAVInterval); 491 } 492 }, 493 getLV: function() { 494 return $("#zwrtc_video_local")[0]; 495 }, 496 getRV: function() { 497 var remoteVideoArray = []; 498 remoteVideoArray.push($("#zwrtc_video_remote")[0]); 499 return remoteVideoArray; 500 }, 501 getAudio: function() { 502 return $("#audio_remote")[0]; 503 }, 504 output: function() {} 505 }); 506