wai-website-theme 1.2 → 1.3

data/assets/ableplayer/scripts/langs.js

@@ -126,6 +126,10 @@
         "name":"Chinese",
         "nativeName":"中文 (Zhōngwén), 汉语, 漢語"
     },
+    "zh-tw":{
+        "name":"Chinese Traditional (Taiwan)",
+        "nativeName":"中文（台灣）"
+    },
     "cv":{
         "name":"Chuvash",
         "nativeName":"чӑваш чӗлхи"

data/assets/ableplayer/scripts/misc.js

@@ -34,6 +34,7 @@
   };
 
   AblePlayer.prototype.countProperties = function(obj) {
+
     // returns the number of properties in an object
     var count, prop;
     count = 0;
@@ -45,12 +46,35 @@
     return count;
   };
 
-  // Takes seconds and converts to string of form hh:mm:ss
-  AblePlayer.prototype.formatSecondsAsColonTime = function (seconds) {
+  AblePlayer.prototype.formatSecondsAsColonTime = function (seconds, showFullTime) {
+
+    // Takes seconds and converts to string of form hh:mm:ss
+    // If showFullTime is true, shows 00 for hours if time is less than an hour
+    //   and show milliseconds  (e.g., 00:00:04.123 as in Video Track Sorter)
+    // Otherwise, omits empty hours and milliseconds (e.g., 00:04 as in timer on controller)
+
+    var dHours, dMinutes, dSeconds,
+        parts, milliSeconds, numShort, i;
 
-    var dHours = Math.floor(seconds / 3600);
-    var dMinutes = Math.floor(seconds / 60) % 60;
-    var dSeconds = Math.floor(seconds % 60);
+    if (showFullTime) {
+      // preserve milliseconds, if included in seconds
+      parts = seconds.toString().split('.');
+      if (parts.length === 2) {
+        milliSeconds = parts[1];
+        if (milliSeconds.length < 3) {
+          numShort = 3 - milliSeconds.length;
+          for (i=1; i <= numShort; i++) {
+            milliSeconds += '0';
+          }
+        }
+      }
+      else {
+        milliSeconds = '000';
+      }
+    }
+    dHours = Math.floor(seconds / 3600);
+    dMinutes = Math.floor(seconds / 60) % 60;
+    dSeconds = Math.floor(seconds % 60);
     if (dSeconds < 10) {
       dSeconds = '0' + dSeconds;
     }
@@ -58,10 +82,55 @@
       if (dMinutes < 10) {
         dMinutes = '0' + dMinutes;
       }
-      return dHours + ':' + dMinutes + ':' + dSeconds;
+      if (showFullTime) {
+        return dHours + ':' + dMinutes + ':' + dSeconds + '.' + milliSeconds;
+      }
+      else {
+        return dHours + ':' + dMinutes + ':' + dSeconds;
+      }
     }
     else {
-      return dMinutes + ':' + dSeconds;
+      if (showFullTime) {
+        if (dHours < 1) {
+          dHours = '00';
+        }
+        else if (dHours < 10) {
+          dHours = '0' + dHours;
+        }
+        if (dMinutes < 1) {
+          dMinutes = '00';
+        }
+        else if (dMinutes < 10) {
+          dMinutes = '0' + dMinutes;
+        }
+        return dHours + ':' + dMinutes + ':' + dSeconds + '.' + milliSeconds;
+      }
+      else {
+        return dMinutes + ':' + dSeconds;
+      }
+    }
+  };
+
+  AblePlayer.prototype.getSecondsFromColonTime = function (timeStr) {
+
+    // Converts string of form hh:mm:ss to seconds
+    var timeParts, hours, minutes, seconds, newTime;
+
+    timeParts = timeStr.split(':');
+    if (timeParts.length === 3) {
+      hours = parseInt(timeParts[0]);
+      minutes = parseInt(timeParts[1]);
+      seconds = parseFloat(timeParts[2]);
+      return ((hours * 3600) + (minutes * 60) + (seconds));
+    }
+    else if (timeParts.length === 2) {
+      minutes = parseInt(timeParts[0]);
+      seconds = parseFloat(timeParts[1]);
+      return ((minutes * 60) + (seconds));
+    }
+    else if (timeParts.length === 1) {
+      seconds = parseFloat(timeParts[0]);
+      return seconds;
     }
   };
 

data/assets/ableplayer/scripts/preference.js

@@ -721,8 +721,8 @@
       thisObj.resetPrefsForm();
     })
     // Add handler for escape key
