Restoring annotations when swapping presentation with video

Fixes #3561

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

@@ -314,36 +314,38 @@ function runPopcorn() {
             if(svgobj.contentDocument) shape = svgobj.contentDocument.getElementById(array[i].getAttribute("id"));
             else shape = svgobj.getSVGDocument('svgfile').getElementById(array[i].getAttribute("id"));
 
-            var shape_i = shape.getAttribute("shape");
+            if(shape != null) {
-            if (time_f < t) {
+                var shape_i = shape.getAttribute("shape");
-              if(current_shapes.indexOf(shape_i) > -1) { //currently drawing the same shape so don't draw the older steps
+                if (time_f < t) {
-                shape.style.visibility = "hidden"; //hide older steps to shape
+                  if(current_shapes.indexOf(shape_i) > -1) { //currently drawing the same shape so don't draw the older steps
-              } else if(main_shapes_ids.indexOf(shape.getAttribute("id")) > -1) { //as long as it is a main shape, it can be drawn... no intermediate steps.
+                    shape.style.visibility = "hidden"; //hide older steps to shape
-                if(parseFloat(shape.getAttribute("undo")) === -1) { //As long as the undo event hasn't happened yet...
+                  } else if(main_shapes_ids.indexOf(shape.getAttribute("id")) > -1) { //as long as it is a main shape, it can be drawn... no intermediate steps.
-                  shape.style.visibility = "visible";
+                    if(parseFloat(shape.getAttribute("undo")) === -1) { //As long as the undo event hasn't happened yet...
-                } else if (parseFloat(shape.getAttribute("undo")) > t) {
+                      shape.style.visibility = "visible";
-                  shape.style.visibility = "visible";
+                    } else if (parseFloat(shape.getAttribute("undo")) > t) {
-                } else {
+                      shape.style.visibility = "visible";
+                    } else {
+                      shape.style.visibility = "hidden";
+                    }
+                  }
+                } else if(time_s === t) { //for the shapes with the time specific to the current time
+                  // only makes visible the last drawing of a given shape
+                  var idx = current_shapes.indexOf(shape_i);
+                  if (idx > -1) {
+                    current_shapes.splice(idx, 1);
+                    idx = current_shapes.indexOf(shape_i);
+                    if (idx > -1) {
+                      shape.style.visibility = "hidden";
+                    } else {
+                      shape.style.visibility = "visible";
+                    }
+                  } else {
+                    // this is an inconsistent state, since current_shapes should have at least one drawing of this shape
+                    shape.style.visibility = "hidden";
+                  }
+                } else { //for shapes that shouldn't be drawn yet (larger time than current time), don't draw them.
                   shape.style.visibility = "hidden";
                 }
-              }
-            } else if(time_s === t) { //for the shapes with the time specific to the current time
-              // only makes visible the last drawing of a given shape
-              var idx = current_shapes.indexOf(shape_i);
-              if (idx > -1) {
-                current_shapes.splice(idx, 1);
-                idx = current_shapes.indexOf(shape_i);
-                if (idx > -1) {
-                  shape.style.visibility = "hidden";
-                } else {
-                  shape.style.visibility = "visible";
-                }
-              } else {
-                // this is an inconsistent state, since current_shapes should have at least one drawing of this shape
-                shape.style.visibility = "hidden";
-              }
-            } else { //for shapes that shouldn't be drawn yet (larger time than current time), don't draw them.
-              shape.style.visibility = "hidden";
             }
           }
 
@@ -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.