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

dist/plex-meets-homeassistant.js

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

src/modules/PlayController.ts

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

src/modules/style.ts

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

src/modules/utils.ts

@@ -201,20 +201,19 @@ const createEpisodesView = (playController: any, plex: Plex, data: Record<string
 		episodeElem.appendChild(toViewElem);
 	}
 
-	if (playController.isPlaySupported(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');
+	}
 	episodeInteractiveArea.append(episodePlayButton);
 	episodeElem.append(episodeInteractiveArea);
-	}
 	episodeContainer.append(episodeElem);
 
 	const episodeTitleElem = document.createElement('div');

src/plex-meets-homeassistant.ts

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