feat(FEC-10079): as a end user I would like to be able to drag to reposition floating player

src/style.css

@@ -29,6 +29,9 @@
   z-index: 9999;
   position: fixed;
 }
+.playkit-floating-container.playkit-floating-active.draggable {
+  cursor: grab;
+}
 
 .playkit-floating-dismissible {
   display: none;

src/visibility.js

@@ -4,6 +4,7 @@ import './style.css';
 import {DismissibleFloatingButtonComponent} from './components/dismissible/dismissible';
 import 'intersection-observer';
 
+const FLOATING_DRAGGABLE_CLASS: string = 'playkit-floating-draggable';
 const FLOATING_ACTIVE_CLASS: string = 'playkit-floating-active';
 const FLOATING_CONTAINER_CLASS: string = 'playkit-floating-container';
 const FLOATING_POSTER_CLASS: string = 'playkit-floating-poster';
@@ -14,7 +15,8 @@ const DEFUALT_FLOATING_CONFIG = {
     width: '400',
     marginX: '20',
     marginY: '20',
-    dismissible: true
+    dismissible: true,
+    draggable: true
   }
 };
 
@@ -30,6 +32,8 @@ class Visibility extends BasePlugin {
   _playbackStartOccurred: boolean = false;
   _dismissed: boolean = false;
   _isInPIP: boolean = false;
+  _currMousePos: {x: number, y: number} = {x: 0, y: 0};
+  _throttleWait: boolean = false;
 
   /**
    * The default configuration of the plugin.
@@ -50,7 +54,7 @@ class Visibility extends BasePlugin {
             get: DismissibleFloatingButtonComponent,
             props: {
               onClose: () => {
-                this.handleDismissFloating();
+                this._handleDismissFloating();
               }
             }
           }
@@ -107,9 +111,12 @@ class Visibility extends BasePlugin {
         Utils.Dom.addClassName(this._floatingContainer, `${FLOATING_ACTIVE_CLASS}-${side}`);
       });
     }
+    if (this.config.floating.draggable) {
+      Utils.Dom.addClassName(this._floatingContainer, FLOATING_DRAGGABLE_CLASS);
+    }
   }
 
-  handleDismissFloating() {
+  _handleDismissFloating() {
     this._dismissed = true;
     this.player.pause();
     this._stopFloating();
@@ -118,13 +125,20 @@ class Visibility extends BasePlugin {
   _stopFloating() {
     Utils.Dom.removeClassName(this._floatingContainer, FLOATING_ACTIVE_CLASS);
     Utils.Dom.removeAttribute(this._floatingContainer, 'style');
+    if (this.config.floating.draggable) {
+      this.eventManager.unlisten(this._floatingContainer, 'mousedown');
+      this._dragStop();
+    }
   }
 
   _startFloating() {
     Utils.Dom.addClassName(this._floatingContainer, FLOATING_ACTIVE_CLASS);
     Utils.Dom.setStyle(this._floatingContainer, 'height', this.config.floating.height + 'px');
     Utils.Dom.setStyle(this._floatingContainer, 'width', this.config.floating.width + 'px');
     Utils.Dom.setStyle(this._floatingContainer, 'margin', `${this.config.floating.marginY}px ${this.config.floating.marginX}px`);
+    if (this.config.floating.draggable) {
+      this.eventManager.listen(this._floatingContainer, 'mousedown', this._dragMouseDown.bind(this));
+    }
   }
 
   _handleVisibilityChange(entries: Array<window.IntersectionObserverEntry>) {
@@ -177,6 +191,45 @@ class Visibility extends BasePlugin {
     this._observer = null;
     this.eventManager.destroy();
   }
+
+  _dragMouseDown(e: MouseEvent) {
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    this._currMousePos.x = e.clientX;
+    this._currMousePos.y = e.clientY;
+    this.eventManager.listen(document, 'mouseup', this._dragStop.bind(this));
+    this.eventManager.listen(document, 'mousemove', this._floatingDrag.bind(this));
+  }
+
+  _floatingDrag(e: MouseEvent) {
+    if (this._throttleWait) return;
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    const deltaMousePosX = this._currMousePos.x - e.clientX;
+    const deltaMousePosY = this._currMousePos.y - e.clientY;
+    this._currMousePos.x = e.clientX;
+    this._currMousePos.y = e.clientY;
+    const floatingContainer = this._floatingContainer; // flow
+    // set the element's new position
+    if (floatingContainer) {
+      const boundClientRect = floatingContainer.getBoundingClientRect();
+      floatingContainer.style.top = boundClientRect.top - parseInt(floatingContainer.style.marginTop) - deltaMousePosY + 'px';
+      floatingContainer.style.left = boundClientRect.left - parseInt(floatingContainer.style.marginLeft) - deltaMousePosX + 'px';
+    }
+
+    // handle throttling to avoid performance issues on dragging
+    this._throttleWait = true;
+    setTimeout(() => {
+      this._throttleWait = false;
+    }, 30);
+  }
+
+  _dragStop() {
+    // stop moving when mouse button is released:
+    this.eventManager.unlisten(document, 'mouseup');
+    this.eventManager.unlisten(document, 'mousemove');
+  }
 }
 
 export {Visibility};