diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss index f9315cb0dc..e3c035cbf8 100644 --- a/src/css/components/_progress.scss +++ b/src/css/components/_progress.scss @@ -27,7 +27,17 @@ .video-js .vjs-play-progress { background-color: $primary-text; + @extend .vjs-icon-circle; + + // Progress handle + &:before { + position: absolute; + top: -0.35em; + right: -0.5em; + + } } + .video-js .vjs-load-progress { background: rgb(100, 100, 100) /* IE8- Fallback */; background: rgba(255, 255, 255, 0.2); @@ -39,12 +49,6 @@ specific time ranges that have been buffered */ background: rgba($secondary-bg, 0.1); } -.video-js .vjs-slider-handle.vjs-seek-handle { - width: 0.95em; - height: 0.95em; -} - - .video-js.vjs-no-flex .vjs-progress-control { width: auto; } diff --git a/src/css/components/_slider.scss b/src/css/components/_slider.scss index 7f6f4bf8ae..d505c678da 100644 --- a/src/css/components/_slider.scss +++ b/src/css/components/_slider.scss @@ -12,28 +12,3 @@ @include box-shadow(0 0 1em $primary-text); } - -.video-js .vjs-slider-handle { - position: absolute; - @extend .vjs-icon-circle; -} - -.video-js .vjs-slider-horizontal .vjs-slider-handle { - left: 0; - top: -0.34em; -} - -.video-js .vjs-slider-vertical .vjs-slider-handle { - left: -0.3em; - bottom: 0; -} - -.video-js .vjs-slider-handle:before { - font-size: 1em; - line-height: 1; - text-align: center; - - position: absolute; - top: 0; - left: 0; -} diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss index 25ea6b2421..d9034f9ee0 100644 --- a/src/css/components/_volume.scss +++ b/src/css/components/_volume.scss @@ -41,27 +41,37 @@ left: 0; background-color: $primary-text; + + @extend .vjs-icon-circle; + + // Volume handle + &:before { + position: absolute; + } } -.video-js .vjs-slider-vertical .vjs-volume-level { width: 0.3em; } -.video-js .vjs-slider-horizontal .vjs-volume-level { height: 0.3em; } +.video-js .vjs-slider-vertical .vjs-volume-level { + width: 0.3em; + + // Volume handle + &:before { + top: -0.5em; + left: -0.35em; + } +} +.video-js .vjs-slider-horizontal .vjs-volume-level { + height: 0.3em; -.video-js .vjs-volume-bar .vjs-volume-handle { - width: 0.8em; - height: 0.8em; + // Volume handle + &:before { + top: -0.35em; + right: -0.5em; + } } -/* Assumes volume starts at 1.0. If you change the size of the -handle relative to the volume bar, you'll need to update this value -too. */ +/* Assumes volume starts at 1.0. */ .video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level { height: 100%; } -.video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-handle { bottom: 4.3em; } .video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { width: 100%; } -.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-handle { left: 4.3em; } - -.video-js .vjs-volume-handle:before { - font-size: 0.9em; -} /* The volume menu button is like menu buttons (captions/subtitles) but works a little differently. It needs to be possible to tab to the volume slider diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 7b23bffe58..85700ae22c 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -1,7 +1,6 @@ import Slider from '../../slider/slider.js'; import LoadProgressBar from './load-progress-bar.js'; import PlayProgressBar from './play-progress-bar.js'; -import SeekHandle from './seek-handle.js'; import * as Fn from '../../utils/fn.js'; import formatTime from '../../utils/format-time.js'; import roundFloat from '../../utils/round-float.js'; @@ -81,11 +80,9 @@ class SeekBar extends Slider { SeekBar.prototype.options_ = { children: { 'loadProgressBar': {}, - 'playProgressBar': {}, - 'seekHandle': {} + 'playProgressBar': {} }, - 'barName': 'playProgressBar', - 'handleName': 'seekHandle' + 'barName': 'playProgressBar' }; SeekBar.prototype.playerEvent = 'timeupdate'; diff --git a/src/js/control-bar/progress-control/seek-handle.js b/src/js/control-bar/progress-control/seek-handle.js deleted file mode 100644 index 266ff258a3..0000000000 --- a/src/js/control-bar/progress-control/seek-handle.js +++ /dev/null @@ -1,43 +0,0 @@ -import SliderHandle from '../../slider/slider-handle.js'; -import formatTime from '../../utils/format-time.js'; - -/** - * The Seek Handle shows the current position of the playhead during playback, - * and can be dragged to adjust the playhead. - * - * @param {Player|Object} player - * @param {Object=} options - * @constructor - */ -class SeekHandle extends SliderHandle { - - constructor(player, options) { - super(player, options); - this.on(player, 'timeupdate', this.updateContent); - } - - /** @inheritDoc */ - createEl() { - return super.createEl('div', { - className: 'vjs-seek-handle', - 'aria-live': 'off' - }); - } - - updateContent() { - let time = (this.player_.scrubbing) ? this.player_.getCache().currentTime : this.player_.currentTime(); - this.el_.innerHTML = `${formatTime(time, this.player_.duration())}`; - } - -} - -/** - * The default value for the handle content, which may be read by screen readers - * - * @type {String} - * @private - */ -SeekHandle.prototype.defaultValue = '00:00'; - -SliderHandle.registerComponent('SeekHandle', SeekHandle); -export default SeekHandle; diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js index 027f258a47..330155829f 100644 --- a/src/js/control-bar/volume-control/volume-bar.js +++ b/src/js/control-bar/volume-control/volume-bar.js @@ -3,7 +3,6 @@ import * as Fn from '../../utils/fn.js'; import roundFloat from '../../utils/round-float.js'; // Required children -import VolumeHandle from './volume-handle.js'; import VolumeLevel from './volume-level.js'; /** @@ -62,11 +61,9 @@ class VolumeBar extends Slider { VolumeBar.prototype.options_ = { children: { - 'volumeLevel': {}, - 'volumeHandle': {} + 'volumeLevel': {} }, - 'barName': 'volumeLevel', - 'handleName': 'volumeHandle' + 'barName': 'volumeLevel' }; VolumeBar.prototype.playerEvent = 'volumechange'; diff --git a/src/js/control-bar/volume-control/volume-handle.js b/src/js/control-bar/volume-control/volume-handle.js deleted file mode 100644 index 7dbd612764..0000000000 --- a/src/js/control-bar/volume-control/volume-handle.js +++ /dev/null @@ -1,24 +0,0 @@ -import SliderHandle from '../../slider/slider-handle.js'; - -/** - * The volume handle can be dragged to adjust the volume level - * - * @param {Player|Object} player - * @param {Object=} options - * @constructor - */ -class VolumeHandle extends SliderHandle { - - /** @inheritDoc */ - createEl() { - return super.createEl('div', { - className: 'vjs-volume-handle' - }); - } - -} - -VolumeHandle.prototype.defaultValue = '00:00'; - -SliderHandle.registerComponent('VolumeHandle', VolumeHandle); -export default VolumeHandle; diff --git a/src/js/slider/slider-handle.js b/src/js/slider/slider-handle.js deleted file mode 100644 index b06e1a6f01..0000000000 --- a/src/js/slider/slider-handle.js +++ /dev/null @@ -1,28 +0,0 @@ -import Component from '../component.js'; -import assign from 'object.assign'; - -/** - * SeekBar Behavior includes play progress bar, and seek handle - * Needed so it can determine seek position based on handle position/size - * @param {Player|Object} player - * @param {Object=} options - * @constructor - */ -class SliderHandle extends Component { - - /** @inheritDoc */ - createEl(type, props) { - props = props || {}; - // Add the slider element class to all sub classes - props.className = props.className + ' vjs-slider-handle'; - props = assign({ - innerHTML: `${this.defaultValue || 0}` - }, props); - - return super.createEl('div', props); - } - -} - -Component.registerComponent('SliderHandle', SliderHandle); -export default SliderHandle; diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js index 70612ed0d0..21ab37c186 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -99,12 +99,8 @@ class Slider extends Component { progress = 0; } - // If there is a handle, we need to account for the handle in our calculation for progress bar - // so that it doesn't fall short of or extend past the handle. - let barProgress = this.updateHandlePosition(progress); - // Convert to a percentage for setting - let percentage = roundFloat(barProgress * 100, 2) + '%'; + let percentage = roundFloat(progress * 100, 2) + '%'; // Set the new bar width or height if (this.vertical()) { @@ -114,50 +110,6 @@ class Slider extends Component { } } - /** - * Update the handle position. - */ - updateHandlePosition(progress) { - let handle = this.handle; - if (!handle) return; - - let vertical = this.vertical(); - let box = this.el_; - - let boxSize, handleSize; - if (vertical) { - boxSize = box.offsetHeight; - handleSize = handle.el().offsetHeight; - } else { - boxSize = box.offsetWidth; - handleSize = handle.el().offsetWidth; - } - - // The width of the handle in percent of the containing box - // In IE, widths may not be ready yet causing NaN - let handlePercent = (handleSize) ? handleSize / boxSize : 0; - - // Get the adjusted size of the box, considering that the handle's center never touches the left or right side. - // There is a margin of half the handle's width on both sides. - let boxAdjustedPercent = 1 - handlePercent; - - // Adjust the progress that we'll use to set widths to the new adjusted box width - let adjustedProgress = progress * boxAdjustedPercent; - - // The bar does reach the left side, so we need to account for this in the bar's width - let barProgress = adjustedProgress + (handlePercent / 2); - - let percentage = roundFloat(adjustedProgress * 100, 2) + '%'; - - if (vertical) { - handle.el().style.bottom = percentage; - } else { - handle.el().style.left = percentage; - } - - return barProgress; - } - calculateDistance(event){ let el = this.el_; let box = Dom.findPosition(el); diff --git a/test/api/api.js b/test/api/api.js index 714eb8428d..c6d4dd10fd 100644 --- a/test/api/api.js +++ b/test/api/api.js @@ -169,12 +169,10 @@ test('should export useful components to the public', function () { ok(videojs.getComponent('SeekBar'), 'SeekBar should be public'); ok(videojs.getComponent('LoadProgressBar'), 'LoadProgressBar should be public'); ok(videojs.getComponent('PlayProgressBar'), 'PlayProgressBar should be public'); - ok(videojs.getComponent('SeekHandle'), 'SeekHandle should be public'); ok(videojs.getComponent('VolumeControl'), 'VolumeControl should be public'); ok(videojs.getComponent('VolumeBar'), 'VolumeBar should be public'); ok(videojs.getComponent('VolumeLevel'), 'VolumeLevel should be public'); ok(videojs.getComponent('VolumeMenuButton'), 'VolumeMenuButton should be public'); - ok(videojs.getComponent('VolumeHandle'), 'VolumeHandle should be public'); ok(videojs.getComponent('MuteToggle'), 'MuteToggle should be public'); ok(videojs.getComponent('PosterImage'), 'PosterImage should be public'); ok(videojs.getComponent('Menu'), 'Menu should be public');