Fixing the long press directive

src/app/components/episodes-list/episodes-list.component.html

@@ -1,10 +1,10 @@
 <div class="root">
 	<div class="episodes" #scrollView
 	     (scroll)="onScroll()" infinite-scroll (scrolled)="this.episodes?.loadNext(this.client)"
-	     [horizontal]="true" [scrollWindow]="false"
+	     [horizontal]="true" [scrollWindow]="false">
-	     appLongPress (longPressed)="this.openMenu()">
 		<a *ngFor="let episode of this.episodes?.items" draggable="false"
 		    routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}"
+		    appLongPress (longPressed)="this.openMenu()"
 		    class="episode" #itemsDom>
 			<button mat-icon-button class="moreBtn" tabindex="-1"
 			        [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"

src/app/components/episodes-list/episodes-list.component.scss

@@ -49,7 +49,7 @@
 {
 	visibility: visible;
 	display: inline-block;
-	padding: .25rem;
+	margin: .25rem .25rem 1.25rem;
 	flex-shrink: 0;
 	width: 55%;
 	outline: none;
@@ -135,6 +135,7 @@
 			-webkit-line-clamp: 4;
 			-webkit-box-orient: vertical;
 			overflow: hidden;
+			margin-bottom: 0;
 		}
 
 		.subtitle

src/app/misc/long-press.directive.ts

@@ -1,4 +1,8 @@
 import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@angular/core";
+import MouseDownEvent = JQuery.MouseDownEvent;
+import TouchStartEvent = JQuery.TouchStartEvent;
+import MouseMoveEvent = JQuery.MouseMoveEvent;
+import TouchMoveEvent = JQuery.TouchMoveEvent;
 
 @Directive({
 	selector: `[appLongPress]`
@@ -6,29 +10,39 @@ import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@ang
 export class LongPressDirective
 {
 	@Output() longPressed = new EventEmitter();
-	timer: NodeJS.Timeout = null;
+	private _timer: NodeJS.Timeout = null;
 
 	@HostBinding('class.longpress')
 	get longPress(): boolean
 	{
-		return this.timer !== null;
+		return this._timer !== null;
 	}
 
 	@HostListener("touchstart", ["$event"])
 	@HostListener("mousedown", ["$event"])
-	start(): void
+	start(event: MouseDownEvent | TouchStartEvent): void
 	{
-		this.timer = setTimeout(() => {
+		const startBox = event.target.getBoundingClientRect();
+		this._timer = setTimeout(() =>
+		{
+			const endBox = event.target.getBoundingClientRect();
+			if (startBox.top !== endBox.top || startBox.left !== endBox.left)
+				return;
 			this.longPressed.emit();
+			this._timer = null;
 		}, 500);
 	}
 
 	@HostListener("touchend", ["$event"])
 	@HostListener("mouseup", ["$event"])
+	@HostListener("wheel", ["$event"])
+	@HostListener("scroll", ["$event"])
+	@HostListener("document.scroll", ["$event"])
+	@HostListener("window.scroll", ["$event"])
 	end(): void
 	{
-		clearTimeout(this.timer);
+		clearTimeout(this._timer);
-		this.timer = null;
+		this._timer = null;
 	}
 
 	@HostListener("contextmenu", ["$event"])
@@ -39,5 +53,4 @@ export class LongPressDirective
 
 	@HostBinding("style.-webkit-touch-callout")
 	defaultLongTouchEvent: string = "none";
-
 }