diff --git a/index.html b/index.html index a9412853ba..2b23b9795f 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@

Navigation

  • Hls Demo
  • Autoplay Tests
  • noUITitleAttributes Demo
    • +
  • keepTimeTooltipInSeekBar Demo
  • Videojs debug build test page
    • diff --git a/sandbox/keepTimeTooltipInSeekBar.html.example b/sandbox/keepTimeTooltipInSeekBar.html.example new file mode 100644 index 0000000000..343ab48c4a --- /dev/null +++ b/sandbox/keepTimeTooltipInSeekBar.html.example @@ -0,0 +1,38 @@ + + + + + Video.js keep time tooltip in seek bar example + + + + +
    +

    You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html

    + 
    npm start
    + 
    open http://localhost:9999/sandbox/keepTimeTooltipInSeekBar.html
    +
    + + + + + + +

    To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

    +     + + + + + diff --git a/src/js/control-bar/progress-control/time-tooltip.js b/src/js/control-bar/progress-control/time-tooltip.js index ede9bb4d76..84c951f220 100644 --- a/src/js/control-bar/progress-control/time-tooltip.js +++ b/src/js/control-bar/progress-control/time-tooltip.js @@ -66,34 +66,60 @@ class TimeTooltip extends Component { // 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` - const spaceLeftOfPoint = (seekBarRect.left - playerRect.left) + seekBarPointPx; + 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. - const spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) + + let spaceRightOfPoint = (seekBarRect.width - seekBarPointPx) + (playerRect.right - seekBarRect.right); + if (this.options_.playerOptions.keepTimeTooltipInSeekBar) { + // This is the space right of the `seekBarPoint` in the `SeekBar` + spaceRightOfPoint = seekBarRect.width - seekBarPointPx; + + // This is the space left of the `seekBarPoint` in the `SeekBar` + spaceLeftOfPoint = seekBarRect.width - spaceRightOfPoint; + } + // 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; - } + if (this.options_.playerOptions.keepTimeTooltipInSeekBar) { + // The center of `seekBar` + const centerPosition = seekBarRect.width / 2; + + // Offset value of the `centerPosition` + const centerOffsetOfPoint = centerPosition - seekBarPointPx; + + // If `tooltipRect` is greater than `seekBarRect` then center the tooltip, + // else patch the offset value of the tooltip overflow space. + if (tooltipRect.width > seekBarRect.width) { + pullTooltipBy += centerOffsetOfPoint; + } else if (spaceLeftOfPoint < pullTooltipBy) { + pullTooltipBy += pullTooltipBy - spaceLeftOfPoint; + } else if (spaceRightOfPoint < pullTooltipBy) { + pullTooltipBy -= pullTooltipBy - spaceRightOfPoint; + } + } else { + // 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; + // 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