Updated presentation_export with new deskshare features
This commit is contained in:
Pedro Beschorner Marin
parent
9646bd4cef
commit
85fdf9c79f
@ -43,17 +43,22 @@ function drawCursor(scaledX, scaledY, img) {
|
||||
var imageX = 0; //imgRect.x;
|
||||
var imageY = 0; //imgRect.y;
|
||||
|
||||
// Important to place the cursor over the deskshare
|
||||
// It should not affect the regular slides
|
||||
var scaledWidthTranslate = widthTranslate * (containerObj.width() / deskshareWidth);
|
||||
var scaledHeightTranslate = heightTranslate * (containerObj.height() / deskshareHeight);
|
||||
|
||||
// the offsets of the container that has the image inside it
|
||||
var containerX = containerObj.offset().left;
|
||||
var containerY = containerObj.offset().top;
|
||||
var containerX = containerObj.offset().left + scaledWidthTranslate;
|
||||
var containerY = containerObj.offset().top + scaledHeightTranslate;
|
||||
|
||||
// calculates the overall offsets of the image in the page
|
||||
var imageOffsetX = containerX + imageX;
|
||||
var imageOffsetY = containerY + imageY;
|
||||
|
||||
// position of the cursor relative to the container
|
||||
var cursorXInImage = scaledX * containerObj.width();
|
||||
var cursorYInImage = scaledY * containerObj.height();
|
||||
var cursorXInImage = scaledX * (containerObj.width() * widthScale);
|
||||
var cursorYInImage = scaledY * (containerObj.height() * heightScale);
|
||||
|
||||
// absolute position of the cursor in the page
|
||||
var cursorLeft = parseInt(imageOffsetX + cursorXInImage, 10);
|
||||
@ -77,10 +82,14 @@ function showCursor(show) {
|
||||
}
|
||||
};
|
||||
|
||||
function setViewBox(val) {
|
||||
if(svgobj.contentDocument) svgfile = svgobj.contentDocument.getElementById("svgfile");
|
||||
else svgfile = svgobj.getSVGDocument('svgfile').getElementById("svgfile");
|
||||
svgfile.setAttribute('viewBox', val);
|
||||
function setViewBox(time) {
|
||||
var vboxVal = getViewboxAtTime(time);
|
||||
if(vboxVal !== undefined) {
|
||||
setTransform(time);
|
||||
if(svgobj.contentDocument) svgfile = svgobj.contentDocument.getElementById("svgfile");
|
||||
else svgfile = svgobj.getSVGDocument('svgfile').getElementById("svgfile");
|
||||
svgfile.setAttribute('viewBox', vboxVal);
|
||||
}
|
||||
}
|
||||
|
||||
function getImageAtTime(time) {
|
||||
@ -99,14 +108,15 @@ function getImageAtTime(time) {
|
||||
function getViewboxAtTime(time) {
|
||||
var curr_t = parseFloat(time);
|
||||
var key;
|
||||
var isDeskshare = mustShowDesktopVideo(time);
|
||||
for (key in vboxValues) {
|
||||
if(vboxValues.hasOwnProperty(key)) {
|
||||
var arry = key.split(",");
|
||||
if(arry[1] == "end") {
|
||||
return vboxValues[key];
|
||||
return isDeskshare ? adaptViewBoxToDeskshare(vboxValues[key]) : vboxValues[key];
|
||||
}
|
||||
else if ((parseFloat(arry[0]) <= curr_t) && (parseFloat(arry[1]) >= curr_t)) {
|
||||
return vboxValues[key];
|
||||
return isDeskshare ? adaptViewBoxToDeskshare(vboxValues[key]) : vboxValues[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -122,6 +132,50 @@ function removeSlideChangeAttribute() {
|
||||
Popcorn('#video').unlisten(Popcorn.play, 'removeSlideChangeAttribute');
|
||||
}
|
||||
|
||||
function mustShowDesktopVideo(time) {
|
||||
var canShow = false;
|
||||
for (var m = 0; m < deskshareTimes.length; m++) {
|
||||
var start_timestamp = deskshareTimes[m][0];
|
||||
var stop_timestamp = deskshareTimes[m][1];
|
||||
|
||||
if(time >= start_timestamp && time <= stop_timestamp)
|
||||
canShow = true;
|
||||
}
|
||||
|
||||
return canShow;
|
||||
}
|
||||
|
||||
function isThereDeskshareVideo() {
|
||||
return deskshareTimes.length > 0;
|
||||
}
|
||||
|
||||
function resyncVideos() {
|
||||
var currentTime = Popcorn('#video').currentTime();
|
||||
var currentDeskshareVideoTime = Popcorn("#deskshare-video").currentTime();
|
||||
if (Math.abs(currentTime - currentDeskshareVideoTime) >= 0.1)
|
||||
Popcorn("#deskshare-video").currentTime(currentTime);
|
||||
}
|
||||
|
||||
function handlePresentationAreaContent(time) {
|
||||
var mustShow = mustShowDesktopVideo(time);
|
||||
if(!sharingDesktop && mustShow) {
|
||||
console.log("Showing deskshare video...");
|
||||
document.getElementById("deskshare-video").style.visibility = "visible";
|
||||
$('#slide').addClass('no-background');
|
||||
sharingDesktop = true;
|
||||
} else if(sharingDesktop && !mustShow) {
|
||||
console.log("Hiding deskshare video...");
|
||||
document.getElementById("deskshare-video").style.visibility = "hidden";
|
||||
$('#slide').removeClass('no-background');
|
||||
sharingDesktop = false;
|
||||
}
|
||||
|
||||
if(isThereDeskshareVideo()) {
|
||||
resyncVideos();
|
||||
resizeDeshareVideo();
|
||||
}
|
||||
}
|
||||
|
||||
// - - - END OF JAVASCRIPT FUNCTIONS - - - //
|
||||
|
||||
|
||||
@ -257,6 +311,24 @@ function runPopcorn() {
|
||||
cursorValues[cursorArray[m].getAttribute("timestamp")] = coords[m].childNodes[0].data;
|
||||
}
|
||||
|
||||
// PROCESS DESKSHARE.XML
|
||||
console.log("** Getting deskshare.xml");
|
||||
xmlhttp.open("GET", deskshare_xml, false);
|
||||
xmlhttp.send();
|
||||
xmlDoc = xmlhttp.responseXML;
|
||||
//getting all the event tags
|
||||
console.log("** Processing deskshare.xml");
|
||||
var deskelements = xmlDoc.getElementsByTagName("recording");
|
||||
var deskshareArray = deskelements[0].getElementsByTagName("event");
|
||||
|
||||
if(deskshareArray != null && deskshareArray.length != 0) {
|
||||
for (var m = 0; m < deskshareArray.length; m++) {
|
||||
var deskTimes = [parseFloat(deskshareArray[m].getAttribute("start_timestamp")),parseFloat(deskshareArray[m].getAttribute("stop_timestamp"))];
|
||||
deskshareTimes[m] = deskTimes;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
svgobj.style.left = document.getElementById("slide").offsetLeft + "px";
|
||||
svgobj.style.top = "0px";
|
||||
@ -406,10 +478,7 @@ function runPopcorn() {
|
||||
var imageWidth = parseInt(thisimg.getAttribute("width"), 10);
|
||||
var imageHeight = parseInt(thisimg.getAttribute("height"), 10);
|
||||
|
||||
var vboxVal = getViewboxAtTime(t);
|
||||
if(vboxVal !== undefined) {
|
||||
setViewBox(vboxVal);
|
||||
}
|
||||
setViewBox(t);
|
||||
|
||||
var cursorVal = getCursorAtTime(t);
|
||||
if (cursorVal != null) {
|
||||
@ -428,11 +497,66 @@ function runPopcorn() {
|
||||
currentImage = thisimg;
|
||||
resizeSlides();
|
||||
}
|
||||
|
||||
handlePresentationAreaContent(t);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Deskshare's whiteboard variables
|
||||
var deskshareWidth = 1280.0;
|
||||
var deskshareHeight = 720.0;
|
||||
var widthScale = 1;
|
||||
var heightScale = 1;
|
||||
var widthTranslate = 0;
|
||||
var heightTranslate = 0;
|
||||
|
||||
function clearTransform() {
|
||||
widthScale = 1;
|
||||
heightScale = 1;
|
||||
widthTranslate = 0;
|
||||
heightTranslate = 0;
|
||||
}
|
||||
|
||||
function setDeskshareScale(viewBox) {
|
||||
widthScale = viewBox[2] / deskshareWidth;
|
||||
heightScale = viewBox[3] / deskshareHeight;
|
||||
}
|
||||
|
||||
function setDeskshareTranslate(viewBox) {
|
||||
widthTranslate = (deskshareWidth - viewBox[2]) / 2;
|
||||
heightTranslate = (deskshareHeight - viewBox[3]) / 2;
|
||||
}
|
||||
|
||||
// Deskshare viewBox has the information to transform the canvas to place it above the video
|
||||
function adaptViewBoxToDeskshare(viewBox) {
|
||||
var vb = viewBox.split(" ");
|
||||
setDeskshareScale(vb);
|
||||
setDeskshareTranslate(vb);
|
||||
vb[0] = 0;
|
||||
vb[1] = 0;
|
||||
vb[2] = deskshareWidth;
|
||||
vb[3] = deskshareHeight;
|
||||
return vb.join(" ");
|
||||
}
|
||||
|
||||
// Transform canvas to fit the different deskshare video sizes
|
||||
function setTransform(time) {
|
||||
if (mustShowDesktopVideo(time)) {
|
||||
var canvasId = "canvas" + current_image.substr(5);
|
||||
var canvas = svgobj.contentDocument ? svgobj.contentDocument.getElementById(canvasId) : svgobj.getSVGDocument('svgfile').getElementById(canvasId);
|
||||
if (canvas !== undefined) {
|
||||
var scale = "scale(" + widthScale.toString() + ", " + heightScale.toString() + ")";
|
||||
var translate = "translate(" + widthTranslate.toString() + ", " + heightTranslate.toString() + ")";
|
||||
var transform = translate + " " + scale;
|
||||
canvas.setAttribute('transform', transform);
|
||||
}
|
||||
} else {
|
||||
clearTransform();
|
||||
}
|
||||
}
|
||||
|
||||
function removeLoadingScreen() {
|
||||
spinner.stop();
|
||||
$("#playback-content").css('visibility','visible');
|
||||
@ -502,6 +626,8 @@ var imageAtTime = {};
|
||||
var slidePlainText = {}; //holds slide plain text for retrieval
|
||||
var cursorStyle;
|
||||
var cursorShownAt = 0;
|
||||
var deskshareTimes = [];
|
||||
var sharingDesktop = false;
|
||||
|
||||
var params = getUrlParameters();
|
||||
var MEETINGID = params.meetingId;
|
||||
@ -512,6 +638,7 @@ var shapes_svg = url + '/shapes.svg';
|
||||
var events_xml = url + '/panzooms.xml';
|
||||
var cursor_xml = url + '/cursor.xml';
|
||||
var metadata_xml = url + '/metadata.xml';
|
||||
var deskshare_xml = url + '/deskshare.xml';
|
||||
|
||||
var firstLoad = true;
|
||||
var svjobjLoaded = false;
|
||||
@ -578,6 +705,7 @@ var currentImage;
|
||||
window.onresize = function(event) {
|
||||
showCursor(false);
|
||||
resizeSlides();
|
||||
resizeDeshareVideo();
|
||||
};
|
||||
|
||||
// Resize the container that has the slides (and whiteboard) to be the maximum
|
||||
@ -605,3 +733,19 @@ var resizeSlides = function() {
|
||||
$slide.css("max-height", height);
|
||||
}
|
||||
};
|
||||
|
||||
var resizeDeshareVideo = function() {
|
||||
if (isThereDeskshareVideo()) {
|
||||
var $deskhareVideo = $("#deskshare-video");
|
||||
|
||||
var videoWidth = parseInt(document.getElementById("deskshare-video").videoWidth, 10);
|
||||
var videoHeight = parseInt(document.getElementById("deskshare-video").videoHeight, 10);
|
||||
|
||||
var aspectRatio = videoWidth/videoHeight;
|
||||
var max = aspectRatio * $deskhareVideo.parent().outerHeight();
|
||||
$deskhareVideo.css("max-width", max);
|
||||
|
||||
var height = $deskhareVideo.parent().width() / aspectRatio;
|
||||
$deskhareVideo.css("max-height", height);
|
||||
}
|
||||
};
|
||||
|
||||
@ -73,6 +73,10 @@ html, .acorn-controls {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#presentation-area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Some internal elements should just fill the entire size of their parents,
|
||||
that will control their size. */
|
||||
#slide {
|
||||
@ -80,10 +84,26 @@ html, .acorn-controls {
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
/* vertical alignment */
|
||||
position: relative;
|
||||
/* vertical and horizontal alignment */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
#deskshare-video {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
/* vertical and horizontal alignment */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
#chat {
|
||||
@ -181,6 +201,9 @@ body {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
#slide.no-background {
|
||||
background-image:none;
|
||||
}
|
||||
#cursor {
|
||||
visibility: hidden;
|
||||
width: 12px;
|
||||
@ -277,7 +300,7 @@ ul.off-canvas-list li label {
|
||||
}
|
||||
|
||||
/* Video style */
|
||||
#video {
|
||||
#video, #deskshare-video {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
|
||||
@ -361,6 +361,28 @@ load_audio = function() {
|
||||
document.getElementById("audio-area").appendChild(audio);
|
||||
}
|
||||
|
||||
load_deskshare_video = function () {
|
||||
console.log("==Loading deskshare video");
|
||||
var deskshare_video = document.createElement("video");
|
||||
deskshare_video.setAttribute('id','deskshare-video');
|
||||
|
||||
var webmsource = document.createElement("source");
|
||||
webmsource.setAttribute('src', RECORDINGS + '/deskshare/deskshare.webm');
|
||||
webmsource.setAttribute('type','video/webm; codecs="vp8.0, vorbis"');
|
||||
deskshare_video.appendChild(webmsource);
|
||||
|
||||
deskshare_video.setAttribute('data-timeline-sources', SLIDES_XML);
|
||||
var presentationArea = document.getElementById("presentation-area");
|
||||
presentationArea.insertBefore(deskshare_video,presentationArea.childNodes[0]);
|
||||
|
||||
$('#video').on("play", function() {
|
||||
Popcorn('#deskshare-video').play();
|
||||
});
|
||||
$('#video').on("pause", function() {
|
||||
Popcorn('#deskshare-video').pause();
|
||||
});
|
||||
}
|
||||
|
||||
load_script = function(file){
|
||||
console.log("==Loading script "+ file)
|
||||
script = document.createElement('script');
|
||||
@ -428,6 +450,9 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
swapVideoPresentation();
|
||||
});
|
||||
|
||||
if (checkUrl(RECORDINGS + '/deskshare/deskshare.webm') == true)
|
||||
load_deskshare_video();
|
||||
|
||||
resizeComponents();
|
||||
}, false);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user