diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index eebd9ca..ab331bf 100644 --- a/dist/plex-meets-homeassistant.js +++ b/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')) { diff --git a/src/modules/PlayController.ts b/src/modules/PlayController.ts index 2cc78e2..47899df 100644 --- a/src/modules/PlayController.ts +++ b/src/modules/PlayController.ts @@ -96,6 +96,7 @@ class PlayController { }; play = async (data: Record, instantPlay = false): Promise => { + console.log(data); if (_.isArray(this.runBefore)) { await this.hass.callService(this.runBefore[0], this.runBefore[1], {}); } diff --git a/src/modules/utils.ts b/src/modules/utils.ts index d467e48..3089a0e 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -104,8 +104,57 @@ const findTrailerURL = (movieData: Record): 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): 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 }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index b9a0b0b..dc93f8a 100644 --- a/src/plex-meets-homeassistant.ts +++ b/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')) {