HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

feat(settings): UI improvements (#448)

Browse Source 
* Fixed CSS for Settings.tsx + new Theme Shop design

* reformat

* More changes to UI CSS

* Small CSS fixes for Settings.tsx, Account, Bots

* Updated theme shop, settings pages, cleanup

* chore: force sync language submodule

* fix(sidebar): prevent items from shrinking

* fix(push): fix timestamp and icon for push notifications

* fix(voice): hide grant permission button after grant

* chore: hide new shop / chevron before merge

* chore(ci): bump node to v16 in dockerfile

* fix(sidebar): change width of channel sidebar

Co-authored-by: trashtemp <96388163+trashtemp@users.noreply.github.com>
This commit is contained in:
Paul Makles
2021-12-20 13:37:21 +00:00
committed by GitHub
parent 535a40df0c
commit 9298f205fc
23 changed files with 744 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/pages/settings/panes/Audio.tsx
View File

@@ -57,11 +57,11 @@ export function Component() {
return () => {
if (mediaStream) {
// close microphone access on unmount
mediaStream.getTracks().forEach(track => {
track.stop()
})
mediaStream.getTracks().forEach((track) => {
track.stop();
});
}
}
};
}, [mediaStream]);
useEffect(() => {
@@ -90,61 +90,109 @@ export function Component() {
return (
<>
<div class={styles.audio}>
<h3>
<Text id="app.settings.pages.audio.input_device" />
</h3>
{!permission && (
<div className={styles.grant_permission}>
<span className={styles.description}>
<Text id="app.settings.pages.audio.tip_grant_permission" />
</span>
<Button
compact
onClick={(e) => handleAskForPermission(e)}
error>
<Text id="app.settings.pages.audio.button_grant" />
</Button>
</div>
)}
<ComboBox
value={window.localStorage.getItem("audioInputDevice") ?? 0}
onChange={(e) =>
changeAudioDevice(e.currentTarget.value, "input")
}>
{mediaDevices
?.filter((device) => device.kind === "audioinput")
.map((device) => {
return (
<option
value={device.deviceId}
key={device.deviceId}>
{device.label || (
<Text id="app.settings.pages.audio.device_label_NA" />
)}
</option>
);
})}
</ComboBox>
{error && error.name === "NotAllowedError" && (
<Overline error="AudioPermissionBlock" type="error" block />
<Tip error hideSeparator>
<Text id="app.settings.pages.audio.tip_grant_permission" />
</Tip>
)}
{error && permission === "prompt" && (
<Tip>
<TextReact
id="app.settings.pages.audio.tip_retry"
fields={{
retryBtn: (
<a onClick={handleAskForPermission}>
<Text id="app.settings.pages.audio.button_retry" />
</a>
),
}}
/>
<Tip error hideSeparator>
<Text id="app.settings.pages.audio.tip_retry" />
<a onClick={handleAskForPermission}>
<Text id="app.settings.pages.audio.button_retry" />
</a>
.
</Tip>
)}
<div className={styles.audioRow}>
<div className={styles.select}>
<h3>
<Text id="app.settings.pages.audio.input_device" />
</h3>
<div class={styles.audioBox}>
<ComboBox
value={
window.localStorage.getItem(
"audioInputDevice",
) ?? 0
}
onChange={(e) =>
changeAudioDevice(
e.currentTarget.value,
"input",
)
}>
{mediaDevices
?.filter(
(device) =>
device.kind === "audioinput",
)
.map((device) => {
return (
<option
value={device.deviceId}
key={device.deviceId}>
{device.label || (
<Text id="app.settings.pages.audio.device_label_NA" />
)}
</option>
);
})}
</ComboBox>
{!permission && (
<Button
compact
onClick={(e) => handleAskForPermission(e)}
error>
<Text id="app.settings.pages.audio.button_grant" />
</Button>
)}
{error && error.name === "NotAllowedError" && (
<Overline
error="AudioPermissionBlock"
type="error"
block
/>
)}
</div>
</div>
<div className={styles.select}>
<h3>
<Text id="app.settings.pages.audio.output_device" />
</h3>
{/* TOFIX: create audio output combobox*/}
<ComboBox
value={
window.localStorage.getItem(
"audioOutputDevice",
) ?? 0
}
onChange={(e) =>
changeAudioDevice(
e.currentTarget.value,
"output",
)
}>
{mediaDevices
?.filter(
(device) => device.kind === "audiooutput",
)
.map((device) => {
return (
<option
value={device.deviceId}
key={device.deviceId}>
{device.label || (
<Text id="app.settings.pages.audio.device_label_NA" />
)}
</option>
);
})}
</ComboBox>
</div>
</div>
</div>
</>
);