Add: View for songs WIP

dist/plex-meets-homeassistant.js

@@ -19240,6 +19240,13 @@ const sleep = async (ms) => {
 const getState = async (hass, entityID) => {
     return hass.callApi('GET', `states/${entityID}`);
 };
+const padWithZeroes = (number, length) => {
+    let myString = `${number}`;
+    while (myString.length < length) {
+        myString = `0${myString}`;
+    }
+    return myString;
+};
 const waitUntilState = async (hass, entityID, state) => {
     let entityState = await getState(hass, entityID);
     while (entityState.state !== state) {
@@ -19249,6 +19256,84 @@ const waitUntilState = async (hass, entityID, state) => {
         await sleep(1000);
     }
 };
+const createTrackView = (playController, plex, data, fontSize1, fontSize2, isEven) => {
+    const margin1 = fontSize1 / 4;
+    const trackContainer = document.createElement('tr');
+    trackContainer.classList.add('trackContainer');
+    if (isEven) {
+        trackContainer.classList.add('even');
+    }
+    else {
+        trackContainer.classList.add('odd');
+    }
+    const trackIndexElem = document.createElement('td');
+    trackIndexElem.className = 'trackIndexElem';
+    trackIndexElem.innerHTML = escapeHtml(data.index);
+    trackIndexElem.style.fontSize = `${fontSize1}px`;
+    trackIndexElem.style.lineHeight = `${fontSize1}px`;
+    trackIndexElem.style.marginBottom = `${margin1}px`;
+    trackContainer.append(trackIndexElem);
+    const trackTitleElem = document.createElement('td');
+    trackTitleElem.className = 'trackTitleElem';
+    trackTitleElem.innerHTML = escapeHtml(data.title);
+    trackTitleElem.style.fontSize = `${fontSize1}px`;
+    trackTitleElem.style.lineHeight = `${fontSize1}px`;
+    trackTitleElem.style.marginBottom = `${margin1}px`;
+    trackContainer.append(trackTitleElem);
+    const duration = lodash.get(data, 'Media[0].duration');
+    const trackLengthElem = document.createElement('td');
+    trackLengthElem.className = 'trackLengthElem';
+    trackLengthElem.style.fontSize = `${fontSize1}px`;
+    trackLengthElem.style.lineHeight = `${fontSize1}px`;
+    trackLengthElem.style.marginBottom = `${margin1}px`;
+    if (duration) {
+        const minutes = Math.floor(duration / 60 / 1000);
+        const seconds = Math.round((duration - minutes * 1000) / 6000);
+        trackLengthElem.innerHTML = escapeHtml(`${padWithZeroes(minutes, 2)}:${padWithZeroes(seconds, 2)}`);
+    }
+    trackContainer.append(trackLengthElem);
+    /*
+    const episodeInteractiveArea = document.createElement('div');
+    episodeInteractiveArea.className = 'interactiveArea';
+    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);
+    }
+    */
+    /*
+
+    const trackIndexElem = document.createElement('div');
+    trackIndexElem.className = 'trackIndexElem';
+    trackIndexElem.innerHTML = escapeHtml(data.index);
+
+    trackIndexElem.style.fontSize = `${fontSize1}px`;
+    trackIndexElem.style.lineHeight = `${fontSize1}px`;
+    trackIndexElem.style.marginBottom = `${margin1}px`;
+
+    trackContainer.append(trackIndexElem);
+
+    const trackTitleElem = document.createElement('div');
+    trackTitleElem.className = 'trackTitleElem';
+    trackTitleElem.innerHTML = escapeHtml(data.title);
+
+    trackTitleElem.style.fontSize = `${fontSize1}px`;
+    trackTitleElem.style.lineHeight = `${fontSize1}px`;
+    trackTitleElem.style.marginBottom = `${margin1}px`;
+
+    trackContainer.append(trackTitleElem);
+    */
+    trackContainer.addEventListener('click', episodeEvent => {
+        episodeEvent.stopPropagation();
+    });
+    return trackContainer;
+};
 const createEpisodesView = (playController, plex, data, fontSize1, fontSize2) => {
     const episodeContainer = document.createElement('div');
     episodeContainer.className = 'episodeContainer';
@@ -21259,6 +21344,31 @@ style.textContent = css `
 			transform: rotate(360deg);
 		}
 	}
+	.trackContainer {
+		width: 100%;
+	}
+	.trackContainer.odd:hover,
+	.trackContainer.even:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+	.trackContainer.odd {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.trackContainer.even {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
+	.trackLengthElem {
+		position: relative;
+		padding: 10px 10px 10px 20px;
+	}
+	.trackIndexElem {
+		position: relative;
+		padding: 10px 20px 10px 10px;
+	}
+
+	.trackTitleElem {
+		width: 100%;
+	}
 	.detail {
 		position: absolute;
 		left: 247px;
@@ -22945,10 +23055,25 @@ class PlexMeetsHomeAssistant extends HTMLElement {
                                                         this.episodesElem.innerHTML = '';
                                                         this.episodesElem.style.transition = `0s`;
                                                         this.episodesElem.style.top = `${top + 2000}px`;
+                                                        const tableView = document.createElement('table');
+                                                        tableView.style.width = 'calc(100% - 10px)';
+                                                        tableView.style.border = 'none';
+                                                        tableView.cellSpacing = '0';
+                                                        tableView.cellPadding = '0';
+                                                        if (lodash.isEqual(childData.type, 'album')) {
+                                                            this.episodesElem.append(tableView);
+                                                        }
+                                                        let isEven = false;
                                                         lodash.forEach(episodesData, episodeData => {
                                                             if (this.episodesElem && this.playController && this.plex) {
+                                                                if (lodash.isEqual(episodeData.type, 'track')) {
+                                                                    tableView.append(createTrackView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2, isEven));
+                                                                    isEven = !isEven;
+                                                                }
+                                                                else {
                                                                     this.episodesElem.append(createEpisodesView(this.playController, this.plex, episodeData, this.fontSize1, this.fontSize2));
                                                                 }
+                                                            }
                                                         });
                                                         clearInterval(this.episodesLoadTimeout);
                                                         this.episodesLoadTimeout = setTimeout(() => {

src/modules/style.ts

@@ -181,6 +181,31 @@ style.textContent = css`
 			transform: rotate(360deg);
 		}
 	}
+	.trackContainer {
+		width: 100%;
+	}
+	.trackContainer.odd:hover,
+	.trackContainer.even:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+	.trackContainer.odd {
+		background-color: rgba(255, 255, 255, 0.08);
+	}
+	.trackContainer.even {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
+	.trackLengthElem {
+		position: relative;
+		padding: 10px 10px 10px 20px;
+	}
+	.trackIndexElem {
+		position: relative;
+		padding: 10px 20px 10px 10px;
+	}
+
+	.trackTitleElem {
+		width: 100%;
+	}
 	.detail {
 		position: absolute;
 		left: 247px;

src/modules/utils.ts

@@ -167,6 +167,15 @@ const getState = async (hass: HomeAssistant, entityID: string): Promise<Record<s
 	return hass.callApi('GET', `states/${entityID}`);
 };
 
+const padWithZeroes = (number: number, length: number): string => {
+	let myString = `${number}`;
+	while (myString.length < length) {
+		myString = `0${myString}`;
+	}
+
+	return myString;
+};
+
 const waitUntilState = async (hass: HomeAssistant, entityID: string, state: string): Promise<void> => {
 	let entityState = await getState(hass, entityID);
 
@@ -178,6 +187,103 @@ const waitUntilState = async (hass: HomeAssistant, entityID: string, state: stri
 	}
 };
 
+const createTrackView = (
+	playController: any,
+	plex: Plex,
+	data: Record<string, any>,
+	fontSize1: number,
+	fontSize2: number,
+	isEven: boolean
+): HTMLElement => {
+	const margin1 = fontSize1 / 4;
+	const margin2 = fontSize2 / 4;
+	const trackContainer = document.createElement('tr');
+	trackContainer.classList.add('trackContainer');
+	if (isEven) {
+		trackContainer.classList.add('even');
+	} else {
+		trackContainer.classList.add('odd');
+	}
+
+	const trackIndexElem = document.createElement('td');
+	trackIndexElem.className = 'trackIndexElem';
+	trackIndexElem.innerHTML = escapeHtml(data.index);
+
+	trackIndexElem.style.fontSize = `${fontSize1}px`;
+	trackIndexElem.style.lineHeight = `${fontSize1}px`;
+	trackIndexElem.style.marginBottom = `${margin1}px`;
+
+	trackContainer.append(trackIndexElem);
+
+	const trackTitleElem = document.createElement('td');
+	trackTitleElem.className = 'trackTitleElem';
+	trackTitleElem.innerHTML = escapeHtml(data.title);
+
+	trackTitleElem.style.fontSize = `${fontSize1}px`;
+	trackTitleElem.style.lineHeight = `${fontSize1}px`;
+	trackTitleElem.style.marginBottom = `${margin1}px`;
+
+	trackContainer.append(trackTitleElem);
+
+	const duration = _.get(data, 'Media[0].duration');
+	const trackLengthElem = document.createElement('td');
+	trackLengthElem.className = 'trackLengthElem';
+
+	trackLengthElem.style.fontSize = `${fontSize1}px`;
+	trackLengthElem.style.lineHeight = `${fontSize1}px`;
+	trackLengthElem.style.marginBottom = `${margin1}px`;
+
+	if (duration) {
+		const minutes = Math.floor(duration / 60 / 1000);
+		const seconds = Math.round((duration - minutes * 1000) / 6000);
+		trackLengthElem.innerHTML = escapeHtml(`${padWithZeroes(minutes, 2)}:${padWithZeroes(seconds, 2)}`);
+	}
+	trackContainer.append(trackLengthElem);
+
+	/*
+	const episodeInteractiveArea = document.createElement('div');
+	episodeInteractiveArea.className = 'interactiveArea';
+	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);
+	}
+	*/
+
+	/*
+
+	const trackIndexElem = document.createElement('div');
+	trackIndexElem.className = 'trackIndexElem';
+	trackIndexElem.innerHTML = escapeHtml(data.index);
+
+	trackIndexElem.style.fontSize = `${fontSize1}px`;
+	trackIndexElem.style.lineHeight = `${fontSize1}px`;
+	trackIndexElem.style.marginBottom = `${margin1}px`;
+
+	trackContainer.append(trackIndexElem);
+
+	const trackTitleElem = document.createElement('div');
+	trackTitleElem.className = 'trackTitleElem';
+	trackTitleElem.innerHTML = escapeHtml(data.title);
+
+	trackTitleElem.style.fontSize = `${fontSize1}px`;
+	trackTitleElem.style.lineHeight = `${fontSize1}px`;
+	trackTitleElem.style.marginBottom = `${margin1}px`;
+
+	trackContainer.append(trackTitleElem);
+	*/
+
+	trackContainer.addEventListener('click', episodeEvent => {
+		episodeEvent.stopPropagation();
+	});
+	return trackContainer;
+};
 const createEpisodesView = (
 	playController: any,
 	plex: Plex,
@@ -301,5 +407,6 @@ export {
 	clickHandler,
 	fetchEntityRegistry,
 	waitUntilState,
-	getState
+	getState,
+	createTrackView
 };

src/plex-meets-homeassistant.ts

@@ -19,7 +19,8 @@ import {
 	getDetailsBottom,
 	clickHandler,
 	fetchEntityRegistry,
-	getWidth
+	getWidth,
+	createTrackView
 } from './modules/utils';
 import style from './modules/style';
 
@@ -1588,8 +1589,30 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 													this.episodesElem.innerHTML = '';
 													this.episodesElem.style.transition = `0s`;
 													this.episodesElem.style.top = `${top + 2000}px`;
+													const tableView = document.createElement('table');
+													tableView.style.width = 'calc(100% - 10px)';
+													tableView.style.border = 'none';
+													tableView.cellSpacing = '0';
+													tableView.cellPadding = '0';
+													if (_.isEqual(childData.type, 'album')) {
+														this.episodesElem.append(tableView);
+													}
+													let isEven = false;
 													_.forEach(episodesData, episodeData => {
 														if (this.episodesElem && this.playController && this.plex) {
+															if (_.isEqual(episodeData.type, 'track')) {
+																tableView.append(
+																	createTrackView(
+																		this.playController,
+																		this.plex,
+																		episodeData,
+																		this.fontSize1,
+																		this.fontSize2,
+																		isEven
+																	)
+																);
+																isEven = !isEven;
+															} else {
 																this.episodesElem.append(
 																	createEpisodesView(
 																		this.playController,
@@ -1600,6 +1623,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
 																	)
 																);
 															}
+														}
 													});
 													clearInterval(this.episodesLoadTimeout);
 													this.episodesLoadTimeout = setTimeout(() => {