From b61893b3e3d8def7e60b8ad5cd4fd66cf548d9c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Fri, 1 Oct 2021 01:44:29 +0200 Subject: [PATCH] Add: Play actions on play button --- dist/plex-meets-homeassistant.js | 45 +++++++++++++++++++++++--------- src/modules/PlayController.ts | 27 ++++++++++++++++--- src/plex-meets-homeassistant.ts | 24 ++++++++++------- 3 files changed, 71 insertions(+), 25 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index ae34259..622eb94 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19337,6 +19337,7 @@ class PlayController { this.runAfter = false; this.supported = supported; this.playActionButton = document.createElement('button'); + this.playActionClickFunction = false; this.getKodiSearchResults = async () => { return JSON.parse((await getState(this.hass, 'sensor.kodi_media_sensor_search')).attributes.data); }; @@ -19697,18 +19698,32 @@ class PlayController { return playButton; }; this.setPlayActionButtonType = (mediaType) => { - this.playActionButton = this.card.getElementsByClassName('detailPlayAction')[0]; // fix for innerHTML+= in main file overriding DOM - this.playActionButton.setAttribute('data-mediaType', mediaType); + const playActionButton = this.updateDetailPlayAction(); + playActionButton.setAttribute('data-mediaType', mediaType); const mockData = { type: mediaType }; if (lodash.isEmpty(this.getPlayService(mockData))) { - this.playActionButton.classList.add('disabled'); + playActionButton.classList.add('disabled'); } else { - this.playActionButton.classList.remove('disabled'); + playActionButton.classList.remove('disabled'); } }; + this.updateDetailPlayAction = () => { + if (this.card.getElementsByClassName('detailPlayAction').length > 0) { + this.playActionButton = this.card.getElementsByClassName('detailPlayAction')[0]; // fix for innerHTML+= in main file overriding DOM + } + return this.playActionButton; + }; + this.setPlayButtonClickFunction = (callbackFunc) => { + const playActionButton = this.updateDetailPlayAction(); + if (this.playActionClickFunction) { + playActionButton.removeEventListener('click', this.playActionClickFunction); + } + playActionButton.addEventListener('click', callbackFunc); + this.playActionClickFunction = callbackFunc; + }; this.getPlayActionButton = () => { return this.playActionButton; }; @@ -22178,6 +22193,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.detailElem) { if (this.playController) { this.playController.setPlayActionButtonType(data.type); + this.playController.setPlayButtonClickFunction((event) => { + event.preventDefault(); + event.stopPropagation(); + if (this.playController) { + this.playController.play(data, true); + } + }); } this.detailElem.style.transition = '0s'; this.detailElem.style.top = `${top - 1000}px`; @@ -22270,14 +22292,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { else { this.getElementsByClassName('detailDesc')[0].innerHTML = ''; } - /* todo temp disabled - if (data.type === 'movie') { - (this.detailElem.children[5] as HTMLElement).style.visibility = 'visible'; - this.detailElem.children[5].innerHTML = 'Play'; - } else { - (this.detailElem.children[5] as HTMLElement).style.visibility = 'hidden'; - } - */ this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.zIndex = '4'; } @@ -22453,6 +22467,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (seasonElem.dataset.clicked === 'false') { if (this.playController) { this.playController.setPlayActionButtonType(seasonData.type); + this.playController.setPlayButtonClickFunction((thisEvent) => { + thisEvent.preventDefault(); + thisEvent.stopPropagation(); + if (this.playController) { + this.playController.play(seasonData, true); + } + }); } if (typeof seasonElem.children[0].children[0] !== 'undefined') { seasonElem.children[0].children[0].style.display = 'none'; diff --git a/src/modules/PlayController.ts b/src/modules/PlayController.ts index 390a645..286353a 100644 --- a/src/modules/PlayController.ts +++ b/src/modules/PlayController.ts @@ -34,6 +34,8 @@ class PlayController { playActionButton: any = document.createElement('button'); + playActionClickFunction: any = false; + card: any; constructor( @@ -453,18 +455,35 @@ class PlayController { }; setPlayActionButtonType = (mediaType: string): void => { - this.playActionButton = this.card.getElementsByClassName('detailPlayAction')[0] as HTMLElement; // fix for innerHTML+= in main file overriding DOM - this.playActionButton.setAttribute('data-mediaType', mediaType); + const playActionButton = this.updateDetailPlayAction(); + playActionButton.setAttribute('data-mediaType', mediaType); const mockData = { type: mediaType }; if (_.isEmpty(this.getPlayService(mockData))) { - this.playActionButton.classList.add('disabled'); + playActionButton.classList.add('disabled'); } else { - this.playActionButton.classList.remove('disabled'); + playActionButton.classList.remove('disabled'); } }; + private updateDetailPlayAction = (): any => { + if (this.card.getElementsByClassName('detailPlayAction').length > 0) { + this.playActionButton = this.card.getElementsByClassName('detailPlayAction')[0] as HTMLElement; // fix for innerHTML+= in main file overriding DOM + } + return this.playActionButton; + }; + + setPlayButtonClickFunction = (callbackFunc: Function): void => { + const playActionButton = this.updateDetailPlayAction(); + if (this.playActionClickFunction) { + playActionButton.removeEventListener('click', this.playActionClickFunction); + } + + playActionButton.addEventListener('click', callbackFunc); + this.playActionClickFunction = callbackFunc; + }; + getPlayActionButton = (): any => { return this.playActionButton; }; diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 15fdbd5..205a9b0 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1071,6 +1071,14 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.detailElem) { if (this.playController) { this.playController.setPlayActionButtonType(data.type); + + this.playController.setPlayButtonClickFunction((event: MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + if (this.playController) { + this.playController.play(data, true); + } + }); } this.detailElem.style.transition = '0s'; @@ -1167,15 +1175,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { (this.getElementsByClassName('detailDesc')[0] as HTMLElement).innerHTML = ''; } - /* todo temp disabled - if (data.type === 'movie') { - (this.detailElem.children[5] as HTMLElement).style.visibility = 'visible'; - this.detailElem.children[5].innerHTML = 'Play'; - } else { - (this.detailElem.children[5] as HTMLElement).style.visibility = 'hidden'; - } - */ - this.detailElem.style.color = 'rgba(255,255,255,1)'; this.detailElem.style.zIndex = '4'; } @@ -1370,6 +1369,13 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (seasonElem.dataset.clicked === 'false') { if (this.playController) { this.playController.setPlayActionButtonType(seasonData.type); + this.playController.setPlayButtonClickFunction((thisEvent: MouseEvent) => { + thisEvent.preventDefault(); + thisEvent.stopPropagation(); + if (this.playController) { + this.playController.play(seasonData, true); + } + }); } if (typeof seasonElem.children[0].children[0] !== 'undefined') { (seasonElem.children[0].children[0] as HTMLElement).style.display = 'none';