ff_plugins/youtube-dl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.2: 검색 속도 개선, 인피니티 스크롤 최적화, 미니 플레이어 추가

Browse Source
This commit is contained in:
projectdx
2026-01-24 22:22:02 +09:00
parent b27bf655f2
commit 901fcd0541
15 changed files with 893 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -251,6 +251,15 @@ API를 제공합니다. 다른 플러그인에서 동영상 정보나 다운로
## Changelog
v0.1.2
- 유튜브 검색 속도 대폭 개선 (extract_flat 적용)
- 검색 결과 캐싱 추가 (5분 유지)
- 인피니티 스크롤 안정화 및 최적화
- 미니 플레이어 (스크롤 시 오른쪽 하단 고정) 추가
- Artplayer 영상 비율 버그 수정 (16:9 aspect-ratio 적용)
- UI 개선: 검색 후 초기 메시지 자동 숨김
v0.1.1
- 유지보수 업데이트

2
info.yaml
View File

@@ -1,5 +1,5 @@
title: "유튜브 다운로더"
version: "0.1.1"
version: "0.1.2"
package_name: "youtube-dl"
developer: "flaskfarm"
description: "유튜브 다운로드"

58
mod_basic.py
View File

@@ -75,6 +75,16 @@ class ModuleBasic(PluginModuleBase):
arg["preset_list"] = self.get_preset_list()
arg["postprocessor_list"] = self.get_postprocessor_list()
elif sub in ["thumbnail", "sub", "search"]:
default_filename: Optional[str] = P.ModelSetting.get("default_filename")
arg["filename"] = (
default_filename
if default_filename
else self.get_default_filename()
)
# These templates don't have the module prefix in their name
return render_template(f"{P.package_name}_{sub}.html", arg=arg)
return render_template(f"{P.package_name}_{self.name}_{sub}.html", arg=arg)
def plugin_load(self) -> None:
@@ -271,6 +281,54 @@ class ModuleBasic(PluginModuleBase):
ret["ret"] = "warning"
ret["msg"] = "미리보기 URL을 가져올 수 없습니다."
elif sub == "search":
keyword: str = req.form["keyword"]
page: int = int(req.form.get("page", 1))
page_size: int = 20
# 캐시 키 및 만료 시간 (5분)
import time
cache_key = f"search:{keyword}"
cache_expiry = 300 # 5분
# 캐시에서 결과 확인
cached = getattr(self, '_search_cache', {}).get(cache_key)
current_time = time.time()
if cached and current_time - cached['time'] < cache_expiry:
all_results = cached['data']
else:
# 새 검색 수행 - 최대 100개 결과 가져오기
search_url = f"ytsearch100:{keyword}" if not keyword.startswith('http') else keyword
search_data = MyYoutubeDL.get_info_dict(
search_url,
proxy=P.ModelSetting.get("proxy"),
)
if search_data and 'entries' in search_data:
all_results = [r for r in search_data['entries'] if r] # None 제거
# 캐시에 저장
if not hasattr(self, '_search_cache'):
self._search_cache = {}
self._search_cache[cache_key] = {'data': all_results, 'time': current_time}
else:
all_results = []
if all_results:
# 현재 페이지에 해당하는 결과만 슬라이싱
start_idx = (page - 1) * page_size
results = all_results[start_idx:start_idx + page_size]
ret["data"] = results
# 더 이상 결과가 없으면 알림
if not results:
ret["ret"] = "info"
ret["msg"] = "모든 검색 결과를 불러왔습니다."
else:
ret["ret"] = "warning"
ret["msg"] = "검색 결과를 찾을 수 없습니다."
return jsonify(ret)
except Exception as error:
logger.error(f"AJAX 처리 중 예외 발생: {error}")

38
my_youtube_dl.py
View File

