{
onClose();
logWebUserEvent({
actionName: 'EditV3StemsModalClosed',
context: {
clipId,
},
});
}}
width={800}
wrapperClasses='min-h-[400px] max-h-[90vh] flex flex-col'
closeButtonClasses='right-1.5'
>
{currentView !== 'initial' && (
}
onClick={() => setCurrentView('initial')}
/>
)}
Extract Stems
{!hasInitialized && (
)}
{/* Always show full song card */}
{hasInitialized && clip && (
{getClipTitle(clip) || 'Untitled'}
{/* Full Song Track inside the same card */}
0 && !fullSongSettings.solo
}
loading={fullSongSettings.solo && playbackQueued && !playing}
setSolo={setFullSongSolo}
getCurrentSeconds={getCurrentTime}
seek={seek}
playing={currentView === 'initial' ? playing : fullSongPlaying}
setPlaying={(newIsPlaying: boolean) => {
if (newIsPlaying) {
if (currentView !== 'initial') setFullSongSolo(true);
play();
} else {
stop();
}
}}
/>
)}
{/* Initial view with extraction options */}
{currentView === 'initial' && hasInitialized && (
{/* Extraction Options - full width */}
All Detected Stems
Get up to 12 separated
{isMidiTranscriptionEnabled
? ' instruments, vocal, and MIDI tracks'
: ' instrument and vocals stems'}
.
: undefined
}
onClick={() => {
if (hasStemsAccess) {
handleExtractTwelveTrackStems();
}
logWebUserEvent({
actionName: 'EditV3ExtractAllDetectedStemsClicked',
context: {
clipId,
},
});
}}
className='px-4'
>
{hasTwelveTrackStems
? 'Extract Again (50 Credits)'
: 'Extract (50 Credits)'}
{hasTwelveTrackStems && hasStemsAccess && (
)}
Vocals + Instrumental
Get an isolated vocal track and an instrumental track.
) : undefined
}
onClick={() => {
if (hasStemsAccess) {
handleExtractVocalsInstrumental();
}
logWebUserEvent({
actionName:
'EditV3ExtractVocalsInstrumentalClicked',
context: {
clipId,
},
});
}}
className='px-4'
>
{hasVocalsInstrumentalStems
? 'Extract Again (10 Credits)'
: 'Extract (10 Credits)'}
{hasVocalsInstrumentalStems && hasStemsAccess && (
)}
{/* Upsell box - only show when user doesn't have access */}
{!hasStemsAccess && (
Subscribe to extract Stems
)}
{/* Bottom Text - no background */}
{window.location.pathname.includes('/edit/') && (
Stems will be extracted from the original song. If
you've made any edits, save it as a new song first.
)}
)}
{/* Stems view (both 12-track and vocals+instrumental) */}
{(currentView === 'twelve-track' ||
currentView === 'vocals-instrumental') &&
hasInitialized && (
) : (
)
}
onClick={() => {
if (currentView === 'twelve-track') {
handleExtractTwelveTrackStems();
} else {
handleExtractVocalsInstrumental();
}
logWebUserEvent({
actionName: 'EditV3RegenerateStemsClicked',
context: {
clipId,
mode: currentView,
},
});
}}
>
Regenerate
) : (
)
}
onClick={async () => {
logWebUserEvent({
actionName: 'EditV3DownloadStemZip',
context: {
editSessionId:
editStore.editSessionId ||
'MISSING_EDIT_SESSION_ID',
editingClipId: clipId,
stemIds: currentResolvedStemBank.map(
({ clip }) => clip.id
),
format: downloadFormat,
},
});
if (waitingToDownloadZip) {
setDownloadZipBeforeComplete(true);
} else {
setWaitingToDownloadZip(true);
}
}}
>
{downloadingZip
? 'Preparing (may take awhile)'
: waitingToDownloadZip
? 'Waiting for completion...'
: 'Download All'}
setDownloadFormat(
newFormat as
| 'mp3'
| 'wav'
| 'midi'
| 'wav+midi'
| 'wav-tempo-locked'
)
}
options={getDownloadFormatOptions(
isMidiTranscriptionEnabled &&
currentView === 'twelve-track'
)}
className='bg-white/5'
menuClassName='z-100001'
/>
{(currentView === 'twelve-track'
? (twelveTrackStemBanks ?? [])
: (vocalsInstrumentalStemBanks ?? [])
).map((b, index) => (
))}
{currentResolvedStemBank.length === 0 && (
<>
{Array.from({
length: currentView === 'twelve-track' ? 4 : 2,
}).map((_, index) => (
))}
)}
{currentNonEmptyStemBank.map((entry) => {
// Check if any track that exists in the current bank is soloed
const anyCurrentBankTrackSolo =
stemTypeSettings.FULL_SONG?.solo ||
currentResolvedStemBank.some(({ solo }) => solo);
// Calculate if this track is effectively muted
const effectivelyMuted =
entry.mute || (anyCurrentBankTrackSolo && !entry.solo);
return (
{
setStemTypeSettings((prev) => {
const targetStemType =
entry.clip.metadata.stem_type_group_name!;
const updated = { ...prev };
Object.keys(updated).forEach((key) => {
if (key === targetStemType) {
// Always set the target stem to the desired solo state
updated[key] = { ...updated[key], solo };
} else if (
key === 'FULL_SONG' &&
solo &&
nonDestructive
) {
// When adding a stem to solo selection (non-destructive), unsolo full song
updated[key] = { ...updated[key], solo: false };
} else if (!nonDestructive) {
// If destructive mode, unsolo all other stems
updated[key] = { ...updated[key], solo: false };
}
// In non-destructive mode, keep other stems' current solo state unchanged
});
return updated;
});
}}
setMute={(mute) => {
setStemTypeSettings((prev) => ({
...prev,
[entry.clip.metadata.stem_type_group_name!]: {
...prev[entry.clip.metadata.stem_type_group_name!],
mute,
},
}));
}}
/>
);
})}
)}
{(currentView === 'twelve-track' ||
currentView === 'vocals-instrumental') &&
hasStudio &&
hasInitialized && (
clip.status !== 'complete'
)
}
icon={
creatingStudioProject ? (
) : (
)
}
onClick={async () => {
if (!clip) return;
if (!isFeatureEnabledForPlan(session, PlanFeature.Studio)) {
menus.setCurrentUpsellFeature(FeatureKey.STUDIO);
menus.openModal(ModalTypes.UPSELL_MODAL);
return;
}
setCreatingStudioProject(true);
try {
const rootClipDownbeats = await new Promise<
[number, number][]
>((resolve, reject) => {
try {
streamDownbeatsForClip(
clip.id,
({ downbeats, final }) => {
if (final) {
resolve(downbeats);
}
}
);
} catch (e) {
reject(e);
}
});
const stemStudioClips = currentResolvedStemBank
.filter(
({ clip }) => !clip.metadata?.is_loudness_under_threshold
)
.map(({ clip }) => ({
...createKnownTimingStudioClipSync(
clip,
rootClipDownbeats
),
name:
clip.metadata.stem_type_group_name?.replace('_', ' ') ??
getClipTitle(clip),
}));
const rootStudioClip = createKnownTimingStudioClipSync(
clip,
rootClipDownbeats
);
const state: StudioProjectState = {
...DEFAULT_STATE,
title: getClipTitle(clip) || 'Untitled',
tracks: [
{
...createTrack(),
name: getClipTitle(clip) || 'Untitled',
clips: [
{
...rootStudioClip,
startBeats: rootStudioClip.readStartBeats,
},
],
mute: true,
},
...stemStudioClips.map((clip) => ({
...createTrack(),
name: clip.name,
clips: [
{
...clip,
startBeats: clip.readStartBeats,
},
],
})),
],
};
const firstTrackId = state.tracks[0]?.id;
if (!firstTrackId) {
throw new Error('No track ID found');
}
state.timing = getProjectTimingForClip(
rootStudioClip,
firstTrackId
);
const id = await createAndSaveNewStudioProject(state);
logWebUserEvent({
actionName: 'CreatedNewStudioProject',
context: {
studioProjectId: id,
clipIds: getAllUsedClipIds(state),
trigger: 'stems_modal_send_to_studio',
},
});
window.location.href = `/studio?initial_project_id=${id}`;
logWebUserEvent({
actionName: 'NavigatedToStudio',
context: {
trigger: 'stems_modal',
},
});
} catch (e) {
console.error(e);
toast({
title: 'Error creating studio project',
description: 'Please try again later.',
status: 'error',
});
setCreatingStudioProject(false);
}
}}
>
Edit in Studio
)}
);
});