Updated presentation_export with new deskshare features, loading bar and JSON slides text file

record-and-playback/presentation/playback/presentation/0.9.0/playback.css

@@ -286,6 +286,7 @@ ul.off-canvas-list li label {
   width: 100%;
   height: 100%;
   background-image: url('logo.png');
+  background-size: 160px 160px;
   background-position: center center;
   background-repeat: no-repeat;
 }

record-and-playback/presentation_export/playback/presentation_export/lib/writing.js

@@ -122,9 +122,50 @@ function removeSlideChangeAttribute() {
 	Popcorn('#video').unlisten(Popcorn.play, 'removeSlideChangeAttribute');
 }
 
+function hideWhiteboardIfDeskshare(time) {
+  var num_current = current_image.substr(5);
+  var wbcanvas;
+
+  if(svgobj.contentDocument)
+    wbcanvas = svgobj.contentDocument.getElementById("canvas" + num_current);
+  else
+    wbcanvas = svgobj.getSVGDocument('svgfile').getElementById("canvas" + num_current);
+
+  if(wbcanvas !== null) {
+    var sharing = 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)
+        sharing = true;
+    }
+
+    if(sharing) {
+      wbcanvas.setAttribute("display", "none");
+      document.getElementById("cursor").style.display = 'none';
+    } else {
+      wbcanvas.setAttribute("display", "");
+      document.getElementById("cursor").style.display = '';
+    }
+  }
+}
+
 // - - - END OF JAVASCRIPT FUNCTIONS - - - //
 
 
+function startLoadingBar() {
+  console.log("==Hide playback content");
+  $("#playback-content").css('visibility', 'hidden');
+  console.log("Starting loading bar");
+  Pace.on('done', function() {
+    console.log("Stoping loading bar");
+    $("#loading-error").css('height','0');
+    $("#playback-content").css('visibility', 'visible');
+  });
+  Pace.start;
+}
 
 function runPopcorn() {
   console.log("** Running popcorn");
@@ -158,14 +199,6 @@ function runPopcorn() {
     return $(this).attr('class') == 'shape';
   });
 
-  // Newer recordings have slide images identified by class="slide"
-  // because they might include images in shapes
-  var images = shapeelements[0].getElementsByClassName("slide");
-  // To handle old recordings, fetch a list of all images instead
-  if (images.length == 0) {
-    images = shapeelements[0].getElementsByTagName("image");
-  }
-
   //create a map from timestamp to id list
   var timestampToId = {};
   for (var j = 0; j < array.length; j++) {
@@ -185,36 +218,7 @@ function runPopcorn() {
 
   var times_length = times.length; //get the length of the times array.
 
-  console.log("** Getting text files");
-  for(var m = 0; m < images.length; m++) {
-  	len = images[m].getAttribute("in").split(" ").length;
-  	for(var n = 0; n < len; n++) {
-  		imageAtTime[[images[m].getAttribute("in").split(" ")[n], images[m].getAttribute("out").split(" ")[n]]] = images[m].getAttribute("id");
-  	}
-
-        // the logo at the start has no text attribute
-        if (images[m].getAttribute("text")) {
-          var txtFile = false;
-          if (window.XMLHttpRequest) {
-  	    // code for IE7+, Firefox, Chrome, Opera, Safari
-  	    txtFile = new XMLHttpRequest();
-          } else {
-  	    // code for IE6, IE5
-  	    txtFile = new ActiveXObject("Microsoft.XMLHTTP");
-          }
-          var imgid = images[m].getAttribute("id"); //have to save the value because images array might go out of scope
-          txtFile.open("GET", url + "/" + images[m].getAttribute("text"), false);
-          txtFile.onreadystatechange = function() {
-              if (txtFile.readyState === 4) {
-                if (txtFile.status === 200) {
-                  slidePlainText[imgid] = $('<div/>').text(txtFile.responseText).html();
-                  //console.log("**Text file read " + imgid);
-                }
-              }
-          };
-          txtFile.send(null);
-        }
-  }
+  getPresentationText();
 
   // PROCESS PANZOOMS.XML
   console.log("** Getting panzooms.xml");
@@ -258,6 +262,23 @@ function runPopcorn() {
   }
 
 
+  // 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";
   var next_shape;
@@ -428,19 +449,12 @@ function runPopcorn() {
             currentImage = thisimg;
             resizeSlides();
           }
+          hideWhiteboardIfDeskshare(t);
        }
     }
   });
 };
 
