v0.1.2: 검색 속도 개선, 인피니티 스크롤 최적화, 미니 플레이어 추가
This commit is contained in:
297
static/youtube-dl_search.js
Normal file
297
static/youtube-dl_search.js
Normal file
@@ -0,0 +1,297 @@
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// ====================
|
||||
// DOM 요소 참조
|
||||
// ====================
|
||||
const searchKeyword = document.getElementById('search_keyword');
|
||||
const searchBtn = document.getElementById('search_btn');
|
||||
const searchResults = document.getElementById('search_results');
|
||||
const sentinel = document.getElementById('sentinel');
|
||||
const sentinelLoading = document.getElementById('sentinel_loading');
|
||||
const playerWrapper = document.getElementById('player-wrapper');
|
||||
const initialMessage = document.getElementById('initial_message');
|
||||
|
||||
// ====================
|
||||
// 상태 변수
|
||||
// ====================
|
||||
let currentPage = 1;
|
||||
let isLoading = false;
|
||||
let hasMore = true;
|
||||
let art = null;
|
||||
let lastPreviewUrl = '';
|
||||
|
||||
// ====================
|
||||
// AJAX 헬퍼
|
||||
// ====================
|
||||
const postAjax = (url, data) => {
|
||||
return fetch(`/${package_name}/ajax${url}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
|
||||
body: new URLSearchParams(data),
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(ret => {
|
||||
if (ret.msg) notify(ret.msg, ret.ret);
|
||||
return ret;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('[YouTube-DL] AJAX Error:', err);
|
||||
notify('요청 실패', 'danger');
|
||||
return { ret: 'error' };
|
||||
});
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 유틸리티 함수
|
||||
// ====================
|
||||
const formatDuration = (seconds) => {
|
||||
if (!seconds) return '--:--';
|
||||
const hrs = Math.floor(seconds / 3600);
|
||||
const mins = Math.floor((seconds % 3600) / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
if (hrs > 0) return `${hrs}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formatUploadDate = (item) => {
|
||||
const dateVal = item.upload_date || item.publication_date || item.date;
|
||||
if (!dateVal) return '';
|
||||
const dateStr = String(dateVal);
|
||||
if (dateStr.length === 8 && /^\d+$/.test(dateStr)) {
|
||||
return `${dateStr.slice(0, 4)}.${dateStr.slice(4, 6)}.${dateStr.slice(6, 8)}`;
|
||||
}
|
||||
return dateStr;
|
||||
};
|
||||
|
||||
const getBestThumbnail = (item) => {
|
||||
if (item.thumbnail && typeof item.thumbnail === 'string') return item.thumbnail;
|
||||
if (item.thumbnails && item.thumbnails.length > 0) {
|
||||
const sorted = [...item.thumbnails].sort((a, b) => (b.width || 0) - (a.width || 0));
|
||||
return sorted[0].url;
|
||||
}
|
||||
return '/static/img/no_image.png';
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 플레이어 초기화
|
||||
// ====================
|
||||
const initArtplayer = (videoUrl) => {
|
||||
playerWrapper.style.display = 'block';
|
||||
if (art) { art.switchUrl(videoUrl); return; }
|
||||
|
||||
art = new Artplayer({
|
||||
container: '#player-wrapper',
|
||||
url: videoUrl,
|
||||
autoplay: true, muted: false, volume: 1.0,
|
||||
autoSize: false, // 컨테이너 크기에 맞춤
|
||||
aspectRatio: true, // 16:9 비율 유지
|
||||
pip: true, setting: true,
|
||||
playbackRate: true, fullscreen: true, fullscreenWeb: true,
|
||||
theme: '#38bdf8',
|
||||
autoMini: true, // 스크롤 시 미니 플레이어로 자동 전환
|
||||
customType: {
|
||||
m3u8: (video, url) => {
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
video.src = url;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 결과 카드 생성
|
||||
// ====================
|
||||
const makeResultCard = (item) => {
|
||||
const videoId = item.id || item.url;
|
||||
const url = (item.url && item.url.startsWith('http'))
|
||||
? item.url
|
||||
: `https://www.youtube.com/watch?v=${videoId}`;
|
||||
const thumbnail = getBestThumbnail(item);
|
||||
const duration = formatDuration(item.duration);
|
||||
const uploader = item.uploader || item.channel || '';
|
||||
const uploadDate = formatUploadDate(item);
|
||||
|
||||
return `
|
||||
<div class="search-result-card">
|
||||
<div class="thumbnail-wrapper preview-trigger" data-url="${url}">
|
||||
<img src="${thumbnail}" alt="${item.title}" loading="lazy" onerror="this.src='/static/img/no_image.png'">
|
||||
<div class="play-overlay"><i class="fa fa-play-circle"></i></div>
|
||||
<span class="duration-badge">${duration}</span>
|
||||
</div>
|
||||
<div class="card-body-content">
|
||||
<h5 class="video-title" title="${item.title}">${item.title}</h5>
|
||||
<div class="meta-info">
|
||||
${uploader ? `<div class="uploader-info"><i class="fa fa-user-circle mr-1"></i>${uploader}</div>` : ''}
|
||||
${uploadDate ? `<div class="upload-date"><i class="fa fa-calendar-alt mr-1"></i>${uploadDate}</div>` : ''}
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-primary btn-sm flex-grow-1 download-video-btn" data-url="${url}">
|
||||
<i class="fa fa-download mr-1"></i>다운로드
|
||||
</button>
|
||||
<a href="${url}" target="_blank" class="btn btn-outline-info btn-sm"><i class="fa fa-external-link"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 검색 결과 렌더링
|
||||
// ====================
|
||||
const renderResults = (data) => {
|
||||
const fragment = document.createDocumentFragment();
|
||||
data.forEach(item => {
|
||||
if (!item) return; // null 아이템 스킵
|
||||
const col = document.createElement('div');
|
||||
col.className = 'col-12 col-sm-6 col-lg-4 col-xl-3 mb-4';
|
||||
col.innerHTML = makeResultCard(item);
|
||||
|
||||
// 이벤트 바인딩
|
||||
col.querySelector('.download-video-btn')?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
triggerDownload(e.currentTarget);
|
||||
});
|
||||
col.querySelector('.preview-trigger')?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
triggerPreview(e.currentTarget);
|
||||
});
|
||||
|
||||
fragment.appendChild(col);
|
||||
});
|
||||
searchResults.appendChild(fragment);
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 검색 수행
|
||||
// ====================
|
||||
const performSearch = (isNew = true) => {
|
||||
const keyword = searchKeyword.value.trim();
|
||||
if (!keyword) {
|
||||
if (isNew) notify('검색어를 입력하세요.', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// 이미 로딩 중이면 무시
|
||||
if (isLoading) return;
|
||||
|
||||
// 새 검색 시 상태 초기화
|
||||
if (isNew) {
|
||||
currentPage = 1;
|
||||
hasMore = true;
|
||||
searchResults.innerHTML = `
|
||||
<div class="col-12 text-center py-5">
|
||||
<div class="spinner-border text-primary mb-3" role="status"></div>
|
||||
<p class="text-muted">유튜브 검색 중...</p>
|
||||
</div>
|
||||
`;
|
||||
playerWrapper.style.display = 'none';
|
||||
if (art) { art.destroy(); art = null; }
|
||||
} else {
|
||||
if (!hasMore) return;
|
||||
if (sentinelLoading) sentinelLoading.style.display = 'block';
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
console.log(`[YouTube-DL] Search: "${keyword}" (Page ${currentPage})`);
|
||||
|
||||
postAjax('/basic/search', { keyword, page: currentPage })
|
||||
.then(ret => {
|
||||
// 새 검색이면 기존 로딩 스피너 제거
|
||||
if (isNew) searchResults.innerHTML = '';
|
||||
|
||||
// 초기 안내 메시지 숨기기
|
||||
if (initialMessage) initialMessage.style.display = 'none';
|
||||
|
||||
if (ret.ret === 'success' && ret.data && ret.data.length > 0) {
|
||||
renderResults(ret.data);
|
||||
|
||||
// 다음 페이지 체크
|
||||
if (ret.data.length < 20) {
|
||||
hasMore = false;
|
||||
} else {
|
||||
currentPage++;
|
||||
}
|
||||
} else {
|
||||
if (isNew) {
|
||||
searchResults.innerHTML = `
|
||||
<div class="col-12 text-center py-5 text-muted">
|
||||
<i class="fa fa-exclamation-triangle fa-3x mb-3" style="opacity: 0.3;"></i>
|
||||
<p>검색 결과가 없습니다.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
hasMore = false;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading = false;
|
||||
if (sentinelLoading) sentinelLoading.style.display = 'none';
|
||||
});
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 미리보기 & 다운로드
|
||||
// ====================
|
||||
const triggerPreview = (el) => {
|
||||
const targetUrl = el.dataset.url;
|
||||
if (!targetUrl) return;
|
||||
|
||||
if (targetUrl === lastPreviewUrl && art) {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
art.play();
|
||||
return;
|
||||
}
|
||||
|
||||
lastPreviewUrl = targetUrl;
|
||||
postAjax('/basic/preview', { url: targetUrl }).then(ret => {
|
||||
if (ret.ret === 'success' && ret.data) {
|
||||
initArtplayer(ret.data);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const triggerDownload = (btn) => {
|
||||
postAjax('/basic/download', {
|
||||
url: btn.dataset.url,
|
||||
filename: '%(title)s-%(id)s.%(ext)s',
|
||||
format: 'bestvideo+bestaudio/best',
|
||||
postprocessor: ''
|
||||
}).then(res => {
|
||||
if (res.ret === 'success' || res.ret === 'info') {
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<i class="fa fa-check mr-1"></i>추가됨';
|
||||
btn.classList.replace('btn-primary', 'btn-success');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// ====================
|
||||
// 인피니티 스크롤 (단순화)
|
||||
// ====================
|
||||
// 1초마다 sentinel 위치 체크 (가장 확실한 방법)
|
||||
setInterval(() => {
|
||||
if (isLoading || !hasMore) return;
|
||||
if (!sentinel) return;
|
||||
|
||||
const rect = sentinel.getBoundingClientRect();
|
||||
// sentinel이 화면 아래 800px 이내에 들어오면 다음 페이지 로드
|
||||
if (rect.top < window.innerHeight + 800) {
|
||||
console.log('[YouTube-DL] Loading next page...');
|
||||
performSearch(false);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// ====================
|
||||
// 이벤트 바인딩
|
||||
// ====================
|
||||
searchBtn.addEventListener('click', (e) => { e.preventDefault(); performSearch(true); });
|
||||
searchKeyword.addEventListener('keypress', (e) => { if (e.key === 'Enter') performSearch(true); });
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user