diff options
| author | Christophe Besson <cbesson@gmail.com> | 2026-09-17 12:56:13 +0200 |
|---|---|---|
| committer | Christophe Besson <cbesson@gmail.com> | 2026-09-17 12:56:13 +0200 |
| commit | 3e6d514663a5df1be3b2f0286c5f67f669d9c1d6 (patch) | |
| tree | 3f9702efa993078939b960e3c73a44bd08203c90 /packages | |
| parent | 3303a29cac47781f5e8c18d7d6653025349cbae3 (diff) | |
| download | meshbay-3e6d514663a5df1be3b2f0286c5f67f669d9c1d6.tar.gz | |
feat(hub): give the audio-language button a glyph of its own
The audio-track selector was drawn with `volume` — the same glyph the music
player uses for its level control, and the same one the browser draws a few
dozen pixels below it, since the video player mounts `<video controls>` and
gets the native volume speaker with it. One drawing, two meanings, in one
window.
`speech-pair` is two offset bubbles: the same line, said twice, which is what
the button chooses. Nothing crosses anything — the set is stroked with no
fill, and two overlapping outlines read as a tangle at 20 px — and it leaves
the conventional subtitle glyph free for the button planned beside it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UGY17EPph5LsLzePPXhUVc
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/icon.js | 9 | ||||
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/video-player.js | 2 |
2 files changed, 10 insertions, 1 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/icon.js b/packages/meshbay-hub/src/meshbay_hub/static/icon.js index ad9fb82..306158a 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/icon.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/icon.js @@ -91,6 +91,15 @@ const ICON_PATHS = { 'M7 23l-4-4 4-4', 'M21 13v2a4 4 0 0 1-4 4H3'], volume: ['M11 5L6 9H2v6h4l5 4z', 'M15.54 8.46a5 5 0 0 1 0 7.07', 'M19.07 4.93a10 10 0 0 1 0 14.14'], + // The spoken-language chooser, and deliberately not a speaker: the video + // player mounts `<video controls>`, so the browser's own volume speaker sits + // in the same window, and `volume` above is what the music player uses for + // the thing it actually names. Two offset bubbles — the same line, said + // twice — say "which language", which is what the button does. + // Nothing crosses anything: these are stroked with no fill, and two + // overlapping outlines read as a tangle at 20 px. + 'speech-pair': ['M11 2.5H4A1.5 1.5 0 0 0 2.5 4v4A1.5 1.5 0 0 0 4 9.5h1V12l3-2.5h3A1.5 1.5 0 0 0 12.5 8V4A1.5 1.5 0 0 0 11 2.5z', + 'M13 12.5h7A1.5 1.5 0 0 1 21.5 14v4a1.5 1.5 0 0 1-1.5 1.5h-1V22l-3-2.5h-3A1.5 1.5 0 0 1 11.5 18v-4a1.5 1.5 0 0 1 1.5-1.5z'], image: ['M5 3.5h14a1.5 1.5 0 0 1 1.5 1.5v14a1.5 1.5 0 0 1-1.5 1.5H5a1.5 1.5 0 0 1-1.5-1.5V5a1.5 1.5 0 0 1 1.5-1.5z', 'M7 9.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0', 'M20.5 15l-5-5-9.5 9.5'], diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js index 4970262..23b0699 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js @@ -1036,7 +1036,7 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) { <button class="video-close ${audioMenuOpen ? 'cast-active' : ''}" onClick=${() => setAudioMenuOpen(!audioMenuOpen)} title="${t('video.audio_track')}"> - <${Icon} name="volume" /></button> + <${Icon} name="speech-pair" /></button> ${audioMenuOpen && html` <div class="cast-picker"> ${audioTracks.map((track) => html` |