HomeAssistant
/
PlexMeetsHomeAssistant
mirror of https://github.com/JurajNyiri/PlexMeetsHomeAssistant.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add: Track view with play action button

Browse Source
music
Juraj Nyíri 3 years ago
parent a8e4274c22
commit 7573e6701f
4 changed files with 83 additions and 86 deletions
Show Stats Download Patch File Download Diff File

83
dist/plex-meets-homeassistant.js vendored
Unescape View File

@ -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 = `<span class="trackIndex">${escapeHtml(data.index)}</span>`;
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';

28
src/modules/style.ts
Unescape View File

@ -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 {

56
src/modules/utils.ts
Unescape View File

@ -207,12 +207,27 @@ const createTrackView = (
const trackIndexElem = document.createElement('td');
trackIndexElem.className = 'trackIndexElem';
trackIndexElem.innerHTML = escapeHtml(data.index);
trackIndexElem.innerHTML = `<span class="trackIndex">${escapeHtml(data.index)}</span>`;
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();
});

2
src/plex-meets-homeassistant.ts
Unescape View File

@ -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';

Write Preview
Loading…
Cancel
Save