iv-org/videojs-vtt-thumbnails
1
0
Fork 0
mirror of https://github.com/iv-org/videojs-vtt-thumbnails.git synced 2025-08-10 23:40:16 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #11 from chrisboustead/pr/9

Browse source 
Pr/9
This commit is contained in:
chrisboustead 2019-10-11 14:23:24 -04:00 • committed by GitHub
commit c6137368e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -71,7 +71,7 @@
"dependencies": { "dependencies": {
"global": "^4.3.2", "global": "^4.3.2",
"request": "^2.83.0", "request": "^2.83.0",
"video.js": "^5.19.2 || ^6.6.0 || ^7.2.0" "video.js": "^7.2.0 || ^6.6.0"
}, },
"devDependencies": { "devDependencies": {
"babel-plugin-external-helpers": "^6.22.0", "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) => { const onPlayerReady = (player, options) => {
player.addClass('vjs-vtt-thumbnails'); 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) { onBarMousemove (event) {
this.updateThumbnailStyle( this.updateThumbnailStyle(
this.getXCoord(this.progressBar, event.clientX), videojs.dom.getPointerPosition(this.progressBar, event).x,
this.progressBar.offsetWidth this.progressBar.offsetWidth
) )
} }
@ -220,19 +220,29 @@ class vttThumbnailsPlugin {
this.thumbnailHolder.style.opacity = '0' this.thumbnailHolder.style.opacity = '0'
} }
updateThumbnailStyle (x, width) { updateThumbnailStyle (percent, width) {
const duration = this.player.duration() const duration = this.player.duration()
const time = ((1 - ((width - x) / width))) * duration const time = percent * duration
const currentStyle = this.getStyleForTime(time) const currentStyle = this.getStyleForTime(time)
if (!currentStyle) { if (!currentStyle) {
return this.hideThumbnailHolder() return this.hideThumbnailHolder()
} }
const xPos = ((1 - ((width - x) / width))) * width const xPos = percent * width
const thumbnailWidth=parseInt(currentStyle.width)
this.thumbnailHolder.style.transform = 'translateX(' + xPos + 'px)' const halfthumbnailWidth= thumbnailWidth>> 1
this.thumbnailHolder.style.marginLeft = '-' + (parseInt(currentStyle.width) / 2) + 'px' 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) { if (this.lastStyle && this.lastStyle === currentStyle) {
return return