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

Fix position calcualtion

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

12
src/plugin.js
View File

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