Adding a long press action on episodes

src/app/app.module.ts

@@ -47,6 +47,7 @@ import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ShowGridComponent } from "./components/show-grid/show-grid.component";
 import { MatBadgeModule } from "@angular/material/badge";
 import { StartupService } from "./services/startup.service";
+import { LongPressDirective } from './misc/long-press.directive';
 
 
 @NgModule({
@@ -69,7 +70,8 @@ import { StartupService } from "./services/startup.service";
 		FormatTimePipe,
 		BufferToWidthPipe,
 		VolumeToButtonPipe,
-		SupportedButtonPipe
+		SupportedButtonPipe,
+		LongPressDirective
 	],
 	imports: [
 		BrowserModule,

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

@@ -1,12 +1,13 @@
 <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"
 		    routerLink="/watch/{{episode.slug}}" href="/watch/{{episode.slug}}"
 		    class="episode" #itemsDom>
-			<button mat-icon-button class="moreBtn" [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"
+			<button mat-icon-button class="moreBtn" tabindex="-1"
-			        tabindex="-1"
+			        [matMenuTriggerFor]="more" [matMenuTriggerData]="{episode: episode}"
 			        (click)="$event.stopImmediatePropagation(); $event.preventDefault()">
 				<mat-icon>more_vert</mat-icon>
 			</button>

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

@@ -152,6 +152,7 @@
 		.moreBtn
 		{
 			display: block;
+			-webkit-touch-callout: none;
 		}
 		
 		> div

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

@@ -0,0 +1,43 @@
+import { Directive, Output, EventEmitter, HostListener, HostBinding } from "@angular/core";
+
+@Directive({
+	selector: `[appLongPress]`
+})
+export class LongPressDirective
+{
+	@Output() longPressed = new EventEmitter();
+	timer: NodeJS.Timeout = null;
+
+	@HostBinding('class.longpress')
+	get longPress(): boolean
+	{
+		return this.timer !== null;
+	}
+
+	@HostListener("touchstart", ["$event"])
+	@HostListener("mousedown", ["$event"])
+	start(): void
+	{
+		this.timer = setTimeout(() => {
+			this.longPressed.emit();
+		}, 500);
+	}
+
+	@HostListener("touchend", ["$event"])
+	@HostListener("mouseup", ["$event"])
+	end(): void
+	{
+		clearTimeout(this.timer);
+		this.timer = null;
+	}
+
+	@HostListener("contextmenu", ["$event"])
+	context(event): void
+	{
+		event.preventDefault();
+	}
+
+	@HostBinding("style.-webkit-touch-callout")
+	defaultLongTouchEvent: string = "none";
+
+}