diff --git a/css/hyperaudio-lite-editor.css b/css/hyperaudio-lite-editor.css index 46395f5..edfca73 100644 --- a/css/hyperaudio-lite-editor.css +++ b/css/hyperaudio-lite-editor.css @@ -867,3 +867,89 @@ label[data-a11y-wired]:focus-visible { margin-top: 27px; } } + +/* Transcript/captions view switch: a recessed track with a raised thumb that + slides under the active segment, so the current view reads as a position in + a switch — distinct from the filled action buttons beside it. Colors come + from the daisyUI theme vars (base-200 track, base-100 thumb). */ +#view-switch { + position: relative; + display: inline-flex; + padding: 4px; + border-radius: 0.5rem; + background-color: oklch(var(--b3)); + margin-right: 16px; +} +#view-switch::before { + content: ""; + position: absolute; + top: 4px; + left: 4px; + width: 44px; + height: 40px; + border-radius: 0.375rem; + background-color: oklch(var(--b1)); + box-shadow: 0 1px 3px oklch(var(--bc) / 0.25); + transition: transform 0.15s ease-out; +} +#view-switch.captions-active::before { + transform: translateX(44px); +} +@media (prefers-reduced-motion: reduce) { + #view-switch::before { transition: none; } +} +#view-switch .btn { + position: relative; /* sits above the sliding thumb */ + width: 44px; + height: 40px; + min-height: 0; + border: none; + background: transparent; + color: oklch(var(--bc) / 0.4); +} +#view-switch .btn:hover { + background: transparent; + color: oklch(var(--bc) / 0.75); +} +#view-switch .btn[aria-pressed="true"] { + color: oklch(var(--bc)); +} + +/* Soften the navbar's outline buttons to sit in the same family as the view + switch: quiet base-300 borders and a tint hover, instead of daisyUI's + near-black border + black-fill hover inversion, which read heavier than + everything around them. */ +.navbar .btn-outline { + border-color: oklch(var(--b3)); + color: oklch(var(--bc) / 0.75); + background-color: oklch(var(--b1)); +} +.navbar .btn-outline:hover { + border-color: oklch(var(--bc) / 0.3); + background-color: oklch(var(--b2)); + color: oklch(var(--bc)); +} + +/* Align the navbar's left edge with the transcript card: the card sits flush + with .main-panel while the sidebar is open (left offset 0) and floats with a + 16px gutter when collapsed, so the navbar's leading padding follows suit — + animated to track the card's 0.5s slide. Desktop two-pane only; the + small-screen layout keeps the default navbar padding. The .main-panel + prefix beats DaisyUI's single-class .navbar padding (tailwind-min.css + loads after this file). */ +@media screen and (min-width: 949px) { + .main-panel .navbar { + padding-left: 0; + /* Optically centre the buttons in the full band between the screen top + and the transcript card's top (78px): the borderless navbar reads as + one space with the 8px floating-card gap below it, so geometric + centring in the 70px navbar alone left them sitting 4px high. The + margin shifts the whole centred bar; the card is absolutely + positioned, so nothing else moves. */ + margin-top: 4px; + transition: padding-left 0.5s ease; + } + body.sidebar-collapsed .main-panel .navbar { + padding-left: 16px; + } +} diff --git a/index.html b/index.html index ad9c39e..4dab78f 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,7 @@ } - + @@ -386,7 +386,7 @@

Recents

- @@ -487,12 +487,19 @@

Topics

- - + +
+ + +
@@ -963,7 +970,7 @@

Caption Regeneration

- + @@ -1051,7 +1058,7 @@

Load from Local Storage

