fix: working multi-choice filtering
This commit is contained in:
@@ -1,6 +1,15 @@
|
||||
export default class DownloadOptionTr extends HTMLTableRowElement {
|
||||
H264_CODECS = ['h264', 'h.264', 'x264']
|
||||
H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
|
||||
H264_CODECS = {
|
||||
'h264': 'h264',
|
||||
'h.264': 'h264',
|
||||
'x264': 'h264',
|
||||
}
|
||||
H265_CODECS = {
|
||||
'h265': 'h265',
|
||||
'h.265': 'h265',
|
||||
'x265': 'h265',
|
||||
'hevc': 'h265',
|
||||
}
|
||||
|
||||
#downloadBtnEl;
|
||||
#selectEpisodeInputEl;
|
||||
@@ -53,13 +62,6 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
|
||||
|
||||
filter({ detail: { activeFilter } }) {
|
||||
const optionHeader = document.querySelector(`[data-option-id="${this.dataset['localId']}"]`)
|
||||
const props = {
|
||||
"resolution": this.resolution.trim(),
|
||||
"codec": this.codec.trim(),
|
||||
"provider": this.provider.trim(),
|
||||
"languages": this.languages,
|
||||
"quality": this.quality,
|
||||
}
|
||||
|
||||
let include = true;
|
||||
this.classList.add('r-tablerow');
|
||||
@@ -69,25 +71,24 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
|
||||
|
||||
this.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 (!this.#validateResolutions(activeFilter.resolution)) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
if (!this.#validateCodecs(activeFilter.codec)) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
if (!this.#validateLanguages(activeFilter.language)) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
if (!this.#validateQualities(activeFilter.quality)) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
if (!this.#validateProviders(activeFilter.provider)) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
if (false === include) {
|
||||
@@ -121,4 +122,67 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
|
||||
console.log(json)
|
||||
})
|
||||
}
|
||||
|
||||
#validateResolutions(selectedOptions) {
|
||||
return this.#validateIntersection(selectedOptions, this.resolution.trim().split(','));
|
||||
}
|
||||
|
||||
#validateCodecs(selectedOptions) {
|
||||
if (this.#validateIntersection(selectedOptions, Object.keys(this.H264_CODECS))) {
|
||||
return this.#validateIntersection(
|
||||
selectedOptions,
|
||||
[...this.codec.trim().split(','), '', 'n/a']
|
||||
);
|
||||
}
|
||||
if (this.#validateIntersection(selectedOptions, Object.keys(this.H265_CODECS))) {
|
||||
return this.#validateIntersection(
|
||||
selectedOptions,
|
||||
[...this.codec.trim().split(','), '', 'n/a']
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
#validateQualities(selectedOptions) {
|
||||
return this.#validateIntersection(selectedOptions, this.quality.trim().split(','));
|
||||
}
|
||||
|
||||
#validateProviders(selectedOptions) {
|
||||
return this.#validateIntersection(selectedOptions, this.provider.trim().split(','));
|
||||
}
|
||||
|
||||
#validateLanguages(selectedOptions) {
|
||||
return this.#validateIntersection(selectedOptions, this.languages);
|
||||
}
|
||||
|
||||
#validateIntersection(selectedOptions, localOptions) {
|
||||
if (selectedOptions === null || selectedOptions === undefined) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (typeof selectedOptions === 'string' || selectedOptions instanceof String) {
|
||||
selectedOptions = [selectedOptions];
|
||||
}
|
||||
|
||||
if (selectedOptions.length === 0 ||
|
||||
(selectedOptions.length === 1 && selectedOptions[0] === "") ||
|
||||
(selectedOptions.length === 1 && selectedOptions[0] === "-") ||
|
||||
(selectedOptions.length === 1 && selectedOptions[0] === "n/a")
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return this.#doesIntersect(localOptions, selectedOptions);
|
||||
}
|
||||
|
||||
#doesIntersect(a, b) {
|
||||
if (a.length === 0 || b.length === 0) {
|
||||
return false;
|
||||
}
|
||||
return this.#intersect(a, b).length > 0;
|
||||
}
|
||||
|
||||
#intersect(a, b) {
|
||||
return a.filter(Set.prototype.has, new Set(b));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,26 +60,18 @@ export default class extends Controller {
|
||||
}
|
||||
|
||||
addLanguages(option) {
|
||||
const languages = Object.assign([], option.languages);
|
||||
languages.forEach((language) => {
|
||||
option.languages.forEach((language) => {
|
||||
if (!this.languages.includes(language)) {
|
||||
this.languages.push(language);
|
||||
}
|
||||
});
|
||||
|
||||
const preferred = this.languageTarget.dataset.preferred;
|
||||
if (preferred) {
|
||||
this.languageTarget.innerHTML = '<option value="'+preferred+'" selected>'+preferred+'</option>';
|
||||
this.languageTarget.innerHTML += '<option value="">n/a</option>';
|
||||
} else {
|
||||
this.languageTarget.innerHTML = '<option value="">n/a</option>';
|
||||
}
|
||||
|
||||
this.languageTarget.innerHTML = '<option value="">n/a</option>';
|
||||
this.languageTarget.innerHTML += this.languages.sort()
|
||||
.map((language) => {
|
||||
const preferred = this.languageTarget.dataset.preferred;
|
||||
if (preferred === language) {
|
||||
return;
|
||||
const preferred = this.languageTarget.dataset.preferred.split(',');
|
||||
if (preferred.includes(language.toLowerCase())) {
|
||||
return '<option value="'+language+'" selected>'+language+'</option>';
|
||||
}
|
||||
return '<option value="'+language+'">'+language+'</option>';
|
||||
})
|
||||
@@ -141,11 +133,11 @@ export default class extends Controller {
|
||||
const downloadSeasonSpan = document.querySelector("#downloadSeasonModal");
|
||||
|
||||
this.activeFilter = {
|
||||
"resolution": this.resolutionTarget.value,
|
||||
"codec": this.codecTarget.value,
|
||||
"language": this.languageTarget.value,
|
||||
"provider": this.providerTarget.value,
|
||||
"quality": this.qualityTarget.value,
|
||||
"resolution": this.#fetchValuesFromNodeList(this.resolutionTarget.selectedOptions),
|
||||
"codec": this.#fetchValuesFromNodeList(this.codecTarget.selectedOptions),
|
||||
"language": this.#fetchValuesFromNodeList(this.languageTarget.selectedOptions),
|
||||
"provider": this.#fetchValuesFromNodeList(this.providerTarget.selectedOptions),
|
||||
"quality": this.#fetchValuesFromNodeList(this.qualityTarget.selectedOptions),
|
||||
}
|
||||
|
||||
if ("tvshows" === this.mediaTypeValue) {
|
||||
@@ -175,4 +167,9 @@ export default class extends Controller {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
#fetchValuesFromNodeList(nodeList) {
|
||||
console.log([...nodeList].map(option => option.value))
|
||||
return [...nodeList].map(option => option.value)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,6 +68,16 @@ dialog[data-dialog-target="dialog"][closing] {
|
||||
@apply bg-gray-50 text-gray-50 px-2 py-1 bg-transparent border-b-2 border-orange-400
|
||||
}
|
||||
|
||||
.text-input[multiple="multiple"] {
|
||||
@apply bg-transparent backdrop-filter backdrop-blur-md text-white border border-orange-500 rounded-md
|
||||
}
|
||||
|
||||
.text-input option[checked="checked"],
|
||||
.text-input option[checked],
|
||||
.text-input option[selected] {
|
||||
@apply bg-orange-500/60
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
@apply bg-green-600/40 px-1.5 py-1 w-full rounded-md text-gray-50 backdrop-filter backdrop-blur-sm border-2 border-green-500 hover:bg-green-700/40
|
||||
}
|
||||
@@ -148,3 +158,28 @@ dialog[data-dialog-target="dialog"][closing] {
|
||||
z-index: 2;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#filter {
|
||||
.ts-wrapper {
|
||||
box-shadow: none !important;
|
||||
padding: 0;
|
||||
|
||||
.ts-control {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.item[data-ts-item] {
|
||||
background-image: none !important;
|
||||
border: none;
|
||||
@apply bg-orange-500;
|
||||
}
|
||||
|
||||
@apply border-b-2 border-b-orange-600 bg-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
|
||||
@apply border-l-orange-800;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user