feat: Add vjs-touch-enabled class for touch supporting devices (videojs#5663)

tiagofragoso · gkatsev · commit b02181b9fce0 · 2019-01-03T13:50:48.000-05:00
Fixes videojs#2999
diff --git a/src/js/player.js b/src/js/player.js
@@ -501,9 +501,11 @@ class Player extends Component {
 
     // TODO: Make this smarter. Toggle user state between touching/mousing
     // using events, since devices can have both touch and mouse events.
-    // if (browser.TOUCH_ENABLED) {
-    //   this.addClass('vjs-touch-enabled');
-    // }
+    // TODO: Make this check be performed again when the window switches between monitors
+    // (See https://github.com/videojs/video.js/issues/5683)
+    if (browser.TOUCH_ENABLED) {
+      this.addClass('vjs-touch-enabled');
+    }
 
     // iOS Safari has broken hover handling
     if (!browser.IS_IOS) {
diff --git a/test/unit/player.test.js b/test/unit/player.test.js
@@ -633,7 +633,23 @@ QUnit.test('should add a touch-enabled classname when touch is supported', funct
 
   const player = TestHelpers.makePlayer({});
 
-  assert.ok(player.el().className.indexOf('vjs-touch-enabled'), 'touch-enabled classname added');
+  assert.notEqual(player.el().className.indexOf('vjs-touch-enabled'), -1, 'touch-enabled classname added');
+
+  browser.TOUCH_ENABLED = origTouch;
+  player.dispose();
+});
+
+QUnit.test('should not add a touch-enabled classname when touch is not supported', function(assert) {
+  assert.expect(1);
+
+  // Fake not having touch support in case that the browser running the test supports it
+  const origTouch = browser.TOUCH_ENABLED;
+
+  browser.TOUCH_ENABLED = false;
+
+  const player = TestHelpers.makePlayer({});
+
+  assert.equal(player.el().className.indexOf('vjs-touch-enabled'), -1, 'touch-enabled classname not added');
 
   browser.TOUCH_ENABLED = origTouch;
   player.dispose();
