snowspeeder/hope-voice-api
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: play/pause icon toggle and disappearing conversation controls
Rebuild & Deploy / rebuild (push) Successful in 39s
Details

Browse Source 
- The play/pause button never swapped icons: app.js set the .hidden
  property on <svg> elements, which does not reflect to the hidden
  attribute (that IDL attribute is on HTMLElement, not SVGElement), so the
  CSS [hidden] rule never applied and both glyphs overlapped. Toggle a
  .playing class on the button and show/hide the icons via CSS instead.
- The Start conversation and mute buttons were pushed off-screen as the
  transcript grew: the workspace grid had no template-rows, so row 1
  auto-sized to the tall transcript and stretched the voice-console
  beyond the clipped 700px box. Pin the row with grid-template-rows:
  minmax(0,1fr) and give both grid columns min-height:0 so the transcript
  (and the inner #messages) scroll instead of expanding the layout.
This commit is contained in:
snowspeeder committed 2026-08-29 16:56:10 -04:00
1 parent 4f8eb00c9f
commit e2626ba54e
3 files changed
+19 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/index.html
+2 -2
View File
@@ -185,8 +185,8 @@
<svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 17a5 5 0 1 0-5-5"></path><path d="M11 17H6v-5"></path><path d="m19 5-4 4h-3"></path><path d="m15 9 4-4"></path></svg>
</button>
<button id="playPauseBtn" class="btn btn-icon media-play" aria-label="Play or pause" title="Play / pause">
<svg id="playIcon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7Z"></path></svg>
<svg id="pauseIcon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true" hidden><path d="M7 5h4v14H7zM13 5h4v14h-4z"></path></svg>
<svg id="playIcon" class="play-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7Z"></path></svg>
<svg id="pauseIcon" class="pause-icon" viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M7 5h4v14H7zM13 5h4v14h-4z"></path></svg>
</button>
<button id="fwdBtn" class="btn btn-icon" aria-label="Forward 10 seconds" title="Forward 10s">
<svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 17a5 5 0 1 1 5-5"></path><path d="M13 17h5v-5"></path><path d="m5 5 4 4h3"></path><path d="m9 9 4-4"></path></svg>