wai-website-theme 0.1.0

data/assets/ableplayer/scripts/caption.js

@@ -0,0 +1,385 @@
+(function ($) {
+  AblePlayer.prototype.updateCaption = function (time) {
+    if (!this.usingYouTubeCaptions && (typeof this.$captionsWrapper !== 'undefined')) {
+      if (this.captionsOn) {
+        this.$captionsWrapper.show();
+        this.showCaptions(time || this.getElapsed());
+      }
+      else if (this.$captionsWrapper) {
+        this.$captionsWrapper.hide();
+        this.prefCaptions = 0;
+      }
+    }
+  };
+
+  // Returns the function used when a caption is clicked in the captions menu.
+  // Not called if user clicks "Captions off". Instead, that triggers getCaptionOffFunction()
+  AblePlayer.prototype.getCaptionClickFunction = function (track) {
+    var thisObj = this;
+    return function () {
+      thisObj.selectedCaptions = track;
+      thisObj.captionLang = track.language;
+      thisObj.currentCaption = -1;
+
+      if (thisObj.usingYouTubeCaptions) {
+        if (thisObj.captionsOn) {
+          if (typeof thisObj.ytCaptionModule !== 'undefined') {
+            // captions are already on. Just need to change the language
+            thisObj.youTubePlayer.setOption(thisObj.ytCaptionModule, 'track', {'languageCode': thisObj.captionLang});
+          }
+          else {
+            // need to wait for caption module to be loaded to change the language
+            // caption module will be loaded after video starts playing, triggered by onApiChange event
+            // at that point, thosObj.captionLang will be passed to the module as the default language
+          }
+        }
+        else {
+          // captions are off (i.e., captions module has been unloaded; need to reload it)
+          // user's selected language will be reset after module has successfully loaded
+          // (the onApiChange event will be fired -- see initialize.js > initYouTubePlayer())
+          thisObj.resettingYouTubeCaptions = true;
+          thisObj.youTubePlayer.loadModule(thisObj.ytCaptionModule);
+        }
+      }
+      else {
+        thisObj.syncTrackLanguages('captions',thisObj.captionLang);
+        if (!this.swappingSrc) {
+          thisObj.updateCaption();
+          thisObj.showDescription(thisObj.getElapsed());
+        }
+      }
+      thisObj.captionsOn = true;
+      // stopgap to prevent spacebar in Firefox from reopening popup
+      // immediately after closing it (used in handleCaptionToggle())
+      thisObj.hidingPopup = true;
+      thisObj.captionsPopup.hide();
+      // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called
+      // e.g., if user triggered button with Enter or mouse click, not spacebar
+      setTimeout(function() {
+        thisObj.hidingPopup = false;
+      }, 100);
+      thisObj.$ccButton.focus();
+
+      // save preference to cookie
+      thisObj.prefCaptions = 1;
+      thisObj.updateCookie('prefCaptions');
+
+      thisObj.refreshControls();
+    }
+  };
+
+  // Returns the function used when the "Captions Off" button is clicked in the captions tooltip.
+  AblePlayer.prototype.getCaptionOffFunction = function () {
+    var thisObj = this;
+    return function () {
+      if (thisObj.player == 'youtube') {
+        thisObj.youTubePlayer.unloadModule(thisObj.ytCaptionModule);
+      }
+      thisObj.captionsOn = false;
+      thisObj.currentCaption = -1;
+      // stopgap to prevent spacebar in Firefox from reopening popup
+      // immediately after closing it (used in handleCaptionToggle())
+      thisObj.hidingPopup = true;
+      thisObj.captionsPopup.hide();
+      // Ensure stopgap gets cancelled if handleCaptionToggle() isn't called
+      // e.g., if user triggered button with Enter or mouse click, not spacebar
+      setTimeout(function() {
+        thisObj.hidingPopup = false;
+      }, 100);
+      thisObj.$ccButton.focus();
+
+      // save preference to cookie
+      thisObj.prefCaptions = 0;
+      thisObj.updateCookie('prefCaptions');
+      if (!this.swappingSrc) {
+        thisObj.refreshControls();
+        thisObj.updateCaption();
+      }
+    }
+  };
+
+  AblePlayer.prototype.showCaptions = function(now) {
+    var c, thisCaption, captionText;
+    var cues;
+    if (this.selectedCaptions) {
+      cues = this.selectedCaptions.cues;
+    }
+    else if (this.captions.length >= 1) {
+      cues = this.captions[0].cues;
+    }
+    else {
+      cues = [];
+    }
+    for (c = 0; c < cues.length; c++) {
+      if ((cues[c].start <= now) && (cues[c].end > now)) {
+        thisCaption = c;
+        break;
+      }
+    }
+    if (typeof thisCaption !== 'undefined') {
+      if (this.currentCaption !== thisCaption) {
+        // it's time to load the new caption into the container div
+        captionText = this.flattenCueForCaption(cues[thisCaption]).replace('\n', '<br>');
+        this.$captionsDiv.html(captionText);
+        this.currentCaption = thisCaption;
+        if (captionText.length === 0) {
+          // hide captionsDiv; otherwise background-color is visible due to padding
+          this.$captionsDiv.css('display','none');
+        }
+        else {
+          this.$captionsDiv.css('display','inline-block');
+        }
+      }
+    }
+    else {
+      this.$captionsDiv.html('');
+      this.currentCaption = -1;
+    }
+  };
+
+  AblePlayer.prototype.flattenCueForCaption = function (cue) {
+
+    // Takes a cue and returns the caption text to display
+    // Also used for chapters
+
+    // Support for 'i' and 'b' tags added in 2.3.66
+    // TODO: Add support for 'c' (class) and 'ruby'
+
+    // c (class): <c.myClass1.myClass2>Some text</c>
+    // Classes can be used to modify other tags too (e.g., <v.loud>)
+    // If <c> tag, should be rendered as a <span>
+
+    // ruby: http://www.w3schools.com/tags/tag_ruby.asp
+
+    // WebVTT also supports 'u' (underline)
+    // I see no reason to support that in Able Player.
+    // If it's available authors are likely to use it incorrectly
+    // where <i> or <b> should be used instead
+    // Here are the rare use cases where an underline is appropriate on the web:
+    // http://html5doctor.com/u-element/
+
+    var result = [];
+
+    var flattenComponent = function (component) {
+      var result = [], ii;
+      if (component.type === 'string') {
+        result.push(component.value);
+      }
+      else if (component.type === 'v') {
+        result.push('(' + component.value + ')');
+        for (ii = 0; ii < component.children.length; ii++) {
+          result.push(flattenComponent(component.children[ii]));
+        }
+      }
+      else if (component.type === 'i') {
+        result.push('<em>');
+        for (ii = 0; ii < component.children.length; ii++) {
+          result.push(flattenComponent(component.children[ii]));
+        }
+        result.push('</em>');
+      }
+      else if (component.type === 'b') {
+        result.push('<strong>');
+        for (ii = 0; ii < component.children.length; ii++) {
+          result.push(flattenComponent(component.children[ii]));
+        }
+        result.push('</strong>');
+      }
+      else {
+        for (ii = 0; ii < component.children.length; ii++) {
+          result.push(flattenComponent(component.children[ii]));
+        }
+      }
+      return result.join('');
+    };
+
+    if (typeof cue.components !== 'undefined') {
+      for (var ii = 0; ii < cue.components.children.length; ii++) {
+        result.push(flattenComponent(cue.components.children[ii]));
+      }
+    }
+    return result.join('');
+  };
+
+  AblePlayer.prototype.getCaptionsOptions = function(pref) {
+
+    var options = [];
+
+    switch (pref) {
+
+      case 'prefCaptionsFont':
+        options[0] = this.tt.serif;
+        options[1] = this.tt.sans;
+        options[3] = this.tt.cursive;
+        options[4] = this.tt.fantasy;
+        options[2] = this.tt.monospace;
+        break;
+
+      case 'prefCaptionsColor':
+      case 'prefCaptionsBGColor':
+        // HTML color values must be in English
+        options[0] = ['white',this.tt.white];
+        options[1] = ['yellow',this.tt.yellow];
+        options[2] = ['green',this.tt.green];
+        options[3] = ['cyan',this.tt.cyan];
+        options[4] = ['blue',this.tt.blue];
+        options[5] = ['magenta',this.tt.magenta];
+        options[6] = ['red',this.tt.red];
+        options[7] = ['black',this.tt.black];
+        break;
+
+      case 'prefCaptionsSize':
+        options[0] = '75%';
+        options[1] = '100%';
+        options[2] = '125%';
+        options[3] = '150%';
+        options[4] = '200%';
+        break;
+
+      case 'prefCaptionsOpacity':
+        options[0] = '0%';
+        options[1] = '25%';
+        options[2] = '50%';
+        options[3] = '75%';
+        options[4] = '100%';
+        break;
+
+      case 'prefCaptionsStyle':
+        options[0] = this.tt.captionsStylePopOn;
+        options[1] = this.tt.captionsStyleRollUp;
+        break;
+
+      case 'prefCaptionsPosition':
+        options[0] = 'overlay';
+        options[1] = 'below';
+        break;
+
+    }
+    return options;
+  };
+
+  AblePlayer.prototype.translatePrefs = function(pref, value, outputFormat) {
+
+    // translate current value of pref to a value supported by outputformat
+    if (outputFormat == 'youtube') {
+      if (pref === 'size') {
+        // YouTube font sizes are a range from -1 to 3 (0 = default)
+        switch (value) {
+          case '75%':
+            return -1;
+          case '100%':
+            return 0;
+          case '125%':
+            return 1;
+          case '150%':
+            return 2;
+          case '200%':
+            return 3;
+        }
+      }
+    }
+    return false;
+  }
+
+  AblePlayer.prototype.stylizeCaptions = function($element, pref) {
+    // $element is the jQuery element containing the captions
+    // this function handles stylizing of the sample caption text in the Prefs dialog
+    // plus the actual production captions
+    // TODO: consider applying the same user prefs to visible text-based description
+    var property, newValue, opacity, lineHeight;
+
+    if (typeof $element !== 'undefined') {
+      if (pref == 'prefCaptionsPosition') {
+        this.positionCaptions();
+      }
+      else if (typeof pref !== 'undefined') {
+        // just change the one property that user just changed
+        if (pref === 'prefCaptionsFont') {
+          property = 'font-family';
+        }
+        else if (pref === 'prefCaptionsSize') {
+          property = 'font-size';
+        }
+        else if (pref === 'prefCaptionsColor') {
+          property = 'color';
+        }
+        else if (pref === 'prefCaptionsBGColor') {
+          property = 'background-color';
+        }
+        else if (pref === 'prefCaptionsOpacity') {
+          property = 'opacity';
+        }
+        if (pref === 'prefCaptionsOpacity') {
+          newValue = parseFloat($('#' + this.mediaId + '_' + pref).val()) / 100.0;
+        }
+        else {
+          newValue = $('#' + this.mediaId + '_' + pref).val();
+        }
+        $element.css(property, newValue);
+      }
+      else { // no property was specified, update all styles with current saved prefs
+        opacity = parseFloat(this.prefCaptionsOpacity) / 100.0;
+        $element.css({
+          'font-family': this.prefCaptionsFont,
+          'font-size': this.prefCaptionsSize,
+          'color': this.prefCaptionsColor,
+          'background-color': this.prefCaptionsBGColor,
+          'opacity': opacity
+        });
+        if ($element === this.$captionsDiv) {
+          if (typeof this.$captionsWrapper !== 'undefined') {
+            lineHeight = parseInt(this.prefCaptionsSize,10) + 25;
+            this.$captionsWrapper.css('line-height',lineHeight + '%');
+          }
+        }
+        if (this.prefCaptionsPosition === 'below') {
+          // also need to add the background color to the wrapper div
+          if (typeof this.$captionsWrapper !== 'undefined') {
+            this.$captionsWrapper.css({
+              'background-color': this.prefCaptionsBGColor,
+              'opacity': '1'
+            });
+          }
+        }
+        else if (this.prefCaptionsPosition === 'overlay') {
+          // no background color for overlay wrapper, captions are displayed in-line
+          if (typeof this.$captionsWrapper !== 'undefined') {
+            this.$captionsWrapper.css({
+              'background-color': 'transparent',
+              'opacity': ''
+            });
+          }
+        }
+        this.positionCaptions();
+      }
+    }
+  };
+  AblePlayer.prototype.positionCaptions = function(position) {
+
+    // set caption position to either 'overlay' or 'below'
+    // if position parameter was passed to this function, use that
+    // otherwise use user preference
+    if (typeof position === 'undefined') {
+      position = this.prefCaptionsPosition;
+    }
+    if (typeof this.$captionsWrapper !== 'undefined') {
+
+      if (position == 'below') {
+        this.$captionsWrapper.removeClass('able-captions-overlay').addClass('able-captions-below');
+        // also need to update in-line styles
+        this.$captionsWrapper.css({
+          'background-color': this.prefCaptionsBGColor,
+          'opacity': '1'
+        });
+      }
+      else {
+        this.$captionsWrapper.removeClass('able-captions-below').addClass('able-captions-overlay');
+        this.$captionsWrapper.css({
+          'background-color': 'transparent',
+          'opacity': ''
+        });
+      }
+    }
+  };
+
+})(jQuery);

