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

Add: Search functionality

Browse Source
pull/16/head
Juraj Nyíri 4 years ago
parent 53b76645ea
commit 8036dd7abc
2 changed files with 102 additions and 51 deletions
Show Stats Download Patch File Download Diff File

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

@ -19455,6 +19455,7 @@ class PlexMeetsHomeAssistant extends HTMLElement {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.plexProtocol = 'http'; this.plexProtocol = 'http';
this.looseSearch = false;
this.movieElems = []; this.movieElems = [];
this.searchValue = ''; this.searchValue = '';
this.activeMovieElemData = {}; this.activeMovieElemData = {};
@ -19528,29 +19529,47 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}, 100); }, 100);
this.renderPage(); this.renderPage();
}; };
this.searchInput = () => {
const searchContainer = document.createElement('div');
searchContainer.className = 'searchContainer';
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.value = this.searchValue;
searchInput.placeholder = `Search ${this.config.libraryName}...`;
searchInput.addEventListener('keyup', () => {
this.searchValue = searchInput.value;
this.renderPage();
this.focus();
});
searchContainer.appendChild(searchInput);
return searchContainer;
};
this.renderPage = () => { this.renderPage = () => {
if (this) if (this.content) {
this.innerHTML = this.loadCustomStyles(); this.content.remove();
this.card = document.createElement('ha-card'); }
this.card.style.transition = '0.5s'; if (!this.card) {
this.card.style.overflow = 'hidden'; this.card = document.createElement('ha-card');
this.card.style.padding = '16px'; this.card.style.transition = '0.5s';
// card.header = this.config.libraryName; this.card.style.overflow = 'hidden';
this.card.style.padding = '16px';
this.card.appendChild(this.searchInput());
this.appendChild(this.card);
}
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.innerHTML = ''; this.content.innerHTML = this.loadCustomStyles();
if (this.error !== '') { if (this.error !== '') {
this.content.innerHTML = `Error: ${this.error}`; this.content.innerHTML += `Error: ${this.error}`;
} }
else if (this.data[this.config.libraryName] && this.data[this.config.libraryName].length === 0) { else if (this.data[this.config.libraryName] && this.data[this.config.libraryName].length === 0) {
this.content.innerHTML = `Library ${escapeHtml(this.config.libraryName)} has no items.`; this.content.innerHTML += `Library ${escapeHtml(this.config.libraryName)} has no items.`;
} }
else if (this.loading) { else if (this.loading) {
this.content.style.padding = '16px 16px 16px'; this.content.style.padding = '16px 16px 16px';
this.content.innerHTML = this.content.innerHTML +=
'<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>'; '<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';
} }
this.card.appendChild(this.content); this.card.appendChild(this.content);
this.appendChild(this.card);
let count = 0; let count = 0;
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
contentbg.className = 'contentbg'; contentbg.className = 'contentbg';
@ -19582,22 +19601,27 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}); });
}, 1); }, 1);
if (this.data[this.config.libraryName]) { if (this.data[this.config.libraryName]) {
const searchContainer = document.createElement('div');
searchContainer.className = 'searchContainer';
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.value = this.searchValue;
searchInput.placeholder = `Search ${this.config.libraryName}...`;
searchInput.addEventListener('keyup', () => {
this.searchValue = searchInput.value;
});
searchContainer.appendChild(searchInput);
this.content.appendChild(searchContainer);
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
const searchValues = lodash.split(this.searchValue, ' ');
lodash.forEach(this.data[this.config.libraryName], (movieData) => { lodash.forEach(this.data[this.config.libraryName], (movieData) => {
if (!this.maxCount || count < this.maxCount) { if (!this.maxCount || count < this.maxCount) {
count += 1; count += 1;
this.content.appendChild(this.getMovieElement(movieData)); if (this.looseSearch) {
let found = false;
// eslint-disable-next-line consistent-return
lodash.forEach(searchValues, value => {
if (!lodash.isEmpty(value) && lodash.includes(lodash.toUpper(movieData.title), lodash.toUpper(value))) {
found = true;
return false;
}
});
if (found || lodash.isEmpty(searchValues[0])) {
this.content.appendChild(this.getMovieElement(movieData));
}
}
else if (lodash.includes(lodash.toUpper(movieData.title), lodash.toUpper(this.searchValue))) {
this.content.appendChild(this.getMovieElement(movieData));
}
} }
else { else {
return true; return true;

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

@ -13,6 +13,8 @@ class PlexMeetsHomeAssistant extends HTMLElement {
plex: Plex | undefined; plex: Plex | undefined;
looseSearch = false;
playController: PlayController | undefined; playController: PlayController | undefined;
movieElems: any = []; movieElems: any = [];
@ -137,29 +139,53 @@ class PlexMeetsHomeAssistant extends HTMLElement {
this.renderPage(); this.renderPage();
}; };
private searchInput = (): HTMLElement => {
const searchContainer = document.createElement('div');
searchContainer.className = 'searchContainer';
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.value = this.searchValue;
searchInput.placeholder = `Search ${this.config.libraryName}...`;
searchInput.addEventListener('keyup', () => {
this.searchValue = searchInput.value;
this.renderPage();
this.focus();
});
searchContainer.appendChild(searchInput);
return searchContainer;
};
renderPage = (): void => { renderPage = (): void => {
if (this) this.innerHTML = this.loadCustomStyles(); if (this.content) {
this.card = document.createElement('ha-card'); this.content.remove();
this.card.style.transition = '0.5s'; }
this.card.style.overflow = 'hidden';
this.card.style.padding = '16px'; if (!this.card) {
// card.header = this.config.libraryName; this.card = document.createElement('ha-card');
this.card.style.transition = '0.5s';
this.card.style.overflow = 'hidden';
this.card.style.padding = '16px';
this.card.appendChild(this.searchInput());
this.appendChild(this.card);
}
this.content = document.createElement('div'); this.content = document.createElement('div');
this.content.innerHTML = this.loadCustomStyles();
this.content.innerHTML = '';
if (this.error !== '') { if (this.error !== '') {
this.content.innerHTML = `Error: ${this.error}`; this.content.innerHTML += `Error: ${this.error}`;
} else if (this.data[this.config.libraryName] && this.data[this.config.libraryName].length === 0) { } else if (this.data[this.config.libraryName] && this.data[this.config.libraryName].length === 0) {
this.content.innerHTML = `Library ${escapeHtml(this.config.libraryName)} has no items.`; this.content.innerHTML += `Library ${escapeHtml(this.config.libraryName)} has no items.`;
} else if (this.loading) { } else if (this.loading) {
this.content.style.padding = '16px 16px 16px'; this.content.style.padding = '16px 16px 16px';
this.content.innerHTML = this.content.innerHTML +=
'<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>'; '<div style="display: flex; align-items: center; justify-content: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>';
} }
this.card.appendChild(this.content); this.card.appendChild(this.content);
this.appendChild(this.card);
let count = 0; let count = 0;
const contentbg = document.createElement('div'); const contentbg = document.createElement('div');
@ -197,25 +223,26 @@ class PlexMeetsHomeAssistant extends HTMLElement {
}); });
}, 1); }, 1);
if (this.data[this.config.libraryName]) { if (this.data[this.config.libraryName]) {
const searchContainer = document.createElement('div');
searchContainer.className = 'searchContainer';
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.value = this.searchValue;
searchInput.placeholder = `Search ${this.config.libraryName}...`;
searchInput.addEventListener('keyup', () => {
this.searchValue = searchInput.value;
});
searchContainer.appendChild(searchInput);
this.content.appendChild(searchContainer);
// eslint-disable-next-line consistent-return // eslint-disable-next-line consistent-return
const searchValues = _.split(this.searchValue, ' ');
_.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => { _.forEach(this.data[this.config.libraryName], (movieData: Record<string, any>) => {
if (!this.maxCount || count < this.maxCount) { if (!this.maxCount || count < this.maxCount) {
count += 1; count += 1;
this.content.appendChild(this.getMovieElement(movieData)); if (this.looseSearch) {
let found = false;
// eslint-disable-next-line consistent-return
_.forEach(searchValues, value => {
if (!_.isEmpty(value) && _.includes(_.toUpper(movieData.title), _.toUpper(value))) {
found = true;
return false;
}
});
if (found || _.isEmpty(searchValues[0])) {
this.content.appendChild(this.getMovieElement(movieData));
}
} else if (_.includes(_.toUpper(movieData.title), _.toUpper(this.searchValue))) {
this.content.appendChild(this.getMovieElement(movieData));
}
} else { } else {
return true; return true;
} }

Write Preview
Loading…
Cancel
Save