fix(ui): Fix hiding controls on mobile after touch

On pointerless touch-screen devices, :hover queries on an element do
not make sense.  In spite of this, they can pass on such devices after
a touch event, and elements even get stuck in this false :hover state.

Now we check if the device supports hovering before making the :hover
query on individual elements, which fixes the hiding on controls on
mobile after a touch event.

Closes #2886

Backported to v2.5.x

Change-Id: I5ae0b0c84c69961c33df5e50f480b53495ab2694

ui/controls.js

@@ -968,6 +968,14 @@ shaka.ui.Controls.prototype.onMouseStill_ = function() {
  * @private
  */
 shaka.ui.Controls.prototype.isHovered_ = function() {
+  if (!window.matchMedia('hover: hover').matches) {
+    // This is primarily a touch-screen device, so the :hover query below
+    // doesn't make sense.  In spite of this, the :hover query on an element
+    // can still return true on such a device after a touch ends.
+    // See https://bit.ly/34dBORX for details.
+    return false;
+  }
+
   return this.showOnHoverControls_.some((element) => {
     return element.matches(':hover');
   });