wai-website-theme 0.1.0

data/assets/ableplayer/scripts/search.js

@@ -0,0 +1,171 @@
+(function ($) {
+  AblePlayer.prototype.showSearchResults = function() {
+
+    // search VTT file for all instances of searchTerms
+    // Currently just supports search terms separated with one or more spaces
+
+    // TODO: Add support for more robust search syntax:
+    // Search terms wrapped in quotation marks ("") must occur exactly as they appear in the quotes
+    // Search terms with an attached minus sign (e.g., -term) are to be excluded from results
+    // Boolean AND/OR operators
+    // ALSO: Add localization support
+
+    var thisObj = this;
+
+    if (this.searchDiv && this.searchString) {
+      if ($('#' + this.SearchDiv)) {
+        var resultsArray = this.searchFor(this.searchString);
+        if (resultsArray.length > 0) {
+          var resultsSummary = $('<p>',{
+            'class': 'able-search-results-summary'
+          });
+          var resultsSummaryText = 'Found <strong>' + resultsArray.length + '</strong> matching items. ';
+          resultsSummaryText += 'Click the time associated with any item ';
+          resultsSummaryText += 'to play the video from that point.';
+          resultsSummary.html(resultsSummaryText);
+          var resultsList = $('<ul>');
+          for (var i = 0; i < resultsArray.length; i++) {
+            var resultsItem = $('<li>',{
+            });
+            var itemStartTime = this.secondsToTime(resultsArray[i]['start']);
+            var itemStartSpan = $('<span>',{
+              'class': 'able-search-results-time',
+              'data-start': resultsArray[i]['start'],
+              'title': itemStartTime['title'],
+              'tabindex': '0'
+            });
+            itemStartSpan.text(itemStartTime['value']);
+            // add a listener for clisk on itemStart
+            itemStartSpan.click(function(event) {
+              var spanStart = parseFloat($(this).attr('data-start'));
+              // Add a tiny amount so that we're inside the span.
+              spanStart += .01;
+              thisObj.seeking = true;
+              thisObj.seekTo(spanStart);
+            });
+
+            var itemText = $('<span>',{
+              'class': 'able-search-result-text'
+            })
+            itemText.html('...' + resultsArray[i]['caption'] + '...');
+            resultsItem.append(itemStartSpan, itemText);
+            resultsList.append(resultsItem);
+          }
+          $('#' + this.searchDiv).append(resultsSummary, resultsList);
+        }
+        else {
+          var noResults = $('<p>').text('No results found.');
+          $('#' + this.searchDiv).append(noResults);
+        }
+      }
+    }
+  };
+
+  AblePlayer.prototype.searchFor = function(searchString) {
+
+    // return chronological array of caption cues that match searchTerms
+
+    var captionLang, captions, results, caption, c, i, j;
+
+    // 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;
+      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) {
+            caption = this.flattenCueForCaption(captions[i]);
+            for (j = 0; j < searchTerms.length; j++) {
+              if (caption.indexOf(searchTerms[j]) !== -1) {
+                results[c] = [];
+                results[c]['start'] = captions[i].start;
+                results[c]['caption'] = this.highlightSearchTerm(searchTerms,j,caption);
+                c++;
+                break;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    return results;
+  };
+
+  AblePlayer.prototype.highlightSearchTerm = function(searchTerms, index, resultString) {
+
+    // highlight ALL found searchTerms in the current resultString
+    // index is the first index in the searchTerm array where a match has already been found
+    // Need to step through the remaining terms to see if they're present as well
+
+    var i, searchTerm, termIndex, termLength, str1, str2, str3;
+
+    for (i=index; i<searchTerms.length; i++) {
+
+      searchTerm = searchTerms[i];
+      termIndex = resultString.indexOf(searchTerm);
+      if (termIndex !== -1) {
+        termLength = searchTerm.length;
+        if (termLength > 0) {
+          str1 = resultString.substring(0, termIndex);
+          str2 = '<span class="able-search-term">' + searchTerm + '</span>';
+          str3 = resultString.substring(termIndex+termLength);
+          resultString = str1 + str2 + str3;
+        }
+        else {
+          str1 = '<span class="able-search-term">' + searchTerm + '</span>';
+          str2 = resultString.substring(termIndex+termLength);
+          resultString = str1 + str2;
+        }
+      }
+    }
+    return resultString;
+  };
+
+  AblePlayer.prototype.secondsToTime = function(totalSeconds) {
+
+    // return an array of totalSeconds converted into two formats
+    // time['value'] = HH:MM:SS with hours dropped if there are none
+    // time['title'] = a speakable rendering, so speech rec users can easily speak the link
+
+    // first, round down to nearest second
+    var totalSeconds = Math.floor(totalSeconds);
+
+    var hours = parseInt( totalSeconds / 3600 , 10) % 24;
+    var minutes = parseInt( totalSeconds / 60 , 10) % 60;
+    var seconds = totalSeconds % 60;
+    var value = '';
+    var title = '';
+    if (hours > 0) {
+      value += hours + ':';
+      title + hours + ' hours ';
+    }
+    if (minutes < 10) {
+      value += '0' + minutes + ':';
+      if (minutes > 0) {
+        title += minutes + ' minutes ';
+      }
+    }
+    else {
+      value += minutes + ':';
+      title += minutes + ' minutes ';
+    }
+    if (seconds < 10) {
+      value += '0' + seconds;
+      if (seconds > 0) {
+        title += seconds + ' seconds ';
+      }
+    }
+    else {
+      value += seconds;
+      title += seconds + ' seconds ';
+    }
+    var time = [];
+    time['value'] = value;
+    time['title'] = title;
+    return time;
+  };
+})(jQuery);

data/assets/ableplayer/scripts/sign.js

@@ -0,0 +1,92 @@
+(function ($) {
+  AblePlayer.prototype.initSignLanguage = function() {
+    // Sign language is only currently supported in HTML5 player, not fallback or YouTube
+    if (this.player === 'html5') {
+      // check to see if there's a sign language video accompanying this video
+      // check only the first source
+      // If sign language is provided, it must be provided for all sources
+      this.signFile = this.$sources.first().attr('data-sign-src');
+      if (this.signFile) {
+        if (this.debug) {
+          console.log('This video has an accompanying sign language video: ' + this.signFile);
+        }
+        this.hasSignLanguage = true;
+        this.injectSignPlayerCode();
+      }
+      else {
+        this.hasSignLanguage = false;
+      }
+    }
+  };
+
+  AblePlayer.prototype.injectSignPlayerCode = function() {
+
+    // create and inject surrounding HTML structure
+    // If IOS:
+    //  If video:
+    //   IOS does not support any of the player's functionality
+    //   - everything plays in its own player
+    //   Therefore, AblePlayer is not loaded & all functionality is disabled
+    //   (this all determined. If this is IOS && video, this function is never called)
+    //  If audio:
+    //   HTML cannot be injected as a *parent* of the <audio> element
+    //   It is therefore injected *after* the <audio> element
+    //   This is only a problem in IOS 6 and earlier,
+    //   & is a known bug, fixed in IOS 7
+
+    var thisObj, signVideoId, signVideoWidth, i, signSrc, srcType, $signSource;
+
+    thisObj = this;
+
+    signVideoWidth = this.getDefaultWidth('sign');
+
+    signVideoId = this.mediaId + '-sign';
+    this.$signVideo = $('<video>',{
+      'id' : signVideoId,
+      'tabindex' : '-1'
+    });
+    this.signVideo = this.$signVideo[0];
+    // for each original <source>, add a <source> to the sign <video>
+    for (i=0; i < this.$sources.length; i++) {
+      signSrc = this.$sources[i].getAttribute('data-sign-src');
+      srcType = this.$sources[i].getAttribute('type');
+      if (signSrc) {
+        $signSource = $('<source>',{
+          'src' : signSrc,
+          'type' : srcType
+        });
+        this.$signVideo.append($signSource);
+      }
+      else {
+        // source is missing a sign language version
+        // can't include sign language
+        this.hasSignLanguage = false;
+        break;
+      }
+    }
+
+    this.$signWindow = $('<div>',{
+      'class' : 'able-sign-window',
+      'tabindex': '-1'
+    });
+    this.$signToolbar = $('<div>',{
+      'class': 'able-window-toolbar able-' + this.toolbarIconColor + '-controls'
+    });
+
+    this.$signWindow.append(this.$signToolbar, this.$signVideo);
+
+    this.$ableWrapper.append(this.$signWindow);
+
+    // make it draggable
+    this.initDragDrop('sign');
+
+    if (this.prefSign === 1) {
+      // sign window is on. Go ahead and position it and show it
+      this.positionDraggableWindow('sign',this.getDefaultWidth('sign'));
+    }
+    else {
+      this.$signWindow.hide();
+    }
+  };
+
+})(jQuery);