93 lines
6.4 KiB
HTML
93 lines
6.4 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-movie-open-play"></span></span>
|
|
<div class="section-title">
|
|
<h2>Studio</h2>
|
|
<p>Source, cast, voice, and perform a whole audiobook or script in one place.</p>
|
|
</div>
|
|
<span style="flex:1"></span>
|
|
<!-- Studio's own Previous/Next — deliberately its OWN class, not a
|
|
reuse of .wf-header-nav: that cross-section widget is actively
|
|
hidden inside #s-caststudio (utils.js _wfUpdateHeaderNav) since
|
|
it only knows about the old s-reader/s-library/s-rehearser
|
|
sections, not these 4 phases — reusing its class here would have
|
|
gotten this hidden by that exact same suppression. Without this,
|
|
the only way to move between phases was clicking a tab directly
|
|
— no visible "what's next" affordance, confirmed as a real gap
|
|
live. -->
|
|
<div class="stu-phase-nav" id="stu-phase-nav">
|
|
<button type="button" class="stu-phase-nav-btn" id="stu-phase-prev"><span class="mdi mdi-chevron-left"></span><span>Previous</span></button>
|
|
<button type="button" class="stu-phase-nav-btn" id="stu-phase-next"><span>Next</span><span class="mdi mdi-chevron-right"></span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phase tabs — a self-contained system deliberately separate from both
|
|
the cross-section .wf-stepper and Script Rehearser's own .reh-subtab
|
|
system; see the Studio build plan for why. Numbered so the tab bar
|
|
itself reads as an ordered flow, not just 4 unrelated sections. -->
|
|
<div class="stu-subtabs" id="stu-subtabs">
|
|
<!-- The paste/drag-drop controls in Phase 1 (borrowed from Read Aloud) hide
|
|
themselves once a document is loaded — fine for a single-book reading
|
|
session, but Studio resumes your last book automatically, so there was
|
|
no visible way back to them to add another book (confirmed live:
|
|
reported as "where's the upload area?"). This button reveals them
|
|
again without disturbing the loaded book. Placed first in the tab row
|
|
(not as a numbered phase) per live UI feedback, so it's visible
|
|
without scrolling no matter which phase is open. -->
|
|
<button type="button" class="stu-book-context-btn" id="stu-add-book-btn" style="margin-right:10px">
|
|
<span class="mdi mdi-file-document-plus-outline"></span> Add a new book
|
|
</button>
|
|
<button class="stu-subtab active" data-stu-phase="1"><span class="stu-subtab-num">1</span> <span class="mdi mdi-file-document-outline"></span> <span>Source</span></button>
|
|
<button class="stu-subtab" data-stu-phase="2"><span class="stu-subtab-num">2</span> <span class="mdi mdi-drama-masks"></span> <span>Characters</span></button>
|
|
<button class="stu-subtab" data-stu-phase="3"><span class="stu-subtab-num">3</span> <span class="mdi mdi-account-voice"></span> <span>Voices</span></button>
|
|
<button class="stu-subtab" data-stu-phase="4"><span class="stu-subtab-num">4</span> <span class="mdi mdi-theater"></span> <span>Perform & Export</span></button>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-caststudio">
|
|
|
|
<!-- ── Phase 1: Source ─────────────────────────────────────────── -->
|
|
<div class="stu-phase" id="stu-phase-1">
|
|
<div id="stu-source-slot"></div>
|
|
<div class="card" style="margin-top:16px">
|
|
<h2><span class="mdi mdi-bookshelf"></span> Already uploaded</h2>
|
|
<p class="card-subtitle" style="margin:0 0 12px">Pick a book you've imported before instead of pasting/uploading it again.</p>
|
|
<div id="stu-books-slot"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Phase 2: Characters ─────────────────────────────────────── -->
|
|
<div class="stu-phase" id="stu-phase-2" hidden>
|
|
<div class="stu-book-chip-row" id="stu-book-chip-row" aria-live="polite"></div>
|
|
<div class="stu-inner-tabs" id="stu-cast-inner-tabs">
|
|
<button type="button" class="stu-book-context-btn" id="stu-change-book-btn" title="Choose a different uploaded book"><span class="mdi mdi-book-open-page-variant-outline"></span> Change book</button>
|
|
<button type="button" class="stu-book-context-btn" id="stu-book-context-btn" title="Edit genre, setting, era and language before identifying characters"><span class="mdi mdi-book-cog-outline"></span> Edit book context</button>
|
|
<button class="stu-inner-tab active" data-stu-cast-view="identify">Identify Characters</button>
|
|
<button class="stu-inner-tab" data-stu-cast-view="sheets">Cast Characters <small style="opacity:.6;font-weight:400">(optional)</small></button>
|
|
</div>
|
|
<div id="stu-cast-slot"></div>
|
|
<div id="stu-castchars-slot" hidden></div>
|
|
</div>
|
|
|
|
<!-- ── Phase 3: Voices ─────────────────────────────────────────── -->
|
|
<div class="stu-phase" id="stu-phase-3" hidden>
|
|
<div id="stu-voices-slot"></div>
|
|
</div>
|
|
|
|
<!-- ── Phase 4: Perform & Export ───────────────────────────────── -->
|
|
<div class="stu-phase" id="stu-phase-4" hidden>
|
|
<div style="display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;">
|
|
<label class="stu-mode-toggle" style="flex-shrink:0">
|
|
<input type="checkbox" id="stu-mode-audiobook">
|
|
<span><span class="mdi mdi-headphones"></span> Generate full audiobook (voice the Narrator too)</span>
|
|
</label>
|
|
</div>
|
|
<!-- "I play this" lives on the per-character cast cards, not the
|
|
Stage line view — only relevant in Rehearse mode. -->
|
|
<details class="card" id="stu-mecast-details" style="margin-bottom:14px">
|
|
<summary style="cursor:pointer;font-weight:700;padding:4px 0"><span class="mdi mdi-microphone"></span> Who's playing which character?</summary>
|
|
<div id="stu-mecast-slot"></div>
|
|
</details>
|
|
<div id="stu-stage-slot"></div>
|
|
</div>
|
|
|
|
</div>
|