data/assets/ableplayer/scripts/chapters.js

@@ -0,0 +1,242 @@
+(function ($) {
+
+  AblePlayer.prototype.populateChaptersDiv = function() {
+
+    var headingLevel, headingType, headingId, $chaptersHeading,
+      $chaptersList;
+
+    if ($('#' + this.chaptersDivLocation)) {
+      this.$chaptersDiv = $('#' + this.chaptersDivLocation);
+      this.$chaptersDiv.addClass('able-chapters-div');
+
+      // add optional header
+      if (this.chaptersTitle) {
+        headingLevel = this.getNextHeadingLevel(this.$chaptersDiv);
+        headingType = 'h' + headingLevel.toString();
+        headingId = this.mediaId + '-chapters-heading';
+        $chaptersHeading = $('<' + headingType + '>', {
+          'class': 'able-chapters-heading',
+          'id': headingId
+        }).text(this.chaptersTitle);
+        this.$chaptersDiv.append($chaptersHeading);
+      }
+
+      this.$chaptersNav = $('<nav>');
+      if (this.chaptersTitle) {
+        this.$chaptersNav.attr('aria-labelledby',headingId);
+      }
+      else {
+        this.$chaptersNav.attr('aria-label',this.tt.chapters);
+      }
+      this.$chaptersDiv.append(this.$chaptersNav);
+
+      // populate this.$chaptersNav with a list of chapters
+      this.updateChaptersList();
+    }
+  };
+
+  AblePlayer.prototype.updateChaptersList = function() {
+
+    var thisObj, cues, $chaptersList, c, thisChapter,
+      $chapterItem, $chapterButton, buttonId, hasDefault,
+      getClickFunction, $clickedItem, $chaptersList, thisChapterIndex;
+
+    thisObj = this;
+
+    if (!this.$chaptersNav) {
+      return false;
+    }
+
+    if (typeof this.useChapterTimes === 'undefined') {
+      if (this.seekbarScope === 'chapter' && this.selectedChapters.cues.length) {
+        this.useChapterTimes = true;
+      }
+      else {
+        this.useChapterTimes = false;
+      }
+    }
+
+    if (this.useChapterTimes) {
+      cues = this.selectedChapters.cues;
+    }
+    else if (this.chapters.length >= 1) {
+      cues = this.chapters[0].cues;
+    }
+    else {
+      cues = [];
+    }
+    if (cues.length > 0) {
+      $chaptersList = $('<ul>');
+      for (c = 0; c < cues.length; c++) {
+        thisChapter = c;
+        $chapterItem = $('<li></li>');
+        $chapterButton = $('<button>',{
+          'type': 'button',
+          'val': thisChapter
+        }).text(this.flattenCueForCaption(cues[thisChapter]));
+
+        // add event listeners
+        getClickFunction = function (time) {
+          return function () {
+            $clickedItem = $(this).closest('li');
+            $chaptersList = $(this).closest('ul').find('li');
+            thisChapterIndex = $chaptersList.index($clickedItem);
+            $chaptersList.removeClass('able-current-chapter').attr('aria-selected','');
+            $clickedItem.addClass('able-current-chapter').attr('aria-selected','true');
+            // Need to updateChapter before seeking to it
+            // Otherwise seekBar is redrawn with wrong chapterDuration and/or chapterTime
+            thisObj.updateChapter(time);
+            thisObj.seekTo(time);
+          }
+        };
+        $chapterButton.on('click',getClickFunction(cues[thisChapter].start)); // works with Enter too
+        $chapterButton.on('focus',function() {
+          $(this).closest('ul').find('li').removeClass('able-focus');
+          $(this).closest('li').addClass('able-focus');
+        });
+        $chapterItem.on('hover',function() {
+          $(this).closest('ul').find('li').removeClass('able-focus');
+          $(this).addClass('able-focus');
+        });
+        $chapterItem.on('mouseleave',function() {
+          $(this).removeClass('able-focus');
+        });
+        $chapterButton.on('blur',function() {
+          $(this).closest('li').removeClass('able-focus');
+        });
+
+        // put it all together
+        $chapterItem.append($chapterButton);
+        $chaptersList.append($chapterItem);
+        if (this.defaultChapter === cues[thisChapter].id) {
+          $chapterButton.attr('aria-selected','true').parent('li').addClass('able-current-chapter');
+          this.currentChapter = cues[thisChapter];
+          hasDefault = true;
+        }
+      }
+      if (!hasDefault) {
+        // select the first chapter
+        this.currentChapter = cues[0];
+        $chaptersList.find('button').first().attr('aria-selected','true')
+          .parent('li').addClass('able-current-chapter');
+      }
+      this.$chaptersNav.html($chaptersList);
+    }
+    return false;
+  };
+
+  AblePlayer.prototype.seekToChapter = function(chapterId) {
+
+    // step through chapters looking for matching ID
+    var i=0;
+    while (i < this.selectedChapters.cues.length) {
+      if (this.selectedChapters.cues[i].id == chapterId) {
+        // found the target chapter! Seek to it
+        this.seekTo(this.selectedChapters.cues[i].start);
+        this.updateChapter(this.selectedChapters.cues[i].start);
+        break;
+      }
+      i++;
+    }
+  };
+
+  AblePlayer.prototype.updateChapter = function (now) {
+
+    // as time-synced chapters change during playback, track changes in current chapter
+    if (typeof this.selectedChapters === 'undefined') {
+      return;
+    }
+
+    var chapters, i, thisChapterIndex, chapterLabel;
+
+    chapters = this.selectedChapters.cues;
+    for (i = 0; i < chapters.length; i++) {
+      if ((chapters[i].start <= now) && (chapters[i].end > now)) {
+        thisChapterIndex = i;
+        break;
+      }
+    }
+    if (typeof thisChapterIndex !== 'undefined') {
+      if (this.currentChapter !== chapters[thisChapterIndex]) {
+        // this is a new chapter
+        this.currentChapter = chapters[thisChapterIndex];
+        if (this.useChapterTimes) {
+          this.chapterDuration = this.getChapterDuration();
+          this.seekIntervalCalculated = false; // will be recalculated in setSeekInterval()
+        }
+        if (typeof this.$chaptersDiv !== 'undefined') {
+          // chapters are listed in an external container
+          this.$chaptersDiv.find('ul').find('li').removeClass('able-current-chapter').attr('aria-selected','');
+          this.$chaptersDiv.find('ul').find('li').eq(thisChapterIndex)
+            .addClass('able-current-chapter').attr('aria-selected','true');
+        }
+      }
+    }
+  };
+
+  AblePlayer.prototype.getChapterDuration = function () {
+
+    // called if this.seekbarScope === 'chapter'
+    // get duration of the current chapter
+
+    var videoDuration, lastChapterIndex, chapterEnd;
+
+    if (typeof this.currentChapter === 'undefined') {
+      return 0;
+    }
+    videoDuration = this.getDuration();
+    lastChapterIndex = this.selectedChapters.cues.length-1;
+
+    if (this.selectedChapters.cues[lastChapterIndex] == this.currentChapter) {
+      // this is the last chapter
+      if (this.currentChapter.end !== videoDuration) {
+        // chapter ends before or after video ends, adjust chapter end to match video end
+        chapterEnd = videoDuration;
+        this.currentChapter.end = videoDuration;
+      }
+      else {
+        chapterEnd = this.currentChapter.end;
+      }
+    }
+    else { // this is not the last chapter
+      chapterEnd = this.currentChapter.end;
+    }
+    return chapterEnd - this.currentChapter.start;
+  };
+
+  AblePlayer.prototype.getChapterElapsed = function () {
+
+    // called if this.seekbarScope === 'chapter'
+    // get current elapsed time, relative to the current chapter duration
+    if (typeof this.currentChapter === 'undefined') {
+      return 0;
+    }
+    var videoDuration = this.getDuration();
+    var videoElapsed = this.getElapsed();
+    if (videoElapsed > this.currentChapter.start) {
+      return videoElapsed - this.currentChapter.start;
+    }
+    else {
+      return 0;
+    }
+  };
+
+  AblePlayer.prototype.convertChapterTimeToVideoTime = function (chapterTime) {
+
+    // chapterTime is the time within the current chapter
+    // return the same time, relative to the entire video
+    if (typeof this.currentChapter !== 'undefined') {
+      var newTime = this.currentChapter.start + chapterTime;
+      if (newTime > this.currentChapter.end) {
+        return this.currentChapter.end;
+      }
+      else {
+        return newTime;
+      }
+    }
+    else {
+      return chapterTime;
+    }
+  };
+
+})(jQuery);