iv-org-mirror/videojs-vtt-thumbnails
1
0
Fork 0
mirror of https://gitea.invidious.io/iv-org/videojs-vtt-thumbnails.git synced 2024-08-15 00:43:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fix position calcualtion

Browse source
This commit is contained in:
Chris Boustead 2018-05-16 13:58:09 -04:00
parent 8e88f57e1c
commit 3d6c6709e2
3 changed files with 9279 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9264
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -1,12 +1,12 @@
{
"name": "videojs-vtt-thumbnails",
"version": "0.0.8",
"version": "0.0.9",
"description": "Display thumnails on progress bar hover, driven by external VTT files.",
"main": "dist/videojs-vtt-thumbnails.cjs.js",
"module": "dist/videojs-vtt-thumbnails.es.js",
"repository" : {
"type" : "git",
"url" : "https://github.com/chrisboustead/videojs-vtt-thumbnails.git"
"repository": {
"type": "git",
"url": "https://github.com/chrisboustead/videojs-vtt-thumbnails.git"
},
"generator-videojs-plugin": {
"version": "5.0.3"

12
src/plugin.js
View file

@ -68,6 +68,7 @@ class vttThumbnailsPlugin {
constructor (player, options) {
this.player = player
this.options = options
this.listenForDurationChange();
this.initializeThumbnails();
this.registeredEvents = {};
return this;
@ -97,6 +98,12 @@ class vttThumbnailsPlugin {
delete this.lastStyle;
}
listenForDurationChange() {
this.player.on('durationchange', () => {
})
}
/**
* Bootstrap the plugin.
*/
@ -183,7 +190,7 @@ class vttThumbnailsPlugin {
onBarMousemove (event) {
this.updateThumbnailStyle(
event.clientX - this.progressBar.offsetLeft,
event.clientX - (this.progressBar.offsetLeft + this.player.el().offsetLeft),
this.progressBar.offsetWidth
)
}
@ -209,10 +216,13 @@ class vttThumbnailsPlugin {
const duration = this.player.duration()
const time = ((1 - ((width - x) / width))) * 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'