105 lines
3.9 KiB
JavaScript
105 lines
3.9 KiB
JavaScript
export default class EpisodeContainer extends HTMLElement {
|
|
H264_CODECS = ['h264', 'h.264', 'x264']
|
|
H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
|
|
|
|
#resultsToggleBtnEl;
|
|
#resultsTableEl;
|
|
#resultsCountBadgeEl;
|
|
#resultsCountNumberEl;
|
|
|
|
constructor() {
|
|
super();
|
|
this.#resultsTableEl = this.querySelector('.results-container');
|
|
this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
|
|
this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
|
|
this.#resultsCountNumberEl = this.querySelector('.results-count-number');
|
|
|
|
this.#resultsToggleBtnEl.addEventListener('click', () => this.toggleResults());
|
|
this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());
|
|
|
|
document.addEventListener('filterDownloadOptions', this.filter.bind(this));
|
|
}
|
|
connectedCallback() {
|
|
|
|
}
|
|
|
|
// attribute change
|
|
attributeChangedCallback(property, oldValue, newValue) {
|
|
if (oldValue === newValue) return;
|
|
this[ property ] = newValue;
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['name'];
|
|
}
|
|
|
|
toggleResults() {
|
|
this.#resultsToggleBtnEl.classList.toggle('rotate-90');
|
|
this.#resultsToggleBtnEl.classList.toggle('-rotate-90');
|
|
this.#resultsTableEl.classList.toggle('hidden');
|
|
}
|
|
|
|
filter({ detail: { activeFilter } }) {
|
|
const options = this.querySelectorAll('tr.download-option');
|
|
|
|
let firstIncluded = true;
|
|
let count = 0;
|
|
let selectedCount = 0;
|
|
|
|
options.forEach((option) => {
|
|
const optionHeader = document.querySelector(`[data-option-id="${option.dataset['localId']}"]`)
|
|
const props = {
|
|
"resolution": option.querySelector('#resolution').textContent.trim(),
|
|
"codec": option.querySelector('#codec').textContent.trim(),
|
|
"provider": option.querySelector('#provider').textContent.trim(),
|
|
"languages": JSON.parse(option.dataset['languages']),
|
|
"quality": option.dataset['quality'],
|
|
}
|
|
|
|
let include = true;
|
|
option.classList.add('r-tablerow');
|
|
option.classList.remove('hidden');
|
|
optionHeader.classList.add('r-tablerow');
|
|
optionHeader.classList.remove('hidden');
|
|
option.querySelector('input[type="checkbox"]').checked = false;
|
|
|
|
for (let [key, value] of Object.entries(activeFilter)) {
|
|
if (value === "" || key === "season") {
|
|
continue;
|
|
}
|
|
if (key === "codec" && value === "h264") {
|
|
if (!this.H264_CODECS.includes(props[key].toLowerCase())) {
|
|
include = false;
|
|
}
|
|
} else if (key === "codec" && value === "h265") {
|
|
if (!this.H265_CODECS.includes(props[key].toLowerCase())) {
|
|
include = false;
|
|
}
|
|
} else if (key === "language") {
|
|
if (!props["languages"].includes(value)) {
|
|
include = false;
|
|
}
|
|
} else if (props[key] !== value) {
|
|
include = false;
|
|
}
|
|
}
|
|
|
|
if (false === include) {
|
|
option.classList.remove('r-tablerow');
|
|
option.classList.add('hidden');
|
|
optionHeader.classList.remove('r-tablerow');
|
|
optionHeader.classList.add('hidden');
|
|
} else if (true === firstIncluded) {
|
|
count = 1;
|
|
selectedCount = selectedCount + 1;
|
|
option.querySelector('input[type="checkbox"]').checked = true;
|
|
firstIncluded = false;
|
|
} else {
|
|
count = count + 1;
|
|
}
|
|
|
|
this.#resultsCountNumberEl.innerText = count;
|
|
});
|
|
}
|
|
}
|