iv-org/videojs-vtt-thumbnails
1
0
Fork 0
mirror of https://github.com/iv-org/videojs-vtt-thumbnails.git synced 2024-11-26 23:21:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Show mouse display on hover

Browse Source
This commit is contained in:
Omar Roth 2019-05-03 08:51:27 -05:00
parent d2c40e9a0d
commit 0afc4f07c0
No known key found for this signature in database
GPG Key ID: B8254FB7EC3D37F2
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/plugin.js
View File

@ -164,15 +164,15 @@ class vttThumbnailsPlugin {
} }
setupThumbnailElement (data) { setupThumbnailElement (data) {
const mouseDisplay = this.player.$('.vjs-mouse-display')
this.progressBar = this.player.$('.vjs-progress-control') this.progressBar = this.player.$('.vjs-progress-control')
const thumbHolder = document.createElement('div') const thumbHolder = document.createElement('div')
thumbHolder.setAttribute('class', 'vjs-vtt-thumbnail-display') thumbHolder.setAttribute('class', 'vjs-vtt-thumbnail-display')
this.progressBar.appendChild(thumbHolder) this.progressBar.appendChild(thumbHolder)
this.thumbnailHolder = thumbHolder this.thumbnailHolder = thumbHolder
if(mouseDisplay) { // const mouseDisplay = this.player.$('.vjs-mouse-display');
mouseDisplay.classList.add('vjs-hidden') // if(mouseDisplay) {
} // mouseDisplay.classList.add('vjs-hidden')
// }
this.registeredEvents.progressBarMouseEnter = () => { return this.onBarMouseenter() }; this.registeredEvents.progressBarMouseEnter = () => { return this.onBarMouseenter() };
this.registeredEvents.progressBarMouseLeave = () => { return this.onBarMouseleave() }; this.registeredEvents.progressBarMouseLeave = () => { return this.onBarMouseleave() };
this.progressBar.addEventListener('mouseenter', this.registeredEvents.progressBarMouseEnter) this.progressBar.addEventListener('mouseenter', this.registeredEvents.progressBarMouseEnter)

2
src/plugin.scss
View File

@ -9,7 +9,7 @@
.vjs-vtt-thumbnail-display { .vjs-vtt-thumbnail-display {
position: absolute; position: absolute;
transition: transform .1s, opacity .2s; // transition: transform .1s, opacity .2s;
bottom: 85%; bottom: 85%;
pointer-events: none; pointer-events: none;
box-shadow: 0 0 7px rgba(0,0,0,.6); box-shadow: 0 0 7px rgba(0,0,0,.6);