web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-11-24 08:42:25 +02:00
Code Releases Activity

Added a currentTime tooltip to the progress handle

Browse Source 
- added data-current-time attr to PlayProgressBar
- show data-current-time attr in tooltip on hover
- separate hover state from styling

closes #2255
This commit is contained in:
Matthew McClure 2015-06-10 17:43:40 -07:00 committed by heff
parent db3e58b653
commit ba4ab80455
4 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -57,6 +57,7 @@ CHANGELOG
* @gkatsev fixed the texttrackchange event and text track display for non-native tracks ([view](https://github.com/videojs/video.js/pull/2215))
* @mischizzle fixed event.relatedTarget in Firefox ([view](https://github.com/videojs/video.js/pull/2025))
* @mboles updated JSDoc comments everywhere to prepare for new docs ([view](https://github.com/videojs/video.js/pull/2270))
* @mmcc added a currentTime tooltip to the progress handle ([view](https://github.com/videojs/video.js/pull/2255))
--------------------

25
src/css/components/_progress.scss
View File

@ -27,6 +27,16 @@
/* We need an increased hit area on hover */
.video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1.666666666666666666em }
/* Also show the current time tooltip */
.video-js .vjs-progress-control:hover .vjs-play-progress:after {
display: block;
/* If we let the font size grow as much as everything else, the current time tooltip ends up
ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
to avoid a weird hitch when you roll off the hover. */
font-size: 0.6em;
}
/* Progress Bars */
.video-js .vjs-progress-holder .vjs-play-progress,
.video-js .vjs-progress-holder .vjs-load-progress,
@ -58,6 +68,21 @@
}
}
// Current Time "tooltip"
.video-js .vjs-play-progress:after {
/* By default this is hidden and only shown when hovering over the progress control */
display: none;
position: absolute;
top: -2.4em;
right: -1.5em;
font-size: 0.9em;
color: $primary-bg;
content: attr(data-current-time);
padding: 0.2em 0.5em;
@include background-color-with-alpha($primary-text, 0.8);
@include border-radius(0.3em);
}
.video-js .vjs-load-progress {
background: rgb(100, 100, 100) /* IE8- Fallback */;
background: rgba(255, 255, 255, 0.2);

1
src/css/components/_time.scss
View File

@ -5,5 +5,6 @@
}
/* We need the extra specificity that referencing .vjs-no-flex provides. */
.video-js .vjs-current-time, .video-js.vjs-no-flex .vjs-current-time { display: none; }
.video-js .vjs-duration, .video-js.vjs-no-flex .vjs-duration { display: none; }
.vjs-time-divider { display: none; line-height: 3em; }

13
src/js/control-bar/progress-control/play-progress-bar.js
View File

@ -2,6 +2,8 @@
* @file play-progress-bar.js
*/
import Component from '../../component.js';
import * as Fn from '../../utils/fn.js';
import formatTime from '../../utils/format-time.js';
/**
* Shows play progress
@ -13,6 +15,12 @@ import Component from '../../component.js';
*/
class PlayProgressBar extends Component {
constructor(player, options){
super(player, options);
this.on(player, 'timeupdate', this.updateDataAttr);
player.ready(Fn.bind(this, this.updateDataAttr));
}
/**
* Create the component's DOM element
*
@ -26,6 +34,11 @@ class PlayProgressBar extends Component {
});
}
updateDataAttr() {
let time = (this.player_.scrubbing()) ? this.player_.getCache().currentTime : this.player_.currentTime();
this.el_.setAttribute('data-current-time', formatTime(time, this.player_.duration()));
}
}
Component.registerComponent('PlayProgressBar', PlayProgressBar);