feat(audio): volume в проекте, DnD, параллельные плейлисты
Громкость треков сцены/игры сохраняется в проекте; порядок через DnD; несколько плейлистов сразу; автоимя из файла; стоп превью при запуске сессии. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Ivan Fontosh
@@ -379,7 +379,7 @@ export async function buildProjectFromFoundryDocuments(
|
||||
const assetId = await resolveAndImport(ctx, manifest, audioPath);
|
||||
if (!assetId) continue;
|
||||
if (ctx.assets[assetId]?.type !== 'audio') continue;
|
||||
audioRefs.push({ assetId, autoplay: true, loop: true });
|
||||
audioRefs.push({ assetId, autoplay: true, loop: true, volume: 1 });
|
||||
}
|
||||
|
||||
scenes[sceneId] = {
|
||||
|
||||
@@ -17,11 +17,11 @@ void test('collectReferencedAssetIds: превью, видео и аудио', (
|
||||
previewThumbAssetId: 'th' as AssetId,
|
||||
media: {
|
||||
videos: ['v1' as AssetId],
|
||||
audios: [{ assetId: 'a1' as AssetId, autoplay: true, loop: true }],
|
||||
audios: [{ assetId: 'a1' as AssetId, autoplay: true, loop: true, volume: 1 }],
|
||||
},
|
||||
},
|
||||
},
|
||||
campaignAudios: [{ assetId: 'ca1' as AssetId, autoplay: true, loop: true }],
|
||||
campaignAudios: [{ assetId: 'ca1' as AssetId, autoplay: true, loop: true, volume: 1 }],
|
||||
materials: [{ id: 'm1', name: 'Map', assetId: 'mat1' as AssetId }],
|
||||
npcs: [{ id: 'n1', name: 'Guard', avatarAssetId: 'npc1' as AssetId }],
|
||||
} as unknown as Project;
|
||||
|
||||
@@ -69,7 +69,7 @@ void test('readProjectJsonFromZip: campaignAudios round-trips inside project.jso
|
||||
},
|
||||
scenes: {},
|
||||
assets: {},
|
||||
campaignAudios: [{ assetId, autoplay: true, loop: false }],
|
||||
campaignAudios: [{ assetId, autoplay: true, loop: false, volume: 1 }],
|
||||
currentSceneId: null,
|
||||
currentGraphNodeId: null,
|
||||
sceneGraphNodes: [],
|
||||
|
||||
@@ -45,12 +45,13 @@ import type {
|
||||
ProjectNpcGroup,
|
||||
ProjectNpcRelation,
|
||||
Scene,
|
||||
SceneAudioRef,
|
||||
SceneGraphEdge,
|
||||
SceneGraphNode,
|
||||
SceneId,
|
||||
SceneTrap,
|
||||
} from '../../shared/types';
|
||||
import { PROJECT_SCHEMA_VERSION } from '../../shared/types';
|
||||
import { normalizeSceneAudioRef, PROJECT_SCHEMA_VERSION } from '../../shared/types';
|
||||
import { normalizeMaterialLegend } from '../../shared/types/materialLegend';
|
||||
import { normalizeSceneToken, type SceneToken } from '../../shared/types/appTokens';
|
||||
import {
|
||||
@@ -817,7 +818,14 @@ export class ZipProjectStore {
|
||||
: null),
|
||||
...(patch.grid !== undefined ? { grid: normalizeSceneGrid(patch.grid) } : null),
|
||||
...(patch.settings ? { settings: { ...base.settings, ...patch.settings } } : null),
|
||||
...(patch.media ? { media: { ...base.media, ...patch.media } } : null),
|
||||
...(patch.media
|
||||
? {
|
||||
media: {
|
||||
videos: patch.media.videos ?? base.media.videos,
|
||||
audios: (patch.media.audios ?? base.media.audios).map((a) => normalizeSceneAudioRef(a)),
|
||||
},
|
||||
}
|
||||
: null),
|
||||
...(patch.layout ? { layout: { ...base.layout, ...patch.layout } } : null),
|
||||
};
|
||||
|
||||
@@ -1180,8 +1188,9 @@ export class ZipProjectStore {
|
||||
else
|
||||
media.audios.push({
|
||||
assetId: asset.id,
|
||||
autoplay: sc.settings.autoplayAudio,
|
||||
loop: sc.settings.loopAudio,
|
||||
autoplay: false,
|
||||
loop: false,
|
||||
volume: 1,
|
||||
});
|
||||
}
|
||||
return {
|
||||
@@ -1232,7 +1241,7 @@ export class ZipProjectStore {
|
||||
for (const asset of staged) {
|
||||
assets[asset.id] = asset;
|
||||
if (asset.type !== 'audio') continue;
|
||||
campaignAudios.push({ assetId: asset.id, autoplay: false, loop: false });
|
||||
campaignAudios.push({ assetId: asset.id, autoplay: false, loop: false, volume: 1 });
|
||||
}
|
||||
return { ...p, assets, campaignAudios };
|
||||
});
|
||||
@@ -1245,7 +1254,10 @@ export class ZipProjectStore {
|
||||
async setCampaignAudios(audios: Project['campaignAudios']): Promise<Project> {
|
||||
const open = this.openProject;
|
||||
if (!open) throw new Error('No open project');
|
||||
await this.updateProject((p) => ({ ...p, campaignAudios: Array.isArray(audios) ? audios : [] }));
|
||||
const normalized = (Array.isArray(audios) ? audios : [])
|
||||
.filter((a) => a && typeof a === 'object' && a.assetId)
|
||||
.map((a) => normalizeSceneAudioRef(a));
|
||||
await this.updateProject((p) => ({ ...p, campaignAudios: normalized }));
|
||||
const latest = this.getOpenProject();
|
||||
if (!latest) throw new Error('No open project');
|
||||
return latest;
|
||||
@@ -2624,20 +2636,26 @@ function normalizeScene(s: Scene): Scene {
|
||||
const audios = rawAudios
|
||||
.map((a) => {
|
||||
if (typeof a === 'string') {
|
||||
return {
|
||||
return normalizeSceneAudioRef({
|
||||
assetId: a as AssetId,
|
||||
autoplay: Boolean((s.settings as { autoplayAudio?: boolean } | undefined)?.autoplayAudio),
|
||||
loop: Boolean((s.settings as { loopAudio?: boolean } | undefined)?.loopAudio),
|
||||
};
|
||||
volume: 1,
|
||||
});
|
||||
}
|
||||
if (a && typeof a === 'object') {
|
||||
const obj = a as { assetId?: AssetId; autoplay?: boolean; loop?: boolean };
|
||||
const obj = a as { assetId?: AssetId; autoplay?: boolean; loop?: boolean; volume?: unknown };
|
||||
if (!obj.assetId) return null;
|
||||
return { assetId: obj.assetId, autoplay: Boolean(obj.autoplay), loop: Boolean(obj.loop) };
|
||||
return normalizeSceneAudioRef({
|
||||
assetId: obj.assetId,
|
||||
autoplay: Boolean(obj.autoplay),
|
||||
loop: Boolean(obj.loop),
|
||||
volume: obj.volume,
|
||||
});
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((x): x is { assetId: AssetId; autoplay: boolean; loop: boolean } => Boolean(x));
|
||||
.filter((x): x is SceneAudioRef => Boolean(x));
|
||||
|
||||
return {
|
||||
...s,
|
||||
@@ -2682,15 +2700,20 @@ function normalizeProject(p: Project): Project {
|
||||
const rawCampaignAudios = (p as unknown as { campaignAudios?: unknown[] }).campaignAudios;
|
||||
const campaignAudios = (Array.isArray(rawCampaignAudios) ? rawCampaignAudios : [])
|
||||
.map((a) => {
|
||||
if (typeof a === 'string') return { assetId: a as AssetId, autoplay: false, loop: false };
|
||||
if (typeof a === 'string') return normalizeSceneAudioRef({ assetId: a as AssetId, autoplay: false, loop: false, volume: 1 });
|
||||
if (a && typeof a === 'object') {
|
||||
const obj = a as { assetId?: AssetId; autoplay?: boolean; loop?: boolean };
|
||||
const obj = a as { assetId?: AssetId; autoplay?: boolean; loop?: boolean; volume?: unknown };
|
||||
if (!obj.assetId) return null;
|
||||
return { assetId: obj.assetId, autoplay: Boolean(obj.autoplay), loop: Boolean(obj.loop) };
|
||||
return normalizeSceneAudioRef({
|
||||
assetId: obj.assetId,
|
||||
autoplay: Boolean(obj.autoplay),
|
||||
loop: Boolean(obj.loop),
|
||||
volume: obj.volume,
|
||||
});
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((x): x is { assetId: AssetId; autoplay: boolean; loop: boolean } => Boolean(x));
|
||||
.filter((x): x is SceneAudioRef => Boolean(x));
|
||||
const rawMaterials = (p as unknown as { materials?: unknown[] }).materials;
|
||||
const materials = (Array.isArray(rawMaterials) ? rawMaterials : [])
|
||||
.map((m) => {
|
||||
|
||||
@@ -107,15 +107,30 @@ function clampAudioGain(v: number): number {
|
||||
return Math.max(0, Math.min(1, v));
|
||||
}
|
||||
|
||||
function readAudioGain(gains: Map<string, number>, assetId: string): number {
|
||||
return gains.get(assetId) ?? 1;
|
||||
function readAudioGain(gains: Map<string, number>, assetId: string, projectDefault = 1): number {
|
||||
return gains.get(assetId) ?? clampAudioGain(projectDefault);
|
||||
}
|
||||
|
||||
/** Применяет пользовательскую громкость; `factor` — для fade in/out (0…1). */
|
||||
function applyAudioGain(el: HTMLAudioElement, gains: Map<string, number>, assetId: string, factor = 1): void {
|
||||
function applyAudioGain(
|
||||
el: HTMLAudioElement,
|
||||
gains: Map<string, number>,
|
||||
assetId: string,
|
||||
factor = 1,
|
||||
projectDefault = 1,
|
||||
): void {
|
||||
if (!gains.has(assetId)) gains.set(assetId, clampAudioGain(projectDefault));
|
||||
el.volume = clampAudioGain(readAudioGain(gains, assetId) * factor);
|
||||
}
|
||||
|
||||
function seedAudioGainFromRef(
|
||||
gains: Map<string, number>,
|
||||
assetId: string,
|
||||
projectVolume: number | undefined,
|
||||
): void {
|
||||
if (!gains.has(assetId)) gains.set(assetId, clampAudioGain(projectVolume ?? 1));
|
||||
}
|
||||
|
||||
/** Файл из `app/renderer/public/molniya.mp3` — рядом с `control.html` в dev и в dist. */
|
||||
function lightningEffectSoundUrl(): string {
|
||||
return new URL('molniya.mp3', window.location.href).href;
|
||||
@@ -615,6 +630,7 @@ export function ControlApp() {
|
||||
void (async () => {
|
||||
const loaded: { ref: (typeof sceneAudioRefs)[number]; el: HTMLAudioElement }[] = [];
|
||||
for (const item of sceneAudioRefs) {
|
||||
seedAudioGainFromRef(sceneAudioGainRef.current, item.assetId, item.volume);
|
||||
const r = await api.invoke(ipcChannels.project.assetFileUrl, { assetId: item.assetId });
|
||||
if (sceneAudioLoadRunRef.current !== runId) return;
|
||||
if (!r.url) continue;
|
||||
@@ -622,7 +638,7 @@ export function ControlApp() {
|
||||
el.loop = item.loop;
|
||||
el.preload = 'auto';
|
||||
if (item.autoplay) el.volume = 0;
|
||||
else applyAudioGain(el, sceneAudioGainRef.current, item.assetId);
|
||||
else applyAudioGain(el, sceneAudioGainRef.current, item.assetId, 1, item.volume);
|
||||
sceneAudioMetaRef.current.set(item.assetId, { lastPlayError: null });
|
||||
el.addEventListener('play', () => setSceneAudioStateTick((x) => x + 1));
|
||||
el.addEventListener('pause', () => setSceneAudioStateTick((x) => x + 1));
|
||||
@@ -725,6 +741,7 @@ export function ControlApp() {
|
||||
void (async () => {
|
||||
const loaded: { ref: (typeof campaignAudioRefs)[number]; el: HTMLAudioElement }[] = [];
|
||||
for (const item of campaignAudioRefs) {
|
||||
seedAudioGainFromRef(campaignAudioGainRef.current, item.assetId, item.volume);
|
||||
const r = await api.invoke(ipcChannels.project.assetFileUrl, { assetId: item.assetId });
|
||||
if (campaignAudioLoadRunRef.current !== runId) return;
|
||||
if (!r.url) continue;
|
||||
@@ -732,7 +749,7 @@ export function ControlApp() {
|
||||
el.loop = item.loop;
|
||||
el.preload = 'auto';
|
||||
if (item.autoplay) el.volume = 0;
|
||||
else applyAudioGain(el, campaignAudioGainRef.current, item.assetId);
|
||||
else applyAudioGain(el, campaignAudioGainRef.current, item.assetId, 1, item.volume);
|
||||
campaignAudioMetaRef.current.set(item.assetId, { lastPlayError: null });
|
||||
el.addEventListener('play', () => setCampaignAudioStateTick((x) => x + 1));
|
||||
el.addEventListener('pause', () => setCampaignAudioStateTick((x) => x + 1));
|
||||
@@ -3111,7 +3128,7 @@ export function ControlApp() {
|
||||
statusLabel={st.label}
|
||||
{...(st.detail ? { statusDetail: st.detail } : {})}
|
||||
audioEl={el}
|
||||
initialGain={readAudioGain(sceneAudioGainRef.current, ref.assetId)}
|
||||
initialGain={readAudioGain(sceneAudioGainRef.current, ref.assetId, ref.volume)}
|
||||
gainMap={sceneAudioGainRef.current}
|
||||
playTitle={t('control.transportPlay')}
|
||||
playLabel={t('control.transportPlay')}
|
||||
@@ -3189,7 +3206,7 @@ export function ControlApp() {
|
||||
}
|
||||
: {})}
|
||||
audioEl={el}
|
||||
initialGain={readAudioGain(campaignAudioGainRef.current, ref.assetId)}
|
||||
initialGain={readAudioGain(campaignAudioGainRef.current, ref.assetId, ref.volume)}
|
||||
gainMap={campaignAudioGainRef.current}
|
||||
playTitle={
|
||||
!allowCampaignAudio ? t('control.pauseCampaignTitle') : t('control.transportPlay')
|
||||
|
||||
@@ -1110,7 +1110,7 @@
|
||||
.audioList {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
max-height: 160px;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -1120,10 +1120,32 @@
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--color-overlay-dark-3);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
align-items: start;
|
||||
min-width: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.audioDragHandle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.audioDragHandle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.audioDragGrip {
|
||||
flex-shrink: 0;
|
||||
color: var(--text2);
|
||||
font-size: 10px;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.audioName {
|
||||
@@ -1135,13 +1157,35 @@
|
||||
|
||||
.audioControls {
|
||||
color: var(--text2);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.audioVolumeLabel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.audioVolumeRange {
|
||||
width: 72px;
|
||||
accent-color: var(--accent, #3b82f6);
|
||||
}
|
||||
|
||||
.audioPreviewBtn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.audioRemove {
|
||||
flex-shrink: 0;
|
||||
min-width: 28px;
|
||||
|
||||
@@ -30,6 +30,7 @@ import type {
|
||||
} from '../../shared/types';
|
||||
import { AppLogo } from '../shared/branding/AppLogo';
|
||||
import { ContainedVideo } from '../shared/ContainedVideo';
|
||||
import { stopAllEditorAudio } from '../shared/audio/editorAudioStop';
|
||||
import { getDndApi } from '../shared/dndApi';
|
||||
import { RotatedImage } from '../shared/RotatedImage';
|
||||
import { Button, Input } from '../shared/ui/controls';
|
||||
@@ -38,6 +39,7 @@ import { useAssetUrl } from '../shared/useAssetImageUrl';
|
||||
|
||||
import { AppAboutModal, InstructionsModal } from './about/EditorAboutModals';
|
||||
import styles from './EditorApp.module.css';
|
||||
import { EditorAudioTrackList } from './EditorAudioTrackList';
|
||||
import {
|
||||
filterAudioFilePaths,
|
||||
partitionSceneMediaDrops,
|
||||
@@ -366,6 +368,7 @@ export function EditorApp() {
|
||||
const launchFromGraphNode = useCallback(
|
||||
(graphNodeId: GraphNodeId, playerIds?: string[]) => {
|
||||
if (!licenseActive || launching) return;
|
||||
stopAllEditorAudio();
|
||||
setLaunching(true);
|
||||
setRunMenuOpen(false);
|
||||
setLaunchPlayersOpen(false);
|
||||
@@ -508,6 +511,7 @@ export function EditorApp() {
|
||||
// ignore
|
||||
}
|
||||
off = getDndApi().on(ipcChannels.windows.multiWindowStateChanged, ({ open }) => {
|
||||
if (open) stopAllEditorAudio();
|
||||
setPresentationOpen(open);
|
||||
});
|
||||
})();
|
||||
@@ -2531,7 +2535,6 @@ function CampaignInspector({
|
||||
onDropAudio,
|
||||
}: CampaignInspectorProps) {
|
||||
const { t } = useEditorI18n();
|
||||
const audioById = useMemo(() => new Map(audioRefs.map((a) => [a.assetId, a])), [audioRefs]);
|
||||
const audioDrop = useFileDropZone({
|
||||
onDropPaths: onDropAudio,
|
||||
filterPaths: filterAudioFilePaths,
|
||||
@@ -2547,71 +2550,19 @@ function CampaignInspector({
|
||||
onDrop={audioDrop.onDrop}
|
||||
>
|
||||
{audioDrop.dragOver ? <div className={styles.dropHintOverlay}>{t('drop.hintAudio')}</div> : null}
|
||||
{mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
|
||||
{audioRefs.length === 0 ? (
|
||||
<div className={styles.audioDropEmpty}>
|
||||
<div className={[styles.muted, styles.spanSm].join(' ')}>{t('campaign.noFiles')}</div>
|
||||
<Button onClick={onUploadAudio}>{t('campaign.upload')}</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.audioList}>
|
||||
{mediaAssets
|
||||
.filter((a) => a.type === 'audio')
|
||||
.map((a) => (
|
||||
<div key={a.id} className={styles.audioRow}>
|
||||
<span className={styles.audioName}>{a.originalName}</span>
|
||||
<span className={styles.audioControls}>
|
||||
<label className={styles.checkboxLabelSm}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={audioById.get(a.id)?.autoplay ?? false}
|
||||
onChange={(e) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === a.id ? { ...x, autoplay: e.target.checked } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<span className={styles.spanXs}>{t('campaign.auto')}</span>
|
||||
</label>
|
||||
<label className={styles.checkboxLabelSm}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={audioById.get(a.id)?.loop ?? false}
|
||||
onChange={(e) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === a.id ? { ...x, loop: e.target.checked } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<span className={styles.spanXs}>{t('campaign.loop')}</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
title={t('campaign.removeTitle')}
|
||||
className={styles.audioRemove}
|
||||
onClick={() => {
|
||||
onAudioRefsChange(audioRefs.filter((x) => x.assetId !== a.id));
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className={styles.audioRemoveIcon}
|
||||
viewBox="0 0 24 24"
|
||||
width={16}
|
||||
height={16}
|
||||
aria-hidden
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9 3h6a1 1 0 0 1 1 1v1h4v2H4V5h4V4a1 1 0 0 1 1-1zm1 5h2v9h-2V8zm4 0h2v9h-2V8zM7 8h2v9H7V8zm9-3H8v1h8V5zM6 21a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6v13z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<EditorAudioTrackList
|
||||
audioRefs={audioRefs}
|
||||
mediaAssets={mediaAssets}
|
||||
removeTitle={t('campaign.removeTitle')}
|
||||
onAudioRefsChange={onAudioRefsChange}
|
||||
/>
|
||||
<Button onClick={onUploadAudio}>{t('campaign.upload')}</Button>
|
||||
</>
|
||||
)}
|
||||
@@ -2651,7 +2602,6 @@ function SceneInspector({
|
||||
const { t } = useEditorI18n();
|
||||
const [descriptionModalOpen, setDescriptionModalOpen] = useState(false);
|
||||
const previewUrl = useAssetUrl(previewAssetId);
|
||||
const audioById = useMemo(() => new Map(audioRefs.map((a) => [a.assetId, a])), [audioRefs]);
|
||||
const descriptionEmpty = isSceneDescriptionEmpty(description);
|
||||
const descriptionPreviewHtml = useMemo(
|
||||
() => (descriptionEmpty ? '' : sanitizeSceneDescriptionHtml(description)),
|
||||
@@ -2835,71 +2785,19 @@ function SceneInspector({
|
||||
onDrop={sceneAudioDrop.onDrop}
|
||||
>
|
||||
{sceneAudioDrop.dragOver ? <div className={styles.dropHintOverlay}>{t('drop.hintAudio')}</div> : null}
|
||||
{mediaAssets.filter((a) => a.type === 'audio').length === 0 ? (
|
||||
{audioRefs.length === 0 ? (
|
||||
<div className={styles.audioDropEmpty}>
|
||||
<div className={[styles.muted, styles.spanSm].join(' ')}>{t('campaign.noFiles')}</div>
|
||||
<Button onClick={onUploadMedia}>{t('campaign.upload')}</Button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={styles.audioList}>
|
||||
{mediaAssets
|
||||
.filter((a) => a.type === 'audio')
|
||||
.map((a) => (
|
||||
<div key={a.id} className={styles.audioRow}>
|
||||
<span className={styles.audioName}>{a.originalName}</span>
|
||||
<span className={styles.audioControls}>
|
||||
<label className={styles.checkboxLabelSm}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={audioById.get(a.id)?.autoplay ?? false}
|
||||
onChange={(e) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === a.id ? { ...x, autoplay: e.target.checked } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<span className={styles.spanXs}>{t('campaign.auto')}</span>
|
||||
</label>
|
||||
<label className={styles.checkboxLabelSm}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={audioById.get(a.id)?.loop ?? false}
|
||||
onChange={(e) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === a.id ? { ...x, loop: e.target.checked } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<span className={styles.spanXs}>{t('campaign.loop')}</span>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
title={t('scene.removeTitle')}
|
||||
className={styles.audioRemove}
|
||||
onClick={() => {
|
||||
onAudioRefsChange(audioRefs.filter((x) => x.assetId !== a.id));
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className={styles.audioRemoveIcon}
|
||||
viewBox="0 0 24 24"
|
||||
width={16}
|
||||
height={16}
|
||||
aria-hidden
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9 3h6a1 1 0 0 1 1 1v1h4v2H4V5h4V4a1 1 0 0 1 1-1zm1 5h2v9h-2V8zm4 0h2v9h-2V8zM7 8h2v9H7V8zm9-3H8v1h8V5zM6 21a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6v13z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<EditorAudioTrackList
|
||||
audioRefs={audioRefs}
|
||||
mediaAssets={mediaAssets}
|
||||
removeTitle={t('scene.removeTitle')}
|
||||
onAudioRefsChange={onAudioRefsChange}
|
||||
/>
|
||||
<Button onClick={onUploadMedia}>{t('campaign.upload')}</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,287 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { ipcChannels } from '../../shared/ipc/contracts';
|
||||
import {
|
||||
clampSceneAudioVolume,
|
||||
type AssetId,
|
||||
type MediaAsset,
|
||||
type SceneAudioRef,
|
||||
} from '../../shared/types';
|
||||
import { getDndApi } from '../shared/dndApi';
|
||||
import { useEditorI18n } from './i18n/EditorI18nContext';
|
||||
import { registerEditorAudioStopper } from '../shared/audio/editorAudioStop';
|
||||
|
||||
import styles from './EditorApp.module.css';
|
||||
|
||||
const AUDIO_REF_DND = 'application/x-dnd-scene-audio-ref';
|
||||
|
||||
function reorderRefs(refs: SceneAudioRef[], draggedId: AssetId, targetId: AssetId): SceneAudioRef[] {
|
||||
if (draggedId === targetId) return refs;
|
||||
const from = refs.findIndex((r) => r.assetId === draggedId);
|
||||
const to = refs.findIndex((r) => r.assetId === targetId);
|
||||
if (from < 0 || to < 0) return refs;
|
||||
const next = [...refs];
|
||||
const [item] = next.splice(from, 1);
|
||||
if (!item) return refs;
|
||||
next.splice(to, 0, item);
|
||||
return next;
|
||||
}
|
||||
|
||||
/** Локальный draft — не пишет в проект на каждый tick ползунка (иначе мигает граф). */
|
||||
function AudioVolumeSlider({
|
||||
assetId,
|
||||
volume,
|
||||
isPlaying,
|
||||
previewElRef,
|
||||
label,
|
||||
onCommit,
|
||||
}: {
|
||||
assetId: AssetId;
|
||||
volume: number;
|
||||
isPlaying: boolean;
|
||||
previewElRef: React.MutableRefObject<HTMLAudioElement | null>;
|
||||
label: string;
|
||||
onCommit: (volume: number) => void;
|
||||
}) {
|
||||
const [draft, setDraft] = useState(() => clampSceneAudioVolume(volume));
|
||||
const draftRef = useRef(draft);
|
||||
draftRef.current = draft;
|
||||
|
||||
useEffect(() => {
|
||||
setDraft(clampSceneAudioVolume(volume));
|
||||
}, [assetId, volume]);
|
||||
|
||||
const applyLocal = (v: number) => {
|
||||
const next = clampSceneAudioVolume(v);
|
||||
setDraft(next);
|
||||
if (isPlaying && previewElRef.current) previewElRef.current.volume = next;
|
||||
};
|
||||
|
||||
const commit = () => {
|
||||
const next = clampSceneAudioVolume(draftRef.current);
|
||||
if (next === clampSceneAudioVolume(volume)) return;
|
||||
onCommit(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<label className={styles.audioVolumeLabel} title={label}>
|
||||
<span className={styles.spanXs}>{label}</span>
|
||||
<input
|
||||
type="range"
|
||||
className={styles.audioVolumeRange}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={draft}
|
||||
aria-label={label}
|
||||
onChange={(e) => applyLocal(Number(e.target.value))}
|
||||
onPointerUp={commit}
|
||||
onBlur={commit}
|
||||
onKeyUp={(e) => {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'Home' || e.key === 'End') {
|
||||
commit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export type EditorAudioTrackListProps = {
|
||||
audioRefs: SceneAudioRef[];
|
||||
mediaAssets: MediaAsset[];
|
||||
removeTitle: string;
|
||||
onAudioRefsChange: (next: SceneAudioRef[]) => void;
|
||||
};
|
||||
|
||||
export function EditorAudioTrackList({
|
||||
audioRefs,
|
||||
mediaAssets,
|
||||
removeTitle,
|
||||
onAudioRefsChange,
|
||||
}: EditorAudioTrackListProps) {
|
||||
const { t } = useEditorI18n();
|
||||
const assetById = useMemo(() => new Map(mediaAssets.map((a) => [a.id, a])), [mediaAssets]);
|
||||
const [playingId, setPlayingId] = useState<AssetId | null>(null);
|
||||
const previewElRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
const el = previewElRef.current;
|
||||
if (el) {
|
||||
el.pause();
|
||||
el.src = '';
|
||||
previewElRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return registerEditorAudioStopper(() => {
|
||||
const el = previewElRef.current;
|
||||
if (el) {
|
||||
el.pause();
|
||||
el.onended = null;
|
||||
el.src = '';
|
||||
}
|
||||
previewElRef.current = null;
|
||||
setPlayingId(null);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const stopPreview = () => {
|
||||
const el = previewElRef.current;
|
||||
if (el) {
|
||||
el.pause();
|
||||
el.onended = null;
|
||||
el.src = '';
|
||||
}
|
||||
previewElRef.current = null;
|
||||
setPlayingId(null);
|
||||
};
|
||||
|
||||
const togglePreview = async (assetId: AssetId, volume: number) => {
|
||||
if (playingId === assetId) {
|
||||
stopPreview();
|
||||
return;
|
||||
}
|
||||
stopPreview();
|
||||
try {
|
||||
const r = await getDndApi().invoke(ipcChannels.project.assetFileUrl, { assetId });
|
||||
const url = r.url;
|
||||
if (!url) return;
|
||||
const el = new Audio(url);
|
||||
el.volume = clampSceneAudioVolume(volume);
|
||||
el.onended = () => {
|
||||
previewElRef.current = null;
|
||||
setPlayingId(null);
|
||||
};
|
||||
previewElRef.current = el;
|
||||
setPlayingId(assetId);
|
||||
await el.play();
|
||||
} catch {
|
||||
stopPreview();
|
||||
}
|
||||
};
|
||||
|
||||
if (audioRefs.length === 0) {
|
||||
return (
|
||||
<div className={[styles.muted, styles.spanSm].join(' ')}>{t('campaign.noFiles')}</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.audioList}>
|
||||
{audioRefs.map((ref) => {
|
||||
const asset = assetById.get(ref.assetId);
|
||||
const name = asset?.originalName ?? ref.assetId;
|
||||
const volume = clampSceneAudioVolume(ref.volume);
|
||||
const isPlaying = playingId === ref.assetId;
|
||||
return (
|
||||
<div
|
||||
key={ref.assetId}
|
||||
className={styles.audioRow}
|
||||
onDragOver={(e) => {
|
||||
if (e.dataTransfer.types.includes(AUDIO_REF_DND)) e.preventDefault();
|
||||
}}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const dragged = e.dataTransfer.getData(AUDIO_REF_DND) as AssetId;
|
||||
if (!dragged) return;
|
||||
const next = reorderRefs(audioRefs, dragged, ref.assetId);
|
||||
if (next !== audioRefs) onAudioRefsChange(next);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={styles.audioDragHandle}
|
||||
draggable
|
||||
title={name}
|
||||
onDragStart={(e) => {
|
||||
e.dataTransfer.setData(AUDIO_REF_DND, ref.assetId);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}}
|
||||
>
|
||||
<span className={styles.audioDragGrip} aria-hidden>
|
||||
⋮⋮
|
||||
</span>
|
||||
<span className={styles.audioName}>{name}</span>
|
||||
</div>
|
||||
<span className={styles.audioControls}>
|
||||
<label className={styles.checkboxLabelSm}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={ref.autoplay}
|
||||
onChange={(e) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === ref.assetId ? { ...x, autoplay: e.target.checked } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<span className={styles.spanXs}>{t('campaign.auto')}</span>
|
||||
</label>
|
||||
<label className={styles.checkboxLabelSm}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={ref.loop}
|
||||
onChange={(e) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === ref.assetId ? { ...x, loop: e.target.checked } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<span className={styles.spanXs}>{t('campaign.loop')}</span>
|
||||
</label>
|
||||
<AudioVolumeSlider
|
||||
assetId={ref.assetId}
|
||||
volume={volume}
|
||||
isPlaying={isPlaying}
|
||||
previewElRef={previewElRef}
|
||||
label={t('campaign.volume')}
|
||||
onCommit={(v) => {
|
||||
const next = audioRefs.map((x) =>
|
||||
x.assetId === ref.assetId ? { ...x, volume: v } : x,
|
||||
);
|
||||
onAudioRefsChange(next);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.audioPreviewBtn}
|
||||
title={isPlaying ? t('campaign.previewStop') : t('campaign.preview')}
|
||||
aria-label={isPlaying ? t('campaign.previewStop') : t('campaign.preview')}
|
||||
onClick={() => void togglePreview(ref.assetId, volume)}
|
||||
>
|
||||
{isPlaying ? '■' : '▶'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title={removeTitle}
|
||||
className={styles.audioRemove}
|
||||
onClick={() => {
|
||||
if (playingId === ref.assetId) stopPreview();
|
||||
onAudioRefsChange(audioRefs.filter((x) => x.assetId !== ref.assetId));
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className={styles.audioRemoveIcon}
|
||||
viewBox="0 0 24 24"
|
||||
width={16}
|
||||
height={16}
|
||||
aria-hidden
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9 3h6a1 1 0 0 1 1 1v1h4v2H4V5h4V4a1 1 0 0 1 1-1zm1 5h2v9h-2V8zm4 0h2v9h-2V8zM7 8h2v9H7V8zm9-3H8v1h8V5zM6 21a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8H6v13z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import styles from './EditorApp.module.css';
|
||||
import {
|
||||
filterMaterialImagePaths,
|
||||
getDroppedFileEntries,
|
||||
nameFromFilePath,
|
||||
pickFirstMaterialImagePath,
|
||||
useFileDropZone,
|
||||
} from './fileDrop';
|
||||
@@ -86,6 +87,11 @@ export function MaterialEditModal({
|
||||
|
||||
const setPreviewFromPathAndUrl = (path: string, previewUrl: string) => {
|
||||
setFilePath(path);
|
||||
setName((prev) => {
|
||||
if (prev.trim()) return prev;
|
||||
const fromFile = nameFromFilePath(path);
|
||||
return fromFile || prev;
|
||||
});
|
||||
setLocalPreviewUrl((prev) => {
|
||||
if (prev?.startsWith('blob:')) URL.revokeObjectURL(prev);
|
||||
return previewUrl;
|
||||
|
||||
@@ -69,10 +69,14 @@ export function isPreviewMediaPath(filePath: string): boolean {
|
||||
return PREVIEW_EXTENSIONS.has(fileExtension(filePath));
|
||||
}
|
||||
|
||||
export function sceneTitleFromMediaPath(filePath: string): string {
|
||||
export function nameFromFilePath(filePath: string): string {
|
||||
const base = filePath.split(/[/\\]/).pop() ?? filePath;
|
||||
const dot = base.lastIndexOf('.');
|
||||
const title = (dot > 0 ? base.slice(0, dot) : base).trim();
|
||||
return (dot > 0 ? base.slice(0, dot) : base).trim();
|
||||
}
|
||||
|
||||
export function sceneTitleFromMediaPath(filePath: string): string {
|
||||
const title = nameFromFilePath(filePath);
|
||||
return title.length > 0 ? title : 'Новая сцена';
|
||||
}
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ void test('buildNextSceneCardById: does not change refs when irrelevant fields c
|
||||
id: sid,
|
||||
title: 'T',
|
||||
description: 'A',
|
||||
media: { videos: [], audios: [{ assetId: 'a1' as AssetId, autoplay: false, loop: true }] },
|
||||
media: { videos: [], audios: [{ assetId: 'a1' as AssetId, autoplay: false, loop: true, volume: 1 }] },
|
||||
settings: { autoplayVideo: false, autoplayAudio: false, loopVideo: false, loopAudio: false },
|
||||
connections: [],
|
||||
layout: { x: 0, y: 0 },
|
||||
|
||||
@@ -411,6 +411,9 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
|
||||
'campaign.noFiles': 'Файлов пока нет. Добавьте аудио.',
|
||||
'campaign.auto': 'Авто',
|
||||
'campaign.loop': 'Цикл',
|
||||
'campaign.volume': 'Громк.',
|
||||
'campaign.preview': 'Прослушать',
|
||||
'campaign.previewStop': 'Стоп',
|
||||
'campaign.removeTitle': 'Убрать из кампании',
|
||||
'campaign.upload': 'Загрузить',
|
||||
'drop.hintAudio': 'Перетащите аудиофайлы сюда',
|
||||
@@ -1154,6 +1157,9 @@ export const EDITOR_MESSAGES: Record<EditorLocale, Record<string, string>> = {
|
||||
'campaign.noFiles': 'No files yet. Add audio.',
|
||||
'campaign.auto': 'Auto',
|
||||
'campaign.loop': 'Loop',
|
||||
'campaign.volume': 'Vol.',
|
||||
'campaign.preview': 'Preview',
|
||||
'campaign.previewStop': 'Stop',
|
||||
'campaign.removeTitle': 'Remove from campaign',
|
||||
'campaign.upload': 'Upload',
|
||||
'drop.hintAudio': 'Drop audio files here',
|
||||
|
||||
@@ -8,6 +8,7 @@ import editorStyles from '../editor/EditorApp.module.css';
|
||||
import {
|
||||
filterMaterialImagePaths,
|
||||
getDroppedFileEntries,
|
||||
nameFromFilePath,
|
||||
pickFirstMaterialImagePath,
|
||||
useFileDropZone,
|
||||
} from '../editor/fileDrop';
|
||||
@@ -111,6 +112,11 @@ export function NpcEditModal({
|
||||
|
||||
const setPreviewFromPathAndUrl = (path: string, previewUrl: string) => {
|
||||
setFilePath(path);
|
||||
setName((prev) => {
|
||||
if (prev.trim()) return prev;
|
||||
const fromFile = nameFromFilePath(path);
|
||||
return fromFile || prev;
|
||||
});
|
||||
setLocalPreviewUrl((prev) => {
|
||||
if (prev?.startsWith('blob:')) URL.revokeObjectURL(prev);
|
||||
return previewUrl;
|
||||
|
||||
@@ -6,6 +6,7 @@ import type { AppToken } from '../../shared/types';
|
||||
import {
|
||||
filterMaterialImagePaths,
|
||||
getDroppedFileEntries,
|
||||
nameFromFilePath,
|
||||
pickFirstMaterialImagePath,
|
||||
useFileDropZone,
|
||||
} from '../editor/fileDrop';
|
||||
@@ -56,6 +57,11 @@ export function TokenEditModal({ open, initial, existingNames, onClose, onSaved
|
||||
|
||||
const setPreviewFromPathAndUrl = (path: string, previewUrl: string) => {
|
||||
setFilePath(path);
|
||||
setName((prev) => {
|
||||
if (prev.trim()) return prev;
|
||||
const fromFile = nameFromFilePath(path);
|
||||
return fromFile || prev;
|
||||
});
|
||||
setLocalPreviewUrl((prev) => {
|
||||
if (prev?.startsWith('blob:')) URL.revokeObjectURL(prev);
|
||||
return previewUrl || null;
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
/** Регистрация стопперов превью/плееров редактора — глушим при запуске игры. */
|
||||
|
||||
const stoppers = new Set<() => void>();
|
||||
|
||||
export function registerEditorAudioStopper(stop: () => void): () => void {
|
||||
stoppers.add(stop);
|
||||
return () => {
|
||||
stoppers.delete(stop);
|
||||
};
|
||||
}
|
||||
|
||||
export function stopAllEditorAudio(): void {
|
||||
for (const stop of [...stoppers]) {
|
||||
try {
|
||||
stop();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -87,6 +87,16 @@
|
||||
border: 1px solid var(--scene-list-selected-border);
|
||||
}
|
||||
|
||||
.playlistRowPlaying {
|
||||
box-shadow: inset 2px 0 0 var(--accent2);
|
||||
}
|
||||
|
||||
.playlistPlayingMark {
|
||||
color: var(--accent2);
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trackRowMatch {
|
||||
outline: 1px dashed var(--accent2);
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ import { filterAudioFilePaths, useFileDropZone } from '../../editor/fileDrop';
|
||||
import editorStyles from '../../editor/EditorApp.module.css';
|
||||
import { useEditorI18n } from '../../editor/i18n/EditorI18nContext';
|
||||
import { getDndApi } from '../dndApi';
|
||||
import { registerEditorAudioStopper } from '../audio/editorAudioStop';
|
||||
import { Button, Input } from '../ui/controls';
|
||||
|
||||
import { PlaylistPlayerBar } from './PlaylistPlayerBar';
|
||||
@@ -81,37 +82,54 @@ export function PlaylistsPanel({
|
||||
}
|
||||
}, [selected]);
|
||||
|
||||
const audioElRef = useRef<HTMLAudioElement | null>(null);
|
||||
const [audioEl, setAudioEl] = useState<HTMLAudioElement | null>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [gain, setGain] = useState(1);
|
||||
const [queuePlaylistId, setQueuePlaylistId] = useState<PlaylistId | null>(null);
|
||||
const [queueIndex, setQueueIndex] = useState(0);
|
||||
const queueRef = useRef<{ playlistId: PlaylistId; index: number } | null>(null);
|
||||
const elsRef = useRef<Map<PlaylistId, HTMLAudioElement>>(new Map());
|
||||
const queuesRef = useRef<Map<PlaylistId, number>>(new Map());
|
||||
const [playerUi, setPlayerUi] = useState<
|
||||
Record<PlaylistId, { index: number; playing: boolean; gain: number }>
|
||||
>({});
|
||||
const playerUiRef = useRef(playerUi);
|
||||
playerUiRef.current = playerUi;
|
||||
const playAtRef = useRef<(playlist: AppPlaylist, index: number) => Promise<void>>(async () => undefined);
|
||||
const statePlaylistsRef = useRef(state.playlists);
|
||||
statePlaylistsRef.current = state.playlists;
|
||||
|
||||
const queuePlaylist = useMemo(
|
||||
() => (queuePlaylistId ? state.playlists.find((p) => p.id === queuePlaylistId) ?? null : null),
|
||||
[queuePlaylistId, state.playlists],
|
||||
);
|
||||
const currentTrack = queuePlaylist?.tracks[queueIndex] ?? null;
|
||||
const currentAudio = currentTrack ? audioById.get(currentTrack.audioId) ?? null : null;
|
||||
|
||||
const stopPlayback = useCallback(() => {
|
||||
const el = audioElRef.current;
|
||||
if (el) {
|
||||
el.pause();
|
||||
el.removeAttribute('src');
|
||||
el.load();
|
||||
}
|
||||
audioElRef.current = null;
|
||||
setAudioEl(null);
|
||||
setPlaying(false);
|
||||
queueRef.current = null;
|
||||
setQueuePlaylistId(null);
|
||||
setQueueIndex(0);
|
||||
const bumpPlayer = useCallback((playlistId: PlaylistId, patch: Partial<{ index: number; playing: boolean; gain: number }>) => {
|
||||
setPlayerUi((prev) => {
|
||||
const cur = prev[playlistId] ?? { index: 0, playing: false, gain: 1 };
|
||||
return { ...prev, [playlistId]: { ...cur, ...patch } };
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => () => stopPlayback(), [stopPlayback]);
|
||||
const destroyPlayer = useCallback((playlistId: PlaylistId) => {
|
||||
const el = elsRef.current.get(playlistId);
|
||||
if (el) {
|
||||
el.pause();
|
||||
el.onended = null;
|
||||
el.onplay = null;
|
||||
el.onpause = null;
|
||||
el.removeAttribute('src');
|
||||
el.load();
|
||||
elsRef.current.delete(playlistId);
|
||||
}
|
||||
queuesRef.current.delete(playlistId);
|
||||
setPlayerUi((prev) => {
|
||||
if (!(playlistId in prev)) return prev;
|
||||
const next = { ...prev };
|
||||
delete next[playlistId];
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const stopAllPlayback = useCallback(() => {
|
||||
for (const id of [...elsRef.current.keys()]) destroyPlayer(id);
|
||||
}, [destroyPlayer]);
|
||||
|
||||
useEffect(() => () => stopAllPlayback(), [stopAllPlayback]);
|
||||
|
||||
useEffect(() => {
|
||||
if (readOnly) return undefined;
|
||||
return registerEditorAudioStopper(() => stopAllPlayback());
|
||||
}, [readOnly, stopAllPlayback]);
|
||||
|
||||
const playAt = useCallback(
|
||||
async (playlist: AppPlaylist, index: number) => {
|
||||
@@ -119,61 +137,57 @@ export function PlaylistsPanel({
|
||||
if (!track) return;
|
||||
const { url } = await api.invoke(ipcChannels.playlists.audioUrl, { id: track.audioId });
|
||||
if (!url) return;
|
||||
let el = audioElRef.current;
|
||||
|
||||
let el = elsRef.current.get(playlist.id);
|
||||
if (!el) {
|
||||
el = new Audio();
|
||||
el.preload = 'auto';
|
||||
audioElRef.current = el;
|
||||
setAudioEl(el);
|
||||
elsRef.current.set(playlist.id, el);
|
||||
el.onended = () => {
|
||||
const qIndex = queuesRef.current.get(playlist.id) ?? 0;
|
||||
const pl = statePlaylistsRef.current.find((p) => p.id === playlist.id);
|
||||
if (!pl || pl.tracks.length === 0) {
|
||||
destroyPlayer(playlist.id);
|
||||
return;
|
||||
}
|
||||
const next = (qIndex + 1) % pl.tracks.length;
|
||||
void playAtRef.current(pl, next);
|
||||
};
|
||||
el.onplay = () => bumpPlayer(playlist.id, { playing: true });
|
||||
el.onpause = () => bumpPlayer(playlist.id, { playing: false });
|
||||
}
|
||||
|
||||
const gain = playerUiRef.current[playlist.id]?.gain ?? 1;
|
||||
el.volume = gain;
|
||||
el.src = url;
|
||||
queueRef.current = { playlistId: playlist.id, index };
|
||||
setQueuePlaylistId(playlist.id);
|
||||
setQueueIndex(index);
|
||||
queuesRef.current.set(playlist.id, index);
|
||||
bumpPlayer(playlist.id, { index, playing: false, gain });
|
||||
try {
|
||||
await el.play();
|
||||
setPlaying(true);
|
||||
bumpPlayer(playlist.id, { index, playing: true });
|
||||
} catch {
|
||||
setPlaying(false);
|
||||
bumpPlayer(playlist.id, { index, playing: false });
|
||||
}
|
||||
},
|
||||
[api, gain],
|
||||
[api, bumpPlayer, destroyPlayer],
|
||||
);
|
||||
playAtRef.current = playAt;
|
||||
|
||||
useEffect(() => {
|
||||
const el = audioElRef.current;
|
||||
if (!el) return;
|
||||
const onEnded = () => {
|
||||
const q = queueRef.current;
|
||||
if (!q) return;
|
||||
const pl = state.playlists.find((p) => p.id === q.playlistId);
|
||||
if (!pl || pl.tracks.length === 0) {
|
||||
stopPlayback();
|
||||
return;
|
||||
}
|
||||
const next = (q.index + 1) % pl.tracks.length;
|
||||
void playAt(pl, next);
|
||||
};
|
||||
const onPlay = () => setPlaying(true);
|
||||
const onPause = () => setPlaying(false);
|
||||
el.addEventListener('ended', onEnded);
|
||||
el.addEventListener('play', onPlay);
|
||||
el.addEventListener('pause', onPause);
|
||||
return () => {
|
||||
el.removeEventListener('ended', onEnded);
|
||||
el.removeEventListener('play', onPlay);
|
||||
el.removeEventListener('pause', onPause);
|
||||
};
|
||||
}, [audioEl, playAt, state.playlists, stopPlayback]);
|
||||
const selectedPlayer = selected ? playerUi[selected.id] : undefined;
|
||||
const selectedEl = selected ? elsRef.current.get(selected.id) ?? null : null;
|
||||
const selectedQueueIndex = selectedPlayer?.index ?? 0;
|
||||
const selectedPlaying = Boolean(selectedPlayer?.playing);
|
||||
const selectedGain = selectedPlayer?.gain ?? 1;
|
||||
const selectedCurrentTrack = selected?.tracks[selectedQueueIndex] ?? null;
|
||||
const selectedCurrentAudio = selectedCurrentTrack
|
||||
? audioById.get(selectedCurrentTrack.audioId) ?? null
|
||||
: null;
|
||||
|
||||
const step = (delta: number) => {
|
||||
const q = queueRef.current;
|
||||
const pl = q ? state.playlists.find((p) => p.id === q.playlistId) : selected;
|
||||
if (!pl || pl.tracks.length === 0) return;
|
||||
const base = q?.playlistId === pl.id ? q.index : 0;
|
||||
const next = (base + delta + pl.tracks.length) % pl.tracks.length;
|
||||
void playAt(pl, next);
|
||||
if (!selected || selected.tracks.length === 0) return;
|
||||
const base = playerUi[selected.id]?.index ?? 0;
|
||||
const next = (base + delta + selected.tracks.length) % selected.tracks.length;
|
||||
void playAt(selected, next);
|
||||
};
|
||||
|
||||
const createPlaylist = async () => {
|
||||
@@ -223,7 +237,7 @@ export function PlaylistsPanel({
|
||||
if (!pendingDelete) return;
|
||||
const id = pendingDelete.id;
|
||||
setPendingDelete(null);
|
||||
if (queueRef.current?.playlistId === id) stopPlayback();
|
||||
destroyPlayer(id);
|
||||
await api.invoke(ipcChannels.playlists.delete, { id });
|
||||
setSelectedId((cur) => (cur === id ? null : cur));
|
||||
};
|
||||
@@ -252,7 +266,11 @@ export function PlaylistsPanel({
|
||||
<button
|
||||
key={pl.id}
|
||||
type="button"
|
||||
className={[styles.playlistRow, selected?.id === pl.id ? styles.playlistRowSelected : '']
|
||||
className={[
|
||||
styles.playlistRow,
|
||||
selected?.id === pl.id ? styles.playlistRowSelected : '',
|
||||
playerUi[pl.id]?.playing ? styles.playlistRowPlaying : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
data-testid={`playlist-row-${pl.id}`}
|
||||
@@ -292,6 +310,7 @@ export function PlaylistsPanel({
|
||||
onClick={() => setSelectedId(pl.id)}
|
||||
>
|
||||
<span className={styles.playlistName}>{pl.name || labels.untitled}</span>
|
||||
{playerUi[pl.id]?.playing ? <span className={styles.playlistPlayingMark}>▶</span> : null}
|
||||
<span className={styles.playlistCount}>{pl.tracks.length}</span>
|
||||
</button>
|
||||
))
|
||||
@@ -360,7 +379,9 @@ export function PlaylistsPanel({
|
||||
const title = audio?.title ?? labels.untitled;
|
||||
const highlighted = query.trim() && filtered.matchedAudioIds.has(tr.audioId);
|
||||
const isCurrent =
|
||||
queuePlaylistId === selected.id && queueIndex === idx && Boolean(currentTrack);
|
||||
selectedPlayer?.playing === true &&
|
||||
selectedQueueIndex === idx &&
|
||||
Boolean(selectedCurrentTrack);
|
||||
return (
|
||||
<div
|
||||
key={tr.id}
|
||||
@@ -465,23 +486,26 @@ export function PlaylistsPanel({
|
||||
)}
|
||||
|
||||
<PlaylistPlayerBar
|
||||
title={currentAudio?.title ?? ''}
|
||||
subtitle={queuePlaylist?.name}
|
||||
audioEl={audioEl}
|
||||
playing={playing}
|
||||
gain={gain}
|
||||
onGainChange={setGain}
|
||||
title={selectedCurrentAudio?.title ?? ''}
|
||||
subtitle={selected?.name ?? ''}
|
||||
audioEl={selectedEl}
|
||||
playing={selectedPlaying}
|
||||
gain={selectedGain}
|
||||
onGainChange={(g) => {
|
||||
if (!selected) return;
|
||||
const el = elsRef.current.get(selected.id);
|
||||
if (el) el.volume = g;
|
||||
bumpPlayer(selected.id, { gain: g });
|
||||
}}
|
||||
onTogglePlay={() => {
|
||||
const el = audioElRef.current;
|
||||
if (!selected) return;
|
||||
const el = elsRef.current.get(selected.id);
|
||||
if (!el) {
|
||||
if (selected && selected.tracks.length > 0) void playAt(selected, 0);
|
||||
if (selected.tracks.length > 0) void playAt(selected, 0);
|
||||
return;
|
||||
}
|
||||
if (el.paused) void el.play().then(() => setPlaying(true)).catch(() => setPlaying(false));
|
||||
else {
|
||||
el.pause();
|
||||
setPlaying(false);
|
||||
}
|
||||
if (el.paused) void el.play().catch(() => bumpPlayer(selected.id, { playing: false }));
|
||||
else el.pause();
|
||||
}}
|
||||
onPrev={() => step(-1)}
|
||||
onNext={() => step(1)}
|
||||
|
||||
@@ -110,8 +110,29 @@ export type SceneAudioRef = {
|
||||
assetId: AssetId;
|
||||
autoplay: boolean;
|
||||
loop: boolean;
|
||||
/** Громкость 0…1; дефолт на пульте при старте сессии. */
|
||||
volume: number;
|
||||
};
|
||||
|
||||
export function clampSceneAudioVolume(v: unknown): number {
|
||||
if (typeof v !== 'number' || !Number.isFinite(v)) return 1;
|
||||
return Math.max(0, Math.min(1, v));
|
||||
}
|
||||
|
||||
export function normalizeSceneAudioRef(raw: {
|
||||
assetId: AssetId;
|
||||
autoplay?: boolean;
|
||||
loop?: boolean;
|
||||
volume?: unknown;
|
||||
}): SceneAudioRef {
|
||||
return {
|
||||
assetId: raw.assetId,
|
||||
autoplay: Boolean(raw.autoplay),
|
||||
loop: Boolean(raw.loop),
|
||||
volume: clampSceneAudioVolume(raw.volume),
|
||||
};
|
||||
}
|
||||
|
||||
export type SceneMediaRefs = {
|
||||
videos: AssetId[];
|
||||
audios: SceneAudioRef[];
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import { clampSceneAudioVolume, normalizeSceneAudioRef } from '../../shared/types/domain';
|
||||
import type { AssetId } from '../../shared/types/ids';
|
||||
|
||||
void test('clampSceneAudioVolume clamps to 0…1', () => {
|
||||
assert.equal(clampSceneAudioVolume(0.5), 0.5);
|
||||
assert.equal(clampSceneAudioVolume(-1), 0);
|
||||
assert.equal(clampSceneAudioVolume(2), 1);
|
||||
assert.equal(clampSceneAudioVolume(undefined), 1);
|
||||
assert.equal(clampSceneAudioVolume(NaN), 1);
|
||||
});
|
||||
|
||||
void test('normalizeSceneAudioRef defaults volume to 1', () => {
|
||||
const id = 'a1' as AssetId;
|
||||
assert.deepEqual(normalizeSceneAudioRef({ assetId: id, autoplay: true, loop: false }), {
|
||||
assetId: id,
|
||||
autoplay: true,
|
||||
loop: false,
|
||||
volume: 1,
|
||||
});
|
||||
assert.deepEqual(normalizeSceneAudioRef({ assetId: id, autoplay: false, loop: true, volume: 0.25 }), {
|
||||
assetId: id,
|
||||
autoplay: false,
|
||||
loop: true,
|
||||
volume: 0.25,
|
||||
});
|
||||
});
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
"build:obfuscate": "node scripts/build.mjs --production --obfuscate",
|
||||
"lint": "eslint . --max-warnings 0",
|
||||
"typecheck": "tsc -p tsconfig.eslint.json --noEmit",
|
||||
"test": "tsx --test app/renderer/shared/ui/controls.tooltip.test.ts app/renderer/shared/ui/secondaryWindows.stability.test.ts app/renderer/npcs/tiptapEditorSafe.test.ts app/renderer/editor/state/projectState.race.test.ts app/renderer/editor/fileDrop.test.ts app/shared/graph/sceneListOrder.test.ts app/shared/graph/activeStorylineScenes.test.ts app/renderer/editor/graph/sceneCardById.test.ts app/renderer/editor/i18n/editorMessages.locale.test.ts app/renderer/editor/help/helpLinkify.test.ts app/renderer/editor/sceneDescriptionHtml.test.ts app/shared/graph/storylineExportImport.test.ts app/shared/foundry/foundryGraph.test.ts app/shared/ipc/contracts.mediaRemoval.test.ts app/shared/effectEraserHitTest.test.ts app/shared/fieldEffectEraser.test.ts app/renderer/control/controlApp.effectsPanel.test.ts app/renderer/control/controlApp.audioPerf.networkRegression.test.ts app/renderer/control/controlApp.brushPerf.networkRegression.test.ts app/renderer/shared/useAssetImageUrl.cache.test.ts app/main/sessionIpc.phase6.networkRegression.test.ts app/renderer/shared/sceneOverlay/sceneOverlayHost.test.ts app/renderer/shared/effects/PxiEffectsOverlay.pointer.test.ts app/renderer/shared/traps/trapActivation.test.ts app/renderer/shared/videoSceneMapParity.test.ts app/main/windows/createWindows.editorClose.test.ts app/main/preferences/appPreferences.test.ts app/main/playlists/playlistsStore.test.ts app/main/sessionTimer/timerSessionStore.test.ts app/main/initiative/initiativeSessionStore.test.ts app/main/diceRoll/diceRollSessionStore.test.ts app/main/safeConsole.test.ts app/main/windows/bootWindow.test.ts app/main/effects/effectsStore.test.ts app/main/effects/sceneDarknessStore.test.ts app/main/effects/sceneMarkerStore.test.ts app/shared/sceneMarkerEraser.test.ts app/main/sceneTraps/sceneTrapsStore.test.ts app/main/project/assetPrune.test.ts app/main/project/optimizeImageImport.test.ts app/main/project/scenePreviewThumbnail.test.ts app/main/project/fsRetry.test.ts app/main/project/zipRead.test.ts app/main/project/replaceFileAtomic.test.ts app/main/project/zipStore.legacyContract.test.ts app/shared/package.build.test.ts app/shared/license/canonicalJson.test.ts app/shared/license/productKey.test.ts app/shared/license/licenseService.networkRegression.test.ts app/shared/video/videoPlaybackPerf.networkRegression.test.ts app/shared/video/videoPlaybackLoop.networkRegression.test.ts app/main/license/verifyLicenseToken.test.ts app/main/license/machineFingerprint.test.ts app/shared/types/appPlayers.test.ts app/shared/types/npcDisposition.test.ts app/shared/types/npcExternalUrl.test.ts app/main/npcs/npcsOverlayStore.test.ts app/shared/types/sceneGrid.test.ts app/shared/types/sceneGridSnap.test.ts app/shared/types/sceneDarkness.test.ts app/shared/types/materialLegend.test.ts app/main/tokens/tokenGridSnapSessionStore.test.ts app/shared/players/playerTeams.test.ts app/shared/players/launchPlayersSelection.test.ts app/main/players/playersStore.test.ts app/main/players/sceneNpcTokensSessionStore.test.ts app/main/players/scenePlayerTokensSessionStore.test.ts app/main/tokens/sceneTokensSessionStore.test.ts app/shared/ipc/contracts.players.test.ts app/shared/types/containMediaRect.test.ts app/shared/types/scenePreviewRotation.test.ts app/shared/types/tokenPath.test.ts app/shared/types/tokenPathPlayback.test.ts && node --test scripts/build-env.test.mjs scripts/obfuscate-main.test.mjs scripts/release-mac-prep.test.mjs scripts/release-native-prep.test.mjs scripts/verify-packaged-sharp.test.mjs app/main/project/sharpRuntime.test.mjs",
|
||||
"test": "tsx --test app/renderer/shared/ui/controls.tooltip.test.ts app/renderer/shared/ui/secondaryWindows.stability.test.ts app/renderer/npcs/tiptapEditorSafe.test.ts app/renderer/editor/state/projectState.race.test.ts app/renderer/editor/fileDrop.test.ts app/shared/graph/sceneListOrder.test.ts app/shared/graph/activeStorylineScenes.test.ts app/renderer/editor/graph/sceneCardById.test.ts app/renderer/editor/i18n/editorMessages.locale.test.ts app/renderer/editor/help/helpLinkify.test.ts app/renderer/editor/sceneDescriptionHtml.test.ts app/shared/graph/storylineExportImport.test.ts app/shared/foundry/foundryGraph.test.ts app/shared/ipc/contracts.mediaRemoval.test.ts app/shared/effectEraserHitTest.test.ts app/shared/fieldEffectEraser.test.ts app/renderer/control/controlApp.effectsPanel.test.ts app/renderer/control/controlApp.audioPerf.networkRegression.test.ts app/renderer/control/controlApp.brushPerf.networkRegression.test.ts app/renderer/shared/useAssetImageUrl.cache.test.ts app/main/sessionIpc.phase6.networkRegression.test.ts app/renderer/shared/sceneOverlay/sceneOverlayHost.test.ts app/renderer/shared/effects/PxiEffectsOverlay.pointer.test.ts app/renderer/shared/traps/trapActivation.test.ts app/renderer/shared/videoSceneMapParity.test.ts app/main/windows/createWindows.editorClose.test.ts app/main/preferences/appPreferences.test.ts app/main/playlists/playlistsStore.test.ts app/main/sessionTimer/timerSessionStore.test.ts app/main/initiative/initiativeSessionStore.test.ts app/main/diceRoll/diceRollSessionStore.test.ts app/main/safeConsole.test.ts app/main/windows/bootWindow.test.ts app/main/effects/effectsStore.test.ts app/main/effects/sceneDarknessStore.test.ts app/main/effects/sceneMarkerStore.test.ts app/shared/sceneMarkerEraser.test.ts app/main/sceneTraps/sceneTrapsStore.test.ts app/main/project/assetPrune.test.ts app/main/project/optimizeImageImport.test.ts app/main/project/scenePreviewThumbnail.test.ts app/main/project/fsRetry.test.ts app/main/project/zipRead.test.ts app/main/project/replaceFileAtomic.test.ts app/main/project/zipStore.legacyContract.test.ts app/shared/package.build.test.ts app/shared/license/canonicalJson.test.ts app/shared/license/productKey.test.ts app/shared/license/licenseService.networkRegression.test.ts app/shared/video/videoPlaybackPerf.networkRegression.test.ts app/shared/video/videoPlaybackLoop.networkRegression.test.ts app/main/license/verifyLicenseToken.test.ts app/main/license/machineFingerprint.test.ts app/shared/types/sceneAudioRef.test.ts app/shared/types/appPlayers.test.ts app/shared/types/npcDisposition.test.ts app/shared/types/npcExternalUrl.test.ts app/main/npcs/npcsOverlayStore.test.ts app/shared/types/sceneGrid.test.ts app/shared/types/sceneGridSnap.test.ts app/shared/types/sceneDarkness.test.ts app/shared/types/materialLegend.test.ts app/main/tokens/tokenGridSnapSessionStore.test.ts app/shared/players/playerTeams.test.ts app/shared/players/launchPlayersSelection.test.ts app/main/players/playersStore.test.ts app/main/players/sceneNpcTokensSessionStore.test.ts app/main/players/scenePlayerTokensSessionStore.test.ts app/main/tokens/sceneTokensSessionStore.test.ts app/shared/ipc/contracts.players.test.ts app/shared/types/containMediaRect.test.ts app/shared/types/scenePreviewRotation.test.ts app/shared/types/tokenPath.test.ts app/shared/types/tokenPathPlayback.test.ts && node --test scripts/build-env.test.mjs scripts/obfuscate-main.test.mjs scripts/release-mac-prep.test.mjs scripts/release-native-prep.test.mjs scripts/verify-packaged-sharp.test.mjs app/main/project/sharpRuntime.test.mjs",
|
||||
"format": "prettier . --check",
|
||||
"format:write": "prettier . --write",
|
||||
"postinstall": "patch-package",
|
||||
|
||||
Reference in New Issue
Block a user