FloatingPlayer: fix unusable volume slider in fp-mode

4913: Can't slide volume slider in pop out mode

I first tried to handle this at the floating player level, but it was impossible to hack there due to how 'react-draggable' works (it already moved the window before the "move" handler is called, so we can't do much).

Fix by overriding the dragging behavior of the videojs' VolumeBar class by not propagating the event further. It is odd that videojs didn't already do this, since it's SeekBar does stop the propagation.

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 - Loss of subscriptions on startup ([#4882](https://github.com/lbryio/lbry-desktop/pull/4882))
 - Fix lost search results when a timeout occurs _community pr!_ ([#4996](https://github.com/lbryio/lbry-desktop/pull/4996))
+- Can't slide volume slider in pop-sout mode _community pr!_ ([#4913](https://github.com/lbryio/lbry-desktop/pull/4913))
 
 ## [0.48.2] - [2020-10-16]
 

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -27,6 +27,7 @@ export type Player = {
   ended: () => boolean,
   error: () => any,
   loadingSpinner: any,
+  getChild: string => any,
 };
 
 type Props = {
@@ -80,6 +81,50 @@ if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
   videojs.registerPlugin('eventTracking', eventTracking);
 }
 
+// ********************************************************************************************************************
+// LbryVolumeBarClass
+// ********************************************************************************************************************
+
+const VIDEOJS_CONTROL_BAR_CLASS = 'ControlBar';
+const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
+const VIDEOJS_VOLUME_CONTROL_CLASS = 'VolumeControl';
+const VIDEOJS_VOLUME_BAR_CLASS = 'VolumeBar';
+
+class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS) {
+  constructor(player, options = {}) {
+    super(player, options);
+  }
+
+  static replaceExisting(player) {
+    try {
+      const volumeControl = player
+        .getChild(VIDEOJS_CONTROL_BAR_CLASS)
+        .getChild(VIDEOJS_VOLUME_PANEL_CLASS)
+        .getChild(VIDEOJS_VOLUME_CONTROL_CLASS);
+      const volumeBar = volumeControl.getChild(VIDEOJS_VOLUME_BAR_CLASS);
+      volumeControl.removeChild(volumeBar);
+      volumeControl.addChild(new LbryVolumeBarClass(player));
+    } catch (error) {
+      // In case it slips in 'Production', the original volume bar will be used and the site should still be working
+      // (just not exactly the way we want).
+      if (isDev) throw Error('\n\nvideojs.jsx: Volume Panel hierarchy changed?\n\n' + error);
+    }
+  }
+
+  handleMouseDown(event) {
+    super.handleMouseDown(event);
+    event.stopPropagation();
+  }
+
+  handleMouseMove(event) {
+    super.handleMouseMove(event);
+    event.stopPropagation();
+  }
+}
+
+// ********************************************************************************************************************
+// ********************************************************************************************************************
+
 /*
 properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
  */
@@ -260,6 +305,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
           player.on('error', onError);
           player.on('ended', onEnded);
 
+          LbryVolumeBarClass.replaceExisting(player);
+
           onPlayerReady(player);
         }
       });