Add: clickHandler supporting hold and click actions

dist/plex-meets-homeassistant.js

@@ -18893,6 +18893,7 @@ class PlayController {
             return foundResult;
         };
         this.play = async (data, instantPlay = false) => {
+            console.log(data);
             if (lodash.isArray(this.runBefore)) {
                 await this.hass.callService(this.runBefore[0], this.runBefore[1], {});
             }
@@ -19205,7 +19206,49 @@ const findTrailerURL = (movieData) => {
     }
     return foundURL;
 };
+const clickHandler = (elem, clickFunction, holdFunction) => {
+    let longpress = false;
+    let presstimer = null;
+    const cancel = (e) => {
+        e.stopPropagation();
+        if (presstimer !== null) {
+            clearTimeout(presstimer);
+            presstimer = null;
+        }
+    };
+    const click = (e) => {
+        e.stopPropagation();
+        if (presstimer !== null) {
+            clearTimeout(presstimer);
+            presstimer = null;
+        }
+        if (longpress) {
+            return false;
+        }
+        clickFunction(e);
+        return true;
+    };
+    const start = (e) => {
+        e.stopPropagation();
+        if (e.type === 'click' && e.button !== 0) {
+            return;
+        }
+        longpress = false;
+        presstimer = setTimeout(() => {
+            holdFunction(e);
+            longpress = true;
+        }, 1000);
+    };
+    elem.addEventListener('mousedown', start);
+    elem.addEventListener('touchstart', start);
+    elem.addEventListener('click', click);
+    elem.addEventListener('mouseout', cancel);
+    elem.addEventListener('touchend', cancel);
+    elem.addEventListener('touchleave', cancel);
+    elem.addEventListener('touchcancel', cancel);
+};
 const createEpisodesView = (playController, plex, data) => {
+    console.log(data);
     const episodeContainer = document.createElement('div');
     episodeContainer.className = 'episodeContainer';
     episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
@@ -21140,11 +21183,15 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                 interactiveArea.append(playButton);
             }
             movieElem.append(interactiveArea);
-            playButton.addEventListener('click', event => {
+            clickHandler(playButton, (event) => {
+                console.log('click');
                 event.stopPropagation();
                 if (this.hassObj && this.playController) {
                     this.playController.play(data, true);
                 }
+            }, (event) => {
+                console.log('hold');
+                event.stopPropagation();
             });
             const titleElem = document.createElement('div');
             if (lodash.isEqual(data.type, 'episode')) {

src/modules/PlayController.ts

@@ -96,6 +96,7 @@ class PlayController {
 	};
 
 	play = async (data: Record<string, any>, instantPlay = false): Promise<void> => {
+		console.log(data);
 		if (_.isArray(this.runBefore)) {
 			await this.hass.callService(this.runBefore[0], this.runBefore[1], {});
 		}

src/modules/utils.ts

@@ -104,8 +104,57 @@ const findTrailerURL = (movieData: Record<string, any>): string => {
 	}
 	return foundURL;
 };
+const clickHandler = (elem: HTMLButtonElement, clickFunction: Function, holdFunction: Function): void => {
+	let longpress = false;
+	let presstimer: any = null;
+
+	const cancel = (e: any): void => {
+		e.stopPropagation();
+		if (presstimer !== null) {
+			clearTimeout(presstimer);
+			presstimer = null;
+		}
+	};
+
+	const click = (e: any): boolean => {
+		e.stopPropagation();
+		if (presstimer !== null) {
+			clearTimeout(presstimer);
+			presstimer = null;
+		}
+
+		if (longpress) {
+			return false;
+		}
+
+		clickFunction(e);
+		return true;
+	};
+
+	const start = (e: any): void => {
+		e.stopPropagation();
+		if (e.type === 'click' && e.button !== 0) {
+			return;
+		}
+
+		longpress = false;
+
+		presstimer = setTimeout(() => {
+			holdFunction(e);
+			longpress = true;
+		}, 1000);
+	};
+	elem.addEventListener('mousedown', start);
+	elem.addEventListener('touchstart', start);
+	elem.addEventListener('click', click);
+	elem.addEventListener('mouseout', cancel);
+	elem.addEventListener('touchend', cancel);
+	elem.addEventListener('touchleave', cancel);
+	elem.addEventListener('touchcancel', cancel);
+};
 
 const createEpisodesView = (playController: PlayController, plex: Plex, data: Record<string, any>): HTMLElement => {
+	console.log(data);
 	const episodeContainer = document.createElement('div');
 	episodeContainer.className = 'episodeContainer';
 	episodeContainer.style.width = `${CSS_STYLE.episodeWidth}px`;
@@ -206,5 +255,6 @@ export {
 	hasEpisodes,
 	getOldPlexServerErrorMessage,
 	getWidth,
-	getDetailsBottom
+	getDetailsBottom,
+	clickHandler
 };

src/plex-meets-homeassistant.ts

@@ -15,7 +15,8 @@ import {
 	isVideoFullScreen,
 	hasEpisodes,
 	getOldPlexServerErrorMessage,
-	getDetailsBottom
+	getDetailsBottom,
+	clickHandler
 } from './modules/utils';
 import style from './modules/style';
 
@@ -1362,13 +1363,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 
 		movieElem.append(interactiveArea);
 
-		playButton.addEventListener('click', event => {
-			event.stopPropagation();
+		clickHandler(
+			playButton,
+			(event: any): void => {
+				console.log('click');
+				event.stopPropagation();
 
-			if (this.hassObj && this.playController) {
-				this.playController.play(data, true);
+				if (this.hassObj && this.playController) {
+					this.playController.play(data, true);
+				}
+			},
+			(event: any): void => {
+				console.log('hold');
+				event.stopPropagation();
 			}
-		});
+		);
 
 		const titleElem = document.createElement('div');
 		if (_.isEqual(data.type, 'episode')) {