-    $('div.able-prefs-form').keydown(function(event) {
-      if (event.which === 27) { // escape
+    $('div.able-prefs-form').keydown(function(e) {
+      if (e.which === 27) { // escape
         thisObj.resetPrefsForm();
       }
     });

data/assets/ableplayer/scripts/search.js

@@ -36,7 +36,7 @@
             });
             itemStartSpan.text(itemStartTime['value']);
             // add a listener for clisk on itemStart
-            itemStartSpan.click(function(event) {
+            itemStartSpan.click(function(e) {
               var spanStart = parseFloat($(this).attr('data-start'));
               // Add a tiny amount so that we're inside the span.
               spanStart += .01;
@@ -64,16 +64,19 @@
   AblePlayer.prototype.searchFor = function(searchString) {
 
     // return chronological array of caption cues that match searchTerms
-
     var captionLang, captions, results, caption, c, i, j;
-
+    results = [];
     // split searchTerms into an array
     var searchTerms = searchString.split(' ');
     if (this.captions.length > 0) {
-      captionLang = this.captions[0].language; // in case it's needed later
-      captions = this.captions[0].cues;
+      // Get caption track that matches this.searchLang
+      for (i=0; i < this.captions.length; i++) {
+        if (this.captions[i].language === this.searchLang) {
+          captionLang = this.searchLang;
+          captions = this.captions[i].cues;
+        }
+      }
       if (captions.length > 0) {
-        var results = [];
         c = 0;
         for (i = 0; i < captions.length; i++) {
           if ($.inArray(captions[i].components.children[0]['type'], ['string','i','b','u','v','c']) !== -1) {
@@ -82,6 +85,7 @@
               if (caption.indexOf(searchTerms[j]) !== -1) {
                 results[c] = [];
                 results[c]['start'] = captions[i].start;
+                results[c]['lang'] = captionLang;
                 results[c]['caption'] = this.highlightSearchTerm(searchTerms,j,caption);
                 c++;
                 break;
@@ -91,7 +95,6 @@
         }
       }
     }
-
     return results;
   };
 

data/assets/ableplayer/scripts/slider.js

@@ -67,6 +67,7 @@
 
     this.timeTooltip.attr('role', 'tooltip');
     this.timeTooltip.addClass('able-tooltip');
+    this.timeTooltip.hide();
 
     this.bodyDiv.append(this.loadedDiv);
     this.bodyDiv.append(this.playedDiv);
@@ -95,30 +96,30 @@
       this.setDuration(max);
     }
 
-    this.seekHead.hover(function (event) {
+    this.seekHead.hover(function (e) {
       thisObj.overHead = true;
       thisObj.refreshTooltip();
-    }, function (event) {
+    }, function (e) {
       thisObj.overHead = false;
 
       if (!thisObj.overBody && thisObj.tracking && thisObj.trackDevice === 'mouse') {
-        thisObj.stopTracking(thisObj.pageXToPosition(event.pageX));
+        thisObj.stopTracking(thisObj.pageXToPosition(e.pageX));
       }
       thisObj.refreshTooltip();
     });
 
-    this.seekHead.mousemove(function (event) {
+    this.seekHead.mousemove(function (e) {
       if (thisObj.tracking && thisObj.trackDevice === 'mouse') {
-        thisObj.trackHeadAtPageX(event.pageX);
+        thisObj.trackHeadAtPageX(e.pageX);
       }
     });
 
-    this.seekHead.focus(function (event) {
+    this.seekHead.focus(function (e) {
       thisObj.overHead = true;
       thisObj.refreshTooltip();
     });
 
-    this.seekHead.blur(function (event) {
+    this.seekHead.blur(function (e) {
       thisObj.overHead = false;
       thisObj.refreshTooltip();
     });
@@ -126,94 +127,94 @@
     this.bodyDiv.hover(function () {
       thisObj.overBody = true;
       thisObj.refreshTooltip();
-    }, function (event) {
+    }, function (e) {
       thisObj.overBody = false;
       thisObj.overBodyMousePos = null;
       thisObj.refreshTooltip();
 
       if (!thisObj.overHead && thisObj.tracking && thisObj.trackDevice === 'mouse') {
-        thisObj.stopTracking(thisObj.pageXToPosition(event.pageX));
+        thisObj.stopTracking(thisObj.pageXToPosition(e.pageX));
       }
     });
 
-    this.bodyDiv.mousemove(function (event) {
+    this.bodyDiv.mousemove(function (e) {
       thisObj.overBodyMousePos = {
-        x: event.pageX,
-        y: event.pageY
+        x: e.pageX,
+        y: e.pageY
       };
       if (thisObj.tracking && thisObj.trackDevice === 'mouse') {
-        thisObj.trackHeadAtPageX(event.pageX);
+        thisObj.trackHeadAtPageX(e.pageX);
       }
       thisObj.refreshTooltip();
     });
 
-    this.bodyDiv.mousedown(function (event) {
-      thisObj.startTracking('mouse', thisObj.pageXToPosition(event.pageX));
-      thisObj.trackHeadAtPageX(event.pageX);
+    this.bodyDiv.mousedown(function (e) {
+      thisObj.startTracking('mouse', thisObj.pageXToPosition(e.pageX));
+      thisObj.trackHeadAtPageX(e.pageX);
       if (!thisObj.seekHead.is(':focus')) {
         thisObj.seekHead.focus();
       }
-      event.preventDefault();
+      e.preventDefault();
     });
 
-    this.seekHead.mousedown(function (event) {
+    this.seekHead.mousedown(function (e) {
       thisObj.startTracking('mouse', thisObj.pageXToPosition(thisObj.seekHead.offset() + (thisObj.seekHead.width() / 2)));
       if (!thisObj.bodyDiv.is(':focus')) {
         thisObj.bodyDiv.focus();
       }
-      event.preventDefault();
+      e.preventDefault();
     });
 
-    this.bodyDiv.mouseup(function (event) {
+    this.bodyDiv.mouseup(function (e) {
       if (thisObj.tracking && thisObj.trackDevice === 'mouse') {
-        thisObj.stopTracking(thisObj.pageXToPosition(event.pageX));
+        thisObj.stopTracking(thisObj.pageXToPosition(e.pageX));
       }
     })
 
-    this.seekHead.mouseup(function (event) {
+    this.seekHead.mouseup(function (e) {
       if (thisObj.tracking && thisObj.trackDevice === 'mouse') {
-        thisObj.stopTracking(thisObj.pageXToPosition(event.pageX));
+        thisObj.stopTracking(thisObj.pageXToPosition(e.pageX));
       }
     });
 
-    this.bodyDiv.keydown(function (event) {
+    this.bodyDiv.keydown(function (e) {
       // Home
-      if (event.which === 36) {
+      if (e.which === 36) {
         thisObj.trackImmediatelyTo(0);
       }
       // End
-      else if (event.which === 35) {
+      else if (e.which === 35) {
         thisObj.trackImmediatelyTo(thisObj.duration);
       }
       // Left arrow or down arrow
-      else if (event.which === 37 || event.which === 40) {
+      else if (e.which === 37 || e.which === 40) {
         thisObj.arrowKeyDown(-1);
       }
       // Right arrow or up arrow
-      else if (event.which === 39 || event.which === 38) {
+      else if (e.which === 39 || e.which === 38) {
         thisObj.arrowKeyDown(1);
       }
       // Page up
-      else if (event.which === 33 && bigInterval > 0) {
+      else if (e.which === 33 && bigInterval > 0) {
         thisObj.arrowKeyDown(bigInterval);
       }
       // Page down
-      else if (event.which === 34 && bigInterval > 0) {
+      else if (e.which === 34 && bigInterval > 0) {
         thisObj.arrowKeyDown(-bigInterval);
       }
 
       else {
         return;
       }
-      event.preventDefault();
+      e.preventDefault();
     });
 
-    this.bodyDiv.keyup(function (event) {
-      if (event.which >= 33 && event.which <= 40) {
+    this.bodyDiv.keyup(function (e) {
+      if (e.which >= 33 && e.which <= 40) {
         if (thisObj.tracking && thisObj.trackDevice === 'keyboard') {
           thisObj.stopTracking(thisObj.keyTrackPosition);
         }
-        event.preventDefault();
+        e.preventDefault();
       }
     });
   }

data/assets/ableplayer/scripts/track.js

@@ -16,13 +16,20 @@
     this.descriptions = [];
     this.chapters = [];
     this.meta = [];
+    if ($('#able-vts').length) {
+      // Page includes a container for a VTS instance
+      this.vtsTracks = [];
+      this.hasVts = true;
+    }
+    else {
+      this.hasVts = false;
+    }
 
     var loadingPromises = [];
     for (var ii = 0; ii < this.$tracks.length; ii++) {
       var track = this.$tracks[ii];
       var kind = track.getAttribute('kind');
       var trackSrc = track.getAttribute('src');
-
       var isDefaultTrack = track.getAttribute('default');
 
       if (!trackSrc) {
@@ -32,17 +39,37 @@
 
       var loadingPromise = this.loadTextObject(trackSrc);
       loadingPromises.push(loadingPromise);
-      loadingPromise.then((function (track, kind) {
+      loadingPromise.then((function (track, kind, trackLang, trackLabel) {
+
+        // srcLang should always be included with <track>, but HTML5 spec doesn't require it
+        // if not provided, assume track is the same language as the default player language
+        var trackLang = track.getAttribute('srclang') || thisObj.lang;
+        var trackLabel = track.getAttribute('label') || thisObj.getLanguageName(trackLang);
+
         return function (trackSrc, trackText) {
-          var cues = thisObj.parseWebVTT(trackSrc, trackText).cues;
+
+          var trackContents = trackText;
+
+          // convert XMl/TTML captions file
+          if (thisObj.useTtml && (trackSrc.endsWith('.xml') || trackText.startsWith('<?xml'))) {
+            trackContents = thisObj.ttml2webvtt(trackText);
+          }
+
+          if (thisObj.hasVts) {
+            // setupVtsTracks() is in vts.js
+            thisObj.setupVtsTracks(kind, trackLang, trackLabel, trackSrc, trackContents);
+          }
+
+          var cues = thisObj.parseWebVTT(trackSrc, trackContents).cues;
+
           if (kind === 'captions' || kind === 'subtitles') {
-            thisObj.setupCaptions(track, cues);
+            thisObj.setupCaptions(track, cues, trackLang, trackLabel);
           }
           else if (kind === 'descriptions') {
-            thisObj.setupDescriptions(track, cues);
+            thisObj.setupDescriptions(track, cues, trackLang);
           }
           else if (kind === 'chapters') {
-            thisObj.setupChapters(track, cues);
+            thisObj.setupChapters(track, cues, trackLang);
           }
           else if (kind === 'metadata') {
             thisObj.setupMetadata(track, cues);
@@ -57,13 +84,9 @@
     return promise;
   };
 
-  AblePlayer.prototype.setupCaptions = function (track, cues) {
+  AblePlayer.prototype.setupCaptions = function (track, cues, trackLang, trackLabel) {
 
     this.hasCaptions = true;
-    // srcLang should always be included with <track>, but HTML5 spec doesn't require it
-    // if not provided, assume track is the same language as the default player language
-    var trackLang = track.getAttribute('srclang') || this.lang;
-    var trackLabel = track.getAttribute('label') || this.getLanguageName(trackLang);
     if (typeof track.getAttribute('default') == 'string') {
       var isDefaultTrack = true;
       // Now remove 'default' attribute from <track>
@@ -88,7 +111,7 @@
         this.$captionsWrapper = $('<div>',{
           'class': 'able-captions-wrapper',
           'aria-hidden': 'true'
-        });
+        }).hide();
         if (this.prefCaptionsPosition === 'below') {
           this.$captionsWrapper.addClass('able-captions-below');
         }
@@ -188,16 +211,12 @@
   };
 
 
-  AblePlayer.prototype.setupDescriptions = function (track, cues) {
+  AblePlayer.prototype.setupDescriptions = function (track, cues, trackLang) {
 
     // called via setupTracks() only if there is track with kind="descriptions"
     // prepares for delivery of text description , in case it's needed
     // whether and how it's delivered is controlled within description.js > initDescription()
 
-    // srcLang should always be included with <track>, but HTML5 spec doesn't require it
-    // if not provided, assume track is the same language as the default player language
-    var trackLang = track.getAttribute('srclang') || this.lang;
-
     this.hasClosedDesc = true;
     this.currentDescription = -1;
     this.descriptions.push({
@@ -206,15 +225,11 @@
     });
   };
 
-  AblePlayer.prototype.setupChapters = function (track, cues) {
+  AblePlayer.prototype.setupChapters = function (track, cues, trackLang) {
 
     // NOTE: WebVTT supports nested timestamps (to form an outline)
     // This is not currently supported.
 
-    // srcLang should always be included with <track>, but HTML5 spec doesn't require it
-    // if not provided, assume track is the same language as the default player language
-    var trackLang = track.getAttribute('srclang') || this.lang;
-
     this.hasChapters = true;
 
     this.chapters.push({
@@ -224,6 +239,7 @@
   };
 
   AblePlayer.prototype.setupMetadata = function(track, cues) {
+
     if (this.metaType === 'text') {
       // Metadata is only supported if data-meta-div is provided
       // The player does not display metadata internally