Merge pull request #20 from raccoongang/master

Add tabindex support, bower.json, refactor scroll-to-center

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "videojs-transcript",
+  "version": "0.8.1",
+  "dependencies": {
+    "video.js": "^5.6.0"
+  },
+  "homepage": "https://github.com/walsh9/videojs-transcript",
+  "authors": [
+    "walsh9"
+  ],
+  "description": "",
+  "main": "",
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

dist/videojs-transcript.js

@@ -1,5 +1,5 @@
-/*! videojs-transcript - v0.8.0 - 2016-02-21
-* Copyright (c) 2016 Matthew Walsh; Licensed MIT */
+/*! videojs-transcript - v0.8.1 - 2017-04-21
+* Copyright (c) 2017 Matthew Walsh; Licensed MIT */
 (function (window, videojs) {
   'use strict';
 
@@ -376,6 +376,7 @@ var widget = function (plugin) {
     var timestamp = utils.createEl('span', '-timestamp');
     var text = utils.createEl('span', '-text');
     line.setAttribute('data-begin', cue.startTime);
+    line.setAttribute('tabindex', my._options.tabIndex || 0);
     timestamp.textContent = utils.secondsToTime(cue.startTime);
     text.innerHTML = cue.text;
     line.appendChild(timestamp);
@@ -415,8 +416,9 @@ var widget = function (plugin) {
     }
 
   };
-  var create = function () {
+  var create = function (options) {
     var el = document.createElement('div');
+    my._options = options;
     my.element = el;
     el.setAttribute('id', plugin.prefix + '-' + plugin.player.id());
     if (plugin.settings.showTitle) {
@@ -477,7 +479,7 @@ var transcript = function (options) {
   my.validTracks = trackList.get();
   my.currentTrack = trackList.active(my.validTracks);
   my.settings = videojs.mergeOptions(defaults, options);
-  my.widget = widget.create();
+  my.widget = widget.create(options);
   var timeUpdate = function () {
     my.widget.setCue(my.player.currentTime());
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "videojs-transcript",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "author": "Matthew Walsh",
   "description": "Creates interactive transcripts from text tracks.",
   "license": "MIT",

src/main.js

@@ -4,7 +4,7 @@ var transcript = function (options) {
   my.validTracks = trackList.get();
   my.currentTrack = trackList.active(my.validTracks);
   my.settings = videojs.mergeOptions(defaults, options);
-  my.widget = widget.create();
+  my.widget = widget.create(options);
   var timeUpdate = function () {
     my.widget.setCue(my.player.currentTime());
   };

src/options.js

@@ -15,5 +15,6 @@ var defaults = {
   showTitle: true,
   showTrackSelector: true,
   followPlayerTrack: true,
+  scrollToCenter: false,
   stopScrollWhenInUse: true,
 };

src/scroller.js

@@ -88,17 +88,21 @@ var scrollerProto = function(plugin) {
       var elementOffsetBottom = element.offsetTop + element.clientHeight;
       var relTop = element.offsetTop - parent.offsetTop;
       var relBottom = (element.offsetTop + element.clientHeight) - parent.offsetTop;
+      var centerPosCorrection = 0;
       var newPos;
 
+      if (plugin.settings.scrollToCenter){
+        centerPosCorrection = Math.round(parent.clientHeight/2 - element.clientHeight/2);
+      }
       // If the top of the line is above the top of the parent view, were scrolling up,
       // so we want to move the top of the element downwards to match the top of the parent.
-      if (relTop < parent.scrollTop) {
-        newPos = element.offsetTop - parent.offsetTop;
+      if (relTop < parent.scrollTop + centerPosCorrection) {
+        newPos = element.offsetTop - parent.offsetTop -centerPosCorrection;
 
       // If the bottom of the line is below the parent view, we're scrolling down, so we want the
       // bottom edge of the line to move up to meet the bottom edge of the parent.
-      } else if (relBottom > (parent.scrollTop + parent.clientHeight)) {
-        newPos = elementOffsetBottom - parentOffsetBottom;
+      } else if (relBottom > (parent.scrollTop + parent.clientHeight) - centerPosCorrection) {
+        newPos = elementOffsetBottom - parentOffsetBottom + centerPosCorrection;
       }
 
       // Don't try to scroll if we haven't set a new position.  If we didn't

src/widget.js

@@ -49,6 +49,7 @@ var widget = function (plugin) {
     var timestamp = utils.createEl('span', '-timestamp');
     var text = utils.createEl('span', '-text');
     line.setAttribute('data-begin', cue.startTime);
+    line.setAttribute('tabindex', my._options.tabIndex || 0);
     timestamp.textContent = utils.secondsToTime(cue.startTime);
     text.innerHTML = cue.text;
     line.appendChild(timestamp);
@@ -88,8 +89,9 @@ var widget = function (plugin) {
     }
 
   };
-  var create = function () {
+  var create = function (options) {
     var el = document.createElement('div');
+    my._options = options;
     my.element = el;
     el.setAttribute('id', plugin.prefix + '-' + plugin.player.id());
     if (plugin.settings.showTitle) {