Restoring annotations when swapping presentation with video

Fixes #3561

record-and-playback/presentation/playback/presentation/0.9.0/lib/writing.js

@@ -314,6 +314,7 @@ function runPopcorn() {
             if(svgobj.contentDocument) shape = svgobj.contentDocument.getElementById(array[i].getAttribute("id"));
             else shape = svgobj.getSVGDocument('svgfile').getElementById(array[i].getAttribute("id"));
 
+            if(shape != null) {
                 var shape_i = shape.getAttribute("shape");
                 if (time_f < t) {
                   if(current_shapes.indexOf(shape_i) > -1) { //currently drawing the same shape so don't draw the older steps
@@ -346,6 +347,7 @@ function runPopcorn() {
                   shape.style.visibility = "hidden";
                 }
             }
+          }
 
           var next_image = getImageAtTime(t); //fetch the name of the image at this time.
           var imageXOffset = 0;
@@ -410,13 +412,13 @@ function runPopcorn() {
               setViewBox(vboxVal);
             }
 
-            var cursorVal = getCursorAtTime(t);
+            if (getCursorAtTime(t) != null && getCursorAtTime(t) != undefined) {
-            if (cursorVal != null) {
+              currentCursorVal = getCursorAtTime(t);
               cursorShownAt = new Date().getTime();
               showCursor(true);
               // width and height are divided by 2 because that's the value used as a reference
               // when positions in cursor.xml is calculated
-              drawCursor(parseFloat(cursorVal[0]) / (imageWidth/2), parseFloat(cursorVal[1]) / (imageHeight/2), thisimg);
+              drawCursor(parseFloat(currentCursorVal[0]) / (imageWidth/2), parseFloat(currentCursorVal[1]) / (imageHeight/2), thisimg);
 
               // hide the cursor after 3s of inactivity
             } else if (cursorShownAt < new Date().getTime() - 3000) {
@@ -497,6 +499,7 @@ var clearTimes = [];
 var main_shapes_ids = [];
 var vboxValues = {};
 var cursorValues = {};
+var currentCursorVal;
 var imageAtTime = {};
 var slidePlainText = {}; //holds slide plain text for retrieval
 var cursorStyle;

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

@@ -519,23 +519,14 @@ function swapVideoPresentation() {
   // if the cursor is currently being useful, he we'll be redrawn automatically soon
   showCursor(false);
 
-  // wait for the svg with the slides to be fully loaded
+  // wait for the svg with the slides to be fully loaded, then restore slides state and resize them
-  // then set the current image as visible
-  // we also need to retrieve what was the current viewbox size to set it again
   function checkSVGLoaded() {
     var done = false;
     var svg = document.getElementsByTagName("object")[0];
     if (svg !== undefined && svg !== null && currentImage && svg.getSVGDocument('svgfile')) {
       var img = svg.getSVGDocument('svgfile').getElementById(currentImage.getAttribute("id"));
       if (img !== undefined && img !== null) {
-        img.style.visibility = "visible";
+        restoreSlidesState(img);
-        resizeSlides();
-
-        var vboxVal = getViewboxAtTime(t);
-        if(vboxVal !== undefined) {
-          setViewBox(vboxVal);
-        }
-
         done = true;
       }
     }
@@ -546,6 +537,46 @@ function swapVideoPresentation() {
   checkSVGLoaded();
 }
 
+function restoreSlidesState(img) {
+  //set the current image as visible
+  img.style.visibility = "visible";
+
+  resizeSlides();
+  restoreCanvas();
+
+  var isPaused = Popcorn("#video").paused();
+  if(isPaused) {
+    restoreViewBoxSize();
+    restoreCursor(img);
+  }
+}
+
+function restoreCanvas() {
+  var numCurrent = current_image.substr(5);
+  var currentCanvas;
+  if(svgobj.contentDocument) currentCanvas = svgobj.contentDocument.getElementById("canvas" + numCurrent);
+  else currentCanvas = svgobj.getSVGDocument('svgfile').getElementById("canvas" + numCurrent);
+
+  if(currentCanvas !== null) {
+    currentCanvas.setAttribute("display", "");
+  }
+}
+
+function restoreViewBoxSize() {
+  var t = Popcorn("#video").currentTime().toFixed(1);
+  var vboxVal = getViewboxAtTime(t);
+  if(vboxVal !== undefined) {
+    setViewBox(vboxVal);
+  }
+}
+
+function restoreCursor(img) {
+    var imageWidth = parseInt(img.getAttribute("width"), 10);
+    var imageHeight = parseInt(img.getAttribute("height"), 10);
+    showCursor(true);
+    drawCursor(parseFloat(currentCursorVal[0]) / (imageWidth/2), parseFloat(currentCursorVal[1]) / (imageHeight/2), img);
+}
+
 // Manually resize some components we can't properly resize just using css.
 // Mostly the components in the side-section, that has more than one component that
 // need to fill 100% height.