added padding code for videos

annotator/static/player.js

@@ -296,6 +296,20 @@ class Player {
         if (this.annotations.length === 0 && !confirm('Confirm that there are no objects in the video?')) {
             return;
         }
+
+        // account for offset of 5% set in initPaper()
+        for (let annotation of this.annotations) {
+            for (let keyframe of annotation.keyframes) {
+                let video = $(".player-video");
+                let offset_width = video.outerWidth() * 0.05;
+                let offset_height = video.outerHeight() * 0.05;
+                keyframe.bounds.xMin -= offset_width;
+                keyframe.bounds.xMax -= offset_width;
+                keyframe.bounds.yMin -= offset_height;
+                keyframe.bounds.yMax -= offset_height;
+            }
+        }
+
         DataSources.annotations.save(this.videoId, this.annotations, this.metrics, window.mturk).then((response) => {
             // only show this if not running on turk
             if (!window.hitId)

annotator/static/views/player.js

@@ -115,24 +115,30 @@ class PlayerView {
     initPaper() {
         // Depends on this.videoReady for this.video.videoWidth/Height
         this.videoReady().then(() => {
-            var {videoWidth, videoHeight, viewWidth, viewHeight} = this.video;
-            this.$paper = Raphael(this.$('paper')[0], videoWidth, videoHeight);
+            var {videoWidth, videoHeight} = this.video;
+            let playerPaper = $(".player-paper");
+            let paper_height = playerPaper.outerHeight();
+            let paper_width = playerPaper.outerWidth();
+            this.$paper = Raphael(this.$('paper')[0], paper_width, paper_height);
 
             var css = {
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                'width': `${viewWidth}px`,
-                'height': `${viewHeight}px`,
+                'width': `${paper_width}px`,
+                'height': `${paper_height}px`,
             };
 
+            $(this.video.videoElement).css({top:videoHeight*0.05, left:videoWidth*0.05});
+
             $(this.$paper.canvas).attr({
-                viewBox: `0 0 ${videoWidth} ${videoHeight}`
+                viewBox: `0 0 ${paper_width} ${paper_height}`
             }).removeAttr(
                 'width'
             ).removeAttr(
                 'height'
             ).css(css);
+
             this.creationRect = this.makeAndAttachRect(CreationRect);
             this.rects = [];
 
@@ -162,11 +168,13 @@ class PlayerView {
         // if we just toggled scale to fit the video properties are not up to date yet
         if (this.$paper) {
             setTimeout(() => {
-                var {viewWidth, viewHeight} = this.video;
+                let playerPaper = $(".player-paper");
+                let paper_height = playerPaper.outerHeight();
+                let paper_width = playerPaper.outerWidth();
                 $(this.$paper.canvas)
                 .css({
-                    'width': `${viewWidth}px`,
-                    'height': `${viewHeight}px`,
+                    'width': `${paper_width}px`,
+                    'height': `${paper_height}px`,
                 });
             }, 10);
         }