-function removeLoadingScreen() {
-  spinner.stop();
-  $("#playback-content").css('visibility','visible');
-  $("#loading-recording").css('visibility','hidden');
-  $("#loading-recording").css('height','0');
-  $("#load-recording-msg").css('display','none');
-}
-
 function defineStartTime() {
   console.log("** Defining start time");
 
@@ -502,6 +516,7 @@ var imageAtTime = {};
 var slidePlainText = {}; //holds slide plain text for retrieval
 var cursorStyle;
 var cursorShownAt = 0;
+var deskshareTimes = [];
 
 var params = getUrlParameters();
 var MEETINGID = params.meetingId;
@@ -512,6 +527,8 @@ 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 presentation_text_json = url + '/presentation_text.json';
 
 var firstLoad = true;
 var svjobjLoaded = false;
@@ -534,10 +551,19 @@ svgobj.addEventListener('load', function() {
 
   var p = Popcorn("#video");
   p.currentTime(defineStartTime());
-
-  removeLoadingScreen();
 }, false);
 
+svgobj.addEventListener('error', function() {
+  console.log("got svgobj 'error' event");
+  onSVGLoadingError();
+}, false);
+
+function onSVGLoadingError() {
+  Pace.off('done');
+  Pace.stop();
+  $("#loading-error").css('visibility', 'visible');
+}
+
 // Fetches the metadata associated with the recording and uses it to configure
 // the playback page
 var getMetadata = function() {
@@ -569,6 +595,114 @@ var getMetadata = function() {
   }
 };
 
+function setPresentationTextFromJSON(images, presentationText) {
+  for (var m = 0; m < images.length; m++) {
+    len = images[m].getAttribute("in").split(" ").length;
+    for (var n = 0; n < len; n++) {
+      imageAtTime[[images[m].getAttribute("in").split(" ")[n], images[m].getAttribute("out").split(" ")[n]]] = images[m].getAttribute("id");
+    }
+    // The logo at the start has no text attribute
+    if (images[m].getAttribute("text")) {
+      var imgId = images[m].getAttribute("id"); // Have to save the value because images array might go out of scope
+      var imgTxt = images[m].getAttribute("text").split("/"); // Text format: presentation/PRESENTATION_ID/textfiles/SLIDE_ID.txt
+      var presentationId = imgTxt[1];
+      var slideId = imgTxt[3].split(".")[0];
+      slidePlainText[imgId] = $('<div/>').text(presentationText[presentationId][slideId]).html();
+    }
+  }
+}
+
+function setPresentationTextFromTxt(images) {
+  for (var m = 0; m < images.length; m++) {
+    len = images[m].getAttribute("in").split(" ").length;
+    for (var n = 0; n < len; n++) {
+      imageAtTime[[images[m].getAttribute("in").split(" ")[n], images[m].getAttribute("out").split(" ")[n]]] = images[m].getAttribute("id");
+    }
+    // The logo at the start has no text attribute
+    if (images[m].getAttribute("text")) {
+      var txtFile = false;
+      if (window.XMLHttpRequest) {
+        // Code for IE7+, Firefox, Chrome, Opera, Safari
+        txtFile = new XMLHttpRequest();
+      } else {
+        // Code for IE6, IE5
+        txtFile = new ActiveXObject("Microsoft.XMLHTTP");
+      }
+      var imgId = images[m].getAttribute("id"); // Have to save the value because images array might go out of scope
+      txtFile.open("GET", url + "/" + images[m].getAttribute("text"), false);
+      txtFile.onreadystatechange = function() {
+          if (txtFile.readyState === 4) {
+            if (txtFile.status === 200) {
+              slidePlainText[imgId] = $('<div/>').text(txtFile.responseText).html();
+            }
+          }
+      };
+      txtFile.send(null);
+    }
+  }
+}
+
+function processPresentationText(response) {
+  // Making the object for requesting the read of the XML files.
+  if (window.XMLHttpRequest) {
+    // Code for IE7+, Firefox, Chrome, Opera, Safari
+    var xmlhttp = new XMLHttpRequest();
+  } else {
+    // Code for IE6, IE5
+    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
+  }
+  xmlhttp.open("GET", shapes_svg, false);
+  xmlhttp.send();
+  var xmlDoc = xmlhttp.responseXML;
+
+  // Getting all the event tags
+  var shapeelements = xmlDoc.getElementsByTagName("svg");
+
+  // Newer recordings have slide images identified by class="slide"
+  // because they might include images in shapes
+  var images = shapeelements[0].getElementsByClassName("slide");
+  // To handle old recordings, fetch a list of all images instead
+  if (images.length == 0) {
+    images = shapeelements[0].getElementsByTagName("image");
+  }
+
+  if (response !== undefined) {
+    setPresentationTextFromJSON(images, response);
+  } else {
+    setPresentationTextFromTxt(images);
+  }
+}
+
+function getPresentationText() {
+  console.log("** Getting text files");
+  loadJSON(processPresentationText, presentation_text_json);
+}
+
+function loadJSON(callback, url) {
+  var xobj;
+  if (window.XMLHttpRequest) {
+    // Code for IE7+, Firefox, Chrome, Opera, Safari
+    xobj = new XMLHttpRequest();
+  } else {
+    // Code for IE6, IE5
+    xobj = new ActiveXObject("Microsoft.XMLHTTP");
+  }
+  xobj.overrideMimeType("application/json");
+  xobj.open('GET', url, true);
+  xobj.onreadystatechange = function () {
+      if (xobj.readyState == 4) {
+        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
+        if (xobj.status == "200") {
+          callback(JSON.parse(xobj.responseText));
+        } else {
+          console.log("Could not get JSON file");
+          callback(undefined);
+        }
+      }
+  };
+  xobj.send(null);
+}
+
 document.getElementById('slide').appendChild(svgobj);
 
 var currentImage;

record-and-playback/presentation_export/playback/presentation_export/playback.css

@@ -281,12 +281,17 @@ ul.off-canvas-list li label {
   background-color: #f6f6f6;
 }
 
-/* Loading page with a spinner */
-#loading-recording {
+#loading-error {
+  visibility: hidden;
   width: 100%;
   height: 100%;
+  background-image: url('logo.png');
+  background-size: 160px 160px;
+  background-position: center center;
+  background-repeat: no-repeat;
 }
