gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web-ui): YouTube 6 서브탭 + Library 영상 파이프라인 트리거

Browse Source
This commit is contained in:
gahusb
2026-05-07 17:31:37 +09:00
parent 9ffd7889e7
commit 522b7695aa
2 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/music/MusicStudio.jsx
View File

@@ -338,7 +338,7 @@ const TrackResult = ({ track, onDownload, onNew }) => {
/* ─────────────────────────────────────────────
Library Card
───────────────────────────────────────────── */
const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, isGenerating }) => {
const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, onVideoPipeline, isGenerating }) => {
const [menuOpen, setMenuOpen] = useState(false);
const genre = GENRES.find((g) => g.id === track.genre);
const totalSec = track.duration_sec ?? null;
@@ -429,6 +429,9 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemo
<button type="button" onClick={() => { onVideoProject(track); setMenuOpen(false); }}>
🎯 YouTube 프로젝트
</button>
<button type="button" onClick={() => { onVideoPipeline(track); setMenuOpen(false); }}>
🎬 영상 파이프라인
</button>
</div>
)}
</div>
@@ -439,6 +442,10 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemo
<a href={track.audio_url} download className="ms-btn ms-btn--ghost ms-btn--sm">
↓ Download
</a>
<button type="button" className="ms-btn ms-btn--ghost ms-btn--sm"
onClick={() => onVideoPipeline(track)}>
🎬 영상 파이프라인
</button>
</div>
)}
<p className="ms-lib-card__date">
@@ -451,7 +458,7 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying, onExtend, onVocalRemo
/* ─────────────────────────────────────────────
Library Section
───────────────────────────────────────────── */
const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, isGenerating, loading }) => {
const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCoverArt, onWavConvert, onStemSplit, onSyncedLyrics, onVideoGenerate, onVideoProject, onVideoPipeline, isGenerating, loading }) => {
const [playingId, setPlayingId] = useState(null);
const handlePlay = (track) => {
@@ -506,6 +513,7 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCove
onSyncedLyrics={onSyncedLyrics}
onVideoGenerate={onVideoGenerate}
onVideoProject={onVideoProject}
onVideoPipeline={onVideoPipeline}
isGenerating={isGenerating}
/>
))}
@@ -521,6 +529,7 @@ export default function MusicStudio() {
/* ── 탭 ── */
const [tab, setTab] = useState('create');
const [initialTrackId, setInitialTrackId] = useState(null);
const [openPipelineFor, setOpenPipelineFor] = useState(null);
/* ── Provider 상태 ── */
const [providers, setProviders] = useState([]);
@@ -1070,6 +1079,11 @@ export default function MusicStudio() {
setTab('youtube');
};
const handleVideoPipeline = (track) => {
setOpenPipelineFor(track.id);
setTab('youtube');
};
const handleNewTrack = () => {
setTrack(null);
setGenProgress(0);
@@ -1159,6 +1173,7 @@ export default function MusicStudio() {
onSyncedLyrics={handleSyncedLyrics}
onVideoGenerate={handleVideoGenerate}
onVideoProject={handleVideoProject}
onVideoPipeline={handleVideoPipeline}
isGenerating={isGenerating}
/>
</PullToRefresh>
@@ -1193,6 +1208,7 @@ export default function MusicStudio() {
library={library}
initialTrackId={initialTrackId}
onClearInitialTrack={() => setInitialTrackId(null)}
openPipelineFor={openPipelineFor}
/>
)}