From 3654d346a4be7b249ec7d3e7774df3fcaa6ec289 Mon Sep 17 00:00:00 2001 From: dorosh Date: Thu, 15 Dec 2016 15:50:25 +0200 Subject: [PATCH 1/6] Add bower.json add repo into bower store --- bower.json | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 bower.json diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..d84094a --- /dev/null +++ b/bower.json @@ -0,0 +1,21 @@ +{ + "name": "videojs-transcript", + "version": "0.1", + "dependencies": { + "video-js": "5.13.1", + }, + "homepage": "https://github.com/raccoongang/videojs-transcript", + "authors": [ + "walsh9" + ], + "description": "", + "main": "", + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} From 4d7b072f1d6d1c448943428a9292ca230ea03327 Mon Sep 17 00:00:00 2001 From: dorosh Date: Tue, 31 Jan 2017 21:20:32 +0200 Subject: [PATCH 2/6] Add tabindex for transcript lines Add into options 'tabindex' for manage tabindex transcript lines --- dist/videojs-transcript.js | 6 ++++-- dist/videojs-transcript.min.js | 2 +- src/main.js | 2 +- src/widget.js | 4 +++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/dist/videojs-transcript.js b/dist/videojs-transcript.js index d4d4bd0..b379258 100644 --- a/dist/videojs-transcript.js +++ b/dist/videojs-transcript.js @@ -371,6 +371,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); @@ -410,8 +411,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) { @@ -472,7 +474,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()); }; diff --git a/dist/videojs-transcript.min.js b/dist/videojs-transcript.min.js index 86246de..aae82d1 100644 --- a/dist/videojs-transcript.min.js +++ b/dist/videojs-transcript.min.js @@ -1,3 +1,3 @@ /*! videojs-transcript - v0.8.0 - 2016-02-21 * Copyright (c) 2016 Matthew Walsh; Licensed MIT */ -!function(a,b){"use strict";!function(){for(var b=0,c=["ms","moz","webkit","o"],d=0;d1)throw Error("Second argument not supported");if("object"!=typeof b)throw TypeError("Argument must be an object");a.prototype=b;var c=new a;return a.prototype=null,c}}()),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c,d;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError(a+" is not a function");for(arguments.length>1&&(c=b),d=0;f>d;){var g;d in e&&(g=e[d],a.call(c,g,d,e)),d++}}),"document"in self&&!("classList"in document.createElement("_"))&&!function(a){if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++cd?"0"+d:d,c=b>0&&10>c?"0"+c:c,b>0?b+":"+c+":"+d:c+":"+d},localize:function(a){return a},createEl:function(b,c){c=c||"";var d=document.createElement(b);return d.className=a.prefix+c,d},extend:function(a){var b=typeof a;if(!("function"===b||"object"===b&&a))return a;for(var c,d,e=1,f=arguments.length;f>e;e++){c=arguments[e];for(d in c)a[d]=c[d]}return a}}}(c),f={handlers_:[],on:function(a,b,c){if("function"!=typeof c)throw new TypeError("Callback is not a function.");this.handlers_.push([a,b,c])},trigger:function(a,b){this.handlers_.forEach(function(c){c[0]===a&&c[1]===b&&c[2].apply()})}},g=function(a){var b=function(a){var b=this;a.addEventListener("scroll",function(){b.isAutoScrolling?b.isAutoScrolling=!1:(b.userIsScrolling=!0,a.classList.add("is-inuse"))}),a.addEventListener("mouseenter",function(){b.mouseIsOverTranscript=!0}),a.addEventListener("mouseleave",function(){b.mouseIsOverTranscript=!1,setTimeout(function(){b.mouseIsOverTranscript||(b.userIsScrolling=!1,a.classList.remove("is-inuse"))},1e3)})},c=function(a,c){return this.element=a,this.userIsScrolling=!1,this.mouseIsOverTranscript=!0,this.isAutoScrolling=!0,b.call(this,this.element),this},d=function(a,b,c,d){return b+c*Math.sin(Math.min(1,a/d)*(Math.PI/2))},e=function(a,b,c){var e=Date.now(),f=a.scrollTop,g=this;b=Math.max(0,b),b=Math.min(a.scrollHeight-a.clientHeight,b);var h=b-f,i=function(){var j=Date.now(),k=j-e;g.isAutoScrolling=!0,a.scrollTop=d(k,f,h,c),a.scrollTop!==b&&requestAnimationFrame(i,a)};requestAnimationFrame(i,a)},f=function(a){if(this.canScroll()){var b,c=a.parentElement,d=c.offsetTop+c.clientHeight,f=a.offsetTop+a.clientHeight,g=a.offsetTop-c.offsetTop,h=a.offsetTop+a.clientHeight-c.offsetTop;gc.scrollTop+c.clientHeight&&(b=f-d),void 0!==b&&c.scrollTop!==b&&e.call(this,c,b,400)}},g=function(){var a=this.element;return a.scrollHeight>a.offsetHeight},h=function(){return this.userIsScrolling};return{init:c,to:f,canScroll:g,inUse:h}}(c),h=function(a){return Object.create(g).init(a)},i=function(a){var b;return{get:function(){var a,b,d=[];for(c.tracks=c.player.textTracks(),a=0;af&&g>a?e.classList.contains("is-active")||(e.classList.add("is-active"),!b.settings.autoscroll||b.settings.stopScrollWhenInUse&&c.body.scroll.inUse()||c.body.scroll.to(e)):e.classList.remove("is-active")},q=function(){return c.element};return{create:n,setTrack:o,setCue:p,el:q,on:d,trigger:g}}(c),k=function(a){c.player=this,c.validTracks=i.get(),c.currentTrack=i.active(c.validTracks),c.settings=b.mergeOptions(d,a),c.widget=j.create();var e=function(){c.widget.setCue(c.player.currentTime())},f=function(){c.currentTrack=i.active(c.validTracks),c.widget.setTrack(c.currentTrack)};if(!(c.validTracks.length>0))throw new Error("videojs-transcript: No tracks found!");return f(),c.player.on("timeupdate",e),c.settings.followPlayerTrack&&(c.player.on("captionstrackchange",f),c.player.on("subtitlestrackchange",f)),{el:function(){return c.widget.el()},setTrack:c.widget.setTrack}};b.plugin("transcript",k)}(window,videojs); \ No newline at end of file +!function(a,b){"use strict";!function(){for(var b=0,c=["ms","moz","webkit","o"],d=0;d1)throw Error("Second argument not supported");if("object"!=typeof b)throw TypeError("Argument must be an object");a.prototype=b;var c=new a;return a.prototype=null,c}}()),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c,d;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError(a+" is not a function");for(arguments.length>1&&(c=b),d=0;f>d;){var g;d in e&&(g=e[d],a.call(c,g,d,e)),d++}}),"document"in self&&!("classList"in document.createElement("_"))&&!function(a){if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++cd?"0"+d:d,c=b>0&&10>c?"0"+c:c,b>0?b+":"+c+":"+d:c+":"+d},localize:function(a){return a},createEl:function(b,c){c=c||"";var d=document.createElement(b);return d.className=a.prefix+c,d},extend:function(a){var b=typeof a;if(!("function"===b||"object"===b&&a))return a;for(var c,d,e=1,f=arguments.length;f>e;e++){c=arguments[e];for(d in c)a[d]=c[d]}return a}}}(c),f={handlers_:[],on:function(a,b,c){if("function"!=typeof c)throw new TypeError("Callback is not a function.");this.handlers_.push([a,b,c])},trigger:function(a,b){this.handlers_.forEach(function(c){c[0]===a&&c[1]===b&&c[2].apply()})}},g=function(a){var b=function(a){var b=this;a.addEventListener("scroll",function(){b.isAutoScrolling?b.isAutoScrolling=!1:(b.userIsScrolling=!0,a.classList.add("is-inuse"))}),a.addEventListener("mouseenter",function(){b.mouseIsOverTranscript=!0}),a.addEventListener("mouseleave",function(){b.mouseIsOverTranscript=!1,setTimeout(function(){b.mouseIsOverTranscript||(b.userIsScrolling=!1,a.classList.remove("is-inuse"))},1e3)})},c=function(a,c){return this.element=a,this.userIsScrolling=!1,this.mouseIsOverTranscript=!0,this.isAutoScrolling=!0,b.call(this,this.element),this},d=function(a,b,c,d){return b+c*Math.sin(Math.min(1,a/d)*(Math.PI/2))},e=function(a,b,c){var e=Date.now(),f=a.scrollTop,g=this;b=Math.max(0,b),b=Math.min(a.scrollHeight-a.clientHeight,b);var h=b-f,i=function(){var j=Date.now(),k=j-e;g.isAutoScrolling=!0,a.scrollTop=d(k,f,h,c),a.scrollTop!==b&&requestAnimationFrame(i,a)};requestAnimationFrame(i,a)},f=function(a){if(this.canScroll()){var b,c=a.parentElement,d=c.offsetTop+c.clientHeight,f=a.offsetTop+a.clientHeight,g=a.offsetTop-c.offsetTop,h=a.offsetTop+a.clientHeight-c.offsetTop;gc.scrollTop+c.clientHeight&&(b=f-d),void 0!==b&&c.scrollTop!==b&&e.call(this,c,b,400)}},g=function(){var a=this.element;return a.scrollHeight>a.offsetHeight},h=function(){return this.userIsScrolling};return{init:c,to:f,canScroll:g,inUse:h}}(c),h=function(a){return Object.create(g).init(a)},i=function(a){var b;return{get:function(){var a,b,d=[];for(c.tracks=c.player.textTracks(),a=0;af&&g>a?e.classList.contains("is-active")||(e.classList.add("is-active"),!b.settings.autoscroll||b.settings.stopScrollWhenInUse&&c.body.scroll.inUse()||c.body.scroll.to(e)):e.classList.remove("is-active")},q=function(){return c.element};return{create:n,setTrack:o,setCue:p,el:q,on:d,trigger:g}}(c),k=function(a){c.player=this,c.validTracks=i.get(),c.currentTrack=i.active(c.validTracks),c.settings=b.mergeOptions(d,a),c.widget=j.create(a);var e=function(){c.widget.setCue(c.player.currentTime())},f=function(){c.currentTrack=i.active(c.validTracks),c.widget.setTrack(c.currentTrack)};if(!(c.validTracks.length>0))throw new Error("videojs-transcript: No tracks found!");return f(),c.player.on("timeupdate",e),c.settings.followPlayerTrack&&(c.player.on("captionstrackchange",f),c.player.on("subtitlestrackchange",f)),{el:function(){return c.widget.el()},setTrack:c.widget.setTrack}};b.plugin("transcript",k)}(window,videojs); diff --git a/src/main.js b/src/main.js index d987b87..a7793f2 100644 --- a/src/main.js +++ b/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()); }; diff --git a/src/widget.js b/src/widget.js index 3b26c0e..15d4e6f 100644 --- a/src/widget.js +++ b/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) { From be71451d4fda47aebcf4a298c66cea11638e05e1 Mon Sep 17 00:00:00 2001 From: Dmitry Date: Tue, 21 Mar 2017 15:45:34 +0200 Subject: [PATCH 3/6] Tabindex (#3) * Feature/scroll to center (#1) * Auto scroll to the center of transcripts block. * Fix bower.json syntax. --- README.md | 5 +++++ bower.json | 2 +- dist/videojs-transcript.js | 13 +++++++++---- dist/videojs-transcript.min.js | 2 +- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index af98899..336c947 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,11 @@ object may contain any of the following properties: Set to false to disable autoscrolling. +#### scrollToCenter +**Default:** false + +By default current row shows on the bottom on autoscrolling. Set to true to show it in the center + #### clickArea **Default:** 'line' diff --git a/bower.json b/bower.json index d84094a..97c6f9d 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,7 @@ "name": "videojs-transcript", "version": "0.1", "dependencies": { - "video-js": "5.13.1", + "video-js": "5.13.1" }, "homepage": "https://github.com/raccoongang/videojs-transcript", "authors": [ diff --git a/dist/videojs-transcript.js b/dist/videojs-transcript.js index b379258..bd68738 100644 --- a/dist/videojs-transcript.js +++ b/dist/videojs-transcript.js @@ -97,6 +97,7 @@ var defaults = { showTitle: true, showTrackSelector: true, followPlayerTrack: true, + scrollToCenter: false, stopScrollWhenInUse: true, }; @@ -246,17 +247,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 diff --git a/dist/videojs-transcript.min.js b/dist/videojs-transcript.min.js index aae82d1..5420d1e 100644 --- a/dist/videojs-transcript.min.js +++ b/dist/videojs-transcript.min.js @@ -1,3 +1,3 @@ /*! videojs-transcript - v0.8.0 - 2016-02-21 * Copyright (c) 2016 Matthew Walsh; Licensed MIT */ -!function(a,b){"use strict";!function(){for(var b=0,c=["ms","moz","webkit","o"],d=0;d1)throw Error("Second argument not supported");if("object"!=typeof b)throw TypeError("Argument must be an object");a.prototype=b;var c=new a;return a.prototype=null,c}}()),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c,d;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError(a+" is not a function");for(arguments.length>1&&(c=b),d=0;f>d;){var g;d in e&&(g=e[d],a.call(c,g,d,e)),d++}}),"document"in self&&!("classList"in document.createElement("_"))&&!function(a){if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++cd?"0"+d:d,c=b>0&&10>c?"0"+c:c,b>0?b+":"+c+":"+d:c+":"+d},localize:function(a){return a},createEl:function(b,c){c=c||"";var d=document.createElement(b);return d.className=a.prefix+c,d},extend:function(a){var b=typeof a;if(!("function"===b||"object"===b&&a))return a;for(var c,d,e=1,f=arguments.length;f>e;e++){c=arguments[e];for(d in c)a[d]=c[d]}return a}}}(c),f={handlers_:[],on:function(a,b,c){if("function"!=typeof c)throw new TypeError("Callback is not a function.");this.handlers_.push([a,b,c])},trigger:function(a,b){this.handlers_.forEach(function(c){c[0]===a&&c[1]===b&&c[2].apply()})}},g=function(a){var b=function(a){var b=this;a.addEventListener("scroll",function(){b.isAutoScrolling?b.isAutoScrolling=!1:(b.userIsScrolling=!0,a.classList.add("is-inuse"))}),a.addEventListener("mouseenter",function(){b.mouseIsOverTranscript=!0}),a.addEventListener("mouseleave",function(){b.mouseIsOverTranscript=!1,setTimeout(function(){b.mouseIsOverTranscript||(b.userIsScrolling=!1,a.classList.remove("is-inuse"))},1e3)})},c=function(a,c){return this.element=a,this.userIsScrolling=!1,this.mouseIsOverTranscript=!0,this.isAutoScrolling=!0,b.call(this,this.element),this},d=function(a,b,c,d){return b+c*Math.sin(Math.min(1,a/d)*(Math.PI/2))},e=function(a,b,c){var e=Date.now(),f=a.scrollTop,g=this;b=Math.max(0,b),b=Math.min(a.scrollHeight-a.clientHeight,b);var h=b-f,i=function(){var j=Date.now(),k=j-e;g.isAutoScrolling=!0,a.scrollTop=d(k,f,h,c),a.scrollTop!==b&&requestAnimationFrame(i,a)};requestAnimationFrame(i,a)},f=function(a){if(this.canScroll()){var b,c=a.parentElement,d=c.offsetTop+c.clientHeight,f=a.offsetTop+a.clientHeight,g=a.offsetTop-c.offsetTop,h=a.offsetTop+a.clientHeight-c.offsetTop;gc.scrollTop+c.clientHeight&&(b=f-d),void 0!==b&&c.scrollTop!==b&&e.call(this,c,b,400)}},g=function(){var a=this.element;return a.scrollHeight>a.offsetHeight},h=function(){return this.userIsScrolling};return{init:c,to:f,canScroll:g,inUse:h}}(c),h=function(a){return Object.create(g).init(a)},i=function(a){var b;return{get:function(){var a,b,d=[];for(c.tracks=c.player.textTracks(),a=0;af&&g>a?e.classList.contains("is-active")||(e.classList.add("is-active"),!b.settings.autoscroll||b.settings.stopScrollWhenInUse&&c.body.scroll.inUse()||c.body.scroll.to(e)):e.classList.remove("is-active")},q=function(){return c.element};return{create:n,setTrack:o,setCue:p,el:q,on:d,trigger:g}}(c),k=function(a){c.player=this,c.validTracks=i.get(),c.currentTrack=i.active(c.validTracks),c.settings=b.mergeOptions(d,a),c.widget=j.create(a);var e=function(){c.widget.setCue(c.player.currentTime())},f=function(){c.currentTrack=i.active(c.validTracks),c.widget.setTrack(c.currentTrack)};if(!(c.validTracks.length>0))throw new Error("videojs-transcript: No tracks found!");return f(),c.player.on("timeupdate",e),c.settings.followPlayerTrack&&(c.player.on("captionstrackchange",f),c.player.on("subtitlestrackchange",f)),{el:function(){return c.widget.el()},setTrack:c.widget.setTrack}};b.plugin("transcript",k)}(window,videojs); +!function(a,b){"use strict";!function(){for(var b=0,c=["ms","moz","webkit","o"],d=0;d1)throw Error("Second argument not supported");if("object"!=typeof b)throw TypeError("Argument must be an object");a.prototype=b;var c=new a;return a.prototype=null,c}}()),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c,d;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError(a+" is not a function");for(arguments.length>1&&(c=b),d=0;d0&&c<10?"0"+c:c,b>0?b+":"+c+":"+d:c+":"+d},localize:function(a){return a},createEl:function(b,c){c=c||"";var d=document.createElement(b);return d.className=a.prefix+c,d},extend:function(a){var b=typeof a;if(!("function"===b||"object"===b&&a))return a;for(var c,d,e=1,f=arguments.length;ec.scrollTop+c.clientHeight-i&&(j=f-d+i),void 0!==j&&c.scrollTop!==j&&e.call(this,c,j,400)}},g=function(){var a=this.element;return a.scrollHeight>a.offsetHeight},h=function(){return this.userIsScrolling};return{init:c,to:f,canScroll:g,inUse:h}}(c),h=function(a){return Object.create(g).init(a)},i=function(a){var b;return{get:function(){var b,d,a=[];for(c.tracks=c.player.textTracks(),b=0;bg&&a0))throw new Error("videojs-transcript: No tracks found!");return f(),c.player.on("timeupdate",e),c.settings.followPlayerTrack&&(c.player.on("captionstrackchange",f),c.player.on("subtitlestrackchange",f)),{el:function(){return c.widget.el()},setTrack:c.widget.setTrack}};b.plugin("transcript",k)}(window,videojs); From 324edfe7b2497f03ffa6c5f5eaa1ad838f45af76 Mon Sep 17 00:00:00 2001 From: Alexander Zayats Date: Fri, 21 Apr 2017 00:40:27 +0300 Subject: [PATCH 4/6] Fix video.js dependency name in bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 97c6f9d..cae9b66 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,7 @@ "name": "videojs-transcript", "version": "0.1", "dependencies": { - "video-js": "5.13.1" + "video.js": "5.13.1" }, "homepage": "https://github.com/raccoongang/videojs-transcript", "authors": [ From eb8ef617c6b09c58a6e35852fa0cfb311e82618c Mon Sep 17 00:00:00 2001 From: alexander Date: Fri, 21 Apr 2017 13:36:27 +0300 Subject: [PATCH 5/6] Move scroll to center changes to src and bump version to 0.8.1 --- bower.json | 4 ++-- dist/videojs-transcript.js | 4 ++-- dist/videojs-transcript.min.js | 6 +++--- package.json | 2 +- src/options.js | 1 + src/scroller.js | 12 ++++++++---- 6 files changed, 17 insertions(+), 12 deletions(-) diff --git a/bower.json b/bower.json index cae9b66..1284fdc 100644 --- a/bower.json +++ b/bower.json @@ -1,10 +1,10 @@ { "name": "videojs-transcript", - "version": "0.1", + "version": "0.8.1", "dependencies": { "video.js": "5.13.1" }, - "homepage": "https://github.com/raccoongang/videojs-transcript", + "homepage": "https://github.com/walsh9/videojs-transcript", "authors": [ "walsh9" ], diff --git a/dist/videojs-transcript.js b/dist/videojs-transcript.js index bd68738..e3f73cf 100644 --- a/dist/videojs-transcript.js +++ b/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'; diff --git a/dist/videojs-transcript.min.js b/dist/videojs-transcript.min.js index 5420d1e..d086416 100644 --- a/dist/videojs-transcript.min.js +++ b/dist/videojs-transcript.min.js @@ -1,3 +1,3 @@ -/*! videojs-transcript - v0.8.0 - 2016-02-21 -* Copyright (c) 2016 Matthew Walsh; Licensed MIT */ -!function(a,b){"use strict";!function(){for(var b=0,c=["ms","moz","webkit","o"],d=0;d1)throw Error("Second argument not supported");if("object"!=typeof b)throw TypeError("Argument must be an object");a.prototype=b;var c=new a;return a.prototype=null,c}}()),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c,d;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError(a+" is not a function");for(arguments.length>1&&(c=b),d=0;d0&&c<10?"0"+c:c,b>0?b+":"+c+":"+d:c+":"+d},localize:function(a){return a},createEl:function(b,c){c=c||"";var d=document.createElement(b);return d.className=a.prefix+c,d},extend:function(a){var b=typeof a;if(!("function"===b||"object"===b&&a))return a;for(var c,d,e=1,f=arguments.length;ec.scrollTop+c.clientHeight-i&&(j=f-d+i),void 0!==j&&c.scrollTop!==j&&e.call(this,c,j,400)}},g=function(){var a=this.element;return a.scrollHeight>a.offsetHeight},h=function(){return this.userIsScrolling};return{init:c,to:f,canScroll:g,inUse:h}}(c),h=function(a){return Object.create(g).init(a)},i=function(a){var b;return{get:function(){var b,d,a=[];for(c.tracks=c.player.textTracks(),b=0;bg&&a0))throw new Error("videojs-transcript: No tracks found!");return f(),c.player.on("timeupdate",e),c.settings.followPlayerTrack&&(c.player.on("captionstrackchange",f),c.player.on("subtitlestrackchange",f)),{el:function(){return c.widget.el()},setTrack:c.widget.setTrack}};b.plugin("transcript",k)}(window,videojs); +/*! videojs-transcript - v0.8.1 - 2017-04-21 +* Copyright (c) 2017 Matthew Walsh; Licensed MIT */ +!function(a,b){"use strict";!function(){for(var b=0,c=["ms","moz","webkit","o"],d=0;d1)throw Error("Second argument not supported");if("object"!=typeof b)throw TypeError("Argument must be an object");a.prototype=b;var c=new a;return a.prototype=null,c}}()),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c,d;if(null==this)throw new TypeError(" this is null or not defined");var e=Object(this),f=e.length>>>0;if("function"!=typeof a)throw new TypeError(a+" is not a function");for(arguments.length>1&&(c=b),d=0;f>d;){var g;d in e&&(g=e[d],a.call(c,g,d,e)),d++}}),"document"in self&&!("classList"in document.createElement("_"))&&!function(a){if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++cd?"0"+d:d,c=b>0&&10>c?"0"+c:c,b>0?b+":"+c+":"+d:c+":"+d},localize:function(a){return a},createEl:function(b,c){c=c||"";var d=document.createElement(b);return d.className=a.prefix+c,d},extend:function(a){var b=typeof a;if(!("function"===b||"object"===b&&a))return a;for(var c,d,e=1,f=arguments.length;f>e;e++){c=arguments[e];for(d in c)a[d]=c[d]}return a}}}(c),f={handlers_:[],on:function(a,b,c){if("function"!=typeof c)throw new TypeError("Callback is not a function.");this.handlers_.push([a,b,c])},trigger:function(a,b){this.handlers_.forEach(function(c){c[0]===a&&c[1]===b&&c[2].apply()})}},g=function(a){var b=function(a){var b=this;a.addEventListener("scroll",function(){b.isAutoScrolling?b.isAutoScrolling=!1:(b.userIsScrolling=!0,a.classList.add("is-inuse"))}),a.addEventListener("mouseenter",function(){b.mouseIsOverTranscript=!0}),a.addEventListener("mouseleave",function(){b.mouseIsOverTranscript=!1,setTimeout(function(){b.mouseIsOverTranscript||(b.userIsScrolling=!1,a.classList.remove("is-inuse"))},1e3)})},c=function(a,c){return this.element=a,this.userIsScrolling=!1,this.mouseIsOverTranscript=!0,this.isAutoScrolling=!0,b.call(this,this.element),this},d=function(a,b,c,d){return b+c*Math.sin(Math.min(1,a/d)*(Math.PI/2))},e=function(a,b,c){var e=Date.now(),f=a.scrollTop,g=this;b=Math.max(0,b),b=Math.min(a.scrollHeight-a.clientHeight,b);var h=b-f,i=function(){var j=Date.now(),k=j-e;g.isAutoScrolling=!0,a.scrollTop=d(k,f,h,c),a.scrollTop!==b&&requestAnimationFrame(i,a)};requestAnimationFrame(i,a)},f=function(b){if(this.canScroll()){var c,d=b.parentElement,f=d.offsetTop+d.clientHeight,g=b.offsetTop+b.clientHeight,h=b.offsetTop-d.offsetTop,i=b.offsetTop+b.clientHeight-d.offsetTop,j=0;a.settings.scrollToCenter&&(j=Math.round(d.clientHeight/2-b.clientHeight/2)),hd.scrollTop+d.clientHeight-j&&(c=g-f+j),void 0!==c&&d.scrollTop!==c&&e.call(this,d,c,400)}},g=function(){var a=this.element;return a.scrollHeight>a.offsetHeight},h=function(){return this.userIsScrolling};return{init:c,to:f,canScroll:g,inUse:h}}(c),h=function(a){return Object.create(g).init(a)},i=function(a){var b;return{get:function(){var a,b,d=[];for(c.tracks=c.player.textTracks(),a=0;af&&g>a?e.classList.contains("is-active")||(e.classList.add("is-active"),!b.settings.autoscroll||b.settings.stopScrollWhenInUse&&c.body.scroll.inUse()||c.body.scroll.to(e)):e.classList.remove("is-active")},q=function(){return c.element};return{create:n,setTrack:o,setCue:p,el:q,on:d,trigger:g}}(c),k=function(a){c.player=this,c.validTracks=i.get(),c.currentTrack=i.active(c.validTracks),c.settings=b.mergeOptions(d,a),c.widget=j.create();var e=function(){c.widget.setCue(c.player.currentTime())},f=function(){c.currentTrack=i.active(c.validTracks),c.widget.setTrack(c.currentTrack)};if(!(c.validTracks.length>0))throw new Error("videojs-transcript: No tracks found!");return f(),c.player.on("timeupdate",e),c.settings.followPlayerTrack&&(c.player.on("captionstrackchange",f),c.player.on("subtitlestrackchange",f)),{el:function(){return c.widget.el()},setTrack:c.widget.setTrack}};b.plugin("transcript",k)}(window,videojs); \ No newline at end of file diff --git a/package.json b/package.json index 261827b..974c909 100644 --- a/package.json +++ b/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", diff --git a/src/options.js b/src/options.js index 2d0b394..76f8b8a 100644 --- a/src/options.js +++ b/src/options.js @@ -15,5 +15,6 @@ var defaults = { showTitle: true, showTrackSelector: true, followPlayerTrack: true, + scrollToCenter: false, stopScrollWhenInUse: true, }; diff --git a/src/scroller.js b/src/scroller.js index fb4f54c..9e290c8 100644 --- a/src/scroller.js +++ b/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 From fa916ff5c512249b61a7c64a296be63ae104de16 Mon Sep 17 00:00:00 2001 From: alexander Date: Fri, 21 Apr 2017 13:59:32 +0300 Subject: [PATCH 6/6] Align video.js dependency in bower.json with package.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 1284fdc..b426684 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,7 @@ "name": "videojs-transcript", "version": "0.8.1", "dependencies": { - "video.js": "5.13.1" + "video.js": "^5.6.0" }, "homepage": "https://github.com/walsh9/videojs-transcript", "authors": [