Exporting Popcorn.js TrackedEvents to jSON

Question

I'm build a VideoAnnotationEditor with Popcorn.js. Users can click on the video when they want to post a comment(=footnote) and enter text and duration. I'm adding footnotes like this:

p = pop.footnote({
start: 0,
end: duration,
text: text,
target: "footnotediv"
});

When all footnotes are added I want to store the data to a database. But how can I get all footnotes in a nice format? I tried

JSON.stringify(pop.getTrackEvents())

but it contains a lot und unnecessary stuff. Is there another way or should I store all footnotes in an own data-structure before adding them to popcorn.

Thx for any help.

Answer 1

Unfortunately, Popcorn isn't going to do this for you, since it stores it's "private" data on the same object as plugin-specific, user-specified data. Each one of those track event objects will have a bunch of private stuff (_natives, compose, _running, etc) and sometimes semi-private stuff that can be added by the plugin (e.g. container).

If you want to filter these out yourself, you can either blacklist the fields you don't want to save or you can whitelist the fields you do. If you have a lot of different plugins, and you don't always know what fields you're going to need, go with the blacklist. But honestly, having done that a few times, I advise just storying your own data structure outside of Popcorn.

But if all you're doing is footnotes, that's relatively simple, and the whitelist approach should work. Like so:

var trackEvents = pop.getTrackEvents();
trackEvents = trackEvents.map(function (trackEvent) {
    return {
        start: trackEvent.start,
        end: trackEvent.end,
        text: trackEvent.text
    };
});
saveData(JSON.stringify(trackEvents));