iv-org
/
videojs-vtt-thumbnails
mirror of https://github.com/iv-org/videojs-vtt-thumbnails.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11 from chrisboustead/pr/9 

Pr/9
This commit is contained in:
chrisboustead 2019-10-11 14:23:24 -04:00 committed by GitHub
parent 7ed9779fae 6822722a7b
commit c6137368e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -71,7 +71,7 @@
"dependencies": {
"global": "^4.3.2",
"request": "^2.83.0",
"video.js": "^5.19.2 || ^6.6.0 || ^7.2.0"
"video.js": "^7.2.0 || ^6.6.0"
},
"devDependencies": {
"babel-plugin-external-helpers": "^6.22.0",

26
src/plugin.js
View File

@ -25,7 +25,7 @@ const registerPlugin = videojs.registerPlugin || videojs.plugin
*/
const onPlayerReady = (player, options) => {
player.addClass('vjs-vtt-thumbnails');
player.vttThumbnails = new vttThumbnailsPlugin(player, options)
player.vttThumbnails = new vttThumbnailsPlugin(player, options);
}
/**
@ -198,7 +198,7 @@ class vttThumbnailsPlugin {
onBarMousemove (event) {
this.updateThumbnailStyle(
this.getXCoord(this.progressBar, event.clientX),
videojs.dom.getPointerPosition(this.progressBar, event).x,
this.progressBar.offsetWidth
)
}
@ -220,19 +220,29 @@ class vttThumbnailsPlugin {
this.thumbnailHolder.style.opacity = '0'
}
updateThumbnailStyle (x, width) {
updateThumbnailStyle (percent, width) {
const duration = this.player.duration()
const time = ((1 - ((width - x) / width))) * duration
const time = percent * duration
const currentStyle = this.getStyleForTime(time)
if (!currentStyle) {
return this.hideThumbnailHolder()
}
const xPos = ((1 - ((width - x) / width))) * width
this.thumbnailHolder.style.transform = 'translateX(' + xPos + 'px)'
this.thumbnailHolder.style.marginLeft = '-' + (parseInt(currentStyle.width) / 2) + 'px'
const xPos = percent * width
const thumbnailWidth=parseInt(currentStyle.width)
const halfthumbnailWidth= thumbnailWidth>> 1
const marginRight= width-(xPos+halfthumbnailWidth);
const marginLeft= xPos-halfthumbnailWidth;
if(marginLeft >0 && marginRight>0) {
this.thumbnailHolder.style.transform = 'translateX(' + (xPos-halfthumbnailWidth) + 'px)'
}
else if(marginLeft <= 0) {
this.thumbnailHolder.style.transform = 'translateX(' + 0 + 'px)'
}
else if(marginRight <=0 ) {
this.thumbnailHolder.style.transform = 'translateX(' + (width-thumbnailWidth) + 'px)'
}
if (this.lastStyle && this.lastStyle === currentStyle) {
return