Update: Play Buttons always added but not displayed if not available

realtime_play_button
Juraj Nyíri 3 years ago
parent d154ecd30d
commit fee8140368

@ -19265,18 +19265,19 @@ const createEpisodesView = (playController, plex, data) => {
toViewElem.className = 'toViewEpisode'; toViewElem.className = 'toViewEpisode';
episodeElem.appendChild(toViewElem); episodeElem.appendChild(toViewElem);
} }
if (playController.isPlaySupported(data)) { const episodeInteractiveArea = document.createElement('div');
const episodeInteractiveArea = document.createElement('div'); episodeInteractiveArea.className = 'interactiveArea';
episodeInteractiveArea.className = 'interactiveArea'; const episodePlayButton = document.createElement('button');
const episodePlayButton = document.createElement('button'); episodePlayButton.name = 'playButton';
episodePlayButton.name = 'playButton'; episodePlayButton.addEventListener('click', episodeEvent => {
episodePlayButton.addEventListener('click', episodeEvent => { episodeEvent.stopPropagation();
episodeEvent.stopPropagation(); playController.play(data, true);
playController.play(data, true); });
}); if (!playController.isPlaySupported(data)) {
episodeInteractiveArea.append(episodePlayButton); episodePlayButton.classList.add('disabled');
episodeElem.append(episodeInteractiveArea);
} }
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem); episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div'); const episodeTitleElem = document.createElement('div');
episodeTitleElem.className = 'episodeTitleElem'; episodeTitleElem.className = 'episodeTitleElem';
@ -19697,10 +19698,6 @@ class PlayController {
if (!lodash.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) { if (!lodash.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) {
console.log('CHANGED'); console.log('CHANGED');
} }
else {
console.log('SAME');
}
console.log(JSON.stringify(this.readyPlayersForType));
}); });
// eslint-disable-next-line no-await-in-loop // eslint-disable-next-line no-await-in-loop
await sleep(1000); await sleep(1000);
@ -21155,6 +21152,9 @@ style.textContent = css `
.interactiveArea:hover { .interactiveArea:hover {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
button[name='playButton'].disabled {
display: none;
}
button[name='playButton'] { button[name='playButton'] {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -22339,16 +22339,17 @@ 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 && this.playController.isPlaySupported(seasonData)) { if (this.playController && this.playController.isPlaySupported(seasonData)) {
const playButton = this.getPlayButton(); playButton.classList.remove('disabled');
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
}
});
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); seasonElem.append(interactiveArea);
seasonContainer.append(seasonElem); seasonContainer.append(seasonElem);
const seasonTitleElem = document.createElement('div'); const seasonTitleElem = document.createElement('div');
@ -22655,8 +22656,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
} }
interactiveArea.className = 'interactiveArea'; interactiveArea.className = 'interactiveArea';
if (this.playController && this.playController.isPlaySupported(data)) { if (this.playController && this.playController.isPlaySupported(data)) {
interactiveArea.append(playButton); playButton.classList.remove('disabled');
} }
interactiveArea.append(playButton);
movieElem.append(interactiveArea); movieElem.append(interactiveArea);
clickHandler(playButton, (event) => { clickHandler(playButton, (event) => {
event.stopPropagation(); event.stopPropagation();
@ -22713,6 +22715,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.getPlayButton = () => { this.getPlayButton = () => {
const playButton = document.createElement('button'); const playButton = document.createElement('button');
playButton.name = 'playButton'; playButton.name = 'playButton';
playButton.classList.add('disabled');
return playButton; return playButton;
}; };
this.setConfig = (config) => { this.setConfig = (config) => {

@ -445,10 +445,7 @@ class PlayController {
this.getPlayService(mockData, true); this.getPlayService(mockData, true);
if (!_.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) { if (!_.isEqual(previousReadyPlayersForType, this.readyPlayersForType)) {
console.log('CHANGED'); console.log('CHANGED');
} else {
console.log('SAME');
} }
console.log(JSON.stringify(this.readyPlayersForType));
}); });
// eslint-disable-next-line no-await-in-loop // eslint-disable-next-line no-await-in-loop
await sleep(1000); await sleep(1000);

@ -416,6 +416,9 @@ style.textContent = css`
.interactiveArea:hover { .interactiveArea:hover {
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
} }
button[name='playButton'].disabled {
display: none;
}
button[name='playButton'] { button[name='playButton'] {
width: 40px; width: 40px;
height: 40px; height: 40px;

@ -201,20 +201,19 @@ const createEpisodesView = (playController: any, plex: Plex, data: Record<string
episodeElem.appendChild(toViewElem); episodeElem.appendChild(toViewElem);
} }
if (playController.isPlaySupported(data)) { const episodeInteractiveArea = document.createElement('div');
const episodeInteractiveArea = document.createElement('div'); episodeInteractiveArea.className = 'interactiveArea';
episodeInteractiveArea.className = 'interactiveArea'; const episodePlayButton = document.createElement('button');
episodePlayButton.name = 'playButton';
const episodePlayButton = document.createElement('button'); episodePlayButton.addEventListener('click', episodeEvent => {
episodePlayButton.name = 'playButton'; episodeEvent.stopPropagation();
episodePlayButton.addEventListener('click', episodeEvent => { playController.play(data, true);
episodeEvent.stopPropagation(); });
playController.play(data, true); if (!playController.isPlaySupported(data)) {
}); episodePlayButton.classList.add('disabled');
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea);
} }
episodeInteractiveArea.append(episodePlayButton);
episodeElem.append(episodeInteractiveArea);
episodeContainer.append(episodeElem); episodeContainer.append(episodeElem);
const episodeTitleElem = document.createElement('div'); const episodeTitleElem = document.createElement('div');

@ -1320,17 +1320,18 @@ class PlexMeetsHomeAssistant extends HTMLElement {
interactiveArea.appendChild(toViewElem); interactiveArea.appendChild(toViewElem);
} }
const playButton = this.getPlayButton();
if (this.playController && this.playController.isPlaySupported(seasonData)) { if (this.playController && this.playController.isPlaySupported(seasonData)) {
const playButton = this.getPlayButton(); playButton.classList.remove('disabled');
playButton.addEventListener('click', event => {
event.stopPropagation();
if (this.plex && this.playController) {
this.playController.play(seasonData, true);
}
});
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); seasonElem.append(interactiveArea);
seasonContainer.append(seasonElem); seasonContainer.append(seasonElem);
@ -1670,8 +1671,9 @@ class PlexMeetsHomeAssistant extends HTMLElement {
interactiveArea.className = 'interactiveArea'; interactiveArea.className = 'interactiveArea';
if (this.playController && this.playController.isPlaySupported(data)) { if (this.playController && this.playController.isPlaySupported(data)) {
interactiveArea.append(playButton); playButton.classList.remove('disabled');
} }
interactiveArea.append(playButton);
movieElem.append(interactiveArea); movieElem.append(interactiveArea);
@ -1737,6 +1739,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
getPlayButton = (): HTMLButtonElement => { getPlayButton = (): HTMLButtonElement => {
const playButton = document.createElement('button'); const playButton = document.createElement('button');
playButton.name = 'playButton'; playButton.name = 'playButton';
playButton.classList.add('disabled');
return playButton; return playButton;
}; };

Loading…
Cancel
Save