Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
libcast-xblock / public / js / videofront.js
Size: Mime:
function VideoXBlock(runtime, element, args) {
  'use strict';
  var require = require || RequireJS.require;
  require(['videoplayer-fun', 'adways-player'], function(videoplayer, adways) {

    var videoPlayerElement = $(element).find('.videoplayer');
    var transcriptElement = videoPlayerElement.find(".transcript");
    var video = videoPlayerElement.find('video')[0]

    // disable video element contextual menu...
    $(video).bind('contextmenu',function() { return false; });

    var player = videoplayer(video);

    if (args.adways_id) {
      var experience = new adways.interactive.Experience();
      experience.setPublicationID(args.adways_id);
      experience.setPlayerAPI(player);
      experience.setPlayerClass("videojs");
      experience.setSceneTimeReference(false); //true for live interactivity (i.e. based on user time instead of video time).
      experience.load();
    }

    // Configure transcripts
    player.one('loadedmetadata', function() {
      var tracks = player.textTracks();

      // Change track
      tracks.addEventListener('change', function() {

        var enableTranscript = false;
        for (var t = 0; t < this.length; t++) {
          var track = this[t];
          if (track.mode === 'showing') {
            showTranscript(track);
            enableTranscript = true;
          }
        }
        if (!enableTranscript) {
          disableTranscript();
        }
      });

      // Highlight current cue
      for (var t = 0; t < tracks.length; t++) {
        tracks[t].addEventListener('cuechange', oncuechange);
      }
    });

    var showTranscript = function(track) {
      var cues = track.cues;

      // We need to check whether the track is still the one currently showing.
      if (track.mode !== "showing") {
        return;
      }

      // Cues may not be loaded yet. If not, wait until they are. This is
      // suboptimal, but there is no other event to help us determine whether a
      // track was correctly loaded.
      if (!cues || cues.length === 0) {
        window.setTimeout(function() { showTranscript(track); }, 2);
      }

      var htmlContent = "";
      for (var c = 0; c < cues.length; c++) {
        var cue = cues[c];
        htmlContent += "<span class='cue' begin='" + cue.startTime + "'>&nbsp;-&nbsp;" + cue.text + "</span><br/>\n";
      }

      player.width("61%");
      videoPlayerElement.addClass("transcript-enabled");
      transcriptElement.html(htmlContent);

      // Go to time on cue click
      transcriptElement.find(".cue").click(function() {
          player.currentTime($(this).attr('begin'));
      });
    };

    var disableTranscript = function() {
      videoPlayerElement.removeClass("transcript-enabled");
      player.width("100%");
    };

    var oncuechange = function() {
      transcriptElement.find(".current.cue").removeClass("current");
      var cueElement;
      for (var c = 0; c < this.activeCues.length; c++) {
        cueElement = transcriptElement.find(".cue[begin='" + this.activeCues[c].startTime + "']");
        cueElement.addClass("current");
      }
      if (cueElement) {
        // Scroll to cue
        var newtop = transcriptElement.scrollTop() - transcriptElement.offset().top + cueElement.offset().top;
        transcriptElement.animate({
            scrollTop: newtop
        }, 500);
      }
    };

    // Listen to events
    var logTimeOnEvent = function(eventName, logEventName, currentTimeKey, data) {
      player.on(eventName, function() {
        logTime(logEventName, data, currentTimeKey);
      });
    };
    var logTime = function(logEventName, data, currentTimeKey) {
      data = data || {};
      currentTimeKey = currentTimeKey || 'currentTime';
      data[currentTimeKey] = parseInt(player.currentTime());
      log(logEventName, data);
    };
    var logOnEvent = function(eventName, logEventName, data) {
      data = data || {};
      player.on(eventName, function() {
          log(logEventName, data);
      });
    };

    function log(eventName, data) {
        var logInfo = _.extend({
            // Old FUN params
            course_id: args.course_id, // this value is now useless
            video_id: args.video_id,   // this field is now useless

            // edX params
            id: args.block_id,         // xblock id in course
            code: args.video_id        // video ID
        }, data);
        Logger.log(eventName, logInfo);
    };


    logTimeOnEvent('seeked', 'seek_video', 'new_time');
    logTimeOnEvent('ended', 'stop_video');
    logTimeOnEvent('pause', 'pause_video');
    logTimeOnEvent('play', 'play_video');
    logOnEvent('loadstart', 'load_video');
    log('video_player_ready');
    // Note that we have no show/hide transcript button, so there is nothing to
    // log for these events

    player.on('ratechange', function() {
      logTime('speed_change_video', { newSpeed: player.playbackRate() });
    });
  });
}