-#load-recording-msg {
+
+#load-error-msg {
   text-align: center;
   vertical-align: middle;
   position: absolute;
@@ -346,3 +351,55 @@ ul.off-canvas-list li label {
     border: none;
   }
 }
+
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+
+  z-index: 2000;
+  position: fixed;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 5px;
+  width: 200px;
+  background: #fff;
+  border: 1px solid #27535c;
+
+  overflow: hidden;
+}
+
+.pace .pace-progress {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+
+  max-width: 200px;
+  position: fixed;
+  z-index: 2000;
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  height: 100%;
+  width: 100%;
+  background: #27535c;
+}
+
+.pace.pace-inactive {
+  display: none;
+}

record-and-playback/presentation_export/playback/presentation_export/playback.html

@@ -34,9 +34,8 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 </head>
 
 <body>
-  <div id="loading-recording">
-    <div id="spinner"></div>
-    <p id="load-recording-msg">Initializing recording</p>
+  <div id="loading-error">
+    <p id="load-error-msg">This recording could not be found</p>
   </div>
   <div class="circle" id="cursor"></div>
   <div id="playback-content" class="off-canvas-wrap" data-offcanvas>
@@ -116,6 +115,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
   <!-- popcorn has to be loaded after playback.js, otherwise the chat won't be displayed -->
   <script type="text/javascript" src="playback/lib/popcorn-complete.min.js"></script>
   <script type="text/javascript" src="playback/lib/popcorn.chattimeline.js"></script>
+  <script type="text/javascript" src="playback/lib/pace.min.js"></script>
   <script>
     $(document).foundation();
   </script>

record-and-playback/presentation_export/playback/presentation_export/playback.js

@@ -369,36 +369,12 @@ load_script = function(file){
   document.getElementsByTagName('body').item(0).appendChild(script);
 }
 
-load_spinner = function(){
-  console.log("==Loading spinner");
-  var opts = {
-    lines: 13, // The number of lines to draw
-    length: 24, // The length of each line
-    width: 4, // The line thickness
-    radius: 24, // The radius of the inner circle
-    corners: 1, // Corner roundness (0..1)
-    rotate: 24, // The rotation offset
-    direction: 1, // 1: clockwise, -1: counterclockwise
-    color: '#000', // #rgb or #rrggbb or array of colors
-    speed: 1, // Rounds per second
-    trail: 87, // Afterglow percentage
-    shadow: false, // Whether to render a shadow
-    hwaccel: false, // Whether to use hardware acceleration
-    className: 'spinner', // The CSS class to assign to the spinner
-    zIndex: 2e9, // The z-index (defaults to 2000000000)
-    top: '50%', // Top position relative to parent
-    left: '50%' // Left position relative to parent
-  };
-  var target = document.getElementById('spinner');
-  spinner = new Spinner(opts).spin(target);
-};
-
-
 document.addEventListener("DOMContentLoaded", function() {
   console.log("==DOM content loaded");
   var appName = navigator.appName;
   var appVersion = navigator.appVersion;
-  var spinner;
+
+  startLoadingBar();
 
   if (appName == "Microsoft Internet Explorer" && navigator.userAgent.match("chromeframe") == false ) {
     google_frame_warning();
@@ -414,10 +390,6 @@ document.addEventListener("DOMContentLoaded", function() {
     load_audio();
   }
 
-  load_spinner();
-  console.log("==Hide playback content");
-  $("#playback-content").css('visibility', 'hidden');
-
   //load up the acorn controls
   console.log("==Loading acorn media player ");
   $('#video').acornMediaPlayer({