@@ -197,16 +197,34 @@ class MyYoutubeDL:
"""미리보기용 직접 재생 가능한 URL 추출"""
youtube_dl = __import__(youtube_dl_package)
try:
# 미리보기를 위해 포맷 필터링 (mp4, 비디오+오디오 권장)
# 미리보기를 위해 다양한 포맷 시도 (mp4, hls 등)
ydl_opts: Dict[str, Any] = {
"format": "best[ext=mp4]/best",
"format": "best[ext=mp4]/bestvideo[ext=mp4]+bestaudio[ext=m4a]/best",
"logger": MyLogger(),
"nocheckcertificate": True,
"quiet": True,
"js_runtimes": {"node": {"path": "/Users/yommi/.local/state/fnm_multishells/53824_1769161399333/bin/node"}},
}
with youtube_dl.YoutubeDL(ydl_opts) as ydl:
info: Dict[str, Any] = ydl.extract_info(url, download=False)
return info.get("url")
# 1. HLS 매니페스트 우선 (가장 안정적으로 오디오+비디오 제공)
if info.get("manifest_url"):
return info["manifest_url"]
# 2. 직접 URL (ydl_opts에서 지정한 best[ext=mp4] 결과)
if info.get("url"):
return info["url"]
# 3. 포맷 목록에서 적절한 것 찾기
formats = info.get("formats", [])
# 오디오와 비디오가 모두 있는 포맷 찾기
combined_formats = [f for f in formats if f.get("vcodec") != "none" and f.get("acodec") != "none"]
if combined_formats:
# 가장 좋은 화질의 결합 포맷 선택
return combined_formats[-1].get("url")
return None
except Exception as error:
logger.error(f"미리보기 URL 추출 중 예외 발생: {error}")
return None
@@ -225,17 +243,24 @@ class MyYoutubeDL:
proxy: Optional[str] = None,
cookiefile: Optional[str] = None,
http_headers: Optional[Dict[str, str]] = None,
cookiesfrombrowser: Optional[str] = None
cookiesfrombrowser: Optional[str] = None,
**extra_opts
) -> Optional[Dict[str, Any]]:
"""비디오 메타데이터 정보 추출"""
youtube_dl = __import__(youtube_dl_package)
try:
ydl_opts: Dict[str, Any] = {
"extract_flat": "in_playlist",
"logger": MyLogger(),
"nocheckcertificate": True,
"quiet": True,
# JS 런타임 수동 지정 (유저 시스템 환경 반영)
"js_runtimes": {"node": {"path": "/Users/yommi/.local/state/fnm_multishells/53824_1769161399333/bin/node"}},
}
# 기본값으로 extract_flat 적용 (명시적으로 override 가능)
if "extract_flat" not in extra_opts:
ydl_opts["extract_flat"] = True # True = 모든 추출기에 적용
if proxy:
ydl_opts["proxy"] = proxy
if cookiefile:
@@ -245,6 +270,9 @@ class MyYoutubeDL:
if cookiesfrombrowser:
ydl_opts["cookiesfrombrowser"] = (cookiesfrombrowser, None, None, None)
# 추가 옵션 반영 (playliststart, playlistend 등)
ydl_opts.update(extra_opts)
with youtube_dl.YoutubeDL(ydl_opts) as ydl:
info: Dict[str, Any] = ydl.extract_info(url, download=False)
except Exception as error:

5
setup.py
View File

