Moved to pure css slider handles

closes #2132

removed slider handle classes

Got rid of left-over handle styles

CHANGELOG.md

@@ -33,6 +33,7 @@ CHANGELOG
 * @heff reorganized all utility functions in the codebase ([view](https://github.com/videojs/video.js/pull/2139))
 * @eXon made additional tech 2.0 improvements listed in #2126 ([view](https://github.com/videojs/video.js/pull/2166))
 * @heff Cleaned up and documented src/js/video.js and DOM functions ([view](https://github.com/videojs/video.js/pull/2182))
+* @mmcc Changed to pure CSS slider handles ([view](https://github.com/videojs/video.js/pull/2132))
 
 --------------------
 

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;
 }

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;
-}

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;
 
-.video-js .vjs-volume-bar .vjs-volume-handle {
-  width: 0.8em;
-  height: 0.8em;
+  // Volume handle
+  &:before {
+    top: -0.5em;
+    left: -0.35em;
+  }
+}
+.video-js .vjs-slider-horizontal .vjs-volume-level {
+  height: 0.3em;
+
+  // 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

src/js/control-bar/progress-control/seek-bar.js

@@ -2,7 +2,6 @@ import Slider from '../../slider/slider.js';
 import Component from '../../component.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';
@@ -82,11 +81,9 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: {
     'loadProgressBar': {},
-    'playProgressBar': {},
-    'seekHandle': {}
+    'playProgressBar': {}
   },
-  'barName': 'playProgressBar',
-  'handleName': 'seekHandle'
+  'barName': 'playProgressBar'
 };
 
 SeekBar.prototype.playerEvent = 'timeupdate';

src/js/control-bar/progress-control/seek-handle.js

@@ -1,44 +0,0 @@
-import SliderHandle from '../../slider/slider-handle.js';
-import Component from '../../component.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 = `<span class="vjs-control-text">${formatTime(time, this.player_.duration())}</span>`;
-  }
-
-}
-
-/**
- * The default value for the handle content, which may be read by screen readers
- *
- * @type {String}
- * @private
- */
-SeekHandle.prototype.defaultValue = '00:00';
-
-Component.registerComponent('SeekHandle', SeekHandle);
-export default SeekHandle;

src/js/control-bar/volume-control/volume-bar.js

@@ -4,7 +4,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';
 
 /**
@@ -63,11 +62,9 @@ class VolumeBar extends Slider {
 
 VolumeBar.prototype.options_ = {
   children: {
-    'volumeLevel': {},
-    'volumeHandle': {}
+    'volumeLevel': {}
   },
-  'barName': 'volumeLevel',
-  'handleName': 'volumeHandle'
+  'barName': 'volumeLevel'
 };
 
 VolumeBar.prototype.playerEvent = 'volumechange';

src/js/control-bar/volume-control/volume-handle.js

@@ -1,25 +0,0 @@
-import SliderHandle from '../../slider/slider-handle.js';
-import Component from '../../component.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';
-
-Component.registerComponent('VolumeHandle', VolumeHandle);
-export default VolumeHandle;

src/js/slider/slider-handle.js

@@ -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: `<span class="vjs-control-text">${this.defaultValue || 0}</span>`
-    }, props);
-
-    return super.createEl('div', props);
-  }
-
-}
-
-Component.registerComponent('SliderHandle', SliderHandle);
-export default SliderHandle;

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.findElPosition(el);

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');