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

realtime_play_button
Juraj Nyíri 3 years ago
parent fee8140368
commit 7222d9f32b

@ -19267,16 +19267,17 @@ const createEpisodesView = (playController, plex, data) => {
}
const episodeInteractiveArea = document.createElement('div');
episodeInteractiveArea.className = 'interactiveArea';
const episodePlayButton = document.createElement('button');
episodePlayButton.name = 'playButton';
episodePlayButton.addEventListener('click', episodeEvent => {
episodeEvent.stopPropagation();
playController.play(data, true);
});
if (!playController.isPlaySupported(data)) {
episodePlayButton.classList.add('disabled');
if (playController) {
const episodePlayButton = playController.getPlayButton(data.type);
episodePlayButton.addEventListener('click', (episodeEvent) => {
episodeEvent.stopPropagation();
playController.play(data, true);
});
if (playController.isPlaySupported(data)) {
episodePlayButton.classList.remove('disabled');
}
episodeInteractiveArea.append(episodePlayButton);
}
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div');
@ -19328,6 +19329,7 @@ const isScrolledIntoView = (elem) => {
class PlayController {
constructor(hass, plex, entity, runBefore, runAfter, libraryName) {
this.playButtons = [];
this.readyPlayersForType = {};
this.entityStates = {};
this.plexPlayerEntity = '';
@ -19682,6 +19684,14 @@ class PlayController {
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 () => {
const sleep = async (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
@ -19696,7 +19706,15 @@ class PlayController {
};
this.getPlayService(mockData, true);
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
@ -22339,17 +22357,19 @@ class PlexMeetsHomeAssistant extends HTMLElement {
toViewElem.innerHTML = (seasonData.leafCount - seasonData.viewedLeafCount).toString();
interactiveArea.appendChild(toViewElem);
}
const playButton = this.getPlayButton();
if (this.playController && this.playController.isPlaySupported(seasonData)) {
playButton.classList.remove('disabled');
}
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
if (this.playController) {
const playButton = this.playController.getPlayButton(seasonData.type);
if (this.playController.isPlaySupported(seasonData)) {
playButton.classList.remove('disabled');
}
});
interactiveArea.append(playButton);
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
}
});
interactiveArea.append(playButton);
}
seasonElem.append(interactiveArea);
seasonContainer.append(seasonElem);
const seasonTitleElem = document.createElement('div');
@ -22635,7 +22655,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activeMovieElemData = data;
this.activateMovieElem(movieElem);
});
const playButton = this.getPlayButton();
const interactiveArea = document.createElement('div');
if (!(data.viewCount && data.viewCount > 0) && data.type === 'movie') {
const toViewElem = document.createElement('div');
@ -22655,20 +22674,23 @@ class PlexMeetsHomeAssistant extends HTMLElement {
interactiveArea.appendChild(toViewElem);
}
interactiveArea.className = 'interactiveArea';
if (this.playController && this.playController.isPlaySupported(data)) {
playButton.classList.remove('disabled');
if (this.playController) {
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);
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');
if (lodash.isEqual(data.type, 'episode')) {
titleElem.innerHTML = escapeHtml(data.grandparentTitle);
@ -22712,12 +22734,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
// this.appendChild(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.plexProtocol = 'http';
if (!config.ip) {

@ -10,6 +10,8 @@ import { supported } from '../const';
import { waitUntilState, getState } from './utils';
class PlayController {
playButtons: Array<any> = [];
readyPlayersForType: Record<string, 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 () => {
const sleep = async (ms: number): Promise<void> => {
return new Promise(resolve => setTimeout(resolve, ms));
@ -444,7 +455,14 @@ class PlayController {
};
this.getPlayService(mockData, true);
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

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

@ -1320,18 +1320,21 @@ class PlexMeetsHomeAssistant extends HTMLElement {
interactiveArea.appendChild(toViewElem);
}
const playButton = this.getPlayButton();
if (this.playController && this.playController.isPlaySupported(seasonData)) {
playButton.classList.remove('disabled');
}
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
if (this.playController) {
const playButton = this.playController.getPlayButton(seasonData.type);
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);
}
});
interactiveArea.append(playButton);
}
interactiveArea.append(playButton);
seasonElem.append(interactiveArea);
seasonContainer.append(seasonElem);
@ -1646,7 +1649,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.activateMovieElem(movieElem);
});
const playButton = this.getPlayButton();
const interactiveArea = document.createElement('div');
if (!(data.viewCount && data.viewCount > 0) && data.type === 'movie') {
@ -1670,27 +1672,31 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}
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(
playButton,
(event: any): void => {
event.stopPropagation();
clickHandler(
playButton,
(event: any): void => {
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('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');
if (_.isEqual(data.type, 'episode')) {
@ -1736,13 +1742,6 @@ class PlexMeetsHomeAssistant extends HTMLElement {
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 => {
this.plexProtocol = 'http';
if (!config.ip) {

Loading…
Cancel
Save