- + diff --git a/js/editor-core.js b/js/editor-core.js index ce2fdd3..778af5f 100644 --- a/js/editor-core.js +++ b/js/editor-core.js @@ -175,25 +175,38 @@ // edits otherwise persist; localStorage load manages its own cache. window.document.addEventListener('hyperaudioInit', () => { captionCache = null; }, false); - document.querySelector('#caption-editor-btn').addEventListener('click', (e) => { + // Segmented view switch (transcript/captions): both segments stay clickable + // and the active one is marked by the track's thumb + aria-pressed rather + // than disabled. + // Clicking the active segment is a no-op — the transcription engines rely on + // that when they force transcript view by clicking #transcript-editor-btn. + const transcriptViewBtn = document.querySelector('#transcript-editor-btn'); + const captionViewBtn = document.querySelector('#caption-editor-btn'); + + function reflectViewSwitch() { + document.querySelector('#view-switch').classList.toggle('captions-active', captionMode === true); + captionViewBtn.setAttribute('aria-pressed', String(captionMode === true)); + transcriptViewBtn.setAttribute('aria-pressed', String(captionMode !== true)); + } + + captionViewBtn.addEventListener('click', () => { + if (captionMode === true) return; let holder = document.querySelector('.transcript-holder'); transcriptCache = holder.cloneNode(true); captionMode = true; hyperaudioGenerateCaptionsFromTranscript(); - document.querySelector('#caption-editor-btn').disabled = true; - document.querySelector('#transcript-editor-btn').disabled = false; + reflectViewSwitch(); }); - document.querySelector('#transcript-editor-btn').addEventListener('click', (e) => { + transcriptViewBtn.addEventListener('click', () => { + if (captionMode !== true) return; restoreTranscript(); captionMode = false; if (transcriptRequiresInit === true) { hyperaudio(); transcriptRequiresInit = false; } - - document.querySelector('#caption-editor-btn').disabled = false; - document.querySelector('#transcript-editor-btn').disabled = true; + reflectViewSwitch(); }); @@ -766,6 +779,11 @@ sidebarOpen = true; } + document.querySelector('#sidebar-toggle').setAttribute('aria-pressed', String(sidebarOpen)); + // lets the CSS align the navbar's leading edge with the transcript card, + // whose left gutter differs between the open and collapsed layouts + document.body.classList.toggle('sidebar-collapsed', sidebarOpen === false); + if( document.pictureInPictureEnabled && !videoElement.disablePictureInPicture) { @@ -780,7 +798,16 @@ } } }); - + + // On small screens the same button opens the Recents drawer instead + // (responsive.js intercepts the click), so when the layout returns to + // desktop restore aria-pressed to the desktop sidebar state. + window.matchMedia('(max-width: 948px)').addEventListener('change', (ev) => { + if (!ev.matches) { + document.querySelector('#sidebar-toggle').setAttribute('aria-pressed', String(sidebarOpen)); + } + }); + let showSpeakers = document.querySelector('#show-speakers'); showSpeakers.addEventListener('change', function(e) { diff --git a/js/hyperaudio-lite-editor-assemblyai.js b/js/hyperaudio-lite-editor-assemblyai.js index c9a1344..c9e265f 100644 --- a/js/hyperaudio-lite-editor-assemblyai.js +++ b/js/hyperaudio-lite-editor-assemblyai.js @@ -71,8 +71,8 @@ class AssemblyAIService extends HTMLElement { getData() { // If in caption mode, switch back to transcript view so the loader shows and - // the result lands in the right place (#transcript-editor-btn no-ops when - // already in transcript mode). + // the result lands in the right place (#transcript-editor-btn's handler + // no-ops when already in transcript mode). document.querySelector('#transcript-editor-btn')?.click(); document.querySelector('#hypertranscript').innerHTML = '
Transcribing….

transcribing
'; diff --git a/js/hyperaudio-lite-editor-deepgram.js b/js/hyperaudio-lite-editor-deepgram.js index e8c3a49..c59ad0e 100644 --- a/js/hyperaudio-lite-editor-deepgram.js +++ b/js/hyperaudio-lite-editor-deepgram.js @@ -125,7 +125,7 @@ class DeepgramService extends HTMLElement { getData(event) { // If the user is in caption mode, switch back to transcript view so the // transcribing loader is visible and the result lands in the right place. - // #transcript-editor-btn is disabled in transcript mode, so this no-ops. + // #transcript-editor-btn's handler no-ops when already in transcript mode. document.querySelector('#transcript-editor-btn')?.click(); document.querySelector('#hypertranscript').innerHTML = '
Transcribing....

transcribing
'; if (typeof setTranscriptBusy === 'function') { diff --git a/js/hyperaudio-lite-editor-whisper.js b/js/hyperaudio-lite-editor-whisper.js index c474fee..2c94a99 100644 --- a/js/hyperaudio-lite-editor-whisper.js +++ b/js/hyperaudio-lite-editor-whisper.js @@ -250,7 +250,7 @@ function loadWhisperClient(modal, workerBaseUrl) { // If the user is in caption mode, switch back to transcript view so the // transcribing loader is visible and the result lands in the right place. - // #transcript-editor-btn is disabled in transcript mode, so this no-ops. + // #transcript-editor-btn's handler no-ops when already in transcript mode. document.querySelector('#transcript-editor-btn')?.click(); const size = modelNameSelectionInput.value; diff --git a/js/responsive.js b/js/responsive.js index 9105f88..49dc73e 100644 --- a/js/responsive.js +++ b/js/responsive.js @@ -18,8 +18,18 @@ const mobile = window.matchMedia('(max-width: 948px)'); // --- Recents drawer -------------------------------------------------------- - const openDrawer = () => body.classList.add('drawer-open'); - const closeDrawer = () => body.classList.remove('drawer-open'); + // Keep #sidebar-toggle's aria-pressed tracking the drawer while in the + // small-screen layout (editor-core.js owns it on desktop, where the same + // button collapses the sidebar instead). + const syncTogglePressed = () => { + const toggle = document.getElementById('sidebar-toggle'); + if (toggle !== null && mobile.matches) { + toggle.setAttribute('aria-pressed', String(body.classList.contains('drawer-open'))); + } + }; + + const openDrawer = () => { body.classList.add('drawer-open'); syncTogglePressed(); }; + const closeDrawer = () => { body.classList.remove('drawer-open'); syncTogglePressed(); }; // Intercept #sidebar-toggle at the document capture phase so the desktop // sidebar-collapse handler (in editor-core.js) does not also fire on mobile. @@ -29,6 +39,7 @@ event.stopImmediatePropagation(); event.preventDefault(); body.classList.toggle('drawer-open'); + syncTogglePressed(); } }, true); @@ -43,6 +54,8 @@ filePicker.addEventListener('click', () => { if (mobile.matches) closeDrawer(); }); } - // Leaving the small-screen layout clears any drawer state. - mobile.addEventListener('change', (ev) => { if (!ev.matches) closeDrawer(); }); + // Leaving the small-screen layout clears any drawer state; entering it + // starts with the drawer closed. + mobile.addEventListener('change', (ev) => { if (!ev.matches) closeDrawer(); else syncTogglePressed(); }); + syncTogglePressed(); })();