feat(playlist): show thumbnails in import preview
플레이리스트 가져오기 미리보기 목록에 각 항목 썸네일을 표시한다. YouTube video id 로 mqdefault 썸네일 URL 을 만들고, id 가 없으면 yt-dlp 가 준 thumbnail 필드로 폴백. 깨진 이미지는 빈 박스 처리. - youtube.ts: PlaylistEntry 에 thumbnailUrl 추가 + flat-playlist 파싱에서 채움 - playlist.js: probe 매핑에 thumbnailUrl 반영, 각 행에 img 렌더(lazy + onerror) - styles.css: 행 그리드에 썸네일 칼럼(96px 16:9) 추가 Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
This commit is contained in:
@@ -353,7 +353,7 @@ body.siteBody.centerLayout { display: flex; align-items: center; justify-content
|
||||
}
|
||||
.playlistEntryRow {
|
||||
display: grid;
|
||||
grid-template-columns: 26px 36px 1fr 70px 28px;
|
||||
grid-template-columns: 26px 36px 96px 1fr 70px 28px;
|
||||
align-items: center; gap: 10px;
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 10px; padding: 8px 10px;
|
||||
@@ -367,6 +367,13 @@ body.siteBody.centerLayout { display: flex; align-items: center; justify-content
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
color: var(--text-muted); font-size: 13px; text-align: right;
|
||||
}
|
||||
.entryThumb {
|
||||
width: 96px; aspect-ratio: 16 / 9;
|
||||
border-radius: 6px; overflow: hidden;
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
}
|
||||
.entryThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.entryThumbEmpty { opacity: 0.6; }
|
||||
.entryFields {
|
||||
display: flex; flex-direction: column; gap: 4px; min-width: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user