diff options
Diffstat (limited to 'javascript/videojs/src/js/control-bar/progress-control/time-tooltip.js')
| -rw-r--r-- | javascript/videojs/src/js/control-bar/progress-control/time-tooltip.js | 170 |
1 files changed, 0 insertions, 170 deletions
diff --git a/javascript/videojs/src/js/control-bar/progress-control/time-tooltip.js b/javascript/videojs/src/js/control-bar/progress-control/time-tooltip.js deleted file mode 100644 index aecd8b3..0000000 --- a/javascript/videojs/src/js/control-bar/progress-control/time-tooltip.js +++ /dev/null @@ -1,170 +0,0 @@ -/** - * @file time-tooltip.js - */ -import Component from '../../component'; -import * as Dom from '../../utils/dom.js'; -import {formatTime} from '../../utils/time.js'; -import * as Fn from '../../utils/fn.js'; - -/** @import Player from '../../player' */ - -/** - * Time tooltips display a time above the progress bar. - * - * @extends Component - */ -class TimeTooltip extends Component { - - /** - * Creates an instance of this class. - * - * @param {Player} player - * The {@link Player} that this class should be attached to. - * - * @param {Object} [options] - * The key/value store of player options. - */ - constructor(player, options) { - super(player, options); - this.update = Fn.throttle(Fn.bind_(this, this.update), Fn.UPDATE_REFRESH_INTERVAL); - } - - /** - * Create the time tooltip DOM element - * - * @return {Element} - * The element that was created. - */ - createEl() { - return super.createEl('div', { - className: 'vjs-time-tooltip' - }, { - 'aria-hidden': 'true' - }); - } - - /** - * Updates the position of the time tooltip relative to the `SeekBar`. - * - * @param {Object} seekBarRect - * The `ClientRect` for the {@link SeekBar} element. - * - * @param {number} seekBarPoint - * A number from 0 to 1, representing a horizontal reference point - * from the left edge of the {@link SeekBar} - */ - update(seekBarRect, seekBarPoint, content) { - const tooltipRect = Dom.findPosition(this.el_); - const playerRect = Dom.getBoundingClientRect(this.player_.el()); - const seekBarPointPx = seekBarRect.width * seekBarPoint; - - // do nothing if either rect isn't available - // for example, if the player isn't in the DOM for testing - if (!playerRect || !tooltipRect) { - return; - } - - // This is the space left of the `seekBarPoint` available within the bounds - // of the player. We calculate any gap between the left edge of the player - // and the left edge of the `SeekBar` and add the number of pixels in the - // `SeekBar` before hitting the `seekBarPoint` - let spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx; - - // This is the space right of the `seekBarPoint` available within the bounds - // of the player. We calculate the number of pixels from the `seekBarPoint` - // to the right edge of the `SeekBar` and add to that any gap between the - // right edge of the `SeekBar` and the player. - let spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) + - (playerRect.right - seekBarRect.right); - - // spaceRightOfPoint is always NaN for mouse time display - // because the seekbarRect does not have a right property. This causes - // the mouse tool tip to be truncated when it's close to the right edge of the player. - // In such cases, we ignore the `playerRect.right - seekBarRect.right` value when calculating. - // For the sake of consistency, we ignore seekBarRect.left - playerRect.left for the left edge. - if (!spaceRightOfPoint) { - spaceRightOfPoint = seekBarRect.width - seekBarPointPx; - spaceLeftOfPoint = seekBarPointPx; - } - // This is the number of pixels by which the tooltip will need to be pulled - // further to the right to center it over the `seekBarPoint`. - let pullTooltipBy = tooltipRect.width / 2; - - // Adjust the `pullTooltipBy` distance to the left or right depending on - // the results of the space calculations above. - if (spaceLeftOfPoint < pullTooltipBy) { - pullTooltipBy += pullTooltipBy - spaceLeftOfPoint; - } else if (spaceRightOfPoint < pullTooltipBy) { - pullTooltipBy = spaceRightOfPoint; - } - - // Due to the imprecision of decimal/ratio based calculations and varying - // rounding behaviors, there are cases where the spacing adjustment is off - // by a pixel or two. This adds insurance to these calculations. - if (pullTooltipBy < 0) { - pullTooltipBy = 0; - } else if (pullTooltipBy > tooltipRect.width) { - pullTooltipBy = tooltipRect.width; - } - - // prevent small width fluctuations within 0.4px from - // changing the value below. - // This really helps for live to prevent the play - // progress time tooltip from jittering - pullTooltipBy = Math.round(pullTooltipBy); - - this.el_.style.right = `-${pullTooltipBy}px`; - this.write(content); - } - - /** - * Write the time to the tooltip DOM element. - * - * @param {string} content - * The formatted time for the tooltip. - */ - write(content) { - Dom.textContent(this.el_, content); - } - - /** - * Updates the position of the time tooltip relative to the `SeekBar`. - * - * @param {Object} seekBarRect - * The `ClientRect` for the {@link SeekBar} element. - * - * @param {number} seekBarPoint - * A number from 0 to 1, representing a horizontal reference point - * from the left edge of the {@link SeekBar} - * - * @param {number} time - * The time to update the tooltip to, not used during live playback - * - * @param {Function} cb - * A function that will be called during the request animation frame - * for tooltips that need to do additional animations from the default - */ - updateTime(seekBarRect, seekBarPoint, time, cb) { - this.requestNamedAnimationFrame('TimeTooltip#updateTime', () => { - let content; - const duration = this.player_.duration(); - - if (this.player_.liveTracker && this.player_.liveTracker.isLive()) { - const liveWindow = this.player_.liveTracker.liveWindow(); - const secondsBehind = liveWindow - (seekBarPoint * liveWindow); - - content = (secondsBehind < 1 ? '' : '-') + formatTime(secondsBehind, liveWindow); - } else { - content = formatTime(time, duration); - } - - this.update(seekBarRect, seekBarPoint, content); - if (cb) { - cb(); - } - }); - } -} - -Component.registerComponent('TimeTooltip', TimeTooltip); -export default TimeTooltip; |
