Add screenshot button to video annotator

[lehecht]

Closes #956.

[lehecht]

@mzur
How can I check if my button is disabled for non-CORS enabled videos? Do you know any websites with non-CORS enabled videos that I could use to test this? Or did you use a different approach for testing?

[mzur]

On your local instance you could use the BIIGLE landing page video.

[mzur]

I think I prefer not to use provide/inject here as it hides where the data is coming from. Maybe this is a chance to refactor the screenshot button a bit so it gets all data it needs through props. E.g. if it gets the image/video ID as a prop, it does not even need the image/video changed event any more.

The map.init event must stay, though, as the map object must not be passed as a prop. It should never be made reactive.

[lehecht]

@mzur

Maybe this is a chance to refactor the screenshot button a bit so it gets all data it needs through props

I also thought about it, but then I would need to refactor the video and image settingsTab, too. The settingsTabs import the screenshotButton, which would then need the same properties as the screenshotbutton. I am not sure, if they should get props that they will not use except to pass them to the screenshotbutton.

[mzur]

If it's not too much, I think it is fine to pass the props through the settings tab.

Alternatively you could provide the individual properties (e.g. current ID, current filename) instead of a single "files" object. This is at least more descriptive and you can find the location where these are coming from easier than with the generic name. This would still be better than the solution with the event.

[mzur]

The map must not become a reactive property (see previous review). While you can replace the other use of Event with props, the map.init event listener must stay.

[lehecht]

@mzur
Just out of curiosity, why should the map not be made a reactive property?

[mzur]

Vue will recursively walk through the whole object (which is very large) and make everything reactive that it can find. It will hook up the reactivity watchers/getters/setters to everything. This will make the whole OpenLayers system slow. With performance-critical paths/objects like this, you have to be very careful with Vue.

[mzur]

The previous name filenames was more descriptive.

[mzur]

Since you only need the filenames, you can use imagesFilenames instead.

[lehecht]

@mzur
I need the object, because it maps the file ids to the file names. This ensures that the screenshots get the right file name. Earlier, I had some screenshots with incorrect file names.

[mzur]

I still find it redundant with imagesIds and imagesFilenames just above this line. This will inflate the generated HTML of this template with duplicate information. The image annotation tool produced a screenshot with the correct filename before, too, so there should be a way to do it with the existing information (correct me if I'm wrong).

[mzur]

Since you only need the filenames, you can use videoFilenames instead.

[mzur]

This would be more "promise-y":

let videoPromise = new Vue.Promise((resolve) => {
    this.video.addEventListener('canplay', resolve);
});
videoPromise.then(this.checkCORSProperty);