feat: uses web components to simplify javascript logic

This commit is contained in:
2025-07-24 17:05:19 -05:00
parent 65acd5d21b
commit 566886ef0e
6 changed files with 6 additions and 64 deletions

View File

@@ -40,15 +40,9 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
this.episodeId = this.getAttribute('episode-id') ?? null;
this.#downloadBtnEl = this.querySelector('.download-btn');
this.#selectEpisodeInputEl = this.querySelector('input[type="checkbox"]');
console.log(this.#selectEpisodeInputEl)
this.#downloadBtnEl.addEventListener('click', () => this.download());
// document.addEventListener('filterDownloadOptions', this.filter.bind(this));
}
connectedCallback() {
}
get isSelected() {
return this.#selectEpisodeInputEl.checked;
}
@@ -57,16 +51,6 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
this.#selectEpisodeInputEl.checked = value;
}
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ] = newValue;
}
static get observedAttributes() {
return ['size', 'quality', 'resolution', 'codec', 'seeders', 'provider'];
}
filter({ detail: { activeFilter } }) {
const optionHeader = document.querySelector(`[data-option-id="${this.dataset['localId']}"]`)
const props = {
@@ -117,7 +101,6 @@ export default class DownloadOptionTr extends HTMLTableRowElement {
}
download() {
console.log('Downloading dis bihh')
fetch('/api/download', {
method: 'POST',
headers: {

View File

@@ -1,7 +1,4 @@
export default class EpisodeContainer extends HTMLElement {
H264_CODECS = ['h264', 'h.264', 'x264']
H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
options = [];
showTitle;
@@ -27,19 +24,6 @@ export default class EpisodeContainer extends HTMLElement {
document.addEventListener('downloadSelectedEpisodes', this.downloadSelectedResults.bind(this));
document.addEventListener('selectEpisodeForDownload', (e) => this.selectEpisodeForDownload(e.detail.select));
}
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');

View File

@@ -1,7 +1,4 @@
export default class MovieContainer extends HTMLElement {
H264_CODECS = ['h264', 'h.264', 'x264']
H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
#resultsTableEl;
#resultsCountNumberEl;
@@ -13,12 +10,6 @@ export default class MovieContainer extends HTMLElement {
document.addEventListener('filterDownloadOptions', this.filter.bind(this));
}
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ] = newValue;
}
filter({ detail: { activeFilter } }) {
const options = this.querySelectorAll('tr.download-option');
let firstIncluded = true;

View File

@@ -6,9 +6,6 @@ import { Controller } from '@hotwired/stimulus';
*/
/* stimulusFetch: 'lazy' */
export default class extends Controller {
H264_CODECS = ['h264', 'h.264', 'x264']
H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
static values = {
title: String,
tmdbId: String,

View File

@@ -19,7 +19,7 @@ export default class extends Controller {
"quality": "",
}
static outlets = ['movie-results', 'tv-results', 'tv-episode-list']
static outlets = ['tv-episode-list']
static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'quality', 'selectAll', 'downloadSelected']
static values = {
'imdbId': String,
@@ -55,6 +55,10 @@ export default class extends Controller {
}));
}
downloadSelectedEpisodes() {
document.dispatchEvent(new CustomEvent('downloadSelectedEpisodes', {}));
}
addLanguages(option) {
const languages = Object.assign([], option.languages);
languages.forEach((language) => {
@@ -171,8 +175,4 @@ export default class extends Controller {
}
})
}
downloadSelectedEpisodes() {
document.dispatchEvent(new CustomEvent('downloadSelectedEpisodes', {}));
}
}

View File

@@ -18,7 +18,7 @@ export default class extends Controller {
active: Boolean,
};
static targets = ['list', 'count', 'episodeSelector', 'toggleButton', 'listContainer']
static targets = ['list', 'count', 'episodeSelector',]
static outlets = ['loading-icon']
options = []
@@ -37,17 +37,4 @@ export default class extends Controller {
this.episodeSelectorTarget.disabled = true;
}
}
download() {
this.element.options.forEach(option => {
const optionSelector = option.querySelector('input[type="checkbox"]');
if (true === optionSelector.checked) {
const downloadBtn = option.querySelector('button.download-btn');
const downloadBtnController = this.application.getControllerForElementAndIdentifier(downloadBtn, 'download-button');
downloadBtnController.download();
optionSelector.checked = false;
this.episodeSelectorTarget.checked = false;
}
})
}
}