1 /* This widget displays annotations as a transcript */

     2 

     3 IriSP.Widgets.Transcript = function(player, config) {

     4     IriSP.Widgets.Widget.call(this, player, config);

     5 }

     6 

     7 IriSP.Widgets.Transcript.prototype = new IriSP.Widgets.Widget();

     8 

     9 IriSP.Widgets.Transcript.prototype.defaults = {

    10     annotation_type: "Caption",

    11     use_vtt_track: false

    12 }

    13 

    14 IriSP.Widgets.Transcript.prototype.template = '<div class="Ldt-TranscriptWidget"></div>';

    15 

    16 IriSP.Widgets.Transcript.prototype.annotationTemplate = '<span data-begin="{{ begin }}" data-end="{{ end }}" data-id="{{ id }}" class="Ldt-Transcript-Annotation">{{ content }}</span>  ';

    17 

    18 IriSP.Widgets.Transcript.prototype.draw = function() {

    19     var _annotations = this.getWidgetAnnotations();

    20     var _this = this;

    21     var content;

    22 

    23     _this.renderTemplate();

    24     content = _this.$.find('.Ldt-TranscriptWidget');

    25 

    26     if (_this.use_vtt_track) {

    27         // Use webvtt track. It will only work with native video player.

    28         var widgets =  _this.player.widgets.filter(function (w) { return w.type == "HtmlPlayer"; });

    29         if (widgets) {

    30             var v = widgets[0].$.find("video")[0];

    31             // FIXME: allow to specify the used track

    32             v.addEventListener("loadedmetadata", function () {

    33                 var track = v.textTracks[0];

    34                 var cues = track.cues;

    35                 var i = 1;

    36                 Array.prototype.forEach.apply(cues, [ function(_c) {

    37                     _c.id = "cue" + i;

    38                     var _html = Mustache.to_html(_this.annotationTemplate, {

    39                         id : _c.id,

    40                         content : _c.text,

    41                         begin : 1000 * _c.startTime,

    42                         end : 1000 * _c.endTime

    43                     });

    44                     i += 1;

    45                     var _el = IriSP.jQuery(_html);

    46                     content.append(_el);

    47                 } ]);

    48                 track.addEventListener("cuechange", function () {

    49                     var acues = track.activeCues;

    50                     if (acues.length > 0) {

    51                         // Update attributes for active cues

    52                         _this.$.find(".Ldt-Transcript-Annotation.active").removeClass("active");

    53                         Array.prototype.forEach.apply(acues, [ function(_c) {

    54                             _this.$.find("#" + _c.id).addClass("active");

    55                         } ]);

    56                     }

    57                 }, false);

    58                 content.on("click", ".Ldt-Transcript-Annotation", function () {

    59                     _this.media.setCurrentTime(this.dataset.begin);

    60                 });

    61             });

    62         } else {

    63             console.log("cannot find a video object");

    64         }

    65     } else {

    66         // Populate with annotation data

    67         _annotations.forEach(function(_a) {

    68             var _data = {

    69                 id : _a.id,

    70                 content : IriSP.textFieldHtml(_a.title),

    71                 begin : _a.begin.toString(),

    72                 end : _a.end.toString()

    73             };

    74             var _html = Mustache.to_html(_this.annotationTemplate, _data);

    75             var _el = IriSP.jQuery(_html);

    76             content.append(_el);

    77         });

    78     };

    79 };