HomeAssistant
/
PlexMeetsHomeAssistant
mirror of https://github.com/JurajNyiri/PlexMeetsHomeAssistant.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update: Play button now automatically shows/hides depending on entity availability

Browse Source
realtime_play_button
Juraj Nyíri 3 years ago
parent fee8140368
commit 7222d9f32b
4 changed files with 119 additions and 84 deletions
Show Stats Download Patch File Download Diff File

94
dist/plex-meets-homeassistant.js vendored
Unescape View File

@ -19267,16 +19267,17 @@ const createEpisodesView = (playController, plex, data) => {
} }
const episodeInteractiveArea = document.createElement('div'); const episodeInteractiveArea = document.createElement('div');
episodeInteractiveArea.className = 'interactiveArea'; episodeInteractiveArea.className = 'interactiveArea';
const episodePlayButton = document.createElement('button'); if (playController) {
episodePlayButton.name = 'playButton'; const episodePlayButton = playController.getPlayButton(data.type);
episodePlayButton.addEventListener('click', episodeEvent => { episodePlayButton.addEventListener('click', (episodeEvent) => {
episodeEvent.stopPropagation(); episodeEvent.stopPropagation();
playController.play(data, true); playController.play(data, true);
}); });
if (!playController.isPlaySupported(data)) { if (playController.isPlaySupported(data)) {
episodePlayButton.classList.add('disabled'); episodePlayButton.classList.remove('disabled');
}
episodeInteractiveArea.append(episodePlayButton);
} }
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea); episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem); episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div'); const episodeTitleElem = document.createElement('div');
@ -19328,6 +19329,7 @@ const isScrolledIntoView = (elem) => {
class PlayController { class PlayController {
constructor(hass, plex, entity, runBefore, runAfter, libraryName) { constructor(hass, plex, entity, runBefore, runAfter, libraryName) {
this.playButtons = [];
this.readyPlayersForType = {}; this.readyPlayersForType = {};
this.entityStates = {}; this.entityStates = {};
this.plexPlayerEntity = ''; this.plexPlayerEntity = '';
@ -19682,6 +19684,14 @@ class PlayController {
command command
}); });
}; };
this.getPlayButton = (mediaType) => {
const playButton = document.createElement('button');
playButton.name = 'playButton';
playButton.classList.add('disabled');
playButton.setAttribute('data-mediaType', mediaType);
this.playButtons.push(playButton);
return playButton;
};
this.refreshAvailableServicesPeriodically = async () => { this.refreshAvailableServicesPeriodically = async () => {
const sleep = async (ms) => { const sleep = async (ms) => {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
@ -19696,7 +19706,15 @@ class PlayController {
}; };
this.getPlayService(mockData, true); this.getPlayService(mockData, true);
if (!lodash.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) { if (!lodash.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) {
console.log('CHANGED'); lodash.forEach(this.playButtons, playButton => {
const playButtonType = playButton.getAttribute('data-mediaType');
if (lodash.isEmpty(this.readyPlayersForType[playButtonType])) {
playButton.classList.add('disabled');
}
else {
playButton.classList.remove('disabled');
}
});
} }
}); });
// eslint-disable-next-line no-await-in-loop // eslint-disable-next-line no-await-in-loop
@ -22339,17 +22357,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString(); toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString();
interactiveArea.appendChild(toViewElem); interactiveArea.appendChild(toViewElem);
} }
const playButton = this.getPlayButton(); if (this.playController) {
if (this.playController && this.playController.isPlaySupported(seasonData)) { const playButton = this.playController.getPlayButton(seasonData.type);
playButton.classList.remove('disabled'); if (this.playController.isPlaySupported(seasonData)) {
} playButton.classList.remove('disabled');
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
} }
}); playButton.addEventListener('click', event => {
interactiveArea.append(playButton); event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
}
});
interactiveArea.append(playButton);
}
seasonElem.append(interactiveArea); seasonElem.append(interactiveArea);
seasonContainer.append(seasonElem); seasonContainer.append(seasonElem);
const seasonTitleElem = document.createElement('div'); const seasonTitleElem = document.createElement('div');
@ -22635,7 +22655,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activeMovieElemData = data; this.activeMovieElemData = data;
this.activateMovieElem(movieElem); this.activateMovieElem(movieElem);
}); });
const playButton = this.getPlayButton();
const interactiveArea = document.createElement('div'); const interactiveArea = document.createElement('div');
if (!(data.viewCount && data.viewCount > 0) && data.type === 'movie') { if (!(data.viewCount && data.viewCount > 0) && data.type === 'movie') {
const toViewElem = document.createElement('div'); const toViewElem = document.createElement('div');
@ -22655,20 +22674,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
interactiveArea.appendChild(toViewElem); interactiveArea.appendChild(toViewElem);
} }
interactiveArea.className = 'interactiveArea'; interactiveArea.className = 'interactiveArea';
if (this.playController && this.playController.isPlaySupported(data)) { if (this.playController) {
playButton.classList.remove('disabled'); const playButton = this.playController.getPlayButton(data.type);
if (this.playController.isPlaySupported(data)) {
playButton.classList.remove('disabled');
}
interactiveArea.append(playButton);
clickHandler(playButton, (event) => {
event.stopPropagation();
if (this.hassObj && this.playController) {
this.playController.play(data, true);
}
}, (event) => {
console.log('Play version... will be here!');
event.stopPropagation();
});
} }
interactiveArea.append(playButton);
movieElem.append(interactiveArea); movieElem.append(interactiveArea);
clickHandler(playButton, (event) => {
event.stopPropagation();
if (this.hassObj && this.playController) {
this.playController.play(data, true);
}
}, (event) => {
console.log('Play version... will be here!');
event.stopPropagation();
});
const titleElem = document.createElement('div'); const titleElem = document.createElement('div');
if (lodash.isEqual(data.type, 'episode')) { if (lodash.isEqual(data.type, 'episode')) {
titleElem.innerHTML = escapeHtml(data.grandparentTitle); titleElem.innerHTML = escapeHtml(data.grandparentTitle);
@ -22712,12 +22734,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
// this.appendChild(style); // this.appendChild(style);
return `<style>${style.innerHTML}</style>`; return `<style>${style.innerHTML}</style>`;
}; };
this.getPlayButton = () => {
const playButton = document.createElement('button');
playButton.name = 'playButton';
playButton.classList.add('disabled');
return playButton;
};
this.setConfig = (config) => { this.setConfig = (config) => {
this.plexProtocol = 'http'; this.plexProtocol = 'http';
if (!config.ip) { if (!config.ip) {

20
src/modules/PlayController.ts
Unescape View File

@ -10,6 +10,8 @@ import { supported } from '../const';
import { waitUntilState, getState } from './utils'; import { waitUntilState, getState } from './utils';
class PlayController { class PlayController {
playButtons: Array<any> = [];
readyPlayersForType: Record<string, Record<string, any>> = {}; readyPlayersForType: Record<string, Record<string, any>> = {};
entityStates: Record<string, any> = {}; entityStates: Record<string, any> = {};
@ -429,6 +431,15 @@ class PlayController {
}); });
}; };
getPlayButton = (mediaType: string): HTMLButtonElement => {
const playButton = document.createElement('button');
playButton.name = 'playButton';
playButton.classList.add('disabled');
playButton.setAttribute('data-mediaType', mediaType);
this.playButtons.push(playButton);
return playButton;
};
private refreshAvailableServicesPeriodically = async () => { private refreshAvailableServicesPeriodically = async () => {
const sleep = async (ms: number): Promise<void> => { const sleep = async (ms: number): Promise<void> => {
return new Promise(resolve => setTimeout(resolve, ms)); return new Promise(resolve => setTimeout(resolve, ms));
@ -444,7 +455,14 @@ class PlayController {
}; };
this.getPlayService(mockData, true); this.getPlayService(mockData, true);
if (!_.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) { if (!_.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) {
console.log('CHANGED'); _.forEach(this.playButtons, playButton => {
const playButtonType = playButton.getAttribute('data-mediaType');
if (_.isEmpty(this.readyPlayersForType[playButtonType])) {
playButton.classList.add('disabled');
} else {
playButton.classList.remove('disabled');
}
});
} }
}); });
// eslint-disable-next-line no-await-in-loop // eslint-disable-next-line no-await-in-loop

