From 5bb592a53424169dad586edab2b0a9ef4f9f7c83 Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Mon, 13 Jul 2020 14:51:50 +0300 Subject: [PATCH 1/8] feat(FEC-10079): as a end user I would like to be able to drag to reposition floating player --- src/visibility.js | 45 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/src/visibility.js b/src/visibility.js index d558002..a2a2a5b 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -30,6 +30,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 +52,7 @@ class Visibility extends BasePlugin { get: DismissibleFloatingButtonComponent, props: { onClose: () => { - this.handleDismissFloating(); + this._handleDismissFloating(); } } } @@ -109,7 +111,7 @@ class Visibility extends BasePlugin { } } - handleDismissFloating() { + _handleDismissFloating() { this._dismissed = true; this.player.pause(); this._stopFloating(); @@ -118,6 +120,8 @@ class Visibility extends BasePlugin { _stopFloating() { Utils.Dom.removeClassName(this._floatingContainer, FLOATING_ACTIVE_CLASS); Utils.Dom.removeAttribute(this._floatingContainer, 'style'); + this.eventManager.unlisten(this._floatingContainer, 'mousedown'); + this._dragStop(); } _startFloating() { @@ -125,6 +129,7 @@ class Visibility extends BasePlugin { 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`); + this.eventManager.listen(this._floatingContainer, 'mousedown', this._dragMouseDown.bind(this)); } _handleVisibilityChange(entries: Array) { @@ -177,6 +182,42 @@ class Visibility extends BasePlugin { this._observer = null; this.eventManager.destroy(); } + + _dragMouseDown(e) { + 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) { + 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; + // set the element's new position: + const boundClientRect = this._floatingContainer.getBoundingClientRect(); + this._floatingContainer.style.top = boundClientRect.top - parseInt(this._floatingContainer.style.marginTop) - deltaMousePosY + 'px'; + this._floatingContainer.style.left = boundClientRect.left - parseInt(this._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}; From 3e53f3f22d85e2d3ee9f32ecf800bb8f3a794a1d Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Mon, 13 Jul 2020 14:55:25 +0300 Subject: [PATCH 2/8] add draggable configuration --- src/visibility.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/visibility.js b/src/visibility.js index a2a2a5b..200568f 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -14,7 +14,8 @@ const DEFUALT_FLOATING_CONFIG = { width: '400', marginX: '20', marginY: '20', - dismissible: true + dismissible: true, + draggable: true } }; @@ -120,8 +121,10 @@ class Visibility extends BasePlugin { _stopFloating() { Utils.Dom.removeClassName(this._floatingContainer, FLOATING_ACTIVE_CLASS); Utils.Dom.removeAttribute(this._floatingContainer, 'style'); - this.eventManager.unlisten(this._floatingContainer, 'mousedown'); - this._dragStop(); + if (this.config.floating.draggable) { + this.eventManager.unlisten(this._floatingContainer, 'mousedown'); + this._dragStop(); + } } _startFloating() { @@ -129,7 +132,9 @@ class Visibility extends BasePlugin { 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`); - this.eventManager.listen(this._floatingContainer, 'mousedown', this._dragMouseDown.bind(this)); + if (this.config.floating.draggable) { + this.eventManager.listen(this._floatingContainer, 'mousedown', this._dragMouseDown.bind(this)); + } } _handleVisibilityChange(entries: Array) { From aaa7a072341b57553be39a69eb5563690e43ca0f Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Tue, 14 Jul 2020 11:05:51 +0300 Subject: [PATCH 3/8] adding draggable css cursor --- src/style.css | 3 +++ src/visibility.js | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/src/style.css b/src/style.css index e5ceacf..946ea45 100644 --- a/src/style.css +++ b/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; diff --git a/src/visibility.js b/src/visibility.js index 200568f..dcf718b 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -4,6 +4,7 @@ import './style.css'; import {DismissibleFloatingButtonComponent} from './components/dismissible/dismissible'; import 'intersection-observer'; +const FLOATING_DRAGGABLE_CLASS: string = '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'; @@ -110,6 +111,9 @@ 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() { From c738379523d062783be1037fc480d9110c9468de Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Tue, 14 Jul 2020 12:28:35 +0300 Subject: [PATCH 4/8] FLOW --- src/visibility.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/visibility.js b/src/visibility.js index dcf718b..e1875a0 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -4,7 +4,7 @@ import './style.css'; import {DismissibleFloatingButtonComponent} from './components/dismissible/dismissible'; import 'intersection-observer'; -const FLOATING_DRAGGABLE_CLASS: string = 'draggable'; +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'; @@ -192,7 +192,7 @@ class Visibility extends BasePlugin { this.eventManager.destroy(); } - _dragMouseDown(e) { + _dragMouseDown(e: MouseEvent) { e.preventDefault(); // get the mouse cursor position at startup: this._currMousePos.x = e.clientX; @@ -201,7 +201,7 @@ class Visibility extends BasePlugin { this.eventManager.listen(document, 'mousemove', this._floatingDrag.bind(this)); } - _floatingDrag(e) { + _floatingDrag(e: MouseEvent) { if (this._throttleWait) return; e = e || window.event; e.preventDefault(); @@ -210,10 +210,13 @@ class Visibility extends BasePlugin { const deltaMousePosY = this._currMousePos.y - e.clientY; this._currMousePos.x = e.clientX; this._currMousePos.y = e.clientY; - // set the element's new position: - const boundClientRect = this._floatingContainer.getBoundingClientRect(); - this._floatingContainer.style.top = boundClientRect.top - parseInt(this._floatingContainer.style.marginTop) - deltaMousePosY + 'px'; - this._floatingContainer.style.left = boundClientRect.left - parseInt(this._floatingContainer.style.marginLeft) - deltaMousePosX + 'px'; + 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; From 04f416bc0e928c58cc748e1aca314e4e5fd7e9de Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Thu, 23 Jul 2020 15:26:31 +0300 Subject: [PATCH 5/8] code review --- src/style.css | 1 + src/visibility.js | 54 ++++++++++++++++++++++++++++++++--------------- 2 files changed, 38 insertions(+), 17 deletions(-) diff --git a/src/style.css b/src/style.css index 946ea45..4137d94 100644 --- a/src/style.css +++ b/src/style.css @@ -24,6 +24,7 @@ .playkit-floating-container { height: 100%; width: 100%; + touch-action: none; } .playkit-floating-container.playkit-floating-active { z-index: 9999; diff --git a/src/visibility.js b/src/visibility.js index e1875a0..0db6da3 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -4,6 +4,7 @@ import './style.css'; import {DismissibleFloatingButtonComponent} from './components/dismissible/dismissible'; import 'intersection-observer'; +const DRAG_THROTTLE_MS: number = 30; const FLOATING_DRAGGABLE_CLASS: string = 'playkit-floating-draggable'; const FLOATING_ACTIVE_CLASS: string = 'playkit-floating-active'; const FLOATING_CONTAINER_CLASS: string = 'playkit-floating-container'; @@ -127,7 +128,8 @@ class Visibility extends BasePlugin { Utils.Dom.removeAttribute(this._floatingContainer, 'style'); if (this.config.floating.draggable) { this.eventManager.unlisten(this._floatingContainer, 'mousedown'); - this._dragStop(); + this.eventManager.unlisten(this._floatingContainer, 'touchstart'); + this._stopDrag(); } } @@ -137,7 +139,13 @@ class Visibility extends BasePlugin { 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)); + this.eventManager.listen(this._floatingContainer, 'mousedown', e => { + this._startDrag(e, 'mousemove', 'mouseup'); + }); + this.eventManager.listen(this._floatingContainer, 'touchstart', e => { + this.eventManager.unlisten(this._floatingContainer, 'mousedown'); + this._startDrag(e, 'touchmove', 'touchend'); + }); } } @@ -192,24 +200,36 @@ class Visibility extends BasePlugin { this.eventManager.destroy(); } - _dragMouseDown(e: MouseEvent) { - e.preventDefault(); + _startDrag(e: any, moveEventName: string, endEventName: string) { + this.eventManager.listenOnce(document, endEventName, () => { + this._stopDrag(); + }); + // 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)); + this._currMousePos.x = this._clientX(e); + this._currMousePos.y = this._clientY(e); + + this.eventManager.listen(document, moveEventName, () => { + this._moveDrag(); + }); + } + _clientX(e: any): number { + return e.clientX || (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientX); + } + _clientY(e: any): number { + return e.clientY || (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY); } - _floatingDrag(e: MouseEvent) { + _moveDrag(e: any) { if (this._throttleWait) return; + e = e || window.event; - e.preventDefault(); + // 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 deltaMousePosX = this._currMousePos.x - this._clientX(e); + const deltaMousePosY = this._currMousePos.y - this._clientY(e); + this._currMousePos.x = this._clientX(e); + this._currMousePos.y = this._clientY(e); const floatingContainer = this._floatingContainer; // flow // set the element's new position if (floatingContainer) { @@ -222,13 +242,13 @@ class Visibility extends BasePlugin { this._throttleWait = true; setTimeout(() => { this._throttleWait = false; - }, 30); + }, DRAG_THROTTLE_MS); } - _dragStop() { + _stopDrag() { // stop moving when mouse button is released: - this.eventManager.unlisten(document, 'mouseup'); this.eventManager.unlisten(document, 'mousemove'); + this.eventManager.unlisten(document, 'touchmove'); } } From b69673894586e197e1eb8c0b40e56421a874c479 Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Sat, 25 Jul 2020 18:41:50 +0300 Subject: [PATCH 6/8] remove comment --- src/visibility.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/visibility.js b/src/visibility.js index 0db6da3..0a05638 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -224,7 +224,6 @@ class Visibility extends BasePlugin { if (this._throttleWait) return; e = e || window.event; - // e.preventDefault(); // calculate the new cursor position: const deltaMousePosX = this._currMousePos.x - this._clientX(e); const deltaMousePosY = this._currMousePos.y - this._clientY(e); From 8a9df7f61b415b767b4eff13f323dc0acc3284e7 Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Sun, 26 Jul 2020 10:04:24 +0300 Subject: [PATCH 7/8] making types a bit more strict --- src/visibility.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/visibility.js b/src/visibility.js index 0a05638..7bb1f15 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -200,7 +200,7 @@ class Visibility extends BasePlugin { this.eventManager.destroy(); } - _startDrag(e: any, moveEventName: string, endEventName: string) { + _startDrag(e: UIEvent, moveEventName: string, endEventName: string) { this.eventManager.listenOnce(document, endEventName, () => { this._stopDrag(); }); @@ -209,8 +209,8 @@ class Visibility extends BasePlugin { this._currMousePos.x = this._clientX(e); this._currMousePos.y = this._clientY(e); - this.eventManager.listen(document, moveEventName, () => { - this._moveDrag(); + this.eventManager.listen(document, moveEventName, e => { + this._moveDrag(e); }); } _clientX(e: any): number { @@ -220,7 +220,7 @@ class Visibility extends BasePlugin { return e.clientY || (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY); } - _moveDrag(e: any) { + _moveDrag(e: UIEvent) { if (this._throttleWait) return; e = e || window.event; From 2617a43cf4ca410ebb19b8cabf4eb810da983358 Mon Sep 17 00:00:00 2001 From: Roy Bregman Date: Sun, 26 Jul 2020 15:05:02 +0300 Subject: [PATCH 8/8] fix typings --- src/visibility.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/visibility.js b/src/visibility.js index 7bb1f15..e7db439 100644 --- a/src/visibility.js +++ b/src/visibility.js @@ -200,7 +200,7 @@ class Visibility extends BasePlugin { this.eventManager.destroy(); } - _startDrag(e: UIEvent, moveEventName: string, endEventName: string) { + _startDrag(e: MouseEvent | TouchEvent, moveEventName: string, endEventName: string) { this.eventManager.listenOnce(document, endEventName, () => { this._stopDrag(); }); @@ -213,14 +213,22 @@ class Visibility extends BasePlugin { this._moveDrag(e); }); } - _clientX(e: any): number { - return e.clientX || (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientX); + + _clientX(e: MouseEvent | TouchEvent): number { + if (e instanceof MouseEvent) { + return e.clientX; + } + return e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientX; } - _clientY(e: any): number { - return e.clientY || (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY); + + _clientY(e: MouseEvent | TouchEvent): number { + if (e instanceof MouseEvent) { + return e.clientY; + } + return e.changedTouches && e.changedTouches[0] && e.changedTouches[0].clientY; } - _moveDrag(e: UIEvent) { + _moveDrag(e: MouseEvent | TouchEvent) { if (this._throttleWait) return; e = e || window.event;