admin-valentin/WhisperLiveKit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

revamp chromium extension settings

Browse source
This commit is contained in:
Quentin Fuxa 2025-09-05 16:19:48 +02:00
parent 191680940b
commit f46528471b
4 changed files with 106 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
chrome-extension/live_transcription.js
View file

@ -33,6 +33,8 @@ const linesTranscriptDiv = document.getElementById("linesTranscript");
const timerElement = document.querySelector(".timer"); const timerElement = document.querySelector(".timer");
const themeRadios = document.querySelectorAll('input[name="theme"]'); const themeRadios = document.querySelectorAll('input[name="theme"]');
const microphoneSelect = document.getElementById("microphoneSelect"); const microphoneSelect = document.getElementById("microphoneSelect");
const settingsToggle = document.getElementById("settingsToggle");
const settingsDiv = document.querySelector(".settings");
@ -614,6 +616,13 @@ recordButton.addEventListener("click", toggleRecording);
if (microphoneSelect) { if (microphoneSelect) {
microphoneSelect.addEventListener("change", handleMicrophoneChange); microphoneSelect.addEventListener("change", handleMicrophoneChange);
} }
// Settings toggle functionality
settingsToggle.addEventListener("click", () => {
settingsDiv.classList.toggle("visible");
settingsToggle.classList.toggle("active");
});
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
try { try {
await enumerateMicrophones(); await enumerateMicrophones();

14
chrome-extension/popup.html
View file

@ -9,7 +9,6 @@
</head> </head>
<body> <body>
<div id="audioPermission"></div>
<div class="settings-container"> <div class="settings-container">
<button id="recordButton"> <button id="recordButton">
<div class="shape-container"> <div class="shape-container">
@ -23,6 +22,10 @@
</div> </div>
</button> </button>
<button id="settingsToggle" class="settings-toggle" title="Show/hide settings">
<img src="/web/src/settings.svg" alt="Settings" />
</button>
<div class="settings"> <div class="settings">
<div class="field"> <div class="field">
<label for="websocketInput">Websocket URL</label> <label for="websocketInput">Websocket URL</label>
@ -34,6 +37,8 @@
<select id="microphoneSelect"> <select id="microphoneSelect">
<option value="">Default Microphone</option> <option value="">Default Microphone</option>
</select> </select>
<div id="audioPermission"></div>
</div> </div>
<div class="theme-selector-container"> <div class="theme-selector-container">
@ -41,26 +46,25 @@
<input type="radio" id="theme-system" name="theme" value="system" /> <input type="radio" id="theme-system" name="theme" value="system" />
<label for="theme-system" title="System"> <label for="theme-system" title="System">
<img src="/web/src/system_mode.svg" alt="" /> <img src="/web/src/system_mode.svg" alt="" />
<span>System</span> <!-- <span>System</span> -->
</label> </label>
<input type="radio" id="theme-light" name="theme" value="light" /> <input type="radio" id="theme-light" name="theme" value="light" />
<label for="theme-light" title="Light"> <label for="theme-light" title="Light">
<img src="/web/src/light_mode.svg" alt="" /> <img src="/web/src/light_mode.svg" alt="" />
<span>Light</span> <!-- <span>Light</span> -->
</label> </label>
<input type="radio" id="theme-dark" name="theme" value="dark" /> <input type="radio" id="theme-dark" name="theme" value="dark" />
<label for="theme-dark" title="Dark"> <label for="theme-dark" title="Dark">
<img src="/web/src/dark_mode.svg" alt="" /> <img src="/web/src/dark_mode.svg" alt="" />
<span>Dark</span> <!-- <span>Dark</span> -->
</label> </label>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>

84
chrome-extension/web/live_transcription.css
View file

@ -80,6 +80,41 @@ body {
color: var(--text); color: var(--text);
} }
.settings-toggle {
margin-top: 4px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background-color: var(--button-bg);
cursor: pointer;
transition: all 0.3s ease;
/* border: 1px solid var(--button-border); */
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.settings-toggle:hover {
background-color: var(--chip-bg);
}
.settings-toggle img {
width: 24px;
height: 24px;
opacity: 0.7;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.settings-toggle:hover img {
opacity: 1;
}
.settings-toggle.active img {
transform: rotate(80deg);
}
/* Record button */ /* Record button */
#recordButton { #recordButton {
width: 50px; width: 50px;
@ -177,16 +212,22 @@ body {
.settings-container { .settings-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: flex-start;
gap: 15px; gap: 15px;
margin-top: 20px; margin-top: 20px;
flex-wrap: wrap;
} }
.settings { .settings {
display: flex; display: none;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
transition: opacity 0.3s ease;
}
.settings.visible {
display: flex;
} }
.field { .field {
@ -406,37 +447,66 @@ label {
} }
/* for smaller screens */ /* for smaller screens */
@media (max-width: 768px) { /* @media (max-width: 450px) {
.settings-container { .settings-container {
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
align-items: center;
} }
.settings { .settings {
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
width: 100%;
} }
.field { .field {
align-items: center; align-items: center;
width: 100%;
} }
#websocketInput, #websocketInput,
#microphoneSelect { #microphoneSelect {
min-width: 200px; min-width: 200px;
max-width: 400px; max-width: 100%;
} }
.theme-selector-container { .theme-selector-container {
margin-top: 10px; margin-top: 10px;
} }
} } */
@media (max-width: 480px) { /* @media (max-width: 768px) and (min-width: 451px) {
.settings-container {
gap: 10px;
}
.settings {
gap: 8px;
}
#websocketInput,
#microphoneSelect {
min-width: 150px;
max-width: 300px;
}
} */
/* @media (max-width: 480px) {
body { body {
margin: 10px; margin: 10px;
} }
.settings-toggle {
width: 35px;
height: 35px;
}
.settings-toggle img {
width: 20px;
height: 20px;
}
.settings { .settings {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -457,7 +527,7 @@ label {
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
} } */
html html

1
chrome-extension/web/src/settings.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm7-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 982 B