vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

sure this works i guess

Browse source
This commit is contained in:
edidealt 2026-03-22 04:57:18 +00:00
parent c2f8d3fca1
commit 4d18704e2e
1 changed files with 22 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
js/ui.js
View file

@ -5340,13 +5340,6 @@ export class UIRenderer {
} }
cleanupPodcastState() { cleanupPodcastState() {
if (this.podcastScrollHandler) {
const mainContent = document.querySelector('.main-content');
if (mainContent) {
mainContent.removeEventListener('scroll', this.podcastScrollHandler);
}
this.podcastScrollHandler = null;
}
this.podcastState = null; this.podcastState = null;
} }
@ -5392,7 +5385,7 @@ export class UIRenderer {
document.title = `${podcastResult?.title || 'Podcast'} - Monochrome Music`; document.title = `${podcastResult?.title || 'Podcast'} - Monochrome Music`;
episodesContainer.innerHTML = ''; episodesContainer.innerHTML = '';
await this.loadMorePodcastEpisodes(); await this.loadAllPodcastEpisodes();
} catch (error) { } catch (error) {
console.error('Failed to load podcast:', error); console.error('Failed to load podcast:', error);
nameEl.textContent = 'Podcast not found'; nameEl.textContent = 'Podcast not found';
@ -5400,54 +5393,24 @@ export class UIRenderer {
} }
} }
async loadMorePodcastEpisodes() { async loadAllPodcastEpisodes() {
if (this.podcastState.isLoading || !this.podcastState.hasMore) return;
this.podcastState.isLoading = true; this.podcastState.isLoading = true;
const episodesContainer = document.getElementById('podcasts-episodes-container'); const episodesContainer = document.getElementById('podcasts-episodes-container');
if (this.podcastState.offset === 0) {
episodesContainer.innerHTML = this.createSkeletonTracks(8, true); episodesContainer.innerHTML = this.createSkeletonTracks(8, true);
} else {
const loader = document.createElement('div');
loader.id = 'podcast-load-more';
loader.className = 'loading-more';
loader.innerHTML = '<div class="skeleton-track"></div>'.repeat(4);
episodesContainer.appendChild(loader);
}
try { try {
const { podcastsAPI } = await import('./podcasts-api.js'); const { podcastsAPI } = await import('./podcasts-api.js');
const result = await podcastsAPI.getPodcastEpisodes(this.podcastState.id, { const result = await podcastsAPI.getPodcastEpisodes(this.podcastState.id, {
max: 50, max: 10000,
offset: this.podcastState.offset,
}); });
console.log( this.podcastState.episodes = result.items;
'Podcast episodes loaded:', this.podcastState.hasMore = false;
result.items.length,
'hasMore:',
result.hasMore,
'offset:',
this.podcastState.offset
);
const isFirstLoad = this.podcastState.offset === 0;
this.podcastState.episodes.push(...result.items);
this.podcastState.offset += result.items.length;
this.podcastState.hasMore = result.hasMore;
if (isFirstLoad) {
const podcastTitle = this.podcastState.podcastTitle || 'Unknown Podcast'; const podcastTitle = this.podcastState.podcastTitle || 'Unknown Podcast';
const tracks = result.items.map((ep) => this.transformPodcastEpisodeToTrack(ep, podcastTitle)); const tracks = result.items.map((ep) => this.transformPodcastEpisodeToTrack(ep, podcastTitle));
this.renderListWithTracks(episodesContainer, tracks, true); this.renderListWithTracks(episodesContainer, tracks, true);
const sentinel = document.createElement('div');
sentinel.id = 'podcast-scroll-sentinel';
sentinel.style.height = '1px';
episodesContainer.appendChild(sentinel);
const playBtn = document.getElementById('play-podcasts-btn'); const playBtn = document.getElementById('play-podcasts-btn');
if (playBtn && result.items.length > 0) { if (playBtn && result.items.length > 0) {
playBtn.onclick = () => { playBtn.onclick = () => {
@ -5460,71 +5423,14 @@ export class UIRenderer {
} }
}; };
} }
this.setupPodcastInfiniteScroll();
} else {
const loader = document.getElementById('podcast-load-more');
if (loader) loader.remove();
const podcastTitle = this.podcastState.podcastTitle || 'Unknown Podcast';
const tracks = result.items.map((ep) => this.transformPodcastEpisodeToTrack(ep, podcastTitle));
this.appendListWithTracks(tracks);
}
if (!this.podcastState.hasMore) {
const loader = document.getElementById('podcast-load-more');
if (loader) loader.remove();
}
} catch (error) { } catch (error) {
console.error('Failed to load more episodes:', error); console.error('Failed to load podcast episodes:', error);
const loader = document.getElementById('podcast-load-more'); episodesContainer.innerHTML = createPlaceholder('Failed to load episodes.');
if (loader) loader.remove();
} }
this.podcastState.isLoading = false; this.podcastState.isLoading = false;
} }
setupPodcastInfiniteScroll() {
const mainContent = document.querySelector('.main-content');
if (!mainContent) return;
const scrollHandler = () => {
const scrollTop = mainContent.scrollTop;
const scrollHeight = mainContent.scrollHeight;
const clientHeight = mainContent.clientHeight;
if (scrollTop + clientHeight >= scrollHeight - 200) {
if (this.podcastState?.hasMore && !this.podcastState?.isLoading) {
console.log('Loading more podcast episodes...');
this.loadMorePodcastEpisodes();
}
}
};
mainContent.addEventListener('scroll', scrollHandler);
this.podcastScrollHandler = scrollHandler;
}
appendListWithTracks(tracks) {
const listContainer = document.getElementById('podcasts-episodes-container');
const sentinel = document.getElementById('podcast-scroll-sentinel');
const existingTracks = listContainer.querySelectorAll('.track-row, .track-item').length;
tracks.forEach((track, index) => {
const trackHtml = this.createTrackItemHTML(track, existingTracks + index, true);
const trackEl = document.createElement('div');
trackEl.innerHTML = trackHtml;
const row = trackEl.firstElementChild;
if (sentinel) {
listContainer.insertBefore(row, sentinel);
} else {
listContainer.appendChild(row);
}
trackDataStore.set(row, track);
});
}
async renderPodcastSearchResults(query) { async renderPodcastSearchResults(query) {
const podcastsContainer = document.getElementById('search-podcasts-container'); const podcastsContainer = document.getElementById('search-podcasts-container');
podcastsContainer.innerHTML = this.createSkeletonCards(12, true); podcastsContainer.innerHTML = this.createSkeletonCards(12, true);