Add screenshot button to video annotator

resources/assets/js/annotations/annotatorContainer.vue

@@ -87,6 +87,8 @@ export default {
             userUpdatedVolareResolution: false,
             userId: null,
             crossOriginError: false,
+            map: null,
+            imagesObj: {}
         };
     },
     computed: {
@@ -676,6 +678,7 @@ export default {
         this.volumeId = biigle.$require('annotations.volumeId');
         this.isEditor = biigle.$require('annotations.isEditor');
         this.userId = biigle.$require('annotations.userId');
+        this.imagesObj = biigle.$require('annotations.imagesObj');
         this.annotationFilters = [
             new LabelFilter(),
             new UserFilter(),
@@ -751,7 +754,9 @@ export default {
         Keyboard.on('C', this.selectLastAnnotation, 0, this.listenerSet);
     },
     mounted() {
+        // Event is used in laserpointer module
         Events.$emit('annotations.map.init', this.$refs.canvas.map);
+        this.map = this.$refs.canvas.map;
     },
 };
 </script>

resources/assets/js/annotations/components/screenshotButton.vue

@@ -1,5 +1,4 @@
 <script>
-import Events from '../../core/events';
 import Messages from '../../core/messages/store';
 import Keyboard from '../../core/keyboard';
 
@@ -9,16 +8,24 @@ import Keyboard from '../../core/keyboard';
  * @type {Object}
  */
 export default {
-    data() {
-        return {
-            filenames: {},
-            currentId: null,
-        };
+    props: {
+        filesObj: {
+            type: Object,
+            default: () => {}
+        },
+        currentId: {
+            type: Number,
+            default: -1,
+        },
+        map: {
+            type: Object,
+            default: null,
+        }
     },
     computed: {
         filename() {
             if (this.currentId) {
-                let name = this.filenames[this.currentId].split('.');
+                let name = this.filesObj[this.currentId].split('.');
                 if (name.length > 1) {
                     name[name.length - 1] = 'png';
                 }
@@ -142,23 +149,8 @@ export default {
         handleError(message) {
             Messages.danger(message);
         },
-        setMap(map) {
-            this.map = map;
-        },
-        updateCurrentId(id) {
-            this.currentId = id;
-        },
     },
     created() {
-        let ids = biigle.$require('annotations.imagesIds');
-        let filenames = {};
-        biigle.$require('annotations.imagesFilenames').forEach((filename, index) => {
-            filenames[ids[index]] = filename;
-        });
-        this.filenames = filenames;
-        this.currentId = biigle.$require('annotations.imageId');
-        Events.$on('images.change', this.updateCurrentId);
-        Events.$on('annotations.map.init', this.setMap);
         Keyboard.on('p', this.capture);
     },
 };

resources/assets/js/annotations/components/settingsTab.vue

@@ -28,6 +28,18 @@ export default {
             type: Object,
             default: null,
         },
+        imagesObj: {
+            type: Object,
+            default: () => {},
+        },
+        currentId: {
+            type: Number,
+            default: -1,
+        },
+        map: {
+            type: Object,
+            default: null,
+        }
     },
     data() {
         return {

resources/assets/js/videos/components/settingsTab.vue

@@ -1,16 +1,34 @@
 <script>
 import PowerToggle from '../../core/components/powerToggle';
 import Settings from '../stores/settings';
+import ScreenshotButton from '../../annotations/components/screenshotButton.vue';
 
 export default {
     components: {
         powerToggle: PowerToggle,
+        screenshotButton: ScreenshotButton
     },
     props: {
         supportsJumpByFrame: {
             type: Boolean,
             default: false,
         },
+        crossOriginError: {
+            type: Boolean,
+            default: false,
+        },
+        videosObj: {
+            type: Object,
+            default: () => {}
+        },
+        currentId: {
+            type: Number,
+            default: -1,
+        },
+        map: {
+            type: Object,
+            default: null,
+        }
     },
     data() {
         return {

resources/assets/js/videos/videoContainer.vue

@@ -99,6 +99,9 @@ export default {
             swappingLabel: false,
             disableJobTracking: false,
             supportsJumpByFrame: false,
+            hasCrossOriginError: false,
+            map: null,
+            videosObj: null,
         };
     },
     computed: {
@@ -551,7 +554,10 @@ export default {
         },
         fetchVideoContent(video) {
             let videoPromise = new Vue.Promise((resolve) => {
-                this.video.addEventListener('canplay', resolve);
+                this.video.addEventListener('canplay', () => {
+                    this.checkCORSProperty();
+                    resolve();
+                });
             });
             let annotationPromise = VideoAnnotationApi.query({id: video.id});
             let promise = Vue.Promise.all([annotationPromise, videoPromise])
@@ -582,6 +588,16 @@ export default {
 
             return promise;
         },
+        checkCORSProperty() {
+            let testCanvas = document.createElement('canvas');
+            let ctx = testCanvas.getContext('2d');
+            ctx.drawImage(this.video, 0, 0);
+            try {
+                ctx.getImageData(0, 0, 1, 1);
+            } catch (e) {                
+                this.hasCrossOriginError = true;
+            }
+        },
         showPreviousVideo() {
             this.reset();
             let length = this.videoIds.length;
@@ -709,6 +725,7 @@ export default {
         this.labelTrees = biigle.$require('videos.labelTrees');
         this.errors = biigle.$require('videos.errors');
         this.user = biigle.$require('videos.user');
+        this.videosObj = biigle.$require('videos.videosObj');
 
         this.initAnnotationFilters();
         this.restoreUrlParams();
@@ -752,6 +769,8 @@ export default {
         if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
             Messages.danger('Current versions of the Firefox browser may not show the correct video frame for a given time. Annotations may be placed incorrectly. Please consider using Chrome until the issue is fixed in Firefox. Learn more on https://github.com/biigle/core/issues/391.');
         }
+
+        this.map = this.$refs.videoScreen.map;
     },
 };
 </script>

resources/views/annotations/show.blade.php

@@ -13,6 +13,7 @@
     biigle.$declare('annotations.shapes', {!! $shapes !!});
     biigle.$declare('annotations.imagesIds', {!! $images->keys() !!});
     biigle.$declare('annotations.imagesFilenames', {!! $images->values() !!});
+    biigle.$declare('annotations.imagesObj', {!! $images !!});
     biigle.$declare('annotations.imageFileUri', '{!! url('api/v1/images/:id/file') !!}');
     biigle.$declare('annotations.tilesUri', '{{ $tilesUriTemplate }}');
     biigle.$declare('annotations.sessions', {!!$annotationSessions!!});

resources/views/annotations/show/tabs/settings.blade.php

@@ -1,9 +1,21 @@
 <sidebar-tab name="settings" icon="cog" title="Settings">
-    <settings-tab v-cloak :image="image" v-on:change="handleSettingsChange" inline-template>
+    <settings-tab
+    v-cloak
+    :image="image"
+    :current-id="imageId"
+    :images-obj="imagesObj"
+    :map="map"
+    v-on:change="handleSettingsChange"
+    inline-template>
         <div class="annotator-tab">
             <div class="sidebar-tab__section">
                 <button v-if="crossOrigin" class="btn btn-default" title="Screenshots are not available for remote images without cross-origin resource sharing" disabled="disabled" ><span class="fa fa-camera" aria-hidden="true"></span> Capture screenshot</button>
-                <screenshot-button v-else inline-template>
+                <screenshot-button
+                    v-else
+                    inline-template
+                    :current-id="currentId"
+                    :files-obj="imagesObj"
+                    :map="map">
                     <button class="btn btn-default" title="Get a screenshot of the visible area 𝗣" v-on:click="capture"><span class="fa fa-camera" aria-hidden="true"></span> Capture screenshot</button>
                 </screenshot-button>
             </div>

resources/views/manual/tutorials/videos/shortcuts.blade.php

@@ -119,6 +119,10 @@
                     <td><kbd>c</kbd></td>
                     <td>Select last created annotation</td>
                 </tr>
+                 <tr>
+                    <td><kbd>p</kbd></td>
+                    <td>Capture a screenshot</td>
+                </tr>
             </tbody>
         </table>
 

resources/views/videos/show.blade.php

@@ -67,6 +67,7 @@ class="sidebar-container__content"
     biigle.$declare('videos.isEditor', @can('add-annotation', $video) true @else false @endcan);
     biigle.$declare('videos.videoIds', {!! $videos->keys() !!});
     biigle.$declare('videos.videoFilenames', {!! $videos->values() !!});
+    biigle.$declare('videos.videosObj', {!! $videos !!});
     biigle.$declare('videos.user', {!! $user !!});
     biigle.$declare('videos.isAdmin', @can('update', $volume) true @else false @endcan);
     biigle.$declare('videos.fileUuids', {!! $fileIds !!});

resources/views/videos/show/sidebar-settings.blade.php

@@ -2,8 +2,23 @@
     <settings-tab inline-template
         v-on:update="handleUpdatedSettings"
         :supports-jump-by-frame="supportsJumpByFrame"
+        :cross-origin-error="hasCrossOriginError"
+        :current-id="videoId"
+        :videos-obj="videosObj"
+        :map="map"
         >
             <div class="annotator-tab settings-tab">
+                <div class="sidebar-tab__section">
+                    <button v-if="crossOriginError" class="btn btn-default" title="Screenshots are not available for remote videos without cross-origin resource sharing" disabled="disabled" ><span class="fa fa-camera" aria-hidden="true"></span> Capture screenshot</button>
+                    <screenshot-button
+                    v-else
+                    inline-template
+                    :current-id="currentId"
+                    :files-obj="videosObj"
+                    :map="map">
+                        <button class="btn btn-default" title="Get a screenshot of the visible area 𝗣" v-on:click="capture"><span class="fa fa-camera" aria-hidden="true"></span> Capture screenshot</button>
+                    </screenshot-button>
+                </div>
 
                 <div class="sidebar-tab__section">
                     <h5 title="Set the opacity of annotations">Annotation Opacity (<span v-text="annotationOpacity"></span>)</h5>