@@ -22,10 +22,11 @@ __menu = {
"uri": "download",
"name": "직접 다운로드",
},
{"uri": "search", "name": "유튜브 검색"},
{"uri": "thumbnail", "name": "썸네일 다운로드"},
{"uri": "sub", "name": "자막 다운로드"},
],
},
{"uri": "thumbnail", "name": "썸네일 다운로드"},
{"uri": "sub", "name": "자막 다운로드"},
{
"uri": "manual",
"name": "매뉴얼",

31
static/youtube-dl_list.css
View File

@@ -24,3 +24,34 @@
padding-left: 10px;
padding-top: 3px;
}
/* Mobile Responsive - 5px padding for maximum screen usage */
@media (max-width: 768px) {
.container, .container-fluid, #main_container {
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
[class*="col-"] {
padding-left: 4px !important;
padding-right: 4px !important;
}
.card {
border-radius: 8px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.table-responsive {
margin: 0 !important;
}
}

74
static/youtube-dl_list.js
View File

@@ -35,66 +35,86 @@
const list_tbody = document.getElementById('list_tbody');
const get_item = (data) => {
let str = `<td>${data.index + 1}</td>`;
str += `<td>${data.plugin}</td>`;
str += `<td>${data.start_time}</td>`;
str += `<td>${data.extractor}</td>`;
str += `<td>${data.title}</td>`;
str += `<td>${data.status_ko}</td>`;
let str = `<td class="text-center font-weight-bold text-muted">${data.index + 1}</td>`;
str += `<td class="text-center"><span class="badge badge-light border" style="font-size:11px;">${data.plugin}</span></td>`;
str += `<td class="text-muted" style="font-size:12px;">${data.start_time}</td>`;
str += `<td class="text-center"><span class="badge badge-info" style="font-size:11px; opacity:0.8;">${data.extractor}</span></td>`;
str += `<td class="font-weight-bold">${data.title}</td>`;
// Status color mapping
let status_class = 'badge-secondary';
if (data.status_str === 'COMPLETED') status_class = 'badge-success';
else if (data.status_str === 'DOWNLOADING') status_class = 'badge-primary';
else if (data.status_str === 'ERROR') status_class = 'badge-danger';
str += `<td class="text-center"><span class="badge ${status_class}" style="padding: 5px 10px;">${data.status_ko}</span></td>`;
let visi = 'hidden';
if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') {
visi = 'visible';
}
str += `<td><div class="progress"><div class="progress-bar" style="visibility: ${visi}; width: ${data.percent}%">${data.percent}%</div></div></td>`;
str += `<td>${data.download_time}</td>`;
str += '<td class="tableRowHoverOff">';
str += `<td>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
style="visibility: ${visi}; width: ${data.percent}%"
aria-valuenow="${data.percent}" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="text-right text-muted" style="font-size: 10px; margin-top: 2px; visibility: ${visi}; font-weight: 600;">${data.percent}%</div>
</td>`;
str += `<td class="text-center text-muted">${data.download_time}</td>`;
str += '<td class="tableRowHoverOff text-center">';
if (
data.status_str === 'START' ||
data.status_str === 'DOWNLOADING' ||
data.status_str === 'FINISHED'
) {
str += `<button class="align-middle btn btn-outline-danger btn-sm youtubeDl-stop" data-index="${data.index}">중지</button>`;
str += `<button class="btn btn-outline-danger btn-sm youtubeDl-stop" data-index="${data.index}"><i class="fa fa-stop-circle mr-1"></i>중지</button>`;
}
str += '</td>';
return str;
};
const info_html = (left, right, option) => {
let str = '<div class="row">';
if (!right) return '';
let str = '<div class="row align-items-center py-2 border-bottom mx-0">';
const link = left === 'URL' || left === '업로더';
str += '<div class="col-sm-2">';
str += `<b>${left}</b>`;
str += '<div class="col-sm-3 text-muted font-weight-bold" style="font-size: 13px;">';
str += `${left}`;
str += '</div>';
str += '<div class="col-sm-10">';
str += '<div class="input-group col-sm-9">';
str += '<span class="text-left info-padding">';
str += '<div class="col-sm-9">';
str += '<div class="info-value">';
if (link) {
str += `<a href="${option}" target="_blank">`;
str += `<a href="${option}" target="_blank" class="text-primary font-weight-bold">`;
}
str += right;
if (link) {
str += '</a>';
}
str += '</span></div></div></div>';
str += '</div></div></div>';
return str;
};
const get_detail = (data) => {
let str = info_html('URL', data.url, data.url);
let str = '<div class="details-container p-3 rounded shadow-inner" style="background: #1e293b; border: 1px solid #334155;">';
str += info_html('URL', data.url, data.url);
str += info_html('업로더', data.uploader, data.uploader_url);
str += info_html('임시폴더', data.temp_path);
str += info_html('저장폴더', data.save_path);
str += info_html('종료시간', data.end_time);
if (data.status_str === 'DOWNLOADING') {
str += info_html('', '<b>현재 다운로드 중인 파일에 대한 정보</b>');
str += '<div class="mt-3 p-2 rounded border" style="background: #0f172a; border-color: #334155 !important;">';
str += '<div class="font-weight-bold text-info mb-2" style="font-size: 12px;"><i class="fa fa-info-circle mr-1"></i>실시간 다운로드 정보</div>';
str += info_html('파일명', data.filename);
str += info_html(
'진행률(current/total)',
`${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`
'현재 진행량',
`<span class="text-light font-weight-bold">${data.percent}%</span> <small class="text-muted">(${data.downloaded_bytes_str} / ${data.total_bytes_str})</small>`
);
str += info_html('남은 시간', `${data.eta}초`);
str += info_html('다운 속도', data.speed_str);
str += info_html('남은 시간', `<span class="text-info">${data.eta}초</span>`);
str += info_html('다운 속도', `<span class="text-success font-weight-bold">${data.speed_str}</span>`);
str += '</div>';
}
str += '</div>';
return str;
};
@@ -102,9 +122,9 @@
let str = `<tr id="item_${data.index}" class="cursor-pointer" aria-expanded="true" data-toggle="collapse" data-target="#collapse_${data.index}">`;
str += get_item(data);
str += '</tr>';
str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff">`;
str += '<td colspan="9">';
str += `<div id="detail_${data.index}">`;
str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="background-color: #0f172a;">`;
str += '<td colspan="9" class="p-0 border-0">';
str += `<div id="detail_${data.index}" class="p-4" style="background: #111827;">`;
str += get_detail(data);
str += '</div>';
str += '</td>';

191
static/youtube-dl_modern.css Normal file
View File

@@ -0,0 +1,191 @@
/* Modern & Professional Design for youtube-dl */
:root {
--primary-color: #38bdf8; /* Softer Light Blue */
--primary-hover: #7dd3fc;
--bg-body: #0f172a; /* Deep Soothing Navy */
--bg-surface: #1e293b; /* Surface color */
--text-main: #e2e8f0; /* Soft Off-White */
--text-muted: #94a3b8; /* Muted Blue-Gray */
--border-color: #334155; /* Subtle Border */
--radius-md: 8px;
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
}
/* Base adjustment for global layout */
body {
background-color: var(--bg-body) !important;
font-size: 14px;
color: var(--text-main);
}
#main_container {
padding-top: 20px;
padding-bottom: 40px;
}
/* Compact Margins - Desktop */
.row {
margin-right: -10px !important;
margin-left: -10px !important;
}
.col, [class*="col-"] {
padding-right: 10px !important;
padding-left: 10px !important;
}
/* Professional Card Style */
.card, .form-container {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
margin-bottom: 1.5rem;
overflow: hidden;
}
/* Modern Inputs & Macros adjustment */
.form-control-sm {
height: 34px !important;
background-color: #0f172a !important;
color: #f1f5f9 !important;
border-radius: 6px !important;
border: 1px solid var(--border-color) !important;
padding: 0.5rem 0.75rem !important;
transition: all 0.2s;
}
.form-control-sm:focus {
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}
.col-sm-3.col-form-label {
font-weight: 600;
color: var(--text-main);
font-size: 0.875rem;
padding-top: 8px !important;
}
.small.text-muted {
font-size: 0.75rem !important;
margin-top: 4px;
}
/* Professional Buttons */
.btn-sm {
border-radius: 6px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
transition: all 0.2s !important;
}
.btn-primary {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #0f172a !important; /* Dark text on light button */
}
.btn-primary:hover {
background-color: var(--primary-hover) !important;
border-color: var(--primary-hover) !important;
color: #000000 !important;
}
/* Modern Progress Bar */
.progress {
height: 10px !important;
background-color: #e2e8f0 !important;
border-radius: 9999px !important;
overflow: hidden;
margin-top: 4px;
}
.progress-bar {
background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
border-radius: 9999px !important;
font-size: 0 !important; /* Hide text inside thin bar */
transition: width 0.4s ease-in-out !important;
}
/* Table Enhancements */
.table {
color: var(--text-main) !important;
}
.table-sm td, .table-sm th {
padding: 0.75rem 0.5rem !important;
vertical-align: middle !important;
border-top: 1px solid #334155 !important;
}
.table thead th {
background: #1e293b;
border-bottom: 2px solid var(--border-color);
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.025em;
}
.tableRowHover tr:hover {
background-color: rgba(56, 189, 248, 0.05) !important;
}
/* Detail Info row in list */
.info-padding {
padding: 8px 12px !important;
background: #0f172a;
border-radius: 6px;
display: inline-block;
color: #38bdf8;
}
.info-value {
color: #cbd5e1;
}
.details-container {
background: #1e293b !important;
border: 1px solid #334155 !important;
}
/* Mobile Responsive - 5px padding */
@media (max-width: 768px) {
.container, .container-fluid, #main_container {
padding-left: 5px !important;
padding-right: 5px !important;
}
.row {
margin-left: -5px !important;
margin-right: -5px !important;
}
[class*="col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
/* Stack labels and inputs on mobile */
.col-sm-3.col-form-label {
text-align: left !important;
width: 100%;
max-width: 100%;
flex: 0 0 100%;
padding-bottom: 4px !important;
}
.col-sm-9 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
}
form > .row {
margin-bottom: 12px !important;
}
}

297
static/youtube-dl_search.js Normal file
View 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); });
})();

1
templates/youtube-dl_basic_download.html
View File

@@ -30,6 +30,7 @@
{% endmacro %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='youtube-dl_modern.css') }}?ver={{ arg['package_version'] }}">
<style>
#player-wrapper {
width: 100%;

1
templates/youtube-dl_basic_setting.html
View File

@@ -1,4 +1,5 @@
{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='youtube-dl_modern.css') }}?ver={{ arg['package_version'] }}">
{{ macros.m_button_group([['globalSettingSaveBtn', '설정 저장'], ['globalOneExecuteBtn', '1회 실행'], ['globalImmediatelyExecuteBtn', '즉시 실행']])}}
{{ macros.m_row_start('5') }}
{{ macros.m_row_end() }}

1
templates/youtube-dl_list.html
View File

@@ -1,4 +1,5 @@
{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='youtube-dl_modern.css') }}?ver={{ arg['package_version'] }}">
<link
rel="stylesheet"

216
templates/youtube-dl_search.html Normal file
View File

@@ -0,0 +1,216 @@
{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='youtube-dl_modern.css') }}?ver={{ arg['package_version'] }}">
<style>
.search-result-card {
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
margin-bottom: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.search-result-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.thumbnail-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 */
background: #000;
overflow: hidden;
}
.thumbnail-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.duration-badge {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.8);
color: #fff;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.card-body-content {
padding: 12px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.video-title {
font-size: 14px;
font-weight: 600;
color: var(--text-main);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 8px;
line-height: 1.4;
height: 2.8em;
}
.meta-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 11px;
color: var(--text-muted);
}
.uploader-info {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 8px;
}
.upload-date {
flex-shrink: 0;
background: rgba(255,255,255,0.05);
padding: 2px 6px;
border-radius: 4px;
}
.card-actions {
margin-top: auto;
display: flex;
gap: 8px;
}
.search-container {
max-width: 800px;
margin: 0 auto 30px auto;
}
.search-input-group {
display: flex;
background: var(--bg-surface);
border: 1px solid var(--border-color);
border-radius: 9999px;
padding: 4px 4px 4px 20px;
box-shadow: var(--shadow-sm);
transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input-group:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.search-input {
flex-grow: 1;
background: transparent !important;
border: none !important;
color: var(--text-main) !important;
outline: none !important;
font-size: 15px;
height: 42px;
}
.search-btn {
background: var(--primary-color);
color: #0f172a;
border: none;
border-radius: 9999px;
padding: 0 24px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.search-btn:hover {
background: var(--primary-hover);
}
/* Play Icon Overlay */
.thumbnail-wrapper {
cursor: pointer;
}
.play-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.thumbnail-wrapper:hover .play-overlay {
opacity: 1;
}
.play-overlay i {
color: #fff;
font-size: 3rem;
text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#player-wrapper {
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
margin: 0 auto 20px auto;
display: none;
background: #000;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
#player-wrapper .art-video-player {
width: 100% !important;
height: 100% !important;
}
#sentinel {
min-height: 100px;
}
/* 미니 플레이어 오른쪽 하단 위치 */
.art-mini-state {
right: 20px !important;
left: auto !important;
bottom: 20px !important;
transform: none !important;
}
</style>
<div class="search-container mt-4">
<div id="player-wrapper"></div>
<div class="search-input-group">
<input type="text" id="search_keyword" class="search-input" placeholder="유튜브 검색어 입력..." aria-label="Search">
<button id="search_btn" class="search-btn">검색</button>
</div>
</div>
<div id="search_results" class="row">
<div class="col-12 text-center py-5 text-muted" id="initial_message">
<i class="fa fa-search fa-3x mb-3" style="opacity: 0.3;"></i>
<p>검색어를 입력하고 검색 버튼을 눌러주세요.</p>
</div>
</div>
<div id="sentinel" class="py-4 text-center">
<!-- Spinner is shown/hidden via JS -->
<div id="sentinel_loading" style="display: none;">
<div class="spinner-border text-info" role="status"></div>
<p class="text-muted mt-2" style="font-size: 12px;">더 많은 결과 불러오는 중...</p>
</div>
</div>
<script>
'use strict';
const package_name = '{{ arg["package_name"] }}';
</script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
<script src="{{ url_for('.static', filename='%s.js' % arg['template_name']) }}?ver={{ arg['package_version'] }}"></script>
{% endblock %}

3
templates/youtube-dl_sub.html
View File

@@ -1,4 +1,5 @@
{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='youtube-dl_modern.css') }}?ver={{ arg['package_version'] }}">
<form id="download">
{{ macros.setting_input_text('url', 'URL', placeholder='http:// 주소',
@@ -13,7 +14,7 @@
</div>
{{ macros.setting_checkbox('auto_sub', '자동생성 자막 다운로드',
value='False', desc='유튜브 전용') }} {{
macros.setting_button([['download_btn', '다운로드']]) }}
macros.setting_buttons([['download_btn', '다운로드']]) }}
</form>
<script>

3
templates/youtube-dl_thumbnail.html
View File

@@ -1,4 +1,5 @@
{% extends "base.html" %} {% block content %}
<link rel="stylesheet" href="{{ url_for('.static', filename='youtube-dl_modern.css') }}?ver={{ arg['package_version'] }}">
<form id="download">
{{ macros.setting_input_text('url', 'URL', placeholder='http:// 주소',
@@ -6,7 +7,7 @@
macros.setting_input_text('filename', '파일명', value=arg['filename'],
desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#output-template
참고') }} {{ macros.setting_checkbox('all_thumbnails', '모든 썸네일 다운로드',
value='False') }} {{ macros.setting_button([['download_btn', '다운로드']]) }}
value='False') }} {{ macros.setting_buttons([['download_btn', '다운로드']]) }}
</form>
<script>