20
src/modules/utils.ts
Unescape View File

@ -203,16 +203,18 @@ const createEpisodesView = (playController: any, plex: Plex, data: Record<string
const episodeInteractiveArea = document.createElement('div'); const episodeInteractiveArea = document.createElement('div');
episodeInteractiveArea.className = 'interactiveArea'; episodeInteractiveArea.className = 'interactiveArea';
const episodePlayButton = document.createElement('button'); if (playController) {
episodePlayButton.name = 'playButton'; const episodePlayButton = playController.getPlayButton(data.type);
episodePlayButton.addEventListener('click', episodeEvent => { episodePlayButton.addEventListener('click', (episodeEvent: MouseEvent) => {
episodeEvent.stopPropagation(); episodeEvent.stopPropagation();
playController.play(data, true); playController.play(data, true);
}); });
if (!playController.isPlaySupported(data)) { if (playController.isPlaySupported(data)) {
episodePlayButton.classList.add('disabled'); episodePlayButton.classList.remove('disabled');
}
episodeInteractiveArea.append(episodePlayButton);
} }
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea); episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem); episodeContainer.append(episodeElem);

69
src/plex-meets-homeassistant.ts
Unescape View File

@ -1320,18 +1320,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
interactiveArea.appendChild(toViewElem); interactiveArea.appendChild(toViewElem);
} }
const playButton = this.getPlayButton(); if (this.playController) {
if (this.playController && this.playController.isPlaySupported(seasonData)) { const playButton = this.playController.getPlayButton(seasonData.type);
playButton.classList.remove('disabled'); if (this.playController.isPlaySupported(seasonData)) {
} playButton.classList.remove('disabled');
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
} }
}); playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
}
});
interactiveArea.append(playButton);
}
interactiveArea.append(playButton);
seasonElem.append(interactiveArea); seasonElem.append(interactiveArea);
seasonContainer.append(seasonElem); seasonContainer.append(seasonElem);
@ -1646,7 +1649,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activateMovieElem(movieElem); this.activateMovieElem(movieElem);
}); });
const playButton = this.getPlayButton();
const interactiveArea = document.createElement('div'); const interactiveArea = document.createElement('div');
if (!(data.viewCount && data.viewCount > 0) && data.type === 'movie') { if (!(data.viewCount && data.viewCount > 0) && data.type === 'movie') {
@ -1670,27 +1672,31 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
interactiveArea.className = 'interactiveArea'; interactiveArea.className = 'interactiveArea';
if (this.playController && this.playController.isPlaySupported(data)) {
playButton.classList.remove('disabled');
}
interactiveArea.append(playButton);
movieElem.append(interactiveArea); if (this.playController) {
const playButton = this.playController.getPlayButton(data.type);
if (this.playController.isPlaySupported(data)) {
playButton.classList.remove('disabled');
}
interactiveArea.append(playButton);
clickHandler( clickHandler(
playButton, playButton,
(event: any): void => { (event: any): void => {
event.stopPropagation(); event.stopPropagation();
if (this.hassObj && this.playController) { if (this.hassObj && this.playController) {
this.playController.play(data, true); this.playController.play(data, true);
}
},
(event: any): void => {
console.log('Play version... will be here!');
event.stopPropagation();
} }
}, );
(event: any): void => { }
console.log('Play version... will be here!');
event.stopPropagation(); movieElem.append(interactiveArea);
}
);
const titleElem = document.createElement('div'); const titleElem = document.createElement('div');
if (_.isEqual(data.type, 'episode')) { if (_.isEqual(data.type, 'episode')) {
@ -1736,13 +1742,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
return `<style>${style.innerHTML}</style>`; return `<style>${style.innerHTML}</style>`;
}; };
getPlayButton = (): HTMLButtonElement => {
const playButton = document.createElement('button');
playButton.name = 'playButton';
playButton.classList.add('disabled');
return playButton;
};
setConfig = (config: any): void => { setConfig = (config: any): void => {
this.plexProtocol = 'http'; this.plexProtocol = 'http';
if (!config.ip) { if (!config.ip) {

Write Preview
Loading…
Cancel
Save