From 7573e6701f160472e225b4088b62e277645cbd44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juraj=20Nyi=CC=81ri?= Date: Mon, 4 Oct 2021 14:23:31 +0200 Subject: [PATCH] Add: Track view with play action button --- dist/plex-meets-homeassistant.js | 83 ++++++++++++++++---------------- src/modules/style.ts | 28 ++++++++++- src/modules/utils.ts | 56 ++++++--------------- src/plex-meets-homeassistant.ts | 2 - 4 files changed, 83 insertions(+), 86 deletions(-) diff --git a/dist/plex-meets-homeassistant.js b/dist/plex-meets-homeassistant.js index 1996e76..40d563d 100644 --- a/dist/plex-meets-homeassistant.js +++ b/dist/plex-meets-homeassistant.js @@ -19268,10 +19268,24 @@ const createTrackView = (playController, plex, data, fontSize1, fontSize2, isEve } const trackIndexElem = document.createElement('td'); trackIndexElem.className = 'trackIndexElem'; - trackIndexElem.innerHTML = escapeHtml(data.index); + trackIndexElem.innerHTML = `${escapeHtml(data.index)}`; trackIndexElem.style.fontSize = `${fontSize1}px`; trackIndexElem.style.lineHeight = `${fontSize1}px`; trackIndexElem.style.marginBottom = `${margin1}px`; + const trackInteractiveArea = document.createElement('div'); + trackInteractiveArea.className = 'trackInteractiveArea'; + if (playController) { + const trackPlayButton = playController.getPlayButton(data.type); + trackPlayButton.addEventListener('click', (trackEvent) => { + trackEvent.stopPropagation(); + playController.play(data, true); + }); + if (playController.isPlaySupported(data)) { + trackPlayButton.classList.remove('disabled'); + } + trackInteractiveArea.append(trackPlayButton); + } + trackIndexElem.append(trackInteractiveArea); trackContainer.append(trackIndexElem); const trackTitleElem = document.createElement('td'); trackTitleElem.className = 'trackTitleElem'; @@ -19292,43 +19306,6 @@ const createTrackView = (playController, plex, data, fontSize1, fontSize2, isEve 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(); }); @@ -21351,6 +21328,30 @@ style.textContent = css ` .trackContainer.even:hover { background-color: rgba(255, 255, 255, 0.2); } + .trackInteractiveArea { + width: 14px; + height: 14px; + } + .trackInteractiveArea button[name='playButton'] { + width: 30px; + height: 30px; + top: inherit; + left: inherit; + margin-top: -7px; + margin-left: -3px; + } + .trackContainer.odd:hover .trackIndexElem .trackIndex, + .trackContainer.even:hover .trackIndexElem .trackIndex { + display: none; + } + .trackContainer.odd:hover .trackIndexElem .trackInteractiveArea, + .trackContainer.even:hover .trackIndexElem .trackInteractiveArea { + display: block; + } + .trackContainer.odd .trackIndexElem .trackInteractiveArea, + .trackContainer.even .trackIndexElem .trackInteractiveArea { + display: none; + } .trackContainer.odd { background-color: rgba(255, 255, 255, 0.08); } @@ -21359,11 +21360,11 @@ style.textContent = css ` } .trackLengthElem { position: relative; - padding: 10px 10px 10px 20px; + padding: 15px 20px 15px 10px; } .trackIndexElem { position: relative; - padding: 10px 20px 10px 10px; + padding: 15px 20px 15px 10px; } .trackTitleElem { @@ -23047,8 +23048,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.plex && (childData.leafCount > 0 || lodash.isEqual(childData.type, 'album'))) { this.episodesElemFreshlyLoaded = true; const episodesData = await this.plex.getLibraryData(childData.key.split('/')[3]); - console.log(episodesData); - console.log('todo: different look for tracks!'); if (this.episodesElem) { this.episodesElemHidden = false; this.episodesElem.style.display = 'block'; diff --git a/src/modules/style.ts b/src/modules/style.ts index 5bce93a..4cc84c6 100644 --- a/src/modules/style.ts +++ b/src/modules/style.ts @@ -188,6 +188,30 @@ style.textContent = css` .trackContainer.even:hover { background-color: rgba(255, 255, 255, 0.2); } + .trackInteractiveArea { + width: 14px; + height: 14px; + } + .trackInteractiveArea button[name='playButton'] { + width: 30px; + height: 30px; + top: inherit; + left: inherit; + margin-top: -7px; + margin-left: -3px; + } + .trackContainer.odd:hover .trackIndexElem .trackIndex, + .trackContainer.even:hover .trackIndexElem .trackIndex { + display: none; + } + .trackContainer.odd:hover .trackIndexElem .trackInteractiveArea, + .trackContainer.even:hover .trackIndexElem .trackInteractiveArea { + display: block; + } + .trackContainer.odd .trackIndexElem .trackInteractiveArea, + .trackContainer.even .trackIndexElem .trackInteractiveArea { + display: none; + } .trackContainer.odd { background-color: rgba(255, 255, 255, 0.08); } @@ -196,11 +220,11 @@ style.textContent = css` } .trackLengthElem { position: relative; - padding: 10px 10px 10px 20px; + padding: 15px 20px 15px 10px; } .trackIndexElem { position: relative; - padding: 10px 20px 10px 10px; + padding: 15px 20px 15px 10px; } .trackTitleElem { diff --git a/src/modules/utils.ts b/src/modules/utils.ts index 904012d..9684030 100644 --- a/src/modules/utils.ts +++ b/src/modules/utils.ts @@ -207,12 +207,27 @@ const createTrackView = ( const trackIndexElem = document.createElement('td'); trackIndexElem.className = 'trackIndexElem'; - trackIndexElem.innerHTML = escapeHtml(data.index); + trackIndexElem.innerHTML = `${escapeHtml(data.index)}`; trackIndexElem.style.fontSize = `${fontSize1}px`; trackIndexElem.style.lineHeight = `${fontSize1}px`; trackIndexElem.style.marginBottom = `${margin1}px`; + const trackInteractiveArea = document.createElement('div'); + trackInteractiveArea.className = 'trackInteractiveArea'; + if (playController) { + const trackPlayButton = playController.getPlayButton(data.type); + trackPlayButton.addEventListener('click', (trackEvent: MouseEvent) => { + trackEvent.stopPropagation(); + playController.play(data, true); + }); + if (playController.isPlaySupported(data)) { + trackPlayButton.classList.remove('disabled'); + } + trackInteractiveArea.append(trackPlayButton); + } + trackIndexElem.append(trackInteractiveArea); + trackContainer.append(trackIndexElem); const trackTitleElem = document.createElement('td'); @@ -240,45 +255,6 @@ const createTrackView = ( } 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(); }); diff --git a/src/plex-meets-homeassistant.ts b/src/plex-meets-homeassistant.ts index 2c3fd20..bb66604 100644 --- a/src/plex-meets-homeassistant.ts +++ b/src/plex-meets-homeassistant.ts @@ -1581,8 +1581,6 @@ class PlexMeetsHomeAssistant extends HTMLElement { if (this.plex && (childData.leafCount > 0 || _.isEqual(childData.type, 'album'))) { this.episodesElemFreshlyLoaded = true; const episodesData = await this.plex.getLibraryData(childData.key.split('/')[3]); - console.log(episodesData); - console.log('todo: different look for tracks!'); if (this.episodesElem) { this.episodesElemHidden = false; this.episodesElem.style.display = 'block';